@unifold/ui-web 0.1.65 → 0.1.67

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { UnifoldConnectProviderConfig, DepositConfig, DepositResult, WithdrawConfig, WithdrawResult } from '@unifold/connect-react';
-export { DepositConfig, DepositError, DepositInitialScreen, DepositResult, UnifoldConnectProviderConfig, WithdrawConfig, WithdrawError, WithdrawResult, WithdrawTransactionInfo } from '@unifold/connect-react';
+export { DepositConfig, DepositError, DepositInitialScreen, DepositMethod, DepositResult, UnifoldConnectProviderConfig, WithdrawConfig, WithdrawError, WithdrawResult, WithdrawTransactionInfo } from '@unifold/connect-react';
 
 type UnifoldConfig = UnifoldConnectProviderConfig["config"];
 interface UnifoldHandle {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { UnifoldConnectProviderConfig, DepositConfig, DepositResult, WithdrawConfig, WithdrawResult } from '@unifold/connect-react';
-export { DepositConfig, DepositError, DepositInitialScreen, DepositResult, UnifoldConnectProviderConfig, WithdrawConfig, WithdrawError, WithdrawResult, WithdrawTransactionInfo } from '@unifold/connect-react';
+export { DepositConfig, DepositError, DepositInitialScreen, DepositMethod, DepositResult, UnifoldConnectProviderConfig, WithdrawConfig, WithdrawError, WithdrawResult, WithdrawTransactionInfo } from '@unifold/connect-react';
 
 type UnifoldConfig = UnifoldConnectProviderConfig["config"];
 interface UnifoldHandle {

package/dist/index.js

@@ -38524,6 +38524,15 @@ var ArrowUpDown = createLucideIcon("ArrowUpDown", [
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }]
 ]);
+var Bitcoin = createLucideIcon("Bitcoin", [
+  [
+    "path",
+    {
+      d: "M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",
+      key: "yr8idg"
+    }
+  ]
+]);
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 var ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
@@ -44099,8 +44108,13 @@ async function sendHypercoreTransaction(request, publishableKey) {
 }
 var DepositEventType = /* @__PURE__ */ ((DepositEventType2) => {
   DepositEventType2["ONRAMP_SESSION_CREATED"] = "onramp_session.created";
+  DepositEventType2["DIRECT_EXECUTION_SUCCEEDED"] = "direct_execution.succeeded";
   return DepositEventType2;
 })(DepositEventType || {});
+var WithdrawEventType = /* @__PURE__ */ ((WithdrawEventType2) => {
+  WithdrawEventType2["DIRECT_EXECUTION_SUCCEEDED"] = "direct_execution.succeeded";
+  return WithdrawEventType2;
+})(WithdrawEventType || {});
 var import_qr_code_styling = __toESM2(require_qr_code_styling(), 1);
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
 var use = React25[" use ".trim().toString()];
