0xtrails 0.9.1 → 0.9.2

package/dist/{ccip-C2oii9SB.js → ccip-g6lDdnrD.js}

@@ -1,4 +1,4 @@
-import { aB as b, aC as O, aD as F, aE as q, aF as $, aG as L, aH as E, aI as D, aJ as w, aK as G, aL as R, aM as I, aN as T, aO as y, aP as x, aQ as M, aR as m, aS as C, aT as H, aU as U, aV as v, aW as B, aX as A, aY as j } from "./index-B6r2LXCk.js";
+import { aB as b, aC as O, aD as F, aE as q, aF as $, aG as L, aH as E, aI as D, aJ as w, aK as G, aL as R, aM as I, aN as T, aO as y, aP as x, aQ as M, aR as m, aS as C, aT as H, aU as U, aV as v, aW as B, aX as A, aY as j } from "./index-D-QngA_s.js";
 function J(a) {
   const { abi: r, data: e } = a, s = b(e, 0, 4), t = r.find((n) => n.type === "function" && s === O(F(n)));
   if (!t)

package/dist/{index-B6r2LXCk.js → index-D-QngA_s.js}

@@ -39492,7 +39492,7 @@ const Uo = /* @__PURE__ */ new Map(), il = {
     Uo.clear();
   },
   getAll: () => Array.from(Uo.keys())
-}, Ore = "0.9.1", Mre = {
+}, Ore = "0.9.2", Mre = {
   version: Ore
 };
 let $i = null;
