@b3dotfun/sdk 0.0.7 → 0.0.8

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
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
@@ -23,10 +20,13 @@ 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,
-  transport: http()
+  transport: http(),
 });
 
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
@@ -36,7 +36,7 @@ function generateEncodedDataForStakingB3(amount: string, beneficiary: string): s
   const encodedData = encodeFunctionData({
     abi: ABI_ERC20_STAKING,
     functionName: "stake",
-    args: [BigInt(amount), beneficiary]
+    args: [BigInt(amount), beneficiary],
   });
   return encodedData;
 }
@@ -47,7 +47,7 @@ export function AnySpendStakeB3({
   mode = "modal",
   recipientAddress,
   stakeAmount,
-  onSuccess
+  onSuccess,
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -63,9 +63,9 @@ export function AnySpendStakeB3({
   const {
     formattedBalance: b3Balance,
     isLoading: isBalanceLoading,
-    rawBalance: b3RawBalance
+    rawBalance: b3RawBalance,
   } = useTokenBalance({
-    token: B3_TOKEN
+    token: B3_TOKEN,
   });
 
   // Wagmi hooks for direct staking
@@ -82,8 +82,8 @@ export function AnySpendStakeB3({
   const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
     hash: stakingTxHash as `0x${string}`,
     query: {
-      structuralSharing: false // Disable to avoid BigInt serialization issues
-    }
+      structuralSharing: false, // Disable to avoid BigInt serialization issues
+    },
   });
 
   // Show success modal when transaction is confirmed
@@ -197,7 +197,7 @@ export function AnySpendStakeB3({
           address: B3_TOKEN.address as `0x${string}`,
           abi: erc20Abi,
           functionName: "allowance",
-          args: [address, ERC20Staking as `0x${string}`]
+          args: [address, ERC20Staking as `0x${string}`],
         });
 
         // If allowance is insufficient, request approval
@@ -208,7 +208,7 @@ export function AnySpendStakeB3({
             address: B3_TOKEN.address as `0x${string}`,
             abi: erc20Abi,
             functionName: "approve",
-            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)]
+            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
           });
 
           toast.info("Approval confirmed. Proceeding with stake...");
@@ -220,7 +220,7 @@ export function AnySpendStakeB3({
           address: ERC20Staking as `0x${string}`,
           abi: ABI_ERC20_STAKING,
           functionName: "stake",
-          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`]
+          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
         });
 
         setStakingTxHash(stakeHash);
@@ -285,7 +285,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
               className="relative mx-auto size-48"
@@ -297,7 +297,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
             >
@@ -315,7 +315,7 @@ export function AnySpendStakeB3({
             animate={{
               opacity: hasMounted ? 1 : 0,
               y: hasMounted ? 0 : 20,
-              filter: hasMounted ? "blur(0px)" : "blur(10px)"
+              filter: hasMounted ? "blur(0px)" : "blur(10px)",
             }}
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
@@ -397,7 +397,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
               className="relative mx-auto mb-4 size-[120px]"
@@ -422,7 +422,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
             >
@@ -437,7 +437,7 @@ export function AnySpendStakeB3({
             animate={{
               opacity: hasMounted ? 1 : 0,
               y: hasMounted ? 0 : 20,
-              filter: hasMounted ? "blur(0px)" : "blur(10px)"
+              filter: hasMounted ? "blur(0px)" : "blur(10px)",
             }}
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
@@ -483,7 +483,8 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        action: "stake B3"
+        type: OrderType.Custom,
+        action: "stake B3",
       }}
       header={header}
       onSuccess={onSuccess}

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

@@ -40,7 +40,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
     tournamentChainId,
     tournamentContractAddress,
     tournamentMetadata,
-    onSuccess
+    onSuccess,
   } = props;
 
   const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
@@ -48,7 +48,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
 
   const header = ({
     anyspendPrice,
-    isLoadingAnyspendPrice
+    isLoadingAnyspendPrice,
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -72,7 +72,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
               <AnimatePresence mode="wait">
                 <div
                   className={cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
-                    "opacity-0": isLoadingAnyspendPrice
+                    "opacity-0": isLoadingAnyspendPrice,
                   })}
                 >
                   {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })} (
@@ -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/AnyspendSignatureMint.tsx

@@ -0,0 +1,147 @@
+import { OrderType } from "@b3dotfun/sdk/anyspend";
+import { StyleRoot, useHasMounted, 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 { AnySpendCustom } from "./AnySpendCustom";
+
+// Helper function to determine if URL is a video
+function isVideoURL(url: string): boolean {
+  const videoExtensions = [".mp4", ".webm", ".ogg"];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+function generateEncodedDataForSignatureMint(signatureData: GenerateSigMintResponse): string {
+  const { signature, payload } = signatureData;
+  invariant(signature, "Signature is required");
+  invariant(payload, "Payload is required");
+
+  const mintRequest = {
+    to: payload.to,
+    royaltyRecipient: payload.royaltyRecipient,
+    royaltyBps: BigInt(payload.royaltyBps || 0),
+    primarySaleRecipient: payload.primarySaleRecipient,
+    tokenId: BigInt(payload.tokenId || 0),
+    uri: payload.uri,
+    quantity: BigInt(payload.quantity || 1),
+    pricePerToken: parseEther(payload.price?.toString() || "0"),
+    currency: payload.currencyAddress,
+    validityStartTimestamp: BigInt(payload.mintStartTime || 0),
+    validityEndTimestamp: BigInt(payload.mintEndTime || 0),
+    uid: payload.uid as `0x${string}`,
+  };
+
+  const encodedData = encodeFunctionData({
+    abi: [ABI_SIGNATURE_MINTING[0]],
+    functionName: "mintWithSignature",
+    args: [mintRequest, signature as `0x${string}`],
+  });
+
+  return encodedData;
+}
+
+export function AnyspendSignatureMint({
+  loadOrder,
+  mode = "modal",
+  signatureData,
+  imageUrl,
+  onSuccess,
+}: {
+  loadOrder?: string;
+  mode?: "modal" | "page";
+  signatureData: GenerateSigMintResponse;
+  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,
+  );
+
+  // Convert token data to AnySpend Token type
+  const dstToken = useMemo(() => {
+    if (!tokenData) return null;
+
+    return {
+      address: tokenData.address,
+      chainId: signatureData.collection.chainId,
+      name: tokenData.name,
+      symbol: tokenData.symbol,
+      decimals: tokenData.decimals,
+      metadata: {
+        logoURI: tokenData.logoURI,
+      },
+    };
+  }, [tokenData, signatureData.collection.chainId]);
+
+  const mediaUrl = imageUrl || signatureData.payload.metadata.image || "https://cdn.b3.fun/nft-placeholder.png";
+  const isVideo = isVideoURL(mediaUrl);
+
+  const header = () => (
+    <>
+      <div className="relative mx-auto size-32">
+        {isVideo ? (
+          <video autoPlay loop muted playsInline className="size-full rounded-lg object-cover">
+            <source src={mediaUrl} type={`video/${mediaUrl.split(".").pop()}`} />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <img alt="nft preview" className="size-full rounded-lg object-cover" src={mediaUrl} />
+        )}
+      </div>
+      <div className="mt-[-60px] w-full rounded-t-lg bg-white">
+        <div className="h-[60px] w-full" />
+        <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
+          <span className="font-sf-rounded text-2xl font-semibold">
+            {signatureData.payload.metadata.name || "Mint NFT"}{" "}
+            {Number(signatureData.payload.quantity) > 1 ? `(${signatureData.payload.quantity}x)` : ""}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+
+  // If we don't have token data, show error state
+  if (!dstToken || isTokenError) {
+    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-red text-center text-sm">
+            Failed to fetch payment token information for {signatureData.collection.signatureRequestBody?.currency} on
+            chain {signatureData.collection.chainId}. Please try again.
+          </p>
+        </div>
+      </StyleRoot>
+    );
+  }
+
+  const encodedData = generateEncodedDataForSignatureMint(signatureData);
+  const price = parseEther(signatureData.payload.price?.toString() || "0");
+
+  return (
+    <AnySpendCustom
+      isMainnet={true}
+      loadOrder={loadOrder}
+      mode={mode}
+      recipientAddress={signatureData.payload.to}
+      orderType={OrderType.Custom}
+      dstChainId={signatureData.collection.chainId}
+      dstToken={dstToken}
+      dstAmount={price.toString()}
+      contractAddress={signatureData.collection.address!}
+      encodedData={encodedData}
+      metadata={{
+        type: OrderType.Custom,
+        action: "Signature Mint",
+      }}
+      header={header}
+      onSuccess={onSuccess}
+      showRecipient={true}
+    />
+  );
+}

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

@@ -1,7 +1,7 @@
 export function ChainTokenIcon({
   chainUrl,
   tokenUrl,
-  className = ""
+  className = "",
 }: {
   chainUrl: string;
   tokenUrl: string;