From 11338089a397594de666e459140ca3353abcac98 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:09:47 +0100
Subject: [PATCH 01/34] [skip ci] wip: new wallet flow for native

---
 src/assets/translations/en/main.json          |  7 ++
 .../WalletProvider/NativeWallet/config.ts     |  2 +-
 .../NewWalletViews/NewWalletViewsSwitch.tsx   |  3 +
 .../wallets/native/NativeStart.tsx            | 74 +++++++++++++++++++
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index ecdc73bf8d2..0fac1544536 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -1871,6 +1871,13 @@
       "onboarding": {
         "skip": "Skip",
         "shapeshiftWallet": "ShapeShift Wallet",
+        "createNewWallet": "Create a new wallet",
+        "haveAKeystore": "Have a keystore?",
+        "importExisting": "Import existing",
+        "importFromKeystore": "Import from keystore",
+        "whatIsShapeshiftWallet": "What is ShapeShift Wallet?",
+        "yourDecentralizedGateway": "Your decentralization gateway. Trade and earn Bitcoin, Ethereum, Solana and more from a single, secure wallet.",
+        "crossChainFreedom": "Cross chain freedom. Access the best rates across multiple decentralized exchanges, no middleman required",
         "selfCustody": {
           "title": "Your ShapeShift Wallet is Self-Custody",
           "subTitle": "You hold the keys and you're the only one who can access it.",
diff --git a/src/context/WalletProvider/NativeWallet/config.ts b/src/context/WalletProvider/NativeWallet/config.ts
index 8d588ebb8ca..1b0d5fdef4c 100644
--- a/src/context/WalletProvider/NativeWallet/config.ts
+++ b/src/context/WalletProvider/NativeWallet/config.ts
@@ -1,5 +1,5 @@
 import type { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
-import { FoxIcon } from 'components/Icons/FoxIcon' // Ensure the import path is correct
+import { FoxIcon } from 'components/Icons/FoxIcon'
 import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 type NativeConfigType = Omit<SupportedWalletInfo<typeof NativeAdapter>, 'routes'>
diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 111d91307b5..0e08f648e21 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -23,6 +23,7 @@ import { SnapUpdate } from '../MetaMask/components/SnapUpdate'
 import { NativeWalletRoutes } from '../types'
 import { InstalledWalletsSection } from './sections/InstalledWalletsSection'
 import { MipdBody } from './wallets/mipd/MipdBody'
+import { NativeStart } from './wallets/native/NativeStart'
 
 const sectionsWidth = { base: 'full', md: '300px' }
 const containerWidth = {
@@ -50,6 +51,8 @@ const RightPanelContent = ({
     state: { modalType, isMipdProvider },
   } = useWallet()
 
+  if (!modalType) return <NativeStart />
+
   if (isMipdProvider && modalType) {
     return (
       <Switch>
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
new file mode 100644
index 00000000000..74dc6f36bc0
--- /dev/null
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -0,0 +1,74 @@
+import { Box, Button, Flex, Text as CText, useColorModeValue } from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { FoxIcon } from 'components/Icons/FoxIcon'
+import { Text } from 'components/Text'
+
+export const NativeStart = () => {
+  const translate = useTranslate()
+
+  const headingColor = useColorModeValue('gray.800', 'whiteAlpha.800')
+  const bodyColor = useColorModeValue('gray.600', 'whiteAlpha.600')
+  const keystoreBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
+  const mainTextColor = useColorModeValue('gray.700', 'whiteAlpha.800')
+
+  const handleCreateClick = useCallback(() => console.log('TODO: handle create wallet'), [])
+  const handleImportClick = useCallback(() => console.log('TODO: handle import wallet'), [])
+  const handleImportKeystoreClick = useCallback(
+    () => console.log('TODO: handle import from keystore'),
+    [],
+  )
+
+  return (
+    <Flex
+      direction='column'
+      alignItems='center'
+      justifyContent='center'
+      h='full'
+      maxW='md'
+      mx='auto'
+      px={4}
+      textAlign='center'
+    >
+      <Box mb={6}>
+        <FoxIcon boxSize='16' />
+      </Box>
+
+      <Text
+        fontSize='2xl'
+        fontWeight='bold'
+        mb={4}
+        color={headingColor}
+        translation='walletProvider.shapeShift.onboarding.whatIsShapeshiftWallet'
+      />
+
+      <Text
+        color={mainTextColor}
+        mb={8}
+        translation='walletProvider.shapeShift.onboarding.yourDecentralizedGateway'
+      />
+      <Text
+        color={mainTextColor}
+        mb={12}
+        translation='walletProvider.shapeShift.onboarding.crossChainFreedom'
+      />
+
+      <Box bg={keystoreBgColor} rounded='md' width='100%' py={2} mb={4} textAlign='center'>
+        <CText color={bodyColor}>
+          {translate('walletProvider.shapeShift.onboarding.haveAKeystore')}{' '}
+          <Button variant='link' color='blue.500' onClick={handleImportKeystoreClick}>
+            {translate('walletProvider.shapeShift.onboarding.importFromKeystore')}
+          </Button>
+        </CText>
+      </Box>
+
+      <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
+        {translate('walletProvider.shapeShift.onboarding.createANewWallet')}
+      </Button>
+
+      <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
+        {translate('walletProvider.shapeShift.onboarding.importExisting')}
+      </Button>
+    </Flex>
+  )
+}

From 6da6baa6a8592c00556563a2d5a269104e963d3a Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:11:19 +0100
Subject: [PATCH 02/34] [skip ci] feat: handlers

---
 .../NewWalletViews/wallets/native/NativeStart.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index 74dc6f36bc0..9d14a035154 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -1,22 +1,28 @@
 import { Box, Button, Flex, Text as CText, useColorModeValue } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { Text } from 'components/Text'
+import { NativeWalletRoutes } from 'context/WalletProvider/types'
 
 export const NativeStart = () => {
   const translate = useTranslate()
+  const history = useHistory()
 
   const headingColor = useColorModeValue('gray.800', 'whiteAlpha.800')
   const bodyColor = useColorModeValue('gray.600', 'whiteAlpha.600')
   const keystoreBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
   const mainTextColor = useColorModeValue('gray.700', 'whiteAlpha.800')
 
-  const handleCreateClick = useCallback(() => console.log('TODO: handle create wallet'), [])
-  const handleImportClick = useCallback(() => console.log('TODO: handle import wallet'), [])
+  const handleCreateClick = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
+  const handleImportClick = useCallback(
+    () => history.push(NativeWalletRoutes.ImportSelect),
+    [history],
+  )
   const handleImportKeystoreClick = useCallback(
-    () => console.log('TODO: handle import from keystore'),
-    [],
+    () => history.push(NativeWalletRoutes.ImportKeystore),
+    [history],
   )
 
   return (

From d7b51a1256e3cee7bf9333f66322e8cbdd9495bb Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 01:25:24 +0100
Subject: [PATCH 03/34] feat: stopping point

---
 .../components/NativePassword.tsx             |   8 +-
 .../NativeWallet/components/NativeRename.tsx  |   5 +-
 .../NativeWallet/components/NativeSuccess.tsx |   5 +-
 .../components/NativeTestPhrase.tsx           |   8 +-
 .../WalletProvider/NativeWallet/types.ts      |  13 --
 .../NewWalletViews/NewWalletViewsSwitch.tsx   |  59 +++++++-
 .../sections/SavedWalletsSection.tsx          | 134 ++++++++++++++++++
 .../wallets/native/NativeStart.tsx            |   2 +-
 .../WalletProvider/WalletViewsSwitch.tsx      |   5 +
 9 files changed, 216 insertions(+), 23 deletions(-)
 create mode 100644 src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx

diff --git a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
index 61be77a68c0..f36a50a13d4 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
@@ -17,12 +17,16 @@ import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
+import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 import { NativeWalletRoutes } from 'context/WalletProvider/types'
 
-import type { NativeSetupProps, NativeWalletValues } from '../types'
+import type { LocationState, NativeWalletValues } from '../types'
 
-export const NativePassword = ({ history, location }: NativeSetupProps) => {
+export const NativePassword = ({
+  history,
+  location,
+}: RouteComponentProps<{}, any, LocationState>) => {
   const translate = useTranslate()
   const [showPw, setShowPw] = useState<boolean>(false)
   const [showConfirmPw, setShowConfirmPw] = useState<boolean>(false)
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx b/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
index 665d0bf163f..f1da1d70f16 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
@@ -14,11 +14,12 @@ import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
+import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 
-import type { NativeSetupProps, NativeWalletValues } from '../types'
+import type { NativeWalletValues } from '../types'
 
-export const NativeRename = ({ history, location }: NativeSetupProps) => {
+export const NativeRename = ({ history, location }: RouteComponentProps) => {
   const translate = useTranslate()
   const [showPw, setShowPw] = useState<boolean>(false)
 
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
index 124e0df011c..d5a439c2395 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
@@ -1,10 +1,11 @@
 import { Box, ModalBody, ModalHeader } from '@chakra-ui/react'
+import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 
 import { useNativeSuccess } from '../hooks/useNativeSuccess'
-import type { NativeSetupProps } from '../types'
+import type { LocationState } from '../types'
 
-export const NativeSuccess = ({ location }: NativeSetupProps) => {
+export const NativeSuccess = ({ location }: RouteComponentProps<{}, any, LocationState>) => {
   const { isSuccessful } = useNativeSuccess({ vault: location.state.vault })
 
   return (
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx b/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
index 638bf9d83f4..0acf8f38aa3 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
@@ -7,9 +7,10 @@ import slice from 'lodash/slice'
 import uniq from 'lodash/uniq'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
+import type { RouteComponentProps } from 'react-router-dom'
 import { RawText, Text } from 'components/Text'
 
-import type { NativeSetupProps } from '../types'
+import type { LocationState } from '../types'
 
 const Revocable = Default.Revocable
 const revocable = Default.revocable
@@ -26,7 +27,10 @@ type TestState = {
   correctAnswerIndex: number
 }
 
-export const NativeTestPhrase = ({ history, location }: NativeSetupProps) => {
+export const NativeTestPhrase = ({
+  history,
+  location,
+}: RouteComponentProps<{}, any, LocationState>) => {
   const translate = useTranslate()
   const [testState, setTestState] = useState<TestState | null>(null)
   const [hasAlreadySaved, setHasAlreadySaved] = useState(false)
diff --git a/src/context/WalletProvider/NativeWallet/types.ts b/src/context/WalletProvider/NativeWallet/types.ts
index f8adc9d889a..d2a392aa4a2 100644
--- a/src/context/WalletProvider/NativeWallet/types.ts
+++ b/src/context/WalletProvider/NativeWallet/types.ts
@@ -1,7 +1,4 @@
 import type { Vault } from '@shapeshiftoss/hdwallet-native-vault'
-import type React from 'react'
-import type { RouteComponentProps } from 'react-router-dom'
-import type { ActionTypes } from 'context/WalletProvider/actions'
 
 export type NativeWalletValues = {
   name: string
@@ -21,13 +18,3 @@ export interface LocationState {
     message: string
   }
 }
-
-export interface NativeSetupProps
-  extends RouteComponentProps<
-    {},
-    any, // history
-    LocationState
-  > {
-  vault: Vault
-  dispatch: React.Dispatch<ActionTypes>
-}
diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 0e08f648e21..d7da665132f 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -13,15 +13,23 @@ import {
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useTranslate } from 'react-polyglot'
-import { Route, Switch, useHistory } from 'react-router-dom'
+import type { RouteComponentProps } from 'react-router-dom'
+import { Route, Switch, useHistory, useLocation } from 'react-router-dom'
 import { Text } from 'components/Text'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { useWallet } from 'hooks/useWallet/useWallet'
 
 import { SnapInstall } from '../MetaMask/components/SnapInstall'
 import { SnapUpdate } from '../MetaMask/components/SnapUpdate'
+import { EnterPassword } from '../NativeWallet/components/EnterPassword'
+import { NativeCreate } from '../NativeWallet/components/NativeCreate'
+import { NativeImportKeystore } from '../NativeWallet/components/NativeImportKeystore'
+import { NativePassword } from '../NativeWallet/components/NativePassword'
+import { NativeSuccess } from '../NativeWallet/components/NativeSuccess'
+import type { LocationState } from '../NativeWallet/types'
 import { NativeWalletRoutes } from '../types'
 import { InstalledWalletsSection } from './sections/InstalledWalletsSection'
+import { SavedWalletsSection } from './sections/SavedWalletsSection'
 import { MipdBody } from './wallets/mipd/MipdBody'
 import { NativeStart } from './wallets/native/NativeStart'
 
@@ -51,6 +59,54 @@ const RightPanelContent = ({
     state: { modalType, isMipdProvider },
   } = useWallet()
 
+  const location = useLocation()
+
+  if (location.pathname.startsWith('/native')) {
+    return (
+      <Switch>
+        <Route
+          exact
+          path={NativeWalletRoutes.ImportKeystore}
+          // we need to pass an arg here, so we need an anonymous function wrapper
+          // eslint-disable-next-line react-memo/require-usememo
+          render={routeProps => <NativeImportKeystore {...routeProps} />}
+        />
+        <Route exact path={NativeWalletRoutes.Create}>
+          <NativeCreate />
+        </Route>
+        <Route
+          exact
+          path={NativeWalletRoutes.Password}
+          // TODO(gomes): add NativePassowrdNew with new design
+          // we need to pass an arg here, so we need an anonymous function wrapper
+          // eslint-disable-next-line react-memo/require-usememo
+          render={routeProps => (
+            <NativePassword {...(routeProps as RouteComponentProps<{}, any, LocationState>)} />
+          )}
+        />
+        <Route
+          exact
+          path={NativeWalletRoutes.EnterPassword}
+          // TODO(gomes): add EnterPasswordNew with new design
+        >
+          <EnterPassword />
+        </Route>
+
+        <Route
+          exact
+          path={NativeWalletRoutes.Success}
+          // TODO(gomes): add NativeSuccessNew with new design
+          // we need to pass an arg here, so we need an anonymous function wrapper
+          // eslint-disable-next-line react-memo/require-usememo
+          render={routeProps => (
+            <NativeSuccess {...(routeProps as RouteComponentProps<{}, any, LocationState>)} />
+          )}
+        />
+      </Switch>
+    )
+  }
+
+  // No modal type, and no in-flight native routes - assume enpty state
   if (!modalType) return <NativeStart />
 
   if (isMipdProvider && modalType) {
@@ -175,6 +231,7 @@ export const NewWalletViewsSwitch = () => {
     () => (
       <Box w={sectionsWidth} p={6}>
         <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
+        <SavedWalletsSection />
         <InstalledWalletsSection
           modalType={modalType}
           isLoading={isLoading}
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
new file mode 100644
index 00000000000..e70b0aecc56
--- /dev/null
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -0,0 +1,134 @@
+import { Box, Button, Flex, Stack, Text as CText } from '@chakra-ui/react'
+import { useCallback, useEffect, useState } from 'react'
+import { FaWallet } from 'react-icons/fa'
+import { FoxIcon } from 'components/Icons/FoxIcon'
+import { Text } from 'components/Text'
+import { WalletActions } from 'context/WalletProvider/actions'
+import { KeyManager } from 'context/WalletProvider/KeyManager'
+import { useLocalWallet } from 'context/WalletProvider/local-wallet'
+import { NativeConfig } from 'context/WalletProvider/NativeWallet/config'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+type VaultInfo = {
+  id: string
+  name: string
+}
+
+type WalletCardProps = {
+  wallet: VaultInfo
+  onClick: (wallet: VaultInfo) => void
+}
+
+const WalletCard = ({ wallet, onClick }: WalletCardProps) => {
+  const handleClick = useCallback(() => onClick(wallet), [onClick, wallet])
+  return (
+    <Box
+      as={Button}
+      key={wallet.id}
+      variant='ghost'
+      px={4}
+      ml={-4}
+      py={6}
+      borderRadius='md'
+      width='full'
+      onClick={handleClick}
+    >
+      <Flex alignItems='center' width='full'>
+        <FoxIcon boxSize='24px' mr={3}>
+          <FaWallet />
+        </FoxIcon>
+        <Box textAlign='left'>
+          <CText>{wallet.name}</CText>
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
+
+export const SavedWalletsSection = () => {
+  const [wallets, setWallets] = useState<VaultInfo[]>([])
+  const localWallet = useLocalWallet()
+  const { getAdapter, dispatch } = useWallet()
+
+  // TODO(gomes): let's use this PR as an opportunity to remove this digusting IIAFE from copypasta, yes it works but pls
+  useEffect(() => {
+    ;(async () => {
+      const Vault = await import('@shapeshiftoss/hdwallet-native-vault').then(m => m.Vault)
+      try {
+        const vaultIds = await Vault.list()
+        const storedWallets: VaultInfo[] = await Promise.all(
+          vaultIds.map(async id => {
+            const meta = await Vault.meta(id)
+            const name = String(meta?.get('name') ?? id)
+            return { id, name }
+          }),
+        )
+        setWallets(storedWallets)
+      } catch (e) {
+        console.error(e)
+        setWallets([])
+      }
+    })()
+  }, [])
+
+  const handleWalletSelect = useCallback(
+    async (wallet: VaultInfo) => {
+      const adapter = await getAdapter(KeyManager.Native)
+      const deviceId = wallet.id
+      if (adapter) {
+        const { name, icon } = NativeConfig
+        try {
+          dispatch({
+            type: WalletActions.SET_NATIVE_PENDING_DEVICE_ID,
+            payload: deviceId,
+          })
+
+          const walletInstance = await adapter.pairDevice(deviceId)
+          if (!(await walletInstance?.isInitialized())) {
+            await walletInstance?.initialize()
+          } else {
+            dispatch({
+              type: WalletActions.SET_WALLET,
+              payload: {
+                wallet: walletInstance,
+                name,
+                icon,
+                deviceId,
+                meta: { label: wallet.name },
+                connectedType: KeyManager.Native,
+              },
+            })
+            dispatch({
+              type: WalletActions.SET_IS_CONNECTED,
+              payload: true,
+            })
+            dispatch({ type: WalletActions.RESET_NATIVE_PENDING_DEVICE_ID })
+            dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+          }
+
+          localWallet.setLocalWallet({ type: KeyManager.Native, deviceId })
+          localWallet.setLocalNativeWalletName(wallet.name)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    },
+    [dispatch, getAdapter, localWallet],
+  )
+
+  if (!wallets.length) return null
+
+  return (
+    <Stack spacing={2} my={6}>
+      <Text
+        fontSize='sm'
+        fontWeight='medium'
+        color='gray.500'
+        translation={'walletProvider.shapeShift.load.header'}
+      />
+      {wallets.map(wallet => (
+        <WalletCard wallet={wallet} onClick={handleWalletSelect} />
+      ))}
+    </Stack>
+  )
+}
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index 9d14a035154..fca79d2a44e 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -69,7 +69,7 @@ export const NativeStart = () => {
       </Box>
 
       <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
-        {translate('walletProvider.shapeShift.onboarding.createANewWallet')}
+        {translate('walletProvider.shapeShift.onboarding.createNewWallet')}
       </Button>
 
       <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
diff --git a/src/context/WalletProvider/WalletViewsSwitch.tsx b/src/context/WalletProvider/WalletViewsSwitch.tsx
index 65a2566231a..b9704077bba 100644
--- a/src/context/WalletProvider/WalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/WalletViewsSwitch.tsx
@@ -92,6 +92,11 @@ export const WalletViewsSwitch = () => {
     await cancelWalletRequests()
   }, [cancelWalletRequests, dispatch, history])
 
+  useEffect(() => {
+    // Reset on mount
+    dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '' })
+  }, [dispatch])
+
   useEffect(() => {
     if (initialRoute) {
       history.push(initialRoute)

From 01142ece926fbf8b11b9ed864455aade7c8c3f78 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 10:09:20 +0100
Subject: [PATCH 04/34] [skip ci] chore: one too deep on the cleanup

---
 .../NativeWallet/components/NativePassword.tsx            | 8 ++------
 .../NativeWallet/components/NativeRename.tsx              | 5 ++---
 .../NativeWallet/components/NativeSuccess.tsx             | 5 ++---
 .../NativeWallet/components/NativeTestPhrase.tsx          | 8 ++------
 src/context/WalletProvider/NativeWallet/types.ts          | 3 +++
 5 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
index f36a50a13d4..61be77a68c0 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
@@ -17,16 +17,12 @@ import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
-import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 import { NativeWalletRoutes } from 'context/WalletProvider/types'
 
-import type { LocationState, NativeWalletValues } from '../types'
+import type { NativeSetupProps, NativeWalletValues } from '../types'
 
-export const NativePassword = ({
-  history,
-  location,
-}: RouteComponentProps<{}, any, LocationState>) => {
+export const NativePassword = ({ history, location }: NativeSetupProps) => {
   const translate = useTranslate()
   const [showPw, setShowPw] = useState<boolean>(false)
   const [showConfirmPw, setShowConfirmPw] = useState<boolean>(false)
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx b/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
index f1da1d70f16..665d0bf163f 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeRename.tsx
@@ -14,12 +14,11 @@ import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { FaEye, FaEyeSlash } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
-import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 
-import type { NativeWalletValues } from '../types'
+import type { NativeSetupProps, NativeWalletValues } from '../types'
 
-export const NativeRename = ({ history, location }: RouteComponentProps) => {
+export const NativeRename = ({ history, location }: NativeSetupProps) => {
   const translate = useTranslate()
   const [showPw, setShowPw] = useState<boolean>(false)
 
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
index d5a439c2395..124e0df011c 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
@@ -1,11 +1,10 @@
 import { Box, ModalBody, ModalHeader } from '@chakra-ui/react'
-import type { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'components/Text'
 
 import { useNativeSuccess } from '../hooks/useNativeSuccess'
-import type { LocationState } from '../types'
+import type { NativeSetupProps } from '../types'
 
-export const NativeSuccess = ({ location }: RouteComponentProps<{}, any, LocationState>) => {
+export const NativeSuccess = ({ location }: NativeSetupProps) => {
   const { isSuccessful } = useNativeSuccess({ vault: location.state.vault })
 
   return (
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx b/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
index 0acf8f38aa3..638bf9d83f4 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeTestPhrase.tsx
@@ -7,10 +7,9 @@ import slice from 'lodash/slice'
 import uniq from 'lodash/uniq'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
-import type { RouteComponentProps } from 'react-router-dom'
 import { RawText, Text } from 'components/Text'
 
-import type { LocationState } from '../types'
+import type { NativeSetupProps } from '../types'
 
 const Revocable = Default.Revocable
 const revocable = Default.revocable
@@ -27,10 +26,7 @@ type TestState = {
   correctAnswerIndex: number
 }
 
-export const NativeTestPhrase = ({
-  history,
-  location,
-}: RouteComponentProps<{}, any, LocationState>) => {
+export const NativeTestPhrase = ({ history, location }: NativeSetupProps) => {
   const translate = useTranslate()
   const [testState, setTestState] = useState<TestState | null>(null)
   const [hasAlreadySaved, setHasAlreadySaved] = useState(false)
diff --git a/src/context/WalletProvider/NativeWallet/types.ts b/src/context/WalletProvider/NativeWallet/types.ts
index d2a392aa4a2..491d952c0c0 100644
--- a/src/context/WalletProvider/NativeWallet/types.ts
+++ b/src/context/WalletProvider/NativeWallet/types.ts
@@ -1,4 +1,5 @@
 import type { Vault } from '@shapeshiftoss/hdwallet-native-vault'
+import type { RouteComponentProps } from 'react-router-dom'
 
 export type NativeWalletValues = {
   name: string
@@ -18,3 +19,5 @@ export interface LocationState {
     message: string
   }
 }
+
+export type NativeSetupProps = RouteComponentProps<{}, any, LocationState>

From 40ec15cf5a48da40610931e17ffc9d686f9977fe Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 10:27:02 +0100
Subject: [PATCH 05/34] feat: progression

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 104 +++++++++---------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index d7da665132f..6b749ea49f2 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -13,7 +13,6 @@ import {
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useTranslate } from 'react-polyglot'
-import type { RouteComponentProps } from 'react-router-dom'
 import { Route, Switch, useHistory, useLocation } from 'react-router-dom'
 import { Text } from 'components/Text'
 import { WalletActions } from 'context/WalletProvider/actions'
@@ -26,7 +25,8 @@ import { NativeCreate } from '../NativeWallet/components/NativeCreate'
 import { NativeImportKeystore } from '../NativeWallet/components/NativeImportKeystore'
 import { NativePassword } from '../NativeWallet/components/NativePassword'
 import { NativeSuccess } from '../NativeWallet/components/NativeSuccess'
-import type { LocationState } from '../NativeWallet/types'
+import { NativeTestPhrase } from '../NativeWallet/components/NativeTestPhrase'
+import type { NativeSetupProps } from '../NativeWallet/types'
 import { NativeWalletRoutes } from '../types'
 import { InstalledWalletsSection } from './sections/InstalledWalletsSection'
 import { SavedWalletsSection } from './sections/SavedWalletsSection'
@@ -49,6 +49,52 @@ type RightPanelContentProps = {
   setError: (error: string | null) => void
 }
 
+const nativeRoutes = (
+  <Switch>
+    <Route
+      exact
+      path={NativeWalletRoutes.ImportKeystore}
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeImportKeystore {...routeProps} />}
+    />
+    <Route exact path={NativeWalletRoutes.Create}>
+      <NativeCreate />
+    </Route>
+    <Route
+      exact
+      path={NativeWalletRoutes.Password}
+      // TODO(gomes): add NativePassowrdNew with new design
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativePassword {...(routeProps as NativeSetupProps)} />}
+    />
+    <Route
+      exact
+      path={NativeWalletRoutes.EnterPassword}
+      // TODO(gomes): add EnterPasswordNew with new design
+    >
+      <EnterPassword />
+    </Route>
+    <Route
+      exact
+      path={NativeWalletRoutes.Success}
+      // TODO(gomes): add NativeSuccessNew with new design
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeSuccess {...(routeProps as NativeSetupProps)} />}
+    />
+    <Route
+      exact
+      path={NativeWalletRoutes.CreateTest}
+      // TODO(gomes): add NativeTestPhraseNew with new design
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeTestPhrase {...(routeProps as NativeSetupProps)} />}
+    />
+  </Switch>
+)
+
 const RightPanelContent = ({
   isLoading,
   setIsLoading,
@@ -61,53 +107,10 @@ const RightPanelContent = ({
 
   const location = useLocation()
 
-  if (location.pathname.startsWith('/native')) {
-    return (
-      <Switch>
-        <Route
-          exact
-          path={NativeWalletRoutes.ImportKeystore}
-          // we need to pass an arg here, so we need an anonymous function wrapper
-          // eslint-disable-next-line react-memo/require-usememo
-          render={routeProps => <NativeImportKeystore {...routeProps} />}
-        />
-        <Route exact path={NativeWalletRoutes.Create}>
-          <NativeCreate />
-        </Route>
-        <Route
-          exact
-          path={NativeWalletRoutes.Password}
-          // TODO(gomes): add NativePassowrdNew with new design
-          // we need to pass an arg here, so we need an anonymous function wrapper
-          // eslint-disable-next-line react-memo/require-usememo
-          render={routeProps => (
-            <NativePassword {...(routeProps as RouteComponentProps<{}, any, LocationState>)} />
-          )}
-        />
-        <Route
-          exact
-          path={NativeWalletRoutes.EnterPassword}
-          // TODO(gomes): add EnterPasswordNew with new design
-        >
-          <EnterPassword />
-        </Route>
-
-        <Route
-          exact
-          path={NativeWalletRoutes.Success}
-          // TODO(gomes): add NativeSuccessNew with new design
-          // we need to pass an arg here, so we need an anonymous function wrapper
-          // eslint-disable-next-line react-memo/require-usememo
-          render={routeProps => (
-            <NativeSuccess {...(routeProps as RouteComponentProps<{}, any, LocationState>)} />
-          )}
-        />
-      </Switch>
-    )
-  }
+  if (location.pathname.startsWith('/native')) return nativeRoutes
 
   // No modal type, and no in-flight native routes - assume enpty state
-  if (!modalType) return <NativeStart />
+  if (!modalType || modalType === 'native') return <NativeStart />
 
   if (isMipdProvider && modalType) {
     return (
@@ -258,13 +261,12 @@ export const NewWalletViewsSwitch = () => {
     )
   }, [bodyBgColor, error, isLoading])
 
-  const maybeMobileBackButton = useMemo(() => {
-    if (!isMobile) return
+  const maybeBackButton = useMemo(() => {
     return (
       <Switch>
         <Route exact path='/' />
         <Route path='*'>
-          {/* Precisely what it says on the var name - adds a back button for mobile only, and for non-root paths only
+          {/* Precisely what it says on the var name - adds a back button for non-root paths only
            *  (i.e, can't go back when in root path)
            */}
           <Box
@@ -314,7 +316,7 @@ export const NewWalletViewsSwitch = () => {
               <ModalCloseButton position='static' borderRadius='full' size='sm' />
             </Box>
 
-            {maybeMobileBackButton}
+            {maybeBackButton}
             <Flex minH='600px' w={containerWidth}>
               <Switch>
                 {/* Always display sections for the root route, no matter the viewport */}

From 5485c88fc6e41f37661a297860ad2f272b869204 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 13:30:21 +0100
Subject: [PATCH 06/34] fix: routing shenanigans

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 69 ++++++++++---------
 .../sections/InstalledWalletsSection.tsx      |  9 ++-
 .../sections/SavedWalletsSection.tsx          |  2 +
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 6b749ea49f2..adc97ea73a1 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -10,10 +10,13 @@ import {
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react'
+import type { Location } from 'history'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useTranslate } from 'react-polyglot'
-import { Route, Switch, useHistory, useLocation } from 'react-router-dom'
+import type { StaticContext } from 'react-router'
+import type { RouteComponentProps } from 'react-router-dom'
+import { Route, Switch, useHistory } from 'react-router-dom'
 import { Text } from 'components/Text'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { useWallet } from 'hooks/useWallet/useWallet'
@@ -47,6 +50,7 @@ type RightPanelContentProps = {
   setIsLoading: (loading: boolean) => void
   error: string | null
   setError: (error: string | null) => void
+  location: Location
 }
 
 const nativeRoutes = (
@@ -100,17 +104,16 @@ const RightPanelContent = ({
   setIsLoading,
   error,
   setError,
+  location,
 }: RightPanelContentProps) => {
   const {
     state: { modalType, isMipdProvider },
   } = useWallet()
 
-  const location = useLocation()
-
   if (location.pathname.startsWith('/native')) return nativeRoutes
 
   // No modal type, and no in-flight native routes - assume enpty state
-  if (!modalType || modalType === 'native') return <NativeStart />
+  if (!modalType || modalType === 'native' || location.pathname === '/') return <NativeStart />
 
   if (isMipdProvider && modalType) {
     return (
@@ -138,15 +141,6 @@ const RightPanelContent = ({
             </Box>
           </Flex>
         </Route>
-        <Route path='/'>
-          <MipdBody
-            rdns={modalType}
-            isLoading={isLoading}
-            error={error}
-            setIsLoading={setIsLoading}
-            setError={setError}
-          />
-        </Route>
       </Switch>
     )
   }
@@ -221,45 +215,60 @@ export const NewWalletViewsSwitch = () => {
     wallet,
   ])
 
+  // Push to history on initialRoute change
   useEffect(() => {
     if (initialRoute) history.push(initialRoute)
+    return
   }, [history, initialRoute])
+  // Reset history on modal open/unmount
+  useEffect(() => {
+    history.replace('/')
 
-  // Reset initial route on connect to handle e.g switching from MM with snap install route to another mipd provider
-  const handleConnect = useCallback(() => {
-    if (initialRoute) history.push(initialRoute)
-  }, [history, initialRoute])
+    return () => {
+      history.replace('/')
+    }
+    // Only run this on initial render, and unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const sections = useMemo(
     () => (
       <Box w={sectionsWidth} p={6}>
         <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
         <SavedWalletsSection />
-        <InstalledWalletsSection
-          modalType={modalType}
-          isLoading={isLoading}
-          onConnect={handleConnect}
-        />
+        <InstalledWalletsSection modalType={modalType} isLoading={isLoading} />
         {/* TODO(gomes): more sections */}
       </Box>
     ),
-    [handleConnect, isLoading, modalType],
+    [isLoading, modalType],
   )
 
   const bodyBgColor = useColorModeValue('gray.50', 'whiteAlpha.50')
   const buttonContainerBgColor = useColorModeValue('gray.100', 'whiteAlpha.100')
-  const body = useMemo(() => {
-    return (
+
+  const body = useCallback(
+    (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => (
       <Box flex={1} bg={bodyBgColor} p={6}>
         <RightPanelContent
+          location={routeProps.history.location}
           isLoading={isLoading}
           setIsLoading={setIsLoading}
           error={error}
           setError={setError}
         />
       </Box>
-    )
-  }, [bodyBgColor, error, isLoading])
+    ),
+    [bodyBgColor, error, isLoading],
+  )
+
+  const bodyDesktopOnly = useCallback(
+    (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => {
+      if (isMobile) return null
+
+      return body(routeProps)
+    },
+    [body],
+  )
 
   const maybeBackButton = useMemo(() => {
     return (
@@ -328,11 +337,9 @@ export const NewWalletViewsSwitch = () => {
               </Switch>
               <Switch>
                 {/* Only display side panel after a wallet has been selected on mobile */}
-                <Route exact path='/'>
-                  {!isMobile ? body : null}
-                </Route>
+                <Route exact path='/' render={bodyDesktopOnly} />
                 {/* And for all non-root routes, no matter the viewport */}
-                <Route path='*'>{body}</Route>
+                <Route path='*' render={body} />
               </Switch>
             </Flex>
           </Box>
diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index fac62e0d011..4785021e68b 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -4,6 +4,7 @@ import type { EIP6963ProviderDetail } from 'mipd'
 import { useCallback, useMemo } from 'react'
 import { isMobile } from 'react-device-detect'
 import { Text } from 'components/Text'
+import { WalletActions } from 'context/WalletProvider/actions'
 import type { KeyManager } from 'context/WalletProvider/KeyManager'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { isMobile as isMobileApp } from 'lib/globals'
@@ -50,13 +51,11 @@ const MipdProviderSelectItem = ({
 export const InstalledWalletsSection = ({
   modalType,
   isLoading,
-  onConnect,
 }: {
   modalType: string | null
   isLoading: boolean
-  onConnect: () => void
 }) => {
-  const { connect } = useWallet()
+  const { dispatch, connect } = useWallet()
   const detectedMipdProviders = useMipdProviders()
 
   const supportedStaticProviders = useMemo(() => {
@@ -91,9 +90,9 @@ export const InstalledWalletsSection = ({
   const handleConnectMipd = useCallback(
     (rdns: string) => {
       connect(rdns as KeyManager, true)
-      onConnect()
+      dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '/metamask/connect' })
     },
-    [connect, onConnect],
+    [connect, dispatch],
   )
 
   return (
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index e70b0aecc56..23a9d9865bc 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -73,6 +73,8 @@ export const SavedWalletsSection = () => {
 
   const handleWalletSelect = useCallback(
     async (wallet: VaultInfo) => {
+      dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '/native/enter-password' })
+
       const adapter = await getAdapter(KeyManager.Native)
       const deviceId = wallet.id
       if (adapter) {

From 1f3882bc45f380b03198ba96c0d3bbfe44c5d372 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 13:43:10 +0100
Subject: [PATCH 07/34] fix: more routing shenanigans

---
 src/context/WalletProvider/WalletViewsRouter.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/context/WalletProvider/WalletViewsRouter.tsx b/src/context/WalletProvider/WalletViewsRouter.tsx
index c456a2677cd..1504f7cd711 100644
--- a/src/context/WalletProvider/WalletViewsRouter.tsx
+++ b/src/context/WalletProvider/WalletViewsRouter.tsx
@@ -1,5 +1,6 @@
 import { MemoryRouter } from 'react-router-dom'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
+import { useWallet } from 'hooks/useWallet/useWallet'
 
 import { NewWalletViewsSwitch } from './NewWalletViews/NewWalletViewsSwitch'
 import { WalletViewsSwitch } from './WalletViewsSwitch'
@@ -7,6 +8,13 @@ import { WalletViewsSwitch } from './WalletViewsSwitch'
 export const WalletViewsRouter = () => {
   const isNewWalletFlowEnabled = useFeatureFlag('NewWalletFlow')
 
+  const {
+    state: { modal },
+  } = useWallet()
+
+  // Do *not* render the modal if it's not opened. Else, effects that shouldn't *will* run and produce bugs.
+  if (!modal) return null
+
   return (
     <MemoryRouter initialIndex={0}>
       {isNewWalletFlowEnabled ? <NewWalletViewsSwitch /> : <WalletViewsSwitch />}

From f2ce7ab33cf54c460b4ffc41c15f9fe0dd9e911d Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 13:56:08 +0100
Subject: [PATCH 08/34] feat: missing routes

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index adc97ea73a1..d2226261d84 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -26,6 +26,8 @@ import { SnapUpdate } from '../MetaMask/components/SnapUpdate'
 import { EnterPassword } from '../NativeWallet/components/EnterPassword'
 import { NativeCreate } from '../NativeWallet/components/NativeCreate'
 import { NativeImportKeystore } from '../NativeWallet/components/NativeImportKeystore'
+import { NativeImportSeed } from '../NativeWallet/components/NativeImportSeed'
+import { NativeImportSelect } from '../NativeWallet/components/NativeImportSelect'
 import { NativePassword } from '../NativeWallet/components/NativePassword'
 import { NativeSuccess } from '../NativeWallet/components/NativeSuccess'
 import { NativeTestPhrase } from '../NativeWallet/components/NativeTestPhrase'
@@ -62,6 +64,22 @@ const nativeRoutes = (
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativeImportKeystore {...routeProps} />}
     />
+    <Route
+      exact
+      path={NativeWalletRoutes.ImportSeed}
+      // TODO(gomes): add NativeImportSelectNew with new design
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeImportSeed {...routeProps} />}
+    />
+    <Route
+      exact
+      path={NativeWalletRoutes.ImportSelect}
+      // TODO(gomes): add NativeImportSelectNew with new design
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeImportSelect {...routeProps} />}
+    />
     <Route exact path={NativeWalletRoutes.Create}>
       <NativeCreate />
     </Route>

From 718dc3a36b0a7ad6f9bb0c3402669d6d5d6dff39 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 14:06:56 +0100
Subject: [PATCH 09/34] fix: styles

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index d2226261d84..00994b7fa74 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -146,18 +146,10 @@ const RightPanelContent = ({
           />
         </Route>
         <Route path='/metamask/snap/install'>
-          <Flex height='full' alignItems='center'>
-            <Box width='full'>
-              <SnapInstall />
-            </Box>
-          </Flex>
+          <SnapInstall />
         </Route>
         <Route path='/metamask/snap/update'>
-          <Flex height='full' alignItems='center'>
-            <Box width='full'>
-              <SnapUpdate />
-            </Box>
-          </Flex>
+          <SnapUpdate />
         </Route>
       </Switch>
     )
@@ -267,13 +259,17 @@ export const NewWalletViewsSwitch = () => {
   const body = useCallback(
     (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => (
       <Box flex={1} bg={bodyBgColor} p={6}>
-        <RightPanelContent
-          location={routeProps.history.location}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          error={error}
-          setError={setError}
-        />
+        <Flex height='full' alignItems='center'>
+          <Box width='full'>
+            <RightPanelContent
+              location={routeProps.history.location}
+              isLoading={isLoading}
+              setIsLoading={setIsLoading}
+              error={error}
+              setError={setError}
+            />
+          </Box>
+        </Flex>
       </Box>
     ),
     [bodyBgColor, error, isLoading],
@@ -344,6 +340,7 @@ export const NewWalletViewsSwitch = () => {
             </Box>
 
             {maybeBackButton}
+
             <Flex minH='600px' w={containerWidth}>
               <Switch>
                 {/* Always display sections for the root route, no matter the viewport */}

From 8110223cacab91f0c90095091300bd2fdfe02b68 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 14:22:00 +0100
Subject: [PATCH 10/34] fix: more style fixes

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 61 ++++++++-----------
 1 file changed, 24 insertions(+), 37 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 00994b7fa74..72566ef4ed5 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -258,7 +258,29 @@ export const NewWalletViewsSwitch = () => {
 
   const body = useCallback(
     (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => (
-      <Box flex={1} bg={bodyBgColor} p={6}>
+      <Box flex={1} bg={bodyBgColor} p={6} position='relative'>
+        {routeProps.history.location.pathname !== '/' ? (
+          // Only show back button for non-root routes
+          <Box
+            position='absolute'
+            left={3}
+            top={3}
+            zIndex={1}
+            bg={buttonContainerBgColor}
+            borderRadius='full'
+          >
+            <IconButton
+              icon={arrowBackIcon}
+              aria-label={translate('common.back')}
+              variant='ghost'
+              fontSize='xl'
+              size='sm'
+              isRound
+              position='static'
+              onClick={handleBack}
+            />
+          </Box>
+        ) : null}
         <Flex height='full' alignItems='center'>
           <Box width='full'>
             <RightPanelContent
@@ -272,7 +294,7 @@ export const NewWalletViewsSwitch = () => {
         </Flex>
       </Box>
     ),
-    [bodyBgColor, error, isLoading],
+    [bodyBgColor, buttonContainerBgColor, error, handleBack, isLoading, translate],
   )
 
   const bodyDesktopOnly = useCallback(
@@ -284,38 +306,6 @@ export const NewWalletViewsSwitch = () => {
     [body],
   )
 
-  const maybeBackButton = useMemo(() => {
-    return (
-      <Switch>
-        <Route exact path='/' />
-        <Route path='*'>
-          {/* Precisely what it says on the var name - adds a back button for non-root paths only
-           *  (i.e, can't go back when in root path)
-           */}
-          <Box
-            position='absolute'
-            left={3}
-            top={3}
-            zIndex={1}
-            bg={buttonContainerBgColor}
-            borderRadius='full'
-          >
-            <IconButton
-              icon={arrowBackIcon}
-              aria-label={translate('common.back')}
-              variant='ghost'
-              fontSize='xl'
-              size='sm'
-              isRound
-              position='static'
-              onClick={handleBack}
-            />
-          </Box>
-        </Route>
-      </Switch>
-    )
-  }, [buttonContainerBgColor, handleBack, translate])
-
   return (
     <>
       <Modal
@@ -338,9 +328,6 @@ export const NewWalletViewsSwitch = () => {
             >
               <ModalCloseButton position='static' borderRadius='full' size='sm' />
             </Box>
-
-            {maybeBackButton}
-
             <Flex minH='600px' w={containerWidth}>
               <Switch>
                 {/* Always display sections for the root route, no matter the viewport */}

From 4c83aa91969ed9555f1f08d100ee760617f46aae Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 14:42:28 +0100
Subject: [PATCH 11/34] [skip ci] wip: more wire more up

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 72566ef4ed5..4e6a2c58ff9 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -257,43 +257,48 @@ export const NewWalletViewsSwitch = () => {
   const buttonContainerBgColor = useColorModeValue('gray.100', 'whiteAlpha.100')
 
   const body = useCallback(
-    (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => (
-      <Box flex={1} bg={bodyBgColor} p={6} position='relative'>
-        {routeProps.history.location.pathname !== '/' ? (
-          // Only show back button for non-root routes
-          <Box
-            position='absolute'
-            left={3}
-            top={3}
-            zIndex={1}
-            bg={buttonContainerBgColor}
-            borderRadius='full'
-          >
-            <IconButton
-              icon={arrowBackIcon}
-              aria-label={translate('common.back')}
-              variant='ghost'
-              fontSize='xl'
-              size='sm'
-              isRound
-              position='static'
-              onClick={handleBack}
-            />
-          </Box>
-        ) : null}
-        <Flex height='full' alignItems='center'>
-          <Box width='full'>
-            <RightPanelContent
-              location={routeProps.history.location}
-              isLoading={isLoading}
-              setIsLoading={setIsLoading}
-              error={error}
-              setError={setError}
-            />
-          </Box>
-        </Flex>
-      </Box>
-    ),
+    (routeProps: RouteComponentProps<{}, StaticContext, unknown>) => {
+      // These routes do not have a previous step, so don't display back button
+      const isRootRoute =
+        routeProps.history.location.pathname === '/' ||
+        routeProps.history.location.pathname === '/metamask/connect'
+      return (
+        <Box flex={1} bg={bodyBgColor} p={6} position='relative'>
+          {!isRootRoute ? (
+            <Box
+              position='absolute'
+              left={3}
+              top={3}
+              zIndex={1}
+              bg={buttonContainerBgColor}
+              borderRadius='full'
+            >
+              <IconButton
+                icon={arrowBackIcon}
+                aria-label={translate('common.back')}
+                variant='ghost'
+                fontSize='xl'
+                size='sm'
+                isRound
+                position='static'
+                onClick={handleBack}
+              />
+            </Box>
+          ) : null}
+          <Flex height='full' alignItems='center'>
+            <Box width='full'>
+              <RightPanelContent
+                location={routeProps.history.location}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+                error={error}
+                setError={setError}
+              />
+            </Box>
+          </Flex>
+        </Box>
+      )
+    },
     [bodyBgColor, buttonContainerBgColor, error, handleBack, isLoading, translate],
   )
 

From 27cf2083ea31ee80230b9afbe85aee077ea23af0 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:48:32 +0100
Subject: [PATCH 12/34] fix: routing

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   | 29 +++++++++++++------
 .../sections/InstalledWalletsSection.tsx      | 14 +++++----
 .../sections/SavedWalletsSection.tsx          | 27 +++++++++++++----
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 4e6a2c58ff9..c3d619e4135 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -161,6 +161,9 @@ const RightPanelContent = ({
 export const NewWalletViewsSwitch = () => {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // For visual tracking only. Do *not* use me in place of wallet state. This means exactly what you think the intent is:
+  // the option which is currently selected by the user (has been clicked), and is *not* related to the current wallet in the store.
+  const [selectedWalletId, setSelectedWalletId] = useState<string | null>(null)
 
   const history = useHistory()
   const toast = useToast()
@@ -170,7 +173,6 @@ export const NewWalletViewsSwitch = () => {
       wallet,
       modal,
       initialRoute,
-      modalType,
       disconnectOnCloseModal,
       deviceState: { disposition },
     },
@@ -225,11 +227,13 @@ export const NewWalletViewsSwitch = () => {
     wallet,
   ])
 
-  // Push to history on initialRoute change
-  useEffect(() => {
-    if (initialRoute) history.push(initialRoute)
-    return
-  }, [history, initialRoute])
+  const handleWalletSelect = useCallback(
+    (walletId: string, _initialRoute: string) => {
+      setSelectedWalletId(walletId)
+      if (initialRoute) history.push(_initialRoute)
+    },
+    [history, initialRoute],
+  )
   // Reset history on modal open/unmount
   useEffect(() => {
     history.replace('/')
@@ -245,12 +249,19 @@ export const NewWalletViewsSwitch = () => {
     () => (
       <Box w={sectionsWidth} p={6}>
         <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
-        <SavedWalletsSection />
-        <InstalledWalletsSection modalType={modalType} isLoading={isLoading} />
+        <SavedWalletsSection
+          selectedWalletId={selectedWalletId}
+          onWalletSelect={handleWalletSelect}
+        />
+        <InstalledWalletsSection
+          isLoading={isLoading}
+          selectedWalletId={selectedWalletId}
+          onWalletSelect={handleWalletSelect}
+        />
         {/* TODO(gomes): more sections */}
       </Box>
     ),
-    [isLoading, modalType],
+    [handleWalletSelect, isLoading, selectedWalletId],
   )
 
   const bodyBgColor = useColorModeValue('gray.50', 'whiteAlpha.50')
diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index 4785021e68b..a8bbdb28aad 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -49,13 +49,15 @@ const MipdProviderSelectItem = ({
 }
 
 export const InstalledWalletsSection = ({
-  modalType,
   isLoading,
+  selectedWalletId,
+  onWalletSelect,
 }: {
-  modalType: string | null
   isLoading: boolean
+  selectedWalletId: string | null
+  onWalletSelect: (id: string, initialRoute: string) => void
 }) => {
-  const { dispatch, connect } = useWallet()
+  const { connect } = useWallet()
   const detectedMipdProviders = useMipdProviders()
 
   const supportedStaticProviders = useMemo(() => {
@@ -89,17 +91,17 @@ export const InstalledWalletsSection = ({
 
   const handleConnectMipd = useCallback(
     (rdns: string) => {
+      onWalletSelect(rdns, '/metamask/connect')
       connect(rdns as KeyManager, true)
-      dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '/metamask/connect' })
     },
-    [connect, dispatch],
+    [connect, onWalletSelect],
   )
 
   return (
     <Stack spacing={2} my={6}>
       <Text fontSize='sm' fontWeight='medium' color='gray.500' translation='Installed' />
       {filteredProviders.map(provider => {
-        const isSelected = modalType === provider.info.rdns
+        const isSelected = selectedWalletId === provider.info.rdns
         return (
           <MipdProviderSelectItem
             key={provider.info.rdns}
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index 23a9d9865bc..e7a9fe6eee9 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Stack, Text as CText } from '@chakra-ui/react'
+import { Box, Button, Flex, Stack, Text as CText, useColorModeValue } from '@chakra-ui/react'
 import { useCallback, useEffect, useState } from 'react'
 import { FaWallet } from 'react-icons/fa'
 import { FoxIcon } from 'components/Icons/FoxIcon'
@@ -17,10 +17,13 @@ type VaultInfo = {
 type WalletCardProps = {
   wallet: VaultInfo
   onClick: (wallet: VaultInfo) => void
+  isSelected: boolean
 }
 
-const WalletCard = ({ wallet, onClick }: WalletCardProps) => {
+const WalletCard = ({ wallet, onClick, isSelected }: WalletCardProps) => {
   const handleClick = useCallback(() => onClick(wallet), [onClick, wallet])
+  const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
+
   return (
     <Box
       as={Button}
@@ -32,6 +35,7 @@ const WalletCard = ({ wallet, onClick }: WalletCardProps) => {
       borderRadius='md'
       width='full'
       onClick={handleClick}
+      bg={isSelected ? bgColor : undefined}
     >
       <Flex alignItems='center' width='full'>
         <FoxIcon boxSize='24px' mr={3}>
@@ -45,7 +49,13 @@ const WalletCard = ({ wallet, onClick }: WalletCardProps) => {
   )
 }
 
-export const SavedWalletsSection = () => {
+export const SavedWalletsSection = ({
+  selectedWalletId,
+  onWalletSelect,
+}: {
+  selectedWalletId: string | null
+  onWalletSelect: (id: string, initialRoute: string) => void
+}) => {
   const [wallets, setWallets] = useState<VaultInfo[]>([])
   const localWallet = useLocalWallet()
   const { getAdapter, dispatch } = useWallet()
@@ -73,7 +83,10 @@ export const SavedWalletsSection = () => {
 
   const handleWalletSelect = useCallback(
     async (wallet: VaultInfo) => {
+      // Ensure we're at the correct route when selecting a saved wallet
       dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '/native/enter-password' })
+      // Ensure the wallet is visually selected in the left wallets list
+      onWalletSelect(wallet.id, '/native/enter-password')
 
       const adapter = await getAdapter(KeyManager.Native)
       const deviceId = wallet.id
@@ -115,7 +128,7 @@ export const SavedWalletsSection = () => {
         }
       }
     },
-    [dispatch, getAdapter, localWallet],
+    [dispatch, getAdapter, localWallet, onWalletSelect],
   )
 
   if (!wallets.length) return null
@@ -129,7 +142,11 @@ export const SavedWalletsSection = () => {
         translation={'walletProvider.shapeShift.load.header'}
       />
       {wallets.map(wallet => (
-        <WalletCard wallet={wallet} onClick={handleWalletSelect} />
+        <WalletCard
+          wallet={wallet}
+          onClick={handleWalletSelect}
+          isSelected={selectedWalletId === wallet.id}
+        />
       ))}
     </Stack>
   )

From 9a1ea6ade05fa03e7db5c7b98edc50e210db1df8 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 16:05:16 +0100
Subject: [PATCH 13/34] feat: rm disgusting iiafe

---
 .../components/NativePassword.tsx             |  1 +
 .../NativeWallet/components/NativeSuccess.tsx |  4 +++
 .../sections/SavedWalletsSection.tsx          | 35 +++++++++----------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
index 61be77a68c0..f60b7f7cf34 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativePassword.tsx
@@ -44,6 +44,7 @@ export const NativePassword = ({ history, location }: NativeSetupProps) => {
         vault.seal()
         await vault.setPassword(values.password)
         vault.meta.set('name', values.name)
+
         history.push(NativeWalletRoutes.Success, { vault })
       } catch (e) {
         console.error(e)
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
index 124e0df011c..ee6340f477c 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
@@ -1,12 +1,16 @@
 import { Box, ModalBody, ModalHeader } from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import { Text } from 'components/Text'
 
 import { useNativeSuccess } from '../hooks/useNativeSuccess'
 import type { NativeSetupProps } from '../types'
 
 export const NativeSuccess = ({ location }: NativeSetupProps) => {
+  const queryClient = useQueryClient()
   const { isSuccessful } = useNativeSuccess({ vault: location.state.vault })
 
+  queryClient.invalidateQueries({ queryKey: ['hdwalletNativeVaultsList'] })
+
   return (
     <>
       <ModalHeader>
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index e7a9fe6eee9..70288f8c471 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, Flex, Stack, Text as CText, useColorModeValue } from '@chakra-ui/react'
-import { useCallback, useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
 import { FaWallet } from 'react-icons/fa'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { Text } from 'components/Text'
@@ -56,30 +57,28 @@ export const SavedWalletsSection = ({
   selectedWalletId: string | null
   onWalletSelect: (id: string, initialRoute: string) => void
 }) => {
-  const [wallets, setWallets] = useState<VaultInfo[]>([])
   const localWallet = useLocalWallet()
   const { getAdapter, dispatch } = useWallet()
 
-  // TODO(gomes): let's use this PR as an opportunity to remove this digusting IIAFE from copypasta, yes it works but pls
-  useEffect(() => {
-    ;(async () => {
+  const nativeVaultsQuery = useQuery({
+    queryKey: ['hdwalletNativeVaultsList'],
+    queryFn: async () => {
       const Vault = await import('@shapeshiftoss/hdwallet-native-vault').then(m => m.Vault)
-      try {
-        const vaultIds = await Vault.list()
-        const storedWallets: VaultInfo[] = await Promise.all(
+
+      const storedWallets: VaultInfo[] = await Vault.list().then(vaultIds =>
+        Promise.all(
           vaultIds.map(async id => {
             const meta = await Vault.meta(id)
             const name = String(meta?.get('name') ?? id)
             return { id, name }
           }),
-        )
-        setWallets(storedWallets)
-      } catch (e) {
-        console.error(e)
-        setWallets([])
-      }
-    })()
-  }, [])
+        ),
+      )
+
+      return storedWallets
+    },
+    refetchOnMount: true,
+  })
 
   const handleWalletSelect = useCallback(
     async (wallet: VaultInfo) => {
@@ -131,7 +130,7 @@ export const SavedWalletsSection = ({
     [dispatch, getAdapter, localWallet, onWalletSelect],
   )
 
-  if (!wallets.length) return null
+  if (!nativeVaultsQuery.data?.length) return null
 
   return (
     <Stack spacing={2} my={6}>
@@ -141,7 +140,7 @@ export const SavedWalletsSection = ({
         color='gray.500'
         translation={'walletProvider.shapeShift.load.header'}
       />
-      {wallets.map(wallet => (
+      {nativeVaultsQuery.data.map(wallet => (
         <WalletCard
           wallet={wallet}
           onClick={handleWalletSelect}

From 956f522484d318eec24c9745d9bb9991cda27f39 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:00:08 +0100
Subject: [PATCH 14/34] chore: trigger CI


From b8a2e8ab7613c242be8a46e457870f47bbe1e8ce Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:06:36 +0100
Subject: [PATCH 15/34] fix: lint

---
 .../NewWalletViews/sections/InstalledWalletsSection.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index a8bbdb28aad..a13bfb5cf1b 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -4,7 +4,6 @@ import type { EIP6963ProviderDetail } from 'mipd'
 import { useCallback, useMemo } from 'react'
 import { isMobile } from 'react-device-detect'
 import { Text } from 'components/Text'
-import { WalletActions } from 'context/WalletProvider/actions'
 import type { KeyManager } from 'context/WalletProvider/KeyManager'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { isMobile as isMobileApp } from 'lib/globals'

From c910f7fed4e8b2a1b40effdf45954f62d64a91c7 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:08:06 +0100
Subject: [PATCH 16/34] fix: light mode things

---
 .../NewWalletViews/sections/InstalledWalletsSection.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index a13bfb5cf1b..d189d846e0f 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Image, Stack, Text as CText } from '@chakra-ui/react'
+import { Box, Button, Flex, Image, Stack, Text as CText, useColorModeValue } from '@chakra-ui/react'
 import { uniqBy } from 'lodash'
 import type { EIP6963ProviderDetail } from 'mipd'
 import { useCallback, useMemo } from 'react'
@@ -20,6 +20,7 @@ const MipdProviderSelectItem = ({
   isSelected: boolean
   isDisabled: boolean
 }) => {
+  const backgroundColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
   const handleConnect = useCallback(
     () => connect(provider.info.rdns),
     [connect, provider.info.rdns],
@@ -36,7 +37,7 @@ const MipdProviderSelectItem = ({
       borderRadius='md'
       width='full'
       onClick={handleConnect}
-      bg={isSelected ? 'whiteAlpha.100' : undefined}
+      bg={isSelected ? backgroundColor : undefined}
       isDisabled={isDisabled}
     >
       <Flex alignItems='center' width='full'>

From 6d0a12ea09165130694f58dbc9dc9f2d7d1954c1 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:29:10 +0100
Subject: [PATCH 17/34] feat: less aggressive light mode

---
 .../NativeWallet/components/NativeImportKeystore.tsx        | 2 +-
 src/theme/semanticTokens.ts                                 | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
index ed4e2671c01..7c15c4efa37 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
@@ -28,7 +28,7 @@ const hoverSx = { borderColor: 'blue.500' }
 
 // TODO(gomes): use https://www.chakra-ui.com/docs/components/file-upload if/when we migrate to chakra@3
 const FileUpload = ({ onFileSelect }: { onFileSelect: (file: File) => void }) => {
-  const bgColor = useColorModeValue('gray.50', 'gray.800')
+  const bgColor = useColorModeValue('gray.200', 'gray.800')
   const borderColor = useColorModeValue('gray.200', 'gray.600')
   const [isDragging, setIsDragging] = useState(false)
   const [filename, setFilename] = useState<string | null>(null)
diff --git a/src/theme/semanticTokens.ts b/src/theme/semanticTokens.ts
index ec46d37ca95..f5b7f0915b5 100644
--- a/src/theme/semanticTokens.ts
+++ b/src/theme/semanticTokens.ts
@@ -61,15 +61,15 @@ export const semanticTokens = {
       },
       input: {
         base: {
-          default: 'gray.50',
+          default: 'gray.100',
           _dark: 'darkNeutral.900',
         },
         hover: {
-          default: 'gray.100',
+          default: 'gray.150',
           _dark: 'darkNeutral.800',
         },
         pressed: {
-          default: 'gray.200',
+          default: 'gray.250',
           _dark: 'darkNeutral.900',
         },
       },

From 489ecb7597e6da5e184d6583ec90614cc087f922 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:42:12 +0100
Subject: [PATCH 18/34] fix: mobile things

---
 .../WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index c3d619e4135..62504b192ff 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -230,9 +230,9 @@ export const NewWalletViewsSwitch = () => {
   const handleWalletSelect = useCallback(
     (walletId: string, _initialRoute: string) => {
       setSelectedWalletId(walletId)
-      if (initialRoute) history.push(_initialRoute)
+      if (_initialRoute) history.push(_initialRoute)
     },
-    [history, initialRoute],
+    [history],
   )
   // Reset history on modal open/unmount
   useEffect(() => {
@@ -275,7 +275,7 @@ export const NewWalletViewsSwitch = () => {
         routeProps.history.location.pathname === '/metamask/connect'
       return (
         <Box flex={1} bg={bodyBgColor} p={6} position='relative'>
-          {!isRootRoute ? (
+          {!isRootRoute || isMobile ? (
             <Box
               position='absolute'
               left={3}

From ae6dc6038eeefb102c9e072c242579fc4eb2980a Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:50:20 +0100
Subject: [PATCH 19/34] fix: lint

---
 .../WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 62504b192ff..293fb249f6d 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -172,7 +172,6 @@ export const NewWalletViewsSwitch = () => {
     state: {
       wallet,
       modal,
-      initialRoute,
       disconnectOnCloseModal,
       deviceState: { disposition },
     },

From 58387488e789c0270ae794356451ab88f9532e88 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:04:51 +0100
Subject: [PATCH 20/34] feat: progress

---
 src/assets/translations/en/main.json                       | 3 ++-
 .../NativeWallet/components/NativeImportKeystore.tsx       | 3 +--
 .../NewWalletViews/sections/InstalledWalletsSection.tsx    | 7 ++++++-
 .../NewWalletViews/wallets/native/NativeStart.tsx          | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 208f76b4b1b..d40ffcf3bef 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -1872,7 +1872,8 @@
         "skip": "Skip",
         "shapeshiftWallet": "ShapeShift Wallet",
         "createNewWallet": "Create a new wallet",
-        "haveAKeystore": "Have a keystore?",
+        "shapeshiftNative": "ShapeShift Native",
+        "comingFromThorswap": "Coming from THORSwap?",
         "importExisting": "Import existing",
         "importFromKeystore": "Import from keystore",
         "whatIsShapeshiftWallet": "What is ShapeShift Wallet?",
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
index 7c15c4efa37..96f13c695b6 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
@@ -28,7 +28,6 @@ const hoverSx = { borderColor: 'blue.500' }
 
 // TODO(gomes): use https://www.chakra-ui.com/docs/components/file-upload if/when we migrate to chakra@3
 const FileUpload = ({ onFileSelect }: { onFileSelect: (file: File) => void }) => {
-  const bgColor = useColorModeValue('gray.200', 'gray.800')
   const borderColor = useColorModeValue('gray.200', 'gray.600')
   const [isDragging, setIsDragging] = useState(false)
   const [filename, setFilename] = useState<string | null>(null)
@@ -98,7 +97,7 @@ const FileUpload = ({ onFileSelect }: { onFileSelect: (file: File) => void }) =>
         flexDirection='column'
         alignItems='center'
         justifyContent='center'
-        bg={bgColor}
+        bg='background.surface.raised.base'
         cursor='pointer'
         transition='all 0.2s'
         _hover={hoverSx}
diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index d189d846e0f..8d8b7316528 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -99,7 +99,12 @@ export const InstalledWalletsSection = ({
 
   return (
     <Stack spacing={2} my={6}>
-      <Text fontSize='sm' fontWeight='medium' color='gray.500' translation='Installed' />
+      <Text
+        fontSize='sm'
+        fontWeight='medium'
+        color='gray.500'
+        translation='walletProvider.shapeShift.onboarding.shapeshiftNative'
+      />
       {filteredProviders.map(provider => {
         const isSelected = selectedWalletId === provider.info.rdns
         return (
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index fca79d2a44e..f817953f8e8 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -61,7 +61,7 @@ export const NativeStart = () => {
 
       <Box bg={keystoreBgColor} rounded='md' width='100%' py={2} mb={4} textAlign='center'>
         <CText color={bodyColor}>
-          {translate('walletProvider.shapeShift.onboarding.haveAKeystore')}{' '}
+          {translate('walletProvider.shapeShift.onboarding.comingFromThorswap')}{' '}
           <Button variant='link' color='blue.500' onClick={handleImportKeystoreClick}>
             {translate('walletProvider.shapeShift.onboarding.importFromKeystore')}
           </Button>

From b95c538d29729238ca41fbd67c417c8d2976a86d Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:16:23 +0100
Subject: [PATCH 21/34] fix: tests with flag on

---
 .../WalletProvider/WalletProvider.test.tsx      |  7 +++++++
 src/test/TestProviders.tsx                      | 17 +++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/context/WalletProvider/WalletProvider.test.tsx b/src/context/WalletProvider/WalletProvider.test.tsx
index 6fe622ca385..69a1c74f4e5 100644
--- a/src/context/WalletProvider/WalletProvider.test.tsx
+++ b/src/context/WalletProvider/WalletProvider.test.tsx
@@ -34,6 +34,13 @@ vi.mock('@shapeshiftoss/hdwallet-metamask-multichain', () => ({
   },
 }))
 
+vi.mock('@shapeshiftoss/hdwallet-native-vault', () => ({
+  Vault: {
+    list: vi.fn().mockResolvedValue([]),
+    meta: vi.fn(),
+  },
+}))
+
 vi.mock('./useEip1993EventHandler', () => ({
   useEip1993EventHandler: vi.fn(),
 }))
diff --git a/src/test/TestProviders.tsx b/src/test/TestProviders.tsx
index 3e6822be8a1..0dbb9c9a6f0 100644
--- a/src/test/TestProviders.tsx
+++ b/src/test/TestProviders.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
 import { I18n } from 'react-polyglot'
@@ -8,11 +9,15 @@ import { store } from 'state/store'
 const locale: string = navigator?.language?.split('-')[0] ?? 'en'
 const messages = translations['en']
 
+const queryClient = new QueryClient()
+
 export const TestProviders: React.FC<PropsWithChildren> = ({ children }) => (
-  <ReduxProvider store={store}>
-    <I18n locale={locale} messages={messages}>
-      {/* @ts-ignore remove warning */}
-      {children}
-    </I18n>
-  </ReduxProvider>
+  <QueryClientProvider client={queryClient}>
+    <ReduxProvider store={store}>
+      <I18n locale={locale} messages={messages}>
+        {/* @ts-ignore remove warning */}
+        {children}
+      </I18n>
+    </ReduxProvider>
+  </QueryClientProvider>
 )

From 2e8d38215c3ec73a22f782d4f3f07df5df3e79a0 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:24:34 +0100
Subject: [PATCH 22/34] feat: more progress more ion

---
 src/assets/translations/en/main.json          |  3 ++-
 .../NewWalletViews/NewWalletViewsSwitch.tsx   |  2 +-
 .../sections/InstalledWalletsSection.tsx      |  7 +----
 .../sections/SavedWalletsSection.tsx          | 27 ++++++++++---------
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index d40ffcf3bef..4000be1e93d 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -188,7 +188,8 @@
     "activeAccount": "Active Account",
     "update": "Update",
     "apy": "APY",
-    "tbd": "TBD"
+    "tbd": "TBD",
+    "installed": "Installed"
   },
   "consentBanner": {
     "body": {
diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 293fb249f6d..6c836520dc5 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -247,11 +247,11 @@ export const NewWalletViewsSwitch = () => {
   const sections = useMemo(
     () => (
       <Box w={sectionsWidth} p={6}>
-        <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
         <SavedWalletsSection
           selectedWalletId={selectedWalletId}
           onWalletSelect={handleWalletSelect}
         />
+        <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
         <InstalledWalletsSection
           isLoading={isLoading}
           selectedWalletId={selectedWalletId}
diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
index 8d8b7316528..2b507a36796 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -99,12 +99,7 @@ export const InstalledWalletsSection = ({
 
   return (
     <Stack spacing={2} my={6}>
-      <Text
-        fontSize='sm'
-        fontWeight='medium'
-        color='gray.500'
-        translation='walletProvider.shapeShift.onboarding.shapeshiftNative'
-      />
+      <Text fontSize='sm' fontWeight='medium' color='gray.500' translation='common.installed' />
       {filteredProviders.map(provider => {
         const isSelected = selectedWalletId === provider.info.rdns
         return (
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index 70288f8c471..0587e25aa27 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -133,20 +133,21 @@ export const SavedWalletsSection = ({
   if (!nativeVaultsQuery.data?.length) return null
 
   return (
-    <Stack spacing={2} my={6}>
+    <>
       <Text
-        fontSize='sm'
-        fontWeight='medium'
-        color='gray.500'
-        translation={'walletProvider.shapeShift.load.header'}
+        fontSize='xl'
+        fontWeight='semibold'
+        translation='walletProvider.shapeShift.onboarding.shapeshiftNative'
       />
-      {nativeVaultsQuery.data.map(wallet => (
-        <WalletCard
-          wallet={wallet}
-          onClick={handleWalletSelect}
-          isSelected={selectedWalletId === wallet.id}
-        />
-      ))}
-    </Stack>
+      <Stack spacing={2} my={6}>
+        {nativeVaultsQuery.data.map(wallet => (
+          <WalletCard
+            wallet={wallet}
+            onClick={handleWalletSelect}
+            isSelected={selectedWalletId === wallet.id}
+          />
+        ))}
+      </Stack>
+    </>
   )
 }

From 17adcab56a38a200a455f260b6c434c287618163 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:29:08 +0100
Subject: [PATCH 23/34] feat: add divider

---
 .../WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 6c836520dc5..34964a4a0f6 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon } from '@chakra-ui/icons'
 import {
   Box,
+  Divider,
   Flex,
   IconButton,
   Modal,
@@ -251,6 +252,7 @@ export const NewWalletViewsSwitch = () => {
           selectedWalletId={selectedWalletId}
           onWalletSelect={handleWalletSelect}
         />
+        <Divider />
         <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
         <InstalledWalletsSection
           isLoading={isLoading}

From 6830ce4152dec487955d9da05c7ee9747b31cf32 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:32:01 +0100
Subject: [PATCH 24/34] fix: scrolly bits

---
 .../WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 34964a4a0f6..77c305fc8af 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -247,7 +247,7 @@ export const NewWalletViewsSwitch = () => {
 
   const sections = useMemo(
     () => (
-      <Box w={sectionsWidth} p={6}>
+      <Box w={sectionsWidth} p={6} maxH='600px' overflowY='auto'>
         <SavedWalletsSection
           selectedWalletId={selectedWalletId}
           onWalletSelect={handleWalletSelect}

From f60cafc153aedfb39e9af7bbc78dc1ecfbba65fb Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:37:51 +0100
Subject: [PATCH 25/34] feat: truncate long-ass wallet names

---
 .../NewWalletViews/sections/SavedWalletsSection.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index 0587e25aa27..08c4eeefcad 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -43,7 +43,9 @@ const WalletCard = ({ wallet, onClick, isSelected }: WalletCardProps) => {
           <FaWallet />
         </FoxIcon>
         <Box textAlign='left'>
-          <CText>{wallet.name}</CText>
+          <CText isTruncated maxW='200px'>
+            {wallet.name}
+          </CText>
         </Box>
       </Flex>
     </Box>

From 50cfde364148b808110f1622b37e11bbbcdaf9aa Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:47:07 +0100
Subject: [PATCH 26/34] feat: slightly adjust styles

---
 .../WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index 77c305fc8af..c7a47fc6e6d 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -247,7 +247,7 @@ export const NewWalletViewsSwitch = () => {
 
   const sections = useMemo(
     () => (
-      <Box w={sectionsWidth} p={6} maxH='600px' overflowY='auto'>
+      <Box w={sectionsWidth} p={6} maxH='800px' overflowY='auto'>
         <SavedWalletsSection
           selectedWalletId={selectedWalletId}
           onWalletSelect={handleWalletSelect}
@@ -345,7 +345,7 @@ export const NewWalletViewsSwitch = () => {
             >
               <ModalCloseButton position='static' borderRadius='full' size='sm' />
             </Box>
-            <Flex minH='600px' w={containerWidth}>
+            <Flex minH='800px' w={containerWidth}>
               <Switch>
                 {/* Always display sections for the root route, no matter the viewport */}
                 <Route exact path='/'>

From e945fcb7d8b144091086bc6af427cafd7af49548 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:23:58 +0100
Subject: [PATCH 27/34] feat: almost there

---
 src/assets/translations/en/main.json          |   1 +
 .../NewWalletViews/NewWalletViewsSwitch.tsx   |   2 +-
 .../sections/SavedWalletsSection.tsx          |  28 ++++-
 .../wallets/native/NativeStart.tsx            | 104 ++++++++++--------
 4 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 4000be1e93d..b38e7119936 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -1874,6 +1874,7 @@
         "shapeshiftWallet": "ShapeShift Wallet",
         "createNewWallet": "Create a new wallet",
         "shapeshiftNative": "ShapeShift Native",
+        "addNewWallet": "Add new wallet",
         "comingFromThorswap": "Coming from THORSwap?",
         "importExisting": "Import existing",
         "importFromKeystore": "Import from keystore",
diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index c7a47fc6e6d..c30c6fd93fb 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -252,7 +252,7 @@ export const NewWalletViewsSwitch = () => {
           selectedWalletId={selectedWalletId}
           onWalletSelect={handleWalletSelect}
         />
-        <Divider />
+        <Divider mb={6} />
         <Text translation='common.connectWallet' fontSize='xl' fontWeight='semibold' />
         <InstalledWalletsSection
           isLoading={isLoading}
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index 08c4eeefcad..f4eb7eb6609 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -1,7 +1,7 @@
-import { Box, Button, Flex, Stack, Text as CText, useColorModeValue } from '@chakra-ui/react'
+import { Box, Button, Flex, Icon, Stack, Text as CText, useColorModeValue } from '@chakra-ui/react'
 import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
-import { FaWallet } from 'react-icons/fa'
+import { FaPlus, FaWallet } from 'react-icons/fa'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { Text } from 'components/Text'
 import { WalletActions } from 'context/WalletProvider/actions'
@@ -59,6 +59,8 @@ export const SavedWalletsSection = ({
   selectedWalletId: string | null
   onWalletSelect: (id: string, initialRoute: string) => void
 }) => {
+  const buttonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
+
   const localWallet = useLocalWallet()
   const { getAdapter, dispatch } = useWallet()
 
@@ -132,6 +134,10 @@ export const SavedWalletsSection = ({
     [dispatch, getAdapter, localWallet, onWalletSelect],
   )
 
+  const handleAddNewWalletClick = useCallback(() => {
+    console.log('TODO')
+  }, [])
+
   if (!nativeVaultsQuery.data?.length) return null
 
   return (
@@ -149,6 +155,24 @@ export const SavedWalletsSection = ({
             isSelected={selectedWalletId === wallet.id}
           />
         ))}
+        <Box
+          as={Button}
+          variant='ghost'
+          px={4}
+          ml={-4}
+          py={6}
+          borderRadius='md'
+          width='full'
+          onClick={handleAddNewWalletClick}
+          bg={buttonBgColor}
+        >
+          <Flex alignItems='center' width='full' color='gray.500'>
+            <Icon as={FaPlus} boxSize='12px' mr={3} />
+            <Box textAlign='left'>
+              <Text translation='walletProvider.shapeShift.onboarding.addNewWallet' />
+            </Box>
+          </Flex>
+        </Box>
       </Stack>
     </>
   )
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index f817953f8e8..287ec6f97e1 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -1,5 +1,15 @@
-import { Box, Button, Flex, Text as CText, useColorModeValue } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Icon,
+  Stack,
+  Text as CText,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import { useCallback } from 'react'
+import { FaArrowRight } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
 import { FoxIcon } from 'components/Icons/FoxIcon'
@@ -12,7 +22,6 @@ export const NativeStart = () => {
 
   const headingColor = useColorModeValue('gray.800', 'whiteAlpha.800')
   const bodyColor = useColorModeValue('gray.600', 'whiteAlpha.600')
-  const keystoreBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
   const mainTextColor = useColorModeValue('gray.700', 'whiteAlpha.800')
 
   const handleCreateClick = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
@@ -26,55 +35,64 @@ export const NativeStart = () => {
   )
 
   return (
-    <Flex
-      direction='column'
-      alignItems='center'
-      justifyContent='center'
-      h='full'
-      maxW='md'
-      mx='auto'
-      px={4}
-      textAlign='center'
-    >
-      <Box mb={6}>
-        <FoxIcon boxSize='16' />
-      </Box>
+    <Stack h='full'>
+      <Flex
+        direction='column'
+        alignItems='center'
+        justifyContent='center'
+        h='full'
+        maxW='md'
+        mx='auto'
+        px={4}
+        textAlign='center'
+      >
+        <Box mb={6}>
+          <FoxIcon boxSize='16' />
+        </Box>
+
+        <Text
+          fontSize='2xl'
+          fontWeight='bold'
+          mb={4}
+          color={headingColor}
+          translation='walletProvider.shapeShift.onboarding.whatIsShapeshiftWallet'
+        />
 
-      <Text
-        fontSize='2xl'
-        fontWeight='bold'
-        mb={4}
-        color={headingColor}
-        translation='walletProvider.shapeShift.onboarding.whatIsShapeshiftWallet'
-      />
+        <Text
+          color={mainTextColor}
+          mb={8}
+          translation='walletProvider.shapeShift.onboarding.yourDecentralizedGateway'
+        />
+        <Text
+          color={mainTextColor}
+          mb={12}
+          translation='walletProvider.shapeShift.onboarding.crossChainFreedom'
+        />
 
-      <Text
-        color={mainTextColor}
-        mb={8}
-        translation='walletProvider.shapeShift.onboarding.yourDecentralizedGateway'
-      />
-      <Text
-        color={mainTextColor}
-        mb={12}
-        translation='walletProvider.shapeShift.onboarding.crossChainFreedom'
-      />
+        <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
+          {translate('walletProvider.shapeShift.onboarding.createNewWallet')}
+        </Button>
 
-      <Box bg={keystoreBgColor} rounded='md' width='100%' py={2} mb={4} textAlign='center'>
+        <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
+          {translate('walletProvider.shapeShift.onboarding.importExisting')}
+        </Button>
+      </Flex>
+      <Box width='100%' mb={4} textAlign='center' position='absolute' left={0} bottom={0}>
+        <Divider my={6} />
         <CText color={bodyColor}>
           {translate('walletProvider.shapeShift.onboarding.comingFromThorswap')}{' '}
-          <Button variant='link' color='blue.500' onClick={handleImportKeystoreClick}>
+          <Button
+            variant='link'
+            color='blue.500'
+            onClick={handleImportKeystoreClick}
+            fontWeight='medium'
+            colorScheme='blue'
+          >
             {translate('walletProvider.shapeShift.onboarding.importFromKeystore')}
+            <Icon as={FaArrowRight} ml={2} />
           </Button>
         </CText>
       </Box>
-
-      <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
-        {translate('walletProvider.shapeShift.onboarding.createNewWallet')}
-      </Button>
-
-      <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
-        {translate('walletProvider.shapeShift.onboarding.importExisting')}
-      </Button>
-    </Flex>
+    </Stack>
   )
 }

From 381c8a229ae28f542eae40677580fa49827f15ce Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:02:17 +0100
Subject: [PATCH 28/34] feat: here we fuarking go

---
 .../NewWalletViews/NewWalletViewsSwitch.tsx   |  21 ++-
 .../sections/SavedWalletsSection.tsx          |   7 +-
 .../wallets/native/NativeIntro.tsx            |  98 ++++++++++++
 .../wallets/native/NativeStart.tsx            | 149 ++++++++----------
 4 files changed, 182 insertions(+), 93 deletions(-)
 create mode 100644 src/context/WalletProvider/NewWalletViews/wallets/native/NativeIntro.tsx

diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
index c30c6fd93fb..3e9ef9096d7 100644
--- a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -37,6 +37,7 @@ import { NativeWalletRoutes } from '../types'
 import { InstalledWalletsSection } from './sections/InstalledWalletsSection'
 import { SavedWalletsSection } from './sections/SavedWalletsSection'
 import { MipdBody } from './wallets/mipd/MipdBody'
+import { NativeIntro } from './wallets/native/NativeIntro'
 import { NativeStart } from './wallets/native/NativeStart'
 
 const sectionsWidth = { base: 'full', md: '300px' }
@@ -58,6 +59,13 @@ type RightPanelContentProps = {
 
 const nativeRoutes = (
   <Switch>
+    <Route
+      exact
+      path={NativeWalletRoutes.Connect}
+      // we need to pass an arg here, so we need an anonymous function wrapper
+      // eslint-disable-next-line react-memo/require-usememo
+      render={routeProps => <NativeStart {...routeProps} />}
+    />
     <Route
       exact
       path={NativeWalletRoutes.ImportKeystore}
@@ -68,7 +76,6 @@ const nativeRoutes = (
     <Route
       exact
       path={NativeWalletRoutes.ImportSeed}
-      // TODO(gomes): add NativeImportSelectNew with new design
       // we need to pass an arg here, so we need an anonymous function wrapper
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativeImportSeed {...routeProps} />}
@@ -76,7 +83,6 @@ const nativeRoutes = (
     <Route
       exact
       path={NativeWalletRoutes.ImportSelect}
-      // TODO(gomes): add NativeImportSelectNew with new design
       // we need to pass an arg here, so we need an anonymous function wrapper
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativeImportSelect {...routeProps} />}
@@ -87,22 +93,16 @@ const nativeRoutes = (
     <Route
       exact
       path={NativeWalletRoutes.Password}
-      // TODO(gomes): add NativePassowrdNew with new design
       // we need to pass an arg here, so we need an anonymous function wrapper
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativePassword {...(routeProps as NativeSetupProps)} />}
     />
-    <Route
-      exact
-      path={NativeWalletRoutes.EnterPassword}
-      // TODO(gomes): add EnterPasswordNew with new design
-    >
+    <Route exact path={NativeWalletRoutes.EnterPassword}>
       <EnterPassword />
     </Route>
     <Route
       exact
       path={NativeWalletRoutes.Success}
-      // TODO(gomes): add NativeSuccessNew with new design
       // we need to pass an arg here, so we need an anonymous function wrapper
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativeSuccess {...(routeProps as NativeSetupProps)} />}
@@ -110,7 +110,6 @@ const nativeRoutes = (
     <Route
       exact
       path={NativeWalletRoutes.CreateTest}
-      // TODO(gomes): add NativeTestPhraseNew with new design
       // we need to pass an arg here, so we need an anonymous function wrapper
       // eslint-disable-next-line react-memo/require-usememo
       render={routeProps => <NativeTestPhrase {...(routeProps as NativeSetupProps)} />}
@@ -132,7 +131,7 @@ const RightPanelContent = ({
   if (location.pathname.startsWith('/native')) return nativeRoutes
 
   // No modal type, and no in-flight native routes - assume enpty state
-  if (!modalType || modalType === 'native' || location.pathname === '/') return <NativeStart />
+  if (!modalType || modalType === 'native' || location.pathname === '/') return <NativeIntro />
 
   if (isMipdProvider && modalType) {
     return (
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index f4eb7eb6609..512b27fda63 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -2,12 +2,14 @@ import { Box, Button, Flex, Icon, Stack, Text as CText, useColorModeValue } from
 import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { FaPlus, FaWallet } from 'react-icons/fa'
+import { useHistory } from 'react-router-dom'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { Text } from 'components/Text'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { KeyManager } from 'context/WalletProvider/KeyManager'
 import { useLocalWallet } from 'context/WalletProvider/local-wallet'
 import { NativeConfig } from 'context/WalletProvider/NativeWallet/config'
+import { NativeWalletRoutes } from 'context/WalletProvider/types'
 import { useWallet } from 'hooks/useWallet/useWallet'
 
 type VaultInfo = {
@@ -61,6 +63,7 @@ export const SavedWalletsSection = ({
 }) => {
   const buttonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
 
+  const history = useHistory()
   const localWallet = useLocalWallet()
   const { getAdapter, dispatch } = useWallet()
 
@@ -135,8 +138,8 @@ export const SavedWalletsSection = ({
   )
 
   const handleAddNewWalletClick = useCallback(() => {
-    console.log('TODO')
-  }, [])
+    history.push(NativeWalletRoutes.Connect)
+  }, [history])
 
   if (!nativeVaultsQuery.data?.length) return null
 
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeIntro.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeIntro.tsx
new file mode 100644
index 00000000000..89a193831cd
--- /dev/null
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeIntro.tsx
@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Icon,
+  Stack,
+  Text as CText,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { FaArrowRight } from 'react-icons/fa'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
+import { FoxIcon } from 'components/Icons/FoxIcon'
+import { Text } from 'components/Text'
+import { NativeWalletRoutes } from 'context/WalletProvider/types'
+
+export const NativeIntro = () => {
+  const translate = useTranslate()
+  const history = useHistory()
+
+  const headingColor = useColorModeValue('gray.800', 'whiteAlpha.800')
+  const bodyColor = useColorModeValue('gray.600', 'whiteAlpha.600')
+  const mainTextColor = useColorModeValue('gray.700', 'whiteAlpha.800')
+
+  const handleCreateClick = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
+  const handleImportClick = useCallback(
+    () => history.push(NativeWalletRoutes.ImportSelect),
+    [history],
+  )
+  const handleImportKeystoreClick = useCallback(
+    () => history.push(NativeWalletRoutes.ImportKeystore),
+    [history],
+  )
+
+  return (
+    <Stack h='full'>
+      <Flex
+        direction='column'
+        alignItems='center'
+        justifyContent='center'
+        h='full'
+        maxW='md'
+        mx='auto'
+        px={4}
+        textAlign='center'
+      >
+        <Box mb={6}>
+          <FoxIcon boxSize='16' />
+        </Box>
+
+        <Text
+          fontSize='2xl'
+          fontWeight='bold'
+          mb={4}
+          color={headingColor}
+          translation='walletProvider.shapeShift.onboarding.whatIsShapeshiftWallet'
+        />
+
+        <Text
+          color={mainTextColor}
+          mb={8}
+          translation='walletProvider.shapeShift.onboarding.yourDecentralizedGateway'
+        />
+        <Text
+          color={mainTextColor}
+          mb={12}
+          translation='walletProvider.shapeShift.onboarding.crossChainFreedom'
+        />
+
+        <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
+          {translate('walletProvider.shapeShift.onboarding.createNewWallet')}
+        </Button>
+
+        <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
+          {translate('walletProvider.shapeShift.onboarding.importExisting')}
+        </Button>
+      </Flex>
+      <Box width='100%' mb={4} textAlign='center' position='absolute' left={0} bottom={0}>
+        <Divider my={6} />
+        <CText color={bodyColor}>
+          {translate('walletProvider.shapeShift.onboarding.comingFromThorswap')}{' '}
+          <Button
+            variant='link'
+            color='blue.500'
+            onClick={handleImportKeystoreClick}
+            fontWeight='medium'
+            colorScheme='blue'
+          >
+            {translate('walletProvider.shapeShift.onboarding.importFromKeystore')}
+            <Icon as={FaArrowRight} ml={2} />
+          </Button>
+        </CText>
+      </Box>
+    </Stack>
+  )
+}
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index 287ec6f97e1..2d1cab2c1d8 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -1,98 +1,87 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Icon,
-  Stack,
-  Text as CText,
-  useColorModeValue,
-} from '@chakra-ui/react'
+import { ArrowForwardIcon } from '@chakra-ui/icons'
+import type { ResponsiveValue } from '@chakra-ui/react'
+import { Button, Divider, Flex, ModalBody, ModalHeader, Stack } from '@chakra-ui/react'
+import type { Property } from 'csstype'
 import { useCallback } from 'react'
-import { FaArrowRight } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
-import { useHistory } from 'react-router-dom'
-import { FoxIcon } from 'components/Icons/FoxIcon'
+import type { RouteComponentProps } from 'react-router'
 import { Text } from 'components/Text'
 import { NativeWalletRoutes } from 'context/WalletProvider/types'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 
-export const NativeStart = () => {
-  const translate = useTranslate()
-  const history = useHistory()
+const directionProp: ResponsiveValue<Property.FlexDirection> = ['column', 'row']
+const mlProp = [0, 1.5]
+const arrowForwardIcon = <ArrowForwardIcon />
 
-  const headingColor = useColorModeValue('gray.800', 'whiteAlpha.800')
-  const bodyColor = useColorModeValue('gray.600', 'whiteAlpha.600')
-  const mainTextColor = useColorModeValue('gray.700', 'whiteAlpha.800')
+export const NativeStart = ({ history }: RouteComponentProps) => {
+  const isShapeShiftMobileWalletEnabled = useFeatureFlag('ShapeShiftMobileWallet')
+  const translate = useTranslate()
 
-  const handleCreateClick = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
+  const handleCreate = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
   const handleImportClick = useCallback(
     () => history.push(NativeWalletRoutes.ImportSelect),
     [history],
   )
-  const handleImportKeystoreClick = useCallback(
-    () => history.push(NativeWalletRoutes.ImportKeystore),
-    [history],
-  )
+  const handleLogin = useCallback(() => history.push(NativeWalletRoutes.LegacyLogin), [history])
 
   return (
-    <Stack h='full'>
-      <Flex
-        direction='column'
-        alignItems='center'
-        justifyContent='center'
-        h='full'
-        maxW='md'
-        mx='auto'
-        px={4}
-        textAlign='center'
-      >
-        <Box mb={6}>
-          <FoxIcon boxSize='16' />
-        </Box>
-
-        <Text
-          fontSize='2xl'
-          fontWeight='bold'
-          mb={4}
-          color={headingColor}
-          translation='walletProvider.shapeShift.onboarding.whatIsShapeshiftWallet'
-        />
-
-        <Text
-          color={mainTextColor}
-          mb={8}
-          translation='walletProvider.shapeShift.onboarding.yourDecentralizedGateway'
-        />
-        <Text
-          color={mainTextColor}
-          mb={12}
-          translation='walletProvider.shapeShift.onboarding.crossChainFreedom'
-        />
-
-        <Button colorScheme='blue' px={4} onClick={handleCreateClick}>
-          {translate('walletProvider.shapeShift.onboarding.createNewWallet')}
-        </Button>
-
-        <Button variant='link' color={bodyColor} mt={4} onClick={handleImportClick}>
-          {translate('walletProvider.shapeShift.onboarding.importExisting')}
-        </Button>
-      </Flex>
-      <Box width='100%' mb={4} textAlign='center' position='absolute' left={0} bottom={0}>
-        <Divider my={6} />
-        <CText color={bodyColor}>
-          {translate('walletProvider.shapeShift.onboarding.comingFromThorswap')}{' '}
+    <>
+      <ModalHeader>
+        <Text translation={'walletProvider.shapeShift.start.header'} />
+      </ModalHeader>
+      <ModalBody>
+        <Text mb={4} color='text.subtle' translation={'walletProvider.shapeShift.start.body'} />
+        <Stack mt={6} spacing={4}>
+          <Divider />
+          <Button
+            w='full'
+            h='auto'
+            px={6}
+            py={4}
+            justifyContent='space-between'
+            rightIcon={arrowForwardIcon}
+            onClick={handleCreate}
+            data-test='wallet-native-create-button'
+          >
+            <Text translation={'walletProvider.shapeShift.start.create'} />
+          </Button>
           <Button
-            variant='link'
-            color='blue.500'
-            onClick={handleImportKeystoreClick}
-            fontWeight='medium'
-            colorScheme='blue'
+            w='full'
+            h='auto'
+            px={6}
+            py={4}
+            justifyContent='space-between'
+            rightIcon={arrowForwardIcon}
+            onClick={handleImportClick}
+            data-test='wallet-native-import-button'
           >
-            {translate('walletProvider.shapeShift.onboarding.importFromKeystore')}
-            <Icon as={FaArrowRight} ml={2} />
+            <Text translation={'walletProvider.shapeShift.start.import'} />
           </Button>
-        </CText>
-      </Box>
-    </Stack>
+          {isShapeShiftMobileWalletEnabled && (
+            <>
+              <Divider mt={4} />
+              <Flex
+                direction={directionProp}
+                mt={2}
+                pt={4}
+                justifyContent='center'
+                alignItems='center'
+              >
+                <Text translation={'walletProvider.shapeShift.legacy.haveMobileWallet'} />
+                <Button
+                  variant='link'
+                  ml={mlProp}
+                  borderTopRadius='none'
+                  colorScheme='blue'
+                  onClick={handleLogin}
+                >
+                  {translate('common.login')}
+                </Button>
+              </Flex>
+            </>
+          )}
+        </Stack>
+      </ModalBody>
+    </>
   )
 }

From 1604511a3824074746a4c1c0d438e17d33e20c3c Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:54:11 +0100
Subject: [PATCH 29/34] feat: cleanup

---
 .../wallets/native/NativeStart.tsx            | 35 +------------------
 1 file changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index 2d1cab2c1d8..efd167bb49d 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -1,28 +1,18 @@
 import { ArrowForwardIcon } from '@chakra-ui/icons'
-import type { ResponsiveValue } from '@chakra-ui/react'
-import { Button, Divider, Flex, ModalBody, ModalHeader, Stack } from '@chakra-ui/react'
-import type { Property } from 'csstype'
+import { Button, Divider, ModalBody, ModalHeader, Stack } from '@chakra-ui/react'
 import { useCallback } from 'react'
-import { useTranslate } from 'react-polyglot'
 import type { RouteComponentProps } from 'react-router'
 import { Text } from 'components/Text'
 import { NativeWalletRoutes } from 'context/WalletProvider/types'
-import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 
-const directionProp: ResponsiveValue<Property.FlexDirection> = ['column', 'row']
-const mlProp = [0, 1.5]
 const arrowForwardIcon = <ArrowForwardIcon />
 
 export const NativeStart = ({ history }: RouteComponentProps) => {
-  const isShapeShiftMobileWalletEnabled = useFeatureFlag('ShapeShiftMobileWallet')
-  const translate = useTranslate()
-
   const handleCreate = useCallback(() => history.push(NativeWalletRoutes.Create), [history])
   const handleImportClick = useCallback(
     () => history.push(NativeWalletRoutes.ImportSelect),
     [history],
   )
-  const handleLogin = useCallback(() => history.push(NativeWalletRoutes.LegacyLogin), [history])
 
   return (
     <>
@@ -57,29 +47,6 @@ export const NativeStart = ({ history }: RouteComponentProps) => {
           >
             <Text translation={'walletProvider.shapeShift.start.import'} />
           </Button>
-          {isShapeShiftMobileWalletEnabled && (
-            <>
-              <Divider mt={4} />
-              <Flex
-                direction={directionProp}
-                mt={2}
-                pt={4}
-                justifyContent='center'
-                alignItems='center'
-              >
-                <Text translation={'walletProvider.shapeShift.legacy.haveMobileWallet'} />
-                <Button
-                  variant='link'
-                  ml={mlProp}
-                  borderTopRadius='none'
-                  colorScheme='blue'
-                  onClick={handleLogin}
-                >
-                  {translate('common.login')}
-                </Button>
-              </Flex>
-            </>
-          )}
         </Stack>
       </ModalBody>
     </>

From 84191d75bb13654b10f5d3391773f31ca48fb2af Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:54:50 +0100
Subject: [PATCH 30/34] feat: more cleanup

---
 .../WalletProvider/NewWalletViews/wallets/mipd/MipdBody.tsx     | 1 -
 .../NewWalletViews/wallets/native/NativeStart.tsx               | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/context/WalletProvider/NewWalletViews/wallets/mipd/MipdBody.tsx b/src/context/WalletProvider/NewWalletViews/wallets/mipd/MipdBody.tsx
index 84f05efe634..5535a4430b2 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/mipd/MipdBody.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/mipd/MipdBody.tsx
@@ -211,7 +211,6 @@ export const MipdBody = ({ rdns, isLoading, error, setIsLoading, setError }: Mip
         loadingText={translate('common.pairing')}
         spinner={spinner}
         onClick={pairDevice}
-        data-test='wallet-pair-button'
       >
         {translate('walletProvider.mipd.connect.button')}
       </Button>
diff --git a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
index efd167bb49d..b5765bd2b4d 100644
--- a/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
+++ b/src/context/WalletProvider/NewWalletViews/wallets/native/NativeStart.tsx
@@ -31,7 +31,6 @@ export const NativeStart = ({ history }: RouteComponentProps) => {
             justifyContent='space-between'
             rightIcon={arrowForwardIcon}
             onClick={handleCreate}
-            data-test='wallet-native-create-button'
           >
             <Text translation={'walletProvider.shapeShift.start.create'} />
           </Button>
@@ -43,7 +42,6 @@ export const NativeStart = ({ history }: RouteComponentProps) => {
             justifyContent='space-between'
             rightIcon={arrowForwardIcon}
             onClick={handleImportClick}
-            data-test='wallet-native-import-button'
           >
             <Text translation={'walletProvider.shapeShift.start.import'} />
           </Button>

From c46c1eefa6b1a04b160e17a1a8ca7f6b8fcc0e3d Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:58:04 +0100
Subject: [PATCH 31/34] feat: more cleanup

---
 src/context/WalletProvider/WalletViewsSwitch.tsx | 5 -----
 src/test/TestProviders.tsx                       | 1 -
 2 files changed, 6 deletions(-)

diff --git a/src/context/WalletProvider/WalletViewsSwitch.tsx b/src/context/WalletProvider/WalletViewsSwitch.tsx
index b9704077bba..65a2566231a 100644
--- a/src/context/WalletProvider/WalletViewsSwitch.tsx
+++ b/src/context/WalletProvider/WalletViewsSwitch.tsx
@@ -92,11 +92,6 @@ export const WalletViewsSwitch = () => {
     await cancelWalletRequests()
   }, [cancelWalletRequests, dispatch, history])
 
-  useEffect(() => {
-    // Reset on mount
-    dispatch({ type: WalletActions.SET_INITIAL_ROUTE, payload: '' })
-  }, [dispatch])
-
   useEffect(() => {
     if (initialRoute) {
       history.push(initialRoute)
diff --git a/src/test/TestProviders.tsx b/src/test/TestProviders.tsx
index 0dbb9c9a6f0..cc2d31f6a99 100644
--- a/src/test/TestProviders.tsx
+++ b/src/test/TestProviders.tsx
@@ -15,7 +15,6 @@ export const TestProviders: React.FC<PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <ReduxProvider store={store}>
       <I18n locale={locale} messages={messages}>
-        {/* @ts-ignore remove warning */}
         {children}
       </I18n>
     </ReduxProvider>

From 78485394d1bb00898f5bc4426e6ab315c2349a2d Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:59:14 +0100
Subject: [PATCH 32/34] feat: last cleanup i swear

---
 src/theme/semanticTokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/semanticTokens.ts b/src/theme/semanticTokens.ts
index f5b7f0915b5..7e6aa3c2a2d 100644
--- a/src/theme/semanticTokens.ts
+++ b/src/theme/semanticTokens.ts
@@ -65,11 +65,11 @@ export const semanticTokens = {
           _dark: 'darkNeutral.900',
         },
         hover: {
-          default: 'gray.150',
+          default: 'gray.50',
           _dark: 'darkNeutral.800',
         },
         pressed: {
-          default: 'gray.250',
+          default: 'gray.150',
           _dark: 'darkNeutral.900',
         },
       },

From f7b4b16f1b5245a11a77f076cae0a242120004c0 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Fri, 17 Jan 2025 00:03:10 +0100
Subject: [PATCH 33/34] Revert "feat: last cleanup i swear"

This reverts commit 78485394d1bb00898f5bc4426e6ab315c2349a2d.
---
 src/theme/semanticTokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/semanticTokens.ts b/src/theme/semanticTokens.ts
index 7e6aa3c2a2d..f5b7f0915b5 100644
--- a/src/theme/semanticTokens.ts
+++ b/src/theme/semanticTokens.ts
@@ -65,11 +65,11 @@ export const semanticTokens = {
           _dark: 'darkNeutral.900',
         },
         hover: {
-          default: 'gray.50',
+          default: 'gray.150',
           _dark: 'darkNeutral.800',
         },
         pressed: {
-          default: 'gray.150',
+          default: 'gray.250',
           _dark: 'darkNeutral.900',
         },
       },

From 3234de0c84060f155fd82794057399e3cd854705 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Fri, 17 Jan 2025 14:07:05 +0100
Subject: [PATCH 34/34] feat: extract hdwalletNativeVaultsList queryKey /
 queryFn

---
 .../NativeWallet/components/NativeSuccess.tsx  |  5 ++++-
 .../sections/SavedWalletsSection.tsx           | 18 ++----------------
 src/react-queries/queries/common.ts            | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
index ee6340f477c..9c1538bc8d2 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx
@@ -1,5 +1,6 @@
 import { Box, ModalBody, ModalHeader } from '@chakra-ui/react'
 import { useQueryClient } from '@tanstack/react-query'
+import { reactQueries } from 'react-queries'
 import { Text } from 'components/Text'
 
 import { useNativeSuccess } from '../hooks/useNativeSuccess'
@@ -9,7 +10,9 @@ export const NativeSuccess = ({ location }: NativeSetupProps) => {
   const queryClient = useQueryClient()
   const { isSuccessful } = useNativeSuccess({ vault: location.state.vault })
 
-  queryClient.invalidateQueries({ queryKey: ['hdwalletNativeVaultsList'] })
+  queryClient.invalidateQueries({
+    queryKey: reactQueries.common.hdwalletNativeVaultsList().queryKey,
+  })
 
   return (
     <>
diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
index 512b27fda63..5b859765fdf 100644
--- a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
+++ b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -2,6 +2,7 @@ import { Box, Button, Flex, Icon, Stack, Text as CText, useColorModeValue } from
 import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { FaPlus, FaWallet } from 'react-icons/fa'
+import { reactQueries } from 'react-queries'
 import { useHistory } from 'react-router-dom'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { Text } from 'components/Text'
@@ -68,22 +69,7 @@ export const SavedWalletsSection = ({
   const { getAdapter, dispatch } = useWallet()
 
   const nativeVaultsQuery = useQuery({
-    queryKey: ['hdwalletNativeVaultsList'],
-    queryFn: async () => {
-      const Vault = await import('@shapeshiftoss/hdwallet-native-vault').then(m => m.Vault)
-
-      const storedWallets: VaultInfo[] = await Vault.list().then(vaultIds =>
-        Promise.all(
-          vaultIds.map(async id => {
-            const meta = await Vault.meta(id)
-            const name = String(meta?.get('name') ?? id)
-            return { id, name }
-          }),
-        ),
-      )
-
-      return storedWallets
-    },
+    ...reactQueries.common.hdwalletNativeVaultsList(),
     refetchOnMount: true,
   })
 
diff --git a/src/react-queries/queries/common.ts b/src/react-queries/queries/common.ts
index e3d7c0d888d..aba30e56f12 100644
--- a/src/react-queries/queries/common.ts
+++ b/src/react-queries/queries/common.ts
@@ -101,4 +101,22 @@ export const common = createQueryKeys('common', {
   }) => ({
     queryKey: ['evmFees', to, chainId, data, value, from],
   }),
+  hdwalletNativeVaultsList: () => ({
+    queryKey: ['hdwalletNativeVaultsList'],
+    queryFn: async () => {
+      const Vault = await import('@shapeshiftoss/hdwallet-native-vault').then(m => m.Vault)
+
+      const storedWallets = await Vault.list().then(vaultIds =>
+        Promise.all(
+          vaultIds.map(async id => {
+            const meta = await Vault.meta(id)
+            const name = String(meta?.get('name') ?? id)
+            return { id, name }
+          }),
+        ),
+      )
+
+      return storedWallets
+    },
+  }),
 })