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 all 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.
Binary file added src/assets/splash-sidebar.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
181 changes: 61 additions & 120 deletions src/pages/ConnectWallet/ConnectWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import type { ResponsiveValue } from '@chakra-ui/react'
import {
Box,
Button,
Center,
Circle,
Divider,
Flex,
Heading,
HStack,
Link,
Stack,
Tooltip,
useColorModeValue,
} 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 SplashSidebar from 'assets/splash-sidebar.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 +46,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 All @@ -68,6 +64,7 @@ export const ConnectWallet = () => {
const { state, dispatch, connectDemo, connect } = useWallet()
const hasWallet = Boolean(state.walletInfo?.deviceId)
const isSnapEnabled = useFeatureFlag('Snaps')
const snapInfoBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')

const allNativeAssets = useMemo(() => {
return knownChainIds
Expand All @@ -80,17 +77,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 +115,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 +160,64 @@ 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>
<Stack spacing={6}>
<Stack textAlign='center' alignItems='center' fontWeight='bold'>
<Stack spacing={2}>
<RawText color='blue.300' fontSize='xs' textTransform='uppercase'>
{translate('connectWalletPage.secondaryTitle')}
</RawText>
<Heading as='h1' fontSize='4xl'>
{translate('connectWalletPage.primaryTitle')}
</Heading>
<RawText color='text.subtle' fontSize='md' fontWeight='medium'>
{translate('connectWalletPage.primaryDescription')}
</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')}
</Heading>
<RawText fontSize='lg' color='text.subtle'>
{translate('connectWalletPage.welcomeBody')}
</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={snapInfoBgColor} p={8} borderRadius='lg' mt={4}>
<HStack spacing={2} justify='center' wrap='wrap' mb={4}>
{renderChains}
</HStack>
<RawText fontWeight='medium' fontSize='md'>
{translate('connectWalletPage.snapDescription')}
</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 +246,7 @@ export const ConnectWallet = () => {
zIndex={1}
width='full'
maxWidth='400px'
bgImage={NightSky}
bgImage={SplashSidebar}
backgroundSize='cover'
display={display}
>
Expand All @@ -292,29 +255,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