@b3dotfun/sdk 0.0.16-alpha.2 → 0.0.16-alpha.3

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -162,8 +162,8 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const getRelayQuoteRequest = (0, react_4.useMemo)(() => {
         return generateGetRelayQuoteRequest({
             orderType: orderType,
-            srcChainId: srcChainId,
-            srcToken: srcToken,
+            srcChainId: activeTab === "fiat" ? chains_1.base.id : srcChainId,
+            srcToken: activeTab === "fiat" ? constants_1.USDC_BASE : srcToken,
             dstChainId: dstChainId,
             dstToken: dstToken,
             dstAmount: dstAmount,
@@ -174,12 +174,15 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             spenderAddress: spenderAddress,
         });
     }, [
+        activeTab,
         contractAddress,
         dstAmount,
         dstChainId,
         dstToken,
         encodedData,
-        metadata,
+        metadata.nftContract.tokenId,
+        metadata.nftContract.type,
+        metadata.type,
         orderType,
         spenderAddress,
         srcChainId,
@@ -195,33 +198,25 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         params.set("orderId", selectedOrderId);
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
-    const [srcAmount, setSrcAmount] = (0, react_4.useState)(null);
-    const formattedSrcAmount = srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), srcToken.decimals) : null;
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, formattedSrcAmount || "0");
-    // Update the selected src token to USDC and chain to base when the active tab is fiat,
-    // also force not to update srcToken by setting dirtySelectSrcToken to true.
-    (0, react_4.useEffect)(() => {
-        if (activeTab === "fiat") {
-            setSrcChainId(chains_1.base.id);
-            setSrcToken(constants_1.USDC_BASE);
-            setDirtySelectSrcToken(true);
-        }
-    }, [activeTab]);
     // Update dependent amount when relay price changes
