feat: only show goal elements if project has one, new comp for no goal

src/components/molecules/LiveProject.tsx

@@ -115,8 +115,12 @@ export const LiveProject = ({ project}: ILiveProject) => {
 								<Wrap >
 									<Text fontSize="18px">Raised: </Text>
 									<SatoshiAmount wrapperClassName={classes.satoshiText} fontSize="18px" marginTop="2px !important">{project.balance}</SatoshiAmount>
-									<Text fontSize="18px">{`, ${percentage} % `}</Text>
-									<Text fontSize="18px">of goal</Text>
+									{project.fundingGoal
+&& <>
+	<Text fontSize="18px">{`, ${percentage} % `}</Text>
+	<Text fontSize="18px">of goal</Text>
+</>
+									}
 								</Wrap>
 							</VStack>
 						</Stack>

src/components/molecules/CircularFundProgress.tsx → src/components/molecules/ProjecBalanceCircularProgress.tsx

@@ -8,8 +8,8 @@ import { SatoshiIcon } from '../icons';
 import { createUseStyles } from 'react-jss';
 import { commaFormatted } from '../../utils/helperFunctions';
 
-interface ICircularFundProgress {
-	amount: number;
+interface IProjectBalanceCircularProgress {
+	balance: number;
 	goal: number;
 	rate: number
 	loading: boolean;
@@ -34,21 +34,25 @@ const useStyles = createUseStyles({
 	},
 });
 
-export const CircularFundProgress = ({ goal, rate, amount, loading }: ICircularFundProgress) => {
-	const classes = useStyles();
+const BTCBalance = ({ balance }: { balance: number }) => {
 	const isDark = isDarkMode();
-	const amountUSD = (amount * rate).toFixed(2);
-	const percentage = (parseFloat(amountUSD) / goal) * 100;
-
-	const [display, setDisplay] = useState(false);
+	const classes = useStyles();
+	const displaySatoshis = balance < 1000000;
 
-	let bitCoins = 0;
+	return (
+		displaySatoshis
+			? <><SatoshiIcon isDark={isDark} className={classes.satoshi} /> {commaFormatted(balance)}</>
+			: <><BsCurrencyBitcoin fontSize="30px" />{parseFloat((balance / 100000000).toFixed(4))}</>
+	);
+};
 
-	if (amount >= 1000000) {
-		bitCoins = parseFloat((amount / 100000000).toFixed(4));
-	}
+export const ProjectBalanceCircularProgress = ({ goal, rate, balance, loading }: IProjectBalanceCircularProgress) => {
+	const classes = useStyles();
+	const isDark = isDarkMode();
+	const balanceUSD = (balance * rate).toFixed(2);
+	const percentage = (parseFloat(balanceUSD) / goal) * 100;
 
-	// Const percentage = 100;
+	const [display, setDisplay] = useState(false);
 
 	const getDisplayPercent = (percent: number) => {
 		if (percent < 1) {
@@ -71,20 +75,11 @@ export const CircularFundProgress = ({ goal, rate, amount, loading }: ICircularF
 
 	const getStat = () => (
 		<Stat textAlign="center" borderRadius="50%" >
-			<StatLabel fontSize="12px" color={isDark ? 'brand.textWhite' : 'brand.textGrey'}>Funded</StatLabel>
+			<StatLabel fontSize="12px" color={isDark ? 'brand.textWhite' : 'brand.textGrey'}>Raised</StatLabel>
 			<StatNumber className="amount-label-sat" position="relative" display={!display ? 'flex' : 'none'}>
-				{
-					bitCoins ? <>
-						<BsCurrencyBitcoin fontSize="30px" />{bitCoins}
-					</>
-						: <>
-							<SatoshiIcon isDark={isDark} className={classes.satoshi} /> {commaFormatted(amount)}
-						</>
-
-				}
-
+				<BTCBalance balance={balance}/>
 			</StatNumber>
-			<StatNumber className="amount-label-usd" display={display ? 'block' : 'none'} position="relative">{'$'}{amountUSD} </StatNumber>
+			<StatNumber className="amount-label-usd" display={display ? 'block' : 'none'} position="relative">{'$'}{balanceUSD} </StatNumber>
 			<StatHelpText fontSize="12px" color={isDark ? 'brand.textWhite' : 'brand.textGrey'}>{`${getDisplayPercent(percentage)}% of $${commaFormatted(goal)}`}</StatHelpText>
 		</Stat>
 	);

src/components/molecules/ProjectBalance.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Box, Text } from '@chakra-ui/layout';
+import { SatoshiIcon } from '../icons';
+import { commaFormatted } from '../../utils/helperFunctions';
+import { BsCurrencyBitcoin } from 'react-icons/bs';
+
+interface IProjectBalance {
+	balance: number,
+	rate: number,
+}
+
+const USDBalance = ({ balance }: { balance: number }) => (
+	<>
+		<Text color="brand.primary" fontSize="40px" mr={1}>$</Text><Text color="brand.primary" fontWeight="bold" fontSize="5xl">{(balance).toFixed(2)}</Text>
+	</>
+);
+
+const BTCBalance = ({ balance }: { balance: number }) => {
+	// Let bitcoins = 0;
+	const displaySatoshis = balance < 1000000;
+
+	return (
+		displaySatoshis
+			? <><SatoshiIcon scale={1.5} color="brand.primary" mr={1} /><Text color="brand.primary" fontWeight="bold" fontSize="5xl">{commaFormatted(balance)}</Text></>
+			: <><BsCurrencyBitcoin fontSize="40px" color="#20ECC7" /><Text color="brand.primary" fontWeight="bold" fontSize="5xl">{parseFloat((balance / 100000000).toFixed(4))}</Text></>
+	);
+};
+
+export const ProjectBalance = ({balance, rate}: IProjectBalance) => {
+	const [hover, setHover] = useState(false);
+
+	return (
+		<Box>
+			<Box display="flex" justifyContent="center" alignItems="center" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+				{hover ? <USDBalance balance={balance * rate}/> : <BTCBalance balance={balance}/>
+
+				}
+			</Box>
+			<Text color="brand.textGrey" fontSize="xs" textAlign="center">RAISED</Text>
+		</Box>
+
+	);
+};

src/components/molecules/ProjectCard.tsx

@@ -141,7 +141,8 @@ export const ProjectCard = ({ title, imgSrc, open, name, className, project, ...
 							<Text fontSize="16px" fontWeight={600}>{title}</Text>
 						</HStack>
 						<HStack alignItems="center" justifyContent={'space-between'} width="100%">
-							<CircularProgress
+              {project.fundingGoal
+					    && <CircularProgress
 								className={classes.circularProgress}
 								value={percentage}
 								size="55px"
@@ -152,6 +153,7 @@ export const ProjectCard = ({ title, imgSrc, open, name, className, project, ...
 									<Text fontSize="12px">{`${percentage}%`}</Text>
 								</Box>
 							</CircularProgress>
+              }
 							<VStack alignItems="center" justifyContent="center" spacing="0">
 								<Text fontSize="14px" fontWeight={600}>{getProjectBackers()}</Text>
 								<Text fontSize="12px">backers</Text>

src/components/molecules/index.ts

@@ -1,5 +1,5 @@
 export * from './IdComponent';
-export * from './CircularFundProgress';
+export * from './ProjecBalanceCircularProgress';
 export * from './IdBar';
 export * from './ConnectTwitter';
 export * from './ProjectCard';
@@ -11,3 +11,4 @@ export * from './AddSponsor';
 export * from './LiveProject';
 export * from './ProjectBars';
 export * from './SwipeLiveProject';
+export * from './ProjectBalance';

src/pages/project/Activity/Countdown.tsx

@@ -18,6 +18,6 @@ export const Countdown = ({ endDate }: { endDate: string }) => {
 	}, [endDate]);
 
 	return (
-		<Text>{`${countDown}`}</Text>
+		<Text textAlign="center">{`${countDown}`}</Text>
 	);
 };

src/pages/project/Activity/InfoPage.tsx

@@ -1,7 +1,7 @@
 import { Box, Text, VStack } from '@chakra-ui/layout';
 import React from 'react';
 import { SatoshiIcon } from '../../../components/icons';
-import { CircularFundProgress } from '../../../components/molecules';
+import { ProjectBalanceCircularProgress, ProjectBalance } from '../../../components/molecules';
 import { IdBar } from '../../../components/molecules/IdBar';
 import { ButtonComponent, FundingStatus } from '../../../components/ui';
 import { isMobileMode } from '../../../utils';
@@ -44,9 +44,10 @@ export const InfoPage = ({
 			{isMobile && <Button className={classes.fundButton} onClick={handleFundClick}>
 				<Text fontSize="12px">Project</Text>
 			</Button>}
-			<FundingStatus open={project.active} />
-			{showCountdown() && <Countdown endDate={project.expiresAt}/>}
-			<CircularFundProgress loading={loading} rate={btcRate} goal={project.fundingGoal} amount={project.balance} />
+			{project.fundingGoal
+				? <ProjectBalanceCircularProgress loading={loading} rate={btcRate} goal={project.fundingGoal} balance={project.balance} />
+				: <ProjectBalance balance={project.balance} rate={btcRate}/>
+			}
 			{project.active && <ButtonComponent
 				primary
 				standard