feat: Improve safe creation status screen (#3778)

* feat: Improve safe creation status screen * fix: Failing tests * fix: Extract useUndeployedSafe * fix: Add safeViewRedirectURL and remove old creation modal * fix: Show address in success modal * fix: Adjust undeployedSafeSlice to contain pay method * fix: Add safe to added safes and address book * chore: Remove usePendingSafe hook * fix: Show reverted error and adjust rejected error * test: Adjust create_safe_cf smoke test * fix: Adjust success screen wording * fix: Reset status fields on fail * fix: Add missing events, remove GET_STARTED event --------- Co-authored-by: James Mealy <[email protected]>
safe-global · Jun 25, 2024 · 93bb38f · 93bb38f
1 parent a39c4e2
commit 93bb38f
Show file tree

Hide file tree

Showing 36 changed files with 397 additions and 1,779 deletions.
diff --git a/cypress/e2e/pages/create_wallet.pages.js b/cypress/e2e/pages/create_wallet.pages.js
@@ -26,7 +26,6 @@ const networkFeeSection = '[data-tetid="network-fee-section"]'
 const nextBtn = '[data-testid="next-btn"]'
 const backBtn = '[data-testid="back-btn"]'
 const cancelBtn = '[data-testid="cancel-btn"]'
-const dialogConfirmBtn = '[data-testid="dialog-confirm-btn"]'
 const safeActivationSection = '[data-testid="activation-section"]'
 const addressAutocompleteOptions = '[data-testid="address-item"]'
 export const qrCode = '[data-testid="qr-code"]'
@@ -90,19 +89,10 @@ export function clickOnTxType(tx) {
   cy.get(choiceBtn).contains(tx).click()
 }
 
-export function verifyNewSafeDialogModal() {
-  main.verifyElementsIsVisible([dialogConfirmBtn])
-}
-
 export function verifyCFSafeCreated() {
   main.verifyElementsIsVisible([sidebar.pendingActivationIcon, safeActivationSection])
 }
 
-export function clickOnGotitBtn() {
-  cy.get(dialogConfirmBtn).click()
-  main.verifyElementsCount(connectedWalletExecMethod, 0)
-}
-
 export function selectPayLaterOption() {
   cy.get(connectedWalletExecMethod).click()
 }

diff --git a/cypress/e2e/smoke/create_safe_cf.cy.js b/cypress/e2e/smoke/create_safe_cf.cy.js
@@ -17,8 +17,6 @@ describe('[SMOKE] CF Safe creation tests', () => {
     createwallet.clickOnNextBtn()
     createwallet.selectPayLaterOption()
     createwallet.clickOnReviewStepNextBtn()
-    createwallet.verifyNewSafeDialogModal()
-    createwallet.clickOnGotitBtn()
     createwallet.verifyCFSafeCreated()
   })
 })
diff --git a/public/images/common/tx-failed.svg b/public/images/common/tx-failed.svg
diff --git a/src/components/dashboard/CreationDialog/index.tsx b/src/components/dashboard/CreationDialog/index.tsx
diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx
@@ -9,9 +9,6 @@ import Overview from '@/components/dashboard/Overview/Overview'
 import { FeaturedApps } from '@/components/dashboard/FeaturedApps/FeaturedApps'
 import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection'
 import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
-import CreationDialog from '@/components/dashboard/CreationDialog'
-import { useRouter } from 'next/router'
-import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic'
 import useRecovery from '@/features/recovery/hooks/useRecovery'
 import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 import ActivityRewardsSection from '@/components/dashboard/ActivityRewardsSection'
@@ -23,9 +20,7 @@ import SwapWidget from '@/features/swap/components/SwapWidget'
 const RecoveryHeader = dynamic(() => import('@/features/recovery/components/RecoveryHeader'))
 
 const Dashboard = (): ReactElement => {
-  const router = useRouter()
   const { safe } = useSafeInfo()
-  const { [CREATION_MODAL_QUERY_PARM]: showCreationModal = '' } = router.query
   const showSafeApps = useHasFeature(FEATURES.SAFE_APPS)
   const isSAPBannerEnabled = useHasFeature(FEATURES.SAP_BANNER)
   const supportsRecovery = useIsRecoverySupported()
@@ -83,8 +78,6 @@ const Dashboard = (): ReactElement => {
           </>
         )}
       </Grid>
-
-      {showCreationModal ? <CreationDialog /> : null}
     </>
   )
 }

diff --git a/src/components/new-safe/CardStepper/index.tsx b/src/components/new-safe/CardStepper/index.tsx
@@ -8,7 +8,7 @@ import { useCardStepper } from './useCardStepper'
 
 export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
   const [progressColor, setProgressColor] = useState(lightPalette.secondary.main)
-  const { activeStep, onSubmit, onBack, stepData, setStep } = useCardStepper<StepperData>(props)
+  const { activeStep, onSubmit, onBack, stepData, setStep, setStepData } = useCardStepper<StepperData>(props)
   const { steps } = props
   const currentStep = steps[activeStep]
   const progress = ((activeStep + 1) / steps.length) * 100
@@ -33,7 +33,7 @@ export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
         />
       )}
       <CardContent className={css.content}>
-        {currentStep.render(stepData, onSubmit, onBack, setStep, setProgressColor)}
+        {currentStep.render(stepData, onSubmit, onBack, setStep, setProgressColor, setStepData)}
       </CardContent>
     </Card>
   )

diff --git a/src/components/new-safe/CardStepper/useCardStepper.ts b/src/components/new-safe/CardStepper/useCardStepper.ts
@@ -8,6 +8,7 @@ export type StepRenderProps<TData> = {
   onBack: (data?: Partial<TData>) => void
   setStep: (step: number) => void
   setProgressColor?: Dispatch<SetStateAction<string>>
+  setStepData?: Dispatch<SetStateAction<TData>>
 }
 
 type Step<TData> = {
@@ -19,6 +20,7 @@ type Step<TData> = {
     onBack: StepRenderProps<TData>['onBack'],
     setStep: StepRenderProps<TData>['setStep'],
     setProgressColor: StepRenderProps<TData>['setProgressColor'],
+    setStepData: StepRenderProps<TData>['setStepData'],
   ) => ReactElement
 }
 
@@ -84,5 +86,6 @@ export const useCardStepper = <TData>({
     activeStep,
     stepData,
     firstStep,
+    setStepData,
   }
 }