Merge pull request #60 from valory-xyz/mohan/add-arbitrum-links

feat: add Arbitrum links to <AddressLink /> component

HISTORY.md

@@ -168,3 +168,6 @@
 
 ## 0.4.22
 - Add "Solana" support for <AddressLink /> component
+
+## 0.4.23
+- Add "Arbitrum" and "Arbitrum Sepolia" support for <AddressLink /> component

SECURITY.md

@@ -8,7 +8,7 @@ The following table shows which versions of `autonolas-frontend-library` are cur
 
 | Version   | Supported          |
 | --------- | ------------------ |
-| `0.4.22`   | :white_check_mark: |
+| `0.4.23`   | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autonolas/frontend-library",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "Codebase to common style, components, settings, etc.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/product/AddressLink/AddressLink.stories.tsx

@@ -75,6 +75,7 @@ const columns: ColumnsType<DataType> = [
         suffixCount={6}
         canCopy
         textMinWidth={150}
+        // chainId={421614}
         // supportedChains={[{ id: 100 }]}
       />
     ),

src/components/product/AddressLink/AddressLink.tsx

@@ -41,13 +41,15 @@ type GetRedirectLinkArgs = {
   isIpfsLink: boolean;
   supportedChains?: Chain[];
   chainName?: SolanaChainNames;
+  chainId?: number;
 };
 
 const getRedirectLink = ({
   text,
   isIpfsLink,
   supportedChains,
   chainName,
+  chainId,
 }: GetRedirectLinkArgs) => {
   if (isIpfsLink) {
     const hash = text.substring(2);
@@ -67,9 +69,13 @@ const getRedirectLink = ({
       : `https://solscan.io/account/${text}`;
   }
 
+  const getCurrentChainId = () => {
+    if (chainId) return chainId;
+    if (supportedChains) return getChainId(supportedChains);
+    return 1;
+  };
+  const explorerUrl = getExplorerURL(getCurrentChainId());
   const isTransaction = /^0x([A-Fa-f0-9]{64})$/.test(text);
-  const currentChainId = supportedChains ? getChainId(supportedChains) : 1;
-  const explorerUrl = getExplorerURL(currentChainId);
 
   return isTransaction
     ? `${explorerUrl}/tx/${text}`
@@ -109,6 +115,8 @@ type AddressLinkType = {
   onClick?: (text: string) => void;
   /** chain name */
   chainName?: SolanaChainNames;
+  /** chain ID */
+  chainId?: number;
 };
 
 export const AddressLink = ({
@@ -122,6 +130,7 @@ export const AddressLink = ({
   cannotClick,
   supportedChains,
   onClick,
+  chainId,
   chainName,
 }: AddressLinkType) => {
   const trimmedText = getTrimmedText(text, suffixCount);
@@ -130,6 +139,7 @@ export const AddressLink = ({
     isIpfsLink,
     supportedChains,
     chainName,
+    chainId,
   });
 
   return (

src/functions/functions.ts

@@ -41,6 +41,9 @@ export const getSymbolName = (chainId: number) => {
     case 100:
     case 10200:
       return 'xDAI';
+    case 42161:
+    case 421614:
+      return 'ARB';
     default:
       return 'ETH';
   }
@@ -76,6 +79,10 @@ export const getNetworkName = (networkId: number) => {
       return 'Gnosis Chain';
     case 10200:
       return 'Gnosis Chain Testnet';
+    case 42161:
+      return 'Arbitrum';
+    case 421614:
+      return 'Arbitrum Sepolia';
     default:
       return 'Unknown Network';
   }
@@ -103,6 +110,10 @@ export const getExplorerURL = (chainId = 1) => {
       return `https://gnosisscan.io`;
     case 10200:
       return `https://gnosis.blockscout.com`;
+    case 42161:
+      return `https://arbiscan.io`;
+    case 421614:
+      return `https://sepolia.arbiscan.io`;
     default:
       return `https://etherscan.io`;
   }