From 49132a60fbefab9c67f8958a8ea810241ee0a1f9 Mon Sep 17 00:00:00 2001
From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com>
Date: Tue, 18 Feb 2025 19:20:10 +0800
Subject: [PATCH] feat: mobile wallet keystore (#8848)

---
 src/components/FileUpload/FileUpload.tsx      |  98 +++++++++
 .../routes/ImportWallet/ImportKeystore.tsx    | 163 +++++++++++++++
 .../routes/ImportWallet/ImportRouter.tsx      |   8 +
 .../routes/ImportWallet/ImportSeedPhrase.tsx  | 158 ++++++++++++++
 .../routes/ImportWallet/ImportWallet.tsx      | 194 +++++++-----------
 src/components/MobileWalletDialog/types.ts    |   2 +
 src/components/MobileWalletDialog/utils.ts    |  60 ++++++
 .../components/NativeImportKeystore.tsx       |  99 +--------
 8 files changed, 561 insertions(+), 221 deletions(-)
 create mode 100644 src/components/FileUpload/FileUpload.tsx
 create mode 100644 src/components/MobileWalletDialog/routes/ImportWallet/ImportKeystore.tsx
 create mode 100644 src/components/MobileWalletDialog/routes/ImportWallet/ImportSeedPhrase.tsx
 create mode 100644 src/components/MobileWalletDialog/utils.ts

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
new file mode 100644
index 00000000000..a2660fe0269
--- /dev/null
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -0,0 +1,98 @@
+import { Box, FormControl, Icon, Input, Text as CText } from '@chakra-ui/react'
+import { useColorModeValue } from '@chakra-ui/system'
+import { useCallback, useState } from 'react'
+import { FaFile } from 'react-icons/fa'
+import { Text } from 'components/Text'
+
+const hoverSx = { borderColor: 'blue.500' }
+
+// TODO(gomes): use https://www.chakra-ui.com/docs/components/file-upload if/when we migrate to chakra@3
+export const FileUpload = ({ onFileSelect }: { onFileSelect: (file: File) => void }) => {
+  const borderColor = useColorModeValue('gray.200', 'gray.600')
+  const [isDragging, setIsDragging] = useState(false)
+  const [filename, setFilename] = useState<string | null>(null)
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const processFile = useCallback(
+    (file: File) => {
+      setFilename(file.name)
+      onFileSelect(file)
+    },
+    [onFileSelect],
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+
+      const files = e.dataTransfer.files
+      if (files?.[0]) {
+        processFile(files[0])
+      }
+    },
+    [processFile],
+  )
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files
+      if (files?.[0]) {
+        processFile(files[0])
+      }
+    },
+    [processFile],
+  )
+
+  return (
+    <FormControl>
+      <Input type='file' accept='.txt' onChange={handleFileInput} id='file-upload' display='none' />
+      <Box
+        as='label'
+        htmlFor='file-upload'
+        w='full'
+        h='32'
+        border='2px'
+        borderStyle='dashed'
+        borderColor={isDragging ? 'blue.500' : borderColor}
+        borderRadius='xl'
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        justifyContent='center'
+        bg='background.surface.raised.base'
+        cursor='pointer'
+        transition='all 0.2s'
+        _hover={hoverSx}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <Icon as={FaFile} boxSize={6} color='gray.500' mb={2} />
+        {filename ? (
+          <CText color='gray.500'>{filename}</CText>
+        ) : (
+          <Text color='gray.500' translation='walletProvider.shapeShift.import.dragAndDrop' />
+        )}
+      </Box>
+    </FormControl>
+  )
+}
diff --git a/src/components/MobileWalletDialog/routes/ImportWallet/ImportKeystore.tsx b/src/components/MobileWalletDialog/routes/ImportWallet/ImportKeystore.tsx
new file mode 100644
index 00000000000..e5a06f11cf6
--- /dev/null
+++ b/src/components/MobileWalletDialog/routes/ImportWallet/ImportKeystore.tsx
@@ -0,0 +1,163 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  Text as CText,
+  VStack,
+} from '@chakra-ui/react'
+import { useCallback, useState } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
+import { FileUpload } from 'components/FileUpload/FileUpload'
+import { MobileWalletDialogRoutes } from 'components/MobileWalletDialog/types'
+import { decryptFromKeystore } from 'components/MobileWalletDialog/utils'
+import { DialogBackButton } from 'components/Modal/components/DialogBackButton'
+import { DialogBody } from 'components/Modal/components/DialogBody'
+import { DialogCloseButton } from 'components/Modal/components/DialogCloseButton'
+import { DialogFooter } from 'components/Modal/components/DialogFooter'
+import {
+  DialogHeader,
+  DialogHeaderLeft,
+  DialogHeaderRight,
+} from 'components/Modal/components/DialogHeader'
+import { SlideTransition } from 'components/SlideTransition'
+import { Text } from 'components/Text'
+import { addWallet } from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
+import type { NativeWalletValues } from 'context/WalletProvider/NativeWallet/types'
+import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
+import { MixPanelEvent } from 'lib/mixpanel/types'
+
+export const ImportKeystore = () => {
+  const history = useHistory()
+  const [keystoreFile, setKeystoreFile] = useState<string | null>(null)
+  const mixpanel = getMixPanel()
+
+  const translate = useTranslate()
+
+  const {
+    setError,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+    register,
+  } = useForm<NativeWalletValues>({
+    mode: 'onChange',
+    shouldUnregister: true,
+  })
+
+  const onSubmit = useCallback(
+    async (values: FieldValues) => {
+      if (!keystoreFile) {
+        throw new Error('No keystore uploaded')
+      }
+      const parsedKeystore = JSON.parse(keystoreFile)
+
+      try {
+        const mnemonic = await decryptFromKeystore(parsedKeystore, values.keystorePassword)
+
+        const revocableVault = await addWallet({
+          mnemonic,
+          label: values.name.trim(),
+        })
+        history.push(MobileWalletDialogRoutes.ImportSuccess, { vault: revocableVault })
+        mixpanel?.track(MixPanelEvent.NativeImportKeystore)
+      } catch (e) {
+        setError('keystorePassword', {
+          type: 'manual',
+          message: translate('walletProvider.shapeShift.import.invalidKeystorePassword'),
+        })
+      }
+    },
+    [history, keystoreFile, mixpanel, setError, translate],
+  )
+
+  const handleFileSelect = useCallback((file: File) => {
+    const reader = new FileReader()
+    reader.onload = e => {
+      if (!e?.target) return
+      if (typeof e.target.result !== 'string') return
+      setKeystoreFile(e.target.result)
+    }
+    reader.readAsText(file)
+  }, [])
+
+  const handleGoBack = useCallback(() => {
+    history.goBack()
+  }, [history])
+
+  return (
+    <SlideTransition>
+      <DialogHeader>
+        <DialogHeaderLeft>
+          <DialogBackButton onClick={handleGoBack} />
+        </DialogHeaderLeft>
+        <DialogHeaderRight>
+          <DialogCloseButton />
+        </DialogHeaderRight>
+      </DialogHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DialogBody>
+          <VStack spacing={2} mb={6} alignItems='flex-start'>
+            <Box>
+              <CText fontSize='2xl' fontWeight='bold' mb={0}>
+                <Text translation={'walletProvider.shapeShift.import.keystoreHeader'} />
+              </CText>
+              <CText color='text.subtle' mb={6}>
+                <Text translation='walletProvider.shapeShift.import.keystoreImportBody' />
+              </CText>
+            </Box>
+            <VStack spacing={6} width='full'>
+              <FormControl isInvalid={Boolean(errors.name)}>
+                <Input
+                  size='lg'
+                  variant='filled'
+                  placeholder={translate('walletProvider.create.walletName')}
+                  {...register('name', {
+                    required: true,
+                    maxLength: {
+                      value: 64,
+                      message: translate('modals.password.error.maxLength', {
+                        length: 64,
+                      }),
+                    },
+                  })}
+                />
+                <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
+              </FormControl>
+              <FileUpload onFileSelect={handleFileSelect} />
+              <FormControl isInvalid={Boolean(errors.keystorePassword)}>
+                <Input
+                  type='password'
+                  placeholder='Keystore Password'
+                  size='lg'
+                  variant='filled'
+                  data-test='wallet-native-keystore-password'
+                  {...register('keystorePassword')}
+                />
+                <FormErrorMessage>{errors.keystorePassword?.message}</FormErrorMessage>
+              </FormControl>
+            </VStack>
+          </VStack>
+        </DialogBody>
+        <DialogFooter>
+          {keystoreFile && (
+            <Button
+              colorScheme='blue'
+              width='full'
+              size='lg'
+              type='submit'
+              isLoading={isSubmitting}
+              isDisabled={!isValid}
+              data-test='wallet-native-keystore-submit'
+            >
+              <Text translation='walletProvider.shapeShift.import.importKeystore' />
+            </Button>
+          )}
+        </DialogFooter>
+      </form>
+    </SlideTransition>
+  )
+}
diff --git a/src/components/MobileWalletDialog/routes/ImportWallet/ImportRouter.tsx b/src/components/MobileWalletDialog/routes/ImportWallet/ImportRouter.tsx
index bb1e66b379b..278d9a98965 100644
--- a/src/components/MobileWalletDialog/routes/ImportWallet/ImportRouter.tsx
+++ b/src/components/MobileWalletDialog/routes/ImportWallet/ImportRouter.tsx
@@ -4,6 +4,8 @@ import { MemoryRouter, Redirect, Route, Switch, useHistory } from 'react-router'
 import { MobileWalletDialogRoutes } from 'components/MobileWalletDialog/types'
 import { SlideTransition } from 'components/SlideTransition'
 
