Hooks

Hooks Principais

`useAnyspendQuote`

Obtenha informações de preços em tempo real para trocas de tokens e transações entre cadeias.

Uso Básico

import { useAnyspendQuote } from "@b3dotfun/sdk/anyspend";

const {
  anyspendQuote,
  isLoadingAnyspendQuote,
  getAnyspendQuoteError,
  refetchAnyspendQuote
} = useAnyspendQuote(quoteRequest);

Parâmetros

quoteRequest

QuoteRequest

required

Objeto de configuração de cotação

Interface QuoteRequest

Definição de Tipo

interface QuoteRequest {
  srcChain: number;              // ID da cadeia de origem
  dstChain: number;              // ID da cadeia de destino
  srcTokenAddress: string;       // Endereço do contrato do token de origem
  dstTokenAddress: string;       // Endereço do contrato do token de destino
  type: "swap" | "custom";       // Tipo de ordem
  tradeType: "EXACT_INPUT" | "EXACT_OUTPUT";
  amount: string;                // Quantidade na menor unidade (wei)
}

Valores de Retorno

anyspendQuote

QuoteResponse | null

Dados da cotação com preços e taxas

isLoadingAnyspendQuote

boolean

Indicador de estado de carregamento

getAnyspendQuoteError

Error | null

Objeto de erro se a cotação falhar

refetchAnyspendQuote

() => void

Função para atualizar manualmente a cotação

Exemplo de Uso

Componente de Cotação de Troca

function SwapQuote() {
  const quoteRequest = {
    srcChain: 1,           // Ethereum
    dstChain: 8333,        // B3
    srcTokenAddress: "0xA0b86a33E6Fb6Dd9a9B3d8B5FEb2b3C8e7D9Ff1E", // USDC
    dstTokenAddress: "0x0000000000000000000000000000000000000000", // ETH
    type: "swap",
    tradeType: "EXACT_INPUT",
    amount: "1000000", // 1 USDC (6 decimais)
  };

  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } =
    useAnyspendQuote(quoteRequest);

  if (isLoadingAnyspendQuote) return <div>Obtendo melhor preço...</div>;
  if (getAnyspendQuoteError) return <div>Falha ao obter cotação</div>;

  return (
    <div>
      <p>Você receberá: {anyspendQuote?.expectedOutput} ETH</p>
      <p>Taxa de rede: ${anyspendQuote?.networkFeeUsd}</p>
      <p>Taxa de serviço: ${anyspendQuote?.serviceFeeUsd}</p>
      <p>Custo total: ${anyspendQuote?.totalUsdCost}</p>
    </div>
  );
}

`useAnyspendCreateOrder`

Crie e execute ordens AnySpend com tratamento de erro abrangente.

Uso Básico

import { useAnyspendCreateOrder } from "@b3dotfun/sdk/anyspend";

const {
  createOrder,
  isCreatingOrder,
  createOrderError
} = useAnyspendCreateOrder(options);

Parâmetros

options

CreateOrderOptions

Objeto de configuração com funções de callback

Interface CreateOrderOptions

Definição de Tipo

interface CreateOrderOptions {
  onSuccess?: (data: OrderResponse) => void;
  onError?: (error: Error) => void;
  onSettled?: () => void;
}

Valores de Retorno

createOrder

(request: CreateOrderRequest) => void

Função para criar e executar uma ordem

isCreatingOrder

boolean

Indicador de estado de criação da ordem

createOrderError

Error | null

Objeto de erro se a criação da ordem falhar

Exemplo de Uso

Formulário de Pagamento

function PaymentForm() {
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
    onSuccess: (data) => {
      console.log("Ordem criada:", data.data.id);
      // Redirecionar para pagamento ou mostrar sucesso
      router.push(`/payment/${data.data.id}`);
    },
    onError: (error) => {
      console.error("Falha na ordem:", error.message);
      toast.error("Pagamento falhou. Por favor, tente novamente.");
    },
  });

  const handlePayment = () => {
    createOrder({
      recipientAddress: userWalletAddress,
      orderType: "swap",
      srcChain: 1,
      dstChain: 8333,
      srcToken: {
        chainId: 1,
        address: "0xA0b86a33E6Fb6Dd9a9B3d8B5FEb2b3C8e7D9Ff1E",
        name: "USD Coin",
        symbol: "USDC",
        decimals: 6,
      },
      dstToken: {
        chainId: 8333,
        address: "0x0000000000000000000000000000000000000000",
        name: "Ether",
        symbol: "ETH",
        decimals: 18,
      },
      srcAmount: "1000000", // 1 USDC
      expectedDstAmount: "500000000000000000", // ~0.5 ETH
      creatorAddress: userWalletAddress,
    });
  };

  return (
    <button
      onClick={handlePayment}
      disabled={isCreatingOrder}
    >
      {isCreatingOrder ? "Processando..." : "Pagar com Cripto"}
    </button>
  );
}

