feat: new mobile wallet create flow

src/assets/translations/en/main.json

@@ -1240,6 +1240,8 @@
         "menuItem": "Back up my wallet",
         "enterPassword": "Enter your password to continue",
         "testTitle": "Verify Your Secret Recovery Phrase",
+        "title": "Confirm Backup",
+        "description": "Complete this quick test to confirm you’ve saved everything correctly.",
         "confirm": {
           "title": "Backup wallet",
           "body": "Before you forget your wallet, would you like to back up your secret recovery phrase?",
@@ -1955,6 +1957,39 @@
           "pair": "Unable to pair your wallet"
         }
       }
+    },
+    "create": {
+      "header": "Give your wallet a name",
+      "subHeader": "Choose a nickname for your wallet",
+      "walletName": "My New Wallet",
+      "saveLocally": "Your nickname is saved locally to your device.",
+      "visibleToYou": "It will only be visible to you.",
+      "button": "Continue"
+    },
+    "keepSafe": {
+      "headerStart": "Keep your",
+      "headerSecret": "Secret",
+      "headerEnd": "Recovery Phrase Safe",
+      "subHeader": "Ensuring the safety of your Secret Recovery Phrase is crucial.",
+      "description": "Treat your Secret Recovery Phrase like you would your most valuable possession – keep it secure at all times. A password manager is great security, writing the words down is even better.",
+      "bulletPoints": {
+        "share": "Don't share it with anyone else",
+        "lose": "If you lose it, we can't recover it"
+      },
+      "button": "Continue to Backup"
+    },
+    "manualBackup": {
+      "header": "Manual Backup",
+      "subHeader": "Save your Secret Recovery Phrase in a secure place that only you control.",
+      "copyToClipboard": "Copy to clipboard",
+      "copied": "Copied!",
+      "nextStep": "Next you'll be asked to confirm the positions of certain words in your Secret Recovery Phrase.",
+      "button": "Continue backup",
+      "success": {
+        "title": "Manual Backup Complete",
+        "description": "Your wallet has been successfully backed up.",
+        "viewWallet": "View Wallet"
+      }
     }
   },
   "graph": {

src/components/CarouselDots/CarouselDots.tsx

@@ -1,14 +1,20 @@
-import { Box, Flex, Link, useColorModeValue } from '@chakra-ui/react'
+import { Box, Flex, Link } from '@chakra-ui/react'
 
 type CarouselDotsProps = {
   length: number
   activeIndex: number
-  onClick: (newActiveIndex: number) => void
+  onClick?: (newActiveIndex: number) => void
+  activeDotBackgroundColor?: string
+  inactiveDotBackgroundColor?: string
 }
 
-export const CarouselDots = ({ length, activeIndex, onClick }: CarouselDotsProps) => {
-  const activeDotBackgroundColor = useColorModeValue('black', 'white')
-
+export const CarouselDots = ({
+  length,
+  activeIndex,
+  onClick,
+  activeDotBackgroundColor = 'blue.500',
+  inactiveDotBackgroundColor = 'text.subtle',
+}: CarouselDotsProps) => {
   return (
     <Flex justifyContent='space-between'>
       {new Array(length).fill(undefined).map((_, i) => (
@@ -18,10 +24,12 @@ export const CarouselDots = ({ length, activeIndex, onClick }: CarouselDotsProps
           width='7px'
           height='7px'
           borderRadius='50%'
-          backgroundColor={i === activeIndex - 1 ? activeDotBackgroundColor : 'text.subtle'}
+          backgroundColor={
+            i === activeIndex - 1 ? activeDotBackgroundColor : inactiveDotBackgroundColor
+          }
           // we need to pass an arg here, so we need an anonymous function wrapper
           // eslint-disable-next-line react-memo/require-usememo
-          onClick={_ => onClick(i + 1)}
+          onClick={() => onClick?.(i + 1)}
         />
       ))}
     </Flex>

src/components/MobileWalletDialog/MobileWalletDialog.tsx

@@ -2,6 +2,8 @@ import { AnimatePresence } from 'framer-motion'
 import { MemoryRouter, Redirect, Route, Switch } from 'react-router'
 import { Dialog } from 'components/Modal/components/Dialog'
 
+import { CreateRouter } from './routes/CreateWallet/CreateRouter'
+import { ManualBackup } from './routes/CreateWallet/ManualBackup'
 import { DeleteWallet } from './routes/DeleteWallet/DeleteWallet'
 import { RenameWallet } from './routes/RenameWallet'
 import { SavedWallets } from './routes/SavedWallets'
@@ -20,6 +22,9 @@ export const MobileWalletDialog: React.FC<MobileWalletDialogProps> = ({ isOpen,
           {({ location }) => (
             <AnimatePresence mode='wait' initial={false}>
               <Switch key={location.key} location={location}>
+                <Route path={MobileWalletDialogRoutes.Backup}>
+                  <ManualBackup showContinueButton={false} />
+                </Route>
                 <Route path={MobileWalletDialogRoutes.Saved}>
                   <SavedWallets onClose={onClose} />
                 </Route>
@@ -29,6 +34,9 @@ export const MobileWalletDialog: React.FC<MobileWalletDialogProps> = ({ isOpen,
                 <Route path={MobileWalletDialogRoutes.Delete}>
                   <DeleteWallet />
                 </Route>
+                <Route path={MobileWalletDialogRoutes.Create}>
+                  <CreateRouter onClose={onClose} />
+                </Route>
                 <Redirect exact from='/' to={MobileWalletDialogRoutes.Saved} />
               </Switch>
             </AnimatePresence>