Arbitrum messages claiming (#2533)

* txn withdrawals page stub * add base page layout * add ConnectWallet alert * save search term in page query param * add links to the new page * add functionality to claim button * combine "Connect wallet" and "Claim" buttons * Refactor rollup configuration to introduce ParentChain structure and deprecate legacy environment variables * handle txn claim * allow to pass array of RPC urls for parent chain config * display token value and completion tx hash * fix csp * write tests for arbitrum l2 txn withdrawals * fix ts * review fixes * update screenshots and hide button if the txn is not confirmed yet
blockscout · Feb 11, 2025 · b775d9e · b775d9e
1 parent b88ebe4
commit b775d9e
Show file tree

Hide file tree

Showing 72 changed files with 1,157 additions and 125 deletions.
diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts
@@ -1,46 +1,59 @@
 import type { Feature } from './types';
-import type { RollupType } from 'types/client/rollup';
+import type { ParentChain, RollupType } from 'types/client/rollup';
 import { ROLLUP_TYPES } from 'types/client/rollup';
 
 import stripTrailingSlash from 'lib/stripTrailingSlash';
 
-import { getEnvValue } from '../utils';
+import { getEnvValue, parseEnvJson } from '../utils';
 
 const type = (() => {
   const envValue = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE');
   return ROLLUP_TYPES.find((type) => type === envValue);
 })();
 
-const L1BaseUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L1_BASE_URL');
 const L2WithdrawalUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL');
 
+const parentChain: ParentChain | undefined = (() => {
+  const envValue = parseEnvJson<ParentChain>(getEnvValue('NEXT_PUBLIC_ROLLUP_PARENT_CHAIN'));
+  const baseUrl = stripTrailingSlash(getEnvValue('NEXT_PUBLIC_ROLLUP_L1_BASE_URL') || '');
+  const chainName = getEnvValue('NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME');
+
+  if (!baseUrl && !envValue?.baseUrl) {
+    return;
+  }
+
+  return {
+    ...envValue,
+    name: chainName ?? envValue?.name,
+    baseUrl: baseUrl ?? envValue?.baseUrl,
+  };
+})();
+
 const title = 'Rollup (L2) chain';
 
 const config: Feature<{
   type: RollupType;
-  L1BaseUrl: string;
   homepage: { showLatestBlocks: boolean };
   outputRootsEnabled: boolean;
   L2WithdrawalUrl: string | undefined;
-  parentChainName: string | undefined;
+  parentChain: ParentChain;
   DA: {
     celestia: {
       namespace: string | undefined;
     };
   };
 }> = (() => {
-  if (type && L1BaseUrl) {
+  if (type && parentChain) {
     return Object.freeze({
       title,
       isEnabled: true,
       type,
-      L1BaseUrl: stripTrailingSlash(L1BaseUrl),
       L2WithdrawalUrl: type === 'optimistic' ? L2WithdrawalUrl : undefined,
       outputRootsEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED') === 'true',
-      parentChainName: type === 'arbitrum' ? getEnvValue('NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME') : undefined,
       homepage: {
         showLatestBlocks: getEnvValue('NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS') === 'true',
       },
+      parentChain,
       DA: {
         celestia: {
           namespace: type === 'arbitrum' ? getEnvValue('NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE') : undefined,

diff --git a/configs/envs/.env.arbitrum b/configs/envs/.env.arbitrum
@@ -9,20 +9,36 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://eth.blockscout.com','currency':{'name':'Ether','symbol':'ETH','decimals':18},'isTestnet':false,'id':1,'name':'Ethereum mainnet','rpcUrls':['https://eth.drpc.org']}
+
 # Instance ENVs
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_API_HOST=arbitrum.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'swoop-exchange'},{'text':'Disperse','icon':'txn_batches_slim','dappId':'smol'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_DEX_POOLS_ENABLED=true
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/arbitrum-one.json
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x37c798810d49ba132b40efe7f4fdf6806a8fc58226bb5e185ddc91f896577abf
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
+NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(27, 74, 221, 1)
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(27, 74, 221, 1)']}
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Joined recent campaigns? Mint your Merit Badge <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=arbitrum">here</a></p>
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=arbitrum
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/pools']
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
@@ -33,12 +49,15 @@ NEXT_PUBLIC_NETWORK_ID=42161
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-light.svg
 NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-dark.svg
 NEXT_PUBLIC_NETWORK_NAME=Arbitrum One
-NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum.llamarpc.com
+NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum-one.publicnode.com
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum One
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-one.png
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME=Ethereum
 NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_STATS_API_HOST=https://stats-arbitrum-one-nitro.k8s-prod-2.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
diff --git a/configs/envs/.env.arbitrum_sepolia b/configs/envs/.env.arbitrum_sepolia
@@ -41,7 +41,8 @@ NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-sepolia.png
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com
 NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://eth-sepolia.blockscout.com','currency':{'name':'Ether','symbol':'ETH','decimals':18},'isTestnet':true,'id':11155111,'name':'Sepolia','rpcUrls':['https://eth-sepolia.public.blastapi.io']}
 NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/4503902500421632
 NEXT_PUBLIC_STATS_API_HOST=https://stats-arbitrum-sepolia.k8s-prod-2.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
diff --git a/deploy/tools/envs-validator/index.ts b/deploy/tools/envs-validator/index.ts
@@ -157,6 +157,16 @@ function printDeprecationWarning(envsMap: Record<string, string>) {
     console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
   }
 
+  if (
+    envsMap.NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME ||
+    envsMap.NEXT_PUBLIC_ROLLUP_L1_BASE_URL
+  ) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The NEXT_PUBLIC_ROLLUP_L1_BASE_URL and NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME variables are now deprecated and will be removed in the next release. Please migrate to the NEXT_PUBLIC_ROLLUP_PARENT_CHAIN variable.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+
   if (
     envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR ||
     envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND

diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
@@ -70,6 +70,14 @@ const urlTest: yup.TestConfig = {
   exclusive: true,
 };
 
+const getYupValidationErrorMessage = (error: unknown) => 
+  typeof error === 'object' && 
+  error !== null && 
+  'errors' in error && 
+  Array.isArray(error.errors) ? 
+    error.errors.join(', ') : 
+    '';
+
 const marketplaceAppSchema: yup.ObjectSchema<MarketplaceAppOverview> = yup
   .object({
     id: yup.string().required(),
@@ -270,6 +278,44 @@ const beaconChainSchema = yup
       }),
   });
 
+const parentChainCurrencySchema = yup
+  .object()
+  .shape({
+    name: yup.string().required(),
+    symbol: yup.string().required(),
+    decimals: yup.number().required(),
+  });
+
+const parentChainSchema = yup
+  .object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    id: yup.number(),
+    name: yup.string(),
+    baseUrl: yup.string().test(urlTest).required(),
+    rpcUrls: yup.array().of(yup.string().test(urlTest)),
+    currency: yup
+      .mixed()
+      .test(
+        'shape',
+        (ctx) => {
+          try {
+            parentChainCurrencySchema.validateSync(ctx.originalValue);
+            throw new Error('Unknown validation error');
+          } catch (error: unknown) {
+            const message = getYupValidationErrorMessage(error);
+            return 'in \"currency\" property ' + (message ? `${ message }` : '');
+          }
+        },
+        (data) => {
+          const isUndefined = data === undefined;
+          return isUndefined || parentChainCurrencySchema.isValidSync(data);
+        },
+      ),
+    isTestnet: yup.boolean(),
+  });
+
 const rollupSchema = yup
   .object()
   .shape({
@@ -321,6 +367,34 @@ const rollupSchema = yup
           value => value === undefined,
         ),
       }),
+    NEXT_PUBLIC_ROLLUP_PARENT_CHAIN: yup
+      .mixed()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value,
+        then: (schema) => {
+          return schema.test(
+            'shape',
+            (ctx) => {
+              try {
+                parentChainSchema.validateSync(ctx.originalValue);
+                throw new Error('Unknown validation error');
+              } catch (error: unknown) {
+                const message = getYupValidationErrorMessage(error);
+                return 'Invalid schema were provided for NEXT_PUBLIC_ROLLUP_TYPE' + (message ? `: ${ message }` : '');
+              }
+            },
+            (data) => {
+              const isUndefined = data === undefined;
+              return isUndefined || parentChainSchema.isValidSync(data);
+            }
+          )
+        },
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined',
+          value => value === undefined,
+        ),
+      }),
     NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE: yup
       .string()
       .min(60)
@@ -662,7 +736,7 @@ const schema = yup
             heroBannerSchema.validateSync(ctx.originalValue);
             throw new Error('Unknown validation error');
           } catch (error: unknown) {
-            const message = typeof error === 'object' && error !== null && 'errors' in error && Array.isArray(error.errors) ? error.errors.join(', ') : '';
+            const message = getYupValidationErrorMessage(error);
             return 'Invalid schema were provided for NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG' + (message ? `: ${ message }` : '');
           }
         },

