Fix chain switch error blocking L2→L1 withdrawal claims (#3646)

* Disable L2→L1 claim when the parent chain is missing from the wallet.

Prevents the opaque switch-chain toast on Claim and points the hpp preset at explorer.hpp.io for repro.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix test

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: tom2drum

src/config/test-utils/env-presets.ts

@@ -18,7 +18,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   ],
   arbitrumRollup: [
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'arbitrum' ],
-    [ 'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN', '{"name":"DuckChain","baseUrl":"https://localhost:3101"}' ],
+    [ 'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN', '{"name":"DuckChain","baseUrl":"https://localhost:3101","id":11155111,"rpcUrls":["https://localhost:3101"],"currency":{"name":"Ether","symbol":"ETH","decimals":18},"isTestnet":true}' ],
     [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE', '0x1234' ],
     [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL', 'https://mocha.celenium.io/blob' ],
   ],

src/features/rollup/arbitrum/pages/txn-withdrawals/ArbitrumL2TxnWithdrawalsClaimButton.tsx

@@ -12,6 +12,7 @@ import type { ResourceError } from 'src/api/resources';
 
 import Web3Boundary from 'src/features/connect-wallet/components/Web3Boundary';
 import useWallet from 'src/features/connect-wallet/hooks/useWallet';
+import WithdrawalClaimButton from 'src/features/rollup/common/components/WithdrawalClaimButton';
 
 import config from 'src/config';
 import getErrorMessage from 'src/shared/errors/get-error-message';
@@ -20,7 +21,6 @@ import getErrorProp from 'src/shared/errors/get-error-prop';
 import capitalizeFirstLetter from 'src/shared/texts/capitalize-first-letter';
 
 import { Button } from 'src/toolkit/chakra/button';
-import { Skeleton } from 'src/toolkit/chakra/skeleton';
 import { toaster } from 'src/toolkit/chakra/toaster';
 
 import ArbitrumL2TxnWithdrawalsClaimTx from './ArbitrumL2TxnWithdrawalsClaimTx';
@@ -128,17 +128,13 @@ const ArbitrumL2TxnWithdrawalsClaimButtonContent = ({ messageId, txHash, complet
   const isLoading = isPending || web3Wallet.isOpen;
 
   return (
-    <Skeleton loading={ isDataLoading }>
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={ handleClaimClick }
-        loading={ isLoading }
-        loadingText="Claim"
-      >
-        Claim
-      </Button>
-    </Skeleton>
+    <WithdrawalClaimButton
+      onClick={ handleClaimClick }
+      loading={ isLoading }
+      loadingSkeleton={ isDataLoading }
+    >
+      Claim
+    </WithdrawalClaimButton>
   );
 };
 

src/features/rollup/common/components/WithdrawalClaimButton.tsx

@@ -0,0 +1,38 @@
+// SPDX-License-Identifier: LicenseRef-Blockscout
+
+import React from 'react';
+
+import { chains } from 'src/features/connect-wallet/utils/chains';
+import { useMultichainContext } from 'src/features/multichain/context';
+
+import config from 'src/config';
+import { getFeaturePayload } from 'src/config/utils/features';
+
+import type { ButtonProps } from 'src/toolkit/chakra/button';
+import { Button } from 'src/toolkit/chakra/button';
+import { Tooltip } from 'src/toolkit/chakra/tooltip';
+
+const WithdrawalClaimButton = (props: ButtonProps) => {
+
+  const multichainContext = useMultichainContext();
+  const parentChain = getFeaturePayload((multichainContext?.chain.app_config ?? config).features.rollup)?.parentChain;
+  const isParentChainConfigured = Boolean(parentChain?.id && chains.some(chain => chain.id === parentChain.id));
+
+  return (
+    <Tooltip
+      content="The direct claim flow is not available because the parent chain is not configured. Please contact the project team to report this issue."
+      disabled={ isParentChainConfigured }
+    >
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={ !isParentChainConfigured }
+        { ...props }
+      >
+        Claim
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.memo(WithdrawalClaimButton);

src/features/rollup/optimism/components/OptimisticL2ClaimButton.tsx

@@ -14,6 +14,8 @@ import { Button } from 'src/toolkit/chakra/button';
 import { Link } from 'src/toolkit/chakra/link';
 import { useDisclosure } from 'src/toolkit/hooks/useDisclosure';
 
+import WithdrawalClaimButton from '../../common/components/WithdrawalClaimButton';
+
 const rollupFeature = config.features.rollup;
 
 export const canClaimDirectlyGuard = (data: Omit<schemas['OptimismTransactionWithdrawal'], 'nonce'>) => {
@@ -57,7 +59,11 @@ const OptimisticL2ClaimButton = ({ data, from, onSuccess, source }: Props) => {
             />
           </Web3Boundary>
         ) }
-        <Button variant="outline" size="sm" onClick={ modal.onOpen }>Claim</Button>
+        <WithdrawalClaimButton
+          onClick={ modal.onOpen }
+        >
+          Claim
+        </WithdrawalClaimButton>
       </>
     );
   }

tools/dev-server/registry.json

@@ -12,7 +12,7 @@
   "garnet": "https://explorer.garnetchain.com",
   "gnosis": "https://gnosis.blockscout.com",
   "gnosis_chiado": "https://gnosis-chiado.blockscout.com",
-  "hpp": "https://hpp.blockscout.com",
+  "hpp": "https://explorer.hpp.io",
   "immutable": "https://explorer.immutable.com",
   "mega_eth": "https://megaeth.blockscout.com",
   "multichain": "https://explorer.blockscout.com",