@b3dotfun/sdk 0.0.7 → 0.0.8-alpha.1

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

@@ -1,8 +1,13 @@
 import {
+  AnySpendMetadata,
   eqci,
   getDefaultToken,
   GetQuoteRequest,
   GetQuoteResponse,
+  isCustomTxMetadata,
+  isNftMetadata,
+  isTournamentMetadata,
+  Nft,
   NftType,
   OnrampVendor,
   OrderStatus,
@@ -10,33 +15,43 @@ import {
   RELAY_ETH_ADDRESS,
   Token,
   USDC_BASE,
+} from "@b3dotfun/sdk/anyspend";
+import {
+  CreateOrderParams,
   useAnyspendCreateOnrampOrder,
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
   useAnyspendTokenList,
-  useGeoOnrampOptions
-} from "@b3dotfun/sdk/anyspend";
-import { useB3, StyleRoot } from "@b3dotfun/sdk/global-account/react";
+  useGeoOnrampOptions,
+} from "@b3dotfun/sdk/anyspend/react";
 import {
   Badge,
   Button,
+  Dialog,
+  DialogContent,
+  Input,
   ShinyButton,
   Skeleton,
+  StyleRoot,
   Tabs,
   TabsContent,
   TabsList,
   TabTrigger,
+  TextShimmer,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TransitionPanel,
   useAccountWallet,
+  useB3,
   useBsmntProfile,
   useHasMounted,
+  useModalStore,
   useRouter,
+  useSearchParamsSSR,
   useTokenBalancesByChain,
-  useModalStore,
-  useSearchParamsSSR
 } 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";
