Alec/pg test

biome.json

@@ -45,7 +45,7 @@
         "useArrayLiterals": "error"
       },
       "nursery": {
-        "useSortedClasses": "error"
+        "useSortedClasses": "off"
       },
       "style": {
         "noImplicitBoolean": "error",

package.json

@@ -122,6 +122,12 @@
       "import": "./esm/api/index.js",
       "default": "./esm/api/index.js"
     },
+    "./appchain": {
+      "types": "./esm/appchain/index.d.ts",
+      "module": "./esm/appchain/index.js",
+      "import": "./esm/appchain/index.js",
+      "default": "./esm/appchain/index.js"
+    },
     "./buy": {
       "types": "./esm/buy/index.d.ts",
       "module": "./esm/buy/index.js",

playground/nextjs-app-router/components/AppProvider.tsx

@@ -41,6 +41,8 @@ type State = {
   isSponsored?: boolean;
   vaultAddress?: Address;
   setVaultAddress: (vaultAddress: Address) => void;
+  appChainChainId?: number;
+  setAppChainChainId: (appChainChainId: number) => void;
 };
 
 export const defaultState: State = {
@@ -53,6 +55,8 @@ export const defaultState: State = {
   setNFTToken: () => {},
   setIsSponsored: () => {},
   setVaultAddress: () => {},
+  appChainChainId: 84532,
+  setAppChainChainId: () => {},
 };
 
 export const AppContext = createContext(defaultState);
@@ -125,6 +129,11 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     defaultValue: '0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A',
   });
 
+  const [appChainChainId, setAppChainChainId] = useStateWithStorage<number>({
+    key: 'appChainChainId',
+    parser: (v) => Number.parseInt(v),
+  });
+
   // Load initial values from localStorage
   useEffect(() => {
     const storedPaymasters = localStorage.getItem('paymasters');
@@ -170,6 +179,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         isSponsored,
         vaultAddress,
         setVaultAddress,
+        appChainChainId,
+        setAppChainChainId,
       }}
     >
       <OnchainKitProvider

playground/nextjs-app-router/components/Demo.tsx

@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
 import { OnchainKitComponent } from '@/types/onchainkit';
 import { useContext, useEffect, useState } from 'react';
 import DemoOptions from './DemoOptions';
+import AppchainBridgeDemo from './demo/AppchainBridge';
 import BuyDemo from './demo/Buy';
 import CheckoutDemo from './demo/Checkout';
 import FundButtonDemo from './demo/FundButton';
@@ -26,6 +27,7 @@ import WalletDefaultDemo from './demo/WalletDefault';
 import WalletIslandDemo from './demo/WalletIsland';
 
 const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
+  [OnchainKitComponent.AppchainBridge]: AppchainBridgeDemo,
   [OnchainKitComponent.FundButton]: FundButtonDemo,
   [OnchainKitComponent.FundCard]: FundCardDemo,
   [OnchainKitComponent.Buy]: BuyDemo,

playground/nextjs-app-router/components/DemoOptions.tsx

@@ -4,14 +4,14 @@ import { EarnOptions } from '@/components/form/earn-options';
 import { PaymasterUrl } from '@/components/form/paymaster';
 import { OnchainKitComponent } from '@/types/onchainkit';
 import { ActiveComponent } from './form/active-component';
+import { AppchainChainId } from './form/appchain-chain-id';
 import { Chain } from './form/chain';
 import { CheckoutOptions } from './form/checkout-options';
 import { IsSponsored } from './form/is-sponsored';
 import { NFTOptions } from './form/nft-options';
 import { SwapConfig } from './form/swap-config';
 import { TransactionOptions } from './form/transaction-options';
 import { WalletType } from './form/wallet-type';
