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.

Sign up for GitHub

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

Jump to bottom

feat: update wallet connection splash #7793

Merged
merged 6 commits into from
Sep 25, 2024
Merged

feat: update wallet connection splash #7793

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2346aa6
feat: update wallet connection splash
0xApotheosis Sep 24, 2024
f6dec82
feat: replace nightSky with gradient
0xApotheosis Sep 24, 2024
2f99f42
chore: tweak margin
0xApotheosis Sep 24, 2024
09dc620
chore: styling tweaks
0xApotheosis Sep 24, 2024
f6c0fcd
feat: use splash jpg
0xApotheosis Sep 25, 2024
2549d8a
Merge branch 'develop' into new-splash
NeOMakinG Sep 25, 2024
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
Binary file removed src/assets/nightsky.jpg
View file
Open in desktop
Binary file not shown.
8 changes: 5 additions & 3 deletions src/assets/translations/en/main.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,12 +287,16 @@
},
"connectWalletPage": {
"title": "The Original Multichain Exchange",
"primaryTitle": "Welcome to Multichain DeFi.",
"secondaryTitle": "Private. Decentralized. Non-custodial.",
"primaryDescription": "Trade, bridge, and earn rewards effortlessly. Experience Native Bitcoin, Dogecoin, and more. Manage Liquidity and DeFi Positions in One-Click.",
"snapDescription": "Download the ShapeShift Multichain Snap and Unlock Bitcoin, Dogecoin, and more for your MetaMask.",
"shapeshift": "ShapeShift",
"exploreThe": "Explore the",
"defiUniverse": "DeFi Universe",
"body": "Trade, bridge & earn. Private. Community owned. Non-custodial. Decentralized.",
"header": "Please connect a wallet to get started",
"cta": "Connect Wallet",
"cta": "Connect or Create Wallet",
"viewADemo": "View a Demo",
"dontHaveWallet": "Don't have a wallet?",
"welcomeBack": "Welcome back!",
Expand Down Expand Up @@ -1544,8 +1548,6 @@
"title": "Multichain Snap needs updating",
"subtitle": "Click 'Update' to continue using ShapeShift's multichain features with MetaMask!"
},
"secondaryTitle": "The best Multichain experience for MetaMask: Powered by ShapeShift",
"secondaryBody": "Send, receive, track, trade, and earn with the ShapeShift Multichain Snap on the following chains:",
"connectMetaMask": "Connect MetaMask",
"andMore": "...and more",
"snapInstalledToast": "ShapeShift Multichain MetaMask Snap Installed",
Expand Down
176 changes: 56 additions & 120 deletions src/pages/ConnectWallet/ConnectWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type { ResponsiveValue } from '@chakra-ui/react'
import {
Box,
Button,
Center,
Circle,
Divider,
Flex,
Heading,
Expand All @@ -11,15 +10,12 @@ import {
Stack,
Tooltip,
} from '@chakra-ui/react'
import { isEvmChainId } from '@shapeshiftoss/chain-adapters'
import { KnownChainIds } from '@shapeshiftoss/types'
import { knownChainIds } from 'constants/chains'
import { useCallback, useEffect, useMemo } from 'react'
import { useTranslate } from 'react-polyglot'
import { generatePath, matchPath, useHistory } from 'react-router-dom'
import NightSky from 'assets/nightsky.jpg'
import { AssetIcon } from 'components/AssetIcon'
import { FoxIcon } from 'components/Icons/FoxIcon'
import { MetaMaskIcon } from 'components/Icons/MetaMaskIcon'
import { LanguageSelector } from 'components/LanguageSelector'
import { Page } from 'components/Layout/Page'
Expand Down Expand Up @@ -48,9 +44,7 @@ const IncludeChains = [
]

const containerPt = { base: 8, lg: 0 }
const flexAlign = { base: 'center', lg: 'flex-start' }
const flexRightAlign = { base: 'center', lg: 'flex-end' }
const textAlign: ResponsiveValue<any> = { base: 'center', lg: 'left' }
const margin = { base: 0, lg: 'auto' }
const spacing = { base: 6, lg: 8 }
const display = { base: 'none', lg: 'flex' }
Expand Down Expand Up @@ -80,17 +74,6 @@ export const ConnectWallet = () => {
.filter(isSome)
}, [])

const evmChains = useMemo(() => {
return knownChainIds
.filter(isEvmChainId)
.map(knownChainId => {
const assetId = getChainAdapterManager().get(knownChainId)?.getFeeAssetId()!
const asset = selectAssetById(store.getState(), assetId)
return asset
})
.filter(isSome)
}, [])

const history = useHistory()
const translate = useTranslate()
const query = useQuery<{ returnUrl: string }>()
Expand Down Expand Up @@ -129,10 +112,6 @@ export const ConnectWallet = () => {
))
}, [allNativeAssets])

const renderEvmChainText = useMemo(() => {
return evmChains.map(asset => asset.networkName).join(', ')
}, [evmChains])

