feat: export appchain bridge components, hooks, and types (#1984)

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",

src/appchain/bridge/hooks/useDeposit.ts

@@ -1,20 +1,13 @@
 import { useCallback, useState } from 'react';
 import { parseEther, parseUnits } from 'viem';
-import type { Chain, Hex } from 'viem';
+import type { Hex } from 'viem';
 import { useAccount, useConfig, useSwitchChain, useWriteContract } from 'wagmi';
 import { waitForTransactionReceipt } from 'wagmi/actions';
 import { ERC20ABI, OptimismPortalABI, StandardBridgeABI } from '../abi';
 import { EXTRA_DATA, MIN_GAS_LIMIT } from '../constants';
-import type { AppchainConfig } from '../types';
-import type { BridgeParams } from '../types';
+import type { UseDepositParams } from '../types';
 import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 
-interface DepositParams {
-  config: AppchainConfig;
-  from: Chain;
-  bridgeParams: BridgeParams;
-}
-
 export function useDeposit() {
   const { writeContractAsync, data } = useWriteContract();
   const { switchChainAsync } = useSwitchChain();
@@ -29,7 +22,7 @@ export function useDeposit() {
   }, []);
 
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: ignore
-  const deposit = async ({ config, from, bridgeParams }: DepositParams) => {
+  const deposit = async ({ config, from, bridgeParams }: UseDepositParams) => {
     if (!bridgeParams.recipient) {
       throw new Error('Recipient is required');
     }

src/appchain/bridge/hooks/useDepositButton.tsx

@@ -1,19 +1,13 @@
 import { Spinner } from '@/internal/components/Spinner';
 import { useMemo } from 'react';
 import { useAccount } from 'wagmi';
-import type { BridgeParams } from '../types';
-
-interface UseDepositButtonProps {
-  depositStatus: string;
-  withdrawStatus: string;
-  bridgeParams: BridgeParams;
-}
+import type { UseDepositButtonParams } from '../types';
 
 export function useDepositButton({
   depositStatus,
   withdrawStatus,
   bridgeParams,
-}: UseDepositButtonProps) {
+}: UseDepositButtonParams) {
   const { isConnected } = useAccount();
 
   const isPending =

src/appchain/bridge/hooks/useWithdraw.ts

@@ -1,12 +1,5 @@
 import { useCallback, useState } from 'react';
-import {
-  type Chain,
-  type Hex,
-  erc20Abi,
-  keccak256,
-  parseEther,
-  parseUnits,
-} from 'viem';
+import { type Hex, erc20Abi, keccak256, parseEther, parseUnits } from 'viem';
 import { getWithdrawalHashStorageSlot, getWithdrawals } from 'viem/op-stack';
 import { useAccount, useConfig, useSwitchChain, useWriteContract } from 'wagmi';
 import {
@@ -28,18 +21,11 @@ import {
   MIN_GAS_LIMIT,
   OUTPUT_ROOT_PROOF_VERSION,
 } from '../constants';
-import type { AppchainConfig } from '../types';
-import type { BridgeParams } from '../types';
+import type { UseWithdrawParams } from '../types';
 import { getOutput } from '../utils/getOutput';
 import { isUserRejectedRequestError } from '../utils/isUserRejectedRequestError';
 import { maybeAddProofNode } from '../utils/maybeAddProofNode';
 
-interface UseWithdrawParams {
-  config: AppchainConfig;
-  chain: Chain;
-  bridgeParams: BridgeParams;
-}
-
 export const useWithdraw = ({
   config,
   chain,

src/appchain/bridge/hooks/useWithdrawButton.tsx

@@ -1,23 +1,8 @@
 import { Spinner } from '@/internal/components/Spinner';
 import { useMemo } from 'react';
-import type { ReactNode } from 'react';
+import type { UseWithdrawButtonParams } from '../types';
 
-interface UseWithdrawButtonProps {
-  withdrawStatus: string;
-}
-
-interface UseWithdrawButtonReturn {
-  isPending: boolean;
-  isSuccess: boolean;
-  buttonDisabled: boolean;
-  buttonContent: ReactNode;
-  shouldShowClaim: boolean;
-  label: string;
-}
-
-export function useWithdrawButton({
-  withdrawStatus,
-}: UseWithdrawButtonProps): UseWithdrawButtonReturn {
+export function useWithdrawButton({ withdrawStatus }: UseWithdrawButtonParams) {
   const isPending = withdrawStatus === 'claimPending';
   const isSuccess = withdrawStatus === 'claimSuccess';
   const buttonDisabled = isPending;

src/appchain/bridge/types.ts

@@ -29,6 +29,9 @@ export type AppchainBridgeReact = {
   bridgeableTokens?: BridgeableToken[];
 };
 
+/**
+ * Note: exported as public Type
+ */
 export type AppchainBridgeContextType = {
   // Configuration
   config: AppchainConfig;
@@ -92,14 +95,54 @@ export type AppchainConfig = {
   };
 };
 
+/**
+ * Note: exported as public Type
+ */
 export type BridgeParams = {
   amount: string;
   amountUSD: string;
   token: BridgeableToken;
   recipient?: Address;
 };
 
-export type FinalizeWithdrawalParams = {
+/**
+ * Note: exported as public Type
+ */
+export type ChainConfigParams = {
+  config: AppchainConfig;
+  chain: Chain;
+};
+
+/**
+ * Note: exported as public Type
+ */
+export type UseDepositParams = {
+  config: AppchainConfig;
+  from: Chain;
+  bridgeParams: BridgeParams;
+};
+
+/**
+ * Note: exported as public Type
+ */
+export type UseWithdrawParams = {
   config: AppchainConfig;
   chain: Chain;
+  bridgeParams: BridgeParams;
+};
+
+/**
+ * Note: exported as public Type
+ */
+export type UseDepositButtonParams = {
+  depositStatus: string;
+  withdrawStatus: string;
+  bridgeParams: BridgeParams;
+};
+
+/**
+ * Note: exported as public Type
+ */
+export type UseWithdrawButtonParams = {
+  withdrawStatus: string;
 };

src/appchain/index.ts

@@ -0,0 +1,35 @@
+// 🌲☀🌲
+// Components
+export { AppchainBridge } from './bridge/components/AppchainBridge';
+export { AppchainBridgeProvider } from './bridge/components/AppchainBridgeProvider';
+export { AppchainBridgeInput } from './bridge/components/AppchainBridgeInput';
+export { AppchainBridgeNetwork } from './bridge/components/AppchainBridgeNetwork';
+export { AppchainBridgeTransactionButton } from './bridge/components/AppchainBridgeTransactionButton';
+export { AppchainBridgeWithdraw } from './bridge/components/AppchainBridgeWithdraw';
+export { AppchainNetworkToggleButton } from './bridge/components/AppchainNetworkToggleButton';
+
+// Hooks
+export { useChainConfig } from './bridge/hooks/useAppchainConfig';
+export { useDeposit } from './bridge/hooks/useDeposit';
+export { useWithdraw } from './bridge/hooks/useWithdraw';
+export { useDepositButton } from './bridge/hooks/useDepositButton';
+export { useWithdrawButton } from './bridge/hooks/useWithdrawButton';
+export { useAppchainBridgeContext } from './bridge/components/AppchainBridgeProvider';
+
+// Utils
+export { getETHPrice } from './bridge/utils/getETHPrice';
+export { getOutput } from './bridge/utils/getOutput';
+export { defaultPriceFetcher } from './bridge/utils/defaultPriceFetcher';
+
+// Types
+export type {
+  ChainConfigParams,
+  UseDepositParams,
+  UseWithdrawParams,
+  UseDepositButtonParams,
+  UseWithdrawButtonParams,
+  Appchain,
+  AppchainBridgeReact,
+  AppchainConfig,
+  BridgeableToken,
+} from './bridge/types';