@b3dotfun/sdk 0.0.7-alpha.27 → 0.0.7-alpha.3

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

@@ -1,13 +1,8 @@
 import {
-  AnySpendMetadata,
   eqci,
   getDefaultToken,
   GetQuoteRequest,
   GetQuoteResponse,
-  isCustomTxMetadata,
-  isNftMetadata,
-  isTournamentMetadata,
-  Nft,
   NftType,
   OnrampVendor,
   OrderStatus,
@@ -15,43 +10,33 @@ import {
   RELAY_ETH_ADDRESS,
   Token,
   USDC_BASE,
-} from "@b3dotfun/sdk/anyspend";
-import {
-  CreateOrderParams,
   useAnyspendCreateOnrampOrder,
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
   useAnyspendTokenList,
-  useGeoOnrampOptions,
-} from "@b3dotfun/sdk/anyspend/react";
+  useGeoOnrampOptions
+} from "@b3dotfun/sdk/anyspend";
+import { useB3, StyleRoot } from "@b3dotfun/sdk/global-account/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";
@@ -72,7 +57,7 @@ enum PanelView {
   CONFIRM_ORDER,
   HISTORY,
   ORDER_DETAILS,
-  LOADING,
+  LOADING
 }
 
 function generateGetRelayQuoteRequest({
@@ -83,10 +68,8 @@ function generateGetRelayQuoteRequest({
   dstToken,
   dstAmount,
   contractAddress,
-  tokenId,
-  contractType,
   encodedData,
-  spenderAddress,
+  spenderAddress
 }: {
   orderType: OrderType;
   srcChainId: number;
@@ -95,8 +78,6 @@ function generateGetRelayQuoteRequest({
   dstToken: Token;
   dstAmount: string;
   contractAddress: string;
-  tokenId?: number | null;
-  contractType?: NftType;
   encodedData: string;
   spenderAddress?: string;
 }): GetQuoteRequest {
@@ -109,9 +90,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress,
-        tokenId: tokenId!,
-        contractType: contractType!,
+        contractAddress: contractAddress
       };
     }
     case OrderType.JoinTournament: {
@@ -122,7 +101,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         price: dstAmount,
-        contractAddress: contractAddress,
+        contractAddress: contractAddress
       };
     }
     case OrderType.FundTournament: {
@@ -133,7 +112,7 @@ function generateGetRelayQuoteRequest({
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
         fundAmount: dstAmount,
-        contractAddress: contractAddress,
+        contractAddress: contractAddress
       };
     }
     case OrderType.Custom: {
@@ -147,8 +126,8 @@ function generateGetRelayQuoteRequest({
           amount: dstAmount,
           data: encodedData,
           to: contractAddress,
-          spenderAddress: spenderAddress,
-        },
+          spenderAddress: spenderAddress
+        }
       };
     }
     default: {
@@ -172,7 +151,7 @@ export function AnySpendCustom({
   metadata,
   header,
   onSuccess,
-  showRecipient = true,
+  showRecipient = true
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -185,10 +164,10 @@ export function AnySpendCustom({
   dstAmount: string;
   contractAddress: string;
   encodedData: string;
-  metadata: AnySpendMetadata;
+  metadata: any;
   header: ({
     anyspendPrice,
-    isLoadingAnyspendPrice,
+    isLoadingAnyspendPrice
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -204,24 +183,22 @@ 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();
 
-  // Add state for recipient modal
-  const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
-
-  // Add state for custom recipient
-  const [customRecipientAddress, setCustomRecipientAddress] = useState<string | undefined>(recipientAddressProps);
+  const recipientPropsProfile = useBsmntProfile({ address: recipientAddressProps });
 
-  // 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 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;
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
 
@@ -235,7 +212,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
@@ -289,38 +266,23 @@ export function AnySpendCustom({
 
   const { account: isAuthenticated } = useB3();
 
-  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 getRelayQuoteRequest = generateGetRelayQuoteRequest({
+    orderType: orderType,
+    srcChainId: srcChainId,
+    srcToken: srcToken,
+    dstChainId: dstChainId,
+    dstToken: dstToken,
+    dstAmount: dstAmount,
+    contractAddress: contractAddress,
+    encodedData: encodedData,
+    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);
@@ -377,7 +339,7 @@ export function AnySpendCustom({
     onError: error => {
       console.error(error);
       toast.error("Failed to create order: " + error.message);
-    },
+    }
   });
 
   const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
@@ -387,14 +349,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");
@@ -410,45 +372,23 @@ 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,
-        // only populate payload for custom tx
-        payload: isCustomTxMetadata(metadata)
-          ? {
-              amount: dstAmount,
-              data: encodedData,
-              spenderAddress: spenderAddress,
-              to: contractAddress,
-              action: metadata.action,
-            }
-          : undefined,
-      } as CreateOrderParams;
+        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
+        }
+      };
 
       if (onramp) {
         invariant(srcToken.address === USDC_BASE.address, "Selected src token is not USDC");
@@ -464,9 +404,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);
@@ -486,11 +426,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;
@@ -513,7 +453,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"
@@ -528,11 +468,7 @@ export function AnySpendCustom({
                 : "Recipient"}
         </div>
         <div>
-          <Button
-            variant="outline"
-            className="w-full justify-between border-none p-0"
-            onClick={() => setIsRecipientModalOpen(true)}
-          >
+          <Button variant="outline" className="w-full justify-between border-none p-0">
             <div className="flex items-center gap-2">
               {recipientImageUrl && (
                 <img
@@ -556,7 +492,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
@@ -572,8 +508,8 @@ export function AnySpendCustom({
   const orderDetailsView = (
     <div
       className={cn(
-        "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",
+        "mx-auto flex w-full flex-col items-center gap-4 p-5",
+        mode === "modal" && "bg-b3-react-background"
       )}
     >
       {oat && (
@@ -606,7 +542,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 */}
@@ -690,38 +626,19 @@ export function AnySpendCustom({
       <Tabs
         value={activeTab}
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
-        className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
+        className="bg-b3-react-background w-full p-5"
       >
-        <TabsList hideGradient className="justify-center">
-          <TabTrigger value="crypto">
-            <span className="text-as-primary w-[140px]">Pay with crypto</span>
-          </TabTrigger>
-          {isOnrampSupported ? (
+        {/* 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>
             <TabTrigger value="fiat">
               <span className="text-as-primary w-[140px]">Pay with fiat</span>
             </TabTrigger>
-          ) : (
-            <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} */}
+          </TabsList>
+        ) : null}
 
         {/* Crypto tab */}
         <TabsContent value="crypto">
@@ -732,7 +649,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"
@@ -757,7 +674,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"
@@ -778,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.3, ease: "easeInOut" }}
                 className="flex w-full flex-col gap-2"
@@ -832,36 +749,20 @@ export function AnySpendCustom({
               onOrderCreated={(orderId: string) => setOrderId(orderId)}
               onBack={() => setActiveTab("crypto")}
               orderType={orderType}
-              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,
-                      }
+              nft={metadata.nftContract ? { ...metadata.nftContract, price: dstAmount } : undefined}
+              tournament={
+                metadata.tournament
+                  ? { ...metadata.tournament, contractAddress: contractAddress, entryPriceOrFundAmount: dstAmount }
                   : undefined
               }
               payload={
-                isCustomTxMetadata(metadata)
+                metadata.action
                   ? {
                       ...metadata,
                       amount: dstAmount,
                       data: encodedData,
                       to: contractAddress,
-                      spenderAddress: spenderAddress,
+                      spenderAddress: spenderAddress
                     }
                   : undefined
               }
@@ -891,7 +792,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 }}
       >
@@ -907,35 +808,9 @@ 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,4 +1,5 @@
 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";
@@ -15,19 +16,17 @@ export function AnySpendNFT({
   loadOrder,
   mode = "modal",
   recipientAddress,
-  nftContract,
-  onSuccess,
+  nftContract = DEFAULT_NFT_CONTRACT
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
-  nftContract: NftContract;
-  onSuccess?: (txHash?: string) => void;
+  nftContract?: NftContract;
 }) {
   const header = ({
     anyspendPrice,
-    isLoadingAnyspendPrice,
+    isLoadingAnyspendPrice
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -52,7 +51,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" })}
@@ -79,12 +78,8 @@ export function AnySpendNFT({
       dstAmount={nftContract.price}
       contractAddress={nftContract.contractAddress}
       encodedData="0x"
-      metadata={{
-        type: OrderType.MintNFT,
-        nftContract: nftContract,
-      }}
+      metadata={{ 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);
   };