const handleConnectClick = useCallback(
() => dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true }),
[dispatch],
Expand Down Expand Up @@ -178,83 +157,62 @@ export const ConnectWallet = () => {
maxWidth={maxWidth}
width={width}
>
{isMobile ? (
<Stack spacing={4} textAlign={textAlign}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logical branch could never be entered, as if isMobile was true we would have early exited above.

<Flex flexDir='row' textAlign='left' fontSize='2xl' letterSpacing='tight'>
<RawText color='white' lineHeight='1' userSelect={'none'}>
{translate('connectWalletPage.exploreThe')}{' '}
<RawText color='white' fontWeight='bold' as='span'>
{translate('connectWalletPage.defiUniverse')}
</RawText>
</RawText>
</Flex>
<Text
userSelect={'none'}
color='text.subtle'
fontSize='lg'
textAlign='left'
translation={'connectWalletPage.body'}
/>
</Stack>
) : isSnapEnabled ? (
<>
<Stack spacing={6}>
<Stack spacing={4} textAlign={textAlign}>
<Heading as='h3' fontSize='2xl'>
{translate('walletProvider.metaMaskSnap.secondaryTitle')}
</Heading>
<RawText color='text.subtle' fontSize='lg'>
{translate('walletProvider.metaMaskSnap.secondaryBody')}
</RawText>
<HStack spacing={4} justify={flexAlign} wrap='wrap' mb={4}>
{renderChains}
<Tooltip label={renderEvmChainText}>
<RawText color='text.subtle'>
{translate('walletProvider.metaMaskSnap.andMore')}
</RawText>
</Tooltip>
</HStack>
</Stack>
<Button
width='full'
size='lg-multiline'
onClick={handleMetaMaskConnect}
leftIcon={metamaskIcon}
>
{translate('walletProvider.metaMaskSnap.connectMetaMask')}
</Button>
</Stack>
<Flex alignItems='center' justifyContent='center' width='full' gap={4}>
<Divider flex={1} borderColor='border.bold' opacity='1' />
<Text
color='text.subtle'
fontWeight='medium'
textAlign='center'
translation='common.or'
/>
<Divider flex={1} borderColor='border.bold' opacity='1' />
</Flex>
</>
) : (
<Stack spacing={6}>
<Heading as='h3' fontSize='2xl'>
{translate('connectWalletPage.welcomeBack')}
<Stack spacing={6}>
<Stack spacing={4} textAlign='center' alignItems='center' fontWeight='bold'>
<RawText color='blue.300' fontSize='m' textTransform='uppercase'>
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
{translate('connectWalletPage.secondaryTitle')}
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
</RawText>
<Heading as='h1' fontSize='4xl'>
{translate('connectWalletPage.primaryTitle')}
</Heading>
<RawText fontSize='lg' color='text.subtle'>
{translate('connectWalletPage.welcomeBody')}
<RawText color='text.subtle' fontSize='m'>
{translate('connectWalletPage.primaryDescription')}
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
</RawText>
<Button
size='lg-multiline'
zIndex={1}
colorScheme='blue'
width='fit-content'
onClick={handleConnectClick}
data-test='connect-wallet-button'
my={4}
>
<Text translation='connectWalletPage.cta' />
</Button>
{isSnapEnabled && (
<>
<Flex alignItems='center' justifyContent='center' width='full' gap={4}>
<Divider flex={1} borderColor='border.bold' opacity='1' />
<Text
color='text.subtle'
fontWeight='medium'
textAlign='center'
translation='common.or'
textTransform='uppercase'
/>
<Divider flex={1} borderColor='border.bold' opacity='1' />
</Flex>
<Box bg='background.button.secondary.base' p={6} borderRadius='lg' mt={4}>
<HStack spacing={4} justify='center' wrap='wrap' mb={4}>
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
{renderChains}
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
</HStack>
<RawText fontSize='m'>
{translate('connectWalletPage.snapDescription')}
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
</RawText>
<Button
width='fit-content'
size='lg-multiline'
onClick={handleMetaMaskConnect}
leftIcon={metamaskIcon}
mt={6}
>
{translate('walletProvider.metaMaskSnap.connectMetaMask')}
</Button>
</Box>
</>
)}
</Stack>
)}
<Button
size='lg-multiline'
zIndex={1}
colorScheme='blue'
width='full'
onClick={handleConnectClick}
data-test='connect-wallet-button'
>
<Text translation='connectWalletPage.cta' />
</Button>
</Stack>
<Flex gap={1}>
<RawText color='text.subtle'>{translate('connectWalletPage.dontHaveWallet')}</RawText>
<Button
Expand Down Expand Up @@ -283,7 +241,7 @@ export const ConnectWallet = () => {
zIndex={1}
width='full'
maxWidth='400px'
bgImage={NightSky}
background='linear-gradient(135deg, #0052FF 0%, #0052FF 40%, #00D2FF 100%)'
backgroundSize='cover'
0xApotheosis marked this conversation as resolved.
Show resolved Hide resolved
display={display}
>
Expand All @@ -292,29 +250,7 @@ export const ConnectWallet = () => {
// Full height with "-webkit-fill-available" polyfill, see https://chakra-ui.com/changelog/v2.3.1#styled-system-231
height='$100vh'
px={6}
>
<Flex>
<Circle size='52px' mb='auto' mt={12}>
<FoxIcon boxSize='100%' color='white' />
</Circle>
</Flex>
<Stack mt='auto' spacing={6}>
<Flex flexDir='row' textAlign='left' fontSize='2xl' letterSpacing='tight'>
<RawText color='white' lineHeight='1' userSelect={'none'}>
{translate('connectWalletPage.title')}
</RawText>
</Flex>
<Divider borderWidth={2} opacity='1' borderColor='white' maxWidth='80px' />
<Text
userSelect={'none'}
color='text.subtle'
fontSize='lg'
mb={12}
textAlign='left'
translation={'connectWalletPage.body'}
/>
</Stack>
</Center>
/>
</Flex>
</Flex>
</Page>
Expand Down
Loading