@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/ui/button";
+import { Skeleton } from "@b3dotfun/sdk/global-account/react/components/ui/skeleton";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
+import { ArrowLeft, RefreshCcw } from "lucide-react";
+import OrderHistoryItem from "./OrderHistoryItem";
+
+const isMainnet = true;
+
+interface OrderHistoryProps {
+  mode: "modal" | "page";
+  onBack: () => void;
+  onSelectOrder?: (orderId: string) => void;
+}
+
+export default function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps) {
+  const { address } = useAccountWallet();
+  const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = useAnyspendOrderHistory(isMainnet, address);
+
+  return (
+    <>
+      <div className="mb-6 flex w-full items-center gap-4">
+        <Button onClick={onBack} variant="ghost" size="icon">
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <div className="flex-1">
+          <h3 className="text-xl font-semibold">Order History</h3>
+          <p className="text-as-primary/30 text-sm">View your past transactions</p>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            refetchOrderHistory();
+          }}
+        >
+          <RefreshCcw className="text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" />
+        </Button>
+      </div>
+
+      {isLoadingOrderHistory ? (
+        <div className="w-full space-y-4">
+          {[1, 2, 3].map(i => (
+            <Skeleton key={i} className="h-[160px] w-full rounded-lg" />
+          ))}
+        </div>
+      ) : !orderHistory?.length ? (
+        <div className="bg-as-light-brand w-full rounded-lg border p-8 text-center">
+          <p className="text-b3-react-muted-foreground">No order history found</p>
+        </div>
+      ) : (
+        <div className="mb-12 w-full space-y-4">
+          {[...orderHistory]
+            .sort((a, b) => b.createdAt - a.createdAt)
+            .map(order => (
+              <OrderHistoryItem key={order.id} order={order} onSelectOrder={onSelectOrder} mode={mode} />
+            ))}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,189 @@
+import { ALL_CHAINS, getChainName, getStatusDisplay, Order, OrderType } from "@b3dotfun/sdk/anyspend";
+import { Badge } from "@b3dotfun/sdk/global-account/react/components/ui/badge";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/ui/button";
+import useIsMobile from "@b3dotfun/sdk/global-account/react/hooks/useIsMobile";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { ArrowRight, ChevronDown } from "lucide-react";
+import TimeAgo from "react-timeago";
+import { b3 } from "viem/chains";
+
+interface OrderHistoryItemProps {
+  order: Order;
+  onSelectOrder?: (orderId: string) => void;
+  mode: "modal" | "page";
+}
+
+export default function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryItemProps) {
+  const nft = order.type === OrderType.MintNFT ? order.metadata.nft : undefined;
+  const tournament =
+    order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament
+      ? order.metadata.tournament
+      : undefined;
+  const dstToken = order.metadata.dstToken;
+  const actualDstAmount =
+    order.type === OrderType.MintNFT ||
+    order.type === OrderType.JoinTournament ||
+    order.type === OrderType.FundTournament ||
+    order.type === OrderType.Custom
+      ? undefined
+      : order.payload.actualDstAmount;
+  const expectedDstAmount =
+    order.type === OrderType.MintNFT ||
+    order.type === OrderType.JoinTournament ||
+    order.type === OrderType.FundTournament ||
+    order.type === OrderType.Custom
+      ? undefined
+      : order.payload.expectedDstAmount;
+
+  const { text: orderStatusText, status: orderDisplayStatus } = getStatusDisplay(order);
+
+  const isSmallView = useIsMobile() || mode === "modal";
+
+  return (
+    <div
+      key={`anyspend-${order.id}`}
+      className={cn(
+        "bg-as-light-brand/20 rounded-lg border p-4",
+        onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors"
+      )}
+      onClick={() => onSelectOrder?.(order.id)}
+    >
+      <div className="flex items-center justify-between">
+        <Badge
+          className={cn(
+            "px-3 py-1 text-xs",
+            orderDisplayStatus === "processing" && "bg-yellow-500/10 text-yellow-500",
+            orderDisplayStatus === "success" && "bg-green-500/10 text-green-500",
+            orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500"
+          )}
+        >
+          {orderStatusText}
+        </Badge>
+
+        <div className="flex items-center gap-2">
+          <span className="text-nano label-style text-as-primary/30">
+            <TimeAgo date={new Date(order.createdAt)} />
+          </span>
+        </div>
+      </div>
+
+      {order.oneClickBuyUrl ? (
+        <div className="mb-3 mt-4 flex items-center gap-1">
+          <div className="bg-b3-react-background flex flex-1 flex-col gap-1 rounded-lg border p-4 px-5">
+            <h3 className="text-as-primary/50 flex items-center gap-2 text-xl font-semibold">
+              <span>
+                {"Buy "}
+                <span className="text-as-primary">
+                  ${formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)}
+                </span>
+                {` of`}
+              </span>
+
+              <span className="text-as-primary flex items-center gap-2">
+                {nft ? (
+                  <img src={nft.imageUrl} alt={nft.name} className="h-6 w-6" />
+                ) : tournament ? (
+                  <img src={tournament.imageUrl} alt={tournament.name} className="h-6 w-6" />
+                ) : (
+                  <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-6 w-6" />
+                )}
+                {nft ? nft.name : tournament ? tournament.name : dstToken.symbol}
+              </span>
+
+              <span className="flex items-center gap-2">
+                {` on `}
+                <span className="text-as-primary flex items-center gap-2">
+                  <img src={ALL_CHAINS[order.dstChain]?.logoUrl} alt={getChainName(order.dstChain)} className="h-4" />
+                  {order.dstChain !== b3.id && getChainName(order.dstChain)}
+                </span>
+              </span>
+            </h3>
+
+            <p className="label-style text-as-primary/30 mt-1 flex items-center gap-2 text-xs">
+              Paying via{" "}
+              <img src="https://cdn.b3.fun/coinbase-wordmark-blue.svg" alt="Coinbase" className="-mt-1 h-3" />
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className={cn("mb-3 mt-4 flex items-center gap-1", isSmallView && "flex-col")}>
+          <div className="bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5">
+            <div className="flex items-center gap-2">
+              <img
+                src={order.metadata.srcToken.metadata.logoURI}
+                alt={order.metadata.srcToken.symbol}
+                className="h-6 w-6 rounded-full"
+              />
+              <div className="text-as-primary flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
+                {formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)}{" "}
+                {order.metadata.srcToken.symbol}
+              </div>
+            </div>
+
+            <div className="label-style text-as-primary/50 flex items-center gap-2 text-sm">
+              from
+              <img
+                src={ALL_CHAINS[order.srcChain]?.logoUrl}
+                alt={getChainName(order.srcChain)}
+                className={cn("h-4", order.srcChain !== b3.id && "w-4 rounded-full", order.srcChain === b3.id && "h-3")}
+              />
+              {getChainName(order.srcChain)}
+            </div>
+          </div>
+
+          <div className={cn("h-8 w-8 shrink-0 -rotate-90 opacity-30", isSmallView && "rotate-0")}>
+            <ChevronDown className="h-8 w-8" />
+          </div>
+
+          <div className="bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5">
+            <div className="flex items-center gap-2">
+              {nft ? (
+                <>
+                  <img src={nft.imageUrl} alt={nft.name} className="h-6 w-6 rounded-full" />
+                  <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
+                    {nft.name}
+                  </div>
+                </>
+              ) : tournament ? (
+                <>
+                  <img src={tournament.imageUrl} alt={tournament.name} className="h-6 w-6 rounded-full" />
+                  <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
+                    {tournament.name}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-6 w-6 rounded-full" />
+                  <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
+                    {formatTokenAmount(
+                      actualDstAmount ? BigInt(actualDstAmount) : expectedDstAmount ? BigInt(expectedDstAmount) : 0n,
+                      dstToken.decimals
+                    )}{" "}
+                    {dstToken.symbol}
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="label-style text-as-primary/50 flex items-center gap-2 text-sm">
+              to
+              <img
+                src={ALL_CHAINS[order.dstChain]?.logoUrl}
+                alt={getChainName(order.dstChain)}
+                className={cn("h-4", order.dstChain !== b3.id && "w-4 rounded-full", order.dstChain === b3.id && "h-3")}
+              />
+              {getChainName(order.dstChain)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center justify-end">
+        <Button variant="link" size="sm" className="h-auto" onClick={() => onSelectOrder?.(order.id)}>
+          {orderDisplayStatus === "processing" ? "Proceed with payment" : "Details"}{" "}
+          <ArrowRight className="ml-2 h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Order, OrderStatus, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { Badge } from "@b3dotfun/sdk/global-account/react/components/ui/badge";
+import { TextShimmer } from "@b3dotfun/sdk/global-account/react/components/ui/text-shimmer";
+import { Check, Loader2 } from "lucide-react";
+import { memo } from "react";
+
+export const OrderStatusDisplay = memo(function OrderStatusDisplay({ order }: { order: Order }) {
+  const isComplete = order.status === OrderStatus.Executed;
+  const { text, status: displayStatus } = getStatusDisplay(order);
+
+  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>
+      ) : (
+        <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>
+  );
+});

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

@@ -0,0 +1,132 @@
+"use client";
+
+import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, Token } from "@b3dotfun/sdk/anyspend";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/ui/button";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
+import { useTokenBalancesByChain } from "@b3dotfun/sdk/global-account/react/hooks/useTokenBalancesByChain";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { CheckCircle2, ChevronsUpDown } from "lucide-react";
+import { useMemo } from "react";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+
+export function OrderToken({
+  context,
+  address,
+  chainId,
+  setChainId,
+  token,
+  setToken,
+  requiredAmount,
+  tokenSelectClassName
+}: {
+  context: "from" | "to";
+  address: string | undefined;
+  token: Token;
+  setToken: (token: Token) => void;
+  chainId: number;
+  setChainId: (chainId: number) => void;
+  requiredAmount: bigint | undefined;
+  tokenSelectClassName?: string;
+}) {
+  const { wallet } = useAccountWallet();
+
+  const chainName = useMemo(() => simpleHashChainToChainName(chainId), [chainId]);
+
+  const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
+    address: wallet?.address || "",
+    chainsIds: [chainId],
+    enabled: !!wallet?.address && !!chainName
+  });
+
+  const { formattedBalance, hasEnoughBalance } = useMemo(() => {
+    // Get balance for the selected token
+    let balance: bigint | null = null;
+    if (token && wallet?.address) {
+      if (token.address === RELAY_ETH_ADDRESS) {
+        // Native token
+        const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
+        balance = nativeToken?.value ?? null;
+      } else {
+        // ERC20 token
+        const fungibleToken = fungibleTokens?.find(t => t.token_address?.toLowerCase() === token.address.toLowerCase());
+        balance = fungibleToken?.balance ? BigInt(fungibleToken.balance) : null;
+      }
+    }
+
+    // Check if balance is sufficient for the required amount
+    const hasEnoughBalance = balance && requiredAmount ? balance >= requiredAmount : false;
+
+    const formattedBalance = balance ? formatTokenAmount(balance, token.decimals, 6, false) : null;
+
+    return {
+      formattedBalance,
+      hasEnoughBalance
+    };
+  }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
+
+  return (
+    <TokenSelector
+      address={address}
+      chainIdsFilter={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      context={context}
+      fromChainWalletVMSupported={true}
+      isValidAddress={true}
+      key={undefined}
+      lockedChainIds={Object.values(ALL_CHAINS).map(chain => chain.id)}
+      multiWalletSupportEnabled={true}
+      onAnalyticEvent={undefined}
+      popularChainIds={[1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID]}
+      restrictedToken={undefined}
+      setToken={token => {
+        setChainId(token.chainId);
+        setToken({
+          address: token.address,
+          chainId,
+          decimals: token.decimals,
+          metadata: { logoURI: token.logoURI },
+          name: token.name,
+          symbol: token.symbol
+        });
+      }}
+      supportedWalletVMs={["evm", "svm"]}
+      token={undefined}
+      trigger={
+        <Button
+          variant="outline"
+          role="combobox"
+          className={cn(
+            "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",
+            tokenSelectClassName
+          )}
+        >
+          {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} on {ALL_CHAINS[chainId].name}
+            </div>
+            {formattedBalance && (
+              <div className="flex items-center gap-1">
+                <div className="text-as-primary/50 text-xs">
+                  {formattedBalance || "--"} {token.symbol}
+                </div>
+                {hasEnoughBalance && <CheckCircle2 className="text-as-brand -mt-0.5 h-4 w-4" />}
+              </div>
+            )}
+          </div>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-70" />
+        </Button>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,168 @@
+"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, Token } from "@b3dotfun/sdk/anyspend";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/ui/button";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+
+export function OrderTokenAmount({
+  disabled,
+  inputValue,
+  onChangeInput,
+  context,
+  address,
+  chainId,
+  setChainId,
+  token,
+  setToken,
+  hideTokenSelect = false,
+  canEditAmount = true,
+  className,
+  innerClassName,
+  amountClassName,
+  tokenSelectClassName
+}: {
+  disabled?: boolean;
+  inputValue: string;
+  onChangeInput: (value: string) => void;
+  context: "from" | "to";
+  address: string | undefined;
+  token: Token;
+  setToken: (token: Token) => void;
+  chainId: number;
+  setChainId: (chainId: number) => void;
+  hideTokenSelect?: boolean;
+  canEditAmount?: boolean;
+  className?: string;
+  innerClassName?: string;
+  amountClassName?: string;
+  tokenSelectClassName?: 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");
+    }
+  };
+
+  return (
+    <div
+      className={cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className)}
+      key={`${context}-${token.address}-${chainId}`}
+    >
+      <div className={cn("flex items-center justify-between gap-3", innerClassName)}>
+        {!canEditAmount ? (
+          <h2 className={cn("text-3xl font-medium text-white", amountClassName)}>{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={cn(
+              "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]",
+              amountClassName
+            )}
+            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]}
+            restrictedToken={undefined}
+            setToken={handleTokenSelect}
+            supportedWalletVMs={["evm", "svm"]}
+            token={undefined}
+            trigger={
+              <Button
+                variant="outline"
+                role="combobox"
+                className={cn(
+                  "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",
+                  tokenSelectClassName
+                )}
+              >
+                {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>
+  );
+}