@@ -51732,6 +51746,31 @@ function useDepositPolling({
   onDepositSuccess,
   onDepositError
 }) {
+  const createExecutionSuccessEvent = (execution) => ({
+    id: generatePrefixedKSUID("sevt"),
+    type: DepositEventType.DIRECT_EXECUTION_SUCCEEDED,
+    created: execution.updated_at ? Math.floor(new Date(execution.updated_at).getTime() / 1e3) : execution.created_at ? Math.floor(new Date(execution.created_at).getTime() / 1e3) : Math.floor(Date.now() / 1e3),
+    data: { object: mapToDirectExecution(execution) }
+  });
+  const mapToDirectExecution = (execution) => ({
+    id: execution.id,
+    transactionHash: execution.transaction_hash,
+    recipientAddress: execution.recipient_address,
+    depositAddress: execution.deposit_wallet?.address,
+    sourceChainType: execution.source_chain_type,
+    sourceChainId: execution.source_chain_id,
+    sourceTokenAddress: execution.source_token_address,
+    destinationChainType: execution.destination_chain_type,
+    destinationChainId: execution.destination_chain_id,
+    destinationTokenAddress: execution.destination_token_address,
+    sourceAmountBaseUnit: execution.source_amount_base_unit,
+    sourceAmountUsd: execution.source_amount_usd,
+    destinationAmountBaseUnit: execution.destination_amount_base_unit,
+    destinationAmountUsd: execution.destination_amount_usd,
+    destinationTransactionHashes: execution.destination_transaction_hashes,
+    status: execution.status,
+    failureReason: execution.failure_reason
+  });
   const [executions, setExecutions] = (0, import_react10.useState)([]);
   const [isPolling, setIsPolling] = (0, import_react10.useState)(false);
   const [pollingEnabled, setPollingEnabled] = (0, import_react10.useState)(false);
@@ -51845,7 +51884,9 @@ function useDepositPolling({
             onDepositSuccessRef.current?.({
               message: "Deposit completed successfully",
               executionId: execution.id,
-              transaction: execution
+              // Backward compatibility: keep transaction in API response shape.
+              transaction: execution,
+              execution: createExecutionSuccessEvent(execution)
             });
           } else if (execution.status === ExecutionStatus.FAILED && previousStatus !== ExecutionStatus.FAILED) {
             onDepositErrorRef.current?.({
@@ -58026,6 +58067,8 @@ function CoinbaseConnect({
   destinationChainId,
   destinationChainType,
   onTransferSuccess,
+  onDepositSuccess,
+  onDepositError,
   onTransferError,
   onClose,
   onBack: parentOnBack,
@@ -58173,10 +58216,14 @@ function CoinbaseConnect({
     depositWalletId: transferDepositWalletId,
     enabled: view === "success" && !!transferDepositWalletId,
     immediateDirectPolling: true,
-    onDepositSuccess: onTransferSuccess ? () => {
-      if (confirmResult) onTransferSuccess(confirmResult);
+    onDepositSuccess: onDepositSuccess || onTransferSuccess ? (data) => {
+      onDepositSuccess?.(data);
+      if (onTransferSuccess && confirmResult) onTransferSuccess(confirmResult);
     } : void 0,
-    onDepositError: onTransferError
+    onDepositError: onDepositError || onTransferError ? (error) => {
+      onDepositError?.(error);
+      onTransferError?.({ message: error.message });
+    } : void 0
   });
   (0, import_react18.useEffect)(() => {
     onExecutionsChange?.(depositExecutions);
@@ -64363,7 +64410,10 @@ function WalletConnect({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
                   WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
+                    wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Last used" })
+                  ] })
                 ] }),
                 isPending ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -64624,6 +64674,23 @@ function DepositModal({
   depositTrackerSubTitle = t7.depositTracker.subtitle
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const onDepositSuccessFor = (0, import_react3.useCallback)(
+    (method) => onDepositSuccess || onEvent ? (data) => {
+      const payload = { ...data, method };
+      onDepositSuccess?.(payload);
+      if (payload.execution) {
+        onEvent?.({
+          ...payload.execution,
+          method
+        });
+      }
+    } : void 0,
+    [onDepositSuccess, onEvent]
+  );
+  const onDepositErrorFor = (0, import_react3.useCallback)(
+    (method) => onDepositError ? (error) => onDepositError({ ...error, method }) : void 0,
+    [onDepositError]
+  );
   const effectiveInitialScreen = (0, import_react3.useMemo)(() => {
     const s = initialScreen ?? "main";
     if (s === "tracker" && hideDepositTracker === true) return "main";
@@ -65164,8 +65231,8 @@ function DepositModal({
     cashAppMenuButton
   ].filter(Boolean);
   const depositTabs = [
-    { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
-    { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
+    { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
+    { id: "cash", label: "Use Cash", icon: DollarSign, buttons: cashMenuButtons }
   ].filter((tab) => tab.buttons.length > 0);
   const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
   const renderMainMenuBody = () => {
@@ -65188,18 +65255,16 @@ function DepositModal({
             role: "tablist",
             children: depositTabs.map((tab) => {
               const active = activeDepositTab.id === tab.id;
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              const TabIcon = tab.icon;
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
                 "button",
                 {
                   type: "button",
                   role: "tab",
                   "aria-selected": active,
                   onClick: () => setDepositTab(tab.id),
-                  className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
+                  className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all uf-flex uf-items-center uf-justify-center uf-gap-1.5",
                   style: {
-                    // Active tab is a soft, blurred glass pill — a faint accent
-                    // tint with its own backdrop blur and a subtle border/shadow,
-                    // so it looks frosted instead of like a hard solid button.
                     backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
                     backdropFilter: active ? "blur(8px)" : void 0,
                     WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -65207,7 +65272,19 @@ function DepositModal({
                     color: active ? colors2.foreground : colors2.foregroundMuted,
                     fontFamily: fonts.medium
                   },
-                  children: tab.label
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      "span",
+                      {
+                        className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
+                        style: {
+                          backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
+                      }
+                    ),
+                    tab.label
+                  ]
                 },
                 tab.id
               );
@@ -65298,8 +65375,8 @@ function DepositModal({
                     defaultSourceSymbol,
                     depositConfirmationMode,
                     onExecutionsChange: setDepositExecutions,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("transfer"),
+                    onDepositError: onDepositErrorFor("transfer"),
                     wallets
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
@@ -65317,8 +65394,8 @@ function DepositModal({
                     defaultSourceSymbol,
                     depositConfirmationMode,
                     onExecutionsChange: setDepositExecutions,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("transfer"),
+                    onDepositError: onDepositErrorFor("transfer"),
                     wallets
                   }
                 ),
@@ -65383,8 +65460,8 @@ function DepositModal({
                     destinationChainType,
                     destinationChainId,
                     destinationTokenAddress,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("card"),
+                    onDepositError: onDepositErrorFor("card"),
                     onEvent,
                     themeClass,
                     wallets,
@@ -65419,8 +65496,8 @@ function DepositModal({
                     destinationChainType,
                     destinationChainId,
                     destinationTokenAddress,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
+                    onDepositError: onDepositErrorFor("pay_with_exchange"),
                     wallets,
                     defaultToken: defaultToken ?? null
                   }
@@ -65438,14 +65515,10 @@ function DepositModal({
                   destinationTokenAddress: destinationTokenAddress ?? "",
                   destinationChainId: destinationChainId ?? "",
                   destinationChainType: destinationChainType ?? "",
-                  onTransferSuccess: (result) => {
-                    onDepositSuccess?.({
-                      message: "Transfer completed via Coinbase Connect",
-                      transaction: result
-                    });
-                  },
+                  onDepositSuccess: onDepositSuccessFor("exchange_connect"),
+                  onDepositError: onDepositErrorFor("exchange_connect"),
                   onTransferError: (error) => {
-                    onDepositError?.({
+                    onDepositErrorFor("exchange_connect")?.({
                       message: error.message,
                       error
                     });
@@ -65474,20 +65547,14 @@ function DepositModal({
                   publishableKey,
                   assetCdnUrl: projectConfig?.asset_cdn_url,
                   projectName: projectConfig?.project_name,
-                  onSuccess: (txHash) => {
-                    onDepositSuccess?.({
-                      message: "Transaction sent successfully",
-                      transaction: { txHash }
-                    });
-                  },
                   onError: (error) => {
-                    onDepositError?.({
+                    onDepositErrorFor("wallet_connect")?.({
                       message: error.message,
                       error
                     });
                   },
-                  onDepositSuccess,
-                  onDepositError,
+                  onDepositSuccess: onDepositSuccessFor("wallet_connect"),
+                  onDepositError: onDepositErrorFor("wallet_connect"),
                   amountQuickSelect: browserWalletAmountQuickSelect,
                   onWalletDisconnect: handleWalletDisconnect,
                   onWalletConnected: (info, dw) => {
@@ -65531,8 +65598,8 @@ function DepositModal({
                     onViewChange: setCashAppView,
                     onAmountChange: setCashAppAmount,
                     onEvent,
-                    onDepositSuccess,
-                    onDepositError
+                    onDepositSuccess: onDepositSuccessFor("cashapp"),
+                    onDepositError: onDepositErrorFor("cashapp")
                   }
                 ),
                 depositPoweredByFooter
@@ -66370,6 +66437,31 @@ function useWithdrawPolling({
   onWithdrawSuccess,
   onWithdrawError
 }) {
+  const createExecutionSuccessEvent = (execution) => ({
+    id: generatePrefixedKSUID("sevt"),
+    type: WithdrawEventType.DIRECT_EXECUTION_SUCCEEDED,
+    created: execution.updated_at ? Math.floor(new Date(execution.updated_at).getTime() / 1e3) : execution.created_at ? Math.floor(new Date(execution.created_at).getTime() / 1e3) : Math.floor(Date.now() / 1e3),
+    data: { object: mapToDirectExecution(execution) }
+  });
+  const mapToDirectExecution = (execution) => ({
+    id: execution.id,
+    transactionHash: execution.transaction_hash,
+    recipientAddress: execution.recipient_address,
+    depositAddress: execution.deposit_wallet?.address,
+    sourceChainType: execution.source_chain_type,
+    sourceChainId: execution.source_chain_id,
+    sourceTokenAddress: execution.source_token_address,
+    destinationChainType: execution.destination_chain_type,
+    destinationChainId: execution.destination_chain_id,
+    destinationTokenAddress: execution.destination_token_address,
+    sourceAmountBaseUnit: execution.source_amount_base_unit,
+    sourceAmountUsd: execution.source_amount_usd,
+    destinationAmountBaseUnit: execution.destination_amount_base_unit,
+    destinationAmountUsd: execution.destination_amount_usd,
+    destinationTransactionHashes: execution.destination_transaction_hashes,
+    status: execution.status,
+    failureReason: execution.failure_reason
+  });
   const [executions, setExecutions] = (0, import_react31.useState)([]);
   const [isPolling, setIsPolling] = (0, import_react31.useState)(false);
   const enabledAtRef = (0, import_react31.useRef)(/* @__PURE__ */ new Date());
@@ -66437,7 +66529,13 @@ function useWithdrawPolling({
             return [...list, ex];
           });
           if (ex.status === ExecutionStatus.SUCCEEDED && (!prev || inProgress.includes(prev))) {
-            onSuccessRef.current?.({ message: "Withdrawal completed successfully", executionId: ex.id, transaction: ex });
+            onSuccessRef.current?.({
+              message: "Withdrawal completed successfully",
+              executionId: ex.id,
+              // Backward compatibility: keep transaction in API response shape.
+              transaction: ex,
+              execution: createExecutionSuccessEvent(ex)
+            });
           } else if (ex.status === ExecutionStatus.FAILED && prev !== ExecutionStatus.FAILED) {
             onErrorRef.current?.({ message: "Withdrawal failed", code: "WITHDRAW_FAILED", error: ex });
           }
@@ -67639,9 +67737,19 @@ function WithdrawModal({
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
+  onEvent,
   theme = "dark",
   hideOverlay = false
 }) {
+  const onWithdrawSuccessFor = (0, import_react30.useCallback)(
+    (data) => {
+      onWithdrawSuccess?.(data);
+      if (data.execution) {
+        onEvent?.(data.execution);
+      }
+    },
+    [onWithdrawSuccess, onEvent]
+  );
   const { colors: colors2, fonts, components } = useTheme();
   const [containerEl, setContainerEl] = (0, import_react30.useState)(null);
   const containerCallbackRef = (0, import_react30.useCallback)((el) => {
@@ -67703,7 +67811,7 @@ function WithdrawModal({
     publishableKey,
     depositWalletId: withdrawDepositWalletId,
     enabled: !!withdrawDepositWalletId && open,
-    onWithdrawSuccess: onWithdrawSuccess ? (d) => onWithdrawSuccess({ message: d.message, transaction: d.transaction }) : void 0,
+    onWithdrawSuccess: onWithdrawSuccess || onEvent ? onWithdrawSuccessFor : void 0,
     onWithdrawError
   });
   const { data: allWithdrawalsData } = useExecutions(externalUserId, publishableKey, {
@@ -68200,6 +68308,7 @@ function UnifoldProvider2({
             onWithdraw: withdrawConfig.withdraw,
             onWithdrawSuccess: handleWithdrawSuccess,
             onWithdrawError: handleWithdrawError,
+            onEvent: withdrawConfig.onEvent,
             theme: resolvedTheme
           }
         ),
@@ -68405,6 +68514,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-left-right.js:
 lucide-react/dist/esm/icons/arrow-left.js:
 lucide-react/dist/esm/icons/arrow-up-down.js:
+lucide-react/dist/esm/icons/bitcoin.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:

package/dist/index.mjs

@@ -38511,6 +38511,15 @@ var ArrowUpDown = createLucideIcon("ArrowUpDown", [
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }]
 ]);
+var Bitcoin = createLucideIcon("Bitcoin", [
+  [
+    "path",
+    {
+      d: "M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",
+      key: "yr8idg"
+    }
+  ]
+]);
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 var ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
@@ -44086,8 +44095,13 @@ async function sendHypercoreTransaction(request, publishableKey) {
 }
 var DepositEventType = /* @__PURE__ */ ((DepositEventType2) => {
   DepositEventType2["ONRAMP_SESSION_CREATED"] = "onramp_session.created";
+  DepositEventType2["DIRECT_EXECUTION_SUCCEEDED"] = "direct_execution.succeeded";
   return DepositEventType2;
 })(DepositEventType || {});
+var WithdrawEventType = /* @__PURE__ */ ((WithdrawEventType2) => {
+  WithdrawEventType2["DIRECT_EXECUTION_SUCCEEDED"] = "direct_execution.succeeded";
+  return WithdrawEventType2;
+})(WithdrawEventType || {});
 var import_qr_code_styling = __toESM2(require_qr_code_styling(), 1);
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
 var use = React25[" use ".trim().toString()];
@@ -51719,6 +51733,31 @@ function useDepositPolling({
   onDepositSuccess,
   onDepositError
 }) {
+  const createExecutionSuccessEvent = (execution) => ({
+    id: generatePrefixedKSUID("sevt"),
+    type: DepositEventType.DIRECT_EXECUTION_SUCCEEDED,
+    created: execution.updated_at ? Math.floor(new Date(execution.updated_at).getTime() / 1e3) : execution.created_at ? Math.floor(new Date(execution.created_at).getTime() / 1e3) : Math.floor(Date.now() / 1e3),
+    data: { object: mapToDirectExecution(execution) }
+  });
+  const mapToDirectExecution = (execution) => ({
+    id: execution.id,
+    transactionHash: execution.transaction_hash,
+    recipientAddress: execution.recipient_address,
+    depositAddress: execution.deposit_wallet?.address,
+    sourceChainType: execution.source_chain_type,
+    sourceChainId: execution.source_chain_id,
+    sourceTokenAddress: execution.source_token_address,
+    destinationChainType: execution.destination_chain_type,
+    destinationChainId: execution.destination_chain_id,
+    destinationTokenAddress: execution.destination_token_address,
+    sourceAmountBaseUnit: execution.source_amount_base_unit,
+    sourceAmountUsd: execution.source_amount_usd,
+    destinationAmountBaseUnit: execution.destination_amount_base_unit,
+    destinationAmountUsd: execution.destination_amount_usd,
+    destinationTransactionHashes: execution.destination_transaction_hashes,
+    status: execution.status,
+    failureReason: execution.failure_reason
+  });
   const [executions, setExecutions] = (0, import_react10.useState)([]);
   const [isPolling, setIsPolling] = (0, import_react10.useState)(false);
   const [pollingEnabled, setPollingEnabled] = (0, import_react10.useState)(false);
@@ -51832,7 +51871,9 @@ function useDepositPolling({
             onDepositSuccessRef.current?.({
               message: "Deposit completed successfully",
               executionId: execution.id,
-              transaction: execution
+              // Backward compatibility: keep transaction in API response shape.
+              transaction: execution,
+              execution: createExecutionSuccessEvent(execution)
             });
           } else if (execution.status === ExecutionStatus.FAILED && previousStatus !== ExecutionStatus.FAILED) {
             onDepositErrorRef.current?.({
@@ -58013,6 +58054,8 @@ function CoinbaseConnect({
   destinationChainId,
   destinationChainType,
   onTransferSuccess,
+  onDepositSuccess,
+  onDepositError,
   onTransferError,
   onClose,
   onBack: parentOnBack,
@@ -58160,10 +58203,14 @@ function CoinbaseConnect({
     depositWalletId: transferDepositWalletId,
     enabled: view === "success" && !!transferDepositWalletId,
     immediateDirectPolling: true,
-    onDepositSuccess: onTransferSuccess ? () => {
-      if (confirmResult) onTransferSuccess(confirmResult);
+    onDepositSuccess: onDepositSuccess || onTransferSuccess ? (data) => {
+      onDepositSuccess?.(data);
+      if (onTransferSuccess && confirmResult) onTransferSuccess(confirmResult);
     } : void 0,
-    onDepositError: onTransferError
+    onDepositError: onDepositError || onTransferError ? (error) => {
+      onDepositError?.(error);
+      onTransferError?.({ message: error.message });
+    } : void 0
   });
   (0, import_react18.useEffect)(() => {
     onExecutionsChange?.(depositExecutions);
@@ -64350,7 +64397,10 @@ function WalletConnect({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
                   WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
+                    wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Last used" })
+                  ] })
                 ] }),
                 isPending ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -64611,6 +64661,23 @@ function DepositModal({
   depositTrackerSubTitle = t7.depositTracker.subtitle
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const onDepositSuccessFor = (0, import_react3.useCallback)(
+    (method) => onDepositSuccess || onEvent ? (data) => {
+      const payload = { ...data, method };
+      onDepositSuccess?.(payload);
+      if (payload.execution) {
+        onEvent?.({
+          ...payload.execution,
+          method
+        });
+      }
+    } : void 0,
+    [onDepositSuccess, onEvent]
+  );
+  const onDepositErrorFor = (0, import_react3.useCallback)(
+    (method) => onDepositError ? (error) => onDepositError({ ...error, method }) : void 0,
+    [onDepositError]
+  );
   const effectiveInitialScreen = (0, import_react3.useMemo)(() => {
     const s = initialScreen ?? "main";
     if (s === "tracker" && hideDepositTracker === true) return "main";
@@ -65151,8 +65218,8 @@ function DepositModal({
     cashAppMenuButton
   ].filter(Boolean);
   const depositTabs = [
-    { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
-    { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
+    { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
+    { id: "cash", label: "Use Cash", icon: DollarSign, buttons: cashMenuButtons }
   ].filter((tab) => tab.buttons.length > 0);
   const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
   const renderMainMenuBody = () => {
@@ -65175,18 +65242,16 @@ function DepositModal({
             role: "tablist",
             children: depositTabs.map((tab) => {
               const active = activeDepositTab.id === tab.id;
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              const TabIcon = tab.icon;
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
                 "button",
                 {
                   type: "button",
                   role: "tab",
                   "aria-selected": active,
                   onClick: () => setDepositTab(tab.id),
-                  className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
+                  className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all uf-flex uf-items-center uf-justify-center uf-gap-1.5",
                   style: {
-                    // Active tab is a soft, blurred glass pill — a faint accent
-                    // tint with its own backdrop blur and a subtle border/shadow,
-                    // so it looks frosted instead of like a hard solid button.
                     backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
                     backdropFilter: active ? "blur(8px)" : void 0,
                     WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -65194,7 +65259,19 @@ function DepositModal({
                     color: active ? colors2.foreground : colors2.foregroundMuted,
                     fontFamily: fonts.medium
                   },
-                  children: tab.label
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      "span",
+                      {
+                        className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
+                        style: {
+                          backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
+                      }
+                    ),
+                    tab.label
+                  ]
                 },
                 tab.id
               );
@@ -65285,8 +65362,8 @@ function DepositModal({
                     defaultSourceSymbol,
                     depositConfirmationMode,
                     onExecutionsChange: setDepositExecutions,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("transfer"),
+                    onDepositError: onDepositErrorFor("transfer"),
                     wallets
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
@@ -65304,8 +65381,8 @@ function DepositModal({
                     defaultSourceSymbol,
                     depositConfirmationMode,
                     onExecutionsChange: setDepositExecutions,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("transfer"),
+                    onDepositError: onDepositErrorFor("transfer"),
                     wallets
                   }
                 ),
@@ -65370,8 +65447,8 @@ function DepositModal({
                     destinationChainType,
                     destinationChainId,
                     destinationTokenAddress,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("card"),
+                    onDepositError: onDepositErrorFor("card"),
                     onEvent,
                     themeClass,
                     wallets,
@@ -65406,8 +65483,8 @@ function DepositModal({
                     destinationChainType,
                     destinationChainId,
                     destinationTokenAddress,
-                    onDepositSuccess,
-                    onDepositError,
+                    onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
+                    onDepositError: onDepositErrorFor("pay_with_exchange"),
                     wallets,
                     defaultToken: defaultToken ?? null
                   }
@@ -65425,14 +65502,10 @@ function DepositModal({
                   destinationTokenAddress: destinationTokenAddress ?? "",
                   destinationChainId: destinationChainId ?? "",
                   destinationChainType: destinationChainType ?? "",
-                  onTransferSuccess: (result) => {
-                    onDepositSuccess?.({
-                      message: "Transfer completed via Coinbase Connect",
-                      transaction: result
-                    });
-                  },
+                  onDepositSuccess: onDepositSuccessFor("exchange_connect"),
+                  onDepositError: onDepositErrorFor("exchange_connect"),
                   onTransferError: (error) => {
-                    onDepositError?.({
+                    onDepositErrorFor("exchange_connect")?.({
                       message: error.message,
                       error
                     });
@@ -65461,20 +65534,14 @@ function DepositModal({
                   publishableKey,
                   assetCdnUrl: projectConfig?.asset_cdn_url,
                   projectName: projectConfig?.project_name,
-                  onSuccess: (txHash) => {
-                    onDepositSuccess?.({
-                      message: "Transaction sent successfully",
-                      transaction: { txHash }
-                    });
-                  },
                   onError: (error) => {
-                    onDepositError?.({
+                    onDepositErrorFor("wallet_connect")?.({
                       message: error.message,
                       error
                     });
                   },
-                  onDepositSuccess,
-                  onDepositError,
+                  onDepositSuccess: onDepositSuccessFor("wallet_connect"),
+                  onDepositError: onDepositErrorFor("wallet_connect"),
                   amountQuickSelect: browserWalletAmountQuickSelect,
                   onWalletDisconnect: handleWalletDisconnect,
                   onWalletConnected: (info, dw) => {
@@ -65518,8 +65585,8 @@ function DepositModal({
                     onViewChange: setCashAppView,
                     onAmountChange: setCashAppAmount,
                     onEvent,
-                    onDepositSuccess,
-                    onDepositError
+                    onDepositSuccess: onDepositSuccessFor("cashapp"),
+                    onDepositError: onDepositErrorFor("cashapp")
                   }
                 ),
                 depositPoweredByFooter
@@ -66357,6 +66424,31 @@ function useWithdrawPolling({
   onWithdrawSuccess,
   onWithdrawError
 }) {
+  const createExecutionSuccessEvent = (execution) => ({
+    id: generatePrefixedKSUID("sevt"),
+    type: WithdrawEventType.DIRECT_EXECUTION_SUCCEEDED,
+    created: execution.updated_at ? Math.floor(new Date(execution.updated_at).getTime() / 1e3) : execution.created_at ? Math.floor(new Date(execution.created_at).getTime() / 1e3) : Math.floor(Date.now() / 1e3),
+    data: { object: mapToDirectExecution(execution) }
+  });
+  const mapToDirectExecution = (execution) => ({
+    id: execution.id,
+    transactionHash: execution.transaction_hash,
+    recipientAddress: execution.recipient_address,
+    depositAddress: execution.deposit_wallet?.address,
+    sourceChainType: execution.source_chain_type,
+    sourceChainId: execution.source_chain_id,
+    sourceTokenAddress: execution.source_token_address,
+    destinationChainType: execution.destination_chain_type,
+    destinationChainId: execution.destination_chain_id,
+    destinationTokenAddress: execution.destination_token_address,
+    sourceAmountBaseUnit: execution.source_amount_base_unit,
+    sourceAmountUsd: execution.source_amount_usd,
+    destinationAmountBaseUnit: execution.destination_amount_base_unit,
+    destinationAmountUsd: execution.destination_amount_usd,
+    destinationTransactionHashes: execution.destination_transaction_hashes,
+    status: execution.status,
+    failureReason: execution.failure_reason
+  });
   const [executions, setExecutions] = (0, import_react31.useState)([]);
   const [isPolling, setIsPolling] = (0, import_react31.useState)(false);
   const enabledAtRef = (0, import_react31.useRef)(/* @__PURE__ */ new Date());
@@ -66424,7 +66516,13 @@ function useWithdrawPolling({
             return [...list, ex];
           });
           if (ex.status === ExecutionStatus.SUCCEEDED && (!prev || inProgress.includes(prev))) {
-            onSuccessRef.current?.({ message: "Withdrawal completed successfully", executionId: ex.id, transaction: ex });
+            onSuccessRef.current?.({
+              message: "Withdrawal completed successfully",
+              executionId: ex.id,
+              // Backward compatibility: keep transaction in API response shape.
+              transaction: ex,
+              execution: createExecutionSuccessEvent(ex)
+            });
           } else if (ex.status === ExecutionStatus.FAILED && prev !== ExecutionStatus.FAILED) {
             onErrorRef.current?.({ message: "Withdrawal failed", code: "WITHDRAW_FAILED", error: ex });
           }
@@ -67626,9 +67724,19 @@ function WithdrawModal({
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
+  onEvent,
   theme = "dark",
   hideOverlay = false
 }) {
+  const onWithdrawSuccessFor = (0, import_react30.useCallback)(
+    (data) => {
+      onWithdrawSuccess?.(data);
+      if (data.execution) {
+        onEvent?.(data.execution);
+      }
+    },
+    [onWithdrawSuccess, onEvent]
+  );
   const { colors: colors2, fonts, components } = useTheme();
   const [containerEl, setContainerEl] = (0, import_react30.useState)(null);
   const containerCallbackRef = (0, import_react30.useCallback)((el) => {
@@ -67690,7 +67798,7 @@ function WithdrawModal({
     publishableKey,
     depositWalletId: withdrawDepositWalletId,
     enabled: !!withdrawDepositWalletId && open,
-    onWithdrawSuccess: onWithdrawSuccess ? (d) => onWithdrawSuccess({ message: d.message, transaction: d.transaction }) : void 0,
+    onWithdrawSuccess: onWithdrawSuccess || onEvent ? onWithdrawSuccessFor : void 0,
     onWithdrawError
   });
   const { data: allWithdrawalsData } = useExecutions(externalUserId, publishableKey, {
@@ -68187,6 +68295,7 @@ function UnifoldProvider2({
             onWithdraw: withdrawConfig.withdraw,
             onWithdrawSuccess: handleWithdrawSuccess,
             onWithdrawError: handleWithdrawError,
+            onEvent: withdrawConfig.onEvent,
             theme: resolvedTheme
           }
         ),
@@ -68391,6 +68500,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-left-right.js:
 lucide-react/dist/esm/icons/arrow-left.js:
 lucide-react/dist/esm/icons/arrow-up-down.js:
+lucide-react/dist/esm/icons/bitcoin.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-web",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "description": "Unifold UI Web - Framework-agnostic deposit widget",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,10 +30,10 @@
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@unifold/connect-react": "0.1.65",
-    "@unifold/ui-react": "0.1.65",
-    "@unifold/core": "0.1.65",
-    "@unifold/react-provider": "0.1.65"
+    "@unifold/connect-react": "0.1.67",
+    "@unifold/react-provider": "0.1.67",
+    "@unifold/ui-react": "0.1.67",
+    "@unifold/core": "0.1.67"
   },
   "keywords": [
     "unifold",