Merge remote-tracking branch 'origin/dev' into pay-now-pay-later

safe-global · Feb 9, 2024 · 99cb71d · 99cb71d
2 parents 884bc27 + 88c5b56
commit 99cb71d
Show file tree

Hide file tree

Showing 15 changed files with 391 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "safe-wallet-web",
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
-  "version": "1.29.0",
+  "version": "1.29.1",
   "type": "module",
   "scripts": {
     "dev": "next dev",
@@ -57,7 +57,7 @@
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "1.32.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.14.0",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.15.0",
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
@@ -31,11 +31,6 @@ const MenuWithTooltip = forwardRef<HTMLUListElement>(function MenuWithTooltip(pr
   )
 })
 
-const testNets = ['gor', 'base-gor', 'sep']
-const isTestnet = (shortName: string) => {
-  return testNets.includes(shortName)
-}
-
 const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement => {
   const wallet = useWallet()
   const isDarkMode = useDarkMode()
@@ -44,7 +39,7 @@ const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement =>
   const chainId = useChainId()
   const router = useRouter()
 
-  const [testNets, prodNets] = useMemo(() => partition(configs, (config) => isTestnet(config.shortName)), [configs])
+  const [testNets, prodNets] = useMemo(() => partition(configs, (config) => config.isTestnet), [configs])
 
   const getNetworkLink = useCallback(
     (shortName: string) => {

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
@@ -7,7 +7,7 @@ import ReviewStep, { NetworkFee } from '@/components/new-safe/create/steps/Revie
 import * as useWallet from '@/hooks/wallets/useWallet'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
-import { act, fireEvent, waitFor } from '@testing-library/react'
+import { act, fireEvent } from '@testing-library/react'
 
 const mockChainInfo = {
   chainId: '100',

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -1,5 +1,7 @@
 import ChainIndicator from '@/components/common/ChainIndicator'
+import type { NamedAddress } from '@/components/new-safe/create/types'
 import EthHashInfo from '@/components/common/EthHashInfo'
+import { getTotalFeeFormatted } from '@/hooks/useGasPrice'
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { NewSafeFormData } from '@/components/new-safe/create'
 import { computeNewSafeAddress } from '@/components/new-safe/create/logic'
@@ -18,7 +20,7 @@ import { LATEST_SAFE_VERSION } from '@/config/constants'
 import PayNowPayLater, { PayMethod } from '@/features/counterfactual/PayNowPayLater'
 import { createCounterfactualSafe } from '@/features/counterfactual/utils'
 import { useCurrentChain, useHasFeature } from '@/hooks/useChains'
-import useGasPrice, { getTotalFee } from '@/hooks/useGasPrice'
+import useGasPrice from '@/hooks/useGasPrice'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import { MAX_HOUR_RELAYS, useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
 import useWalletCanPay from '@/hooks/useWalletCanPay'
@@ -28,7 +30,6 @@ import { getReadOnlyFallbackHandlerContract } from '@/services/contracts/safeCon
 import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 import { useAppDispatch } from '@/store'
 import { FEATURES } from '@/utils/chains'
-import { formatVisualAmount } from '@/utils/formatters'
 import { hasRemainingRelays } from '@/utils/relaying'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import { Alert, Box, Button, Divider, Grid, Typography } from '@mui/material'
@@ -101,6 +102,52 @@ export const NetworkFee = ({
   )
 }
 
+export const SafeSetupOverview = ({
+  name,
+  owners,
+  threshold,
+}: {
+  name?: string
+  owners: NamedAddress[]
+  threshold: number
+}) => {
+  const chain = useCurrentChain()
+
+  return (
+    <Grid container spacing={3}>
+      <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
+      {name && <ReviewRow name="Name" value={<Typography>{name}</Typography>} />}
+      <ReviewRow
+        name="Owners"
+        value={
+          <Box data-testid="review-step-owner-info" className={css.ownersArray}>
+            {owners.map((owner, index) => (
+              <EthHashInfo
+                address={owner.address}
+                name={owner.name || owner.ens}
+                shortAddress={false}
+                showPrefix={false}
+                showName
+                hasExplorer
+                showCopyButton
+                key={index}
+              />
+            ))}
+          </Box>
+        }
+      />
+      <ReviewRow
+        name="Threshold"
+        value={
+          <Typography>
+            {threshold} out of {owners.length} owner(s)
+          </Typography>
+        }
+      />
+    </Grid>
+  )
+}
+
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
@@ -138,10 +185,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
   const walletCanPay = useWalletCanPay({ gasLimit, maxFeePerGas, maxPriorityFeePerGas })
 
-  const totalFee =
-    gasLimit && maxFeePerGas
-      ? formatVisualAmount(getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit), chain?.nativeCurrency.decimals)
-      : '> 0.001'
+  const totalFee = getTotalFeeFormatted(maxFeePerGas, maxPriorityFeePerGas, gasLimit, chain)
 
   // Only 1 out of 1 safe setups are supported for now
   const isCounterfactual = data.threshold === 1 && data.owners.length === 1 && isCounterfactualEnabled
@@ -195,37 +239,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   return (
     <>
       <Box className={layoutCss.row}>
-        <Grid container spacing={3}>
-          <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
-          {data.name && <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />}
-          <ReviewRow
-            name="Owners"
-            value={
-              <Box data-testid="review-step-owner-info" className={css.ownersArray}>
-                {data.owners.map((owner, index) => (
-                  <EthHashInfo
-                    address={owner.address}
-                    name={owner.name || owner.ens}
-                    shortAddress={false}
-                    showPrefix={false}
-                    showName
-                    hasExplorer
-                    showCopyButton
-                    key={index}
-                  />
-                ))}
-              </Box>
-            }
-          />
-          <ReviewRow
-            name="Threshold"
-            value={
-              <Typography>
-                {data.threshold} out of {data.owners.length} owner(s)
-              </Typography>
-            }
-          />
-        </Grid>
+        <SafeSetupOverview name={data.name} owners={data.owners} threshold={data.threshold} />
       </Box>
 
       {isCounterfactual && (

diff --git a/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx b/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx
@@ -1,3 +1,4 @@
+import { useCurrentChain } from '@/hooks/useChains'
 import { useContext, useEffect } from 'react'
 import { Typography, Divider, Box, SvgIcon, Paper } from '@mui/material'
 
@@ -20,21 +21,24 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
   const { setSafeTx, setSafeTxError } = useContext(SafeTxContext)
   const { safe } = useSafeInfo()
   const { chainId } = safe
+  const chain = useCurrentChain()
   const { newOwner, removedOwner, threshold } = params
 
   useEffect(() => {
+    if (!chain) return
+
     const promise = removedOwner
-      ? createSwapOwnerTx({
+      ? createSwapOwnerTx(chain, safe.deployed, {
           newOwnerAddress: newOwner.address,
           oldOwnerAddress: removedOwner.address,
         })
-      : createAddOwnerTx({
+      : createAddOwnerTx(chain, safe.deployed, {
           ownerAddress: newOwner.address,
           threshold,
         })
 
     promise.then(setSafeTx).catch(setSafeTxError)
-  }, [removedOwner, newOwner, threshold, setSafeTx, setSafeTxError])
+  }, [removedOwner, newOwner, threshold, setSafeTx, setSafeTxError, chain, safe.deployed])
 
   const addAddressBookEntryAndSubmit = () => {
     if (typeof newOwner.name !== 'undefined') {