diff --git a/deploy/tools/envs-validator/test/.env.arbitrum b/deploy/tools/envs-validator/test/.env.arbitrum
@@ -2,4 +2,6 @@ NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
 NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
 NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME=DuckChain
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://explorer.duckchain.io','currency':{'name':'Quack','symbol':'QUACK','decimals':18},'isTestnet':true,'id':42,'name':'DuckChain','rpcUrls':['https://rpc.duckchain.io']}
+
 NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE=0x00000000000000000000000000000000000000ca1de12a9905be97beaf
diff --git a/deploy/tools/envs-validator/test/.env.optimism b/deploy/tools/envs-validator/test/.env.optimism
@@ -3,4 +3,5 @@ NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
 NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
 NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
 NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
-NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=false
+NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=false
+NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://explorer.duckchain.io'}
diff --git a/docs/ENVS.md b/docs/ENVS.md
@@ -450,15 +450,28 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' \| 'scroll'` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
-| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
 | NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
 | NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
 | NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
 | NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS | `boolean` | Set to `true` to display "Latest blocks" widget instead of "Latest batches" on the home page | - | - | `true` | v1.36.0+ |
 | NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED | `boolean` | Enables "Output roots" page (Optimistic stack only)  | - | `false` | `true` | v1.37.0+ |
-| NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME | `string` | Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). This setting is applicable only for Arbitrum-based chains.  | - | - | `DuckChain` | v1.37.0+ |
+| NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME | `string` | Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). This setting is applicable only for Arbitrum-based chains. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | - | - | `DuckChain` | v1.37.0+ |
+| NEXT_PUBLIC_ROLLUP_PARENT_CHAIN | `ParentChain`, see details [below](#parent-chain-configuration-properties) | Configuration parameters for the parent chain. | - | - | `{'baseUrl':'https://explorer.duckchain.io'}` | v1.38.0+ |
 | NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE | `string` | Hex-string for creating a link to the transaction batch on the Seleneium explorer. "0x"-format and 60 symbol length. Available only for Arbitrum roll-ups. | - | - | `0x00000000000000000000000000000000000000ca1de12a9905be97beaf` | v1.38.0+ |
 
+#### Parent chain configuration properties
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| id | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference. | - | - | `42` |
+| name | `string` | Displayed name of the chain. Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). Currently, this setting is applicable only for Arbitrum-based chains. | - | - | `DuckChain` |
+| baseUrl | `string` | Base url of the chain explorer. | Required | - | `https://explorer.duckchain.io` |
+| rpcUrls | `Array<string>` | Chain public RPC server urls, see [https://chainlist.org](https://chainlist.org) for the reference. | - | - | `['https://rpc.duckchain.io']` |
+| currency | `{ name: string; symbol: string; decimals: number; }` | Chain currency config. | - | - | `{ name: Quack, symbol: QUA, decimals: 18 }` |
+| isTestnet | `boolean` | Set to true if network is testnet. | - | - | `true` |
+
+
 &nbsp;
 
 ### Export data to CSV file

diff --git a/lib/api/resources.ts b/lib/api/resources.ts
@@ -51,6 +51,8 @@ import type {
   ArbitrumL2BatchBlocks,
   ArbitrumL2TxnBatchesItem,
   ArbitrumLatestDepositsResponse,
+  ArbitrumL2TxnWithdrawalsResponse,
+  ArbitrumL2MessageClaimResponse,
 } from 'types/api/arbitrumL2';
 import type { TxBlobs, Blob } from 'types/api/blobs';
 import type {
@@ -928,6 +930,18 @@ export const RESOURCES = {
     filterFields: [],
   },
 
+  arbitrum_l2_txn_withdrawals: {
+    path: '/api/v2/arbitrum/messages/withdrawals/:hash',
+    pathParams: [ 'hash' as const ],
+    filterFields: [],
+  },
+
+  arbitrum_l2_message_claim: {
+    path: '/api/v2/arbitrum/messages/claim/:id',
+    pathParams: [ 'id' as const ],
+    filterFields: [],
+  },
+
   // zkEvm L2
   zkevm_l2_deposits: {
     path: '/api/v2/zkevm/deposits',
@@ -1400,6 +1414,8 @@ Q extends 'arbitrum_l2_txn_batch' ? ArbitrumL2TxnBatch :
 Q extends 'arbitrum_l2_txn_batch_celestia' ? ArbitrumL2TxnBatch :
 Q extends 'arbitrum_l2_txn_batch_txs' ? ArbitrumL2BatchTxs :
 Q extends 'arbitrum_l2_txn_batch_blocks' ? ArbitrumL2BatchBlocks :
+Q extends 'arbitrum_l2_txn_withdrawals' ? ArbitrumL2TxnWithdrawalsResponse :
+Q extends 'arbitrum_l2_message_claim' ? ArbitrumL2MessageClaimResponse :
 Q extends 'zkevm_l2_deposits' ? ZkEvmL2DepositsResponse :
 Q extends 'zkevm_l2_deposits_count' ? number :
 Q extends 'zkevm_l2_withdrawals' ? ZkEvmL2WithdrawalsResponse :

diff --git a/lib/errors/getErrorProp.ts b/lib/errors/getErrorProp.ts
@@ -0,0 +1,8 @@
+import getErrorObj from './getErrorObj';
+
+export default function getErrorProp<T extends unknown>(error: unknown, prop: string): T | undefined {
+  const errorObj = getErrorObj(error);
+  return errorObj && prop in errorObj ?
+    (errorObj[prop as keyof typeof errorObj] as T) :
+    undefined;
+}
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
@@ -246,6 +246,11 @@ export default function useNavItems(): ReturnType {
         nextRoute: { pathname: '/public-tags/submit' as const },
         isActive: pathname.startsWith('/public-tags/submit'),
       },
+      rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && {
+        text: 'Txn withdrawals',
+        nextRoute: { pathname: '/txn-withdrawals' as const },
+        isActive: pathname.startsWith('/txn-withdrawals'),
+      },
       ...config.UI.navigation.otherLinks,
     ].filter(Boolean);
 

diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts
@@ -36,6 +36,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/account/verified-addresses': 'Root page',
   '/public-tags/submit': 'Regular page',
   '/withdrawals': 'Root page',
+  '/txn-withdrawals': 'Root page',
   '/visualize/sol2uml': 'Regular page',
   '/csv-export': 'Regular page',
   '/deposits': 'Root page',

diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
@@ -39,6 +39,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/account/verified-addresses': DEFAULT_TEMPLATE,
   '/public-tags/submit': 'Propose a new public tag for your address, contract or set of contracts for your dApp. Our team will review and approve your submission. Public tags are incredible tool which helps users identify contracts and addresses.',
   '/withdrawals': DEFAULT_TEMPLATE,
+  '/txn-withdrawals': DEFAULT_TEMPLATE,
   '/visualize/sol2uml': DEFAULT_TEMPLATE,
   '/csv-export': DEFAULT_TEMPLATE,
   '/deposits': DEFAULT_TEMPLATE,