-    (0, react_4.useEffect)(() => {
-        if (anyspendQuote?.data &&
-            anyspendQuote.data.currencyIn?.amount &&
-            anyspendQuote.data.currencyIn?.currency?.decimals) {
-            // Use toPrecision instead of toSignificant
-            const amount = anyspendQuote.data.currencyIn.amount;
+    const srcAmount = (0, react_4.useMemo)(() => {
+        if (!anyspendQuote?.data ||
+            !anyspendQuote?.data?.currencyIn?.amount ||
+            !anyspendQuote?.data?.currencyIn?.currency?.decimals)
+            return null;
+        const amount = anyspendQuote.data.currencyIn.amount;
+        if (activeTab === "fiat") {
             const roundUpAmount = (0, anyspend_1.roundUpUSDCBaseAmountToNearest)(amount);
-            setSrcAmount(BigInt(roundUpAmount));
+            return BigInt(roundUpAmount);
         }
         else {
-            setSrcAmount(null);
+            return BigInt(amount);
         }
-    }, [anyspendQuote?.data]);
+    }, [activeTab, anyspendQuote?.data]);
+    const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
+    const srcFiatAmount = (0, react_4.useMemo)(() => (activeTab === "fiat" && srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
+    // Get geo data and onramp options (after quote is available)
+    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcFiatAmount);
     (0, react_4.useEffect)(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -255,9 +250,9 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             const createOrderParams = {
                 isMainnet: isMainnet,
                 orderType: orderType,
-                srcChain: srcChainId,
+                srcChain: activeTab === "fiat" ? chains_1.base.id : srcChainId,
                 dstChain: dstChainId,
-                srcToken: srcToken,
+                srcToken: activeTab === "fiat" ? constants_1.USDC_BASE : srcToken,
                 dstToken: dstToken,
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
@@ -306,7 +301,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                 (0, invariant_1.default)(srcChainId === chains_1.base.id, "Selected src chain is not base");
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: formattedSrcAmount || "0",
+                    srcFiatAmount: srcFiatAmount,
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,

package/dist/cjs/anyspend/react/components/common/PanelOnrampPayment.js

@@ -19,7 +19,6 @@ function PanelOnrampPayment(props) {
 }
 function PanelOnrampPaymentInner(props) {
     const { srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
-    console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
     const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -5,7 +5,7 @@ import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderA
 import { Badge, Button, Dialog, DialogContent, Input, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/index.js";
 import centerTruncate from "../../../shared/utils/centerTruncate.js";
-import { formatUnits } from "../../../shared/utils/number.js";
+import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
 import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js";
 import invariant from "invariant";
 import { ChevronRightCircle, Loader2 } from "lucide-react";
@@ -156,8 +156,8 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const getRelayQuoteRequest = useMemo(() => {
         return generateGetRelayQuoteRequest({
             orderType: orderType,
-            srcChainId: srcChainId,
-            srcToken: srcToken,
+            srcChainId: activeTab === "fiat" ? base.id : srcChainId,
+            srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
             dstChainId: dstChainId,
             dstToken: dstToken,
             dstAmount: dstAmount,
@@ -168,12 +168,15 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             spenderAddress: spenderAddress,
         });
     }, [
+        activeTab,
         contractAddress,
         dstAmount,
         dstChainId,
         dstToken,
         encodedData,
-        metadata,
+        metadata.nftContract.tokenId,
+        metadata.nftContract.type,
+        metadata.type,
         orderType,
         spenderAddress,
         srcChainId,
@@ -189,33 +192,25 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         params.set("orderId", selectedOrderId);
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
-    const [srcAmount, setSrcAmount] = useState(null);
-    const formattedSrcAmount = srcAmount ? formatUnits(srcAmount.toString(), srcToken.decimals) : null;
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, formattedSrcAmount || "0");
-    // Update the selected src token to USDC and chain to base when the active tab is fiat,
-    // also force not to update srcToken by setting dirtySelectSrcToken to true.
-    useEffect(() => {
-        if (activeTab === "fiat") {
-            setSrcChainId(base.id);
-            setSrcToken(USDC_BASE);
-            setDirtySelectSrcToken(true);
-        }
-    }, [activeTab]);
     // Update dependent amount when relay price changes
-    useEffect(() => {
-        if (anyspendQuote?.data &&
-            anyspendQuote.data.currencyIn?.amount &&
-            anyspendQuote.data.currencyIn?.currency?.decimals) {
-            // Use toPrecision instead of toSignificant
-            const amount = anyspendQuote.data.currencyIn.amount;
+    const srcAmount = useMemo(() => {
+        if (!anyspendQuote?.data ||
+            !anyspendQuote?.data?.currencyIn?.amount ||
+            !anyspendQuote?.data?.currencyIn?.currency?.decimals)
+            return null;
+        const amount = anyspendQuote.data.currencyIn.amount;
+        if (activeTab === "fiat") {
             const roundUpAmount = roundUpUSDCBaseAmountToNearest(amount);
-            setSrcAmount(BigInt(roundUpAmount));
+            return BigInt(roundUpAmount);
         }
         else {
-            setSrcAmount(null);
+            return BigInt(amount);
         }
-    }, [anyspendQuote?.data]);
+    }, [activeTab, anyspendQuote?.data]);
+    const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
+    const srcFiatAmount = useMemo(() => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
+    // Get geo data and onramp options (after quote is available)
+    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
     useEffect(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -249,9 +244,9 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             const createOrderParams = {
                 isMainnet: isMainnet,
                 orderType: orderType,
-                srcChain: srcChainId,
+                srcChain: activeTab === "fiat" ? base.id : srcChainId,
                 dstChain: dstChainId,
-                srcToken: srcToken,
+                srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
                 dstToken: dstToken,
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
@@ -300,7 +295,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                 invariant(srcChainId === base.id, "Selected src chain is not base");
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: formattedSrcAmount || "0",
+                    srcFiatAmount: srcFiatAmount,
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,

package/dist/esm/anyspend/react/components/common/PanelOnrampPayment.js

@@ -13,7 +13,6 @@ export function PanelOnrampPayment(props) {
 }
 function PanelOnrampPaymentInner(props) {
     const { srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
-    console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
     const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.16-alpha.2",
+  "version": "0.0.16-alpha.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -38,7 +38,7 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
-import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
 import invariant from "invariant";
 import { ChevronRightCircle, Loader2 } from "lucide-react";
@@ -274,8 +274,8 @@ export function AnySpendCustom({
   const getRelayQuoteRequest = useMemo(() => {
     return generateGetRelayQuoteRequest({
       orderType: orderType,
-      srcChainId: srcChainId,
-      srcToken: srcToken,
+      srcChainId: activeTab === "fiat" ? base.id : srcChainId,
+      srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
       dstChainId: dstChainId,
       dstToken: dstToken,
       dstAmount: dstAmount,
@@ -286,12 +286,15 @@ export function AnySpendCustom({
       spenderAddress: spenderAddress,
     });
   }, [
+    activeTab,
     contractAddress,
     dstAmount,
     dstChainId,
     dstToken,
     encodedData,
-    metadata,
+    metadata.nftContract.tokenId,
+    metadata.nftContract.type,
+    metadata.type,
     orderType,
     spenderAddress,
     srcChainId,
@@ -310,37 +313,31 @@ export function AnySpendCustom({
     router.push(`${window.location.pathname}?${params.toString()}`);
   };
 
-  const [srcAmount, setSrcAmount] = useState<bigint | null>(null);
-  const formattedSrcAmount = srcAmount ? formatUnits(srcAmount.toString(), srcToken.decimals) : null;
-
-  // Get geo data and onramp options (after quote is available)
-  const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, formattedSrcAmount || "0");
-
-  // Update the selected src token to USDC and chain to base when the active tab is fiat,
-  // also force not to update srcToken by setting dirtySelectSrcToken to true.
-  useEffect(() => {
-    if (activeTab === "fiat") {
-      setSrcChainId(base.id);
-      setSrcToken(USDC_BASE);
-      setDirtySelectSrcToken(true);
-    }
-  }, [activeTab]);
-
   // Update dependent amount when relay price changes
-  useEffect(() => {
+  const srcAmount = useMemo(() => {
     if (
-      anyspendQuote?.data &&
-      anyspendQuote.data.currencyIn?.amount &&
-      anyspendQuote.data.currencyIn?.currency?.decimals
-    ) {
-      // Use toPrecision instead of toSignificant
-      const amount = anyspendQuote.data.currencyIn.amount;
+      !anyspendQuote?.data ||
+      !anyspendQuote?.data?.currencyIn?.amount ||
+      !anyspendQuote?.data?.currencyIn?.currency?.decimals
+    )
+      return null;
+
+    const amount = anyspendQuote.data.currencyIn.amount;
+    if (activeTab === "fiat") {
       const roundUpAmount = roundUpUSDCBaseAmountToNearest(amount);
-      setSrcAmount(BigInt(roundUpAmount));
+      return BigInt(roundUpAmount);
     } else {
-      setSrcAmount(null);
+      return BigInt(amount);
     }
-  }, [anyspendQuote?.data]);
+  }, [activeTab, anyspendQuote?.data]);
+  const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
+  const srcFiatAmount = useMemo(
+    () => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"),
+    [activeTab, srcAmount],
+  );
+
+  // Get geo data and onramp options (after quote is available)
+  const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
 
   useEffect(() => {
     if (oat?.data?.order.status === "executed") {
@@ -383,9 +380,9 @@ export function AnySpendCustom({
       const createOrderParams = {
         isMainnet: isMainnet,
         orderType: orderType,
-        srcChain: srcChainId,
+        srcChain: activeTab === "fiat" ? base.id : srcChainId,
         dstChain: dstChainId,
-        srcToken: srcToken,
+        srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
         dstToken: dstToken,
         srcAmount: srcAmount.toString(),
         recipientAddress,
@@ -438,7 +435,7 @@ export function AnySpendCustom({
         invariant(srcChainId === base.id, "Selected src chain is not base");
         void createOnrampOrder({
           ...createOrderParams,
-          srcFiatAmount: formattedSrcAmount || "0",
+          srcFiatAmount: srcFiatAmount,
           onramp: {
             vendor: onramp.vendor,
             paymentMethod: onramp.paymentMethod,

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

@@ -63,8 +63,6 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     recipientImageUrl,
   } = props;
 
-  console.log(`PanelOnrampPaymentInner:srcAmountOnRamp`, srcAmountOnRamp);
-
   const {
     geoData,
     coinbaseOnrampOptions,