@@ -44554,7 +44554,7 @@ async function P9(e, t) {
     });
     return V === "0x" ? { data: void 0 } : { data: V };
   } catch (G) {
-    const W = eie(G), { offchainLookup: M, offchainLookupSignature: _ } = await import("./ccip-C2oii9SB.js");
+    const W = eie(G), { offchainLookup: M, offchainLookupSignature: _ } = await import("./ccip-g6lDdnrD.js");
     if (e.ccipRead !== !1 && W?.slice(0, 10) === _ && x)
       return { data: await M(e, { data: W, to: x }) };
     throw j && W?.slice(0, 10) === "0x101bb98d" ? new Poe({ factory: f }) : joe(G, {
@@ -53161,9 +53161,7 @@ async function jle(e) {
         `Destination public client chain ID mismatch: expected ${a}, got ${we}`
       );
   }
-  const te = ese(
-    k || "0.01"
-  );
+  const te = k !== void 0 ? k : ese("0.01");
   if (!v)
     throw new Error("Source token decimals not provided");
   if (!w)
@@ -75697,7 +75695,7 @@ const afe = ({
         yellow: "text-yellow-600 dark:text-yellow-400",
         blue: "text-blue-600 dark:text-blue-400"
       };
-      return /* @__PURE__ */ l(Ke, { children: /* @__PURE__ */ l("div", { className: `mt-4 p-4 rounded-lg border ${ke[ve]}`, children: /* @__PURE__ */ g("div", { className: "flex items-start space-x-3", children: [
+      return /* @__PURE__ */ l("div", { className: `mt-4 p-4 rounded-lg border ${ke[ve]}`, children: /* @__PURE__ */ g("div", { className: "flex items-start space-x-3", children: [
         /* @__PURE__ */ l("div", { className: "flex-shrink-0 mt-0.5", children: ve === "yellow" || ve === "blue" || O.status?.toUpperCase() === "SETTLING" ? /* @__PURE__ */ g(
           "svg",
           {
@@ -75768,7 +75766,7 @@ const afe = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ g("div", { className: "flex-1", children: [
+        /* @__PURE__ */ g("div", { className: "flex-1 text-left", children: [
           /* @__PURE__ */ l("p", { className: `text-sm font-medium ${$e[ve]}`, children: me(O.status) }),
           /* @__PURE__ */ g(
             "p",
@@ -75795,7 +75793,7 @@ const afe = ({
             }
           )
         ] })
-      ] }) }) });
+      ] }) });
     }
     return /* @__PURE__ */ g(Ke, { children: [
       /* @__PURE__ */ l("div", { className: "mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700", children: /* @__PURE__ */ g("div", { className: "flex items-start space-x-3", children: [
@@ -75908,7 +75906,7 @@ const afe = ({
                 /* @__PURE__ */ l("span", { className: "text-lg font-mono font-bold text-blue-600 dark:text-blue-400", children: ae(Y()) })
               ] })
             ] }) }),
-            !k && /* @__PURE__ */ l("p", { className: "mt-4 text-sm text-gray-600 dark:text-gray-400", children: "Complete the payment within the time limit. We use USDC on Base network as the intermediary token, please do not change it." }),
+            !k && /* @__PURE__ */ l("p", { className: "mt-4 text-sm text-left text-gray-600 dark:text-gray-400", children: "Complete the payment within the time limit. We use USDC on Base network as the intermediary token, please do not change it." }),
             /* @__PURE__ */ l(
               WT,
               {
@@ -75917,10 +75915,13 @@ const afe = ({
                 tokenSize: 20
               }
             ),
-            k && /* @__PURE__ */ l("p", { className: "mt-4 text-sm text-gray-600 dark:text-gray-400", children: "Your transaction is settling with payment provider. This usually takes 1-5 minutes to complete." }),
+            k && /* @__PURE__ */ l("p", { className: "mt-4 text-sm text-left text-gray-600 dark:text-gray-400", children: "Your transaction is settling with payment provider. This usually takes 1-5 minutes to complete." }),
             le(),
             J(),
-            /* @__PURE__ */ l("div", { className: "mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700", children: /* @__PURE__ */ l("p", { className: "text-sm font-medium text-amber-800 dark:text-amber-200", children: "⚠️ Important: Do not close this window or navigate away while your payment is processing." }) })
+            /* @__PURE__ */ l("div", { className: "mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700", children: /* @__PURE__ */ g("div", { className: "flex items-start space-x-3", children: [
+              /* @__PURE__ */ l("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ l("span", { className: "text-amber-600 dark:text-amber-400", children: "⚠️" }) }),
+              /* @__PURE__ */ l("div", { className: "flex-1 text-left", children: /* @__PURE__ */ l("p", { className: "text-sm font-medium text-amber-800 dark:text-amber-200", children: "Important: Do not close this window or navigate away while your payment is processing." }) })
+            ] }) })
           ]
         }
       ),

package/dist/index.js

@@ -1,5 +1,5 @@
-import { l as d, u as Ce, a as we, b as Ee, c as Se, d as ye, e as pe, g as B, f as $, h as ee, T as H, i as Pe, j as te, k as Re, p as Ue, m as D } from "./index-B6r2LXCk.js";
-import { I as Je, aj as Ye, ao as ve, aA as be, az as et, ar as tt, al as nt, ay as ot, U as st, G as rt, at, ad as it, H as ct, J as dt, K as lt, a4 as ut, ax as ft, av as Tt, a5 as mt, a7 as gt, af as kt, a8 as ht, a6 as At, V as It, P as Ct, C as wt, E as Et, ak as St, W as yt, as as pt, o as Pt, n as Rt, x as Ut, s as Ht, t as xt, w as Ot, v as Lt, q as Bt, r as Dt, y as qt, am as Mt, ap as Wt, z as Ft, D as Nt, A as jt, $ as Qt, a9 as _t, an as $t, ai as Gt, ac as Xt, ah as zt, ag as Kt, ae as Vt, N as Zt, L as Jt, M as Yt, au as vt, X as bt, Q as en, F as tn, S as nn, a1 as on, Y as sn, Z as rn, aw as an, R as cn, aq as dn, O as ln, B as un, a2 as fn, _ as Tn, a3 as mn, a0 as gn, aa as kn, ab as hn } from "./index-B6r2LXCk.js";
+import { l as d, u as Ce, a as we, b as Ee, c as Se, d as ye, e as pe, g as B, f as $, h as ee, T as H, i as Pe, j as te, k as Re, p as Ue, m as D } from "./index-D-QngA_s.js";
+import { I as Je, aj as Ye, ao as ve, aA as be, az as et, ar as tt, al as nt, ay as ot, U as st, G as rt, at, ad as it, H as ct, J as dt, K as lt, a4 as ut, ax as ft, av as Tt, a5 as mt, a7 as gt, af as kt, a8 as ht, a6 as At, V as It, P as Ct, C as wt, E as Et, ak as St, W as yt, as as pt, o as Pt, n as Rt, x as Ut, s as Ht, t as xt, w as Ot, v as Lt, q as Bt, r as Dt, y as qt, am as Mt, ap as Wt, z as Ft, D as Nt, A as jt, $ as Qt, a9 as _t, an as $t, ai as Gt, ac as Xt, ah as zt, ag as Kt, ae as Vt, N as Zt, L as Jt, M as Yt, au as vt, X as bt, Q as en, F as tn, S as nn, a1 as on, Y as sn, Z as rn, aw as an, R as cn, aq as dn, O as ln, B as un, a2 as fn, _ as Tn, a3 as mn, a0 as gn, aa as kn, ab as hn } from "./index-D-QngA_s.js";
 import { useQuery as He, useQueryClient as xe, useMutation as Oe } from "@tanstack/react-query";
 import { useRef as Le, useCallback as q } from "react";
 import { useWalletClient as Be, useAccount as De, useChainId as qe } from "wagmi";
@@ -146,7 +146,7 @@ function Ke(s) {
       (t) => t.contractAddress?.toLowerCase() === a?.toLowerCase() && t.chainId === r
     ), J = P?.find(
       (t) => t.contractAddress?.toLowerCase() === w?.toLowerCase() && t.chainId === h
-    ), { getChainRpcClient: _ } = await import("./index-B6r2LXCk.js").then((t) => t.aZ), Y = _(r), v = _(h), b = async (t, i) => {
+    ), { getChainRpcClient: _ } = await import("./index-D-QngA_s.js").then((t) => t.aZ), Y = _(r), v = _(h), b = async (t, i) => {
       try {
         const y = i === r ? Y : i === h ? v : _(i);
         return y ? t.toLowerCase() === p.toLowerCase() ? te(i)?.nativeCurrency.decimals ?? 18 : await y.readContract({

package/dist/prepareSend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prepareSend.d.ts","sourceRoot":"","sources":["../src/prepareSend.ts"],"names":[],"mappings":"AAmBA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EAKvB,MAAM,8BAA8B,CAAA;AAErC,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,GACX,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,WAAW,EACX,WAAW,GACZ,MAAM,8BAA8B,CAAA;AAErC,wBAAsB,WAAW,CAC/B,OAAO,EAAE,kBAAkB,GAC1B,OAAO,CAAC,iBAAiB,CAAC,CA+f5B;AAGD,YAAY,EACV,aAAa,EACb,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,GAClB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,OAAO,EACL,iBAAiB,EACjB,8BAA8B,EAC9B,wBAAwB,EACxB,2BAA2B,EAC3B,WAAW,EACX,4BAA4B,EAC5B,wBAAwB,EACxB,SAAS,GACV,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"prepareSend.d.ts","sourceRoot":"","sources":["../src/prepareSend.ts"],"names":[],"mappings":"AAmBA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EAKvB,MAAM,8BAA8B,CAAA;AAErC,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,GACX,MAAM,8BAA8B,CAAA;AAGrC,OAAO,EACL,WAAW,EACX,WAAW,GACZ,MAAM,8BAA8B,CAAA;AAErC,wBAAsB,WAAW,CAC/B,OAAO,EAAE,kBAAkB,GAC1B,OAAO,CAAC,iBAAiB,CAAC,CAkgB5B;AAGD,YAAY,EACV,aAAa,EACb,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,GAClB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,OAAO,EACL,iBAAiB,EACjB,8BAA8B,EAC9B,wBAAwB,EACxB,2BAA2B,EAC3B,WAAW,EACX,4BAA4B,EAC5B,wBAAwB,EACxB,SAAS,GACV,MAAM,8BAA8B,CAAA"}

package/dist/widget/components/OnrampProviderConfirmation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnrampProviderConfirmation.d.ts","sourceRoot":"","sources":["../../../src/widget/components/OnrampProviderConfirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAS5D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAuExD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,UAAU,+BAA+B;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAChC,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAClD,qBAAqB,CAAC,EAAE,CACtB,MAAM,EAAE,oBAAoB,KACzB,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,MAAM,CAAC,EACH,CAAC,CAAC,OAAO,CAAC,EAAE;QACV,iBAAiB,CAAC,EAAE,GAAG,GAAG,IAAI,CAAA;QAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;QACzB,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;KACrB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,GACnB,IAAI,CAAA;CACT;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,+BAA+B,CAo4BhC,CAAA;AAED,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"OnrampProviderConfirmation.d.ts","sourceRoot":"","sources":["../../../src/widget/components/OnrampProviderConfirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAS5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAuE7D,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,UAAU,+BAA+B;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAChC,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAClD,qBAAqB,CAAC,EAAE,CACtB,MAAM,EAAE,oBAAoB,KACzB,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,MAAM,CAAC,EACH,CAAC,CAAC,OAAO,CAAC,EAAE;QACV,iBAAiB,CAAC,EAAE,GAAG,GAAG,IAAI,CAAA;QAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;QACzB,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;KACrB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,GACnB,IAAI,CAAA;CACT;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,+BAA+B,CA24BhC,CAAA;AAED,eAAe,0BAA0B,CAAA"}

package/dist/widget/index.js

@@ -1,4 +1,4 @@
-import { aA as s, az as l, al as o, ay as e, ax as i, a as d, b as T } from "../index-B6r2LXCk.js";
+import { aA as s, az as l, al as o, ay as e, ax as i, a as d, b as T } from "../index-D-QngA_s.js";
 export {
   s as TrailsHookModal,
   l as TrailsModalProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "0xtrails",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "SDK for Trails",
   "type": "module",
   "main": "./dist/index.js",

package/src/prepareSend.ts

@@ -118,11 +118,14 @@ export async function prepareSend(
     }
   }
 
-  // Use slippage from options, or get from localStorage with config default fallback
-  // The config default (slippageToleranceFromOptions) comes from React component context
-  const slippageTolerance = getSlippageToleranceValue(
-    slippageToleranceFromOptions || "0.01",
-  )
+  // Use slippage tolerance priority:
+  // 1. If explicitly passed as prop → use that value
+  // 2. If not passed → check localStorage via getSlippageToleranceValue
+  // 3. If localStorage has no value → fallback to "0.01"
+  const slippageTolerance =
+    slippageToleranceFromOptions !== undefined
+      ? slippageToleranceFromOptions
+      : getSlippageToleranceValue("0.01")
 
   if (!sourceTokenDecimals) {
     throw new Error("Source token decimals not provided")

package/src/widget/components/OnrampProviderConfirmation.tsx

@@ -10,7 +10,7 @@ import { useDepositMonitor } from "../hooks/useDepositMonitor.js"
 import { logger } from "../../logger.js"
 import { TruncatedTransactionHash } from "./TruncatedTransactionHash.js"
 import { useAccount } from "wagmi"
-import { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 import { TokenImage } from "./TokenImage.js"
 
 // TokenDiagram component for displaying the token flow
@@ -714,95 +714,92 @@ export const OnrampProviderConfirmation: React.FC<
       }
 
       return (
-        <>
-          <div className={`mt-4 p-4 rounded-lg border ${colorClasses[color]}`}>
-            <div className="flex items-start space-x-3">
-              {/* Icon */}
-              <div className="flex-shrink-0 mt-0.5">
-                {color === "yellow" ||
-                color === "blue" ||
-                transaction.status?.toUpperCase() === "SETTLING" ? (
-                  <svg
-                    className={`w-5 h-5 ${iconColorClasses[color]} animate-spin`}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <title>Processing</title>
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                    />
-                  </svg>
-                ) : color === "green" ? (
-                  <svg
-                    className={`w-5 h-5 ${iconColorClasses[color]}`}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <title>Success</title>
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                ) : (
-                  <svg
-                    className={`w-5 h-5 ${iconColorClasses[color]}`}
-                    fill="none"
-                    viewBox="0 0 24 24"
+        <div className={`mt-4 p-4 rounded-lg border ${colorClasses[color]}`}>
+          <div className="flex items-start space-x-3">
+            {/* Icon */}
+            <div className="flex-shrink-0 mt-0.5">
+              {color === "yellow" ||
+              color === "blue" ||
+              transaction.status?.toUpperCase() === "SETTLING" ? (
+                <svg
+                  className={`w-5 h-5 ${iconColorClasses[color]} animate-spin`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <title>Processing</title>
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
                     stroke="currentColor"
-                  >
-                    <title>Error</title>
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                )}
-              </div>
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+              ) : color === "green" ? (
+                <svg
+                  className={`w-5 h-5 ${iconColorClasses[color]}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <title>Success</title>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  className={`w-5 h-5 ${iconColorClasses[color]}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <title>Error</title>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              )}
+            </div>
 
-              {/* Content */}
-              <div className="flex-1">
-                <p className={`text-sm font-medium ${textColorClasses[color]}`}>
-                  {getStatusMessage(transaction.status)}
-                </p>
+            {/* Content */}
+            <div className="flex-1 text-left">
+              <p className={`text-sm font-medium ${textColorClasses[color]}`}>
+                {getStatusMessage(transaction.status)}
+              </p>
+              <p
+                className={`text-xs mt-1 ${textColorClasses[color]} opacity-75`}
+              >
+                Status:{" "}
+                {transaction.status === "ERROR"
+                  ? "PROCESSING"
+                  : transaction.status?.toUpperCase()}
+              </p>
+              {(transaction.sourceAmount || transaction.destinationAmount) && (
                 <p
                   className={`text-xs mt-1 ${textColorClasses[color]} opacity-75`}
                 >
-                  Status:{" "}
-                  {transaction.status === "ERROR"
-                    ? "PROCESSING"
-                    : transaction.status?.toUpperCase()}
+                  Amount:{" "}
+                  {transaction.sourceAmount || transaction.destinationAmount}{" "}
+                  {transaction.sourceCurrencyCode ||
+                    transaction.destinationCurrencyCode}
                 </p>
-                {(transaction.sourceAmount ||
-                  transaction.destinationAmount) && (
-                  <p
-                    className={`text-xs mt-1 ${textColorClasses[color]} opacity-75`}
-                  >
-                    Amount:{" "}
-                    {transaction.sourceAmount || transaction.destinationAmount}{" "}
-                    {transaction.sourceCurrencyCode ||
-                      transaction.destinationCurrencyCode}
-                  </p>
-                )}
-              </div>
+              )}
             </div>
           </div>
-        </>
+        </div>
       )
     }
 
@@ -936,7 +933,7 @@ export const OnrampProviderConfirmation: React.FC<
 
             {/* Warning */}
             {!isCountingUp && (
-              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
                 Complete the payment within the time limit. We use USDC on Base
                 network as the intermediary token, please do not change it.
               </p>
@@ -947,7 +944,7 @@ export const OnrampProviderConfirmation: React.FC<
               tokenSize={20}
             />
             {isCountingUp && (
-              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
                 Your transaction is settling with payment provider. This usually
                 takes 1-5 minutes to complete.
               </p>
@@ -961,10 +958,20 @@ export const OnrampProviderConfirmation: React.FC<
 
             {/* Important Notice - Now at the bottom */}
             <div className="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
-              <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                ⚠️ Important: Do not close this window or navigate away while
-                your payment is processing.
-              </p>
+              <div className="flex items-start space-x-3">
+                {/* Icon */}
+                <div className="flex-shrink-0 mt-0.5">
+                  <span className="text-amber-600 dark:text-amber-400">⚠️</span>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 text-left">
+                  <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                    Important: Do not close this window or navigate away while
+                    your payment is processing.
+                  </p>
+                </div>
+              </div>
             </div>
           </div>