diff --git a/src/assets/nightsky.jpg b/src/assets/nightsky.jpg deleted file mode 100644 index 89d6ba53d24..00000000000 Binary files a/src/assets/nightsky.jpg and /dev/null differ diff --git a/src/assets/splash-sidebar.jpg b/src/assets/splash-sidebar.jpg new file mode 100644 index 00000000000..c45b1e21276 Binary files /dev/null and b/src/assets/splash-sidebar.jpg differ diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json index bb2daded744..2c632b8b4f1 100644 --- a/src/assets/translations/en/main.json +++ b/src/assets/translations/en/main.json @@ -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!", @@ -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", diff --git a/src/pages/ConnectWallet/ConnectWallet.tsx b/src/pages/ConnectWallet/ConnectWallet.tsx index f18d213bd66..e078f71924b 100644 --- a/src/pages/ConnectWallet/ConnectWallet.tsx +++ b/src/pages/ConnectWallet/ConnectWallet.tsx @@ -1,8 +1,7 @@ -import type { ResponsiveValue } from '@chakra-ui/react' import { + Box, Button, Center, - Circle, Divider, Flex, Heading, @@ -10,16 +9,15 @@ import { 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' @@ -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 = { base: 'center', lg: 'left' } const margin = { base: 0, lg: 'auto' } const spacing = { base: 6, lg: 8 } const display = { base: 'none', lg: 'flex' } @@ -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 @@ -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 }>() @@ -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], @@ -178,83 +160,64 @@ export const ConnectWallet = () => { maxWidth={maxWidth} width={width} > - {isMobile ? ( - - - - {translate('connectWalletPage.exploreThe')}{' '} - - {translate('connectWalletPage.defiUniverse')} - + + + + + {translate('connectWalletPage.secondaryTitle')} + + + {translate('connectWalletPage.primaryTitle')} + + + {translate('connectWalletPage.primaryDescription')} - - - - ) : isSnapEnabled ? ( - <> - - - - {translate('walletProvider.metaMaskSnap.secondaryTitle')} - - - {translate('walletProvider.metaMaskSnap.secondaryBody')} - - - {renderChains} - - - {translate('walletProvider.metaMaskSnap.andMore')} - - - - - - - - - - - - ) : ( - - - {translate('connectWalletPage.welcomeBack')} - - - {translate('connectWalletPage.welcomeBody')} - + + {isSnapEnabled && ( + <> + + + + + + + + {renderChains} + + + {translate('connectWalletPage.snapDescription')} + + + + + )} - )} - + {translate('connectWalletPage.dontHaveWallet')}