`useAnyspendOrderAndTransactions`

Monitore o status da ordem e rastreie as transações da blockchain associadas em tempo real.

Uso Básico

import { useAnyspendOrderAndTransactions } from "@b3dotfun/sdk/anyspend";

const {
  orderAndTransactions,
  isLoadingOrderAndTransactions,
  getOrderAndTransactionsError
} = useAnyspendOrderAndTransactions(orderId);

Parâmetros

orderId

string

required

ID da ordem para rastrear e monitorar

Valores de Retorno

orderAndTransactions

OrderWithTransactions | null

Dados completos da ordem com detalhes da transação

isLoadingOrderAndTransactions

boolean

Indicador de estado de carregamento

getOrderAndTransactionsError

Error | null

Objeto de erro se a busca falhar

Interface OrderWithTransactions

Definição de Tipo

interface OrderWithTransactions {
  data: {
    order: Order;               // Detalhes e status da ordem
    depositTxs: Transaction[];  // Transações de depósito do usuário
    relayTx?: Transaction;      // Transação de relay entre cadeias
    executeTx?: Transaction;    // Transação de execução final
    refundTxs: Transaction[];   // Transações de reembolso (se houver)
  };
}

Exemplo de Uso

Rastreador de Ordem

function OrderTracker({ orderId }: { orderId: string }) {
  const { orderAndTransactions, isLoadingOrderAndTransactions } =
    useAnyspendOrderAndTransactions(orderId);

  if (isLoadingOrderAndTransactions) {
    return <div>Carregando status da ordem...</div>;
  }

  if (!orderAndTransactions) {
    return <div>Ordem não encontrada</div>;
  }

  const { order, depositTxs, executeTx, refundTxs } = orderAndTransactions.data;

  const getStatusMessage = (status: string) => {
    switch (status) {
      case "scanning_deposit_transaction":
        return "⏳ Aguardando confirmação do pagamento...";
      case "relay":
        return "🔄 Processando transação entre cadeias...";
      case "executed":
        return "✅ Transação concluída com sucesso!";
      case "refunded":
        return "↩️ Reembolso processado";
      default:
        return "🔄 Processando...";
    }
  };

  return (
    <div className="order-status">
      <h2>Ordem #{orderId.slice(0, 8)}</h2>
      <p>{getStatusMessage(order.status)}</p>

      {depositTxs.length > 0 && (
        <div>
          <h3>Transação de Pagamento</h3>
          <a
            href={`https://etherscan.io/tx/${depositTxs[0].txHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            Ver no Etherscan
          </a>
        </div>
      )}

      {executeTx && (
        <div>
          <h3>Transação de Execução</h3>
          <a
            href={`https://explorer.b3.fun/tx/${executeTx.txHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            Ver no Explorador B3
          </a>
        </div>
      )}

      {order.errorDetails && (
        <div className="error">
          <strong>Erro:</strong> {order.errorDetails}
        </div>
      )}
    </div>
  );
}

`useAnyspendOrderHistory`

Recupere o histórico de ordens paginado para um endereço de usuário.

Uso Básico

import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend";

const {
  orderHistory,
  isLoadingOrderHistory,
  getOrderHistoryError
} = useAnyspendOrderHistory(creatorAddress, limit, offset);

Parâmetros

creatorAddress

string

required

Endereço da carteira do usuário

limit

number

required

Número de ordens para buscar (máximo 100)

offset

number

required

Offset de paginação

Exemplo de Uso

Componente de Histórico de Ordens

function OrderHistory({ userAddress }: { userAddress: string }) {
  const [page, setPage] = useState(0);
  const pageSize = 10;

  const { orderHistory, isLoadingOrderHistory } = useAnyspendOrderHistory(
    userAddress,
    pageSize,
    page * pageSize
  );

  if (isLoadingOrderHistory) {
    return <div>Carregando histórico de ordens...</div>;
  }

  return (
    <div>
      <h2>Suas Ordens</h2>
      {orderHistory?.data.map((order) => (
        <div key={order.id} className="order-item">
          <p>Tipo: {order.type}</p>
          <p>Status: {order.status}</p>
          <p>Quantidade: {order.srcAmount} {order.srcToken.symbol}</p>
          <p>Data: {new Date(order.createdAt).toLocaleDateString()}</p>
        </div>
      ))}

      <button
        onClick={() => setPage(page - 1)}
        disabled={page === 0}
      >
        Anterior
      </button>
      <button
        onClick={() => setPage(page + 1)}
        disabled={!orderHistory?.data || orderHistory.data.length < pageSize}
      >
        Próximo
      </button>
    </div>
  );
}

Hooks Adicionais

`useAnyspendTokens`

Obtenha tokens disponíveis para uma cadeia específica.

Lista de Tokens

const { tokens, isLoadingTokens } = useAnyspendTokens(1, "USDC");

`useCoinbaseOnrampOptions`

Obtenha a configuração de onramp da Coinbase para pagamentos em fiat.

Onramp da Coinbase

const { coinbaseOptions, isLoadingCoinbaseOptions } = useCoinbaseOnrampOptions();

`useStripeClientSecret`

Obtenha a intenção de pagamento do Stripe para pagamentos com cartão de crédito.

Integração com Stripe

const { clientSecret, isLoadingClientSecret } = useStripeClientSecret(orderData);

Padrões de Hook

Padrão de Tratamento de Erros

Tratamento de Erros

function PaymentComponent() {
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
    onError: (error) => {
      // Registrar erro para depuração
      console.error("Pagamento falhou:", error);

      // Mostrar mensagem amigável ao usuário
      switch (error.message) {
        case "INSUFFICIENT_BALANCE":
          toast.error("Saldo insuficiente. Por favor, adicione fundos.");
          break;
        case "SLIPPAGE":
          toast.error("Movimento de preço desfavorável. Por favor, tente novamente.");
          break;
        default:
          toast.error("Pagamento falhou. Por favor, tente novamente.");
      }
    },
  });

  // Implementação do componente...
}