+import { ImportKeystore } from './ImportKeystore'
+import { ImportSeedPhrase } from './ImportSeedPhrase'
 import { ImportSuccess } from './ImportSuccess'
 import { ImportWallet } from './ImportWallet'
 
@@ -29,6 +31,12 @@ export const ImportRouter = ({ onClose, defaultRoute }: ImportRouterProps) => {
                 <Route path={MobileWalletDialogRoutes.ImportSuccess}>
                   <ImportSuccess onClose={onClose} />
                 </Route>
+                <Route path={MobileWalletDialogRoutes.ImportSeedPhrase}>
+                  <ImportSeedPhrase />
+                </Route>
+                <Route path={MobileWalletDialogRoutes.ImportKeystore}>
+                  <ImportKeystore />
+                </Route>
                 <Route path={MobileWalletDialogRoutes.Import}>
                   <ImportWallet
                     isDefaultRoute={defaultRoute === MobileWalletDialogRoutes.Import}
diff --git a/src/components/MobileWalletDialog/routes/ImportWallet/ImportSeedPhrase.tsx b/src/components/MobileWalletDialog/routes/ImportWallet/ImportSeedPhrase.tsx
new file mode 100644
index 00000000000..a9914f8d788
--- /dev/null
+++ b/src/components/MobileWalletDialog/routes/ImportWallet/ImportSeedPhrase.tsx
@@ -0,0 +1,158 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  Text as CText,
+  Textarea,
+  VStack,
+} from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
+import * as bip39 from 'bip39'
+import { useCallback, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
+import { MobileWalletDialogRoutes } from 'components/MobileWalletDialog/types'
+import { DialogBackButton } from 'components/Modal/components/DialogBackButton'
+import { DialogBody } from 'components/Modal/components/DialogBody'
+import { DialogCloseButton } from 'components/Modal/components/DialogCloseButton'
+import { DialogFooter } from 'components/Modal/components/DialogFooter'
+import {
+  DialogHeader,
+  DialogHeaderLeft,
+  DialogHeaderRight,
+} from 'components/Modal/components/DialogHeader'
+import { SlideTransition } from 'components/SlideTransition'
+import { Text } from 'components/Text'
+import { addWallet } from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
+
+type FormValues = { mnemonic: string; name: string }
+
+export const ImportSeedPhrase = () => {
+  const {
+    setError,
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ shouldUnregister: true })
+  const queryClient = useQueryClient()
+  const translate = useTranslate()
+
+  const history = useHistory()
+
+  const handleBack = useCallback(() => {
+    history.push(MobileWalletDialogRoutes.Import)
+  }, [history])
+
+  const onSubmit = useCallback(
+    async (values: FormValues) => {
+      try {
+        const vault = await addWallet({
+          mnemonic: values.mnemonic.toLowerCase().trim(),
+          label: values.name.trim(),
+        })
+
+        history.push(MobileWalletDialogRoutes.ImportSuccess, { vault })
+        queryClient.invalidateQueries({ queryKey: ['listWallets'] })
+      } catch (e) {
+        console.log(e)
+        setError('mnemonic', { type: 'manual', message: 'walletProvider.shapeShift.import.header' })
+      }
+    },
+    [history, queryClient, setError],
+  )
+
+  const textareaFormProps = useMemo(() => {
+    return register('mnemonic', {
+      required: translate('walletProvider.shapeShift.import.secretRecoveryPhraseRequired'),
+      minLength: {
+        value: 47,
+        message: translate('walletProvider.shapeShift.import.secretRecoveryPhraseTooShort'),
+      },
+      validate: {
+        validMnemonic: value =>
+          bip39.validateMnemonic(value.toLowerCase().trim()) ||
+          translate('walletProvider.shapeShift.import.secretRecoveryPhraseError'),
+      },
+    })
+  }, [register, translate])
+
+  const inputFormProps = useMemo(() => {
+    return register('name', {
+      required: translate('modals.shapeShift.password.error.walletNameRequired'),
+      maxLength: {
+        value: 64,
+        message: translate('modals.shapeShift.password.error.maxLength', { length: 64 }),
+      },
+    })
+  }, [register, translate])
+
+  const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit])
+
+  return (
+    <SlideTransition>
+      <DialogHeader>
+        <DialogHeaderLeft>
+          <DialogBackButton onClick={handleBack} />
+        </DialogHeaderLeft>
+        <DialogHeaderRight>
+          <DialogCloseButton />
+        </DialogHeaderRight>
+      </DialogHeader>
+      <form onSubmit={handleFormSubmit}>
+        <DialogBody>
+          <VStack spacing={2} mb={6} alignItems='flex-start'>
+            <Box>
+              <CText fontSize='2xl' fontWeight='bold' mb={0}>
+                <Text translation='walletProvider.shapeShift.import.header' />
+              </CText>
+              <CText color='text.subtle' mb={6}>
+                <Text translation='walletProvider.shapeShift.import.body' />
+              </CText>
+            </Box>
+            <Box width='full'>
+              <FormControl isInvalid={Boolean(errors.mnemonic)} mb={6}>
+                <Textarea
+                  variant='filled'
+                  size='lg'
+                  autoComplete='off'
+                  autoCorrect='off'
+                  textTransform='lowercase'
+                  {...textareaFormProps}
+                  data-test='wallet-native-seed-input'
+                />
+                <FormErrorMessage data-test='wallet-native-seed-validation-message'>
+                  {errors.mnemonic?.message}
+                </FormErrorMessage>
+              </FormControl>
+              <FormControl isInvalid={Boolean(errors.name)}>
+                <Input
+                  {...inputFormProps}
+                  size='lg'
+                  variant='filled'
+                  id='name'
+                  placeholder={translate('walletProvider.shapeShift.rename.walletName')}
+                />
+                <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+          </VStack>
+        </DialogBody>
+        <DialogFooter>
+          <Button
+            colorScheme='blue'
+            width='full'
+            size='lg'
+            type='submit'
+            isLoading={isSubmitting}
+            data-test='wallet-native-seed-submit-button'
+          >
+            <Text translation='walletProvider.shapeShift.import.button' />
+          </Button>
+        </DialogFooter>
+      </form>
+    </SlideTransition>
+  )
+}
diff --git a/src/components/MobileWalletDialog/routes/ImportWallet/ImportWallet.tsx b/src/components/MobileWalletDialog/routes/ImportWallet/ImportWallet.tsx
index 09b16ca54d3..2380fb35ed6 100644
--- a/src/components/MobileWalletDialog/routes/ImportWallet/ImportWallet.tsx
+++ b/src/components/MobileWalletDialog/routes/ImportWallet/ImportWallet.tsx
@@ -1,19 +1,8 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormErrorMessage,
-  Input,
-  Text as CText,
-  Textarea,
-  VStack,
-} from '@chakra-ui/react'
-import { useQueryClient } from '@tanstack/react-query'
-import * as bip39 from 'bip39'
-import { useCallback, useMemo } from 'react'
-import { useForm } from 'react-hook-form'
-import { useTranslate } from 'react-polyglot'
-import { useHistory } from 'react-router-dom'
+import { ArrowForwardIcon } from '@chakra-ui/icons'
+import { Button, HStack, Stack, VStack } from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { FaFile, FaKey } from 'react-icons/fa'
+import { useHistory } from 'react-router'
 import { MobileWalletDialogRoutes } from 'components/MobileWalletDialog/types'
 import { DialogBackButton } from 'components/Modal/components/DialogBackButton'
 import { DialogBody } from 'components/Modal/components/DialogBody'
