feat: new wallet flow for native (#8597)

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": {
@@ -1871,6 +1872,15 @@
       "onboarding": {
         "skip": "Skip",
         "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",
+        "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.",

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.50', '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}

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)

src/context/WalletProvider/NativeWallet/components/NativeSuccess.tsx

@@ -1,12 +1,19 @@
 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'
 import type { NativeSetupProps } from '../types'
 
 export const NativeSuccess = ({ location }: NativeSetupProps) => {
+  const queryClient = useQueryClient()
   const { isSuccessful } = useNativeSuccess({ vault: location.state.vault })
 
+  queryClient.invalidateQueries({
+    queryKey: reactQueries.common.hdwalletNativeVaultsList().queryKey,
+  })
+
   return (
     <>
       <ModalHeader>

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'>

src/context/WalletProvider/NativeWallet/types.ts

@@ -1,7 +1,5 @@
 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
@@ -22,12 +20,4 @@ export interface LocationState {
   }
 }
 
-export interface NativeSetupProps
-  extends RouteComponentProps<
-    {},
-    any, // history
-    LocationState
-  > {
-  vault: Vault
-  dispatch: React.Dispatch<ActionTypes>
-}
+export type NativeSetupProps = RouteComponentProps<{}, any, LocationState>