@b3dotfun/sdk 0.0.7-alpha.2 → 0.0.7-alpha.21

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,
@@ -15,28 +21,32 @@ import {
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
   useAnyspendTokenList,
-  useGeoOnrampOptions
+  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,
+  useModalStore,
   useRouter,
+  useSearchParamsSSR,
   useTokenBalancesByChain,
-  useModalStore,
-  useSearchParamsSSR
+  Dialog,
+  DialogContent,
+  Input,
 } 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 +67,7 @@ enum PanelView {
   CONFIRM_ORDER,
   HISTORY,
   ORDER_DETAILS,
-  LOADING
+  LOADING,
 }
 
 function generateGetRelayQuoteRequest({
@@ -68,8 +78,10 @@ function generateGetRelayQuoteRequest({
   dstToken,
   dstAmount,
   contractAddress,
+  tokenId,
+  contractType,
   encodedData,
-  spenderAddress
+  spenderAddress,
 }: {
   orderType: OrderType;
   srcChainId: number;
@@ -78,6 +90,8 @@ function generateGetRelayQuoteRequest({
   dstToken: Token;
   dstAmount: string;
   contractAddress: string;
+  tokenId?: number | null;
+  contractType?: NftType;
   encodedData: string;
   spenderAddress?: string;
 }): GetQuoteRequest {
@@ -90,7 +104,9 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
+        tokenId: tokenId!,
+        contractType: contractType!,
       };
     }
     case OrderType.JoinTournament: {
@@ -101,7 +117,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
       };
     }
     case OrderType.FundTournament: {
@@ -112,7 +128,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         fundAmount: dstAmount,
-        contractAddress: contractAddress
+        contractAddress: contractAddress,
       };
     }
     case OrderType.Custom: {
@@ -126,8 +142,8 @@ function generateGetRelayQuoteRequest({
           amount: dstAmount,
           data: encodedData,
           to: contractAddress,
-          spenderAddress: spenderAddress
-        }
+          spenderAddress: spenderAddress,
+        },
       };
     }
     default: {
@@ -151,7 +167,7 @@ export function AnySpendCustom({
   metadata,
   header,
   onSuccess,
-  showRecipient = true
+  showRecipient = true,
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -164,10 +180,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 +199,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 +230,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
@@ -274,15 +292,17 @@ 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
+    spenderAddress: spenderAddress,
   });
   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 +359,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 +369,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 +392,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 +446,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 +468,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 +495,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 +510,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 +538,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 +554,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 +588,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,7 +672,7 @@ 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" ? (
@@ -649,7 +695,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,7 +720,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.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
@@ -695,7 +741,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 +795,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 +854,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 +870,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}
     />
   );
 }

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

@@ -14,7 +14,7 @@ export function AnySpendNFTButton({ nftContract = DEFAULT_NFT_CONTRACT, recipien
     setB3ModalContentType({
       type: "anySpendNft",
       nftContract,
-      recipientAddress
+      recipientAddress,
     });
     setB3ModalOpen(true);
   };