@b3dotfun/sdk 0.0.5-alpha.6 → 0.0.5

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

@@ -1,120 +0,0 @@
-import { getChainName, Order, OrderStatus, OrderType } from "@b3dotfun/sdk/anyspend";
-import { Badge, useTokenData } from "@b3dotfun/sdk/global-account/react";
-import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
-import { CheckIcon, Copy, ExternalLink, Loader2 } from "lucide-react";
-import { toast } from "sonner";
-import { formatUnits } from "viem";
-
-interface WebviewOnrampOrderStatusProps {
-  order: Order;
-}
-
-export function WebviewOnrampOrderStatus({ order }: WebviewOnrampOrderStatusProps) {
-  console.log(order.status);
-  const isPending =
-    order.status === OrderStatus.WaitingStripePayment ||
-    order.status === OrderStatus.ScanningDepositTransaction ||
-    order.status === OrderStatus.SendingTokenFromVault ||
-    order.status === OrderStatus.ObtainToken ||
-    order.status === OrderStatus.Relay;
-  const isExecuted = order.status === OrderStatus.Executed;
-  const isFailed = order.status === OrderStatus.Failure;
-  const isRefunded = order.status === OrderStatus.Refunded;
-
-  // Get token metadata
-  const { data: tokenMetadata } = useTokenData(order.metadata.dstToken.chainId, order.metadata.dstToken.address);
-
-  // Only show expected amount for swap orders
-  const expectedAmount =
-    order.type === OrderType.Swap
-      ? Number(formatUnits(BigInt(order.payload.expectedDstAmount), order.metadata.dstToken.decimals)).toFixed(2)
-      : null;
-
-  // Use token metadata logo if available
-  const tokenLogoUrl = tokenMetadata?.logoURI || order.metadata.dstToken.metadata?.logoURI;
-
-  const handleCopy = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
-    toast.success(`${label} copied to clipboard`);
-  };
-
-  return (
-    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
-      {/* Status Badge */}
-      <div className="flex justify-center">
-        <Badge variant="default" className="flex items-center gap-3 px-4 py-2 text-base">
-          {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
-          {isExecuted && <CheckIcon className="h-4 w-4 text-green-500" />}
-          {isFailed && <ExternalLink className="h-4 w-4 text-red-500" />}
-          <span>
-            {isPending && "Processing Payment..."}
-            {isExecuted && "Payment Complete"}
-            {isFailed && "Payment Failed"}
-            {isRefunded && "Payment Refunded"}
-          </span>
-        </Badge>
-      </div>
-
-      {/* Order Summary Card */}
-      <div className="overflow-hidden rounded-xl bg-white">
-        <div className="px-6 py-4">
-          <h2 className="mb-4 text-lg font-semibold">Order Summary</h2>
-          <div className="flex flex-col divide-y">
-            {/* Amount Paid */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">Amount Paid</span>
-              <span className="text-lg font-semibold">
-                ${Number(formatUnits(BigInt(order.srcAmount), order.metadata.srcToken.decimals)).toFixed(2)}
-              </span>
-            </div>
-
-            {/* Receiving Amount - Only show for swap orders */}
-            {order.type === OrderType.Swap && expectedAmount && (
-              <div className="flex items-center justify-between py-3">
-                <span className="text-gray-600">Est Token Amount</span>
-                <div className="flex items-center gap-2">
-                  {tokenLogoUrl && (
-                    <img src={tokenLogoUrl} alt={order.metadata.dstToken.symbol} className="h-5 w-5 rounded-full" />
-                  )}
-                  <span className="font-medium">
-                    {expectedAmount} {order.metadata.dstToken.symbol}
-                  </span>
-                </div>
-              </div>
-            )}
-
-            {/* Network */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">Network</span>
-              <span className="font-medium">{getChainName(order.dstChain)}</span>
-            </div>
-
-            {/* Recipient */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">Recipient</span>
-              <button
-                onClick={() => handleCopy(order.recipientAddress, "Recipient address")}
-                className="flex items-center gap-2 font-medium transition-colors hover:text-blue-600"
-              >
-                {centerTruncate(order.recipientAddress, 8)}
-                <Copy className="h-4 w-4" />
-              </button>
-            </div>
-
-            {/* Order ID */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">Order ID</span>
-              <button
-                onClick={() => handleCopy(order.id, "Order ID")}
-                className="flex items-center gap-2 font-medium transition-colors hover:text-blue-600"
-              >
-                {centerTruncate(order.id, 8)}
-                <Copy className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,369 +0,0 @@
-import {
-  getChainName,
-  GetQuoteResponse,
-  OnrampVendor,
-  Order,
-  OrderType,
-  STRIPE_CONFIG,
-  Token,
-  useAnyspendCreateOnrampOrder,
-  useGeoOnrampOptions,
-  useStripeClientSecret
-} from "@b3dotfun/sdk/anyspend";
-import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
-import { motion } from "framer-motion";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { formatUnits } from "viem";
-
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
-
-interface WebviewOnrampPaymentProps {
-  srcAmountOnRamp: string;
-  recipientAddress?: string;
-  destinationToken: Token;
-  partnerId?: string;
-  anyspendQuote: GetQuoteResponse | undefined;
-  onPaymentSuccess: (orderId: string) => void;
-  userId?: string;
-}
-
-// Stripe Payment Form Component
-function StripePaymentForm({ order, onPaymentSuccess }: { order: Order; onPaymentSuccess: (orderId: string) => void }) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!stripe || !elements) {
-      return;
-    }
-
-    setIsProcessing(true);
-    setError(null);
-
-    try {
-      const { error: submitError } = await stripe.confirmPayment({
-        elements,
-        redirect: "if_required"
-      });
-
-      if (submitError) {
-        setError(submitError.message || "An error occurred");
-        console.error("Payment error:", submitError);
-      } else {
-        console.log("Payment successful");
-        onPaymentSuccess(order.id);
-      }
-    } catch (err: any) {
-      setError(err.message || "An error occurred");
-      console.error("Payment error:", err);
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  const stripeElementOptions = {
-    layout: "tabs" as const,
-    defaultValues: {
-      billingDetails: {
-        name: "",
-        email: ""
-      }
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="w-full">
-      <div className="overflow-hidden rounded-xl bg-white">
-        <div className="px-6 py-4">
-          <h2 className="mb-4 text-lg font-semibold">Payment Details</h2>
-          <PaymentElement options={stripeElementOptions} />
-
-          {error && (
-            <div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{error}</div>
-          )}
-
-          <button
-            type="submit"
-            disabled={!stripe || isProcessing}
-            className="mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {isProcessing ? (
-              <div className="flex items-center justify-center gap-2">
-                <Loader2 className="h-5 w-5 animate-spin" />
-                <span>Processing...</span>
-              </div>
-            ) : (
-              <span>Complete Payment</span>
-            )}
-          </button>
-        </div>
-      </div>
-    </form>
-  );
-}
-
-export function WebviewOnrampPayment({
-  srcAmountOnRamp,
-  recipientAddress,
-  destinationToken,
-  anyspendQuote,
-  onPaymentSuccess,
-  userId,
-  partnerId
-}: WebviewOnrampPaymentProps) {
-  const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
-  const hasInitialized = useRef(false);
-  const [createdOrder, setCreatedOrder] = useState<Order | null>(null);
-  const orderCreationAttempted = 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);
-
-  const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
-    onSuccess: data => {
-      const orderId = data.data.id;
-      setCreatedOrder(data.data);
-    },
-    onError: error => {
-      console.error(error);
-      toast.error("Failed to create order: " + error.message);
-    }
-  });
-
-  const { clientSecret, isLoadingStripeClientSecret } = useStripeClientSecret(
-    true,
-    createdOrder?.stripePaymentIntentId || ""
-  );
-
-  // Create order when component mounts and all required data is available
-  useEffect(() => {
-    const createOrderIfPossible = async () => {
-      if (
-        !orderCreationAttempted.current &&
-        recipientAddress &&
-        srcAmountOnRamp &&
-        parseFloat(srcAmountOnRamp) > 0 &&
-        isStripeWeb2Supported &&
-        anyspendQuote &&
-        geoData
-      ) {
-        orderCreationAttempted.current = true;
-
-        try {
-          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",
-            partnerId
-          });
-        } catch (err: any) {
-          console.error(err);
-          toast.error("Failed to create order: " + err.message);
-        }
-      }
-    };
-
-    createOrderIfPossible();
-  }, [
-    recipientAddress,
-    srcAmountOnRamp,
-    isStripeWeb2Supported,
-    anyspendQuote,
-    geoData,
-    createOrder,
-    destinationToken,
-    userId,
-    partnerId
-  ]);
-
-  // Check if all required data is loaded
-  const isLoading = isLoadingGeoOnramp || !anyspendQuote || !destinationToken.metadata?.logoURI;
-
-  // Show loading state while data is being fetched or order is being created
-  if (isLoading || isCreatingOrder || isLoadingStripeClientSecret) {
-    return (
-      <div className="mx-auto flex w-full max-w-[460px] flex-col items-center justify-center gap-3 py-12">
-        <Loader2 className="text-as-brand h-8 w-8 animate-spin" />
-        <span className="text-as-primary/70">
-          {isCreatingOrder
-            ? "Creating payment session..."
-            : isLoadingStripeClientSecret
-              ? "Loading payment form..."
-              : "Loading payment details..."}
-        </span>
-      </div>
-    );
-  }
-
-  // If we have a created order and client secret, show the payment form
-  if (createdOrder && clientSecret) {
-    return (
-      <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
-        {/* Order Summary Card */}
-        <div className="overflow-hidden rounded-xl bg-white">
-          <div className="px-6 py-4">
-            <h2 className="mb-4 text-lg font-semibold">Order summary</h2>
-            <div className="flex flex-col divide-y">
-              {/* Destination Token */}
-              <div className="flex items-center justify-between py-3">
-                <span className="text-gray-600">Receiving</span>
-                <div className="flex items-center gap-2">
-                  {destinationToken.metadata?.logoURI && (
-                    <img
-                      src={destinationToken.metadata.logoURI}
-                      alt={destinationToken.symbol}
-                      className="h-5 w-5 rounded-full"
-                    />
-                  )}
-                  <span className="font-medium">
-                    {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 py-3">
-                <span className="text-gray-600">Network</span>
-                <span className="font-medium">{getChainName(destinationToken.chainId)}</span>
-              </div>
-
-              {/* Recipient Section */}
-              {recipientAddress && (
-                <div className="flex items-center justify-between py-3">
-                  <span className="text-gray-600">Recipient</span>
-                  <span className="font-medium">{centerTruncate(recipientAddress)}</span>
-                </div>
-              )}
-
-              {/* Amount Section */}
-              <div className="flex items-center justify-between py-3">
-                <span className="text-gray-600">You Pay</span>
-                <span className="text-lg font-semibold">${parseFloat(srcAmountOnRamp).toFixed(2)}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Stripe Elements */}
-        <Elements
-          stripe={stripePromise}
-          options={{
-            clientSecret,
-            appearance: {
-              theme: "flat",
-              variables: {
-                colorPrimary: "#2563eb",
-                colorBackground: "#ffffff",
-                borderRadius: "12px"
-              }
-            }
-          }}
-        >
-          <StripePaymentForm order={createdOrder} onPaymentSuccess={onPaymentSuccess} />
-        </Elements>
-      </div>
-    );
-  }
-
-  // Show initial order summary while waiting for order creation
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3 }}
-      className="mx-auto w-full max-w-[460px]"
-    >
-      <div className="overflow-hidden rounded-xl bg-white">
-        <div className="px-6 py-4">
-          <h2 className="mb-4 text-lg font-semibold">Order summary</h2>
-          <div className="flex flex-col divide-y">
-            {/* Destination Token */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">Receiving</span>
-              <div className="flex items-center gap-2">
-                {destinationToken.metadata?.logoURI && (
-                  <img
-                    src={destinationToken.metadata.logoURI}
-                    alt={destinationToken.symbol}
-                    className="h-5 w-5 rounded-full"
-                  />
-                )}
-                <span className="font-medium">
-                  {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 py-3">
-              <span className="text-gray-600">Network</span>
-              <span className="font-medium">{getChainName(destinationToken.chainId)}</span>
-            </div>
-
-            {/* Recipient Section */}
-            {recipientAddress && (
-              <div className="flex items-center justify-between py-3">
-                <span className="text-gray-600">Recipient</span>
-                <span className="font-medium">{centerTruncate(recipientAddress)}</span>
-              </div>
-            )}
-
-            {/* Amount Section */}
-            <div className="flex items-center justify-between py-3">
-              <span className="text-gray-600">You Pay</span>
-              <span className="text-lg font-semibold">${parseFloat(srcAmountOnRamp).toFixed(2)}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-}

package/src/global-account/react/hooks/useB3EnsName.ts

@@ -1,49 +0,0 @@
-import bsmntApp from "@b3dotfun/sdk/global-account/bsmnt";
-import { B3_AUTH_COOKIE_NAME } from "@b3dotfun/sdk/shared/constants";
-import Cookies from "js-cookie";
-
-import { useCallback, useMemo } from "react";
-
-export const useB3EnsName = () => {
-  const registerEns = useCallback(
-    async (username: string, message: string, hash: string) => {
-      if (!bsmntApp.authentication.authenticated) {
-        await bsmntApp.authentication.authenticate({
-          strategy: "b3-jwt",
-          accessToken: Cookies.get(B3_AUTH_COOKIE_NAME) || ""
-        });
-      }
-
-      const response = await bsmntApp.service("profiles").registerUsername(
-        {
-          username,
-          message,
-          hash
-        },
-        {}
-      );
-
-      return response;
-    },
-    [bsmntApp.authentication.authenticated]
-  );
-
-  const getEns = useCallback(async (address: string) => {
-    const response = await fetch(`https://ens-gateway.b3.fun/address/${address}`);
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch ENS name: ${response.statusText}`);
-    }
-
-    const data = await response.json();
-    return data as { name: string };
-  }, []);
-
-  return useMemo(
-    () => ({
-      registerEns,
-      getEns
-    }),
-    [registerEns, getEns]
-  );
-};