Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new wallet flow for native #8597

Merged
merged 37 commits into from
Jan 17, 2025
Merged
Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
1133808
[skip ci] wip: new wallet flow for native
gomesalexandre Jan 15, 2025
6da6baa
[skip ci] feat: handlers
gomesalexandre Jan 15, 2025
d7b51a1
feat: stopping point
gomesalexandre Jan 16, 2025
0797e59
Merge branch 'develop' into feat_new_wallet_flow_native
gomesalexandre Jan 16, 2025
01142ec
[skip ci] chore: one too deep on the cleanup
gomesalexandre Jan 16, 2025
40ec15c
feat: progression
gomesalexandre Jan 16, 2025
5485c88
fix: routing shenanigans
gomesalexandre Jan 16, 2025
1f3882b
fix: more routing shenanigans
gomesalexandre Jan 16, 2025
f2ce7ab
feat: missing routes
gomesalexandre Jan 16, 2025
718dc3a
fix: styles
gomesalexandre Jan 16, 2025
8110223
fix: more style fixes
gomesalexandre Jan 16, 2025
4c83aa9
[skip ci] wip: more wire more up
gomesalexandre Jan 16, 2025
27cf208
fix: routing
gomesalexandre Jan 16, 2025
9a1ea6a
feat: rm disgusting iiafe
gomesalexandre Jan 16, 2025
956f522
chore: trigger CI
gomesalexandre Jan 16, 2025
b8a2e8a
fix: lint
gomesalexandre Jan 16, 2025
c910f7f
fix: light mode things
gomesalexandre Jan 16, 2025
6d0a12e
feat: less aggressive light mode
gomesalexandre Jan 16, 2025
489ecb7
fix: mobile things
gomesalexandre Jan 16, 2025
ae6dc60
fix: lint
gomesalexandre Jan 16, 2025
5838748
feat: progress
gomesalexandre Jan 16, 2025
b95c538
fix: tests with flag on
gomesalexandre Jan 16, 2025
2e8d382
feat: more progress more ion
gomesalexandre Jan 16, 2025
17adcab
feat: add divider
gomesalexandre Jan 16, 2025
6830ce4
fix: scrolly bits
gomesalexandre Jan 16, 2025
f60cafc
feat: truncate long-ass wallet names
gomesalexandre Jan 16, 2025
50cfde3
feat: slightly adjust styles
gomesalexandre Jan 16, 2025
e945fcb
feat: almost there
gomesalexandre Jan 16, 2025
d9f739c
Merge branch 'develop' into feat_new_wallet_flow_native
gomesalexandre Jan 16, 2025
381c8a2
feat: here we fuarking go
gomesalexandre Jan 16, 2025
1604511
feat: cleanup
gomesalexandre Jan 16, 2025
84191d7
feat: more cleanup
gomesalexandre Jan 16, 2025
c46c1ee
feat: more cleanup
gomesalexandre Jan 16, 2025
7848539
feat: last cleanup i swear
gomesalexandre Jan 16, 2025
f7b4b16
Revert "feat: last cleanup i swear"
gomesalexandre Jan 16, 2025
52ae673
Merge branch 'develop' into feat_new_wallet_flow_native
NeOMakinG Jan 17, 2025
3234de0
feat: extract hdwalletNativeVaultsList queryKey / queryFn
gomesalexandre Jan 17, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: almost there
gomesalexandre committed Jan 16, 2025
commit e945fcb7d8b144091086bc6af427cafd7af49548
1 change: 1 addition & 0 deletions src/assets/translations/en/main.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -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}
gomesalexandre marked this conversation as resolved.
Show resolved Hide resolved
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>
</>
)
Original file line number Diff line number Diff line change
@@ -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>
)
}