Merge pull request #1356 from blockscout/marketplace-improvements

Marketplace improvements

icons/profile.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.593A8.407 8.407 0 0 0 3.332 15.12c1.465-2.162 3.89-3.556 6.668-3.556 2.784 0 5.2 1.461 6.66 3.567A8.407 8.407 0 0 0 10 1.593ZM0 10C0 4.477 4.477 0 10 0s10 4.477 10 10-4.477 10-10 10S0 15.523 0 10Zm4.476 6.287c1.443 1.295 3.412 2.039 5.524 2.039a8.529 8.529 0 0 0 5.51-2.045c-1.17-1.85-3.2-3.123-5.51-3.123-2.333 0-4.363 1.225-5.524 3.129Zm3.388-8.975a2.136 2.136 0 1 1 4.272 0 2.136 2.136 0 0 1-4.272 0ZM10 3.584a3.729 3.729 0 1 0 0 7.457 3.729 3.729 0 0 0 0-7.457Z" fill="currentColor"/>
+</svg>

lib/mixpanel/utils.ts

@@ -61,6 +61,7 @@ Type extends EventTypes.VERIFY_TOKEN ? {
   'Action': 'Form opened' | 'Submit';
 } :
 Type extends EventTypes.WALLET_CONNECT ? {
+  'Source': 'Header' | 'Smart contracts';
   'Status': 'Started' | 'Connected';
 } :
 Type extends EventTypes.CONTRACT_INTERACTION ? {

package.json

@@ -60,6 +60,7 @@
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.1.1",
     "d3": "^7.6.1",
+    "dappscout-iframe": "^0.1.0",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
     "framer-motion": "^6.5.1",

pages/_app.tsx

@@ -17,6 +17,7 @@ import theme from 'theme';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import Layout from 'ui/shared/layout/Layout';
+import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 import 'lib/setLocale';
 
@@ -52,6 +53,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         { ...ERROR_SCREEN_STYLES }
         onError={ handleError }
       >
+        <Web3ModalProvider>
           <AppContextProvider pageProps={ pageProps }>
             <QueryClientProvider client={ queryClient }>
               <ScrollDirectionProvider>
@@ -63,6 +65,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               <GoogleAnalytics/>
             </QueryClientProvider>
           </AppContextProvider>
+        </Web3ModalProvider>
       </AppErrorBoundary>
     </ChakraProvider>
   );

pages/apps/[id].tsx

@@ -6,6 +6,8 @@ import type { NextPageWithLayout } from 'nextjs/types';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
+import LayoutApp from 'ui/shared/layout/LayoutApp';
+
 const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
@@ -16,6 +18,14 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   );
 };
 
+Page.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <LayoutApp>
+      { page }
+    </LayoutApp>
+  );
+};
+
 export default Page;
 
 export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';

pages/apps/index.tsx

@@ -12,7 +12,7 @@ const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/apps">
       <>
-        <PageTitle title="Marketplace"/>
+        <PageTitle title="DAppscout"/>
         <Marketplace/>
       </>
     </PageNextJs>

ui/address/contract/ContractConnectWallet.tsx

@@ -17,11 +17,11 @@ const ContractConnectWallet = () => {
     setIsModalOpening(true);
     await open();
     setIsModalOpening(false);
-    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Started' });
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Smart contracts', Status: 'Started' });
   }, [ open ]);
 
   const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
