@b3dotfun/sdk 0.0.44-alpha.1 → 0.0.44-alpha.2

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

@@ -2,6 +2,7 @@ import { ALL_CHAINS, getChainName, getStatusDisplay } from "@b3dotfun/sdk/anyspe
 import { Badge, Button, useIsMobile } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { getVendorDisplayName } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { ArrowRight, ChevronDown } from "lucide-react";
 import TimeAgo from "react-timeago";
 import { b3 } from "viem/chains";
@@ -31,153 +32,126 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
 
   const isSmallView = useIsMobile() || mode === "modal";
 
+  // Check if this is a one-click payment order
+  const isOneClickPayment = !!order.oneClickBuyUrl;
+  const vendorName = order.onrampMetadata?.vendor ? getVendorDisplayName(order.onrampMetadata.vendor) : null;
+
   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",
+        "bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all",
+        onSelectOrder && "cursor-pointer",
       )}
       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>
-
+      {/* Header: Status and Time */}
+      <div className="mb-3 flex items-center justify-between">
         <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
+            className={cn(
+              "text-xs font-semibold",
+              orderDisplayStatus === "processing" && "text-yellow-600",
+              orderDisplayStatus === "success" && "text-green-600",
+              orderDisplayStatus === "failure" && "text-red-600",
+            )}
+          >
+            {orderStatusText}
+          </div>
+          {isOneClickPayment && vendorName && (
+            <Badge variant="outline" className="text-as-secondary px-2 py-0.5 text-[10px]">
+              {vendorName}
+            </Badge>
+          )}
+        </div>
+        <div className="text-as-secondary text-[10px] font-medium uppercase tracking-wide">
+          <TimeAgo date={new Date(order.createdAt)} />
         </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>
+      {/* Main Content: From -> To */}
+      <div className="flex items-center gap-4">
+        {/* From Section */}
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <img
+            src={order.metadata.srcToken.metadata.logoURI}
+            alt={order.metadata.srcToken.symbol}
+            className="h-8 w-8 shrink-0 rounded-full"
+          />
+          <div className="min-w-0 flex-1">
+            <div className="text-as-primary truncate text-sm font-bold">
+              {formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)}{" "}
+              {order.metadata.srcToken.symbol}
             </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 className="text-as-secondary flex items-center gap-1 text-xs">
+              <img src={ALL_CHAINS[order.srcChain]?.logoUrl} alt={getChainName(order.srcChain)} className="h-3 w-3" />
+              <span className="truncate">{getChainName(order.srcChain)}</span>
             </div>
           </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>
+        {/* Arrow */}
+        <ArrowRight className="text-as-secondary h-5 w-5 shrink-0 opacity-30" />
 
-          <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)
-                          : BigInt(0),
-                      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>
+        {/* To Section */}
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {nft ? (
+            <>
+              <img src={nft.imageUrl} alt={nft.name} className="h-8 w-8 shrink-0 rounded-full" />
+              <div className="min-w-0 flex-1">
+                <div className="text-as-primary truncate text-sm font-bold">{nft.name}</div>
+                <div className="text-as-secondary flex items-center gap-1 text-xs">
+                  <img
+                    src={ALL_CHAINS[order.dstChain]?.logoUrl}
+                    alt={getChainName(order.dstChain)}
+                    className="h-3 w-3"
+                  />
+                  <span className="truncate">{getChainName(order.dstChain)}</span>
+                </div>
+              </div>
+            </>
+          ) : tournament ? (
+            <>
+              <img src={tournament.imageUrl} alt={tournament.name} className="h-8 w-8 shrink-0 rounded-full" />
+              <div className="min-w-0 flex-1">
+                <div className="text-as-primary truncate text-sm font-bold">{tournament.name}</div>
+                <div className="text-as-secondary flex items-center gap-1 text-xs">
+                  <img
+                    src={ALL_CHAINS[order.dstChain]?.logoUrl}
+                    alt={getChainName(order.dstChain)}
+                    className="h-3 w-3"
+                  />
+                  <span className="truncate">{getChainName(order.dstChain)}</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-8 w-8 shrink-0 rounded-full" />
+              <div className="min-w-0 flex-1">
+                <div className="text-as-primary truncate text-sm font-bold">
+                  {formatTokenAmount(
+                    actualDstAmount
+                      ? BigInt(actualDstAmount)
+                      : expectedDstAmount
+                        ? BigInt(expectedDstAmount)
+                        : BigInt(0),
+                    dstToken.decimals,
+                  )}{" "}
+                  {dstToken.symbol}
+                </div>
+                <div className="text-as-secondary flex items-center gap-1 text-xs">
+                  <img
+                    src={ALL_CHAINS[order.dstChain]?.logoUrl}
+                    alt={getChainName(order.dstChain)}
+                    className="h-3 w-3"
+                  />
+                  <span className="truncate">{getChainName(order.dstChain)}</span>
+                </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/types/api.ts

@@ -5,6 +5,12 @@
 
 export interface paths {
   "/chains/{chainId}/tokens": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Get tokens for a chain
      * @description Retrieves available tokens for a specific blockchain
@@ -20,6 +26,7 @@ export interface paths {
           /** @description Maximum number of tokens to return */
           limit?: number;
         };
+        header?: never;
         path: {
           /**
            * @description Blockchain chain ID
@@ -27,10 +34,15 @@ export interface paths {
            */
           chainId: number;
         };
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Tokens retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -61,6 +73,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -74,8 +89,21 @@ export interface paths {
         };
       };
     };
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/onramp/coinbase/options": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Get Coinbase onramp options
      * @description Retrieves available Coinbase onramp configuration options.
@@ -108,10 +136,17 @@ export interface paths {
            */
           chainIds?: string[];
         };
+        header?: never;
+        path?: never;
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Coinbase options retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -214,6 +249,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -227,8 +265,21 @@ export interface paths {
         };
       };
     };
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/onramp/stripe/supported": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Check Stripe support
      * @description Checks if Stripe onramp and Stripe Web2 are supported based on IP address location and optional transaction amount
