Merge pull request #2612 from decentdao/ui-tweaks-2

UI tweaks, cleanup
decentdao · Dec 10, 2024 · 1f6e4bc · 1f6e4bc
2 parents 711ff13 + 728b5bf
commit 1f6e4bc
Show file tree

Hide file tree

Showing 18 changed files with 146 additions and 83 deletions.
diff --git a/src/components/DAOTreasury/components/Transactions.tsx b/src/components/DAOTreasury/components/Transactions.tsx
@@ -188,9 +188,8 @@ export function PaginationCount({ shownTransactions }: { shownTransactions: numb
         type="address"
         value={safe.address}
         p={0}
+        isTextLink
         textStyle="labels-large"
-        outline="unset"
-        outlineOffset="unset"
         borderWidth={0}
       >
         {t('transactionsTotalCount', { count: totalTransfers })}

diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
@@ -36,11 +36,11 @@ function DayStepperInput({
     <InputGroup>
       <Flex
         flexDirection="column"
-        w="100%"
         gap="0.5rem"
+        w="250px"
       >
-        <Text color="neutral-7">{t('days', { ns: 'common' })}</Text>
         <NumberStepperInput
+          unitHint={t('days', { ns: 'common' })}
           value={inputValue}
           onChange={val => onInputChange(Number(val))}
         />

diff --git a/src/components/DaoCreator/formComponents/Multisig.tsx b/src/components/DaoCreator/formComponents/Multisig.tsx
@@ -142,11 +142,12 @@ export function Multisig(props: ICreationStepProps) {
             }
             isRequired
           >
-            {/* @todo replace with stepper input */}
-            <NumberStepperInput
-              onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
-              value={values.multisig.signatureThreshold}
-            />
+            <Flex w="200px">
+              <NumberStepperInput
+                onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
+                value={values.multisig.signatureThreshold}
+              />
+            </Flex>
           </LabelComponent>
         </Flex>
       </StepWrapper>

diff --git a/src/components/Roles/RolePaymentDetails.tsx b/src/components/Roles/RolePaymentDetails.tsx
@@ -319,8 +319,12 @@ export function RolePaymentDetails({
             mx={4}
           >
             <Flex justifyContent="space-between">
-              <Flex gap={2}>
+              <Flex
+                alignItems="center"
+                gap={2}
+              >
                 <Image
+                  h="2rem"
                   src={payment.asset.logo}
                   fallbackSrc="/images/coin-icon-default.svg"
                 />

diff --git a/src/components/SafeSettings/ERC20TokenContainer.tsx b/src/components/SafeSettings/ERC20TokenContainer.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../providers/App/AppProvider';
 import { AzoriusGovernance } from '../../types';
 import { formatCoin } from '../../utils';
-import { StyledBox } from '../ui/containers/StyledBox';
 import { DisplayAddress } from '../ui/links/DisplayAddress';
 import { BarLoader } from '../ui/loaders/BarLoader';
 
@@ -15,13 +14,17 @@ export function ERC20TokenContainer() {
   const { votesToken } = azoriusGovernance;
 
   return (
-    <StyledBox width="100%">
+    <Box width="100%">
       <Text textStyle="heading-small">{t('governanceTokenTitle')}</Text>
       {votesToken ? (
         <Flex
           justifyContent="space-between"
           flexWrap={{ base: 'wrap', md: 'nowrap' }}
           mt={4}
+          p="1.5rem"
+          borderWidth="0.06rem"
+          borderColor="neutral-3"
+          borderRadius="0.75rem"
         >
           {/* TOKEN NAME */}
           <Box w={{ base: 'full', sm: 'auto' }}>
@@ -76,6 +79,6 @@ export function ERC20TokenContainer() {
           <BarLoader />
         </Flex>
       )}
-    </StyledBox>
+    </Box>
   );
 }
diff --git a/src/components/SafeSettings/ERC721TokensContainer.tsx b/src/components/SafeSettings/ERC721TokensContainer.tsx
@@ -1,8 +1,7 @@
-import { Flex, Grid, GridItem, Text } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../providers/App/AppProvider';
 import { AzoriusGovernance } from '../../types';
-import { StyledBox } from '../ui/containers/StyledBox';
 import { DisplayAddress } from '../ui/links/DisplayAddress';
 import { BarLoader } from '../ui/loaders/BarLoader';
 
@@ -14,7 +13,13 @@ export function ERC721TokensContainer() {
   const { erc721Tokens } = azoriusGovernance;
 
   return (
-    <StyledBox width="100%">
+    <Box
+      width="100%"
+      p="1.5rem"
+      borderWidth="0.06rem"
+      borderColor="neutral-3"
+      borderRadius="0.75rem"
+    >
       <Text>{t('governanceERC721TokenTitle')}</Text>
       {erc721Tokens ? (
         <Flex flexWrap="wrap">
@@ -97,6 +102,6 @@ export function ERC721TokensContainer() {
           <BarLoader />
         </Flex>
       )}
-    </StyledBox>
+    </Box>
   );
 }
diff --git a/src/components/SafeSettings/SettingsContentBox.tsx b/src/components/SafeSettings/SettingsContentBox.tsx
@@ -1,6 +1,5 @@
 import { BoxProps } from '@chakra-ui/react';
 import { PropsWithChildren } from 'react';
-import { NEUTRAL_2_84 } from '../../constants/common';
 import { StyledBox } from '../ui/containers/StyledBox';
 
 export function SettingsContentBox({ children, ...props }: PropsWithChildren<BoxProps>) {
@@ -9,7 +8,6 @@ export function SettingsContentBox({ children, ...props }: PropsWithChildren<Box
       w="100%"
       borderTopLeftRadius={{ base: '0.75rem', md: '0' }}
       borderBottomLeftRadius={{ base: '0.75rem', md: '0' }}
-      bg={NEUTRAL_2_84}
       {...props}
     >
       {children}

diff --git a/src/components/SafeSettings/Signers/SignersContainer.tsx b/src/components/SafeSettings/Signers/SignersContainer.tsx
@@ -1,11 +1,10 @@
-import { Button, Flex, Hide, HStack, Icon, Show, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Hide, HStack, Icon, Show, Text } from '@chakra-ui/react';
 import { MinusCircle, PlusCircle } from '@phosphor-icons/react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Address, getAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
-import { StyledBox } from '../../ui/containers/StyledBox';
 import { DisplayAddress } from '../../ui/links/DisplayAddress';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
@@ -102,7 +101,7 @@ export function SignersContainer() {
   }, [account, signers]);
 
   return (
-    <StyledBox width="100%">
+    <Box width="100%">
       <Flex justifyContent="space-between">
         <Text>{t('signers', { ns: 'common' })}</Text>
         {userIsSigner && (
@@ -131,6 +130,6 @@ export function SignersContainer() {
             threshold={safe?.threshold}
           />
         ))}
-    </StyledBox>
+    </Box>
   );
 }
diff --git a/src/components/ui/forms/NumberStepperInput.tsx b/src/components/ui/forms/NumberStepperInput.tsx
@@ -1,6 +1,8 @@
 import {
   Button,
   HStack,
+  InputGroup,
+  InputRightElement,
   NumberDecrementStepper,
   NumberIncrementStepper,
   NumberInput,
@@ -11,9 +13,11 @@ import { Plus, Minus } from '@phosphor-icons/react';
 export function NumberStepperInput({
   value,
   onChange,
+  unitHint,
 }: {
   value?: string | number;
   onChange: (val: string) => void;
+  unitHint?: string;
 }) {
   const stepperButton = (direction: 'inc' | 'dec') => (
     <Button
@@ -32,11 +36,13 @@ export function NumberStepperInput({
       onChange={onChange}
       min={0}
       focusInputOnChange
-      w="100%"
     >
       <HStack gap="0.25rem">
         <NumberDecrementStepper>{stepperButton('dec')}</NumberDecrementStepper>
-        <NumberInputField min={0} />
+        <InputGroup>
+          <NumberInputField min={0} />
+          <InputRightElement mr="1rem">{unitHint}</InputRightElement>
+        </InputGroup>
         <NumberIncrementStepper>{stepperButton('inc')}</NumberIncrementStepper>
       </HStack>
     </NumberInput>

diff --git a/src/components/ui/menus/SafesMenu/index.tsx b/src/components/ui/menus/SafesMenu/index.tsx
@@ -51,17 +51,29 @@ export function SafesMenu() {
               />
             </Button>
           }
-          options={favoritesList.map(favorite => ({
-            optionKey: `${favorite.networkPrefix}:${favorite.address}`,
-            onClick: () => {},
-            renderer: () => (
-              <SafeMenuItem
-                name={favorite.name}
-                address={favorite.address}
-                network={favorite.networkPrefix}
-              />
-            ),
-          }))}
+          options={
+            !favoritesList.length
+              ? [
+                  {
+                    optionKey: 'empty-favorites',
+                    onClick: () => {},
+                    renderer: () => (
+                      <Text padding="1rem">{t('emptyFavorites', { ns: 'dashboard' })}</Text>
+                    ),
+                  },
+                ]
+              : favoritesList.map(favorite => ({
+                  optionKey: `${favorite.networkPrefix}:${favorite.address}`,
+                  onClick: () => {},
+                  renderer: () => (
+                    <SafeMenuItem
+                      name={favorite.name}
+                      address={favorite.address}
+                      network={favorite.networkPrefix}
+                    />
+                  ),
+                }))
+          }
           buttonAs={Button}
           buttonProps={{
             variant: 'tertiary',

diff --git a/src/hooks/DAO/loaders/useDecentTreasury.ts b/src/hooks/DAO/loaders/useDecentTreasury.ts
@@ -22,6 +22,8 @@ import {
 } from '../../../types';
 import { formatCoin } from '../../../utils';
 import { MOCK_MORALIS_ETH_ADDRESS } from '../../../utils/address';
+import { CacheExpiry, CacheKeys } from '../../utils/cache/cacheDefaults';
+import { setValue } from '../../utils/cache/useLocalStorage';
 
 export const useDecentTreasury = () => {
   // tracks the current valid DAO address / chain; helps prevent unnecessary calls
@@ -168,12 +170,14 @@ export const useDecentTreasury = () => {
       // make unique
       .filter((value, index, self) => self.indexOf(value) === index)
       // turn them into Address type
-      .map(address => getAddress(address));
+      .map(getAddress);
 
     const transfersTokenInfo = await Promise.all(
       tokenAddressesOfTransfers.map(async address => {
+        let tokenInfo: TokenInfoResponse;
+
         try {
-          return await safeAPI.getToken(address);
+          tokenInfo = await safeAPI.getToken(address);
         } catch (e) {
           const fallbackTokenData = tokenBalances?.find(
             tokenBalanceData => getAddress(tokenBalanceData.tokenAddress) === address,
@@ -198,14 +202,21 @@ export const useDecentTreasury = () => {
             };
           }
 
-          return {
+          tokenInfo = {
             address,
             name: fallbackTokenData.name,
             symbol: fallbackTokenData.symbol,
             decimals: fallbackTokenData.decimals,
             logoUri: fallbackTokenData.logo,
           };
         }
+
+        setValue(
+          { cacheName: CacheKeys.TOKEN_INFO, tokenAddress: address },
+          tokenInfo,
+          CacheExpiry.NEVER,
+        );
+        return tokenInfo;
       }),
     );
 

diff --git a/src/hooks/DAO/loaders/useHatsTree.ts b/src/hooks/DAO/loaders/useHatsTree.ts
@@ -204,6 +204,12 @@ const useHatsTree = () => {
             ? secondsTimestampToDate(lockupLinearStream.cliffTime)
             : undefined;
 
+          const logo =
+            getValue({
+              cacheName: CacheKeys.TOKEN_INFO,
+              tokenAddress: getAddress(lockupLinearStream.asset.address),
+            })?.logoUri || '';
+
           return {
             streamId: lockupLinearStream.id,
             contractAddress: lockupLinearStream.contract.address,
@@ -213,7 +219,7 @@ const useHatsTree = () => {
               name: lockupLinearStream.asset.name,
               symbol: lockupLinearStream.asset.symbol,
               decimals: lockupLinearStream.asset.decimals,
-              logo: '', // @todo - how do we get logo?
+              logo,
             },
             amount: {
               bigintValue: BigInt(lockupLinearStream.depositAmount),