zer0-os · colbr · Apr 6, 2022 · Apr 6, 2022 · Apr 6, 2022 · Apr 6, 2022
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 
 import styles from './Image.module.scss';
 // import placeholder from './'
@@ -18,18 +18,16 @@ const Image = (props: any) => {
 		}
 	};
 
-	const load = () => setLoaded(true);
+	const load = () => {
+		setLoaded(true);
+	};
+
 	const err = (e: any) => {
 		if (props.src) {
 			setTryVideo(true);
 		}
 	};
 
-	useEffect(() => {
-		setTryVideo(false);
-		setLoaded(false);
-	}, [props.src]);
-
 	return (
 		<div
 			ref={containerRef}

diff --git a/src/containers/DAO/pages/Container.module.scss b/src/containers/DAO/pages/Container.module.scss
@@ -26,11 +26,7 @@
 				margin-right: 0 !important;
 
 				&:not(:first-child) {
-					margin-top: 8px;
-				}
-
-				&:last-child {
-					display: none;
+					margin-top: 16px;
 				}
 			}
 		}
@@ -39,11 +35,19 @@
 	.Links {
 		padding: 8px 16px;
 
+		@media only screen and (max-width: 700px) {
+			margin-top: 16px;
+		}
+
 		> a {
 			color: var(--color-grey-lighter-2);
 			font-size: 24px;
 			font-weight: 700;
 
+			@media only screen and (max-width: 700px) {
+				font-size: 18px;
+			}
+
 			transition: color var(--animation-time-short) ease-in-out;
 
 			&:not(:first-of-type) {

diff --git a/src/containers/DAO/pages/DAOList/DAOList.tsx b/src/containers/DAO/pages/DAOList/DAOList.tsx
@@ -78,12 +78,6 @@ const DAOList: React.FC = () => {
 					isLoading={isLoading}
 					title={daoZnas?.length ?? 'Failed to find DAOs'}
 				/>
-				<StatsWidget
-					className="normalView"
-					fieldName={'WILD Holders'}
-					isLoading={false}
-					title={'TO IMPLEMENT'}
-				/>
 			</ul>
 			<DAOTable daoZnas={daoZnas} />
 		</div>

diff --git a/src/containers/DAO/pages/DAOPage/DAOPage.module.scss b/src/containers/DAO/pages/DAOPage/DAOPage.module.scss
@@ -2,18 +2,18 @@
 	display: flex;
 	align-items: center;
 
-	color: #bfbfbf;
-	font-size: 12px;
+	color: var(--color-text-primary);
+	font-size: 14px;
 	font-weight: bold;
 
 	&:hover {
-		color: #bfbfbf;
-		text-shadow: none;
+		color: var(--color-text-primary);
+		text-shadow: var(--glow-text-white);
 	}
 
 	svg {
-		height: 16px;
-		width: 16px;
+		height: 1rem;
+		width: 1rem;
 		margin-right: 4px;
 	}
 }
@@ -28,6 +28,10 @@
 	h1 {
 		font-size: 24px;
 		margin-left: 8px;
+
+		@media only screen and (max-width: 500px) {
+			font-size: 18px;
+		}
 	}
 
 	.Icon {

diff --git a/src/containers/DAO/pages/DAOPage/DAOPage.tsx b/src/containers/DAO/pages/DAOPage/DAOPage.tsx
@@ -132,19 +132,19 @@ const DAOPage: React.FC = () => {
 				) : dao ? (
 					<>
 						<Link className={styles.Back} to={ROUTES.ZDAO}>
-							<ArrowLeft color="#BFBFBF" /> All DAOs
+							<ArrowLeft /> All DAOs
 						</Link>
-						<div className={styles.Header}>
-							<div className={styles.Icon}>
-								<img alt="dao logo" src={defaultDaoIcon} />
-							</div>
-							<h1>{daoData?.title}</h1>
-						</div>
 						<ul className={genericStyles.Stats}>
+							<div className={styles.Header}>
+								<div className={styles.Icon}>
+									<img alt="dao logo" src={defaultDaoIcon} />
+								</div>
+								<h1>{daoData?.title}</h1>
+							</div>
 							<div className={styles.Stat}>
 								<StatsWidget
 									className="normalView"
-									fieldName="Value"
+									fieldName="Total Value"
 									isLoading={isLoadingAssets}
 									// Millify if above
 									title={
@@ -155,13 +155,6 @@ const DAOPage: React.FC = () => {
 									}
 								/>
 							</div>
-							<div className={styles.Stat}>
-								<StatsWidget
-									className="normalView"
-									fieldName="WILD Holders"
-									title={'TO IMPLEMENT'}
-								/>
-							</div>
 						</ul>
 						<Page />
 					</>

diff --git a/src/containers/DAO/pages/DAOPage/Transactions/Transactions.helpers.tsx b/src/containers/DAO/pages/DAOPage/Transactions/Transactions.helpers.tsx
@@ -44,14 +44,14 @@ export const toHistoryItem = (
 	let valueString;
 	if (Object.keys(transaction.asset).includes('value')) {
 		const asAny = transaction.asset as any;
-		if (Number(asAny.value) < 0.01) {
-			valueString = formatBigNumber(
-				formatUnits(asAny.value as string, asAny.decimals ?? (18 as number)),
-			);
+		const formattedValue = formatUnits(
+			asAny.value as string,
+			asAny.decimals ?? (18 as number),
+		);
+		if (Number(formattedValue) < 1) {
+			valueString = formatBigNumber(formattedValue);
 		} else {
-			valueString = formatNumber(
-				formatUnits(asAny.value as string, asAny.decimals ?? (18 as number)),
-			);
+			valueString = formatNumber(formattedValue);
 		}
 	}
 

diff --git a/src/containers/DAO/pages/DAOPage/Transactions/Transactions.tsx b/src/containers/DAO/pages/DAOPage/Transactions/Transactions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 // Components
 import History from './components/History/History';
 import { LoadingIndicator } from 'components';
@@ -26,6 +26,11 @@ const Transactions: React.FC<TransactionsProps> = ({
 	const networkType = chainIdToNetworkType(chainId);
 	const etherscanUri = getEtherscanUri(networkType);
 
+	const formattedTransactions = useMemo(() => {
+		return (transactions ?? []).map((tx) => toHistoryItem(tx, etherscanUri));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [transactions]);
+
 	if (isLoading) {
 		return (
 			<LoadingIndicator
@@ -42,11 +47,7 @@ const Transactions: React.FC<TransactionsProps> = ({
 		);
 	}
 
-	return (
-		<History
-			items={transactions?.map((tx) => toHistoryItem(tx, etherscanUri))}
-		/>
-	);
+	return <History items={formattedTransactions} />;
 };
 
 export default Transactions;