@b3dotfun/sdk 0.0.8 → 0.0.9-alpha.0

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -3,26 +3,16 @@
 import {
   ALL_CHAINS,
   capitalizeFirstLetter,
-  DepositTransaction,
   EVM_CHAINS,
-  ExecuteTransaction,
   getChainName,
   getErrorDisplay,
   getExplorerTxUrl,
   getPaymentUrl,
   getStatusDisplay,
   isNativeToken,
-  OnrampVendor,
-  Order,
-  OrderStatus,
-  OrderType,
-  RefundTransaction,
   RELAY_ETH_ADDRESS,
-  RelayTransaction,
-  zNft,
-  zToken,
-  zTournament,
 } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import {
   Badge,
   Button,
@@ -67,11 +57,11 @@ import PaymentVendorUI from "./PaymentVendorUI";
 interface OrderDetailsProps {
   isMainnet: boolean;
   mode?: "modal" | "page";
-  order: Order;
-  depositTxs: DepositTransaction[] | null;
-  relayTx: RelayTransaction | null;
-  executeTx: ExecuteTransaction | null;
-  refundTxs: RefundTransaction[] | null;
+  order: components["schemas"]["Order"];
+  depositTxs: components["schemas"]["DepositTx"][] | null;
+  relayTx: components["schemas"]["RelayTx"] | null;
+  executeTx: components["schemas"]["ExecuteTx"] | null;
+  refundTxs: components["schemas"]["RefundTx"][] | null;
   onBack?: () => void;
 }
 
@@ -84,7 +74,7 @@ function getOrderSuccessText({
   recipientName,
   centerTruncate,
 }: {
-  order: Order;
+  order: components["schemas"]["Order"];
   tournament?: any;
   formattedActualDstAmount?: string;
   dstToken: any;
@@ -95,19 +85,19 @@ function getOrderSuccessText({
 
   let actionText = "";
   switch (order.type) {
-    case OrderType.Swap:
+    case "swap":
       actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
       return `Successfully ${actionText} to ${recipient}`;
-    case OrderType.MintNFT:
+    case "mint_nft":
       actionText = `minted ${order.metadata.nft.name}`;
       return `Successfully ${actionText} to ${recipient}`;
-    case OrderType.JoinTournament:
+    case "join_tournament":
       actionText = `joined ${tournament?.name}`;
       return `Successfully ${actionText} for ${recipient}`;
-    case OrderType.FundTournament:
+    case "fund_tournament":
       actionText = `funded ${tournament?.name}`;
       return `Successfully ${actionText}`;
-    case OrderType.Custom:
+    case "custom":
       actionText = order.metadata.action || `executed contract`;
       return `Successfully ${actionText}`;
     default:
@@ -215,13 +205,11 @@ export const OrderDetails = memo(function OrderDetails({
 
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
-  const srcToken = zToken.parse(order.metadata.srcToken);
-  const dstToken = zToken.parse(order.metadata.dstToken);
-  const nft = order.type === OrderType.MintNFT ? zNft.parse(order.metadata.nft) : undefined;
+  const srcToken = order.metadata.srcToken;
+  const dstToken = order.metadata.dstToken;
+  const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
   const tournament =
-    order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament
-      ? zTournament.parse(order.metadata.tournament)
-      : undefined;
+    order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
 
   const { name: recipientName } = useOnchainName(order.recipientAddress);
   const account = useAccountWallet();
@@ -332,19 +320,19 @@ export const OrderDetails = memo(function OrderDetails({
   }
 
   const expectedDstAmount =
-    order.type === OrderType.MintNFT ||
-    order.type === OrderType.JoinTournament ||
-    order.type === OrderType.FundTournament ||
-    order.type === OrderType.Custom
+    order.type === "mint_nft" ||
+    order.type === "join_tournament" ||
+    order.type === "fund_tournament" ||
+    order.type === "custom"
       ? "0"
       : order.payload.expectedDstAmount.toString();
   const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
 
   const actualDstAmount =
-    order.type === OrderType.MintNFT ||
-    order.type === OrderType.JoinTournament ||
-    order.type === OrderType.FundTournament ||
-    order.type === OrderType.Custom
+    order.type === "mint_nft" ||
+    order.type === "join_tournament" ||
+    order.type === "fund_tournament" ||
+    order.type === "custom"
       ? undefined
       : order.payload.actualDstAmount;
   const formattedActualDstAmount = actualDstAmount
@@ -392,7 +380,7 @@ export const OrderDetails = memo(function OrderDetails({
                 <TransactionDetails
                   key={dTx.txHash}
                   title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                    order.onrampMetadata?.vendor === "stripe-web2"
                       ? `Received payment`
                       : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`
                   }
@@ -454,7 +442,7 @@ export const OrderDetails = memo(function OrderDetails({
                 <TransactionDetails
                   key={dTxs.txHash}
                   title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                    order.onrampMetadata?.vendor === "stripe-web2"
                       ? `Received payment`
                       : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
                   }
@@ -473,13 +461,13 @@ export const OrderDetails = memo(function OrderDetails({
           />
           <TransactionDetails
             title={
-              order.type === OrderType.Swap
+              order.type === "swap"
                 ? "Processed Swap"
-                : order.type === OrderType.MintNFT
+                : order.type === "mint_nft"
                   ? "Minted NFT"
-                  : order.type === OrderType.JoinTournament
+                  : order.type === "join_tournament"
                     ? "Joined Tournament"
-                    : order.type === OrderType.FundTournament
+                    : order.type === "fund_tournament"
                       ? "Funded Tournament"
                       : "Processed Order"
             }
@@ -510,7 +498,7 @@ export const OrderDetails = memo(function OrderDetails({
           </Button>
         </div>
 
-        {order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (
+        {order.type === "join_tournament" && order.status === "executed" && (
           <ShinyButton
             accentColor={"hsl(var(--as-brand))"}
             textColor="text-white"
@@ -523,7 +511,7 @@ export const OrderDetails = memo(function OrderDetails({
           </ShinyButton>
         )}
 
-        {order.status === OrderStatus.Executed && (
+        {order.status === "executed" && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
             onClick={mode === "page" ? handleBack : handleCloseModal}
@@ -558,7 +546,7 @@ export const OrderDetails = memo(function OrderDetails({
                 <TransactionDetails
                   key={dTxs.txHash}
                   title={
-                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                    order.onrampMetadata?.vendor === "stripe-web2"
                       ? `Received payment`
                       : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
                   }
@@ -572,13 +560,13 @@ export const OrderDetails = memo(function OrderDetails({
           {order.srcChain === order.dstChain ? (
             <TransactionDetails
               title={
-                order.type === OrderType.Swap
+                order.type === "swap"
                   ? "Processed Swap"
-                  : order.type === OrderType.MintNFT
+                  : order.type === "mint_nft"
                     ? "Minted NFT"
-                    : order.type === OrderType.JoinTournament
+                    : order.type === "join_tournament"
                       ? "Joined Tournament"
-                      : order.type === OrderType.FundTournament
+                      : order.type === "fund_tournament"
                         ? "Funded Tournament"
                         : "Processed Transaction"
               }
@@ -598,13 +586,13 @@ export const OrderDetails = memo(function OrderDetails({
               />
               <TransactionDetails
                 title={
-                  order.type === OrderType.Swap
+                  order.type === "swap"
                     ? "Processing Swap"
-                    : order.type === OrderType.MintNFT
+                    : order.type === "mint_nft"
                       ? "Minting NFT"
-                      : order.type === OrderType.JoinTournament
+                      : order.type === "join_tournament"
                         ? "Joining Tournament"
-                        : order.type === OrderType.FundTournament
+                        : order.type === "fund_tournament"
                           ? "Funding Tournament"
                           : "Processing Bridge"
                 }
@@ -638,7 +626,7 @@ export const OrderDetails = memo(function OrderDetails({
           </Button>
         </div>
 
-        {order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (
+        {order.type === "join_tournament" && order.status === "executed" && (
           <ShinyButton
             accentColor={"hsl(var(--as-brand))"}
             textColor="text-white"
@@ -651,7 +639,7 @@ export const OrderDetails = memo(function OrderDetails({
           </ShinyButton>
         )}
 
-        {order.status === OrderStatus.Executed && (
+        {order.status === "executed" && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
             onClick={mode === "page" ? handleBack : handleCloseModal}
@@ -687,7 +675,7 @@ export const OrderDetails = memo(function OrderDetails({
             <TransactionDetails
               key={dTxs.txHash}
               title={
-                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                order.onrampMetadata?.vendor === "stripe-web2"
                   ? `Received payment`
                   : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
               }
@@ -707,13 +695,13 @@ export const OrderDetails = memo(function OrderDetails({
           ) : depositEnoughAmount ? (
             <TransactionDetails
               title={
-                order.type === OrderType.Swap
+                order.type === "swap"
                   ? "Processing Swap"
-                  : order.type === OrderType.MintNFT
+                  : order.type === "mint_nft"
                     ? "Minting NFT"
-                    : order.type === OrderType.JoinTournament
+                    : order.type === "join_tournament"
                       ? "Joining Tournament"
-                      : order.type === OrderType.FundTournament
+                      : order.type === "fund_tournament"
                         ? "Funding Tournament"
                         : "Processing Transaction"
               }
@@ -725,7 +713,7 @@ export const OrderDetails = memo(function OrderDetails({
           ) : (
             <TransactionDetails
               title={
-                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                order.onrampMetadata?.vendor === "stripe-web2"
                   ? `Waiting for payment`
                   : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`
               }
@@ -950,7 +938,7 @@ export const OrderDetails = memo(function OrderDetails({
         <div className="text-as-primary">
           {depositEnoughAmount ? (
             "Received"
-          ) : order.status === OrderStatus.Expired ? (
+          ) : order.status === "expired" ? (
             "Expired"
           ) : (
             <TimeAgo date={new Date(order.expiredAt)} live={true} />
@@ -968,13 +956,13 @@ export const OrderDetails = memo(function OrderDetails({
           <div className="flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm">
             <div className="flex w-full items-center justify-between gap-2">
               <div className="text-as-primary/30">
-                {order.type === OrderType.Swap || order.type === OrderType.MintNFT
+                {order.type === "swap" || order.type === "mint_nft"
                   ? "Expected to receive"
-                  : order.type === OrderType.JoinTournament
+                  : order.type === "join_tournament"
                     ? "Join tournament"
-                    : order.type === OrderType.FundTournament
+                    : order.type === "fund_tournament"
                       ? "Fund tournament"
-                      : order.type === OrderType.Custom
+                      : order.type === "custom"
                         ? order.metadata.action
                           ? capitalizeFirstLetter(order.metadata.action)
                           : "Contract execution"
@@ -982,14 +970,14 @@ export const OrderDetails = memo(function OrderDetails({
               </div>
 
               <div className="flex items-end gap-2">
-                {order.type === OrderType.Swap ? (
+                {order.type === "swap" ? (
                   `~${formattedExpectedDstAmount} ${dstToken.symbol}`
-                ) : order.type === OrderType.MintNFT ? (
+                ) : order.type === "mint_nft" ? (
                   <div className="flex items-center gap-2">
                     <img src={nft?.imageUrl} alt={nft?.name || "NFT"} className="h-5 w-5" />
                     <div>{nft?.name || "NFT"}</div>
                   </div>
-                ) : order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament ? (
+                ) : order.type === "join_tournament" || order.type === "fund_tournament" ? (
                   <div className="flex items-center gap-2">
                     <img src={tournament?.imageUrl} alt={tournament?.name || "Tournament"} className="h-5 w-5" />
                     <div>{tournament?.name || "Tournament"}</div>
@@ -1071,7 +1059,7 @@ function TransactionDetails({
 }: {
   title: string;
   chainId: number;
-  tx: DepositTransaction | RelayTransaction | ExecuteTransaction | null;
+  tx: components["schemas"]["DepositTx"] | components["schemas"]["RelayTx"] | components["schemas"]["ExecuteTx"] | null;
   isProcessing: boolean;
   delay?: number;
 }) {

package/src/anyspend/react/components/common/OrderHistoryItem.tsx

@@ -1,36 +1,35 @@
-import { ALL_CHAINS, getChainName, getStatusDisplay, Order, OrderType } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, getChainName, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
 import { Badge, Button, useIsMobile } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { ArrowRight, ChevronDown } from "lucide-react";
 import TimeAgo from "react-timeago";
 import { b3 } from "viem/chains";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 interface OrderHistoryItemProps {
-  order: Order;
+  order: components["schemas"]["Order"];
   onSelectOrder?: (orderId: string) => void;
   mode: "modal" | "page";
 }
 
 export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryItemProps) {
-  const nft = order.type === OrderType.MintNFT ? order.metadata.nft : undefined;
+  const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
   const tournament =
-    order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament
-      ? order.metadata.tournament
-      : undefined;
+    order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
   const dstToken = order.metadata.dstToken;
   const actualDstAmount =
-    order.type === OrderType.MintNFT ||
-    order.type === OrderType.JoinTournament ||
-    order.type === OrderType.FundTournament ||
-    order.type === OrderType.Custom
+    order.type === "mint_nft" ||
+    order.type === "join_tournament" ||
+    order.type === "fund_tournament" ||
+    order.type === "custom"
       ? undefined
       : order.payload.actualDstAmount;
   const expectedDstAmount =
-    order.type === OrderType.MintNFT ||
-    order.type === OrderType.JoinTournament ||
-    order.type === OrderType.FundTournament ||
-    order.type === OrderType.Custom
+    order.type === "mint_nft" ||
+    order.type === "join_tournament" ||
+    order.type === "fund_tournament" ||
+    order.type === "custom"
       ? undefined
       : order.payload.expectedDstAmount;
 

package/src/anyspend/react/components/common/OrderStatus.tsx

@@ -1,10 +1,11 @@
-import { Order, OrderStatus as OrderStatusEnum, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Badge, TextShimmer } from "@b3dotfun/sdk/global-account/react";
 import { Check, Loader2 } from "lucide-react";
 import { memo } from "react";
 
-export const OrderStatus = memo(function OrderStatus({ order }: { order: Order }) {
-  const isComplete = order.status === OrderStatusEnum.Executed;
+export const OrderStatus = memo(function OrderStatus({ order }: { order: components["schemas"]["Order"] }) {
+  const isComplete = order.status === "executed";
   const { text, status: displayStatus } = getStatusDisplay(order);
 
   return (

package/src/anyspend/react/components/common/OrderToken.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, Token } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { Button, useAccountWallet, useTokenBalancesByChain } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -9,6 +9,7 @@ import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { CheckCircle2, ChevronsUpDown } from "lucide-react";
 import { useMemo } from "react";
 import { ChainTokenIcon } from "./ChainTokenIcon";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderToken({
   context,
@@ -22,8 +23,8 @@ export function OrderToken({
 }: {
   context: "from" | "to";
   address: string | undefined;
-  token: Token;
-  setToken: (token: Token) => void;
+  token: components["schemas"]["Token"];
+  setToken: (token: components["schemas"]["Token"]) => void;
   chainId: number;
   setChainId: (chainId: number) => void;
   requiredAmount: bigint | undefined;

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -4,11 +4,12 @@ import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, Token } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderTokenAmount({
   disabled,
@@ -32,8 +33,8 @@ export function OrderTokenAmount({
   onChangeInput: (value: string) => void;
   context: "from" | "to";
   address: string | undefined;
-  token: Token;
-  setToken: (token: Token) => void;
+  token: components["schemas"]["Token"];
+  setToken: (token: components["schemas"]["Token"]) => void;
   chainId: number;
   setChainId: (chainId: number) => void;
   hideTokenSelect?: boolean;

package/src/anyspend/react/components/common/PanelOnrampPayment.tsx

@@ -1,4 +1,3 @@
-import { GetQuoteResponse, Nft, OnrampVendor, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
@@ -7,6 +6,8 @@ import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 
 interface PanelOnrampPaymentProps {
   srcAmountOnRamp: string;
@@ -17,14 +18,14 @@ interface PanelOnrampPaymentProps {
   destinationTokenChainId?: number;
   destinationTokenAddress?: string;
   selectedDstChainId: number;
-  selectedDstToken: Token;
+  selectedDstToken: components["schemas"]["Token"];
   anyspendQuote: GetQuoteResponse | undefined;
   globalAddress?: string;
   onOrderCreated: (orderId: string) => void;
   onBack: () => void;
-  orderType: OrderType;
-  nft?: Nft & { price: string };
-  tournament?: Tournament & { contractAddress: string; entryPriceOrFundAmount: string };
+  orderType: components["schemas"]["Order"]["type"];
+  nft?: components["schemas"]["NFT"] & { price: string };
+  tournament?: components["schemas"]["Tournament"] & { contractAddress: string; entryPriceOrFundAmount: string };
   payload?: any;
   recipientEnsName?: string;
   recipientImageUrl?: string;
@@ -83,7 +84,10 @@ export function PanelOnrampPayment({
     },
   });
 
-  const handlePaymentMethodClick = async (vendor: OnrampVendor, paymentMethod?: string) => {
+  const handlePaymentMethodClick = async (
+    vendor: components["schemas"]["OnrampMetadata"]["vendor"],
+    paymentMethod?: string,
+  ) => {
     try {
       if (!recipientAddress) {
         toast.error("Please select a recipient");
@@ -95,17 +99,17 @@ export function PanelOnrampPayment({
         return;
       }
 
-      if (vendor === OnrampVendor.Coinbase && !coinbaseOnrampOptions) {
+      if (vendor === "coinbase" && !coinbaseOnrampOptions) {
         toast.error("Onramp options not available");
         return;
       }
 
-      if (vendor === OnrampVendor.Stripe && !isStripeOnrampSupported) {
+      if (vendor === "stripe" && !isStripeOnrampSupported) {
         toast.error("Stripe onramp not available");
         return;
       }
 
-      if (vendor === OnrampVendor.StripeWeb2 && !isStripeWeb2Supported) {
+      if (vendor === "stripe-web2" && !isStripeWeb2Supported) {
         toast.error("Stripe credit card not available");
         return;
       }
@@ -115,7 +119,7 @@ export function PanelOnrampPayment({
         return;
       }
 
-      const getDstToken = (): Token => {
+      const getDstToken = (): components["schemas"]["Token"] => {
         if (isBuyMode) {
           invariant(destinationTokenAddress, "destinationTokenAddress is required");
           return {
@@ -173,11 +177,11 @@ export function PanelOnrampPayment({
               className="flex items-center justify-between"
             >
               <p className="text-b3-react-foreground/60">
-                {orderType === OrderType.Swap
+                {orderType === "swap"
                   ? "Recipient"
-                  : orderType === OrderType.MintNFT
+                  : orderType === "mint_nft"
                     ? "Receive NFT at"
-                    : orderType === OrderType.JoinTournament
+                    : orderType === "join_tournament"
                       ? "Join for"
                       : "Recipient"}
               </p>
@@ -278,7 +282,7 @@ export function PanelOnrampPayment({
 
                 return (
                   <button
-                    onClick={() => handlePaymentMethodClick(OnrampVendor.Coinbase, method.id)}
+                    onClick={() => handlePaymentMethodClick("coinbase", method.id)}
                     disabled={isCreatingOrder}
                     className="bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50"
                   >
@@ -307,7 +311,7 @@ export function PanelOnrampPayment({
             {/* Stripe Option - Show if supported */}
             {isStripeWeb2Supported && (
               <button
-                onClick={() => handlePaymentMethodClick(OnrampVendor.StripeWeb2)}
+                onClick={() => handlePaymentMethodClick("stripe-web2")}
                 className="bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
               >
                 <div className="flex items-center gap-4">

package/src/anyspend/react/components/common/PaymentOneClick.tsx

@@ -1,11 +1,11 @@
-import { Order } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { ShinyButton } from "@b3dotfun/sdk/global-account/react";
 import { getPaymentMethodDescription, getVendorDisplayName } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { ChevronRight } from "lucide-react";
 import HowItWorks from "./HowItWorks";
 
 interface PaymentOneClickProps {
-  order: Order;
+  order: components["schemas"]["Order"];
   dstTokenSymbol: string;
 }
 

package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx

@@ -1,4 +1,4 @@
-import { Order, USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import { USDC_BASE } from "@b3dotfun/sdk/anyspend";
 import { useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend/constants";
 import { ShinyButton, useB3 } from "@b3dotfun/sdk/global-account/react";
@@ -9,12 +9,13 @@ import { HelpCircle, Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import HowItWorks from "./HowItWorks";
 import PaymentMethodIcons from "./PaymentMethodIcons";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 
 interface PaymentStripeWeb2Props {
   isMainnet: boolean;
-  order: Order;
+  order: components["schemas"]["Order"];
   onPaymentSuccess?: (paymentIntent: any) => void;
 }
 
@@ -83,7 +84,7 @@ function StripePaymentForm({
   clientSecret,
   onPaymentSuccess,
 }: {
-  order: Order;
+  order: components["schemas"]["Order"];
   clientSecret: string | null;
   onPaymentSuccess?: (paymentIntent: any) => void;
 }) {

package/src/anyspend/react/components/common/PaymentVendorUI.tsx

@@ -1,10 +1,10 @@
-import { OnrampVendor, Order } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import PaymentOneClick from "./PaymentOneClick";
 import PaymentStripeWeb2 from "./PaymentStripeWeb2";
 
 interface PaymentVendorUIProps {
   isMainnet: boolean;
-  order: Order;
+  order: components["schemas"]["Order"];
   dstTokenSymbol: string;
 }
 
@@ -17,7 +17,7 @@ export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }: Pa
   }
 
   // Handle Stripe Web2 payment flow
-  if (vendor === OnrampVendor.StripeWeb2) {
+  if (vendor === "stripe-web2") {
     return <PaymentStripeWeb2 isMainnet={isMainnet} order={order} />;
   }
 

package/src/anyspend/react/components/common/TokenBalance.tsx

@@ -1,4 +1,4 @@
-import { Token } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useTokenBalance } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits } from "viem";
 
@@ -7,7 +7,7 @@ export function TokenBalance({
   walletAddress,
   onChangeInput,
 }: {
-  token: Token;
+  token: components["schemas"]["Token"];
   walletAddress: string | undefined;
   onChangeInput: (value: string) => void;
 }) {

package/src/anyspend/react/components/index.ts

@@ -1,12 +1,13 @@
 // Components
 export { AnySpend } from "./AnySpend";
+export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendNFT } from "./AnySpendNFT";
-export { AnySpendNFTButton } from "./AnySpendNFTButton";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon";