@b3dotfun/sdk 0.0.16 → 0.0.17-alpha.0

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

@@ -0,0 +1,156 @@
+"use client";
+
+import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CopyToClipboard } 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";
+import { ChevronDown, Copy } from "lucide-react";
+import { motion } from "motion/react";
+import { memo, useState } from "react";
+import { toast } from "sonner";
+import { b3 } from "viem/chains";
+
+type Order = components["schemas"]["Order"];
+type Token = components["schemas"]["Token"];
+type Tournament = components["schemas"]["Tournament"];
+type NFT = components["schemas"]["NFT"];
+
+interface OrderDetailsCollapsibleProps {
+  order: Order;
+  dstToken: Token;
+  tournament?: Tournament;
+  nft?: NFT;
+  recipientName?: string;
+  formattedExpectedDstAmount?: string;
+  className?: string;
+  showTotal?: boolean;
+  totalAmount?: string;
+}
+
+export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
+  order,
+  dstToken,
+  tournament,
+  nft,
+  recipientName,
+  formattedExpectedDstAmount,
+  className,
+  showTotal = false,
+  totalAmount,
+}: OrderDetailsCollapsibleProps) {
+  const [showOrderDetails, setShowOrderDetails] = useState(true);
+
+  // Calculate expected amount if not provided
+  const expectedDstAmount =
+    order.type === "mint_nft" ||
+    order.type === "join_tournament" ||
+    order.type === "fund_tournament" ||
+    order.type === "custom"
+      ? "0"
+      : order.payload.expectedDstAmount.toString();
+
+  const finalFormattedExpectedDstAmount =
+    formattedExpectedDstAmount || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
+
+  return (
+    <div className={cn("bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className)}>
+      {showOrderDetails ? (
+        <motion.div
+          className="w-full"
+          initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+          transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
+        >
+          <div className="flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm">
+            {/* Recipient Section */}
+            <div className="flex w-full justify-between gap-4">
+              <div className="text-as-tertiarry">Recipient</div>
+              <div className="flex flex-col items-end gap-1">
+                {recipientName && <div className="text-as-primary font-semibold">{recipientName}</div>}
+                <CopyToClipboard
+                  text={order.recipientAddress}
+                  onCopy={() => {
+                    toast.success("Copied recipient address to clipboard");
+                  }}
+                >
+                  <div className="text-as-primary flex items-center gap-2">
+                    {centerTruncate(order.recipientAddress, 10)}
+                    <Copy className="text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" />
+                  </div>
+                </CopyToClipboard>
+              </div>
+            </div>
+            <div className="divider w-full" />
+
+            {/* Expected Amount/Action Section */}
+            <div className="flex w-full items-center justify-between gap-2">
+              <div className="text-as-tertiarry">
+                {order.type === "swap" || order.type === "mint_nft"
+                  ? "Expected to receive"
+                  : order.type === "join_tournament"
+                    ? "Join tournament"
+                    : order.type === "fund_tournament"
+                      ? "Fund tournament"
+                      : order.type === "custom"
+                        ? order.metadata.action
+                          ? capitalizeFirstLetter(order.metadata.action)
+                          : "Contract execution"
+                        : ""}
+              </div>
+
+              <div className="flex items-end gap-2">
+                {order.type === "swap" ? (
+                  `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`
+                ) : order.type === "mint_nft" ? (
+                  <div className="flex items-center gap-2">
+                    <img src={nft?.imageUrl} alt={nft?.name || "NFT"} className="h-5 w-5" />
+                    <div>{nft?.name || "NFT"}</div>
+                  </div>
+                ) : order.type === "join_tournament" || order.type === "fund_tournament" ? (
+                  <div className="flex items-center gap-2">
+                    <img src={tournament?.imageUrl} alt={tournament?.name || "Tournament"} className="h-5 w-5" />
+                    <div>{tournament?.name || "Tournament"}</div>
+                  </div>
+                ) : null}
+
+                <div className="text-as-primary/50 flex items-center gap-2">
+                  <span>on {order.dstChain !== b3.id && getChainName(order.dstChain)}</span>
+                  <img
+                    src={ALL_CHAINS[order.dstChain].logoUrl}
+                    alt={getChainName(order.dstChain)}
+                    className={cn(
+                      "h-3",
+                      order.dstChain !== b3.id && "w-3 rounded-full",
+                      order.dstChain === b3.id && "h-4",
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="divider w-full" />
+
+            {/* Order ID / Total Section */}
+            <div className="flex w-full justify-between gap-4">
+              <div className="text-as-tertiarry">{showTotal ? "Total (included fee)" : "Order ID"}</div>
+              <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap">
+                {showTotal && totalAmount ? totalAmount : order.id}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      ) : (
+        <div className="flex w-full items-center">
+          <div className="divider w-full" />
+          <button className="whitespace-nowrap text-sm" onClick={() => setShowOrderDetails(true)}>
+            Order Details
+          </button>
+          <ChevronDown className="text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" />
+          <div className="divider w-full" />
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -1,38 +1,61 @@
 import { getStatusDisplay } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { Badge, TextShimmer } from "@b3dotfun/sdk/global-account/react";
-import { Check, Loader2 } from "lucide-react";
+import { Check, X } from "lucide-react";
 import { memo } from "react";
+import { Step, StepProgress } from "./StepProgress";
 
 export const OrderStatus = memo(function OrderStatus({ order }: { order: components["schemas"]["Order"] }) {
   const isComplete = order.status === "executed";
-  const { text, status: displayStatus } = getStatusDisplay(order);
+  const { text, status: displayStatus, description } = getStatusDisplay(order);
+
+  console.log("OrderStatus", displayStatus);
+  console.log("OrderStatus", order);
+
+  const paymentSteps: Step[] = [
+    {
+      id: 1,
+      title: text,
+      description: description,
+    },
+    {
+      id: 2,
+      title: text,
+      description: description,
+    },
+  ];
+
+  if (order.status === "waiting_stripe_payment") {
+    return <StepProgress steps={paymentSteps} currentStepIndex={0} />;
+  }
+
+  if (order.status === "relay") {
+    return <StepProgress steps={paymentSteps} currentStepIndex={1} />;
+  }
+
+  if (!isComplete && displayStatus !== "failure") {
+    return null;
+  }
 
   return (
     <div className="flex items-center justify-center gap-2">
       {isComplete ? (
-        <Badge
-          variant="outline"
-          className="flex items-center gap-3 border-green-500/50 bg-green-500/20 px-4 py-1 text-base transition-colors"
-        >
-          <Check className="h-6 w-6 text-green-500" />
-          <span className="font-medium">{text}</span>
-        </Badge>
-      ) : displayStatus === "failure" ? (
-        <Badge variant="destructive" className="border-red-400/50 bg-red-400/20 px-4 py-1 text-base">
-          <div className="font-sf-rounded text-base font-semibold text-red-400/50">{text}</div>
-        </Badge>
+        <div className="flex flex-col items-center">
+          <div className={`bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`}>
+            <Check className="text-as-content-icon-success h-6 w-6" />
+          </div>
+          <h2 className="text-as-primary mt-4 text-xl font-semibold">{text}</h2>
+          <div className="text-as-tertiarry mt-1 text-center">{description}</div>
+        </div>
       ) : (
-        <Badge
-          variant="default"
-          className="border-as-stroke/20 bg-as-primary/10 flex items-center gap-3 px-4 py-1 text-base transition-colors"
-        >
-          {displayStatus === "processing" && <Loader2 className="text-as-primary h-4 w-4 animate-spin" />}
-
-          <TextShimmer duration={1} className="font-sf-rounded text-base font-semibold">
-            {text}
-          </TextShimmer>
-        </Badge>
+        <div className="flex flex-col items-center">
+          <div className="bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base">
+            <X className="text-as-content-icon-error h-5 w-5" />
+          </div>
+          <div className="font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold">{text}</div>
+          <div className="text-as-tertiarry text-center" style={{ whiteSpace: "normal" }}>
+            {description}
+          </div>
+        </div>
       )}
     </div>
   );

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { ChevronsUpDown } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { NumericFormat } from "react-number-format";
+
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+
+export function OrderTokenAmountFiat({
+  disabled,
+  inputValue,
+  onChangeInput,
+  context,
+  address,
+  chainId,
+  setChainId,
+  token,
+  setToken,
+  className,
+}: {
+  disabled?: boolean;
+  inputValue: string;
+  onChangeInput: (value: string) => void;
+  context: "from" | "to";
+  address: string | undefined;
+  token: components["schemas"]["Token"];
+  setToken: (token: components["schemas"]["Token"]) => void;
+  chainId: number;
+  setChainId: (chainId: number) => void;
+  className?: string;
+}) {
+  // Track previous token to detect changes
+  const prevTokenRef = useRef<string>(token.address);
+
+  useEffect(() => {
+    // Only trigger when token actually changes
+    if (prevTokenRef.current !== token.address) {
+      console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
+
+      // For "from" context, reset to default value when token changes
+      if (context === "from") {
+        // Reset input to default for new token
+        onChangeInput("0.01");
+      }
+
+      // Update ref to current token
+      prevTokenRef.current = token.address;
+    }
+  }, [token.address, chainId, context, onChangeInput]);
+
+  const handleTokenSelect = (newToken: any) => {
+    // Mark that we're about to change tokens
+    prevTokenRef.current = "changing"; // Temporary value to force effect
+
+    // Set the chain ID first
+    setChainId(newToken.chainId);
+
+    // Then set the new token
+    setToken({
+      address: newToken.address,
+      chainId: newToken.chainId, // Use the new chain ID
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    });
+
+    // If this is the source token, reset the amount immediately
+    if (context === "from") {
+      onChangeInput("0.01");
+    }
+  };
+
+  // Original token amount input design for other contexts
+  return (
+    <TokenSelector
+      address={address}
+      chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      context={context}
+      fromChainWalletVMSupported={true}
+      isValidAddress={true}
+      key={`selector-${context}-${token.address}-${chainId}`}
+      lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      multiWalletSupportEnabled={true}
+      onAnalyticEvent={undefined}
+      popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}
+      setToken={handleTokenSelect}
+      supportedWalletVMs={["evm", "svm"]}
+      token={undefined}
+      trigger={
+        <div
+          className={cn(
+            "border-as-border-secondary bg-as-surface-primary flex cursor-pointer items-center justify-between rounded-xl border px-3 py-2",
+            className,
+          )}
+        >
+          <div className="flex items-center gap-3">
+            {token.metadata?.logoURI ? (
+              <ChainTokenIcon
+                chainUrl={ALL_CHAINS[chainId]?.logoUrl}
+                tokenUrl={token.metadata.logoURI}
+                className="h-10 w-10"
+              />
+            ) : (
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600">
+                <span className="font-bold text-white">{token.symbol?.substring(0, 2) || "??"}</span>
+              </div>
+            )}
+            <div>
+              <div className="text-as-primary font-semibold">{token.symbol}</div>
+              <div className="text-as-primary/50 text-sm">{ALL_CHAINS[chainId]?.name || "Unknown"}</div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-600">≈</span>
+            <NumericFormat
+              key={`input-${token.address}-${chainId}`}
+              decimalSeparator="."
+              allowedDecimalSeparators={[","]}
+              thousandSeparator
+              inputMode="decimal"
+              autoComplete="off"
+              autoCorrect="off"
+              type="text"
+              placeholder="0.00"
+              minLength={1}
+              maxLength={20}
+              spellCheck="false"
+              className="text-as-primary bg-as-surface-primary w-[100px]"
+              pattern="^[0-9]*[.,]?[0-9]*$"
+              disabled={disabled}
+              value={inputValue}
+              allowNegative={false}
+              aria-disabled
+              readOnly
+            />
+            <ChevronsUpDown className="h-4 w-4 cursor-pointer text-gray-400" />
+          </div>
+        </div>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,215 @@
+"use client";
+
+import { ChevronsUpDown } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { NumericFormat } from "react-number-format";
+
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { Button } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+
+export function OrderTokenAmountFiat({
+  disabled,
+  inputValue,
+  onChangeInput,
+  context,
+  address,
+  chainId,
+  setChainId,
+  token,
+  setToken,
+  hideTokenSelect = false,
+  canEditAmount = true,
+  className,
+  showAsReceiveAmount = false,
+}: {
+  disabled?: boolean;
+  inputValue: string;
+  onChangeInput: (value: string) => void;
+  context: "from" | "to";
+  address: string | undefined;
+  token: components["schemas"]["Token"];
+  setToken: (token: components["schemas"]["Token"]) => void;
+  chainId: number;
+  setChainId: (chainId: number) => void;
+  hideTokenSelect?: boolean;
+  canEditAmount?: boolean;
+  className?: string;
+  showAsReceiveAmount?: boolean;
+}) {
+  // Track previous token to detect changes
+  const prevTokenRef = useRef<string>(token.address);
+
+  useEffect(() => {
+    // Only trigger when token actually changes
+    if (prevTokenRef.current !== token.address) {
+      console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
+
+      // For "from" context, reset to default value when token changes
+      if (context === "from") {
+        // Reset input to default for new token
+        onChangeInput("0.01");
+      }
+
+      // Update ref to current token
+      prevTokenRef.current = token.address;
+    }
+  }, [token.address, chainId, context, onChangeInput]);
+
+  const handleTokenSelect = (newToken: any) => {
+    // Mark that we're about to change tokens
+    prevTokenRef.current = "changing"; // Temporary value to force effect
+
+    // Set the chain ID first
+    setChainId(newToken.chainId);
+
+    // Then set the new token
+    setToken({
+      address: newToken.address,
+      chainId: newToken.chainId, // Use the new chain ID
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    });
+
+    // If this is the source token, reset the amount immediately
+    if (context === "from") {
+      onChangeInput("0.01");
+    }
+  };
+
+  // Calculate formatted amount for display
+  const formatAmount = (amount: string) => {
+    const numAmount = parseFloat(amount) || 0;
+    return numAmount.toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  if (showAsReceiveAmount) {
+    // Design-matched token display for receive amounts (like in PanelOnramp)
+    return (
+      <div className={cn("flex items-center justify-between rounded-xl bg-gray-50 p-4", className)}>
+        <div className="flex items-center gap-3">
+          {token.metadata?.logoURI ? (
+            <ChainTokenIcon
+              chainUrl={ALL_CHAINS[chainId]?.logoUrl}
+              tokenUrl={token.metadata.logoURI}
+              className="h-10 w-10"
+            />
+          ) : (
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600">
+              <span className="font-bold text-white">{token.symbol?.substring(0, 2) || "??"}</span>
+            </div>
+          )}
+          <div>
+            <div className="text-base font-semibold text-gray-900">{token.symbol}</div>
+            <div className="text-sm text-gray-600">{ALL_CHAINS[chainId]?.name || "Unknown"}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-600">≈</span>
+          <span className="text-lg font-semibold text-gray-900">{formatAmount(inputValue)}</span>
+          {!hideTokenSelect && (
+            <TokenSelector
+              address={address}
+              chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+              context={context}
+              fromChainWalletVMSupported={true}
+              isValidAddress={true}
+              key={`selector-${context}-${token.address}-${chainId}`}
+              lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+              multiWalletSupportEnabled={true}
+              onAnalyticEvent={undefined}
+              popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}
+              setToken={handleTokenSelect}
+              supportedWalletVMs={["evm", "svm"]}
+              token={undefined}
+              trigger={<ChevronsUpDown className="h-4 w-4 cursor-pointer text-gray-400" />}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Original token amount input design for other contexts
+  return (
+    <div
+      className={cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className)}
+      key={`${context}-${token.address}-${chainId}`}
+    >
+      <div className="flex items-center justify-between gap-3">
+        {!canEditAmount ? (
+          <h2 className="text-3xl font-medium text-white">{inputValue || "--"}</h2>
+        ) : (
+          <NumericFormat
+            key={`input-${token.address}-${chainId}`}
+            decimalSeparator="."
+            allowedDecimalSeparators={[","]}
+            thousandSeparator
+            inputMode="decimal"
+            autoComplete="off"
+            autoCorrect="off"
+            type="text"
+            placeholder="0.00"
+            minLength={1}
+            maxLength={30}
+            spellCheck="false"
+            className="placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]"
+            pattern="^[0-9]*[.,]?[0-9]*$"
+            disabled={disabled}
+            value={inputValue}
+            allowNegative={false}
+            onChange={e => onChangeInput(e.currentTarget.value)}
+          />
+        )}
+
+        {!hideTokenSelect && (
+          <TokenSelector
+            address={address}
+            chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            context={context}
+            fromChainWalletVMSupported={true}
+            isValidAddress={true}
+            key={`selector-${context}-${token.address}-${chainId}`}
+            lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+            multiWalletSupportEnabled={true}
+            onAnalyticEvent={undefined}
+            popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}
+            setToken={handleTokenSelect}
+            supportedWalletVMs={["evm", "svm"]}
+            token={undefined}
+            trigger={
+              <Button
+                variant="outline"
+                role="combobox"
+                className="bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center"
+              >
+                {token.metadata?.logoURI ? (
+                  <ChainTokenIcon
+                    chainUrl={ALL_CHAINS[chainId]?.logoUrl}
+                    tokenUrl={token.metadata.logoURI}
+                    className="h-8 min-h-8 w-8 min-w-8"
+                  />
+                ) : (
+                  <div className="h-8 w-8 rounded-full bg-gray-700" />
+                )}
+                <div className="flex flex-col items-start gap-0">
+                  <div className="text-as-primary font-semibold">{token.symbol}</div>
+                  <div className="text-as-primary/70 text-xs">{ALL_CHAINS[chainId]?.name}</div>
+                </div>
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-70" />
+              </Button>
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+}