-    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Connected' });
+    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Smart contracts', Status: 'Connected' });
   }, []);
 
   const handleDisconnect = React.useCallback(() => {

ui/marketplace/MarketplaceAppCard.tsx

@@ -15,6 +15,7 @@ interface Props extends MarketplaceAppPreview {
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
   isLoading: boolean;
+  showDisclaimer: (id: string) => void;
 }
 
 const MarketplaceAppCard = ({
@@ -30,9 +31,18 @@ const MarketplaceAppCard = ({
   isFavorite,
   onFavoriteClick,
   isLoading,
+  showDisclaimer,
 }: Props) => {
   const categoriesLabel = categories.join(', ');
 
+  const handleClick = useCallback((event: MouseEvent) => {
+    const isShown = window.localStorage.getItem('marketplace-disclaimer-shown');
+    if (!isShown) {
+      event.preventDefault();
+      showDisclaimer(id);
+    }
+  }, [ showDisclaimer, id ]);
+
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
     onInfoClick(id);
@@ -100,6 +110,7 @@ const MarketplaceAppCard = ({
             url={ url }
             external={ external }
             title={ title }
+            onClick={ handleClick }
           />
         </Skeleton>
 

ui/marketplace/MarketplaceAppCardLink.tsx

 import { LinkOverlay } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
+import type { MouseEvent } from 'react';
 
 type Props = {
   id: string;
   url: string;
   external?: boolean;
   title: string;
+  onClick?: (event: MouseEvent) => void;
 }
 
-const MarketplaceAppCardLink = ({ url, external, id, title }: Props) => {
+const MarketplaceAppCardLink = ({ url, external, id, title, onClick }: Props) => {
   return external ? (
     <LinkOverlay href={ url } isExternal={ true }>
       { title }
     </LinkOverlay>
   ) : (
     <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
-      <LinkOverlay>
+      <LinkOverlay onClick={ onClick }>
         { title }
       </LinkOverlay>
     </NextLink>

ui/marketplace/MarketplaceDisclaimerModal.tsx

+import { Heading, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, Button, useColorModeValue } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  appId: string;
+}
+
+const MarketplaceDisclaimerModal = ({ isOpen, onClose, appId }: Props) => {
+
+  const isMobile = useIsMobile();
+
+  const handleContinueClick = React.useCallback(() => {
+    window.localStorage.setItem('marketplace-disclaimer-shown', 'true');
+  }, [ ]);
+
+  return (
+    <Modal
+      isOpen={ isOpen }
+      onClose={ onClose }
+      size={ isMobile ? 'full' : 'md' }
+      isCentered
+    >
+      <ModalOverlay/>
+
+      <ModalContent>
+        <ModalHeader>
+          <Heading
+            as="h2"
+            fontSize="2xl"
+            fontWeight="medium"
+            lineHeight={ 1 }
+            color={ useColorModeValue('blackAlpha.800', 'whiteAlpha.800') }
+          >
+            Disclaimer
+          </Heading>
+        </ModalHeader>
+
+        <ModalBody>
+          <Text color={ useColorModeValue('gray.800', 'whiteAlpha.800') }>
+            You are now accessing a third-party app. Blockscout does not own, control, maintain, or audit 3rd party apps,{ ' ' }
+            and is not liable for any losses associated with these interactions. Please do so at your own risk.
+            <br/><br/>
+            By clicking continue, you agree that you understand the risks and have read the Disclaimer.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+        >
+          <NextLink href={{ pathname: '/apps/[id]', query: { id: appId } }} passHref legacyBehavior>
+            <Button
+              variant="solid"
+              colorScheme="blue"
+              mr={ 6 }
+              py="10px"
+              onClick={ handleContinueClick }
+            >
+              Continue to app
+            </Button>
+          </NextLink>
+          <Button
+            variant="outline"
+            colorScheme="blue"
+            onClick={ onClose }
+          >
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default MarketplaceDisclaimerModal;

ui/marketplace/MarketplaceList.tsx

@@ -14,9 +14,10 @@ type Props = {
   favoriteApps: Array<string>;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
   isLoading: boolean;
+  showDisclaimer: (id: string) => void;
 }
 
-const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading }: Props) => {
+const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading, showDisclaimer }: Props) => {
   return apps.length > 0 ? (
     <Grid
       templateColumns={{
@@ -41,6 +42,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo
           isFavorite={ favoriteApps.includes(app.id) }
           onFavoriteClick={ onFavoriteClick }
           isLoading={ isLoading }
+          showDisclaimer={ showDisclaimer }
         />
       )) }
     </Grid>

ui/marketplace/useMarketplace.tsx

@@ -29,6 +29,8 @@ export default function useMarketplace() {
   const [ selectedCategoryId, setSelectedCategoryId ] = React.useState<string>(MarketplaceCategory.ALL);
   const [ filterQuery, setFilterQuery ] = React.useState(defaultFilterQuery);
   const [ favoriteApps, setFavoriteApps ] = React.useState<Array<string>>([]);
+  const [ isAppInfoModalOpen, setIsAppInfoModalOpen ] = React.useState<boolean>(false);
+  const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
 
   const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean) => {
     const favoriteApps = getFavoriteApps();
@@ -46,10 +48,20 @@ export default function useMarketplace() {
 
   const showAppInfo = React.useCallback((id: string) => {
     setSelectedAppId(id);
+    setIsAppInfoModalOpen(true);
+  }, []);
+
+  const showDisclaimer = React.useCallback((id: string) => {
+    setSelectedAppId(id);
+    setIsDisclaimerModalOpen(true);
   }, []);
 
   const debouncedFilterQuery = useDebounce(filterQuery, 500);
-  const clearSelectedAppId = React.useCallback(() => setSelectedAppId(null), []);
+  const clearSelectedAppId = React.useCallback(() => {
+    setSelectedAppId(null);
+    setIsAppInfoModalOpen(false);
+    setIsDisclaimerModalOpen(false);
+  }, []);
 
   const handleCategoryChange = React.useCallback((newCategory: string) => {
     setSelectedCategoryId(newCategory);
@@ -104,6 +116,9 @@ export default function useMarketplace() {
     clearSelectedAppId,
     favoriteApps,
     onFavoriteClick: handleFavoriteClick,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   }), [
     selectedCategoryId,
     categories,
@@ -118,5 +133,8 @@ export default function useMarketplace() {
     isPlaceholderData,
     showAppInfo,
     debouncedFilterQuery,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   ]);
 }

ui/marketplace/useMarketplaceWallet.tsx

+import type { TypedData } from 'abitype';
+import { useCallback } from 'react';
+import type { Account, SignTypedDataParameters } from 'viem';
+import { useAccount, useSendTransaction, useSwitchNetwork, useNetwork, useSignMessage, useSignTypedData } from 'wagmi';
+
+import config from 'configs/app';
+
+type SendTransactionArgs = {
+  chainId?: number;
+  mode?: 'prepared';
+  to: string;
+};
+
+export type SignTypedDataArgs<
+  TTypedData extends
+  | TypedData
+  | {
+    [key: string]: unknown;
+  } = TypedData,
+  TPrimaryType extends string = string,
+> = SignTypedDataParameters<TTypedData, TPrimaryType, Account>;
+
+export default function useMarketplaceWallet() {
+  const { address } = useAccount();
+  const { chain } = useNetwork();
+  const { sendTransactionAsync } = useSendTransaction();
+  const { signMessageAsync } = useSignMessage();
+  const { signTypedDataAsync } = useSignTypedData();
+  const { switchNetworkAsync } = useSwitchNetwork({ chainId: Number(config.chain.id) });
+
+  const switchNetwork = useCallback(async() => {
+    if (Number(config.chain.id) !== chain?.id) {
+      await switchNetworkAsync?.();
+    }
+  }, [ chain, switchNetworkAsync ]);
+
+  const sendTransaction = useCallback(async(transaction: SendTransactionArgs) => {
+    await switchNetwork();
+    const tx = await sendTransactionAsync(transaction);
+    return tx.hash;
+  }, [ sendTransactionAsync, switchNetwork ]);
+
+  const signMessage = useCallback(async(message: string) => {
+    await switchNetwork();
+    const signature = await signMessageAsync({ message });
+    return signature;
+  }, [ signMessageAsync, switchNetwork ]);
+
+  const signTypedData = useCallback(async(typedData: SignTypedDataArgs) => {
+    await switchNetwork();
+    if (typedData.domain) {
+      typedData.domain.chainId = Number(typedData.domain.chainId);
+    }
+    const signature = await signTypedDataAsync(typedData);
+    return signature;
+  }, [ signTypedDataAsync, switchNetwork ]);
+
+  return {
+    address,
+    sendTransaction,
+    signMessage,
+    signTypedData,
+  };
+}

ui/pages/Home.tsx

@@ -10,6 +10,7 @@ import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 const Home = () => {
   return (
@@ -22,7 +23,7 @@ const Home = () => {
         minW={{ base: 'unset', lg: '900px' }}
         data-label="hero plate"
       >
-        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between">
+        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between" alignItems="center">
           <Heading
             as="h1"
             size={{ base: 'md', lg: 'xl' }}
@@ -32,8 +33,9 @@ const Home = () => {
           >
             { config.chain.name } explorer
           </Heading>
-          <Box display={{ base: 'none', lg: 'block' }}>
-            { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+          <Box display={{ base: 'none', lg: 'flex' }}>
+            { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
+            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
           </Box>
         </Flex>
         <SearchBar isHomepage/>

ui/pages/Marketplace.tsx

@@ -5,6 +5,7 @@ import config from 'configs/app';
 import PlusIcon from 'icons/plus.svg';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
+import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import FilterInput from 'ui/shared/filters/FilterInput';
 
@@ -27,6 +28,9 @@ const Marketplace = () => {
     clearSelectedAppId,
     favoriteApps,
     onFavoriteClick,
+    isAppInfoModalOpen,
+    isDisclaimerModalOpen,
+    showDisclaimer,
   } = useMarketplace();
 
   if (isError) {
@@ -68,9 +72,10 @@ const Marketplace = () => {
         favoriteApps={ favoriteApps }
         onFavoriteClick={ onFavoriteClick }
         isLoading={ isPlaceholderData }
+        showDisclaimer={ showDisclaimer }
       />
 
-      { selectedApp && (
+      { (selectedApp && isAppInfoModalOpen) && (
         <MarketplaceAppModal
           onClose={ clearSelectedAppId }
           isFavorite={ favoriteApps.includes(selectedApp.id) }
@@ -79,6 +84,14 @@ const Marketplace = () => {
         />
       ) }
 
+      { (selectedApp && isDisclaimerModalOpen) && (
+        <MarketplaceDisclaimerModal
+          isOpen={ isDisclaimerModalOpen }
+          onClose={ clearSelectedAppId }
+          appId={ selectedApp.id }
+        />
+      ) }
+
       <Skeleton
         isLoaded={ !isPlaceholderData }
         marginTop={{ base: 8, sm: 16 }}

ui/pages/MarketplaceApp.tsx

 import { Box, Center, useColorMode } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
+import { DappscoutIframeProvider, useDappscoutIframe } from 'dappscout-iframe';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
@@ -9,12 +10,12 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import { useAppContext } from 'lib/contexts/app';
 import useApiFetch from 'lib/hooks/useFetch';
 import * as metadata from 'lib/metadata';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
-import PageTitle from 'ui/shared/Page/PageTitle';
+
+import useMarketplaceWallet from '../marketplace/useMarketplaceWallet';
 
 const feature = config.features.marketplace;
 const configUrl = feature.isEnabled ? feature.configUrl : '';
@@ -26,35 +27,23 @@ const IFRAME_SANDBOX_ATTRIBUTE = 'allow-forms allow-orientation-lock ' +
 
 const IFRAME_ALLOW_ATTRIBUTE = 'clipboard-read; clipboard-write;';
 
-const MarketplaceApp = () => {
-  const ref = useRef<HTMLIFrameElement>(null);
-
-  const apiFetch = useApiFetch();
-  const appProps = useAppContext();
-  const router = useRouter();
-  const id = getQueryParamString(router.query.id);
-
-  const { isPending, isError, error, data } = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
-    queryKey: [ 'marketplace-apps', id ],
-    queryFn: async() => {
-      const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(configUrl, undefined, { resource: 'marketplace-apps' });
-      if (!Array.isArray(result)) {
-        throw result;
-      }
+type Props = {
+  address: string | undefined;
+  data: MarketplaceAppOverview | undefined;
+  isPending: boolean;
+};
 
-      const item = result.find((app: MarketplaceAppOverview) => app.id === id);
-      if (!item) {
-        throw { status: 404 };
-      }
-
-      return item;
-    },
-    enabled: feature.isEnabled,
-  });
+const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
+  const { iframeRef, isReady } = useDappscoutIframe();
 
+  const [ iframeKey, setIframeKey ] = useState(0);
   const [ isFrameLoading, setIsFrameLoading ] = useState(isPending);
   const { colorMode } = useColorMode();
 
+  useEffect(() => {
+    setIframeKey((key) => key + 1);
+  }, [ address ]);
+
   const handleIframeLoad = useCallback(() => {
     setIsFrameLoading(false);
   }, []);
@@ -72,51 +61,24 @@ const MarketplaceApp = () => {
         blockscoutNetworkRpc: config.chain.rpcUrl,
       };
 
-      ref?.current?.contentWindow?.postMessage(message, data.url);
+      iframeRef?.current?.contentWindow?.postMessage(message, data.url);
     }
-  }, [ isFrameLoading, data, colorMode, ref ]);
-
-  useEffect(() => {
-    if (data) {
-      metadata.update(
-        { pathname: '/apps/[id]', query: { id: data.id } },
-        { app_name: data.title },
-      );
-    }
-  }, [ data ]);
-
-  if (isError) {
-    throw new Error('Unable to load app', { cause: error });
-  }
-
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer.includes('/apps');
-
-    if (!hasGoBackLink) {
-      return;
-    }
-
-    return {
-      label: 'Back to marketplace',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer ]);
+  }, [ isFrameLoading, data, colorMode, iframeRef ]);
 
   return (
-    <>
-      { !isPending && <PageTitle title={ data.title } backLink={ backLink }/> }
     <Center
       h="100vh"
-        mx={{ base: -4, lg: -12 }}
+      mx={{ base: -4, lg: -6 }}
     >
       { (isFrameLoading) && (
         <ContentLoader/>
       ) }
 
-        { data && (
+      { (data && isReady) && (
         <Box
+          key={ iframeKey }
           allow={ IFRAME_ALLOW_ATTRIBUTE }
-            ref={ ref }
+          ref={ iframeRef }
           sandbox={ IFRAME_SANDBOX_ATTRIBUTE }
           as="iframe"
           h="100%"
@@ -128,7 +90,57 @@ const MarketplaceApp = () => {
         />
       ) }
     </Center>
-    </>
+  );
+};
+
+const MarketplaceApp = () => {
+  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
+
+  const apiFetch = useApiFetch();
+  const router = useRouter();
+  const id = getQueryParamString(router.query.id);
+
+  const { isPending, isError, error, data } = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
+    queryKey: [ 'marketplace-apps', id ],
+    queryFn: async() => {
+      const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(configUrl, undefined, { resource: 'marketplace-apps' });
+      if (!Array.isArray(result)) {
+        throw result;
+      }
+      const item = result.find((app: MarketplaceAppOverview) => app.id === id);
+      if (!item) {
+        throw { status: 404 };
+      }
+
+      return item;
+    },
+    enabled: feature.isEnabled,
+  });
+
+  useEffect(() => {
+    if (data) {
+      metadata.update(
+        { pathname: '/apps/[id]', query: { id: data.id } },
+        { app_name: data.title },
+      );
+    }
+  }, [ data ]);
+
+  if (isError) {
+    throw new Error('Unable to load app', { cause: error });
+  }
+
+  return (
+    <DappscoutIframeProvider
+      address={ address }
+      appUrl={ data?.url }
+      rpcUrl={ config.chain.rpcUrl }
+      sendTransaction={ sendTransaction }
+      signMessage={ signMessage }
+      signTypedData={ signTypedData }
+    >
+      <MarketplaceAppContent address={ address } data={ data } isPending={ isPending }/>
+    </DappscoutIframeProvider>
   );
 };
 

ui/shared/UserAvatar.tsx

-import { SkeletonCircle, Image } from '@chakra-ui/react';
+import { SkeletonCircle, Image, Icon } from '@chakra-ui/react';
 import React from 'react';
 
+import profileIcon from 'icons/profile.svg';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface Props {
   size: number;
@@ -34,7 +34,7 @@ const UserAvatar = ({ size }: Props) => {
       boxSize={ `${ size }px` }
       borderRadius="full"
       overflow="hidden"
-      fallback={ isImageLoadError || !data?.avatar ? <IdenticonGithub size={ size } seed={ data?.email || 'randomness' } flexShrink={ 0 }/> : undefined }
+      fallback={ isImageLoadError || !data?.avatar ? <Icon as={ profileIcon } boxSize={ 5 }/> : undefined }
       onError={ handleImageLoadError }
     />
   );

ui/shared/Web3ModalProvider.tsx

@@ -75,7 +75,7 @@ const Web3ModalProvider = ({ children, fallback }: Props) => {
   const web3ModalTheme = useColorModeValue('light', 'dark');
 
   if (!wagmiConfig || !ethereumClient || !feature.isEnabled) {
-    return typeof fallback === 'function' ? fallback() : (fallback || null);
+    return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
   }
 
   return (

ui/shared/layout/LayoutApp.tsx

+import React from 'react';
+
+import type { Props } from './types';
+
+import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
+
+import * as Layout from './components';
+
+const LayoutDefault = ({ children }: Props) => {
+  return (
+    <Layout.Container>
+      <HeaderMobile/>
+      <Layout.MainArea>
+        <Layout.MainColumn
+          paddingTop={{ base: '138px', lg: 6 }}
+          paddingX={{ base: 4, lg: 6 }}
+        >
+          <HeaderAlert/>
+          <HeaderDesktop isMarketplaceAppPage/>
+          <AppErrorBoundary>
+            <Layout.Content pt={{ base: 0, lg: 6 }}>
+              { children }
+            </Layout.Content>
+          </AppErrorBoundary>
+        </Layout.MainColumn>
+      </Layout.MainArea>
+      <Layout.Footer/>
+    </Layout.Container>
+  );
+};
+
+export default LayoutDefault;

ui/shared/layout/components/Content.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
+  className?: string;
   children: React.ReactNode;
 }
 
-const Content = ({ children }: Props) => {
+const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main">
+    <Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }>
       { children }
     </Box>
   );
 };
 
-export default React.memo(Content);
+export default React.memo(chakra(Content));

ui/snippets/header/Burger.tsx

@@ -10,7 +10,11 @@ import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
 import NetworkMenuContentMobile from 'ui/snippets/networkMenu/NetworkMenuContentMobile';
 import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';
 
-const Burger = () => {
+interface Props {
+  isMarketplaceAppPage?: boolean;
+}
+
+const Burger = ({ isMarketplaceAppPage }: Props) => {
   const iconColor = useColorModeValue('gray.600', 'white');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const networkMenu = useNetworkMenu();
@@ -26,7 +30,7 @@ const Burger = () => {
 
   return (
     <>
-      <Box padding={ 2 } onClick={ onOpen }>
+      <Box padding={ 2 } onClick={ onOpen } cursor="pointer">
         <Icon
           as={ burgerIcon }
           boxSize={ 6 }
@@ -57,7 +61,7 @@ const Burger = () => {
             </Flex>
             { networkMenu.isOpen ?
               <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> :
-              <NavigationMobile onNavLinkClick={ onClose }/>
+              <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
             }
           </DrawerBody>
         </DrawerContent>

ui/snippets/header/HeaderDesktop.tsx

@@ -2,14 +2,19 @@ import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+import Burger from './Burger';
 
 type Props = {
   renderSearchBar?: () => React.ReactNode;
+  isMarketplaceAppPage?: boolean;
 }
 
-const HeaderDesktop = ({ renderSearchBar }: Props) => {
+const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
 
   const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
 
@@ -22,10 +27,19 @@ const HeaderDesktop = ({ renderSearchBar }: Props) => {
       justifyContent="center"
       gap={ 12 }
     >
+      { isMarketplaceAppPage && (
+        <Box display="flex" alignItems="center" gap={ 3 }>
+          <Burger isMarketplaceAppPage/>
+          <NetworkLogo isCollapsed/>
+        </Box>
+      ) }
       <Box width="100%">
         { searchBar }
       </Box>
+      <Box display="flex">
         { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
+      </Box>
     </HStack>
   );
 };

ui/snippets/header/HeaderMobile.tsx

@@ -7,6 +7,7 @@ import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
@@ -47,7 +48,10 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
       >
         <Burger/>
         <NetworkLogo/>
+        <Flex columnGap={ 2 }>
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
+          { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+        </Flex>
       </Flex>
       { !isHomePage && searchBar }
     </Box>

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -17,10 +17,11 @@ import useNavLinkStyleProps from './useNavLinkStyleProps';
 type Props = {
   item: NavGroupItem;
   onClick: () => void;
+  isExpanded?: boolean;
 }
 
-const NavLinkGroup = ({ item, onClick }: Props) => {
-  const styleProps = useNavLinkStyleProps({ isActive: item.isActive });
+const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
+  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
 
   return (
     <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>

ui/snippets/navigation/NavigationMobile.tsx

@@ -11,9 +11,10 @@ import NavLinkGroupMobile from './NavLinkGroupMobile';
 
 interface Props {
   onNavLinkClick?: () => void;
+  isMarketplaceAppPage?: boolean;
 }
 
-const NavigationMobile = ({ onNavLinkClick }: Props) => {
+const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
   const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
@@ -38,6 +39,8 @@ const NavigationMobile = ({ onNavLinkClick }: Props) => {
 
   const openedItem = mainNavItems[openedGroupIndex];
 
+  const isCollapsed = isMarketplaceAppPage ? false : undefined;
+
   return (
     <Flex position="relative" flexDirection="column" flexGrow={ 1 }>
       <Box
@@ -61,9 +64,9 @@ const NavigationMobile = ({ onNavLinkClick }: Props) => {
           >
             { mainNavItems.map((item, index) => {
               if (isGroupItem(item)) {
-                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) }/>;
+                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isMarketplaceAppPage }/>;
               } else {
-                return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick }/>;
+                return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>;
               }
             }) }
           </VStack>
@@ -77,7 +80,7 @@ const NavigationMobile = ({ onNavLinkClick }: Props) => {
             borderColor="divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
-              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick }/>) }
+              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
             </VStack>
           </Box>
         ) }
@@ -113,10 +116,10 @@ const NavigationMobile = ({ onNavLinkClick }: Props) => {
                     borderColor: 'divider',
                   }}
                 >
-                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick }/>) }
+                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
                 </Box>
               ) :
-                <NavLink key={ item.text } item={ item } mb={ 1 } onClick={ onNavLinkClick }/>,
+                <NavLink key={ item.text } item={ item } mb={ 1 } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>,
             ) }
           </Box>
         </Box>

ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx

@@ -23,7 +23,7 @@ test('no auth', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await component.locator('.identicon').click();
+  await component.locator('a').click();
   expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
 });
 

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

-import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@chakra-ui/react';
+import type { IconButtonProps } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -8,9 +8,16 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
-const ProfileMenuDesktop = () => {
+import useMenuButtonColors from '../useMenuButtonColors';
+
+type Props = {
+  isHomePage?: boolean;
+};
+
+const ProfileMenuDesktop = ({ isHomePage }: Props) => {
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   React.useEffect(() => {
@@ -27,7 +34,7 @@ const ProfileMenuDesktop = () => {
     );
   }, []);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
+  const iconButtonProps: Partial<IconButtonProps> = (() => {
     if (hasMenu || !loginUrl) {
       return {};
     }
@@ -39,19 +46,53 @@ const ProfileMenuDesktop = () => {
     };
   })();
 
+  const variant = React.useMemo(() => {
+    if (hasMenu) {
+      return 'subtle';
+    }
+    return isHomePage ? 'solid' : 'outline';
+  }, [ hasMenu, isHomePage ]);
+
+  let iconButtonStyles: Partial<IconButtonProps> = {};
+  if (hasMenu) {
+    iconButtonStyles = {
+      bg: isHomePage ? 'blue.50' : themedBackground,
+    };
+  } else if (isHomePage) {
+    iconButtonStyles = {
+      color: 'white',
+    };
+  } else {
+    iconButtonStyles = {
+      borderColor: themedBorderColor,
+      color: themedColor,
+    };
+  }
+
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
+      <Tooltip
+        label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
+        textAlign="center"
+        padding={ 2 }
+        isDisabled={ hasMenu }
+        openDelay={ 300 }
+      >
+        <Box>
           <PopoverTrigger>
-        <Button
-          variant="unstyled"
-          display="block"
-          boxSize="50px"
+            <IconButton
+              aria-label="profile menu"
+              icon={ <UserAvatar size={ 20 }/> }
+              variant={ variant }
+              colorScheme="blue"
+              boxSize="40px"
               flexShrink={ 0 }
-          { ...buttonProps }
-        >
-          <UserAvatar size={ 50 }/>
-        </Button>
+              { ...iconButtonProps }
+              { ...iconButtonStyles }
+            />
           </PopoverTrigger>
+        </Box>
+      </Tooltip>
       { hasMenu && (
         <PopoverContent w="212px">
           <PopoverBody padding="24px 16px 16px 16px">

ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx

@@ -23,7 +23,7 @@ test('no auth', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await component.locator('.identicon').click();
+  await component.locator('a').click();
   expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
 });
 

ui/snippets/profileMenu/ProfileMenuMobile.tsx

-import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button } from '@chakra-ui/react';
-import type { ButtonProps } from '@chakra-ui/react';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
+import type { IconButtonProps } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -8,11 +8,13 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
+import useMenuButtonColors from '../useMenuButtonColors';
+
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   const handleSignInClick = React.useCallback(() => {
@@ -29,7 +31,7 @@ const ProfileMenuMobile = () => {
     }
   }, [ data, error?.status, isPending ]);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
+  const iconButtonProps: Partial<IconButtonProps> = (() => {
     if (hasMenu || !loginUrl) {
       return {};
     }
@@ -43,17 +45,19 @@ const ProfileMenuMobile = () => {
 
   return (
     <>
-      <Box padding={ 2 } onClick={ hasMenu ? onOpen : undefined }>
-        <Button
-          variant="unstyled"
-          display="block"
-          boxSize="24px"
+      <IconButton
+        aria-label="profile menu"
+        icon={ <UserAvatar size={ 20 }/> }
+        variant={ data?.avatar ? 'subtle' : 'outline' }
+        colorScheme="gray"
+        boxSize="40px"
         flexShrink={ 0 }
-          { ...buttonProps }
-        >
-          <UserAvatar size={ 24 }/>
-        </Button>
-      </Box>
+        bg={ data?.avatar ? themedBackground : undefined }
+        color={ themedColor }
+        borderColor={ !data?.avatar ? themedBorderColor : undefined }
+        onClick={ hasMenu ? onOpen : undefined }
+        { ...iconButtonProps }
+      />
       { hasMenu && (
         <Drawer
           isOpen={ isOpen }

ui/snippets/useMenuButtonColors.tsx

+import { useColorModeValue } from '@chakra-ui/react';
+
+export default function useMenuColors() {
+  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
+  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
+
+  return { themedBackground, themedBorderColor, themedColor };
+}

ui/snippets/walletMenu/WalletMenuContent.tsx

+import { Box, Button, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = {
+  address?: string;
+  disconnect?: () => void;
+};
+
+const WalletMenuContent = ({ address, disconnect }: Props) => (
+  <Box>
+    <Text
+      fontSize="sm"
+      fontWeight={ 600 }
+      mb={ 1 }
+      { ...getDefaultTransitionProps() }
+    >
+      My wallet
+    </Text>
+    <Text
+      fontSize="sm"
+      mb={ 5 }
+      fontWeight={ 400 }
+      color="text_secondary"
+      { ...getDefaultTransitionProps() }
+    >
+      Your wallet is used to interact with apps and contracts in the explorer.
+    </Text>
+    <AddressEntity
+      address={{ hash: address }}
+      noTooltip
+      truncation="dynamic"
+      fontSize="sm"
+      fontWeight={ 700 }
+      color="text"
+      mb={ 6 }
+    />
+    <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
+      Disconnect
+    </Button>
+  </Box>
+);
+
+export default WalletMenuContent;

ui/snippets/walletMenu/WalletMenuDesktop.tsx

+import type { ButtonProps } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import useWallet from 'ui/snippets/walletMenu/useWallet';
+import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
+
+import useMenuButtonColors from '../useMenuButtonColors';
+import WalletTooltip from './WalletTooltip';
+
+type Props = {
+  isHomePage?: boolean;
+};
+
+const WalletMenuDesktop = ({ isHomePage }: Props) => {
+  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
+  const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
+
+  const variant = React.useMemo(() => {
+    if (isWalletConnected) {
+      return 'subtle';
+    }
+    return isHomePage ? 'solid' : 'outline';
+  }, [ isWalletConnected, isHomePage ]);
+
+  let buttonStyles: Partial<ButtonProps> = {};
+  if (isWalletConnected) {
+    buttonStyles = {
+      bg: isHomePage ? 'blue.50' : themedBackground,
+      color: isHomePage ? 'blackAlpha.800' : themedColor,
+      _hover: {
+        color: isHomePage ? 'blackAlpha.800' : themedColor,
+      },
+    };
+  } else if (isHomePage) {
+    buttonStyles = {
+      color: 'white',
+    };
+  } else {
+    buttonStyles = {
+      borderColor: themedBorderColor,
+      color: themedColor,
+    };
+  }
+
+  return (
+    <Popover
+      openDelay={ 300 }
+      placement="bottom-end"
+      gutter={ 10 }
+      isLazy
+      isOpen={ isPopoverOpen }
+      onClose={ setIsPopoverOpen.off }
+    >
+      <WalletTooltip isDisabled={ isWalletConnected }>
+        <Box ml={ 2 }>
+          <PopoverTrigger>
+            <Button
+              variant={ variant }
+              colorScheme="blue"
+              flexShrink={ 0 }
+              isLoading={ isModalOpening || isModalOpen }
+              loadingText="Connect wallet"
+              onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
+              fontSize="sm"
+              { ...buttonStyles }
+            >
+              { isWalletConnected ? (
+                <>
+                  <Box mr={ 2 }>
+                    <AddressIdenticon size={ 20 } hash={ address }/>
+                  </Box>
+                  <HashStringShorten hash={ address } isTooltipDisabled/>
+                </>
+              ) : 'Connect wallet' }
+            </Button>
+          </PopoverTrigger>
+        </Box>
+      </WalletTooltip>
+      { isWalletConnected && (
+        <PopoverContent w="235px">
+          <PopoverBody padding="24px 16px 16px 16px">
+            <WalletMenuContent address={ address } disconnect={ disconnect }/>
+          </PopoverBody>
+        </PopoverContent>
+      ) }
+    </Popover>
+  );
+};
+
+export default WalletMenuDesktop;

ui/snippets/walletMenu/WalletMenuMobile.tsx

+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import walletIcon from 'icons/wallet.svg';
+import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import useWallet from 'ui/snippets/walletMenu/useWallet';
+import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
+
+import useMenuButtonColors from '../useMenuButtonColors';
+import WalletTooltip from './WalletTooltip';
+
+const WalletMenuMobile = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
+
+  return (
+    <>
+      <WalletTooltip isDisabled={ isWalletConnected } isMobile>
+        <IconButton
+          aria-label="wallet menu"
+          icon={ isWalletConnected ?
+            <AddressIdenticon size={ 20 } hash={ address }/> :
+            <Icon as={ walletIcon } boxSize={ 6 }/>
+          }
+          variant={ isWalletConnected ? 'subtle' : 'outline' }
+          colorScheme="gray"
+          boxSize="40px"
+          flexShrink={ 0 }
+          bg={ isWalletConnected ? themedBackground : undefined }
+          color={ themedColor }
+          borderColor={ !isWalletConnected ? themedBorderColor : undefined }
+          onClick={ isWalletConnected ? onOpen : connect }
+          isLoading={ isModalOpening || isModalOpen }
+        />
+      </WalletTooltip>
+      { isWalletConnected && (
+        <Drawer
+          isOpen={ isOpen }
+          placement="right"
+          onClose={ onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="260px">
+            <DrawerBody p={ 6 }>
+              <WalletMenuContent address={ address } disconnect={ disconnect }/>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
+    </>
+  );
+};
+
+export default WalletMenuMobile;

ui/snippets/walletMenu/WalletTooltip.tsx

+import { Tooltip, useBoolean } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  isDisabled?: boolean;
+  isMobile?: boolean;
+};
+
+const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
+  const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
+
+  React.useEffect(() => {
+    const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
+    const wasShown = window.localStorage.getItem(key);
+    if (!wasShown) {
+      setIsTooltipShown.on();
+      window.localStorage.setItem(key, 'true');
+    }
+  }, [ setIsTooltipShown, isMobile ]);
+
+  return (
+    <Tooltip
+      label={ <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span> }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ isDisabled }
+      openDelay={ 300 }
+      isOpen={ isTooltipShown || (isMobile ? false : undefined) }
+      onClose={ setIsTooltipShown.off }
+      display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
+    >
+      { children }
+    </Tooltip>
+  );
+};
+
+export default WalletTooltip;

ui/snippets/walletMenu/useWallet.tsx

+import { useWeb3Modal } from '@web3modal/react';
+import React from 'react';
+import { useAccount, useDisconnect } from 'wagmi';
+
+import * as mixpanel from 'lib/mixpanel/index';
+
+export default function useWallet() {
+  const { open, isOpen } = useWeb3Modal();
+  const { disconnect } = useDisconnect();
+  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
+  const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsClientLoaded(true);
+  }, []);
+
+  const handleConnect = React.useCallback(async() => {
+    setIsModalOpening(true);
+    await open();
+    setIsModalOpening(false);
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Header', Status: 'Started' });
+  }, [ open ]);
+
+  const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
+    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: 'Header', Status: 'Connected' });
+  }, []);
+
+  const handleDisconnect = React.useCallback(() => {
+    disconnect();
+  }, [ disconnect ]);
+
+  const { address, isDisconnected } = useAccount({ onConnect: handleAccountConnected });
+
+  const isWalletConnected = isClientLoaded && !isDisconnected && address !== undefined;
+
+  return {
+    isWalletConnected,
+    address: address || '',
+    connect: handleConnect,
+    disconnect: handleDisconnect,
+    isModalOpening,
+    isModalOpen: isOpen,
+  };
+}

yarn.lock

@@ -2429,6 +2429,348 @@
     ethereum-cryptography "^2.0.0"
     micro-ftch "^0.3.1"
 
+"@ethersproject/abi@5.7.0", "@ethersproject/abi@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.7.0.tgz#b3f3e045bbbeed1af3947335c247ad625a44e449"
+  integrity sha512-351ktp42TiRcYB3H1OP8yajPeAQstMW/yCFokj/AthP9bLHzQFPlOrxOcwYEDkUAICmOHljvN4K39OMTMUa9RA==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/abstract-provider@5.7.0", "@ethersproject/abstract-provider@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.7.0.tgz#b0a8550f88b6bf9d51f90e4795d48294630cb9ef"
+  integrity sha512-R41c9UkchKCpAqStMYUpdunjo3pkEvZC3FAwZn5S5MGbXoMQOHIdHItezTETxAO5bevtMApSyEhn9+CHcDsWBw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+
+"@ethersproject/abstract-signer@5.7.0", "@ethersproject/abstract-signer@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.7.0.tgz#13f4f32117868452191a4649723cb086d2b596b2"
+  integrity sha512-a16V8bq1/Cz+TGCkE2OPMTOUDLS3grCpdjoJCYNnVBbdYEMSgKrU0+B90s8b6H+ByYTBZN7a3g76jdIJi7UfKQ==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/address@5.7.0", "@ethersproject/address@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.7.0.tgz#19b56c4d74a3b0a46bfdbb6cfcc0a153fc697f37"
+  integrity sha512-9wYhYt7aghVGo758POM5nqcOMaE168Q6aRLJZwUmiqSrAungkG74gSSeKEIR7ukixesdRZGPgVqme6vmxs1fkA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+
+"@ethersproject/base64@5.7.0", "@ethersproject/base64@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.7.0.tgz#ac4ee92aa36c1628173e221d0d01f53692059e1c"
+  integrity sha512-Dr8tcHt2mEbsZr/mwTPIQAf3Ai0Bks/7gTw9dSqk1mQvhW3XvRlmDJr/4n+wg1JmCl16NZue17CDh8xb/vZ0sQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+
+"@ethersproject/basex@5.7.0", "@ethersproject/basex@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.7.0.tgz#97034dc7e8938a8ca943ab20f8a5e492ece4020b"
+  integrity sha512-ywlh43GwZLv2Voc2gQVTKBoVQ1mti3d8HK5aMxsfu/nRDnMmNqaSJ3r3n85HBByT8OpoY96SXM1FogC533T4zw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/bignumber@5.7.0", "@ethersproject/bignumber@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
+  integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    bn.js "^5.2.1"
+
+"@ethersproject/bytes@5.7.0", "@ethersproject/bytes@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
+  integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/constants@5.7.0", "@ethersproject/constants@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.7.0.tgz#df80a9705a7e08984161f09014ea012d1c75295e"
+  integrity sha512-DHI+y5dBNvkpYUMiRQyxRBYBefZkJfo70VUkUAsRjcPs47muV9evftfZ0PJVCXYbAiCgght0DtcF9srFQmIgWA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+
+"@ethersproject/contracts@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.7.0.tgz#c305e775abd07e48aa590e1a877ed5c316f8bd1e"
+  integrity sha512-5GJbzEU3X+d33CdfPhcyS+z8MzsTrBGk/sc+G+59+tPa9yFkl6HQ9D6L0QMgNTA9q8dT0XKxxkyp883XsQvbbg==
+  dependencies:
+    "@ethersproject/abi" "^5.7.0"
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+
+"@ethersproject/hash@5.7.0", "@ethersproject/hash@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.7.0.tgz#eb7aca84a588508369562e16e514b539ba5240a7"
+  integrity sha512-qX5WrQfnah1EFnO5zJv1v46a8HW0+E5xuBBDTwMFZLuVTx0tbU2kkx15NqdjxecrLGatQN9FGQKpb1FKdHCt+g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/hdnode@5.7.0", "@ethersproject/hdnode@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.7.0.tgz#e627ddc6b466bc77aebf1a6b9e47405ca5aef9cf"
+  integrity sha512-OmyYo9EENBPPf4ERhR7oj6uAtUAhYGqOnIS+jE5pTXvdKBS99ikzq1E7Iv0ZQZ5V36Lqx1qZLeak0Ra16qpeOg==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/json-wallets@5.7.0", "@ethersproject/json-wallets@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.7.0.tgz#5e3355287b548c32b368d91014919ebebddd5360"
+  integrity sha512-8oee5Xgu6+RKgJTkvEMl2wDgSPSAQ9MB/3JYjFV9jlKvcYHUXZC+cQp0njgmxdHkYWn8s6/IqIZYm0YWCjO/0g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    aes-js "3.0.0"
+    scrypt-js "3.0.1"
+
+"@ethersproject/keccak256@5.7.0", "@ethersproject/keccak256@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
+  integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/logger@5.7.0", "@ethersproject/logger@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
+  integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
+
+"@ethersproject/networks@5.7.1", "@ethersproject/networks@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.7.1.tgz#118e1a981d757d45ccea6bb58d9fd3d9db14ead6"
+  integrity sha512-n/MufjFYv3yFcUyfhnXotyDlNdFb7onmkSy8aQERi2PjNcnWQ66xXxa3XlS8nCcA8aJKJjIIMNJTC7tu80GwpQ==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/pbkdf2@5.7.0", "@ethersproject/pbkdf2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.7.0.tgz#d2267d0a1f6e123f3771007338c47cccd83d3102"
+  integrity sha512-oR/dBRZR6GTyaofd86DehG72hY6NpAjhabkhxgr3X2FpJtJuodEl2auADWBZfhDHgVCbu3/H/Ocq2uC6dpNjjw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+
+"@ethersproject/properties@5.7.0", "@ethersproject/properties@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.7.0.tgz#a6e12cb0439b878aaf470f1902a176033067ed30"
+  integrity sha512-J87jy8suntrAkIZtecpxEPxY//szqr1mlBaYlQ0r4RCaiD2hjheqF9s1LVE8vVuJCXisjIP+JgtK/Do54ej4Sw==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/providers@5.7.2":
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.2.tgz#f8b1a4f275d7ce58cf0a2eec222269a08beb18cb"
+  integrity sha512-g34EWZ1WWAVgr4aptGlVBF8mhl3VWjv+8hoAnzStu8Ah22VHBsuGzP17eb6xDVRzw895G4W7vvx60lFFur/1Rg==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+    bech32 "1.1.4"
+    ws "7.4.6"
+
+"@ethersproject/random@5.7.0", "@ethersproject/random@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.7.0.tgz#af19dcbc2484aae078bb03656ec05df66253280c"
+  integrity sha512-19WjScqRA8IIeWclFme75VMXSBvi4e6InrUNuaR4s5pTF2qNhcGdCUwdxUVGtDDqC00sDLCO93jPQoDUH4HVmQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/rlp@5.7.0", "@ethersproject/rlp@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.7.0.tgz#de39e4d5918b9d74d46de93af80b7685a9c21304"
+  integrity sha512-rBxzX2vK8mVF7b0Tol44t5Tb8gomOHkj5guL+HhzQ1yBh/ydjGnpw6at+X6Iw0Kp3OzzzkcKp8N9r0W4kYSs9w==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
+  integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    hash.js "1.1.7"
+
+"@ethersproject/signing-key@5.7.0", "@ethersproject/signing-key@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.7.0.tgz#06b2df39411b00bc57c7c09b01d1e41cf1b16ab3"
+  integrity sha512-MZdy2nL3wO0u7gkB4nA/pEf8lu1TlFswPNmy8AiYkfKTdO6eXBJyUdmHO/ehm/htHw9K/qF8ujnTyUAD+Ry54Q==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    bn.js "^5.2.1"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+
+"@ethersproject/solidity@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.7.0.tgz#5e9c911d8a2acce2a5ebb48a5e2e0af20b631cb8"
+  integrity sha512-HmabMd2Dt/raavyaGukF4XxizWKhKQ24DoLtdNbBmNKUOPqwjsKQSdV9GQtj9CBEea9DlzETlVER1gYeXXBGaA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/strings@5.7.0", "@ethersproject/strings@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.7.0.tgz#54c9d2a7c57ae8f1205c88a9d3a56471e14d5ed2"
+  integrity sha512-/9nu+lj0YswRNSH0NXYqrh8775XNyEdUQAuf3f+SmOrnVewcJ5SBNAjF7lpgehKi4abvNNXyf+HX86czCdJ8Mg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/transactions@5.7.0", "@ethersproject/transactions@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.7.0.tgz#91318fc24063e057885a6af13fdb703e1f993d3b"
+  integrity sha512-kmcNicCp1lp8qanMTC3RIikGgoJ80ztTyvtsFvCYpSCfkjhD0jZ2LOrnbcuxuToLIUYYf+4XwD1rP+B/erDIhQ==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+
+"@ethersproject/units@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.7.0.tgz#637b563d7e14f42deeee39245275d477aae1d8b1"
+  integrity sha512-pD3xLMy3SJu9kG5xDGI7+xhTEmGXlEqXU4OfNapmfnxLVY4EMSSRp7j1k7eezutBPH7RBN/7QPnwR7hzNlEFeg==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/wallet@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.7.0.tgz#4e5d0790d96fe21d61d38fb40324e6c7ef350b2d"
+  integrity sha512-MhmXlJXEJFBFVKrDLB4ZdDzxcBxQ3rLyCkhNqVu3CDYvR97E+8r01UgrI+TI99Le+aYm/in/0vp86guJuM7FCA==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/json-wallets" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/web@5.7.1", "@ethersproject/web@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.7.1.tgz#de1f285b373149bee5928f4eb7bcb87ee5fbb4ae"
+  integrity sha512-Gueu8lSvyjBWL4cYsWsjh6MtMwM0+H4HvqFPZfB6dV8ctbP9zFAO73VG1cMWae0FLPCtz0peKPpZY8/ugJJX2w==
+  dependencies:
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/wordlists@5.7.0", "@ethersproject/wordlists@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.7.0.tgz#8fb2c07185d68c3e09eb3bfd6e779ba2774627f5"
+  integrity sha512-S2TFNJNfHWVHNE6cNDjbVlZ6MgE17MIxMbMg2zv3wn+3XSJGosL1m9ZVv3GXCf/2ymSsQ+hRI5IzoMJTG6aoVA==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
 "@fastify/busboy@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
@@ -6944,6 +7286,11 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+aes-js@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
+
 aes-js@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
@@ -7330,6 +7677,11 @@ base64-js@^1.3.1, base64-js@^1.5.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+bech32@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
+  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
+
 bigint-buffer@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/bigint-buffer/-/bigint-buffer-1.1.5.tgz#d038f31c8e4534c1f8d0015209bf34b4fa6dd442"
@@ -7378,7 +7730,12 @@ blo@^1.1.1:
   resolved "https://registry.yarnpkg.com/blo/-/blo-1.1.1.tgz#ed781c5c516fba484ec8ec86105dc27f6c553209"
   integrity sha512-1uGZInlRD4X1WQP2G1QjDGwGZ8HdGgFKqnzyRdA2TYYc0MOQCmCi37RTQ8oJuI0UF6DYFKXHwV/t1kZkO/fTaA==
 
-bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0:
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
@@ -7419,6 +7776,11 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
+
 browserslist@^4.21.3, browserslist@^4.21.4:
   version "4.21.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
@@ -8220,6 +8582,15 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dappscout-iframe@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.1.0.tgz#c971d8a8aa4fb3d64ca357700d3ac809dcdecb0d"
+  integrity sha512-nL65Uuv2+r2ujELyBtw+VL6PYkUtleCvKi2XaeMiroZz6tieeUw338PEOc6cZaIfwXk59rFwNR0FZki2HnOrIA==
+  dependencies:
+    ethers "^5.7.2"
+    react "^18.2.0"
+    react-dom "^18.2.0"
+
 data-uri-to-buffer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
@@ -8534,6 +8905,19 @@ electron-to-chromium@^1.4.251:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.276.tgz#17837b19dafcc43aba885c4689358b298c19b520"
   integrity sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==
 
+elliptic@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -9143,6 +9527,42 @@ ethereum-cryptography@^2.0.0:
     "@scure/bip32" "1.3.1"
     "@scure/bip39" "1.2.1"
 
+ethers@^5.7.2:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
+  integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
+  dependencies:
+    "@ethersproject/abi" "5.7.0"
+    "@ethersproject/abstract-provider" "5.7.0"
+    "@ethersproject/abstract-signer" "5.7.0"
+    "@ethersproject/address" "5.7.0"
+    "@ethersproject/base64" "5.7.0"
+    "@ethersproject/basex" "5.7.0"
+    "@ethersproject/bignumber" "5.7.0"
+    "@ethersproject/bytes" "5.7.0"
+    "@ethersproject/constants" "5.7.0"
+    "@ethersproject/contracts" "5.7.0"
+    "@ethersproject/hash" "5.7.0"
+    "@ethersproject/hdnode" "5.7.0"
+    "@ethersproject/json-wallets" "5.7.0"
+    "@ethersproject/keccak256" "5.7.0"
+    "@ethersproject/logger" "5.7.0"
+    "@ethersproject/networks" "5.7.1"
+    "@ethersproject/pbkdf2" "5.7.0"
+    "@ethersproject/properties" "5.7.0"
+    "@ethersproject/providers" "5.7.2"
+    "@ethersproject/random" "5.7.0"
+    "@ethersproject/rlp" "5.7.0"
+    "@ethersproject/sha2" "5.7.0"
+    "@ethersproject/signing-key" "5.7.0"
+    "@ethersproject/solidity" "5.7.0"
+    "@ethersproject/strings" "5.7.0"
+    "@ethersproject/transactions" "5.7.0"
+    "@ethersproject/units" "5.7.0"
+    "@ethersproject/wallet" "5.7.0"
+    "@ethersproject/web" "5.7.1"
+    "@ethersproject/wordlists" "5.7.0"
+
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
@@ -9821,7 +10241,7 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash.js@^1.1.7:
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
   integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@@ -9880,6 +10300,15 @@ highlight.js@^10.4.1, highlight.js@~10.7.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -10850,6 +11279,11 @@ js-sdsl@^4.1.4:
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
   integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -11370,11 +11804,16 @@ minim@~0.23.8:
   dependencies:
     lodash "^4.15.0"
 
-minimalistic-assert@^1.0.1:
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -12617,7 +13056,7 @@ react-device-detect@^2.2.3:
   dependencies:
     ua-parser-js "^1.0.33"
 
-react-dom@18.2.0:
+react-dom@18.2.0, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -12806,7 +13245,7 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@18.2.0:
+react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -13235,6 +13674,11 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+scrypt-js@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
+  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
+
 scslre@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/scslre/-/scslre-0.1.6.tgz#71a2832e4bf3a9254973a04fbed90aec94f75757"
@@ -14594,6 +15038,11 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 ws@8.12.0, ws@^8.5.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"