[skip ci] fix network explorer links (#1338)

blockscout · Nov 8, 2023 · 7eba3e1 · 7eba3e1
1 parent 7938a80
commit 7eba3e1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
@@ -179,7 +179,7 @@ const AddressPageContent = () => {
   const titleSecondRow = (
     <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
       <AddressEntity
-        address={{ ...addressQuery.data, name: '' }}
+        address={{ ...addressQuery.data, hash, name: '' }}
         isLoading={ isLoading }
         fontFamily="heading"
         fontSize="lg"
@@ -192,7 +192,7 @@ const AddressPageContent = () => {
       { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ hash } watchListId={ addressQuery.data?.watchlist_address_id }/>
       ) }
-      <AddressQrCode address={ addressQuery.data } isLoading={ isLoading }/>
+      <AddressQrCode address={{ hash }} isLoading={ isLoading }/>
       <AccountActionsMenu isLoading={ isLoading }/>
       <NetworkExplorers type="address" pathParam={ hash } ml="auto"/>
     </Flex>

diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx
@@ -6,6 +6,7 @@ import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 import config from 'configs/app';
 import arrowIcon from 'icons/arrows/east-mini.svg';
 import explorerIcon from 'icons/explorer.svg';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 interface Props {
@@ -17,12 +18,14 @@ interface Props {
 const NetworkExplorers = ({ className, type, pathParam }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const explorersLinks = config.UI.explorers.items
-    .filter((explorer) => explorer.paths[type])
-    .map((explorer) => {
-      const url = new URL(explorer.paths[type] + '/' + pathParam, explorer.baseUrl);
-      return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ explorer.title }</LinkExternal>;
-    });
+  const explorersLinks = React.useMemo(() => {
+    return config.UI.explorers.items
+      .filter((explorer) => typeof explorer.paths[type] === 'string')
+      .map((explorer) => {
+        const url = new URL(stripTrailingSlash(explorer.paths[type] || '') + '/' + pathParam, explorer.baseUrl);
+        return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ explorer.title }</LinkExternal>;
+      });
+  }, [ pathParam, type ]);
 
   if (explorersLinks.length === 0) {
     return null;