Token Swaps

import { useGetSwapPrice } from "@coinbase/cdp-hooks";
import { useId, useState } from "react";

function SwapPriceDisplay() {
  const inputId = useId();
  const [fromAmount, setFromAmount] = useState("1000000");

  const { data, status, error, refetch, reset } = useGetSwapPrice({
    network: "base",
    fromToken: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
    toToken: "0x4200000000000000000000000000000000000006",
    fromAmount,
    slippageBps: 100, // 1% max slippage
  });

  return (
    <div>
      <label htmlFor={inputId}>Amount in atomic units</label>
      <input
        id={inputId}
        value={fromAmount}
        onChange={(e) => setFromAmount(e.target.value)}
      />

      {status === "pending" && <p>Loading price...</p>}

      {data?.liquidityAvailable && (
        <div>
          <p>Expected output: {data.toAmount}</p>
          <p>Minimum output: {data.minToAmount}</p>
          {data.totalNetworkFee && <p>Network fee: {data.totalNetworkFee}</p>}
          {data.fees && <p>Fees: {JSON.stringify(data.fees)}</p>}
          {data.issues && <p>Issues: {JSON.stringify(data.issues)}</p>}
        </div>
      )}

      {data && !data.liquidityAvailable && (
        <p>No liquidity available for this pair</p>
      )}

      {error && <p>Error: {error.message}</p>}

      <button onClick={refetch} disabled={status === "pending"}>
        Refresh Price
      </button>
      <button onClick={reset}>
        Clear
      </button>
    </div>
  );
}

import { useSwap } from "@coinbase/cdp-hooks";

function ExecuteSwap() {
  const { swap, data, status, error } = useSwap();

  const handleSwap = async () => {
    await swap({
      network: "base",
      fromToken: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
      toToken: "0x4200000000000000000000000000000000000006",
      fromAmount: "1000000",
      slippageBps: 100,
    });
  };

  return (
    <div>
      {status === "idle" && (
        <button onClick={handleSwap}>Swap</button>
      )}

      {status === "pending" && (
        <div>
          <p>Swap in progress...</p>
          {data?.type === "evm-eoa" && (
            <p>Tx: {data.transactionHash}</p>
          )}
          {data?.type === "evm-smart" && (
            <p>UserOp: {data.userOpHash}</p>
          )}
        </div>
      )}

      {status === "success" && data && (
        <div>
          <p>Swap confirmed!</p>
          <p>Sold: {data.fromAmount} ({data.fromToken})</p>
          <p>Expected: {data.toAmount} ({data.toToken})</p>
        </div>
      )}

      {status === "error" && (
        <p>Swap failed: {error?.message}</p>
      )}
    </div>
  );
}