From 55566e4f4a556272b383e18d4efa8872555227c2 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 23 Nov 2022 16:00:42 +0100 Subject: [PATCH 1/5] refactor: Remove unused code that was duplicated --- src/components/create-safe/logic/index.ts | 12 +- src/components/new-safe/CreateSafe/index.tsx | 2 - src/components/new-safe/steps/Step4/index.tsx | 2 - .../new-safe/steps/Step4/logic/index.ts | 126 +----------------- .../new-safe/steps/Step4/useSafeCreation.ts | 5 +- src/pages/open.tsx | 4 - 6 files changed, 12 insertions(+), 139 deletions(-) diff --git a/src/components/create-safe/logic/index.ts b/src/components/create-safe/logic/index.ts index 91448b6d0f..6058286e22 100644 --- a/src/components/create-safe/logic/index.ts +++ b/src/components/create-safe/logic/index.ts @@ -22,6 +22,12 @@ import { Errors, logError } from '@/services/exceptions' import { ErrorCode } from '@ethersproject/logger' import { isWalletRejection } from '@/utils/wallets' +export type SafeCreationProps = { + owners: string[] + threshold: number + saltNonce: number +} + /** * Prepare data for creating a Safe for the Core SDK */ @@ -122,12 +128,6 @@ export const getSafeCreationTxInfo = async ( } } -export type SafeCreationProps = { - owners: string[] - threshold: number - saltNonce: number -} - export const estimateSafeCreationGas = async ( chain: ChainInfo, provider: JsonRpcProvider, diff --git a/src/components/new-safe/CreateSafe/index.tsx b/src/components/new-safe/CreateSafe/index.tsx index 51fcbb3191..1eaf687f2b 100644 --- a/src/components/new-safe/CreateSafe/index.tsx +++ b/src/components/new-safe/CreateSafe/index.tsx @@ -24,7 +24,6 @@ export type NewSafeFormData = { name: string threshold: number owners: NamedAddress[] - mobileOwners: NamedAddress[] saltNonce: number safeAddress?: string } @@ -173,7 +172,6 @@ const CreateSafe = () => { const initialData: NewSafeFormData = { name: '', - mobileOwners: [] as NamedAddress[], owners: [defaultOwner], threshold: 1, saltNonce: Date.now(), diff --git a/src/components/new-safe/steps/Step4/index.tsx b/src/components/new-safe/steps/Step4/index.tsx index 9b857aef67..aa826347ae 100644 --- a/src/components/new-safe/steps/Step4/index.tsx +++ b/src/components/new-safe/steps/Step4/index.tsx @@ -26,8 +26,6 @@ export const SAFE_PENDING_CREATION_STORAGE_KEY = 'pendingSafe' export type PendingSafeData = NewSafeFormData & { txHash?: string tx?: PendingSafeTx - safeAddress?: string - saltNonce: number } export const CreateSafeStatus = ({ setProgressColor }: StepRenderProps) => { diff --git a/src/components/new-safe/steps/Step4/logic/index.ts b/src/components/new-safe/steps/Step4/logic/index.ts index e8e8557fa6..8fdee63546 100644 --- a/src/components/new-safe/steps/Step4/logic/index.ts +++ b/src/components/new-safe/steps/Step4/logic/index.ts @@ -1,20 +1,8 @@ import type { Web3Provider, JsonRpcProvider } from '@ethersproject/providers' -import type Safe from '@gnosis.pm/safe-core-sdk' -import { SafeFactory, type DeploySafeProps } from '@gnosis.pm/safe-core-sdk' -import { createEthersAdapter } from '@/hooks/coreSDK/safeCoreSDK' -import type { ChainInfo, SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk' -import { EMPTY_DATA, ZERO_ADDRESS } from '@gnosis.pm/safe-core-sdk/dist/src/utils/constants' -import { - getFallbackHandlerContractInstance, - getGnosisSafeContractInstance, - getProxyFactoryContractInstance, -} from '@/services/contracts/safeContracts' -import { LATEST_SAFE_VERSION } from '@/config/constants' -import type { PredictSafeProps } from '@gnosis.pm/safe-core-sdk/dist/src/safeFactory' +import type { ChainInfo } from '@gnosis.pm/safe-react-gateway-sdk' +import { getProxyFactoryContractInstance } from '@/services/contracts/safeContracts' import type { ConnectedWallet } from '@/services/onboard' import { BigNumber } from '@ethersproject/bignumber' -import { getSafeInfo } from '@gnosis.pm/safe-react-gateway-sdk' -import { backOff } from 'exponential-backoff' import { SafeCreationStatus } from '@/components/new-safe/steps/Step4/useSafeCreation' import { didRevert, type EthersError } from '@/utils/ethers-utils' import { Errors, logError } from '@/services/exceptions' @@ -29,77 +17,7 @@ import { SAFE_APPS_EVENTS, trackEvent } from '@/services/analytics' import type { AppDispatch, AppThunk } from '@/store' import { showNotification } from '@/store/notificationsSlice' import { formatError } from '@/hooks/useTxNotifications' - -/** - * Prepare data for creating a Safe for the Core SDK - */ -export const getSafeDeployProps = ( - safeParams: SafeCreationProps, - callback: (txHash: string) => void, - chainId: string, -): PredictSafeProps & { callback: DeploySafeProps['callback'] } => { - const fallbackHandler = getFallbackHandlerContractInstance(chainId) - - return { - safeAccountConfig: { - threshold: safeParams.threshold, - owners: safeParams.owners, - fallbackHandler: fallbackHandler.address, - }, - safeDeploymentConfig: { - saltNonce: safeParams.saltNonce.toString(), - }, - callback, - } -} - -/** - * Create a Safe creation transaction via Core SDK and submits it to the wallet - */ -export const createNewSafe = async (ethersProvider: Web3Provider, props: DeploySafeProps): Promise => { - const ethAdapter = createEthersAdapter(ethersProvider) - - const safeFactory = await SafeFactory.create({ ethAdapter }) - return safeFactory.deploySafe(props) -} - -/** - * Compute the new counterfactual Safe address before it is actually created - */ -export const computeNewSafeAddress = async (ethersProvider: Web3Provider, props: PredictSafeProps): Promise => { - const ethAdapter = createEthersAdapter(ethersProvider) - - const safeFactory = await SafeFactory.create({ ethAdapter }) - return safeFactory.predictSafeAddress(props) -} - -/** - * Encode a Safe creation transaction NOT using the Core SDK because it doesn't support that - * This is used for gas estimation. - */ -export const encodeSafeCreationTx = ({ - owners, - threshold, - saltNonce, - chain, -}: SafeCreationProps & { chain: ChainInfo }) => { - const safeContract = getGnosisSafeContractInstance(chain, LATEST_SAFE_VERSION) - const proxyContract = getProxyFactoryContractInstance(chain.chainId) - const fallbackHandlerContract = getFallbackHandlerContractInstance(chain.chainId) - - const setupData = safeContract.encode('setup', [ - owners, - threshold, - ZERO_ADDRESS, - EMPTY_DATA, - fallbackHandlerContract.address, - ZERO_ADDRESS, - '0', - ZERO_ADDRESS, - ]) - - return proxyContract.encode('createProxyWithNonce', [safeContract.getAddress(), setupData, saltNonce]) -} +import { encodeSafeCreationTx } from '@/components/create-safe/logic' /** * Encode a Safe creation tx in a way that we can store locally and monitor using _waitForTransaction @@ -108,7 +26,6 @@ export const getSafeCreationTxInfo = async ( provider: Web3Provider, params: NewSafeFormData, chain: ChainInfo, - saltNonce: number, wallet: ConnectedWallet, ): Promise => { const proxyContract = getProxyFactoryContractInstance(chain.chainId) @@ -116,7 +33,7 @@ export const getSafeCreationTxInfo = async ( const data = encodeSafeCreationTx({ owners: params.owners.map((owner) => owner.address), threshold: params.threshold, - saltNonce, + saltNonce: params.saltNonce, chain, }) @@ -130,41 +47,6 @@ export const getSafeCreationTxInfo = async ( } } -export type SafeCreationProps = { - owners: string[] - threshold: number - saltNonce: number -} - -export const estimateSafeCreationGas = async ( - chain: ChainInfo, - provider: JsonRpcProvider, - from: string, - safeParams: SafeCreationProps, -): Promise => { - const proxyFactoryContract = getProxyFactoryContractInstance(chain.chainId) - const encodedSafeCreationTx = encodeSafeCreationTx({ ...safeParams, chain }) - - return provider.estimateGas({ - from: from, - to: proxyFactoryContract.getAddress(), - data: encodedSafeCreationTx, - }) -} - -export const pollSafeInfo = async (chainId: string, safeAddress: string): Promise => { - // exponential delay between attempts for around 4 min - return backOff(() => getSafeInfo(chainId, safeAddress), { - startingDelay: 750, - maxDelay: 20000, - numOfAttempts: 19, - retry: (e) => { - console.info('waiting for client-gateway to provide safe information', e) - return true - }, - }) -} - export const handleSafeCreationError = (error: EthersError) => { logError(Errors._800, error.message) diff --git a/src/components/new-safe/steps/Step4/useSafeCreation.ts b/src/components/new-safe/steps/Step4/useSafeCreation.ts index 2ae0246e58..009c3531f1 100644 --- a/src/components/new-safe/steps/Step4/useSafeCreation.ts +++ b/src/components/new-safe/steps/Step4/useSafeCreation.ts @@ -8,9 +8,7 @@ import type { PendingSafeData } from '@/components/new-safe/steps/Step4/index' import type { PendingSafeTx } from '@/components/create-safe/types' import { checkSafeCreationTx, - createNewSafe, getSafeCreationTxInfo, - getSafeDeployProps, handleSafeCreationError, SAFE_CREATION_ERROR_KEY, showSafeCreationError, @@ -18,6 +16,7 @@ import { import { useAppDispatch } from '@/store' import { closeByGroupKey } from '@/store/notificationsSlice' import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics' +import { createNewSafe, getSafeDeployProps } from '@/components/create-safe/logic' export enum SafeCreationStatus { AWAITING, @@ -62,7 +61,7 @@ export const useSafeCreation = ( dispatch(closeByGroupKey({ groupKey: SAFE_CREATION_ERROR_KEY })) try { - const tx = await getSafeCreationTxInfo(provider, pendingSafe, chain, pendingSafe.saltNonce, wallet) + const tx = await getSafeCreationTxInfo(provider, pendingSafe, chain, wallet) const safeParams = getSafeDeployProps( { diff --git a/src/pages/open.tsx b/src/pages/open.tsx index 867590b5f6..f388ed19d0 100644 --- a/src/pages/open.tsx +++ b/src/pages/open.tsx @@ -17,10 +17,6 @@ const Open: NextPage = () => { } }, [router, shouldUseNewCreation]) - if (shouldUseNewCreation) { - return <> - } - return (
From a5296efc15f664924b86d32cf78218d259424285 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 23 Nov 2022 16:02:40 +0100 Subject: [PATCH 2/5] fix: Revert ab test removal --- src/components/welcome/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/welcome/index.tsx b/src/components/welcome/index.tsx index 89fca66488..99160f9e6c 100644 --- a/src/components/welcome/index.tsx +++ b/src/components/welcome/index.tsx @@ -3,6 +3,7 @@ import { Button, Divider, Grid, Paper, Typography } from '@mui/material' import { useRouter } from 'next/router' import { CREATE_SAFE_EVENTS, LOAD_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe' import Track from '../common/Track' +import { AppRoutes } from '@/config/routes' const NewSafe = () => { const router = useRouter() @@ -28,8 +29,7 @@ const NewSafe = () => { for creating your new Safe. - {/* TODO: Revert this to /open before merging into dev */} - From 4b9a8fd0457c968c6a2d377c79c37430e6fcf336 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 23 Nov 2022 16:18:06 +0100 Subject: [PATCH 3/5] refactor: Remove unused StepCard component --- .../new-safe/CardStepper/useCardStepper.ts | 2 +- src/components/new-safe/StepCard/index.tsx | 39 ------------------- .../new-safe/StepCard/styles.module.css | 31 --------------- 3 files changed, 1 insertion(+), 71 deletions(-) delete mode 100644 src/components/new-safe/StepCard/index.tsx delete mode 100644 src/components/new-safe/StepCard/styles.module.css diff --git a/src/components/new-safe/CardStepper/useCardStepper.ts b/src/components/new-safe/CardStepper/useCardStepper.ts index 360d17f5cb..a2d2d0f81b 100644 --- a/src/components/new-safe/CardStepper/useCardStepper.ts +++ b/src/components/new-safe/CardStepper/useCardStepper.ts @@ -10,7 +10,7 @@ export type StepRenderProps = { setProgressColor?: Dispatch> } -export type Step = { +type Step = { title: string subtitle: string render: ( diff --git a/src/components/new-safe/StepCard/index.tsx b/src/components/new-safe/StepCard/index.tsx deleted file mode 100644 index 8f87ec04b9..0000000000 --- a/src/components/new-safe/StepCard/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardHeader, Avatar, Typography, CardContent, CardActions, LinearProgress } from '@mui/material' -import type { ReactElement } from 'react' - -import css from './styles.module.css' - -const StepCard = ({ - title, - subheader, - content, - actions, - step = 1, -}: { - title: string - subheader: string - content: ReactElement - actions: ReactElement - // TODO: `step` and `LinearProgress` will be set via stepper hook - step?: number -}): ReactElement => ( - - - - {step} - - } - className={css.header} - /> - {content} - {actions} - -) - -export default StepCard diff --git a/src/components/new-safe/StepCard/styles.module.css b/src/components/new-safe/StepCard/styles.module.css deleted file mode 100644 index 8ea2864b08..0000000000 --- a/src/components/new-safe/StepCard/styles.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.card { - border: none; -} - -.header { - padding: var(--space-3) var(--space-2); -} - -.header :global .MuiCardHeader-title { - font-weight: 700; -} - -.header :global .MuiCardHeader-subheader { - color: var(--color-text-primary); -} - -.step { - background-color: var(--color-primary-main); - height: 20px; - width: 20px; -} - -.content { - padding: var(--space-3) 52px; - border-top: 1px solid var(--color-border-light); - border-bottom: 1px solid var(--color-border-light); -} - -.actions { - padding: var(--space-3) 52px; -} From ed069cf1f444243c9a991e271fea33da11dd7ce7 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 23 Nov 2022 16:22:07 +0100 Subject: [PATCH 4/5] fix: Update links to safe.global --- src/components/new-safe/steps/Step1/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/new-safe/steps/Step1/index.tsx b/src/components/new-safe/steps/Step1/index.tsx index 5f3ea61e4f..88b397c2aa 100644 --- a/src/components/new-safe/steps/Step1/index.tsx +++ b/src/components/new-safe/steps/Step1/index.tsx @@ -92,11 +92,11 @@ function CreateSafeStep1({ By continuing, you agree to our{' '} - + terms of use {' '} and{' '} - + privacy policy . From 8543369494b01d9acb345dd24712b2832347177f Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 23 Nov 2022 16:57:26 +0100 Subject: [PATCH 5/5] fix: Set link to safe creation for ab testing --- .../safe-apps/SafeAppLandingPage/AppActions.tsx | 6 +++++- src/components/welcome/index.tsx | 7 ++++++- src/pages/open.tsx | 14 -------------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx b/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx index 27574d9e23..8b26003654 100644 --- a/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx +++ b/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx @@ -15,6 +15,8 @@ import { AppRoutes } from '@/config/routes' import useOwnedSafes from '@/hooks/useOwnedSafes' import { CTA_BUTTON_WIDTH, CTA_HEIGHT } from '@/components/safe-apps/SafeAppLandingPage/constants' import CreateNewSafeSVG from '@/public/images/open/safe-creation.svg' +import useABTesting from '@/services/tracking/useABTesting' +import { AbTest } from '@/services/tracking/abTesting' type Props = { appUrl: string @@ -27,6 +29,8 @@ type Props = { type CompatibleSafesType = { address: string; chainId: string; shortName?: string } const AppActions = ({ wallet, onConnectWallet, chain, appUrl, app }: Props): React.ReactElement => { + const shouldUseNewCreation = useABTesting(AbTest.SAFE_CREATION) + const createSafeLink = shouldUseNewCreation ? AppRoutes.newSafe.create : AppRoutes.open const lastUsedSafe = useLastSafe() const ownedSafes = useOwnedSafes() const addressBook = useAppSelector(selectAllAddressBooks) @@ -71,7 +75,7 @@ const AppActions = ({ wallet, onConnectWallet, chain, appUrl, app }: Props): Rea case shouldCreateSafe: const redirect = `${AppRoutes.apps}?appUrl=${appUrl}` const createSafeHrefWithRedirect: UrlObject = { - pathname: AppRoutes.open, + pathname: createSafeLink, query: { safeViewRedirectURL: redirect, chain: chain.shortName }, } button = ( diff --git a/src/components/welcome/index.tsx b/src/components/welcome/index.tsx index 99160f9e6c..bd2185e1ad 100644 --- a/src/components/welcome/index.tsx +++ b/src/components/welcome/index.tsx @@ -4,10 +4,15 @@ import { useRouter } from 'next/router' import { CREATE_SAFE_EVENTS, LOAD_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe' import Track from '../common/Track' import { AppRoutes } from '@/config/routes' +import useABTesting from '@/services/tracking/useABTesting' +import { AbTest } from '@/services/tracking/abTesting' const NewSafe = () => { + const shouldUseNewCreation = useABTesting(AbTest.SAFE_CREATION) const router = useRouter() + const createSafeLink = shouldUseNewCreation ? AppRoutes.newSafe.create : AppRoutes.open + return ( <> @@ -29,7 +34,7 @@ const NewSafe = () => { for creating your new Safe. - diff --git a/src/pages/open.tsx b/src/pages/open.tsx index f388ed19d0..eb7824e4a5 100644 --- a/src/pages/open.tsx +++ b/src/pages/open.tsx @@ -1,22 +1,8 @@ import type { NextPage } from 'next' import Head from 'next/head' import CreateSafe from '@/components/create-safe' -import useABTesting from '@/services/tracking/useABTesting' -import { AbTest } from '@/services/tracking/abTesting' -import { useRouter } from 'next/router' -import { AppRoutes } from '@/config/routes' -import { useLayoutEffect } from 'react' const Open: NextPage = () => { - const shouldUseNewCreation = useABTesting(AbTest.SAFE_CREATION) - const router = useRouter() - - useLayoutEffect(() => { - if (shouldUseNewCreation) { - router.replace(AppRoutes.newSafe.create) - } - }, [router, shouldUseNewCreation]) - return (