-
 const COMMON_OPTIONS = [
   ActiveComponent,
   ComponentMode,
@@ -20,8 +20,12 @@ const COMMON_OPTIONS = [
 ];
 
 const COMPONENT_CONFIG: Partial<
-  Record<OnchainKitComponent, (() => React.JSX.Element)[]>
+  Record<OnchainKitComponent, React.ComponentType[]>
 > = {
+  [OnchainKitComponent.AppchainBridge]: [
+    () => <Chain chains={[{ id: 84532, name: 'Base Sepolia' }]} />,
+    AppchainChainId,
+  ],
   [OnchainKitComponent.Buy]: [Chain, PaymasterUrl, IsSponsored, SwapConfig],
   [OnchainKitComponent.Checkout]: [
     Chain,

playground/nextjs-app-router/components/OnchainProviders.tsx

@@ -7,12 +7,14 @@ import { http, createConfig } from 'wagmi';
 import { WagmiProvider } from 'wagmi';
 import { base, baseSepolia } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
+import { LRDS_CHAIN } from './custom-chains/LRDS';
 
 export const config = createConfig({
-  chains: [base, baseSepolia],
+  chains: [base, baseSepolia, LRDS_CHAIN],
   transports: {
     [base.id]: http(),
     [baseSepolia.id]: http(),
+    [LRDS_CHAIN.id]: http(),
   },
   ssr: true,
   connectors: [

playground/nextjs-app-router/components/custom-chains/B3.ts

@@ -0,0 +1,16 @@
+import { defineChain } from 'viem';
+
+export const B3_CHAIN = defineChain({
+  id: 4087967037,
+  name: 'B3 Chain',
+  nativeCurrency: {
+    name: 'Ether',
+    symbol: 'ETH',
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: ['https://b3-sepolia-rpc.l3.base.org'],
+    },
+  },
+} as const);

playground/nextjs-app-router/components/custom-chains/LRDS.ts

@@ -0,0 +1,16 @@
+import { defineChain } from 'viem';
+
+export const LRDS_CHAIN = defineChain({
+  id: 288669036,
+  name: 'Blocklords',
+  nativeCurrency: {
+    name: 'Blocklords',
+    symbol: 'LRDS',
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: ['https://blocklords-sepolia-rpc.l3.base.org'],
+    },
+  },
+});

playground/nextjs-app-router/components/demo/AppchainBridge.tsx

@@ -0,0 +1,46 @@
+import { AppchainBridge } from '@coinbase/onchainkit/appchain';
+import type { BridgeableToken } from '@coinbase/onchainkit/appchain';
+import { useContext } from 'react';
+import { baseSepolia } from 'wagmi/chains';
+import { AppContext } from '../AppProvider';
+import { LRDS_CHAIN } from '../custom-chains/LRDS';
+export default function AppchainBridgeDemo() {
+  const { appChainChainId } = useContext(AppContext);
+
+  if (!appChainChainId) {
+    return <div>AppchainChainId is not set</div>;
+  }
+
+  const bridgeableTokens = [
+    {
+      address: '0x9A7bE36dF8221F5a3971693f5d71d2c471785478',
+      remoteToken: '0x4200000000000000000000000000000000000006',
+      name: 'Blocklords',
+      symbol: 'LRDS',
+      decimals: 18,
+      chainId: 288669036,
+      image: 'https://onchainkit.xyz/favicon/48x48.png?v4-19-24',
+      isCustomGasToken: true,
+    },
+  ] as BridgeableToken[];
+
+  return (
+    <div className="mx-auto">
+      <div className="relative flex h-full w-full flex-col items-center">
+        <AppchainBridge
+          chain={baseSepolia}
+          appchain={{
+            chain: LRDS_CHAIN,
+            icon: (
+              <img
+                src="https://onchainkit.xyz/favicon/48x48.png?v4-19-24"
+                alt="LRDS"
+              />
+            ),
+          }}
+          bridgeableTokens={bridgeableTokens}
+        />
+      </div>
+    </div>
+  );
+}

playground/nextjs-app-router/components/form/active-component.tsx

@@ -69,6 +69,9 @@ export function ActiveComponent() {
             NFT Mint Card Default
           </SelectItem>
           <SelectItem value={OnchainKitComponent.Earn}>Earn</SelectItem>
+          <SelectItem value={OnchainKitComponent.AppchainBridge}>
+            Appchain Bridge
+          </SelectItem>
         </SelectContent>
       </Select>
     </div>

playground/nextjs-app-router/components/form/appchain-chain-id.tsx

@@ -0,0 +1,35 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type React from 'react';
+import { useContext, useState } from 'react';
+import { AppContext } from '../AppProvider';
+
+export function AppchainChainId() {
+  const { appChainChainId, setAppChainChainId } = useContext(AppContext);
+  const [inputValue, setInputValue] = useState(
+    appChainChainId?.toString() ?? '',
+  );
+
+  const handleAppchainChainIdChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.target.value;
+    setInputValue(value);
+    setAppChainChainId(Number.parseInt(value));
+  };
+
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="appchain-chain-id">Appchain Chain ID</Label>
+      <Input
+        type="number"
+        id="appchain-chain-id"
+        value={inputValue}
+        onChange={handleAppchainChainIdChange}
+        min="0"
+        step="0.1"
+        className="w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+      />
+    </div>
+  );
+}

playground/nextjs-app-router/components/form/chain.tsx

@@ -9,7 +9,21 @@ import {
 import { useContext } from 'react';
 import { AppContext } from '../AppProvider';
 
-export function Chain() {
+interface ChainOption {
+  id: number;
+  name: string;
+}
+
+const DEFAULT_CHAINS: ChainOption[] = [
+  { id: 84532, name: 'Base Sepolia' },
+  { id: 8453, name: 'Base' },
+];
+
+interface ChainProps {
+  chains?: ChainOption[];
+}
+
+export function Chain({ chains = DEFAULT_CHAINS }: ChainProps) {
   const { chainId, setChainId } = useContext(AppContext);
 
   return (
@@ -25,8 +39,11 @@ export function Chain() {
           <SelectValue placeholder="Select chain" />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="84532">Base Sepolia</SelectItem>
-          <SelectItem value="8453">Base</SelectItem>
+          {chains.map((chain) => (
+            <SelectItem key={chain.id} value={chain.id.toString()}>
+              {chain.name}
+            </SelectItem>
+          ))}
         </SelectContent>
       </Select>
     </div>

playground/nextjs-app-router/onchainkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.36.10",
+  "version": "0.36.11",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "qrcode": "^1.5.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "viem": "^2.21.33",
-    "wagmi": "^2.12.24"
+    "viem": "^2.23.0",
+    "wagmi": "^2.14.11"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -122,6 +122,12 @@
       "import": "./esm/api/index.js",
       "default": "./esm/api/index.js"
     },
+    "./appchain": {
+      "types": "./esm/appchain/index.d.ts",
+      "module": "./esm/appchain/index.js",
+      "import": "./esm/appchain/index.js",
+      "default": "./esm/appchain/index.js"
+    },
     "./buy": {
       "types": "./esm/buy/index.d.ts",
       "module": "./esm/buy/index.js",

playground/nextjs-app-router/types/onchainkit.ts

@@ -1,4 +1,5 @@
 export enum OnchainKitComponent {
+  AppchainBridge = 'appchain-bridge',
   FundButton = 'fund-button',
   FundCard = 'fund-card',
   Buy = 'buy',

src/appchain/bridge/abi.ts

@@ -1117,3 +1117,29 @@ export const OptimismPortalABI = [
     inputs: [],
   },
 ] as const;
+
+export const L2_TO_L1_MESSAGE_PASSER_ABI = [
+  {
+    type: 'function',
+    name: 'initiateWithdrawal',
+    inputs: [
+      {
+        name: '_target',
+        type: 'address',
+        internalType: 'address',
+      },
+      {
+        name: '_gasLimit',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+      {
+        name: '_data',
+        type: 'bytes',
+        internalType: 'bytes',
+      },
+    ],
+    outputs: [],
+    stateMutability: 'payable',
+  },
+] as const;