@b3dotfun/sdk 0.0.7-alpha.1 → 0.0.7-alpha.11

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

@@ -1,8 +1,14 @@
 import {
+  AnySpendMetadata,
+  CreateOrderParams,
   eqci,
   getDefaultToken,
   GetQuoteRequest,
   GetQuoteResponse,
+  isCustomTxMetadata,
+  isNftMetadata,
+  isTournamentMetadata,
+  Nft,
   NftType,
   OnrampVendor,
   OrderStatus,
@@ -17,26 +23,27 @@ import {
   useAnyspendTokenList,
   useGeoOnrampOptions
 } from "@b3dotfun/sdk/anyspend";
-import { useB3, StyleRoot } from "@b3dotfun/sdk/global-account/react";
 import {
   Badge,
   Button,
   ShinyButton,
   Skeleton,
+  StyleRoot,
   Tabs,
   TabsContent,
   TabsList,
   TabTrigger,
+  TextShimmer,
+  TransitionPanel,
   useAccountWallet,
+  useB3,
   useBsmntProfile,
   useHasMounted,
-  useRouter,
-  useTokenBalancesByChain,
   useModalStore,
-  useSearchParamsSSR
+  useRouter,
+  useSearchParamsSSR,
+  useTokenBalancesByChain
 } from "@b3dotfun/sdk/global-account/react";
-import { TextShimmer } from "@b3dotfun/sdk/global-account/react";
-import { TransitionPanel } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -68,6 +75,8 @@ function generateGetRelayQuoteRequest({
   dstToken,
   dstAmount,
   contractAddress,
+  tokenId,
+  contractType,
   encodedData,
   spenderAddress
 }: {
@@ -78,6 +87,8 @@ function generateGetRelayQuoteRequest({
   dstToken: Token;
   dstAmount: string;
   contractAddress: string;
+  tokenId?: number | null;
+  contractType?: NftType;
   encodedData: string;
   spenderAddress?: string;
 }): GetQuoteRequest {
@@ -90,7 +101,9 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
+        tokenId: tokenId!,
+        contractType: contractType!
       };
     }
     case OrderType.JoinTournament: {
@@ -164,7 +177,7 @@ export function AnySpendCustom({
   dstAmount: string;
   contractAddress: string;
   encodedData: string;
-  metadata: any;
+  metadata: AnySpendMetadata;
   header: ({
     anyspendPrice,
     isLoadingAnyspendPrice
@@ -274,6 +287,8 @@ export function AnySpendCustom({
     dstToken: dstToken,
     dstAmount: dstAmount,
     contractAddress: contractAddress,
+    tokenId: isNftMetadata(metadata) ? metadata.nftContract.tokenId : undefined,
+    contractType: isNftMetadata(metadata) ? metadata.nftContract.type : undefined,
     encodedData: encodedData,
     spenderAddress: spenderAddress
   });
@@ -372,23 +387,45 @@ export function AnySpendCustom({
         srcAmount: srcAmount.toString(),
         recipientAddress,
         creatorAddress: currentWallet?.wallet?.address,
-        nft: {
-          ...metadata.nftContract,
-          type: NftType.ERC721
-        },
-        tournament: {
-          ...metadata.tournament,
-          contractAddress: contractAddress,
-          entryPriceOrFundAmount: dstAmount
-        },
-        payload: {
-          amount: dstAmount,
-          data: encodedData,
-          spenderAddress: spenderAddress,
-          to: contractAddress,
-          action: metadata.action
-        }
-      };
+        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,
+        // only populate payload for custom tx
+        payload: isCustomTxMetadata(metadata)
+          ? {
+              amount: dstAmount,
+              data: encodedData,
+              spenderAddress: spenderAddress,
+              to: contractAddress,
+              action: metadata.action
+            }
+          : undefined
+      } as CreateOrderParams;
 
       if (onramp) {
         invariant(srcToken.address === USDC_BASE.address, "Selected src token is not USDC");
@@ -749,14 +786,30 @@ export function AnySpendCustom({
               onOrderCreated={(orderId: string) => setOrderId(orderId)}
               onBack={() => setActiveTab("crypto")}
               orderType={orderType}
-              nft={metadata.nftContract ? { ...metadata.nftContract, price: dstAmount } : undefined}
-              tournament={
-                metadata.tournament
-                  ? { ...metadata.tournament, contractAddress: contractAddress, entryPriceOrFundAmount: dstAmount }
+              nft={
+                isNftMetadata(metadata)
+                  ? metadata.nftContract.type === NftType.ERC1155
+                    ? {
+                        type: NftType.ERC1155,
+                        contractAddress: metadata.nftContract.contractAddress,
+                        tokenId: metadata.nftContract.tokenId!,
+                        imageUrl: metadata.nftContract.imageUrl,
+                        name: metadata.nftContract.name,
+                        description: metadata.nftContract.description,
+                        price: dstAmount
+                      }
+                    : {
+                        type: NftType.ERC721,
+                        contractAddress: metadata.nftContract.contractAddress,
+                        name: metadata.nftContract.name,
+                        description: metadata.nftContract.description,
+                        imageUrl: metadata.nftContract.imageUrl,
+                        price: dstAmount
+                      }
                   : undefined
               }
               payload={
-                metadata.action
+                isCustomTxMetadata(metadata)
                   ? {
                       ...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 { DEFAULT_NFT_CONTRACT } from "@b3dotfun/sdk/anyspend/constants";
 import { NftContract } from "@b3dotfun/sdk/anyspend/types";
 import { GlareCard, Popover, PopoverContent, PopoverTrigger } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
@@ -16,13 +15,15 @@ export function AnySpendNFT({
   loadOrder,
   mode = "modal",
   recipientAddress,
-  nftContract = DEFAULT_NFT_CONTRACT
+  nftContract,
+  onSuccess
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
-  nftContract?: NftContract;
+  nftContract: NftContract;
+  onSuccess?: (txHash?: string) => void;
 }) {
   const header = ({
     anyspendPrice,
@@ -78,8 +79,12 @@ export function AnySpendNFT({
       dstAmount={nftContract.price}
       contractAddress={nftContract.contractAddress}
       encodedData="0x"
-      metadata={{ nftContract }}
+      metadata={{
+        type: OrderType.MintNFT,
+        nftContract: nftContract
+      }}
       header={header}
+      onSuccess={onSuccess}
     />
   );
 }

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

@@ -1,17 +1,14 @@
 import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
-import { EthIcon } from "./icons/EthIcon";
-import { SolIcon } from "./icons/SolIcon";
-import { UsdcIcon } from "./icons/USDCIcon";
 import {
   Button,
   GlareCardRounded,
   Input,
+  StyleRoot,
   TextLoop,
+  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
-  useChainSwitchWithAction,
-  useTokenBalance,
-  StyleRoot
+  useTokenBalance
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
@@ -23,6 +20,9 @@ import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
+import { EthIcon } from "./icons/EthIcon";
+import { SolIcon } from "./icons/SolIcon";
+import { UsdcIcon } from "./icons/USDCIcon";
 
 const basePublicClient = createPublicClient({
   chain: base,
@@ -483,6 +483,7 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
+        type: OrderType.Custom,
         action: "stake B3"
       }}
       header={header}

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

@@ -100,7 +100,10 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
       dstAmount={dstAmount}
       contractAddress={tournamentContractAddress}
       encodedData="0x"
-      metadata={{ tournament: tournamentMetadata }}
+      metadata={{
+        type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
+        tournament: tournamentMetadata
+      }}
       header={header}
       onSuccess={onSuccess}
       showRecipient={action === "join"}

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

@@ -23,17 +23,17 @@ import {
   zTournament
 } from "@b3dotfun/sdk/anyspend";
 import {
-  CopyToClipboard,
   Badge,
+  Button,
+  CopyToClipboard,
   ShinyButton,
   Skeleton,
   TextLoop,
   TextShimmer,
-  Button,
   useAccountWallet,
   useChainSwitchWithAction,
-  useOnchainName,
-  useModalStore
+  useModalStore,
+  useOnchainName
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
@@ -334,7 +334,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
   const setWaitingForDeposit = useCallback(() => {
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("waitingForDeposit", "true");
     router.push(`?${params}`);
   }, [router, searchParams]);
@@ -865,7 +865,7 @@ export const OrderDetails = memo(function OrderDetails({
                         BigInt(order.srcAmount),
                         order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress
                       )}
-                      size={200}
+                      className="max-w-[200px]"
                     />
                     <div className="mt-3 flex items-center justify-center gap-2 text-sm">
                       <span className="label-style text-as-brand/70 text-sm">Scan with</span>

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -1,11 +1,12 @@
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import { Nft, OnrampVendor, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend/types";
+import { OnrampVendor } from "@b3dotfun/sdk/anyspend/types";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
+import { CreateOrderParams } from "./useAnyspendCreateOrder";
 
 export type OnrampOptions = {
   vendor: OnrampVendor;
@@ -15,20 +16,9 @@ export type OnrampOptions = {
   ipAddress?: string; // Required for Stripe
 };
 
-export type CreateOnrampOrderParams = {
-  isMainnet: boolean;
-  recipientAddress: string;
-  orderType: OrderType;
-  dstChain: number;
-  dstToken: Token;
+export type CreateOnrampOrderParams = Omit<CreateOrderParams, "srcChain" | "srcToken" | "srcAmount"> & {
   srcFiatAmount: string;
   onramp: OnrampOptions;
-  partnerId?: string;
-  expectedDstAmount: string;
-  creatorAddress?: string;
-  nft?: Nft & { price: string };
-  tournament?: Tournament & { contractAddress: string; entryPriceOrFundAmount: string };
-  payload?: any;
 };
 
 export type UseAnyspendCreateOnrampOrderProps = {

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -1,6 +1,6 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { Nft, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend/types";
-import { normalizeAddress, buildMetadata, buildPayload } from "@b3dotfun/sdk/anyspend/utils";
+import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 
@@ -18,6 +18,7 @@ export type CreateOrderParams = {
   tournament?: Tournament & { contractAddress: string; entryPriceOrFundAmount: string };
   creatorAddress?: string;
   payload?: any;
+  partnerId?: string;
 };
 
 export type UseAnyspendCreateOrderProps = {

package/src/anyspend/services/anyspend.ts

@@ -1,3 +1,5 @@
+import { ANYSPEND_MAINNET_BASE_URL, ANYSPEND_TESTNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
+import { OnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import {
   GetOrderAndTxsResponse,
   GetQuoteRequest,
@@ -11,8 +13,6 @@ import {
 } from "@b3dotfun/sdk/anyspend/types";
 import { getNativeToken, isNativeToken } from "@b3dotfun/sdk/anyspend/utils";
 import invariant from "invariant";
-import { ANYSPEND_MAINNET_BASE_URL, ANYSPEND_TESTNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
-import { OnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 
 // Service functions
 export const anyspendService = {

package/src/anyspend/types/index.ts

@@ -3,6 +3,7 @@ export * from "./req-res";
 export * from "./chain";
 export * from "./custom";
 export * from "./globalWallet";
+export * from "./metadata";
 export * from "./nft";
 export * from "./onramp";
 export * from "./order";

package/src/anyspend/types/metadata.ts

@@ -0,0 +1,41 @@
+import { NftContract } from "./nft";
+import { OrderType } from "./order";
+
+export type BaseMetadata = {
+  type: OrderType;
+};
+
+export type NftMetadata = BaseMetadata & {
+  type: OrderType.MintNFT;
+  nftContract: NftContract;
+};
+
+export type TournamentMetadata = BaseMetadata & {
+  type: OrderType.JoinTournament | OrderType.FundTournament;
+  tournament: {
+    slug: string;
+    name: string;
+    description: string;
+    imageUrl: string;
+  };
+};
+
+export type CustomTxMetadata = BaseMetadata & {
+  type: OrderType.Custom;
+  action: string;
+};
+
+export type AnySpendMetadata = NftMetadata | TournamentMetadata | CustomTxMetadata;
+
+// Type guard functions
+export function isNftMetadata(metadata: AnySpendMetadata): metadata is NftMetadata {
+  return metadata.type === OrderType.MintNFT;
+}
+
+export function isTournamentMetadata(metadata: AnySpendMetadata): metadata is TournamentMetadata {
+  return metadata.type === OrderType.JoinTournament || metadata.type === OrderType.FundTournament;
+}
+
+export function isCustomTxMetadata(metadata: AnySpendMetadata): metadata is CustomTxMetadata {
+  return metadata.type === OrderType.Custom;
+}

package/src/anyspend/types/nft.ts

@@ -28,6 +28,8 @@ export type Nft = z.infer<typeof zNft>;
 
 export const zMintNftPayload = z.object({
   contractAddress: z.string(),
+  tokenId: z.number().nullable(),
+  contractType: z.nativeEnum(NftType),
   nftPrice: z.string()
 });
 
@@ -47,4 +49,5 @@ export interface NftContract {
   name: string;
   description: string;
   tokenId: number | null;
+  type: NftType;
 }

package/src/anyspend/types/req-res/getQuote.ts

@@ -1,9 +1,10 @@
 import { QuoteDetails } from "@reservoir0x/relay-sdk";
 import { z } from "zod";
 
+import { zCustomPayload } from "../custom";
+import { NftType } from "../nft";
 import { OrderType } from "../order";
 import { TradeType } from "../relay";
-import { zCustomPayload } from "../custom";
 
 const zGetQuoteBody = z.object({
   srcChain: z.number(),
@@ -21,6 +22,8 @@ const zGetQuoteForSwapOrderBody = zGetQuoteBody.extend({
 const zGetQuoteForMintNftOrderBody = zGetQuoteBody.extend({
   type: z.literal(OrderType.MintNFT),
   contractAddress: z.string(),
+  tokenId: z.number().nullable(),
+  contractType: z.nativeEnum(NftType),
   price: z.string()
 });
 

package/src/anyspend/utils/orderPayload.ts

@@ -1,4 +1,4 @@
-import { Nft, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend/types";
+import { Nft, NftType, OrderType, Token, Tournament } from "@b3dotfun/sdk/anyspend/types";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 
 export type OrderParams = {
@@ -20,10 +20,22 @@ export const buildPayload = (orderType: OrderType, params: OrderParams) => {
         actualDstAmount: null
       };
     case OrderType.MintNFT:
-      return {
-        contractAddress: nft ? normalizeAddress(nft.contractAddress) : "",
-        nftPrice: nft?.price || ""
-      };
+      if (nft?.type === NftType.ERC1155) {
+        return {
+          contractAddress: normalizeAddress(nft.contractAddress),
+          nftPrice: nft?.price || "",
+          tokenId: nft?.tokenId!,
+          contractType: nft?.type
+        };
+      } else if (nft?.type === NftType.ERC721) {
+        return {
+          contractAddress: normalizeAddress(nft.contractAddress),
+          nftPrice: nft?.price || "",
+          contractType: nft?.type
+        };
+      } else {
+        throw new Error(`Invalid nft payload: ${JSON.stringify(nft)}`);
+      }
     case OrderType.JoinTournament:
       return {
         contractAddress: tournament?.contractAddress,

package/src/global-account/react/components/B3Provider/B3Provider.tsx

@@ -9,9 +9,9 @@ import { Account, Wallet } from "thirdweb/wallets";
 import { createConfig, http, WagmiProvider } from "wagmi";
 import { RelayKitProviderWrapper } from "../RelayKitProviderWrapper";
 import { StyleRoot } from "../StyleRoot";
+import { B3Context, B3ContextType } from "./types";
 
 import "@reservoir0x/relay-kit-ui/styles.css";
-import { B3Context, B3ContextType } from "./types";
 
 /**
  * Default permissions configuration for B3 provider
@@ -61,9 +61,8 @@ export function B3Provider({
           >
             <RelayKitProviderWrapper isMainnet={isMainnetAnySpend}>
               {children}
-              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+              {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
               <StyleRoot id="b3-root" />
-              {/* For the modal https://github.com/b3-fun/b3-mono/blob/main/packages/react/src/components/ui/dialog.tsx#L46 */}
               <Toaster theme={theme} />
             </RelayKitProviderWrapper>
           </InnerProvider>