feat: bridge hooks

.changeset/itchy-penguins-deny.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+**feat**: added bridge hooks. by 0xAlec #1950

src/appchain/bridge/abi.ts

@@ -0,0 +1,135 @@
+export const DeployChainABI = [
+  {
+    inputs: [
+      {
+        internalType: 'uint256',
+        name: 'chainID',
+        type: 'uint256',
+      },
+    ],
+    name: 'deployAddresses',
+    outputs: [
+      {
+        components: [
+          {
+            internalType: 'address',
+            name: 'l2OutputOracle',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'systemConfig',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'optimismPortal',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'l1CrossDomainMessenger',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'l1StandardBridge',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'l1ERC721Bridge',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'optimismMintableERC20Factory',
+            type: 'address',
+          },
+        ],
+        internalType: 'struct DeployChain.DeployAddresses',
+        name: '',
+        type: 'tuple',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
+
+export const StandardBridgeABI = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: '_to',
+        type: 'address',
+      },
+      {
+        internalType: 'uint32',
+        name: '_minGasLimit',
+        type: 'uint32',
+      },
+      {
+        internalType: 'bytes',
+        name: '_extraData',
+        type: 'bytes',
+      },
+    ],
+    name: 'bridgeETHTo',
+    outputs: [],
+    stateMutability: 'payable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: '_localToken',
+        type: 'address',
+      },
+      {
+        internalType: 'address',
+        name: '_remoteToken',
+        type: 'address',
+      },
+      {
+        internalType: 'address',
+        name: '_to',
+        type: 'address',
+      },
+      {
+        internalType: 'uint256',
+        name: '_amount',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint32',
+        name: '_minGasLimit',
+        type: 'uint32',
+      },
+      {
+        internalType: 'bytes',
+        name: '_extraData',
+        type: 'bytes',
+      },
+    ],
+    name: 'bridgeERC20To',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const;
+
+export const ERC20ABI = [
+  {
+    name: 'approve',
+    type: 'function',
+    stateMutability: 'nonpayable',
+    inputs: [
+      { name: 'spender', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+    ],
+    outputs: [{ type: 'bool' }],
+  },
+] as const;

src/appchain/bridge/constants.ts

@@ -0,0 +1,49 @@
+import type { Token } from '@/token';
+import type { Address } from 'viem';
+import { base, baseSepolia } from 'viem/chains';
+
+export const APPCHAIN_DEPLOY_CONTRACT_ADDRESS = {
+  [baseSepolia.id]: '0x8B4dB9468126EA0AA6EC8f1FAEb32173de3A27c7' as Address,
+};
+
+export const ETH_BY_CHAIN: Record<number, Token> = {
+  [base.id]: {
+    name: 'ETH',
+    address: '',
+    symbol: 'ETH',
+    decimals: 18,
+    image:
+      'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
+    chainId: base.id,
+  },
+  [baseSepolia.id]: {
+    name: 'ETH',
+    address: '',
+    symbol: 'ETH',
+    decimals: 18,
+    image:
+      'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
+    chainId: baseSepolia.id,
+  },
+};
+
+export const USDC_BY_CHAIN: Record<number, Token> = {
+  [base.id]: {
+    name: 'USDC',
+    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+    symbol: 'USDC',
+    decimals: 6,
+    image:
+      'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+    chainId: base.id,
+  },
+  [baseSepolia.id]: {
+    name: 'USDC',
+    address: '0x036CbD53842c5426634e7929541eC2318f3dCF7e',
+    symbol: 'USDC',
+    decimals: 6,
+    image:
+      'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+    chainId: baseSepolia.id,
+  },
+};

src/appchain/bridge/hooks/useAppchainConfig.test.ts

@@ -0,0 +1,95 @@
+import { getNewReactQueryTestProvider } from '@/identity/hooks/getNewReactQueryTestProvider';
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useReadContract } from 'wagmi';
+import { APPCHAIN_DEPLOY_CONTRACT_ADDRESS } from '../constants';
+import { useChainConfig } from './useAppchainConfig';
+
+vi.mock('wagmi', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('wagmi')>();
+  return {
+    ...actual,
+    useReadContract: vi.fn(),
+  };
+});
+
+const wrapper = getNewReactQueryTestProvider();
+
+const mockContractData = {
+  l2OutputOracle: '0xOutputOracle',
+  systemConfig: '0xSystemConfig',
+  optimismPortal: '0xOptimismPortal',
+  l1CrossDomainMessenger: '0xCrossDomainMessenger',
+  l1StandardBridge: '0xStandardBridge',
+  l1ERC721Bridge: '0xERC721Bridge',
+  optimismMintableERC20Factory: '0xERC20Factory',
+};
+
+describe('useChainConfig', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    (useReadContract as ReturnType<typeof vi.fn>).mockReturnValue({
+      data: mockContractData,
+      isLoading: false,
+      isError: false,
+      error: null,
+    });
+  });
+
+  it('should return config with contract addresses when successful', () => {
+    const { result } = renderHook(
+      () => useChainConfig({ l2ChainId: 8453, appchainChainId: 1 }),
+      { wrapper },
+    );
+    expect(result.current.config).toEqual({
+      chainId: 1,
+      contracts: mockContractData,
+    });
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isError).toBe(false);
+    expect(result.current.error).toBe(null);
+  });
+
+  it('should call useReadContract with correct parameters', () => {
+    renderHook(() => useChainConfig({ l2ChainId: 84532, appchainChainId: 1 }), {
+      wrapper,
+    });
+    expect(useReadContract).toHaveBeenCalledWith({
+      abi: expect.any(Array),
+      functionName: 'deployAddresses',
+      args: [BigInt(1)],
+      address: APPCHAIN_DEPLOY_CONTRACT_ADDRESS[84532],
+      query: {
+        staleTime: 1000 * 60 * 60,
+        retry: 2,
+        enabled: true,
+        gcTime: 0,
+      },
+      chainId: 84532,
+    });
+  });
+
+  it('should disable query when chainIds are not provided', () => {
+    renderHook(() => useChainConfig({ l2ChainId: 0, appchainChainId: 0 }), {
+      wrapper,
+    });
+    expect(useReadContract).toHaveBeenCalledWith(
+      expect.objectContaining({
+        query: expect.objectContaining({
+          enabled: false,
+        }),
+      }),
+    );
+  });
+
+  it('should return undefined config when error', () => {
+    (useReadContract as ReturnType<typeof vi.fn>).mockReturnValue({
+      error: new Error('test error'),
+    });
+    const { result } = renderHook(
+      () => useChainConfig({ l2ChainId: 84532, appchainChainId: 1 }),
+      { wrapper },
+    );
+    expect(result.current.config).toBeUndefined();
+  });
+});