@@ -57,7 +72,7 @@ enum PanelView {
   CONFIRM_ORDER,
   HISTORY,
   ORDER_DETAILS,
-  LOADING
+  LOADING,
 }
 
 function generateGetRelayQuoteRequest({
@@ -68,8 +83,10 @@ function generateGetRelayQuoteRequest({
   dstToken,
   dstAmount,
   contractAddress,
+  tokenId,
+  contractType,
   encodedData,
-  spenderAddress
+  spenderAddress,
 }: {
   orderType: OrderType;
   srcChainId: number;
@@ -78,6 +95,8 @@ function generateGetRelayQuoteRequest({
   dstToken: Token;
   dstAmount: string;
   contractAddress: string;
+  tokenId?: number | null;
+  contractType?: NftType;
   encodedData: string;
   spenderAddress?: string;
 }): GetQuoteRequest {
@@ -90,7 +109,9 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
+        tokenId: tokenId!,
+        contractType: contractType!,
       };
     }
     case OrderType.JoinTournament: {
@@ -101,7 +122,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
       };
     }
     case OrderType.FundTournament: {
@@ -112,7 +133,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         fundAmount: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
       };
     }
     case OrderType.Custom: {
@@ -126,8 +147,8 @@ function generateGetRelayQuoteRequest({
           amount: dstAmount,
           data: encodedData,
           to: contractAddress,
-          spenderAddress: spenderAddress
-        }
+          spenderAddress: spenderAddress,
+        },
       };
     }
     default: {
@@ -151,7 +172,7 @@ export function AnySpendCustom({
   metadata,
   header,
   onSuccess,
-  showRecipient = true
+  showRecipient = true,
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -164,10 +185,10 @@ export function AnySpendCustom({
   dstAmount: string;
   contractAddress: string;
   encodedData: string;
-  metadata: any;
+  metadata: AnySpendMetadata;
   header: ({
     anyspendPrice,
-    isLoadingAnyspendPrice
+    isLoadingAnyspendPrice,
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -183,22 +204,24 @@ export function AnySpendCustom({
   const router = useRouter();
 
   const [activePanel, setActivePanel] = useState<PanelView>(
-    loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER
+    loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">("crypto");
 
   // Get current user's wallet
   const currentWallet = useAccountWallet();
 
-  const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
+  // Add state for recipient modal
+  const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
+
+  // Add state for custom recipient
+  const [customRecipientAddress, setCustomRecipientAddress] = useState<string | undefined>(recipientAddressProps);
 
-  const recipientAddress = recipientAddressProps || currentWallet.address;
-  const recipientEnsName = recipientAddressProps
-    ? recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "")
-    : currentWallet.ensName;
-  const recipientImageUrl = recipientAddressProps
-    ? recipientPropsProfile.data?.avatar
-    : currentWallet.wallet.meta?.icon;
+  // 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 recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
 
@@ -212,7 +235,7 @@ export function AnySpendCustom({
   const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
     address: currentWallet?.wallet?.address || "",
     chainsIds: [srcChainId],
-    enabled: !!currentWallet?.wallet?.address && !!chainName
+    enabled: !!currentWallet?.wallet?.address && !!chainName,
   });
 
   // Find a token with a balance, prioritizing tokens the user already owns
@@ -266,23 +289,38 @@ export function AnySpendCustom({
 
   const { account: isAuthenticated } = useB3();
 
-  const getRelayQuoteRequest = generateGetRelayQuoteRequest({
-    orderType: orderType,
-    srcChainId: srcChainId,
-    srcToken: srcToken,
-    dstChainId: dstChainId,
-    dstToken: dstToken,
-    dstAmount: dstAmount,
-    contractAddress: contractAddress,
-    encodedData: encodedData,
-    spenderAddress: spenderAddress
-  });
+  const getRelayQuoteRequest = useMemo(() => {
+    return generateGetRelayQuoteRequest({
+      orderType: orderType,
+      srcChainId: srcChainId,
+      srcToken: srcToken,
+      dstChainId: dstChainId,
+      dstToken: dstToken,
+      dstAmount: dstAmount,
+      contractAddress: contractAddress,
+      tokenId: isNftMetadata(metadata) ? metadata.nftContract.tokenId : undefined,
+      contractType: isNftMetadata(metadata) ? metadata.nftContract.type : undefined,
+      encodedData: encodedData,
+      spenderAddress: spenderAddress,
+    });
+  }, [
+    contractAddress,
+    dstAmount,
+    dstChainId,
+    dstToken,
+    encodedData,
+    metadata,
+    orderType,
+    spenderAddress,
+    srcChainId,
+    srcToken,
+  ]);
   const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(isMainnet, getRelayQuoteRequest);
 
   // Get geo data and onramp options (after quote is available)
   const { geoData, isOnrampSupported } = useGeoOnrampOptions(
     isMainnet,
-    anyspendQuote?.data?.currencyIn?.amountUsd || "0"
+    anyspendQuote?.data?.currencyIn?.amountUsd || "0",
   );
 
   const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(isMainnet, orderId);
@@ -339,7 +377,7 @@ export function AnySpendCustom({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    }
+    },
   });
 
   const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
@@ -349,14 +387,14 @@ export function AnySpendCustom({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    }
+    },
   });
 
   const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
 
   const handleCreateOrder = async (
     recipientAddress: string,
-    onramp?: { paymentMethod: string; vendor: OnrampVendor }
+    onramp?: { paymentMethod: string; vendor: OnrampVendor },
   ) => {
     try {
       invariant(anyspendQuote, "Relay price is not found");
@@ -372,23 +410,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");
@@ -404,9 +464,9 @@ export function AnySpendCustom({
             redirectUrl:
               window.location.origin === "https://basement.fun"
                 ? "https://basement.fun/deposit"
-                : window.location.origin
+                : window.location.origin,
           },
-          expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0"
+          expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
         });
       } else {
         void createRegularOrder(createOrderParams);
@@ -426,11 +486,11 @@ export function AnySpendCustom({
           ...b3,
           rpc: "https://mainnet-rpc.b3.fun",
           blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
-          testnet: undefined
+          testnet: undefined,
         },
         partnerId: String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID),
         type: "signInWithB3",
-        showBackButton: false
+        showBackButton: false,
       });
       setB3ModalOpen(true);
       return;
@@ -453,7 +513,7 @@ export function AnySpendCustom({
         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="flex w-full items-center justify-between gap-4"
@@ -468,7 +528,11 @@ export function AnySpendCustom({
                 : "Recipient"}
         </div>
         <div>
-          <Button variant="outline" className="w-full justify-between border-none p-0">
+          <Button
+            variant="outline"
+            className="w-full justify-between border-none p-0"
+            onClick={() => setIsRecipientModalOpen(true)}
+          >
             <div className="flex items-center gap-2">
               {recipientImageUrl && (
                 <img
@@ -492,7 +556,7 @@ export function AnySpendCustom({
     <div
       className={cn(
         "mx-auto flex w-full max-w-2xl flex-col items-center p-5",
-        mode === "modal" && "bg-b3-react-background"
+        mode === "modal" && "bg-b3-react-background",
       )}
     >
       <OrderHistory
@@ -508,8 +572,8 @@ export function AnySpendCustom({
   const orderDetailsView = (
     <div
       className={cn(
-        "mx-auto flex w-full flex-col items-center gap-4 p-5",
-        mode === "modal" && "bg-b3-react-background"
+        "mx-auto flex max-h-[90dvh] w-full flex-col items-center gap-4 overflow-y-auto p-5",
+        mode === "modal" && "bg-b3-react-background",
       )}
     >
       {oat && (
@@ -542,7 +606,7 @@ export function AnySpendCustom({
     <div
       className={cn(
         "mx-auto flex w-full flex-col items-center gap-4 p-5",
-        mode === "modal" && "bg-b3-react-background"
+        mode === "modal" && "bg-b3-react-background",
       )}
     >
       {/* Status Badge */}
@@ -626,19 +690,38 @@ export function AnySpendCustom({
       <Tabs
         value={activeTab}
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
-        className="bg-b3-react-background w-full p-5"
+        className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
       >
-        {/* Only show tabs when geo onramp has been properly initialized */}
-        {isOnrampSupported || activeTab === "fiat" ? (
-          <TabsList hideGradient className="justify-center">
-            <TabTrigger value="crypto">
-              <span className="text-as-primary w-[140px]">Pay with crypto</span>
-            </TabTrigger>
+        <TabsList hideGradient className="justify-center">
+          <TabTrigger value="crypto">
+            <span className="text-as-primary w-[140px]">Pay with crypto</span>
+          </TabTrigger>
+          {isOnrampSupported ? (
             <TabTrigger value="fiat">
               <span className="text-as-primary w-[140px]">Pay with fiat</span>
             </TabTrigger>
-          </TabsList>
-        ) : null}
+          ) : (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <TabTrigger value="fiat" disabled>
+                  <span className="text-as-primary w-[140px]">Pay with fiat</span>
+                </TabTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                <span className="text-as-primary w-[140px]">Fiat payments are not supported for this amount</span>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </TabsList>
+
+        {/* Warning */}
+        {/* {srcChainId === base.id || dstChainId === base.id || activeTab === "fiat" ? (
+          <>
+            <Warning text="Base is experiencing temporary issues. Please check back later." />
+
+            <div className="h-1" />
+          </>
+        ) : null} */}
 
         {/* Crypto tab */}
         <TabsContent value="crypto">
@@ -649,7 +732,7 @@ export function AnySpendCustom({
                 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 flex w-full items-center justify-between"
@@ -674,12 +757,14 @@ export function AnySpendCustom({
                 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" }}
                 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>
@@ -695,7 +780,7 @@ export function AnySpendCustom({
                 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.3, ease: "easeInOut" }}
                 className="flex w-full flex-col gap-2"
@@ -749,20 +834,36 @@ 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,
                       data: encodedData,
                       to: contractAddress,
-                      spenderAddress: spenderAddress
+                      spenderAddress: spenderAddress,
                     }
                   : undefined
               }
@@ -792,7 +893,7 @@ export function AnySpendCustom({
         variants={{
           enter: { x: 300, opacity: 0 },
           center: { x: 0, opacity: 1 },
-          exit: { x: -300, opacity: 0 }
+          exit: { x: -300, opacity: 0 },
         }}
         transition={{ type: "spring", stiffness: 300, damping: 30 }}
       >
@@ -808,9 +909,35 @@ export function AnySpendCustom({
           </div>,
           <div key="loading-view" className="w-full">
             {loadingView}
-          </div>
+          </div>,
         ]}
       </TransitionPanel>
+
+      {/* Add EnterRecipientModal */}
+      <Dialog open={isRecipientModalOpen} onOpenChange={setIsRecipientModalOpen}>
+        <DialogContent className="w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5">
+          <div className="flex flex-col gap-3">
+            <div className="text-as-primary font-semibold">To address</div>
+            <Input
+              value={customRecipientAddress || ""}
+              onChange={e => setCustomRecipientAddress(e.target.value)}
+              placeholder="Enter address"
+              className="h-12 rounded-lg"
+              spellCheck={false}
+            />
+            <ShinyButton
+              accentColor={"hsl(var(--as-brand))"}
+              textColor="text-white"
+              className="w-full rounded-lg"
+              onClick={() => {
+                setIsRecipientModalOpen(false);
+              }}
+            >
+              Save
+            </ShinyButton>
+          </div>
+        </DialogContent>
+      </Dialog>
     </StyleRoot>
   );
 }

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,17 +15,19 @@ 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,
-    isLoadingAnyspendPrice
+    isLoadingAnyspendPrice,
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -51,7 +52,7 @@ export function AnySpendNFT({
               <AnimatePresence mode="wait">
                 <div
                   className={cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
-                    "opacity-0": isLoadingAnyspendPrice
+                    "opacity-0": isLoadingAnyspendPrice,
                   })}
                 >
                   {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })}
@@ -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}
     />
   );
 }