@b3dotfun/sdk 0.0.46 → 0.0.47-test.4

package/README.md

@@ -8,7 +8,6 @@ The SDK is organized into focused modules:
 
 - **`anyspend/`** - Cross-chain execution engine functionality
 - **`global-account/`** - B3 Global Accounts authentication and user management
-- **`notifications/`** - Multi-channel notification management
 - **`shared/`** - Common utilities, types, and components
 - **`others/`** - Additional features and utilities
 
@@ -26,7 +25,6 @@ Each module contains:
 | ----------------- | --------- | ------------ |
 | AnySpend          | ✅        | ❌           |
 | Global Accounts   | ✅        | ✅           |
-| Notifications     | ✅        | ✅           |
 | Headless Services | ✅        | ✅           |
 
 ## Installation
@@ -157,7 +155,9 @@ const order = await anyspendService.createOrder({
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 
 // Get order details and transactions
-const orderDetails = await anyspendService.getOrderAndTransactions("order-id");
+const orderDetails = await anyspendService.getOrderAndTransactions(
+  "order-id",
+);
 
 // Get order history for an address
 const history = await anyspendService.getOrderHistory(
@@ -196,7 +196,7 @@ import { B3Provider, SignInWithB3 } from "@b3dotfun/sdk/global-account/react";
 
 function App() {
   return (
-    <B3Provider environment="production">
+    <B3Provider environment="production" partnerId="your-awesome-partner-id">
       <SignInWithB3
         provider={{ strategy: "google" }}
         partnerId="your-partner-id"
@@ -223,7 +223,7 @@ const b3Chain = {
 
 function SessionKeyAuth() {
   return (
-    <B3Provider environment="production">
+    <B3Provider environment="production" partnerId="your-awesome-partner-id">
       <SignInWithB3
         provider={{ strategy: "google" }}
         chain={b3Chain}
@@ -323,206 +323,6 @@ import { serverFunction } from "@b3dotfun/sdk/global-account/server";
 // (Implementation depends on your specific needs)
 ```
 
-# Notifications
-
-B3 Notifications provides multi-channel notification management for your users with support for email, Telegram, Discord, SMS, WhatsApp, and in-app notifications.
-
-## Features
-
-- ✅ **Zero Config** - Automatically uses authenticated user's ID from JWT
-- 🎯 **Type Safe** - Full TypeScript support
-- ⚡ **React Hooks** - Easy integration with `useNotifications()` hook
-- 🔐 **Secure** - JWT-based authentication
-- 📱 **Multi-Channel** - Email, Telegram, Discord, SMS, WhatsApp, In-app
-- 🚀 **Lightweight** - Minimal dependencies
-
-## React Hook
-
-### Basic Usage
-
-```tsx
-import { useNotifications } from "@b3dotfun/sdk/notifications/react";
-
-function NotificationSettings() {
-  const { user, loading, connectEmail, connectTelegram, isEmailConnected } = useNotifications();
-
-  if (loading) return <div>Loading...</div>;
-
-  return (
-    <div>
-      {!isEmailConnected && <button onClick={() => connectEmail("user@example.com")}>Connect Email</button>}
-
-      <button onClick={connectTelegram}>Connect Telegram</button>
-    </div>
-  );
-}
-```
-
-### Full Hook API
-
-```tsx
-const {
-  user, // User data with channels and settings
-  loading, // Loading state
-  error, // Error if any
-  refresh, // Manually refresh user data
-  connectEmail, // Connect email channel
-  connectTelegram, // Connect Telegram channel
-  updateChannel, // Update a channel
-  deleteChannel, // Delete a channel
-  // Convenience helpers
-  isEmailConnected,
-  isTelegramConnected,
-  isDiscordConnected,
-} = useNotifications();
-```
-
-## Headless API Client
-
-### Authentication
-
-The notifications API automatically uses the B3 auth token from cookies. The token is managed by the B3 Global Account authentication system - you don't need to set it manually.
-
-```typescript
-import { getAuthToken, notificationsAPI } from "@b3dotfun/sdk/notifications";
-// Or import from shared utils
-// import { getAuthToken } from "@b3dotfun/sdk/shared/utils";
-
-// Get the current auth token (from b3-auth cookie)
-const token = getAuthToken();
-
-// API calls automatically use the auth token
-const userData = await notificationsAPI.getUser();
-```
-
-### User Management
-
-```typescript
-import { notificationsAPI } from "@b3dotfun/sdk/notifications";
-
-// Register current user
-await notificationsAPI.registerUser();
-
-// Get current user's profile
-const userData = await notificationsAPI.getUser();
-
-// Get notification history
-const history = await notificationsAPI.getHistory("my-app-id", 50);
-```
-
-### Channel Management
-
-```typescript
-// Add any channel
-await notificationsAPI.addChannel("email", "user@example.com");
-
-// Connect email (shorthand)
-await notificationsAPI.connectEmail("user@example.com");
-
-// Update channel
-await notificationsAPI.updateChannel("channel-id", {
-  enabled: true,
-});
-
-// Delete channel
-await notificationsAPI.deleteChannel("channel-id");
-```
-
-### Telegram Integration
-
-```typescript
-// Get Telegram deep link
-const { deepLink, verificationCode, botUsername } = await notificationsAPI.getTelegramLink();
-window.open(deepLink, "_blank");
-
-// Check connection status
-const { connected, chatId } = await notificationsAPI.checkTelegramStatus();
-```
-
-### App Preferences
-
-```typescript
-// Save notification preferences for an app (enabled by default)
-await notificationsAPI.savePreferences("my-app", {
-  notificationType: "transaction",
-  channels: ["email", "telegram", "in_app"],
-});
-
-// Save disabled preferences
-await notificationsAPI.savePreferences("my-app", {
-  notificationType: "transaction",
-  channels: ["email", "telegram"],
-  enabled: false,
-});
-
-// Get app settings
-const settings = await notificationsAPI.getAppSettings("my-app");
-```
-
-### In-App Notifications
-
-```typescript
-// Get in-app notifications
-const { notifications } = await notificationsAPI.getInAppNotifications();
-
-// Mark notification as read
-await notificationsAPI.markNotificationAsRead("notification-id");
-```
-
-### Send Notifications
-
-```typescript
-// Send a notification
-await notificationsAPI.sendNotification({
-  userId: "user-123",
-  appId: "my-app",
-  notificationType: "transaction",
-  message: "Your transaction was successful!",
-  title: "Transaction Complete",
-  data: { transactionId: "tx-123" },
-});
-```
-
-## Next.js Example
-
-```tsx
-"use client";
-
-import { useNotifications } from "@b3dotfun/sdk/notifications/react";
-
-export default function NotificationsPage() {
-  const { user, loading, connectEmail, connectTelegram, isEmailConnected, isTelegramConnected } = useNotifications();
-
-  if (loading) {
-    return <div>Loading notification settings...</div>;
-  }
-
-  return (
-    <div className="space-y-4">
-      <h1>Notification Settings</h1>
-
-      <div className="rounded-lg border p-4">
-        <h2>Email</h2>
-        {isEmailConnected ? (
-          <p className="text-green-600">✓ Connected</p>
-        ) : (
-          <button onClick={() => connectEmail("user@example.com")}>Connect Email</button>
-        )}
-      </div>
-
-      <div className="rounded-lg border p-4">
-        <h2>Telegram</h2>
-        {isTelegramConnected ? (
-          <p className="text-green-600">✓ Connected</p>
-        ) : (
-          <button onClick={connectTelegram}>Connect Telegram</button>
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
 # Shared Utilities
 
 ## Chain Management
@@ -538,25 +338,6 @@ console.log(supportedChains);
 console.log(b3Chain);
 ```
 
-## Authentication Token Management
-
-Read-only access to the B3 authentication token. The token is managed by the B3 Global Account authentication system.
-
-```typescript
-import { getAuthToken } from "@b3dotfun/sdk/shared/utils";
-
-// Get the current auth token from the b3-auth cookie
-const token = getAuthToken();
-
-if (token) {
-  console.log("User is authenticated");
-} else {
-  console.log("User is not authenticated");
-}
-```
-
-The auth token is automatically set by the B3 Global Account authentication system (see the Global Accounts section above). All SDK modules that require authentication will automatically use this token.
-
 ## Utility Functions
 
 ```typescript
@@ -587,7 +368,7 @@ import B3DynamicModal from "@b3dotfun/sdk/global-account/react/components/B3Dyna
 
 function App() {
   return (
-    <B3Provider environment="production">
+    <B3Provider environment="production" partnerId="your-awesome-partner-id">
       <YourApp />
       <B3DynamicModal />
     </B3Provider>

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -23,7 +23,6 @@ const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
 const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
-const ErrorSection_1 = require("./common/ErrorSection");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
@@ -339,7 +338,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         ? (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString()
         : (0, viem_1.parseUnits)(dstAmount.replace(/,/g, ""), selectedDstToken.decimals).toString();
     const srcAmountOnrampInWei = (0, viem_1.parseUnits)(srcAmountOnRamp.replace(/,/g, ""), anyspend_1.USDC_BASE.decimals).toString();
-    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.useAnyspendQuote)(activeTab === "crypto"
+    const { anyspendQuote, isLoadingAnyspendQuote } = (0, react_1.useAnyspendQuote)(activeTab === "crypto"
         ? {
             srcChain: selectedSrcChainId,
             dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -469,38 +468,38 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // Determine button state and text
     const btnInfo = (0, react_4.useMemo)(() => {
         if (activeInputAmountInWei === "0")
-            return { text: "Enter an amount", disable: true, error: false };
+            return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isLoadingAnyspendQuote)
-            return { text: "Loading...", disable: true, error: false };
+            return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (!recipientAddress)
-            return { text: "Select recipient", disable: false, error: false };
+            return { text: "Select recipient", disable: false, error: false, loading: false };
         if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false };
+            return { text: "Creating order...", disable: true, error: false, loading: true };
         if (!anyspendQuote || !anyspendQuote.success)
-            return { text: "Get rate error", disable: true, error: true };
+            return { text: "No quote found", disable: true, error: false, loading: false };
         if (activeTab === "crypto") {
             // If no payment method selected, show "Choose payment method"
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                return { text: "Choose payment method", disable: false, error: false };
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             // If payment method selected, show appropriate action
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                 selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
-                return { text: "Swap", disable: false, error: false };
+                return { text: "Swap", disable: false, error: false, loading: false };
             }
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
-                return { text: "Continue to payment", disable: false, error: false };
+                return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
         if (activeTab === "fiat") {
             // If no fiat payment method selected, show "Select payment method"
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false };
+                return { text: "Select payment method", disable: false, error: false, loading: false };
             }
             // If payment method is selected, show "Buy"
-            return { text: "Buy", disable: false, error: false };
+            return { text: "Buy", disable: false, error: false, loading: false };
         }
-        return { text: "Buy", disable: false, error: false };
+        return { text: "Buy", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isLoadingAnyspendQuote,
@@ -755,7 +754,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");

package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js

@@ -19,7 +19,6 @@ const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
-const ErrorSection_1 = require("./common/ErrorSection");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
@@ -37,7 +36,7 @@ function AnySpendDepositHype(props) {
 }
 function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, }) {
     // Use shared flow hook
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -51,17 +50,17 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     // Button state logic
     const btnInfo = (0, react_3.useMemo)(() => {
         if (activeInputAmountInWei === "0")
-            return { text: "Enter an amount", disable: true, error: false };
+            return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isLoadingAnyspendQuote)
-            return { text: "Loading quote...", disable: true, error: false };
+            return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false };
+            return { text: "Creating order...", disable: true, error: false, loading: true };
         if (!selectedRecipientAddress)
-            return { text: "Select recipient", disable: false, error: false };
+            return { text: "Select recipient", disable: false, error: false, loading: false };
         if (!anyspendQuote || !anyspendQuote.success)
-            return { text: "Get quote error", disable: true, error: true };
+            return { text: "Get quote error", disable: true, error: true, loading: false };
         if (!dstAmount)
-            return { text: "No quote available", disable: true, error: true };
+            return { text: "No quote available", disable: true, error: true, loading: false };
         // Check minimum deposit amount (10 HYPE)
         // Use the raw amount from the quote instead of the formatted display string
         if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
@@ -69,22 +68,22 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             const decimals = anyspendQuote.data.currencyOut.currency.decimals;
             const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
             if (actualAmount < 10) {
-                return { text: "Minimum 10 HYPE deposit", disable: true, error: true };
+                return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
             }
         }
         if (paymentType === "crypto") {
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                return { text: "Choose payment method", disable: false, error: false };
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
-            return { text: "Continue to deposit", disable: false, error: false };
+            return { text: "Continue to deposit", disable: false, error: false, loading: false };
         }
         if (paymentType === "fiat") {
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false };
+                return { text: "Select payment method", disable: false, error: false, loading: false };
             }
-            return { text: "Buy", disable: false, error: false };
+            return { text: "Buy", disable: false, error: false, loading: false };
         }
-        return { text: "Continue to deposit", disable: false, error: false };
+        return { text: "Continue to deposit", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isLoadingAnyspendQuote,
@@ -122,7 +121,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
-                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {

package/dist/cjs/anyspend/react/components/common/OrderHistory.js

@@ -10,9 +10,9 @@ const OrderHistoryItem_1 = require("./OrderHistoryItem");
 function OrderHistory({ mode, onBack, onSelectOrder }) {
     const { address } = (0, react_2.useAccountWallet)();
     const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, react_1.useAnyspendOrderHistory)(address);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex w-full items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onBack, variant: "ghost", size: "icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold", children: "Order History" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8 flex w-full items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onBack, variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-2xl font-bold", children: "Order History" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
                             refetchOrderHistory();
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-3", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-3", children: [...orderHistory]
                     .sort((a, b) => b.createdAt - a.createdAt)
                     .map(order => ((0, jsx_runtime_1.jsx)(OrderHistoryItem_1.OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
 }

package/dist/cjs/anyspend/react/components/common/OrderHistoryItem.js

@@ -9,9 +9,9 @@ const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
 const number_1 = require("../../../../shared/utils/number");
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const lucide_react_1 = require("lucide-react");
 const react_timeago_1 = __importDefault(require("react-timeago"));
-const chains_1 = require("viem/chains");
 function OrderHistoryItem({ order, onSelectOrder, mode }) {
     const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
     const tournament = order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
@@ -25,9 +25,12 @@ function OrderHistoryItem({ order, onSelectOrder, mode }) {
         : order.payload.expectedDstAmount;
     const { text: orderStatusText, status: orderDisplayStatus } = (0, anyspend_1.getStatusDisplay)(order);
     const isSmallView = (0, react_1.useIsMobile)() || mode === "modal";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)(react_1.Badge, { className: (0, utils_1.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"), children: orderStatusText }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-nano label-style text-as-primary/30", children: (0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.createdAt) }) }) })] }), order.oneClickBuyUrl ? ((0, jsx_runtime_1.jsx)("div", { className: "mb-3 mt-4 flex items-center gap-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex flex-1 flex-col gap-1 rounded-lg border p-4 px-5", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-as-primary/50 flex items-center gap-2 text-xl font-semibold", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Buy ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", (0, number_1.formatTokenAmount)(BigInt(order.srcAmount), order.metadata.srcToken.decimals)] }), ` of`] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary flex items-center gap-2", children: [nft ? ((0, jsx_runtime_1.jsx)("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6" })) : tournament ? ((0, jsx_runtime_1.jsx)("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6" })) : ((0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6" })), nft ? nft.name : tournament ? tournament.name : dstToken.symbol] }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [` on `, (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-4" }), order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "label-style text-as-primary/30 mt-1 flex items-center gap-2 text-xs", children: ["Paying via", " ", (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "-mt-1 h-3" })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-3 mt-4 flex items-center gap-1", isSmallView && "flex-col"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [(0, number_1.formatTokenAmount)(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["from", (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-4", order.srcChain !== chains_1.b3.id && "w-4 rounded-full", order.srcChain === chains_1.b3.id && "h-3") }), (0, anyspend_1.getChainName)(order.srcChain)] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("h-8 w-8 shrink-0 -rotate-90 opacity-30", isSmallView && "rotate-0"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-8 w-8" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: nft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: nft.name })] })) : tournament ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: tournament.name })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [(0, number_1.formatTokenAmount)(actualDstAmount
+    // Check if this is a one-click payment order
+    const isOneClickPayment = !!order.oneClickBuyUrl;
+    const vendorName = order.onrampMetadata?.vendor ? (0, payment_utils_1.getVendorDisplayName)(order.onrampMetadata.vendor) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all", onSelectOrder && "cursor-pointer"), onClick: () => onSelectOrder?.(order.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-xs font-semibold", orderDisplayStatus === "processing" && "text-yellow-600", orderDisplayStatus === "success" && "text-green-600", orderDisplayStatus === "failure" && "text-red-600"), children: orderStatusText }), isOneClickPayment && vendorName && ((0, jsx_runtime_1.jsx)(react_1.Badge, { variant: "outline", className: "text-as-secondary px-2 py-0.5 text-[10px]", children: vendorName }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-secondary text-[10px] font-medium uppercase tracking-wide", children: (0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.createdAt) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center", isSmallView ? "gap-2" : "gap-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: [(0, jsx_runtime_1.jsx)("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.srcChain) })] })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: (0, utils_1.cn)("text-as-secondary shrink-0 opacity-30", isSmallView ? "h-4 w-4" : "h-5 w-5") }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: nft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: nft.imageUrl, alt: nft.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: nft.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : tournament ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: tournament.imageUrl, alt: tournament.name, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: tournament.name }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: (0, utils_1.cn)("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [(0, number_1.formatTokenAmount)(actualDstAmount
                                                     ? BigInt(actualDstAmount)
                                                     : expectedDstAmount
                                                         ? BigInt(expectedDstAmount)
-                                                        : BigInt(0), dstToken.decimals), " ", dstToken.symbol] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["to", (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("h-4", order.dstChain !== chains_1.b3.id && "w-4 rounded-full", order.dstChain === chains_1.b3.id && "h-3") }), (0, anyspend_1.getChainName)(order.dstChain)] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-end", children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "link", size: "sm", className: "h-auto", onClick: () => onSelectOrder?.(order.id), children: [orderDisplayStatus === "processing" ? "Proceed with payment" : "Details", " ", (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "ml-2 h-3 w-3" })] }) })] }, `anyspend-${order.id}`));
+                                                        : BigInt(0), dstToken.decimals), " ", dstToken.symbol] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain]?.logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: "h-3 w-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: (0, anyspend_1.getChainName)(order.dstChain) })] })] })] })) })] })] }, `anyspend-${order.id}`));
 }