src/appchain/bridge/hooks/useAppchainConfig.ts

@@ -0,0 +1,41 @@
+import { useReadContract } from 'wagmi';
+import { DeployChainABI } from '../abi';
+import { APPCHAIN_DEPLOY_CONTRACT_ADDRESS } from '../constants';
+import type { AppchainConfig } from '../types';
+
+export interface ChainConfigParams {
+  l2ChainId: number;
+  appchainChainId: number;
+}
+
+export function useChainConfig(params: ChainConfigParams) {
+  const { data, isLoading, isError, error } = useReadContract({
+    abi: DeployChainABI,
+    functionName: 'deployAddresses',
+    args: [BigInt(params.appchainChainId)],
+    address:
+      APPCHAIN_DEPLOY_CONTRACT_ADDRESS[
+        params.l2ChainId as keyof typeof APPCHAIN_DEPLOY_CONTRACT_ADDRESS
+      ],
+    query: {
+      staleTime: 1000 * 60 * 60, // 1 hour
+      retry: 2,
+      enabled: !!params.l2ChainId && !!params.appchainChainId,
+      gcTime: 0,
+    },
+    // Read from the L2 contract
+    chainId: params.l2ChainId,
+  });
+
+  return {
+    config: error
+      ? undefined
+      : ({
+          chainId: params.appchainChainId,
+          contracts: data,
+        } as AppchainConfig),
+    isLoading,
+    isError,
+    error,
+  };
+}