@volr/react-ui 0.2.7 → 0.3.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { KeyStorageType, VolrConfig, PayOptions as PayOptions$1, PaymentResult, PaymentHistoryOptions, PaymentHistoryResult } from '@volr/react';
+import { KeyStorageType, VolrConfig, PayOptions as PayOptions$1, PaymentResult, FiatCurrencyInfo, PaymentHistoryOptions, PaymentHistoryResult } from '@volr/react';
 export { EvmChainClient, EvmClient, EvmNamespace, KeyStorageType, OnSignRequest, PaymentHistoryOptions, PaymentHistoryResult, PaymentResult, PaymentStatus, PaymentToken, SendBatchOverloads, SignRequest, SignerType, UseVolrPaymentApiReturn, VolrClient, VolrConfig, VolrProvider, VolrUser, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin, useVolrPaymentApi } from '@volr/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -213,7 +213,30 @@ declare const en: {
             readonly later: "Do it later";
             readonly inProgress: "Setting up...";
             readonly success: "Passkey set up successfully!";
+            readonly successTitle: "Migration complete!";
+            readonly successMessage: "Your passkey is set up for this site.";
+            readonly waitingHint: "Complete the setup in the popup window.";
             readonly error: "Failed to set up passkey. Please try again.";
+            readonly source: {
+                readonly title: "Verify with existing passkey";
+                readonly description: "Verify your identity to move your wallet to {{targetDomain}}.";
+                readonly ready: "Ready to verify";
+                readonly authenticating: "Verifying...";
+                readonly decrypting: "Decrypting wallet data...";
+                readonly waiting: "Waiting for registration on the new site...";
+                readonly done: "Verification complete!";
+                readonly waitingHint: "Complete passkey registration in the new window.";
+            };
+            readonly target: {
+                readonly title: "Register a passkey for this site";
+                readonly description: "Register a passkey for secure login on {{currentDomain}}.";
+                readonly ready: "Ready to register";
+                readonly connecting: "Connecting to the original site...";
+                readonly registering: "Registering new passkey...";
+                readonly completing: "Finishing setup...";
+                readonly success: "Passkey registration complete!";
+                readonly closing: "Closing window...";
+            };
         };
     };
     readonly success: {
@@ -476,6 +499,40 @@ declare function useSwitchNetwork(): (chainId: number) => Promise<void>;
  */
 declare function getCurrentChainId(): Promise<number>;
 
+interface PreferredCurrencyContextValue {
+    /** Current preferred currency code */
+    currency: string;
+    /** Set preferred currency code */
+    setCurrency: (code: string) => void;
+    /** List of supported currencies from API */
+    supportedCurrencies: FiatCurrencyInfo[];
+    /** Loading state for currencies */
+    isLoading: boolean;
+    /** Format amount in preferred currency */
+    formatAmount: (amount: number) => string;
+    /** Format amount in specific currency */
+    formatInCurrency: (amount: number, currencyCode: string) => string;
+    /** Get currency info by code */
+    getCurrencyInfo: (code: string) => FiatCurrencyInfo | undefined;
+}
+interface PreferredCurrencyProviderProps {
+    children: React$1.ReactNode;
+    /** API base URL for fetching currencies */
+    apiUrl?: string;
+    /** Default currency if none stored */
+    defaultCurrency?: string;
+}
+declare function PreferredCurrencyProvider({ children, apiUrl, defaultCurrency, }: PreferredCurrencyProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access preferred currency context
+ * @throws Error if used outside PreferredCurrencyProvider
+ */
+declare function usePreferredCurrency(): PreferredCurrencyContextValue;
+/**
+ * Optional hook that returns null if outside provider
+ */
+declare function usePreferredCurrencyOptional(): PreferredCurrencyContextValue | null;
+
 /**
  * useVolrPay hook - Payment with UI integration
  *
@@ -575,4 +632,4 @@ interface UseVolrPayReturn {
 }
 declare function useVolrPay(): UseVolrPayReturn;
 
-export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkWalletConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type PayOptions, type PaymentError, type PaymentHandle, type PaymentHandlers, type PaymentItem, type Translations, type UseVolrPayReturn, type VolrTheme, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };
+export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkWalletConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type PayOptions, type PaymentError, type PaymentHandle, type PaymentHandlers, type PaymentItem, PreferredCurrencyProvider, type Translations, type UseVolrPayReturn, type VolrTheme, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, useI18n, usePreferredCurrency, usePreferredCurrencyOptional, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { KeyStorageType, VolrConfig, PayOptions as PayOptions$1, PaymentResult, PaymentHistoryOptions, PaymentHistoryResult } from '@volr/react';
+import { KeyStorageType, VolrConfig, PayOptions as PayOptions$1, PaymentResult, FiatCurrencyInfo, PaymentHistoryOptions, PaymentHistoryResult } from '@volr/react';
 export { EvmChainClient, EvmClient, EvmNamespace, KeyStorageType, OnSignRequest, PaymentHistoryOptions, PaymentHistoryResult, PaymentResult, PaymentStatus, PaymentToken, SendBatchOverloads, SignRequest, SignerType, UseVolrPaymentApiReturn, VolrClient, VolrConfig, VolrProvider, VolrUser, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin, useVolrPaymentApi } from '@volr/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -213,7 +213,30 @@ declare const en: {
             readonly later: "Do it later";
             readonly inProgress: "Setting up...";
             readonly success: "Passkey set up successfully!";
+            readonly successTitle: "Migration complete!";
+            readonly successMessage: "Your passkey is set up for this site.";
+            readonly waitingHint: "Complete the setup in the popup window.";
             readonly error: "Failed to set up passkey. Please try again.";
+            readonly source: {
+                readonly title: "Verify with existing passkey";
+                readonly description: "Verify your identity to move your wallet to {{targetDomain}}.";
+                readonly ready: "Ready to verify";
+                readonly authenticating: "Verifying...";
+                readonly decrypting: "Decrypting wallet data...";
+                readonly waiting: "Waiting for registration on the new site...";
+                readonly done: "Verification complete!";
+                readonly waitingHint: "Complete passkey registration in the new window.";
+            };
+            readonly target: {
+                readonly title: "Register a passkey for this site";
+                readonly description: "Register a passkey for secure login on {{currentDomain}}.";
+                readonly ready: "Ready to register";
+                readonly connecting: "Connecting to the original site...";
+                readonly registering: "Registering new passkey...";
+                readonly completing: "Finishing setup...";
+                readonly success: "Passkey registration complete!";
+                readonly closing: "Closing window...";
+            };
         };
     };
     readonly success: {
@@ -476,6 +499,40 @@ declare function useSwitchNetwork(): (chainId: number) => Promise<void>;
  */
 declare function getCurrentChainId(): Promise<number>;
 
+interface PreferredCurrencyContextValue {
+    /** Current preferred currency code */
+    currency: string;
+    /** Set preferred currency code */
+    setCurrency: (code: string) => void;
+    /** List of supported currencies from API */
+    supportedCurrencies: FiatCurrencyInfo[];
+    /** Loading state for currencies */
+    isLoading: boolean;
+    /** Format amount in preferred currency */
+    formatAmount: (amount: number) => string;
+    /** Format amount in specific currency */
+    formatInCurrency: (amount: number, currencyCode: string) => string;
+    /** Get currency info by code */
+    getCurrencyInfo: (code: string) => FiatCurrencyInfo | undefined;
+}
+interface PreferredCurrencyProviderProps {
+    children: React$1.ReactNode;
+    /** API base URL for fetching currencies */
+    apiUrl?: string;
+    /** Default currency if none stored */
+    defaultCurrency?: string;
+}
+declare function PreferredCurrencyProvider({ children, apiUrl, defaultCurrency, }: PreferredCurrencyProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access preferred currency context
+ * @throws Error if used outside PreferredCurrencyProvider
+ */
+declare function usePreferredCurrency(): PreferredCurrencyContextValue;
+/**
+ * Optional hook that returns null if outside provider
+ */
+declare function usePreferredCurrencyOptional(): PreferredCurrencyContextValue | null;
+
 /**
  * useVolrPay hook - Payment with UI integration
  *
@@ -575,4 +632,4 @@ interface UseVolrPayReturn {
 }
 declare function useVolrPay(): UseVolrPayReturn;
 
-export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkWalletConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type PayOptions, type PaymentError, type PaymentHandle, type PaymentHandlers, type PaymentItem, type Translations, type UseVolrPayReturn, type VolrTheme, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };
+export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkWalletConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type PayOptions, type PaymentError, type PaymentHandle, type PaymentHandlers, type PaymentItem, PreferredCurrencyProvider, type Translations, type UseVolrPayReturn, type VolrTheme, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, useI18n, usePreferredCurrency, usePreferredCurrencyOptional, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };

package/dist/index.js

@@ -1,6 +1,6 @@
-import React15, { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef, useId, useReducer } from 'react';
+import React16, { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef, useId, useReducer } from 'react';
 import { createPortal } from 'react-dom';
-import { useVolrContext, useInternalAuth, usePasskeyEnrollment, checkPrfCompatibility, getPlatformHint, useMpcConnection, VolrProvider, useVolrAuthCallback, useVolrPaymentApi, completeMigration, requestMigration, decryptEntropyForMigration, listenForSeedRequests, useUserBalances, useVolrLogin, useVolr, useEIP6963, useWithdraw, useDepositListener, createGetNetworkInfo } from '@volr/react';
+import { useVolrContext, useInternalAuth, usePasskeyEnrollment, checkPrfCompatibility, getPlatformHint, useMpcConnection, detectPreferredCurrency, formatCurrency, VolrProvider, useVolrAuthCallback, useVolrPaymentApi, completeMigration, requestMigration, decryptEntropyForMigration, listenForSeedRequests, useUserBalances, useVolrLogin, useVolr, useEIP6963, useWithdraw, useDepositListener, createGetNetworkInfo } from '@volr/react';
 export { VolrProvider, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin, useVolrPaymentApi } from '@volr/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
@@ -587,7 +587,32 @@ var en = {
       later: "Do it later",
       inProgress: "Setting up...",
       success: "Passkey set up successfully!",
-      error: "Failed to set up passkey. Please try again."
+      successTitle: "Migration complete!",
+      successMessage: "Your passkey is set up for this site.",
+      waitingHint: "Complete the setup in the popup window.",
+      error: "Failed to set up passkey. Please try again.",
+      // Source popup (domain-a.com)
+      source: {
+        title: "Verify with existing passkey",
+        description: "Verify your identity to move your wallet to {{targetDomain}}.",
+        ready: "Ready to verify",
+        authenticating: "Verifying...",
+        decrypting: "Decrypting wallet data...",
+        waiting: "Waiting for registration on the new site...",
+        done: "Verification complete!",
+        waitingHint: "Complete passkey registration in the new window."
+      },
+      // Target popup (domain-b.com)
+      target: {
+        title: "Register a passkey for this site",
+        description: "Register a passkey for secure login on {{currentDomain}}.",
+        ready: "Ready to register",
+        connecting: "Connecting to the original site...",
+        registering: "Registering new passkey...",
+        completing: "Finishing setup...",
+        success: "Passkey registration complete!",
+        closing: "Closing window..."
+      }
     }
   },
   success: {
@@ -1941,7 +1966,7 @@ var variantMap = {
   ghost: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "none" },
   outline: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "1px solid var(--volr-border)" }
 };
-var Button = React15.forwardRef(
+var Button = React16.forwardRef(
   ({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
     const { accentColor } = useVolrUI();
     const sizeStyle = sizeMap[size];
@@ -3785,7 +3810,7 @@ function AssetSelectView({
     }) })
   ] });
 }
-var TextLinkButton = React15.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
+var TextLinkButton = React16.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -4853,6 +4878,111 @@ function DepositModalBody({
     }
   );
 }
+var STORAGE_KEY = "volr:preferred-currency";
+var PreferredCurrencyContext = createContext(null);
+function PreferredCurrencyProvider({
+  children,
+  apiUrl,
+  defaultCurrency
+}) {
+  const [currency, setCurrencyState] = useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) return stored;
+    }
+    return defaultCurrency || detectPreferredCurrency();
+  });
+  const [supportedCurrencies, setSupportedCurrencies] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchCurrencies = async () => {
+      if (!apiUrl) {
+        setSupportedCurrencies([
+          { code: "USD", symbol: "$", name: "US Dollar", decimalPlaces: 2 },
+          { code: "KRW", symbol: "\u20A9", name: "Korean Won", decimalPlaces: 0 },
+          { code: "EUR", symbol: "\u20AC", name: "Euro", decimalPlaces: 2 }
+        ]);
+        setIsLoading(false);
+        return;
+      }
+      try {
+        const response = await fetch(`${apiUrl}/public/fiat-currencies`);
+        if (!response.ok) throw new Error("Failed to fetch currencies");
+        const data = await response.json();
+        if (data.ok && Array.isArray(data.data)) {
+          setSupportedCurrencies(data.data);
+          const currentSupported = data.data.some(
+            (c) => c.code === currency
+          );
+          if (!currentSupported && data.data.length > 0) {
+            const detected = detectPreferredCurrency();
+            const detectedSupported = data.data.find(
+              (c) => c.code === detected
+            );
+            setCurrencyState(detectedSupported?.code || data.data[0].code);
+          }
+        }
+      } catch (error) {
+        console.warn("[PreferredCurrencyProvider] Failed to fetch currencies:", error);
+        setSupportedCurrencies([
+          { code: "USD", symbol: "$", name: "US Dollar", decimalPlaces: 2 },
+          { code: "KRW", symbol: "\u20A9", name: "Korean Won", decimalPlaces: 0 },
+          { code: "EUR", symbol: "\u20AC", name: "Euro", decimalPlaces: 2 }
+        ]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCurrencies();
+  }, [apiUrl, currency]);
+  const setCurrency = useCallback((code) => {
+    const normalizedCode = code.toUpperCase();
+    setCurrencyState(normalizedCode);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEY, normalizedCode);
+    }
+  }, []);
+  const formatAmount = useCallback(
+    (amount) => {
+      return formatCurrency(amount, currency);
+    },
+    [currency]
+  );
+  const formatInCurrency = useCallback((amount, currencyCode) => {
+    return formatCurrency(amount, currencyCode);
+  }, []);
+  const getCurrencyInfo = useCallback(
+    (code) => {
+      return supportedCurrencies.find((c) => c.code === code.toUpperCase());
+    },
+    [supportedCurrencies]
+  );
+  return /* @__PURE__ */ jsx(
+    PreferredCurrencyContext.Provider,
+    {
+      value: {
+        currency,
+        setCurrency,
+        supportedCurrencies,
+        isLoading,
+        formatAmount,
+        formatInCurrency,
+        getCurrencyInfo
+      },
+      children
+    }
+  );
+}
+function usePreferredCurrency() {
+  const context = useContext(PreferredCurrencyContext);
+  if (!context) {
+    throw new Error("usePreferredCurrency must be used within PreferredCurrencyProvider");
+  }
+  return context;
+}
+function usePreferredCurrencyOptional() {
+  return useContext(PreferredCurrencyContext);
+}
 function DepositIcon() {
   return /* @__PURE__ */ jsx("svg", { className: "volr:w-5 volr:h-5 volr:text-slate-800", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
@@ -4908,12 +5038,8 @@ function AccountMainView({
   isRefreshing
 }) {
   const { t } = useI18n();
-  const formattedUsd = isLoading ? "\u2014" : totalUsd.toLocaleString("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  });
+  const currencyCtx = usePreferredCurrencyOptional();
+  const formattedUsd = isLoading ? "\u2014" : currencyCtx ? currencyCtx.formatAmount(totalUsd) : formatCurrency(totalUsd, "USD");
   const lastUpdatedLabel = lastUpdatedAt ? lastUpdatedAt.toLocaleTimeString(void 0, {
     hour: "2-digit",
     minute: "2-digit"
@@ -5006,6 +5132,8 @@ function AccountMainView({
   ] });
 }
 function TokenRow({ token }) {
+  const currencyCtx = usePreferredCurrencyOptional();
+  const formattedBalanceUsd = token.balanceUsd !== void 0 && token.balanceUsd > 0 ? currencyCtx ? currencyCtx.formatAmount(token.balanceUsd) : formatCurrency(token.balanceUsd, "USD") : null;
   return /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:justify-between volr:py-3 volr:border-b volr:border-slate-100 last:volr:border-b-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "volr:w-8 volr:h-8 volr:rounded-full volr:bg-slate-100 volr:flex volr:items-center volr:justify-center volr:overflow-hidden volr:shrink-0", children: token.iconUrl ? /* @__PURE__ */ jsx(
@@ -5026,10 +5154,7 @@ function TokenRow({ token }) {
     ] }),
     /* @__PURE__ */ jsx("div", { className: "volr:text-right", children: token.isLoading ? /* @__PURE__ */ jsx("div", { className: "volr:animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "volr:h-4 volr:w-16 volr:bg-slate-200 volr:rounded" }) }) : token.error ? /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-red-500", children: "Error" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:font-medium volr:text-slate-900", children: token.balance }),
-      token.balanceUsd !== void 0 && token.balanceUsd > 0 && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
-        "$",
-        token.balanceUsd.toFixed(2)
-      ] })
+      formattedBalanceUsd && /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedBalanceUsd })
     ] }) })
   ] });
 }