@@ -242,10 +293,17 @@ export interface paths {
            */
           usdAmount?: string;
         };
+        header?: never;
+        path?: never;
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Stripe support status retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -268,6 +326,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -281,8 +342,21 @@ export interface paths {
         };
       };
     };
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/orders": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Get orders by creator
      * @description Retrieves all orders created by a specific address
@@ -306,10 +380,17 @@ export interface paths {
            */
           offset?: string;
         };
+        header?: never;
+        path?: never;
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Orders retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -325,6 +406,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -338,11 +422,18 @@ export interface paths {
         };
       };
     };
+    put?: never;
     /**
      * Create a new order
      * @description Creates a new order for token transactions across chains
      */
     post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
       requestBody: {
         content: {
           "application/json": components["schemas"]["OrderRequest"];
@@ -351,6 +442,9 @@ export interface paths {
       responses: {
         /** @description Order created successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -365,6 +459,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -378,14 +475,27 @@ export interface paths {
         };
       };
     };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/orders/{orderId}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Get order and transactions
      * @description Retrieves order details along with associated transactions
      */
     get: {
       parameters: {
+        query?: never;
+        header?: never;
         path: {
           /**
            * @description Unique order identifier
@@ -393,10 +503,15 @@ export interface paths {
            */
           orderId: string;
         };
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Order and transactions retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -448,6 +563,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -461,6 +579,9 @@ export interface paths {
         };
         /** @description Order not found */
         404: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -474,13 +595,34 @@ export interface paths {
         };
       };
     };
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/orders/quote": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
     /**
      * Get anyspend quote
      * @description Retrieves a quote to swap, execute contract, or participate in HypeDuel
      */
     post: {
+      parameters: {
+        query?: never;
+        header?: never;
+        path?: never;
+        cookie?: never;
+      };
       requestBody: {
         content: {
           "application/json":
@@ -680,6 +822,9 @@ export interface paths {
       responses: {
         /** @description Quote retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -858,6 +1003,9 @@ export interface paths {
         };
         /** @description Bad request */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -871,8 +1019,19 @@ export interface paths {
         };
       };
     };
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
   "/stripe/clientSecret": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
     /**
      * Get Stripe client secret
      * @description Retrieves a Stripe client secret for payment processing using a payment intent ID
@@ -886,10 +1045,17 @@ export interface paths {
            */
           paymentIntentId: string;
         };
+        header?: never;
+        path?: never;
+        cookie?: never;
       };
+      requestBody?: never;
       responses: {
         /** @description Client secret retrieved successfully */
         200: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example true */
@@ -908,6 +1074,9 @@ export interface paths {
         };
         /** @description Bad request - PaymentIntentId is required or invalid */
         400: {
+          headers: {
+            [name: string]: unknown;
+          };
           content: {
             "application/json": {
               /** @example false */
@@ -921,6 +1090,13 @@ export interface paths {
         };
       };
     };
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
   };
 }
 export type webhooks = Record<string, never>;

package/dist/cjs/anyspend/react/components/common/ErrorSection.d.ts

@@ -1,6 +0,0 @@
-interface ErrorSectionProps {
-    error?: Error | null;
-    message?: string;
-}
-export declare function ErrorSection({ error, message }: ErrorSectionProps): import("react/jsx-runtime").JSX.Element | null;
-export {};