Merge branch 'issue/2565-network-config-updates' of github.com:decent…

…dao/decent-interface into issue/2565-network-config-extended
decentdao · Dec 14, 2024 · 5b8556b · 5b8556b
2 parents 8dace81 + 0352fdd
commit 5b8556b
Show file tree

Hide file tree

Showing 35 changed files with 298 additions and 256 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "react-router-dom": "^6.22.0",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.5.0",
+    "use-between": "^1.3.5",
     "viem": "^2.13.1",
     "vite": "^5.3.4",
     "vite-plugin-checker": "^0.6.4",

diff --git a/src/assets/css/sentry.css b/src/assets/css/sentry.css
@@ -1,3 +1,10 @@
 #sentry-feedback {
   z-index: 1;
+  --font-family: 'DM Sans';
+  --background: var(--colors-neutral-2);
+  --actor-hover-background: var(--colors-neutral-3);
+  --actor-border: '1px solid var(--colors-neutral-4)';
+  --actor-border-radius: 0.75rem;
+  --foreground: var(--colors-white-0);
+  --font-size: 16px;
 }
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/governance/useERC20LinearToken.ts b/src/hooks/DAO/loaders/governance/useERC20LinearToken.ts
@@ -1,5 +1,5 @@
 import { abis } from '@fractal-framework/fractal-contracts';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { getContract } from 'viem';
 import { useAccount, usePublicClient } from 'wagmi';
 import { useFractal } from '../../../../providers/App/AppProvider';
@@ -10,25 +10,13 @@ export const useERC20LinearToken = ({ onMount = true }: { onMount?: boolean }) =
   const tokenAccount = useRef<string>();
 
   const {
-    governanceContracts: { votesTokenAddress, underlyingTokenAddress },
+    governanceContracts: { votesTokenAddress },
     action,
   } = useFractal();
   const user = useAccount();
   const account = user.address;
   const publicClient = usePublicClient();
 
-  const underlyingTokenContract = useMemo(() => {
-    if (!underlyingTokenAddress || !publicClient) {
-      return;
-    }
-
-    return getContract({
-      abi: abis.VotesERC20,
-      address: underlyingTokenAddress,
-      client: publicClient,
-    });
-  }, [publicClient, underlyingTokenAddress]);
-
   const loadERC20Token = useCallback(async () => {
     if (!votesTokenAddress || !publicClient) {
       return;
@@ -57,26 +45,6 @@ export const useERC20LinearToken = ({ onMount = true }: { onMount?: boolean }) =
     action.dispatch({ type: FractalGovernanceAction.SET_TOKEN_DATA, payload: tokenData });
   }, [action, publicClient, votesTokenAddress]);
 
-  const loadUnderlyingERC20Token = useCallback(async () => {
-    if (!underlyingTokenContract) {
-      return;
-    }
-
-    const [tokenName, tokenSymbol] = await Promise.all([
-      underlyingTokenContract.read.name(),
-      underlyingTokenContract.read.symbol(),
-    ]);
-    const tokenData = {
-      name: tokenName,
-      symbol: tokenSymbol,
-      address: underlyingTokenContract.address,
-    };
-    action.dispatch({
-      type: FractalGovernanceAction.SET_UNDERLYING_TOKEN_DATA,
-      payload: tokenData,
-    });
-  }, [underlyingTokenContract, action]);
-
   const loadERC20TokenAccountData = useCallback(async () => {
     if (!account || !votesTokenAddress || !publicClient) {
       action.dispatch({ type: FractalGovernanceAction.RESET_TOKEN_ACCOUNT_DATA });
@@ -209,5 +177,5 @@ export const useERC20LinearToken = ({ onMount = true }: { onMount?: boolean }) =
     };
   }, [account, loadERC20TokenAccountData, onMount, publicClient, votesTokenAddress]);
 
-  return { loadERC20Token, loadUnderlyingERC20Token, loadERC20TokenAccountData };
+  return { loadERC20Token, loadERC20TokenAccountData };
 };