@b3dotfun/sdk 0.0.3 → 0.0.4-alpha.1

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -0,0 +1,207 @@
+import {
+  getChainName,
+  GetQuoteResponse,
+  OnrampVendor,
+  OrderType,
+  Token,
+  useAnyspendCreateOnrampOrder,
+  useGeoOnrampOptions
+} from "@b3dotfun/sdk/anyspend";
+import { Button } from "@b3dotfun/sdk/global-account/react";
+import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
+import { motion } from "framer-motion";
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { formatUnits } from "viem";
+
+interface WebviewOnrampPaymentProps {
+  srcAmountOnRamp: string;
+  recipientAddress?: string;
+  destinationToken: Token;
+  anyspendQuote: GetQuoteResponse | undefined;
+  onOrderCreated: (orderId: string) => void;
+  userId?: string;
+}
+
+export function WebviewOnrampPayment({
+  srcAmountOnRamp,
+  recipientAddress,
+  destinationToken,
+  anyspendQuote,
+  onOrderCreated,
+  userId
+}: WebviewOnrampPaymentProps) {
+  // Use a stable amount for geo onramp options to prevent unnecessary refetches
+  const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
+  const hasInitialized = useRef(false);
+
+  // Only update the stable amount on first render or when explicitly needed
+  useEffect(() => {
+    if (!hasInitialized.current && srcAmountOnRamp) {
+      setStableAmountForGeo(srcAmountOnRamp);
+      hasInitialized.current = true;
+    }
+  }, [srcAmountOnRamp]);
+
+  const {
+    geoData,
+    isStripeWeb2Supported,
+    isLoading: isLoadingGeoOnramp
+  } = useGeoOnrampOptions(true, stableAmountForGeo);
+
+  console.log("isStripeWeb2Supported", isStripeWeb2Supported);
+
+  const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
+    onSuccess: data => {
+      const orderId = data.data.id;
+      window.location.href = `${window.location.origin}/?orderId=${orderId}`;
+    },
+    onError: error => {
+      console.error(error);
+      toast.error("Failed to create order: " + error.message);
+    }
+  });
+
+  const handleContinueToPayment = async () => {
+    try {
+      if (!recipientAddress) {
+        toast.error("Please select a recipient");
+        return;
+      }
+
+      if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
+        toast.error("Please enter a valid amount");
+        return;
+      }
+
+      if (!isStripeWeb2Supported) {
+        toast.error("Stripe credit card not available");
+        return;
+      }
+
+      if (!anyspendQuote) {
+        toast.error("Failed to get quote");
+        return;
+      }
+
+      const getDstToken = (): Token => {
+        return {
+          ...destinationToken,
+          chainId: destinationToken.chainId,
+          address: destinationToken.address
+        };
+      };
+
+      createOrder({
+        isMainnet: true,
+        recipientAddress,
+        orderType: OrderType.Swap,
+        dstChain: getDstToken().chainId,
+        dstToken: getDstToken(),
+        srcFiatAmount: srcAmountOnRamp,
+        onramp: {
+          vendor: OnrampVendor.StripeWeb2,
+          paymentMethod: "",
+          country: geoData?.country || "US",
+          ipAddress: geoData?.ip,
+          redirectUrl: `${window.location.origin}${userId ? `?userId=${userId}` : ""}`
+        },
+        expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0"
+      });
+    } catch (err: any) {
+      console.error(err);
+      toast.error("Failed to create order: " + err.message);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
+      {/* Order Summary Section */}
+      <>
+        <h2 className="-mb-3 text-lg font-semibold">Order summary</h2>
+        <div className="bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4">
+          {/* Destination Token */}
+          <div className="flex items-center justify-between">
+            <p className="text-b3-react-foreground/60">Receiving</p>
+            <div className="flex items-center gap-2">
+              {destinationToken.metadata?.logoURI && (
+                <img
+                  src={destinationToken.metadata.logoURI}
+                  alt={destinationToken.symbol}
+                  className="h-6 w-6 rounded-full"
+                />
+              )}
+              <span className="text-b3-react-foreground/80">
+                {anyspendQuote?.data?.currencyOut?.amount
+                  ? Number(
+                      formatUnits(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)
+                    ).toFixed(4)
+                  : "0"}{" "}
+                {destinationToken.symbol}
+              </span>
+            </div>
+          </div>
+
+          {/* Network */}
+          <div className="flex items-center justify-between">
+            <p className="text-b3-react-foreground/60">Network</p>
+            <span className="text-b3-react-foreground/80">{getChainName(destinationToken.chainId)}</span>
+          </div>
+
+          {/* Recipient Section */}
+          {recipientAddress && (
+            <motion.div
+              initial={false}
+              animate={{
+                opacity: 1,
+                y: 0,
+                filter: "blur(0px)"
+              }}
+              transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
+              className="flex items-center justify-between"
+            >
+              <p className="text-b3-react-foreground/60">Recipient</p>
+              <div className="flex items-center gap-2">
+                <span className="text-b3-react-foreground/80">{centerTruncate(recipientAddress)}</span>
+              </div>
+            </motion.div>
+          )}
+
+          {/* Amount Section */}
+          <div className="border-b3-react-border border-t pt-3">
+            <div className="flex items-center justify-between">
+              <p className="text-b3-react-foreground font-semibold">You Pay</p>
+              <p className="text-b3-react-foreground text-xl font-semibold">
+                ${parseFloat(srcAmountOnRamp).toFixed(2)}
+              </p>
+            </div>
+          </div>
+        </div>
+      </>
+
+      {/* Payment Section */}
+      {isCreatingOrder ? (
+        <div className="bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-as-primary/70">Creating payment session...</span>
+        </div>
+      ) : isLoadingGeoOnramp ? (
+        <div className="bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-as-primary/70">Loading payment options...</span>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          <Button
+            onClick={handleContinueToPayment}
+            disabled={isCreatingOrder || !isStripeWeb2Supported}
+            className="bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium"
+          >
+            {isCreatingOrder ? "Creating Payment..." : "Continue to Payment"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/anyspend/types/order.ts

@@ -57,6 +57,7 @@ export const zBaseOrder = z.object({
   expiredAt: z.number(),
   onrampMetadata: zOnrampMetadata.nullable(),
   creatorAddress: z.string().nullable(),
+  partnerId: z.string().nullable(),
 
   oneClickBuyUrl: z.string().nullable(),
   stripePaymentIntentId: z.string().nullable(),

package/src/global-account/react/hooks/useTokenFromUrl.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { Token } from "@b3dotfun/sdk/anyspend";
+import { getCoingeckoChainInfo } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
 
 interface UseTokenFromUrlOptions {
@@ -15,32 +17,88 @@ interface UseTokenFromUrlOptions {
   prefix: string;
 }
 
+interface TokenInfo {
+  data: {
+    attributes: {
+      address: string;
+      name: string;
+      symbol: string;
+      decimals: number;
+      image_url: string;
+    };
+  };
+}
+
+async function fetchTokenInfo(network: string, address: string): Promise<TokenInfo> {
+  const response = await fetch("https://api.b3.fun/tokens", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Service-Method": "getCoinGeckoTokenInfo"
+    },
+    body: JSON.stringify({
+      network,
+      address
+    })
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch token info");
+  }
+
+  return response.json();
+}
+
 /**
- * Hook to parse token data from URL parameters.
+ * Hook to parse token data from URL parameters and fetch additional token info.
  * Looks for parameters: [prefix]Currency
  */
 export function useTokenFromUrl({ defaultToken, prefix }: UseTokenFromUrlOptions): Token {
   const searchParams = useSearchParams();
 
-  if (!searchParams) {
-    return defaultToken;
-  }
-
   // Get parameters from URL
-  const currencyParam = searchParams.get(`${prefix}Currency`);
-  const chainIdParam = searchParams.get(`${prefix}ChainId`);
-  if (!currencyParam || !chainIdParam) {
+  const currencyParam = searchParams?.get(`${prefix}Currency`);
+  const chainIdParam = searchParams?.get(`${prefix}ChainId`);
+
+  // Determine if we should fetch token info
+  const shouldFetchToken = Boolean(
+    currencyParam && chainIdParam && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase()
+  );
+
+  // Determine network based on chainId
+  const network = chainIdParam ? getCoingeckoChainInfo(Number(chainIdParam)).coingecko_id : "";
+
+  const { data: tokenInfo, isError } = useQuery({
+    queryKey: ["tokenInfo", network, currencyParam],
+    queryFn: () => fetchTokenInfo(network, currencyParam!),
+    enabled: shouldFetchToken,
+    staleTime: Infinity,
+    gcTime: Infinity
+  });
+
+  // Return default token if no params or same as default
+  if (!shouldFetchToken) {
     return defaultToken;
   }
 
-  // If the currency is the same as the default token, return that
-  if (currencyParam.toLowerCase() === defaultToken.address.toLowerCase()) {
-    return defaultToken;
+  // Return basic token info if API call fails or while loading
+  if (isError || !tokenInfo) {
+    return {
+      ...defaultToken,
+      address: currencyParam!,
+      chainId: Number(chainIdParam)
+    };
   }
 
+  // Return enhanced token with API data
   return {
-    ...defaultToken,
-    address: currencyParam,
-    chainId: Number(chainIdParam)
+    address: tokenInfo.data.attributes.address,
+    chainId: Number(chainIdParam),
+    name: tokenInfo.data.attributes.name,
+    symbol: tokenInfo.data.attributes.symbol,
+    decimals: tokenInfo.data.attributes.decimals,
+    metadata: {
+      logoURI: tokenInfo.data.attributes.image_url
+    }
   };
 }

package/src/shared/constants/chains/supported.ts

@@ -3,8 +3,10 @@ import { toThirdwebChain, toViemChain } from "@b3dotfun/sdk/shared/utils/chain-t
 import type { Chain as ThirdwebChain } from "thirdweb";
 // Import the JSON directly
 // @ts-ignore
-import chainNetworksJSON from "../../../generated/chain-networks.json" with { type: "json" };
-import invariant from "invariant";
+import chainNetworksJSON from "../../generated/chain-networks.json" with { type: "json" };
+// @ts-ignore
+import coingeckoChainsJSON from "../../generated/coingecko-chains.json" with { type: "json" };
+
 const chainNetworks = chainNetworksJSON as ChainNetworks[];
 
 // Convert custom chains to Viem format
@@ -27,15 +29,24 @@ export const supportedChainsTW: ThirdwebChain[] = [
 // Original format from chain-networks.json
 export const supportedChainNetworks = chainNetworks;
 
-export const b3Mainnet = supportedChains.find(chain => chain.id === 8333)!;
-invariant(b3Mainnet, "B3 mainnet chain not found in supported chains");
-export const b3Testnet = supportedChains.find(chain => chain.id === 1993)!;
-invariant(b3Testnet, "B3 testnet chain not found in supported chains");
-export const baseMainnet = supportedChains.find(chain => chain.id === 8453);
-invariant(baseMainnet, "Base mainnet chain not found in supported chains");
+// CoinGecko chain mapping
+export const coingeckoChains = coingeckoChainsJSON as Record<
+  number,
+  {
+    coingecko_id: string;
+    name: string;
+    native_coin_id: string;
+  }
+>;
 
-export const b3MainnetThirdWeb = supportedChainsTW.find(chain => chain.id === 8333)!;
-invariant(b3MainnetThirdWeb, "B3 mainnet chain not found in supported chains TW");
+// Helper function to get CoinGecko chain info
+export function getCoingeckoChainInfo(chainId: number) {
+  return coingeckoChains[chainId];
+}
+
+export const b3Mainnet = supportedChains.find(chain => chain.id === 8333);
+export const b3Testnet = supportedChains.find(chain => chain.id === 1993);
+export const baseMainnet = supportedChains.find(chain => chain.id === 8453);
 
-export const b3TestnetThirdWeb = supportedChainsTW.find(chain => chain.id === 1993)!;
-invariant(b3TestnetThirdWeb, "B3 testnet chain not found in supported chains TW");
+export const b3MainnetThirdWeb = supportedChainsTW.find(chain => chain.id === 8333);
+export const b3TestnetThirdWeb = supportedChainsTW.find(chain => chain.id === 1993);