@@ -26,9 +15,8 @@ import {
 } from 'components/Modal/components/DialogHeader'
 import { SlideTransition } from 'components/SlideTransition'
 import { Text } from 'components/Text'
-import { addWallet } from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
 
-type FormValues = { mnemonic: string; name: string }
+const arrowForwardIcon = <ArrowForwardIcon />
 
 interface ImportWalletProps {
   onClose: () => void
@@ -41,18 +29,17 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({
   isDefaultRoute,
   handleRedirectToHome,
 }) => {
-  const {
-    setError,
-    handleSubmit,
-    register,
-    formState: { errors, isSubmitting },
-  } = useForm<FormValues>({ shouldUnregister: true })
-  const queryClient = useQueryClient()
-  const translate = useTranslate()
-
   const history = useHistory()
+  const handleImportKeystoreClick = useCallback(
+    () => history.push(MobileWalletDialogRoutes.ImportKeystore),
+    [history],
+  )
+  const handleImportSeedClick = useCallback(
+    () => history.push(MobileWalletDialogRoutes.ImportSeedPhrase),
+    [history],
+  )
 
-  const handleBack = useCallback(() => {
+  const handleGoBack = useCallback(() => {
     if (isDefaultRoute && onClose) {
       onClose()
     } else {
@@ -60,114 +47,75 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({
     }
   }, [handleRedirectToHome, isDefaultRoute, onClose])
 
-  const onSubmit = useCallback(
-    async (values: FormValues) => {
-      try {
-        // Save the wallet in the mobile app
-        const vault = await addWallet({
-          mnemonic: values.mnemonic.toLowerCase().trim(),
-          label: values.name.trim(),
-        })
-
-        history.push(MobileWalletDialogRoutes.ImportSuccess, { vault })
-        queryClient.invalidateQueries({ queryKey: ['listWallets'] })
-      } catch (e) {
-        console.log(e)
-        setError('mnemonic', { type: 'manual', message: 'walletProvider.shapeShift.import.header' })
-      }
-    },
-    [history, queryClient, setError],
-  )
-
-  const textareaFormProps = useMemo(() => {
-    return register('mnemonic', {
-      required: translate('walletProvider.shapeShift.import.secretRecoveryPhraseRequired'),
-      minLength: {
-        value: 47,
-        message: translate('walletProvider.shapeShift.import.secretRecoveryPhraseTooShort'),
-      },
-      validate: {
-        validMnemonic: value =>
-          bip39.validateMnemonic(value.toLowerCase().trim()) ||
-          translate('walletProvider.shapeShift.import.secretRecoveryPhraseError'),
-      },
-    })
-  }, [register, translate])
-
-  const inputFormProps = useMemo(() => {
-    return register('name', {
-      required: translate('modals.shapeShift.password.error.walletNameRequired'),
-      maxLength: {
-        value: 64,
-        message: translate('modals.shapeShift.password.error.maxLength', { length: 64 }),
-      },
-    })
-  }, [register, translate])
-
-  const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit])
-
   return (
     <SlideTransition>
       <DialogHeader>
         <DialogHeaderLeft>
-          <DialogBackButton onClick={handleBack} />
+          <DialogBackButton onClick={handleGoBack} />
         </DialogHeaderLeft>
+
         <DialogHeaderRight>
           <DialogCloseButton />
         </DialogHeaderRight>
       </DialogHeader>
-      <form onSubmit={handleFormSubmit}>
-        <DialogBody>
-          <VStack spacing={2} mb={6} alignItems='flex-start'>
-            <Box>
-              <CText fontSize='2xl' fontWeight='bold' mb={0}>
-                <Text translation='walletProvider.shapeShift.import.header' />
-              </CText>
-              <CText color='text.subtle' mb={6}>
-                <Text translation='walletProvider.shapeShift.import.body' />
-              </CText>
-            </Box>
-            <Box width='full'>
-              <FormControl isInvalid={Boolean(errors.mnemonic)} mb={6}>
-                <Textarea
-                  variant='filled'
-                  size='lg'
-                  autoComplete='off'
-                  autoCorrect='off'
-                  textTransform='lowercase'
-                  {...textareaFormProps}
-                  data-test='wallet-native-seed-input'
-                />
-                <FormErrorMessage data-test='wallet-native-seed-validation-message'>
-                  {errors.mnemonic?.message}
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl isInvalid={Boolean(errors.name)}>
-                <Input
-                  {...inputFormProps}
-                  size='lg'
-                  variant='filled'
-                  id='name'
-                  placeholder={translate('walletProvider.shapeShift.rename.walletName')}
+      <DialogBody>
+        <VStack spacing={2} mb={6} alignItems='flex-start'>
+          <Text
+            fontSize='2xl'
+            fontWeight='bold'
+            mb={0}
+            translation='walletProvider.shapeShift.start.selectHeader'
+          />
+          <Text color='text.subtle' translation={'walletProvider.shapeShift.start.selectBody'} />
+        </VStack>
+        <Stack spacing={4}>
+          <Button
+            w='full'
+            h='auto'
+            px={6}
+            py={4}
+            justifyContent='space-between'
+            rightIcon={arrowForwardIcon}
+            onClick={handleImportSeedClick}
+            data-test='wallet-native-import-button'
+          >
+            <HStack spacing={4}>
+              <FaKey size={20} />
+              <VStack spacing={0} align='flex-start'>
+                <Text translation={'walletProvider.shapeShift.start.secretRecoveryPhrase'} />
+                <Text
+                  fontSize='sm'
+                  color='gray.500'
+                  translation='walletProvider.shapeShift.start.twelveWordSeedPhrase'
                 />
-                <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
-              </FormControl>
-            </Box>
-          </VStack>
-        </DialogBody>
-        <DialogFooter>
+              </VStack>
+            </HStack>
+          </Button>
           <Button
-            colorScheme='blue'
-            width='full'
-            size='lg'
-            type='submit'
-            isLoading={isSubmitting}
-            data-test='wallet-native-seed-submit-button'
+            w='full'
+            h='auto'
+            px={6}
+            py={4}
+            justifyContent='space-between'
+            rightIcon={arrowForwardIcon}
+            onClick={handleImportKeystoreClick}
+            data-test='wallet-native-create-button'
           >
-            <Text translation='walletProvider.shapeShift.import.button' />
+            <HStack spacing={4}>
+              <FaFile size={20} />
+              <VStack spacing={0} align='flex-start'>
+                <Text translation={'walletProvider.shapeShift.start.keystore'} />
+                <Text
+                  fontSize='sm'
+                  color='gray.500'
+                  translation='walletProvider.shapeShift.start.importKeystore'
+                />
+              </VStack>
+            </HStack>
           </Button>
-        </DialogFooter>
-      </form>
+        </Stack>
+      </DialogBody>
+      <DialogFooter></DialogFooter>
     </SlideTransition>
   )
 }
diff --git a/src/components/MobileWalletDialog/types.ts b/src/components/MobileWalletDialog/types.ts
index f12e9c74826..71f83bc1776 100644
--- a/src/components/MobileWalletDialog/types.ts
+++ b/src/components/MobileWalletDialog/types.ts
@@ -11,4 +11,6 @@ export enum MobileWalletDialogRoutes {
   CreateBackupSuccess = '/create/backup/success',
   Import = '/import',
   ImportSuccess = '/import/success',
+  ImportKeystore = '/import/keystore',
+  ImportSeedPhrase = '/import/seed-phrase',
 }
diff --git a/src/components/MobileWalletDialog/utils.ts b/src/components/MobileWalletDialog/utils.ts
new file mode 100644
index 00000000000..112c5e63b73
--- /dev/null
+++ b/src/components/MobileWalletDialog/utils.ts
@@ -0,0 +1,60 @@
+import type { Keystore } from '@shapeshiftoss/hdwallet-native-vault'
+import { blake2bHex } from 'blakejs'
+
+const encoder = new TextEncoder()
+const decoder = new TextDecoder()
+
+export async function decryptFromKeystore(keystore: Keystore, password: string): Promise<string> {
+  const { cipher, cipherparams, ciphertext, kdf, kdfparams, mac } = keystore.crypto
+  const { c, dklen, prf, salt } = kdfparams
+  const { iv } = cipherparams
+
+  if (kdf !== 'pbkdf2') throw new Error(`Unsupported KDF: ${kdf}`)
+  if (prf !== 'hmac-sha256') throw new Error(`Unsupported PBKDF2 PRF: ${prf}`)
+  if (cipher !== 'aes-128-ctr') throw new Error(`Unsupported Cipher: ${cipher}`)
+
+  const baseKey = await crypto.subtle.importKey('raw', encoder.encode(password), 'PBKDF2', false, [
+    'deriveBits',
+  ])
+
+  const derivedKey = new Uint8Array(
+    await crypto.subtle.deriveBits(
+      {
+        name: 'PBKDF2',
+        salt: Buffer.from(salt, 'hex'),
+        iterations: c,
+        hash: 'SHA-256',
+      },
+      baseKey,
+      dklen * 8,
+    ),
+  )
+
+  const data = new Uint8Array([...derivedKey.subarray(16, 32), ...Buffer.from(ciphertext, 'hex')])
+  const macBlake256 = blake2bHex(data, undefined, 32)
+
+  if (macBlake256 !== mac) throw new Error('Invalid password')
+
+  const aesKey = await crypto.subtle.importKey(
+    'raw',
+    derivedKey.subarray(0, 16),
+    {
+      name: 'AES-CTR',
+      length: 128,
+    },
+    false,
+    ['decrypt'],
+  )
+
+  const decrypted = await crypto.subtle.decrypt(
+    {
+      name: 'AES-CTR',
+      counter: new Uint8Array(Buffer.from(iv, 'hex')),
+      length: 128,
+    },
+    aesKey,
+    Buffer.from(ciphertext, 'hex'),
+  )
+
+  return decoder.decode(decrypted)
+}
diff --git a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
index 96f13c695b6..e75c3877fe6 100644
--- a/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
+++ b/src/context/WalletProvider/NativeWallet/components/NativeImportKeystore.tsx
@@ -1,22 +1,18 @@
 import {
-  Box,
   Button,
   FormControl,
   FormErrorMessage,
-  Icon,
   Input,
   ModalBody,
   ModalHeader,
-  Text as CText,
-  useColorModeValue,
   VStack,
 } from '@chakra-ui/react'
 import { useCallback, useState } from 'react'
 import type { FieldValues } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
-import { FaFile } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import type { RouteComponentProps } from 'react-router-dom'
+import { FileUpload } from 'components/FileUpload/FileUpload'
 import { Text } from 'components/Text'
 import { NativeWalletRoutes } from 'context/WalletProvider/types'
 import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
@@ -24,99 +20,6 @@ import { MixPanelEvent } from 'lib/mixpanel/types'
 
 import type { NativeWalletValues } from '../types'
 
-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 borderColor = useColorModeValue('gray.200', 'gray.600')
-  const [isDragging, setIsDragging] = useState(false)
-  const [filename, setFilename] = useState<string | null>(null)
-
-  const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(true)
-  }, [])
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(false)
-  }, [])
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
-
-  const processFile = useCallback(
-    (file: File) => {
-      setFilename(file.name)
-      onFileSelect(file)
-    },
-    [onFileSelect],
-  )
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      setIsDragging(false)
-
-      const files = e.dataTransfer.files
-      if (files?.[0]) {
-        processFile(files[0])
-      }
-    },
-    [processFile],
-  )
-
-  const handleFileInput = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files
-      if (files?.[0]) {
-        processFile(files[0])
-      }
-    },
-    [processFile],
-  )
-
-  return (
-    <FormControl>
-      <Input type='file' accept='.txt' onChange={handleFileInput} id='file-upload' display='none' />
-      <Box
-        as='label'
-        htmlFor='file-upload'
-        w='full'
-        h='32'
-        border='2px'
-        borderStyle='dashed'
-        borderColor={isDragging ? 'blue.500' : borderColor}
-        borderRadius='xl'
-        display='flex'
-        flexDirection='column'
-        alignItems='center'
-        justifyContent='center'
-        bg='background.surface.raised.base'
-        cursor='pointer'
-        transition='all 0.2s'
-        _hover={hoverSx}
-        onDragEnter={handleDragEnter}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        <Icon as={FaFile} boxSize={6} color='gray.500' mb={2} />
-        {filename ? (
-          <CText color='gray.500'>{filename}</CText>
-        ) : (
-          <Text color='gray.500' translation='walletProvider.shapeShift.import.dragAndDrop' />
-        )}
-      </Box>
-    </FormControl>
-  )
-}
-
 export const NativeImportKeystore = ({ history }: RouteComponentProps) => {
   const [keystoreFile, setKeystoreFile] = useState<string | null>(null)
   const mixpanel = getMixPanel()