explorers on address page

ui/address/AddressDetails.tsx

-import { Box, Flex, Text, Icon, Grid } from '@chakra-ui/react';
+import { Box, Text, Icon, Grid } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { route } from 'nextjs-routes';
@@ -6,7 +6,6 @@ import React from 'react';
 
 import type { Address as TAddress } from 'types/api/address';
 
-import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -18,8 +17,8 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
+import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
 import AddressBalance from './details/AddressBalance';
 import AddressDetailsSkeleton from './details/AddressDetailsSkeleton';
@@ -83,21 +82,12 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     return <AddressDetailsSkeleton/>;
   }
 
-  const explorers = appConfig.network.explorers.filter(({ paths }) => paths.address);
   const data = addressQuery.isError ? errorData : addressQuery.data;
 
   return (
     <Box>
       <AddressHeadingInfo address={ data } token={ data.token } isLinkDisabled/>
-      { explorers.length > 0 && (
-        <Flex mt={ 8 } columnGap={ 4 } flexWrap="wrap">
-          <Text fontSize="sm">Verify with other explorers</Text>
-          { explorers.map((explorer) => {
-            const url = new URL(explorer.paths.address + '/' + addressHash, explorer.baseUrl);
-            return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ explorer.title }</LinkExternal>;
-          }) }
-        </Flex>
-      ) }
+      <NetworkExplorers mt={ 8 } type="address" pathParam={ addressHash }/>
       <Grid
         mt={ 8 }
         columnGap={ 8 }

ui/shared/NetworkExplorers.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 
+import appConfig from 'configs/app/config';
 import arrowIcon from 'icons/arrows/east-mini.svg';
 import searchIcon from 'icons/search.svg';
-import networkExplorers from 'lib/networks/networkExplorers';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 interface Props {
@@ -17,7 +17,7 @@ interface Props {
 const NetworkExplorers = ({ className, type, pathParam }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const explorersLinks = networkExplorers
+  const explorersLinks = appConfig.network.explorers
     .filter((explorer) => explorer.paths[type])
     .map((explorer) => {
       const url = new URL(explorer.paths[type] + '/' + pathParam, explorer.baseUrl);