@@ -5056,7 +5181,7 @@ function BalanceDetailView({
     /* @__PURE__ */ jsx("div", { children: balances.map((token) => /* @__PURE__ */ jsx(TokenRow, { token }, token.id)) })
   ] });
 }
-var Input = React15.forwardRef(
+var Input = React16.forwardRef(
   ({ leftIcon, error, className, style, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "volr:relative", children: [
       leftIcon && /* @__PURE__ */ jsx("div", { className: "volr:absolute volr:left-3 volr:top-1/2 volr:-translate-y-1/2 volr:pointer-events-none volr-text-muted", children: leftIcon }),
@@ -5444,6 +5569,7 @@ function ChevronRightIcon({ className }) {
 }
 function PaymentRow({ payment, onClick }) {
   const { t } = useI18n();
+  const currencyCtx = usePreferredCurrencyOptional();
   const date = new Date(payment.createdAt);
   const formattedDate = date.toLocaleDateString(void 0, {
     month: "short",
@@ -5458,6 +5584,7 @@ function PaymentRow({ payment, onClick }) {
     CANCELLED: "volr:bg-slate-100 volr:text-slate-500",
     EXPIRED: "volr:bg-slate-100 volr:text-slate-500"
   };
+  const formattedUsd = payment.totalUsd ? currencyCtx ? currencyCtx.formatAmount(parseFloat(payment.totalUsd)) : formatCurrency(parseFloat(payment.totalUsd), "USD") : null;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -5485,10 +5612,7 @@ function PaymentRow({ payment, onClick }) {
               " ",
               payment.token.symbol
             ] }),
-            payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400", children: [
-              "$",
-              parseFloat(payment.totalUsd).toFixed(2)
-            ] })
+            formattedUsd && /* @__PURE__ */ jsx("p", { className: "volr:text-xs volr:text-slate-400", children: formattedUsd })
           ] }),
           /* @__PURE__ */ jsx(ChevronRightIcon, { className: "volr:w-4 volr:h-4 volr:text-slate-300" })
         ] })
