From 53f990750801892cd62bb6b71e2b574efe7f74da Mon Sep 17 00:00:00 2001 From: katspaugh Date: Wed, 25 Oct 2023 15:36:17 +0200 Subject: [PATCH] Feat: show sample dapps to connect (only once) --- public/images/common/nft-zapper.svg | 4 ++ .../common/Header/styles.module.css | 2 +- .../walletconnect/WcConnectionForm/index.tsx | 13 +++-- .../WcConnectionForm/styles.module.css | 4 -- .../WcLogoHeader/styles.module.css | 2 +- .../WcSessionList/WcNoSessions.tsx | 56 +++++++++++++++++++ .../walletconnect/WcSessionList/index.tsx | 25 +++------ 7 files changed, 77 insertions(+), 29 deletions(-) create mode 100644 public/images/common/nft-zapper.svg create mode 100644 src/components/walletconnect/WcSessionList/WcNoSessions.tsx diff --git a/public/images/common/nft-zapper.svg b/public/images/common/nft-zapper.svg new file mode 100644 index 0000000000..a136435801 --- /dev/null +++ b/public/images/common/nft-zapper.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/common/Header/styles.module.css b/src/components/common/Header/styles.module.css index 0b6080c937..2ec227f3fc 100644 --- a/src/components/common/Header/styles.module.css +++ b/src/components/common/Header/styles.module.css @@ -25,7 +25,7 @@ min-width: 18px; } -[data-theme="dark"] .element :global(.MuiBadge-standard) { +[data-theme='dark'] .element :global(.MuiBadge-standard) { background-color: var(--color-primary-main); } diff --git a/src/components/walletconnect/WcConnectionForm/index.tsx b/src/components/walletconnect/WcConnectionForm/index.tsx index 034c7a8704..d76d24845b 100644 --- a/src/components/walletconnect/WcConnectionForm/index.tsx +++ b/src/components/walletconnect/WcConnectionForm/index.tsx @@ -9,7 +9,7 @@ import WcSessionList from '../WcSessionList' import WcInput from '../WcInput' import WcLogoHeader from '../WcLogoHeader' import css from './styles.module.css' -import useSafeAddress from '@/hooks/useSafeAddress' +import useSafeInfo from '@/hooks/useSafeInfo' const WC_HINTS_KEY = 'wcHints' @@ -23,12 +23,13 @@ export const WcConnectionForm = ({ uri: string }): ReactElement => { const [showHints = true, setShowHints] = useLocalStorage(WC_HINTS_KEY) - const safeAddress = useSafeAddress() + const { safeLoaded } = useSafeInfo() const onToggle = useCallback(() => { setShowHints((prev) => !prev) }, [setShowHints]) + // Show the hints only once useEffect(() => { return () => setShowHints(false) }, [setShowHints]) @@ -52,19 +53,19 @@ export const WcConnectionForm = ({ - {safeAddress + {safeLoaded ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect` : `Please open one of your Safe Accounts to connect to via WalletConnect`} - {safeAddress ? ( + {safeLoaded ? ( ) : null} - + @@ -72,7 +73,7 @@ export const WcConnectionForm = ({ {showHints && ( <> - + diff --git a/src/components/walletconnect/WcConnectionForm/styles.module.css b/src/components/walletconnect/WcConnectionForm/styles.module.css index 7e0802b58e..4cab9aa460 100644 --- a/src/components/walletconnect/WcConnectionForm/styles.module.css +++ b/src/components/walletconnect/WcConnectionForm/styles.module.css @@ -15,7 +15,3 @@ top: var(--space-3); right: var(--space-3); } - -.divider { - margin: 0 calc(-1 * var(--space-4)); -} diff --git a/src/components/walletconnect/WcLogoHeader/styles.module.css b/src/components/walletconnect/WcLogoHeader/styles.module.css index 2850fe8f17..e80a45b1c5 100644 --- a/src/components/walletconnect/WcLogoHeader/styles.module.css +++ b/src/components/walletconnect/WcLogoHeader/styles.module.css @@ -1,6 +1,6 @@ .icon { color: #3a99fb; - width: 40px; + font-size: 50px; } .errorBadge { diff --git a/src/components/walletconnect/WcSessionList/WcNoSessions.tsx b/src/components/walletconnect/WcSessionList/WcNoSessions.tsx new file mode 100644 index 0000000000..c8bc96eae9 --- /dev/null +++ b/src/components/walletconnect/WcSessionList/WcNoSessions.tsx @@ -0,0 +1,56 @@ +import ExternalLink from '@/components/common/ExternalLink' +import useSafeInfo from '@/hooks/useSafeInfo' +import useLocalStorage from '@/services/local-storage/useLocalStorage' +import { Typography } from '@mui/material' +import { useCallback, useEffect } from 'react' + +const SAMPLE_DAPPS = [ + { name: 'Zerion', icon: '/images/common/nft-zerion.svg', url: 'https://app.zerion.io/connect-wallet' }, + { name: 'Zapper', icon: '/images/common/nft-zapper.svg', url: 'https://zapper.xyz/' }, + { name: 'OpenSea', icon: '/images/common/nft-opensea.svg', url: 'https://opensea.io/' }, +] + +const LS_KEY = 'native_wc_dapps' + +const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => { + // Only show the sample dApps list once + useEffect(() => { + return onUnload + }, [onUnload]) + + return ( + + {SAMPLE_DAPPS.map((item) => ( + + {item.name} + + {item.name} + + + ))} + + ) +} + +const WcNoSessions = () => { + const { safeLoaded } = useSafeInfo() + const [showDapps = true, setShowDapps] = useLocalStorage(LS_KEY) + + const onUnload = useCallback(() => { + setShowDapps(false) + }, [setShowDapps]) + + const sampleDapps = showDapps && safeLoaded && + + return ( + <> + + No dApps are connected yet.{sampleDapps ? ' Try one of these:' : ''} + + + {sampleDapps} + + ) +} + +export default WcNoSessions diff --git a/src/components/walletconnect/WcSessionList/index.tsx b/src/components/walletconnect/WcSessionList/index.tsx index 92cead820b..ab17a76c00 100644 --- a/src/components/walletconnect/WcSessionList/index.tsx +++ b/src/components/walletconnect/WcSessionList/index.tsx @@ -1,10 +1,9 @@ +import type { SessionTypes } from '@walletconnect/types' +import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText } from '@mui/material' import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard' import useSafeInfo from '@/hooks/useSafeInfo' import { getPeerName } from '@/services/walletconnect/utils' -import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography } from '@mui/material' -import type { SessionTypes } from '@walletconnect/types' -import type { ReactElement } from 'react' - +import WcNoSessions from './WcNoSessions' import css from './styles.module.css' type WcSesstionListProps = { @@ -12,13 +11,7 @@ type WcSesstionListProps = { onDisconnect: (session: SessionTypes.Struct) => void } -const WcSessionListItem = ({ - session, - onDisconnect, -}: { - session: SessionTypes.Struct - onDisconnect: () => void -}): ReactElement => { +const WcSessionListItem = ({ session, onDisconnect }: { session: SessionTypes.Struct; onDisconnect: () => void }) => { const { safeLoaded } = useSafeInfo() const name = getPeerName(session.peer) || 'Unknown dApp' @@ -29,7 +22,9 @@ const WcSessionListItem = ({ )} + +