Padrão de Estado de Carregamento

Estados de Carregamento

function SwapInterface() {
  const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(quoteRequest);
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder();

  const isLoading = isLoadingAnyspendQuote || isCreatingOrder;

  return (
    <div>
      {isLoading && <LoadingSpinner />}
      {/* Resto do componente */}
    </div>
  );
}

Padrão de Atualizações em Tempo Real

Atualizações em Tempo Real

function OrderStatus({ orderId }: { orderId: string }) {
  const { orderAndTransactions } = useAnyspendOrderAndTransactions(orderId);

  // Auto-atualização a cada 5 segundos para ordens pendentes
  useEffect(() => {
    if (orderAndTransactions?.data.order.status === "relay") {
      const interval = setInterval(() => {
        // A atualização é tratada automaticamente pelo hook
      }, 5000);

      return () => clearInterval(interval);
    }
  }, [orderAndTransactions?.data.order.status]);

  // Implementação do componente...
}

Próximos Passos

Ver Exemplos

Navegue por exemplos de implementações do mundo real

Tratamento de Erros

Aprenda estratégias abrangentes de tratamento de erros

Referência de Componentes

Explore componentes pré-construídos

Getting Started

React

REST API

Advanced

Hooks Principais

`useAnyspendQuote`

Parâmetros

Interface QuoteRequest

Valores de Retorno

Exemplo de Uso

`useAnyspendCreateOrder`

Parâmetros

Interface CreateOrderOptions

Valores de Retorno

Exemplo de Uso

`useAnyspendOrderAndTransactions`

Parâmetros

Valores de Retorno

Interface OrderWithTransactions

Exemplo de Uso

`useAnyspendOrderHistory`

Parâmetros

Exemplo de Uso

Hooks Adicionais

`useAnyspendTokens`

`useCoinbaseOnrampOptions`

`useStripeClientSecret`

Padrões de Hook

Padrão de Tratamento de Erros

Padrão de Estado de Carregamento

Padrão de Atualizações em Tempo Real

Próximos Passos

Ver Exemplos

Tratamento de Erros

Referência de Componentes

Getting Started

React

REST API

Advanced

​Hooks Principais

​useAnyspendQuote

​Parâmetros

​Interface QuoteRequest

​Valores de Retorno

​Exemplo de Uso

​useAnyspendCreateOrder

​Parâmetros

​Interface CreateOrderOptions

​Valores de Retorno

​Exemplo de Uso

​useAnyspendOrderAndTransactions

​Parâmetros

​Valores de Retorno

​Interface OrderWithTransactions

​Exemplo de Uso

​useAnyspendOrderHistory

​Parâmetros

​Exemplo de Uso

​Hooks Adicionais

​useAnyspendTokens

​useCoinbaseOnrampOptions

​useStripeClientSecret

​Padrões de Hook

​Padrão de Tratamento de Erros

​Padrão de Estado de Carregamento

​Padrão de Atualizações em Tempo Real

​Próximos Passos

Ver Exemplos

Tratamento de Erros

Referência de Componentes

Hooks Principais

`useAnyspendQuote`

Parâmetros

Interface QuoteRequest

Valores de Retorno

Exemplo de Uso

`useAnyspendCreateOrder`

Parâmetros

Interface CreateOrderOptions

Valores de Retorno

Exemplo de Uso

`useAnyspendOrderAndTransactions`

Parâmetros

Valores de Retorno

Interface OrderWithTransactions

Exemplo de Uso

`useAnyspendOrderHistory`

Parâmetros

Exemplo de Uso

Hooks Adicionais

`useAnyspendTokens`

`useCoinbaseOnrampOptions`

`useStripeClientSecret`

Padrões de Hook

Padrão de Tratamento de Erros

Padrão de Estado de Carregamento

Padrão de Atualizações em Tempo Real

Próximos Passos