Self-Custody Withdrawals

{
  "withdrawalId": "cmh8w2k1f0003qk0l7v9d4x2a",
  "status": "pending",
  "requested": { "tokenSymbol": "USDC", "amountRaw": "41250000" },
  "destination": {
    "chainId": 8453,
    "address": "0x2f9a4c7e1b3d6f8a0c5e9b2d4f7a1c3e6b8d0f52",
    "tokenSymbol": "USDC"
  },
  "legs": [
    {
      "type": "bridge",
      "status": "planned",
      "sourceChainId": 42161,
      "destChainId": 8453,
      "amountRaw": "41250000",
      "txHash": null,
      "bridgeOperationId": null
    }
  ],
  "expected": { "outputRaw": "41210000", "feeRaw": "40000", "etaSeconds": null },
  "pricingStatus": "quoted",
  "completedAmountRaw": null,
  "errorMessage": null,
  "sources": [
    {
      "sourceId": "…",
      "chainId": 42161,
      "tokenSymbol": "USDC",
      "tokenAddress": "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
      "decimals": 6,
      "amountRaw": "41250000",
      "status": "pending",
      "txHash": null,
      "bridgeOperationId": null
    }
  ],
  "pendingSignatures": [
    {
      "stepId": "…",
      "type": "eip712",
      "venue": "relay",
      "signerAddress": "0x8d2c1f4a7b3e9d6c0a5f2e8b1d4c7a9e3f6b0d25",
      "payload": { "domain": {}, "types": {}, "primaryType": "…", "message": {} },
      "expiresAt": "2026-11-02T14:03:10.000Z"
    }
  ]
}

import { selfCustodyApproveMode, useAggWalletSigner } from "@agg-build/hooks";

const walletSigner = useAggWalletSigner();
const approveMode = selfCustodyApproveMode(walletSigner, [signingAddress]);

import { useState } from "react";
import { useWithdrawFlow, useWithdrawalSignatures } from "@agg-build/hooks";

function WalletWithdraw({ signingAddress }: { signingAddress: string }) {
  const [open, setOpen] = useState(true);
  const flow = useWithdrawFlow({ open, onOpenChange: setOpen, signingAddress });
  const { withdrawFlow } = flow;

  // Sign with the wallet the withdrawal was submitted with, not a later selection.
  const signing = useWithdrawalSignatures({
    withdrawalId: withdrawFlow.withdrawalId,
    signingAddress: withdrawFlow.submittedSigningAddress ?? null,
    pendingSignatures: withdrawFlow.pendingSignatures,
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); void flow.onSelectWithdrawProvider("wallet"); }}>
      <p>Available: {withdrawFlow.withdrawable ?? "…"} {withdrawFlow.selectedToken}</p>
      <input value={withdrawFlow.amount} onChange={(e) => flow.onWithdrawAmountChange(e.target.value)} />
      <button type="button" onClick={flow.onMaxClick}>Max</button>
      <input
        value={withdrawFlow.destinationWallet}
        onChange={(e) => flow.onWithdrawDestinationChange(e.target.value)}
      />
      <button type="submit" disabled={withdrawFlow.availability?.loading}>Withdraw</button>
      {signing.awaiting && <p>Confirm in your wallet ({signing.awaiting.type})</p>}
      {signing.needsConnect && <p>Connect {signing.needsConnect} to continue</p>}
      {signing.error && <p>{signing.error.message}</p>}
    </form>
  );
}

import type { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, type Config } from "wagmi";
import { WalletProvider } from "@solana/wallet-adapter-react";
import type { AggClient } from "@agg-build/sdk";
import { AggProvider, AggWalletSignerProvider } from "@agg-build/hooks";
import { useWagmiSolanaWalletSigner } from "@agg-build/hooks/self-custody";
import { WithdrawModal } from "@agg-build/ui/modals";

const queryClient = new QueryClient();

// The signer hook reads the wagmi and Solana wallet contexts, so it runs inside both providers.
function AggWithSigner({ client, children }: { client: AggClient; children: ReactNode }) {
  const signer = useWagmiSolanaWalletSigner();
  return (
    <AggProvider
      client={client}
      config={{ features: { tradingCustody: "both", enableSelfCustodyWithdraw: true } }}
    >
      <AggWalletSignerProvider value={signer}>{children}</AggWalletSignerProvider>
    </AggProvider>
  );
}

export function Providers({
  client,
  wagmiConfig,
  children,
}: {
  client: AggClient;
  wagmiConfig: Config;
  children: ReactNode;
}) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <WalletProvider wallets={[]} autoConnect>
          <AggWithSigner client={client}>{children}</AggWithSigner>
        </WalletProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

// Anywhere below Providers:
<WithdrawModal open={open} onOpenChange={setOpen} />;