@b3dotfun/sdk 0.0.8 → 0.0.9-alpha.1

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -1,21 +1,5 @@
-import {
-  AnySpendMetadata,
-  eqci,
-  getDefaultToken,
-  GetQuoteRequest,
-  GetQuoteResponse,
-  isCustomTxMetadata,
-  isNftMetadata,
-  isTournamentMetadata,
-  Nft,
-  NftType,
-  OnrampVendor,
-  OrderStatus,
-  OrderType,
-  RELAY_ETH_ADDRESS,
-  Token,
-  USDC_BASE,
-} from "@b3dotfun/sdk/anyspend";
+import { eqci, getDefaultToken } from "@b3dotfun/sdk/anyspend";
+import { RELAY_ETH_ADDRESS, USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import {
   CreateOrderParams,
   useAnyspendCreateOnrampOrder,
@@ -25,6 +9,8 @@ import {
   useAnyspendTokenList,
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteRequest, GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import {
   Badge,
   Button,
@@ -44,10 +30,8 @@ import {
   TooltipTrigger,
   TransitionPanel,
   useAccountWallet,
-  useB3,
   useBsmntProfile,
   useHasMounted,
-  useModalStore,
   useRouter,
   useSearchParamsSSR,
   useTokenBalancesByChain,
@@ -61,7 +45,7 @@ import invariant from "invariant";
 import { ChevronRightCircle, Loader2 } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { b3, base, baseSepolia } from "viem/chains";
+import { base, baseSepolia } from "viem/chains";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus";
@@ -88,22 +72,22 @@ function generateGetRelayQuoteRequest({
   encodedData,
   spenderAddress,
 }: {
-  orderType: OrderType;
+  orderType: components["schemas"]["Order"]["type"];
   srcChainId: number;
-  srcToken: Token;
+  srcToken: components["schemas"]["Token"];
   dstChainId: number;
-  dstToken: Token;
+  dstToken: components["schemas"]["Token"];
   dstAmount: string;
   contractAddress: string;
   tokenId?: number | null;
-  contractType?: NftType;
+  contractType?: components["schemas"]["NftContract"]["type"];
   encodedData: string;
   spenderAddress?: string;
 }): GetQuoteRequest {
   switch (orderType) {
-    case OrderType.MintNFT: {
+    case "mint_nft": {
       return {
-        type: OrderType.MintNFT,
+        type: "mint_nft",
         srcChain: srcChainId,
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
@@ -114,9 +98,9 @@ function generateGetRelayQuoteRequest({
         contractType: contractType!,
       };
     }
-    case OrderType.JoinTournament: {
+    case "join_tournament": {
       return {
-        type: OrderType.JoinTournament,
+        type: "join_tournament",
         srcChain: srcChainId,
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
@@ -125,9 +109,9 @@ function generateGetRelayQuoteRequest({
         contractAddress: contractAddress,
       };
     }
-    case OrderType.FundTournament: {
+    case "fund_tournament": {
       return {
-        type: OrderType.FundTournament,
+        type: "fund_tournament",
         srcChain: srcChainId,
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
@@ -136,9 +120,9 @@ function generateGetRelayQuoteRequest({
         contractAddress: contractAddress,
       };
     }
-    case OrderType.Custom: {
+    case "custom": {
       return {
-        type: OrderType.Custom,
+        type: "custom",
         srcChain: srcChainId,
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
@@ -179,13 +163,13 @@ export function AnySpendCustom({
   mode?: "modal" | "page";
   recipientAddress?: string;
   spenderAddress?: string;
-  orderType: OrderType;
+  orderType: components["schemas"]["Order"]["type"];
   dstChainId: number;
-  dstToken: Token;
+  dstToken: components["schemas"]["Token"];
   dstAmount: string;
   contractAddress: string;
   encodedData: string;
-  metadata: AnySpendMetadata;
+  metadata: any;
   header: ({
     anyspendPrice,
     isLoadingAnyspendPrice,
@@ -196,8 +180,6 @@ export function AnySpendCustom({
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
 }) {
-  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
-
   const hasMounted = useHasMounted();
 
   const searchParams = useSearchParamsSSR();
@@ -220,7 +202,7 @@ export function AnySpendCustom({
   // Update recipient logic to use custom recipient
   const recipientAddress = customRecipientAddress || currentWallet.address;
   const recipientPropsProfile = useBsmntProfile({ address: recipientAddress });
-  const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
+  const recipientEnsName = recipientPropsProfile.data?.username?.replace(/\.b3\.fun/g, "");
   const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
@@ -274,7 +256,7 @@ export function AnySpendCustom({
   }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
 
   // Set the selected token with preference for tokens user owns
-  const [srcToken, setSrcToken] = useState<Token>(getDefaultToken(srcChainId));
+  const [srcToken, setSrcToken] = useState<components["schemas"]["Token"]>(getDefaultToken(srcChainId));
   const [dirtySelectSrcToken, setDirtySelectSrcToken] = useState(false);
 
   // Update token when chain changes or token balances are loaded
@@ -287,7 +269,7 @@ export function AnySpendCustom({
     }
   }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
 
-  const { account: isAuthenticated } = useB3();
+  // const { account: isAuthenticated } = useB3();
 
   const getRelayQuoteRequest = useMemo(() => {
     return generateGetRelayQuoteRequest({
@@ -298,8 +280,8 @@ export function AnySpendCustom({
       dstToken: dstToken,
       dstAmount: dstAmount,
       contractAddress: contractAddress,
-      tokenId: isNftMetadata(metadata) ? metadata.nftContract.tokenId : undefined,
-      contractType: isNftMetadata(metadata) ? metadata.nftContract.type : undefined,
+      tokenId: metadata.type === "mint_nft" ? metadata.nftContract.tokenId : undefined,
+      contractType: metadata.type === "mint_nft" ? metadata.nftContract.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
     });
@@ -363,7 +345,7 @@ export function AnySpendCustom({
   }, [anyspendQuote?.data]);
 
   useEffect(() => {
-    if (oat?.data?.order.status === OrderStatus.Executed) {
+    if (oat?.data?.order.status === "executed") {
       console.log("Calling onSuccess");
       const txHash = oat?.data?.executeTx?.txHash;
       onSuccess?.(txHash);
@@ -394,7 +376,7 @@ export function AnySpendCustom({
 
   const handleCreateOrder = async (
     recipientAddress: string,
-    onramp?: { paymentMethod: string; vendor: OnrampVendor },
+    onramp?: { paymentMethod: string; vendor: components["schemas"]["OnrampMetadata"]["vendor"] },
   ) => {
     try {
       invariant(anyspendQuote, "Relay price is not found");
@@ -410,44 +392,47 @@ export function AnySpendCustom({
         srcAmount: srcAmount.toString(),
         recipientAddress,
         creatorAddress: currentWallet?.wallet?.address,
-        nft: isNftMetadata(metadata)
-          ? metadata.nftContract.type === NftType.ERC1155
-            ? ({
-                type: NftType.ERC1155,
-                contractAddress: metadata.nftContract.contractAddress,
-                tokenId: metadata.nftContract.tokenId!,
-                name: metadata.nftContract.name,
-                description: metadata.nftContract.description,
-                imageUrl: metadata.nftContract.imageUrl,
-                price: dstAmount,
-              } as Nft)
-            : ({
-                type: NftType.ERC721,
-                contractAddress: metadata.nftContract.contractAddress,
-                contractType: metadata.nftContract.type,
-                price: dstAmount,
-                name: metadata.nftContract.name,
-                description: metadata.nftContract.description,
-                imageUrl: metadata.nftContract.imageUrl,
-              } as Nft)
-          : undefined,
-        tournament: isTournamentMetadata(metadata)
-          ? {
-              ...metadata.tournament,
-              contractAddress: contractAddress,
-              entryPriceOrFundAmount: dstAmount,
-            }
-          : undefined,
+        nft:
+          metadata.type === "mint_nft"
+            ? metadata.nftContract.type === "erc1155"
+              ? {
+                  type: "erc1155",
+                  contractAddress: metadata.nftContract.contractAddress,
+                  tokenId: metadata.nftContract.tokenId!,
+                  name: metadata.nftContract.name,
+                  description: metadata.nftContract.description,
+                  imageUrl: metadata.nftContract.imageUrl,
+                  price: dstAmount,
+                }
+              : {
+                  type: "erc721",
+                  contractAddress: metadata.nftContract.contractAddress,
+                  contractType: metadata.nftContract.type,
+                  price: dstAmount,
+                  name: metadata.nftContract.name,
+                  description: metadata.nftContract.description,
+                  imageUrl: metadata.nftContract.imageUrl,
+                }
+            : undefined,
+        tournament:
+          metadata.type === "join_tournament" || metadata.type === "fund_tournament"
+            ? {
+                ...metadata.tournament,
+                contractAddress: contractAddress,
+                entryPriceOrFundAmount: dstAmount,
+              }
+            : undefined,
         // only populate payload for custom tx
-        payload: isCustomTxMetadata(metadata)
-          ? {
-              amount: dstAmount,
-              data: encodedData,
-              spenderAddress: spenderAddress,
-              to: contractAddress,
-              action: metadata.action,
-            }
-          : undefined,
+        payload:
+          metadata.type === "custom"
+            ? {
+                amount: dstAmount,
+                data: encodedData,
+                spenderAddress: spenderAddress,
+                to: contractAddress,
+                action: metadata.action,
+              }
+            : undefined,
       } as CreateOrderParams;
 
       if (onramp) {
@@ -478,23 +463,26 @@ export function AnySpendCustom({
     }
   };
 
-  const handleConfirmOrder = async (onramp?: { paymentMethod: string; vendor: OnrampVendor }) => {
-    if (!isAuthenticated) {
-      // Copied from https://github.com/b3-fun/b3-mono/blob/main/apps/anyspend-web/components/User/index.tsx#L85
-      setB3ModalContentType({
-        chain: {
-          ...b3,
-          rpc: "https://mainnet-rpc.b3.fun",
-          blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
-          testnet: undefined,
-        },
-        partnerId: String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID),
-        type: "signInWithB3",
-        showBackButton: false,
-      });
-      setB3ModalOpen(true);
-      return;
-    }
+  const handleConfirmOrder = async (onramp?: {
+    paymentMethod: string;
+    vendor: components["schemas"]["OnrampMetadata"]["vendor"];
+  }) => {
+    // if (!isAuthenticated) {
+    //   // Copied from https://github.com/b3-fun/b3-mono/blob/main/apps/anyspend-web/components/User/index.tsx#L85
+    //   setB3ModalContentType({
+    //     chain: {
+    //       ...b3,
+    //       rpc: "https://mainnet-rpc.b3.fun",
+    //       blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
+    //       testnet: undefined,
+    //     },
+    //     partnerId: String(process.env.NEXT_PUBLIC_THIRDWEB_PARTNER_ID),
+    //     type: "signInWithB3",
+    //     showBackButton: false,
+    //   });
+    //   setB3ModalOpen(true);
+    //   return;
+    // }
 
     if (recipientAddress) {
       try {
@@ -507,7 +495,7 @@ export function AnySpendCustom({
   };
 
   const recipientSection =
-    showRecipient && isAuthenticated && recipientAddress ? (
+    showRecipient && recipientAddress ? (
       <motion.div
         initial={false}
         animate={{
@@ -519,11 +507,11 @@ export function AnySpendCustom({
         className="flex w-full items-center justify-between gap-4"
       >
         <div className="text-b3-react-foreground">
-          {orderType === OrderType.Swap
+          {orderType === "swap"
             ? "Recipient"
-            : orderType === OrderType.MintNFT
+            : orderType === "mint_nft"
               ? "Receive NFT at"
-              : orderType === OrderType.JoinTournament
+              : orderType === "join_tournament"
                 ? "Join for"
                 : "Recipient"}
         </div>
@@ -762,7 +750,9 @@ export function AnySpendCustom({
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <span className="font-medium">Price</span>
+                <span className="font-medium">
+                  Total <span className="text-sm text-gray-500">(with fee)</span>
+                </span>
                 <h2 className={cn("text-as-primary text-2xl font-semibold")}>
                   {formattedSrcAmount || "--"} {srcToken.symbol}
                 </h2>
@@ -790,9 +780,7 @@ export function AnySpendCustom({
                   onClick={() => handleConfirmOrder()}
                   className="relative w-full"
                 >
-                  {!isAuthenticated ? (
-                    "Sign in with B3"
-                  ) : isCreatingOrder ? (
+                  {isCreatingOrder ? (
                     <div className="flex items-center gap-2">
                       <Loader2 className="size-4 animate-spin" />
                       <span>Creating order...</span>
@@ -833,10 +821,10 @@ export function AnySpendCustom({
               onBack={() => setActiveTab("crypto")}
               orderType={orderType}
               nft={
-                isNftMetadata(metadata)
-                  ? metadata.nftContract.type === NftType.ERC1155
+                metadata.type === "mint_nft"
+                  ? metadata.nftContract.type === "erc1155"
                     ? {
-                        type: NftType.ERC1155,
+                        type: "erc1155",
                         contractAddress: metadata.nftContract.contractAddress,
                         tokenId: metadata.nftContract.tokenId!,
                         imageUrl: metadata.nftContract.imageUrl,
@@ -845,7 +833,7 @@ export function AnySpendCustom({
                         price: dstAmount,
                       }
                     : {
-                        type: NftType.ERC721,
+                        type: "erc721",
                         contractAddress: metadata.nftContract.contractAddress,
                         name: metadata.nftContract.name,
                         description: metadata.nftContract.description,
@@ -855,7 +843,7 @@ export function AnySpendCustom({
                   : undefined
               }
               payload={
-                isCustomTxMetadata(metadata)
+                metadata.type === "custom"
                   ? {
                       ...metadata,
                       amount: dstAmount,

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -1,5 +1,4 @@
-import { ALL_CHAINS, getChainName, getExplorerAddressUrl, GetQuoteResponse, OrderType } from "@b3dotfun/sdk/anyspend";
-import { NftContract } from "@b3dotfun/sdk/anyspend/types";
+import { ALL_CHAINS, getChainName, getExplorerAddressUrl } from "@b3dotfun/sdk/anyspend";
 import { GlareCard, Popover, PopoverContent, PopoverTrigger } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
@@ -9,6 +8,8 @@ import { MoreVertical } from "lucide-react";
 import { useState } from "react";
 import { b3 } from "viem/chains";
 import { AnySpendCustom } from "./AnySpendCustom";
+import { GetQuoteResponse } from "../../types/api_req_res";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function AnySpendNFT({
   isMainnet = true,
@@ -22,7 +23,7 @@ export function AnySpendNFT({
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
-  nftContract: NftContract;
+  nftContract: components["schemas"]["NftContract"];
   onSuccess?: (txHash?: string) => void;
 }) {
   const header = ({
@@ -73,14 +74,14 @@ export function AnySpendNFT({
       loadOrder={loadOrder}
       mode={mode}
       recipientAddress={recipientAddress}
-      orderType={OrderType.MintNFT}
+      orderType={"mint_nft"}
       dstChainId={nftContract.chainId}
       dstToken={nftContract.currency}
       dstAmount={nftContract.price}
       contractAddress={nftContract.contractAddress}
       encodedData="0x"
       metadata={{
-        type: OrderType.MintNFT,
+        type: "mint_nft",
         nftContract: nftContract,
       }}
       header={header}
@@ -89,7 +90,7 @@ export function AnySpendNFT({
   );
 }
 
-function DropdownMenu({ nftContract }: { nftContract: NftContract }) {
+function DropdownMenu({ nftContract }: { nftContract: components["schemas"]["NftContract"] }) {
   const [open, setOpen] = useState(false);
   const chain = ALL_CHAINS[nftContract.chainId];
   const nftUrl = getExplorerAddressUrl(nftContract.chainId, nftContract.contractAddress);

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN } from "@b3dotfun/sdk/anyspend";
 import {
   Button,
   GlareCardRounded,
@@ -476,14 +476,14 @@ export function AnySpendStakeB3({
       loadOrder={loadOrder}
       mode={mode}
       recipientAddress={recipientAddress}
-      orderType={OrderType.Custom}
+      orderType={"custom"}
       dstChainId={base.id}
       dstToken={B3_TOKEN}
       dstAmount={userStakeAmount}
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        type: OrderType.Custom,
+        type: "custom",
         action: "stake B3",
       }}
       header={header}

package/src/anyspend/react/components/AnySpendTournament.tsx

@@ -1,8 +1,9 @@
-import { GetQuoteResponse, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { AnimatePresence } from "framer-motion";
 import { AnySpendCustom } from "./AnySpendCustom";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 
 type AnySpendTournamentProps =
   | {
@@ -13,8 +14,8 @@ type AnySpendTournamentProps =
       loadOrder?: string;
       tournamentChainId: number;
       tournamentContractAddress: string;
-      tournamentMetadata: Tournament;
-      tournamentEntryToken: Token;
+      tournamentMetadata: components["schemas"]["Tournament"];
+      tournamentEntryToken: components["schemas"]["Token"];
       tournamentEntryFee: string;
       onSuccess?: () => void;
     }
@@ -25,8 +26,8 @@ type AnySpendTournamentProps =
       loadOrder?: string;
       tournamentChainId: number;
       tournamentContractAddress: string;
-      tournamentMetadata: Tournament;
-      tournamentFundToken: Token;
+      tournamentMetadata: components["schemas"]["Tournament"];
+      tournamentFundToken: components["schemas"]["Token"];
       tournamentFundAmount: string;
       onSuccess?: () => void;
     };
@@ -94,14 +95,14 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
       loadOrder={loadOrder}
       mode={mode}
       recipientAddress={action === "join" ? props.joinFor : undefined}
-      orderType={action === "join" ? OrderType.JoinTournament : OrderType.FundTournament}
+      orderType={action === "join" ? "join_tournament" : "fund_tournament"}
       dstChainId={tournamentChainId}
       dstToken={dstToken}
       dstAmount={dstAmount}
       contractAddress={tournamentContractAddress}
       encodedData="0x"
       metadata={{
-        type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
+        type: action === "join" ? "join_tournament" : "fund_tournament",
         tournament: tournamentMetadata,
       }}
       header={header}

package/src/anyspend/react/components/AnyspendSignatureMint.tsx

@@ -1,10 +1,9 @@
-import { OrderType } from "@b3dotfun/sdk/anyspend";
-import { StyleRoot, useHasMounted, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { StyleRoot, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import invariant from "@b3dotfun/sdk/shared/utils/debug";
 import { useMemo } from "react";
 import { encodeFunctionData, parseEther } from "viem";
-import { ABI_SIGNATURE_MINTING } from "../../abis/signature-minting";
-import { GenerateSigMintResponse } from "../../types/signature-mint";
+import { ABI_SIGNATURE_MINTING } from "../../abis/signatureMinting";
+import { GenerateSigMintResponse } from "../../types/signatureMint";
 import { AnySpendCustom } from "./AnySpendCustom";
 
 // Helper function to determine if URL is a video
@@ -55,13 +54,12 @@ export function AnyspendSignatureMint({
   imageUrl?: string;
   onSuccess?: (txHash?: string) => void;
 }) {
-  const hasMounted = useHasMounted();
-
   // Get token data
-  const { data: tokenData, isError: isTokenError } = useTokenData(
-    signatureData.collection.chainId,
-    signatureData.collection.signatureRequestBody?.currency,
-  );
+  const {
+    data: tokenData,
+    isError: isTokenError,
+    isLoading,
+  } = useTokenData(signatureData.collection.chainId, signatureData.collection.signatureRequestBody?.currency);
 
   // Convert token data to AnySpend Token type
   const dstToken = useMemo(() => {
@@ -106,7 +104,18 @@ export function AnyspendSignatureMint({
     </>
   );
 
-  // If we don't have token data, show error state
+  // Show loading state while fetching token data
+  if (isLoading) {
+    return (
+      <StyleRoot>
+        <div className="b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8">
+          <p className="text-as-primary/70 text-center text-sm">Loading payment token information...</p>
+        </div>
+      </StyleRoot>
+    );
+  }
+
+  // If we don't have token data after loading, show error state
   if (!dstToken || isTokenError) {
     return (
       <StyleRoot>
@@ -129,14 +138,14 @@ export function AnyspendSignatureMint({
       loadOrder={loadOrder}
       mode={mode}
       recipientAddress={signatureData.payload.to}
-      orderType={OrderType.Custom}
+      orderType={"custom"}
       dstChainId={signatureData.collection.chainId}
       dstToken={dstToken}
       dstAmount={price.toString()}
       contractAddress={signatureData.collection.address!}
       encodedData={encodedData}
       metadata={{
-        type: OrderType.Custom,
+        type: "custom",
         action: "Signature Mint",
       }}
       header={header}

package/src/anyspend/react/components/{AnySpendNFTButton.tsx → common/AnySpendNFTButton.tsx}

@@ -1,9 +1,9 @@
 import { DEFAULT_NFT_CONTRACT } from "@b3dotfun/sdk/anyspend/constants";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button, useModalStore } from "@b3dotfun/sdk/global-account/react";
-import { NftContract } from "@b3dotfun/sdk/anyspend/types";
 
 type AnySpendNFTButtonProps = {
-  nftContract?: NftContract;
+  nftContract?: components["schemas"]["NftContract"];
   recipientAddress?: string;
 };