From 2346aa6330a5652d220dfaa3759bd0f9ae520148 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Tue, 24 Sep 2024 18:01:36 +1000 Subject: [PATCH 1/5] feat: update wallet connection splash --- src/assets/translations/en/main.json | 8 +- src/pages/ConnectWallet/ConnectWallet.tsx | 147 ++++++++-------------- 2 files changed, 59 insertions(+), 96 deletions(-) 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..af0a5859840 100644 --- a/src/pages/ConnectWallet/ConnectWallet.tsx +++ b/src/pages/ConnectWallet/ConnectWallet.tsx @@ -1,5 +1,5 @@ -import type { ResponsiveValue } from '@chakra-ui/react' import { + Box, Button, Center, Circle, @@ -11,7 +11,6 @@ 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' @@ -48,9 +47,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' } @@ -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,62 @@ export const ConnectWallet = () => { maxWidth={maxWidth} width={width} > - {isMobile ? ( - - - - {translate('connectWalletPage.exploreThe')}{' '} - - {translate('connectWalletPage.defiUniverse')} - - - - - - ) : isSnapEnabled ? ( - <> - - - - {translate('walletProvider.metaMaskSnap.secondaryTitle')} - - - {translate('walletProvider.metaMaskSnap.secondaryBody')} - - - {renderChains} - - - {translate('walletProvider.metaMaskSnap.andMore')} - - - - - - - - - - - - - ) : ( - - - {translate('connectWalletPage.welcomeBack')} + + + + {translate('connectWalletPage.secondaryTitle')} + + + {translate('connectWalletPage.primaryTitle')} - - {translate('connectWalletPage.welcomeBody')} + + {translate('connectWalletPage.primaryDescription')} + + {isSnapEnabled && ( + <> + + + + + + + + {renderChains} + + + {translate('connectWalletPage.snapDescription')} + + + + + )} - )} - + {translate('connectWalletPage.dontHaveWallet')} From 09dc620fb5154c0de092a12416e1bcdcbf403e64 Mon Sep 17 00:00:00 2001 From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com> Date: Wed, 25 Sep 2024 09:43:03 +1000 Subject: [PATCH 4/5] chore: styling tweaks --- src/pages/ConnectWallet/ConnectWallet.tsx | 30 +++++++++++++---------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/pages/ConnectWallet/ConnectWallet.tsx b/src/pages/ConnectWallet/ConnectWallet.tsx index 93a1eafbbad..4ff92a1134e 100644 --- a/src/pages/ConnectWallet/ConnectWallet.tsx +++ b/src/pages/ConnectWallet/ConnectWallet.tsx @@ -9,6 +9,7 @@ import { Link, Stack, Tooltip, + useColorModeValue, } from '@chakra-ui/react' import { KnownChainIds } from '@shapeshiftoss/types' import { knownChainIds } from 'constants/chains' @@ -62,6 +63,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 @@ -158,16 +160,18 @@ export const ConnectWallet = () => { width={width} > - - - {translate('connectWalletPage.secondaryTitle')} - - - {translate('connectWalletPage.primaryTitle')} - - - {translate('connectWalletPage.primaryDescription')} - + + + + {translate('connectWalletPage.secondaryTitle')} + + + {translate('connectWalletPage.primaryTitle')} + + + {translate('connectWalletPage.primaryDescription')} + +