Spend Permissions

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

function App() {
  return (
    <CDPHooksProvider
      config={{
        projectId: "your-project-id",
        ethereum: {
          createOnLogin: "smart",
          enableSpendPermissions: true, // Enable spend permissions for Smart Accounts
        }
      }}
    >
      <YourApp />
    </CDPHooksProvider>
  );
}

import { useCreateSpendPermission } from "@coinbase/cdp-hooks";
import { parseUnits } from "viem";

function CreateSpendPermission() {
  const { createSpendPermission, status, data, error } = useCreateSpendPermission();

  const handleCreatePermission = async () => {
    try {
      const result = await createSpendPermission({
        network: "base-sepolia",
        spender: "0x1399BE2B2E4186C209617053822C67173E8DFe5c", // Address that can spend tokens
        token: "usdc", // Supports "usdc", "eth", or token address
        allowance: parseUnits("10", 6), // 10 USDC (6 decimals)
        periodInDays: 7, // Weekly limit
        useCdpPaymaster: true, // Use CDP Paymaster for gas sponsorship
      });

      console.log("Spend Permission Created! User Operation Hash:", result.userOperationHash);
    } catch (error) {
      console.error("Failed to create spend permission:", error);
    }
  };

  return (
    <div>
      {status === "idle" && <p>Ready to create spend permission</p>}
      
      {status === "pending" && (
        <div>
          <p>Creating spend permission...</p>
          {data && <p>User Op Hash: {data.userOpHash}</p>}
        </div>
      )}
      
      {status === "success" && data && (
        <div>
          <p>Spend permission created successfully!</p>
          <p>User Operation Hash: {data.userOpHash}</p>
          <p>Transaction Hash: {data.transactionHash}</p>
          <p>Status: {data.status}</p>
        </div>
      )}
      
      {status === "error" && (
        <div>
          <p>Failed to create spend permission</p>
          <p>Error: {error?.message}</p>
        </div>
      )}
      
      <button onClick={handleCreatePermission} disabled={status === "pending"}>
        {status === "pending" ? "Creating..." : "Create Spend Permission"}
      </button>
    </div>
  );
}

import { useCreateSpendPermission } from "@coinbase/cdp-hooks";
import { parseUnits, parseEther } from "viem";

// USDC spend permission with daily limit
const usdcPermission = await createSpendPermission({
  network: "base",
  spender: "0x...",
  token: "usdc", // Convenient shortcut for USDC
  allowance: parseUnits("100", 6), // 100 USDC (6 decimals)
  periodInDays: 1, // Daily limit
  useCdpPaymaster: true,
});

// ETH spend permission with weekly limit
const ethPermission = await createSpendPermission({
  network: "base-sepolia",
  spender: "0x...",
  token: "eth", // Convenient shortcut for native ETH
  allowance: parseEther("0.1"), // 0.1 ETH
  periodInDays: 7, // Weekly limit
  paymasterUrl: "https://your-paymaster.example.com", // Custom paymaster
});

// Custom token with monthly limit
const customTokenPermission = await createSpendPermission({
  network: "base-sepolia",
  spender: "0x...",
  token: "0x4200000000000000000000000000000000000006", // WETH address
  allowance: parseEther("5"), // 5 WETH
  periodInDays: 30, // Monthly limit
  useCdpPaymaster: true,
});

import { useListSpendPermissions, useCurrentUser } from "@coinbase/cdp-hooks";
import { useState } from "react";

function ListSpendPermissions() {
  const { currentUser } = useCurrentUser();
  const [currentPageToken, setCurrentPageToken] = useState<string | undefined>(undefined);
  
  const { 
    refetch: listSpendPermissionsRefetch, 
    data, 
    error, 
    status 
  } = useListSpendPermissions({
    pageToken: currentPageToken,
  });

  const hasSmartAccount = !!currentUser?.evmSmartAccounts?.[0];

  const fetchNextPage = () => {
    if (!data?.nextPageToken) return;
    setCurrentPageToken(data.nextPageToken);
  };

  return (
    <div>
      <button 
        onClick={listSpendPermissionsRefetch}
        disabled={!hasSmartAccount}
      >
        Refresh Spend Permissions
      </button>
      
      {!hasSmartAccount && (
        <p style={{ color: 'red' }}>
          You need a Smart Account to list spend permissions.
        </p>
      )}

      {status === "idle" && (
        <p>No spend permissions listing in progress</p>
      )}
      
      {status === "pending" && (
        <p>Listing spend permissions...</p>
      )}
      
      {status === "success" && data && (
        <div>
          <h3>Spend permissions listed successfully!</h3>
          {data.spendPermissions?.map((spendPermission) => (
            <div key={spendPermission.permissionHash}>
              <p>Permission Hash: {spendPermission.permissionHash}</p>
              <p>Spender: {spendPermission.permission.spender}</p>
              <p>Token: {spendPermission.permission.token}</p>
              <p>Allowance: {spendPermission.permission.allowance}</p>
              <p>Period: {spendPermission.permission.period} seconds</p>
              <p>Revoked: {spendPermission.revoked ? "Yes" : "No"}</p>
              <p>Created: {new Date(spendPermission.createdAt).toLocaleString()}</p>
            </div>
          ))}
          
          {data.hasNextPage && (
            <button onClick={fetchNextPage}>
              Load More Permissions
            </button>
          )}
        </div>
      )}
      
      {status === "error" && (
        <div>
          <p style={{ color: 'red' }}>Failed to list spend permissions</p>
          <p>Error: {error?.message}</p>
        </div>
      )}
    </div>
  );
}

import { useRevokeSpendPermission } from "@coinbase/cdp-hooks";
import { useState } from "react";

function RevokeSpendPermission({ permissionToRevoke }) {
  const { revokeSpendPermission, status, data, error } = useRevokeSpendPermission();

  const handleRevokePermission = async () => {
    if (!permissionToRevoke?.permissionHash) return;

    try {
      // This will automatically start tracking the user operation status
      const result = await revokeSpendPermission({
        network: "base-sepolia",
        permissionHash: permissionToRevoke.permissionHash,
        useCdpPaymaster: true, // Use CDP Paymaster on Base (enabled by default on Base Sepolia)
        // Or provide a custom paymaster URL:
        // paymasterUrl: "https://your-paymaster.example.com",
      });

      console.log("Revoke initiated! User Operation Hash:", result.userOperationHash);
    } catch (error) {
      console.error("Failed to revoke spend permission:", error);
    }
  };

  return (
    <div>
      {status === "idle" && <p>Ready to revoke permission</p>}
      
      {status === "pending" && (
        <div>
          <p>Revoking spend permission...</p>
          {data && <p>User Op Hash: {data.userOpHash}</p>}
        </div>
      )}
      
      {status === "success" && data && (
        <div>
          <p>Spend permission revoked successfully!</p>
          <p>User Operation Hash: {data.userOpHash}</p>
          <p>Transaction Hash: {data.transactionHash}</p>
          <p>Status: {data.status}</p>
        </div>
      )}
      
      {status === "error" && (
        <div>
          <p>Failed to revoke spend permission</p>
          <p>Error: {error?.message}</p>
        </div>
      )}
      
      <button onClick={handleRevokePermission} disabled={status === "pending"}>
        {status === "pending" ? "Revoking..." : "Revoke Spend Permission"}
      </button>
    </div>
  );
}