@@ -5558,6 +5682,8 @@ function DetailRow({ label, value, copyable, mono, copyText }) {
 }
 function PaymentDetailView({ payment }) {
   const { t } = useI18n();
+  const currencyCtx = usePreferredCurrencyOptional();
+  const formattedUsd = payment.totalUsd ? currencyCtx ? currencyCtx.formatAmount(parseFloat(payment.totalUsd)) : formatCurrency(parseFloat(payment.totalUsd), "USD") : null;
   const createdDate = new Date(payment.createdAt);
   const formattedCreatedAt = createdDate.toLocaleString(void 0, {
     year: "numeric",
@@ -5606,10 +5732,9 @@ function PaymentDetailView({ payment }) {
         " ",
         payment.token.symbol
       ] }),
-      payment.totalUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
-        "\u2248 $",
-        parseFloat(payment.totalUsd).toFixed(2),
-        " USD"
+      formattedUsd && /* @__PURE__ */ jsxs("p", { className: "volr:text-sm volr:text-slate-500", children: [
+        "\u2248 ",
+        formattedUsd
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "volr:space-y-1", children: [
@@ -7185,9 +7310,11 @@ var PaymentResultView = ({
   onReport
 }) => {
   const { t } = useI18n();
+  const currencyCtx = usePreferredCurrencyOptional();
   const isSuccess = payment.status === "CONFIRMED";
   payment.status === "FAILED" || !!error;
   const isInAppBrowserError = error?.code === "INAPP_BROWSER_NOT_SUPPORTED";
+  const formattedUsd = payment.totalUsd ? currencyCtx ? currencyCtx.formatAmount(parseFloat(payment.totalUsd)) : formatCurrency(parseFloat(payment.totalUsd), "USD") : null;
   const handleOpenExternalBrowser = () => {
     if (typeof window === "undefined") return;
     window.open(window.location.href, "_system");
@@ -7241,12 +7368,9 @@ var PaymentResultView = ({
           payment.token.symbol
         ] })
       ] }),
-      payment.totalUsd && /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
+      formattedUsd && /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
         /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("payment.result.usdValueLabel") }),
-        /* @__PURE__ */ jsxs("span", { className: "volr:text-slate-600", children: [
-          "$",
-          parseFloat(payment.totalUsd).toFixed(2)
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "volr:text-slate-600", children: formattedUsd })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
         /* @__PURE__ */ jsx("span", { className: "volr:text-slate-500", children: t("payment.result.transactionLabel") }),
@@ -7463,8 +7587,8 @@ var PaymentModal = ({
   const resolvedPermitType = selectedToken?.permitType ?? (selectedToken?.permitSupported ? "EIP2612" : "NONE");
   const externalWalletTokenSupported = selectedToken && selectedToken.address !== "native" && resolvedPermitType === "EIP2612";
   const showExternalWalletOption = externalWalletAllowed && externalWalletTokenSupported;
-  const permit2WarnedRef = React15.useRef(false);
-  React15.useEffect(() => {
+  const permit2WarnedRef = React16.useRef(false);
+  React16.useEffect(() => {
     if (!permit2WarnedRef.current && externalWalletAllowed && resolvedPermitType === "PERMIT2" && !selectedToken?.permit2Address) {
       console.warn(
         `[volr/react-ui] External wallet payment hidden: permit2Address is not configured for chain ${selectedToken?.chainId}.`
@@ -7946,7 +8070,7 @@ function WalletRequiredModal() {
     }
   );
 }
-var VolrUIContext = React15.createContext(null);
+var VolrUIContext = React16.createContext(null);
 function getCurrentRpId() {
   if (typeof window === "undefined") return "localhost";
   return window.location.hostname;
@@ -8574,8 +8698,8 @@ function OnboardingChecker({
 }) {
   const { user, provider, isLoading } = useVolrContext();
   const { isOpen: isModalOpen } = useVolrModal();
-  const modalWasOpened = React15.useRef(false);
-  const pendingMismatchOnboarding = React15.useRef(false);
+  const modalWasOpened = React16.useRef(false);
+  const pendingMismatchOnboarding = React16.useRef(false);
   useEffect(() => {
     if (isModalOpen) {
       modalWasOpened.current = true;
@@ -8773,6 +8897,6 @@ function useVolrPay() {
   };
 }
 
-export { I18nContext, I18nProvider, MpcConnectView, PasskeyEnrollView, VolrUIProvider, getCurrentChainId, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };
+export { I18nContext, I18nProvider, MpcConnectView, PasskeyEnrollView, PreferredCurrencyProvider, VolrUIProvider, getCurrentChainId, useI18n, usePreferredCurrency, usePreferredCurrencyOptional, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map