From 38a8065c9f244eadf6305629a16cfa823d156b87 Mon Sep 17 00:00:00 2001 From: Fabrice Francois Date: Wed, 13 Oct 2021 12:21:51 -0400 Subject: [PATCH] Feature / DAO-335 (#481) * added new fallback icon and portrait mode styling * final changes * cleaned up useEffect * removed createdAt field from finance subgraph call * fixed issue with resize event listener not being removed --- .../src/containers/DAO/DaoFinancePage.tsx | 119 ++++++++++++------ .../components/BalanceCard/BalanceCard.tsx | 33 ++--- .../FinanceSideCard/FinanceSideCard.tsx | 16 +-- .../src/containers/HomePage/HomePage.tsx | 8 +- .../govern-console/src/queries/finance.tsx | 2 - 5 files changed, 113 insertions(+), 65 deletions(-) diff --git a/packages/govern-console/src/containers/DAO/DaoFinancePage.tsx b/packages/govern-console/src/containers/DAO/DaoFinancePage.tsx index 5efb64d7..a24960d7 100644 --- a/packages/govern-console/src/containers/DAO/DaoFinancePage.tsx +++ b/packages/govern-console/src/containers/DAO/DaoFinancePage.tsx @@ -18,11 +18,35 @@ import { trackEvent, EventType } from 'services/analytics'; import { Error } from 'utils/Error'; type Props = { - executorId: string; token: string; daoName: string; + executorId: string; }; +const SideCard = styled(GridItem).attrs(({ layoutIsSmall, isMediumPortrait }) => { + let row = layoutIsSmall ? '1/2' : '1/3'; + let column = layoutIsSmall ? '1/-1' : '3/4'; + + if (isMediumPortrait) { + row = '2/3'; + column = '1/7'; + } + + return { gridRow: row, gridColumn: column }; +})``; + +const ListContainer = styled(GridItem).attrs(({ layoutIsSmall, isMediumPortrait }) => { + let row = layoutIsSmall ? '2/-1' : '2/3'; + let column = layoutIsSmall ? '1/-1' : '1/3'; + + if (isMediumPortrait) { + row = '3/4'; + column = '1/7'; + } + + return { gridRow: row, gridColumn: column }; +})``; + const HeaderContainer = styled.div` display: flex; align-items: center; @@ -64,17 +88,35 @@ const ListTitle = styled.p` `; const DaoFinancePage: React.FC = ({ executorId, daoName, token: mainToken }) => { - const { provider } = useWallet(); + const toast = useToast(); + const { layoutName } = useLayout(); + + const { provider, isConnected } = useWallet(); + const { data: finances, loading: isLoading } = useFinanceQuery(executorId); + const [tokens, setTokens] = useState({}); - const [isTransferModalOpen, setIsTransferModalOpen] = useState(false); const [transactions, setTransactions] = useState([]); + const [isTransferModalOpen, setIsTransferModalOpen] = useState(false); - const { data: finances, loading: isLoading } = useFinanceQuery(executorId); - const context: any = useWallet(); - const { isConnected } = context; - const { layoutName } = useLayout(); + // TODO: Future refactor - extract both isSmall and isMediumPortrait into one hook const layoutIsSmall = useMemo(() => layoutName === 'small', [layoutName]); - const toast = useToast(); + const checkIfMediumPortrait = useCallback( + () => layoutName === 'medium' && /portrait/.test(window.screen.orientation.type), + [layoutName], + ); + + const [isMediumPortrait, updateIsMediumPortrait] = useState(() => + checkIfMediumPortrait(), + ); + + const setMediumPortrait = useCallback(() => { + updateIsMediumPortrait(checkIfMediumPortrait); + }, [checkIfMediumPortrait]); + + useEffect(() => { + window.addEventListener('resize', setMediumPortrait); + return () => window.removeEventListener('resize', setMediumPortrait); + }, [setMediumPortrait]); useEffect(() => { if (!isLoading && finances) { @@ -82,9 +124,8 @@ const DaoFinancePage: React.FC = ({ executorId, daoName, token: mainToken prepareTransactions(); } - // TODO: Potentially refactor to avoid setting state often async function getCurrentBalances() { - const balances: Balance = getMigrationBalances(executorId); + const balances: Balance = { ...getMigrationBalances(executorId) }; let deposit: Deposit; let address: string; for (deposit of finances.deposits) { @@ -116,9 +157,9 @@ const DaoFinancePage: React.FC = ({ executorId, daoName, token: mainToken } // Ignore eth TODO: more info needed - // if (constants.AddressZero in balances) { - // delete balances[constants.AddressZero]; - // } + if (constants.AddressZero in balances) { + delete balances[constants.AddressZero]; + } let withdraw: Withdraw; for (withdraw of finances.withdraws) { @@ -204,33 +245,33 @@ const DaoFinancePage: React.FC = ({ executorId, daoName, token: mainToken } return ( - - + + - - -
- {!layoutIsSmall && ( - - Finance - - - )} - - Transactions - {RenderTransactionCard()} - - -
- + + {!layoutIsSmall && ( + + + Finance + + + + )} + + + Transactions + {RenderTransactionCard()} + + + ); }; diff --git a/packages/govern-console/src/containers/DAO/components/BalanceCard/BalanceCard.tsx b/packages/govern-console/src/containers/DAO/components/BalanceCard/BalanceCard.tsx index ae6eba20..a383075f 100644 --- a/packages/govern-console/src/containers/DAO/components/BalanceCard/BalanceCard.tsx +++ b/packages/govern-console/src/containers/DAO/components/BalanceCard/BalanceCard.tsx @@ -1,13 +1,11 @@ -import { memo } from 'react'; import styled from 'styled-components'; - -import ETHIcon from 'images/pngs/eth_logo.png'; +import { memo, useState } from 'react'; type Props = { - token: string; usd: string; - symbol: string; icon: string; + token: string; + symbol: string; }; const Container = styled.div` @@ -51,22 +49,29 @@ const USDEquivalent = styled.p` line-height: 21px; `; +const FallbackIcon = styled.div` + width: 24px; + height: 24px; + border-radius: 32px; + background: linear-gradient(107.79deg, #00c2ff 1.46%, #01e8f7 100%); +`; + const BalanceCard: React.FC = ({ icon, token, usd, symbol }) => { + const [error, setError] = useState(false); + return ( - { - e.target.onerror = null; - e.target.src = ETHIcon; - }} - /> + {error ? ( + + ) : ( + setError(true)} /> + )} + {`${token} ${symbol}`} - {usd && {`~${usd} USD`}} + {usd ? `~${usd} USD` : 'USD value unknown'} ); diff --git a/packages/govern-console/src/containers/DAO/components/FinanceSideCard/FinanceSideCard.tsx b/packages/govern-console/src/containers/DAO/components/FinanceSideCard/FinanceSideCard.tsx index 69ce4d96..349e8fea 100644 --- a/packages/govern-console/src/containers/DAO/components/FinanceSideCard/FinanceSideCard.tsx +++ b/packages/govern-console/src/containers/DAO/components/FinanceSideCard/FinanceSideCard.tsx @@ -27,6 +27,7 @@ const MainTokenBalance = styled.div` gap: 4px; display: flex; flex-direction: column; + min-width: 173px; `; const Token = styled.p` @@ -93,6 +94,8 @@ const FinanceSideCard: React.FC = ({ tokens, mainToken, onNewTransfer }) const { layoutName } = useLayout(); const layoutIsSmall = useMemo(() => layoutName === 'small', [layoutName]); + + // TODO: remove when implementing skeleton loading const { symbol, amount, price, numberOfAssets } = useMemo(() => { return { amount: tokens[mainToken]?.amountForHuman || 0.0, @@ -104,13 +107,8 @@ const FinanceSideCard: React.FC = ({ tokens, mainToken, onNewTransfer }) useEffect(() => { // Assets shown on medium to large screens - if (!layoutIsSmall) { - setDisplayAssets(true); - } - - if (layoutIsSmall) { - setDisplayAssets(false); - } + if (!layoutIsSmall) setDisplayAssets(true); + else setDisplayAssets(false); }, [layoutIsSmall]); function sortAssets(asset: any, nextAsset: any) { @@ -121,7 +119,9 @@ const FinanceSideCard: React.FC = ({ tokens, mainToken, onNewTransfer }) {`${amount} ${symbol}`} - {price && {`~${formatter.format(Number(price) * Number(amount))} USD`}} + + {price ? `~${formatter.format(Number(price) * Number(amount))} USD` : 'USD value unknown'} + diff --git a/packages/govern-console/src/containers/HomePage/HomePage.tsx b/packages/govern-console/src/containers/HomePage/HomePage.tsx index 07ad2158..06e6b00f 100644 --- a/packages/govern-console/src/containers/HomePage/HomePage.tsx +++ b/packages/govern-console/src/containers/HomePage/HomePage.tsx @@ -15,6 +15,10 @@ import { trackPage } from 'services/analytics'; import ConsoleMainPage from 'containers/Console/ConsoleMainPage'; import { ModalsProvider } from 'containers/HomePage/ModalsContext'; +const MainContainer = styled(Main)` + width: 100%; +`; + const Container = styled.div` display: grid; grid-gap: 16px; @@ -47,7 +51,7 @@ const HomePage = () => { return ( -
+
@@ -62,7 +66,7 @@ const HomePage = () => {
+ ); }; diff --git a/packages/govern-console/src/queries/finance.tsx b/packages/govern-console/src/queries/finance.tsx index 660d237f..02d78720 100644 --- a/packages/govern-console/src/queries/finance.tsx +++ b/packages/govern-console/src/queries/finance.tsx @@ -10,7 +10,6 @@ export const TRANSFERS = gql` sender token reference - createdAt typename: __typename } withdraws { @@ -20,7 +19,6 @@ export const TRANSFERS = gql` from token reference - createdAt typename: __typename } }