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] 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>
+    </>
   )
 }