add network to wallet

configs/envs/.env.goerli.optimism

@@ -12,14 +12,14 @@ NEXT_PUBLIC_NETWORK_SHORT_NAME=Base
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=optimism
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/base.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/base.svg
-NEXT_PUBLIC_NETWORK_ID=420
+NEXT_PUBLIC_NETWORK_ID=84531
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.optimism.io
+NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.base.org
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']

lib/web3/wallets.ts

@@ -9,10 +9,12 @@ import metamaskIcon from 'icons/wallets/metamask.svg';
 export const WALLETS_INFO = {
   metamask: {
     add_token_text: 'Add token to MetaMask',
+    add_network_text: 'Add network to MetaMask',
     icon: metamaskIcon,
   },
   coinbase: {
     add_token_text: 'Add token to Coinbase Wallet',
+    add_network_text: 'Add network to Coinbase Wallet',
     icon: coinbaseIcon,
   },
 };

ui/shared/NetworkAddToWallet.tsx

+import { Box, Icon, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import useToast from 'lib/hooks/useToast';
+import useProvider from 'lib/web3/useProvider';
+import { WALLETS_INFO } from 'lib/web3/wallets';
+
+interface Props {
+  className?: string;
+}
+
+const NetworkAddToWallet = ({ className }: Props) => {
+  const toast = useToast();
+  const provider = useProvider();
+
+  const handleClick = React.useCallback(async() => {
+    try {
+      const hexadecimalChainId = '0x' + Number(appConfig.network.id).toString(16);
+      const config = {
+        method: 'wallet_addEthereumChain',
+        params: [ {
+          chainId: hexadecimalChainId,
+          chainName: appConfig.network.name,
+          nativeCurrency: {
+            name: appConfig.network.currency.name,
+            symbol: appConfig.network.currency.symbol,
+            decimals: appConfig.network.currency.decimals,
+          },
+          rpcUrls: [ appConfig.network.rpcUrl ],
+          blockExplorerUrls: [ appConfig.baseUrl ],
+        } ],
+      };
+      await provider?.request?.(config);
+      toast({
+        position: 'top-right',
+        title: 'Success',
+        description: 'Successfully added network to your wallet',
+        status: 'success',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: (error as Error)?.message || 'Something went wrong',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    }
+  }, [ provider, toast ]);
+
+  if (!provider) {
+    return null;
+  }
+
+  const defaultWallet = appConfig.web3.defaultWallet;
+
+  return (
+    <Tooltip label={ WALLETS_INFO[defaultWallet].add_network_text }>
+      <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick }>
+        <Icon as={ WALLETS_INFO[defaultWallet].icon } boxSize={ 5 }/>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(NetworkAddToWallet));

ui/shared/address/AddressAddToWallet.tsx

@@ -15,7 +15,6 @@ interface Props {
 
 const AddressAddToWallet = ({ className, token }: Props) => {
   const toast = useToast();
-
   const provider = useProvider();
 
   const handleClick = React.useCallback(async() => {

ui/snippets/navigation/NavFooter.tsx

-import { Box, VStack, Text, Stack, Icon, Link } from '@chakra-ui/react';
+import { Box, Text, Stack, Icon, Link, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -7,6 +7,7 @@ import statsIcon from 'icons/social/stats.svg';
 import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 const SOCIAL_LINKS = [
   { link: appConfig.footerLinks.github, icon: ghIcon, label: 'Github link' },
@@ -35,11 +36,9 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
   return (
     <VStack
       as="footer"
-      spacing={ 8 }
       borderTop="1px solid"
       borderColor="divider"
       width={{ base: '100%', lg: isExpanded ? '180px' : '20px', xl: isCollapsed ? '20px' : '180px' }}
-      paddingTop={{ base: 6, lg: 8 }}
       marginTop={ marginTop }
       alignItems="flex-start"
       alignSelf="center"
@@ -47,23 +46,28 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
       fontSize="xs"
       { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
     >
-      { SOCIAL_LINKS.length > 0 && (
-        <Stack direction={{ base: 'row', lg: isExpanded ? 'row' : 'column', xl: isCollapsed ? 'column' : 'row' }}>
-          { SOCIAL_LINKS.map(sl => {
-            return (
-              <Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 } aria-label={ sl.label } target="_blank">
-                <Icon as={ sl.icon } boxSize={ 5 }/>
-              </Link>
-            );
-          }) }
-        </Stack>
-      ) }
+      <Stack
+        direction={{ base: 'row', lg: isExpanded ? 'row' : 'column', xl: isCollapsed ? 'column' : 'row' }}
+        mt={{ base: 6, lg: 8 }}
+        _empty={{
+          display: 'none',
+        }}
+      >
+        <NetworkAddToWallet/>
+        { SOCIAL_LINKS.map(sl => {
+          return (
+            <Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 } aria-label={ sl.label } target="_blank">
+              <Icon as={ sl.icon } boxSize={ 5 }/>
+            </Link>
+          );
+        }) }
+      </Stack>
       <Box display={{ base: 'block', lg: isExpanded ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}>
-        <Text variant="secondary" mb={ 8 }>
+        <Text variant="secondary" mt={ 8 }>
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
         { appConfig.blockScoutVersion &&
-          <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link></Text> }
+          <Text variant="secondary" mt={ 8 }>Version: <Link href={ VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link></Text> }
       </Box>
     </VStack>
   );

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -26,7 +26,13 @@ const test = base.extend({
   ]) as any,
 });
 
-test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
+test('no auth +@desktop-xl +@dark-mode-xl', async({ page, mount }) => {
+  await page.evaluate(() => {
+    window.ethereum = {
+      providers: [ { isMetaMask: true } ],
+    };
+  });
+
   const component = await mount(
     <TestApp>
       <Flex w="100%" minH="100vh" alignItems="stretch">