Feature / DAO-335

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,27 +88,44 @@ const ListTitle = styled.p`
 `;
 
 const DaoFinancePage: React.FC<Props> = ({ 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<FinanceToken>({});
-  const [isTransferModalOpen, setIsTransferModalOpen] = useState<boolean>(false);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [isTransferModalOpen, setIsTransferModalOpen] = useState<boolean>(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<boolean>(() =>
+    checkIfMediumPortrait(),
+  );
+
+  const setMediumPortrait = useCallback(() => {
+    updateIsMediumPortrait(checkIfMediumPortrait);
+  }, [checkIfMediumPortrait]);
+
+  useEffect(() => {
+    window.addEventListener('resize', setMediumPortrait);
+    return () => window.removeEventListener('resize', setMediumPortrait);
+  }, [setMediumPortrait]);
 
   useEffect(() => {
     if (!isLoading && finances) {
       getCurrentBalances();
       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<Props> = ({ 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<Props> = ({ executorId, daoName, token: mainToken
   }
 
   return (
-    <Grid gap={24} columns="9">
-      <GridItem gridColumn={layoutIsSmall ? '1/-1' : '7/10'}>
+    <Grid gap={24}>
+      <SideCard layoutIsSmall={layoutIsSmall} isMediumPortrait={isMediumPortrait}>
         <FinanceSideCard tokens={tokens} mainToken={mainToken} onNewTransfer={openTransferModal} />
-      </GridItem>
-      <GridItem
-        gridRow={layoutIsSmall ? '2/-1' : '1/2'}
-        gridColumn={layoutIsSmall ? '1/-1' : '1/7'}
-      >
-        <div>
-          {!layoutIsSmall && (
-            <HeaderContainer>
-              <Title>Finance</Title>
-              <CustomActionButton label="New Transfer" onClick={openTransferModal} />
-            </HeaderContainer>
-          )}
-          <TransactionListContainer>
-            <ListTitle>Transactions</ListTitle>
-            {RenderTransactionCard()}
-          </TransactionListContainer>
-          <DaoTransferModal
-            opened={isTransferModalOpen}
-            close={close}
-            daoName={daoName}
-            executorId={executorId}
-          />
-        </div>
-      </GridItem>
+      </SideCard>
+      {!layoutIsSmall && (
+        <GridItem
+          gridRow={layoutIsSmall ? '2/-1' : '1/2'}
+          gridColumn={layoutIsSmall ? '1/-1' : '1/3'}
+        >
+          <HeaderContainer>
+            <Title>Finance</Title>
+            <CustomActionButton label="New Transfer" onClick={openTransferModal} />
+          </HeaderContainer>
+        </GridItem>
+      )}
+      <ListContainer layoutIsSmall={layoutIsSmall} isMediumPortrait={isMediumPortrait}>
+        <TransactionListContainer>
+          <ListTitle>Transactions</ListTitle>
+          {RenderTransactionCard()}
+        </TransactionListContainer>
+        <DaoTransferModal
+          opened={isTransferModalOpen}
+          close={close}
+          daoName={daoName}
+          executorId={executorId}
+        />
+      </ListContainer>
     </Grid>
   );
 };

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<Props> = ({ icon, token, usd, symbol }) => {
+  const [error, setError] = useState<boolean>(false);
+
   return (
     <Container>
       <IconContainer>
-        <Icon
-          src={icon || ETHIcon}
-          alt="token logo"
-          onError={(e: any) => {
-            e.target.onerror = null;
-            e.target.src = ETHIcon;
-          }}
-        />
+        {error ? (
+          <FallbackIcon />
+        ) : (
+          <Icon src={icon} alt="token logo" onError={() => setError(true)} />
+        )}
       </IconContainer>
+
       <Balance>
         <Crypto>{`${token} ${symbol}`}</Crypto>
-        {usd && <USDEquivalent>{`~${usd} USD`}</USDEquivalent>}
+        <USDEquivalent>{usd ? `~${usd} USD` : 'USD value unknown'}</USDEquivalent>
       </Balance>
     </Container>
   );

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<Props> = ({ 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<Props> = ({ 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<Props> = ({ tokens, mainToken, onNewTransfer })
     <Container>
       <MainTokenBalance>
         <Token>{`${amount} ${symbol}`}</Token>
-        {price && <USDValue>{`~${formatter.format(Number(price) * Number(amount))} USD`}</USDValue>}
+        <USDValue>
+          {price ? `~${formatter.format(Number(price) * Number(amount))} USD` : 'USD value unknown'}
+        </USDValue>
       </MainTokenBalance>
 
       <Assets isVisible={displayAssets}>

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 (
     <ModalsProvider>
-      <Main theme="light" toastProps={{ top: true, position: 'center' }}>
+      <MainContainer theme="light" toastProps={{ top: true, position: 'center' }}>
         <Container>
           <Header />
           <BodyArea>
@@ -62,7 +66,7 @@ const HomePage = () => {
             <Footer />
           </FooterArea>
         </Container>
-      </Main>
+      </MainContainer>
     </ModalsProvider>
   );
 };

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
       }
     }