@unifold/ui-react 0.1.34 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,5 +1,12 @@
1
1
  // src/components/deposits/DepositModal.tsx
2
- import { useState as useState26, useEffect as useEffect20, useCallback as useCallback3 } from "react";
2
+ import {
3
+ useState as useState26,
4
+ useEffect as useEffect20,
5
+ useLayoutEffect as useLayoutEffect2,
6
+ useCallback as useCallback3,
7
+ useRef as useRef5,
8
+ useMemo as useMemo8
9
+ } from "react";
3
10
  import { ChevronRight as ChevronRight11, MapPinOff, AlertTriangle } from "lucide-react";
4
11
 
5
12
  // src/components/shared/dialog.tsx
@@ -1131,24 +1138,34 @@ function CurrencyModal({
1131
1138
  onClose: handleClose
1132
1139
  }
1133
1140
  ),
1134
- /* @__PURE__ */ jsx6("div", { className: "", children: /* @__PURE__ */ jsx6("div", { className: "uf-relative", children: /* @__PURE__ */ jsx6(
1135
- "input",
1136
- {
1137
- type: "text",
1138
- value: searchQuery,
1139
- onChange: (e) => setSearchQuery(e.target.value),
1140
- placeholder: "Search",
1141
- className: "uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
1142
- style: {
1143
- backgroundColor: components.search.backgroundColor,
1144
- color: components.search.inputColor,
1145
- fontFamily: fonts.regular,
1146
- borderRadius: components.input.borderRadius,
1147
- border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
1141
+ /* @__PURE__ */ jsxs5("div", { className: "uf-pb-2", children: [
1142
+ /* @__PURE__ */ jsx6(
1143
+ "style",
1144
+ {
1145
+ dangerouslySetInnerHTML: {
1146
+ __html: `.uf-currency-modal-search::placeholder { color: ${components.search.placeholderColor}; }`
1147
+ }
1148
1148
  }
1149
- }
1150
- ) }) }),
1151
- /* @__PURE__ */ jsx6("div", { className: "uf-flex-1 sm:uf-flex-none uf-overflow-y-auto uf-pb-6 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden sm:uf-min-h-[200px] sm:uf-max-h-[400px]", children: /* @__PURE__ */ jsxs5("div", { className: "uf-space-y-2", children: [
1149
+ ),
1150
+ /* @__PURE__ */ jsx6("div", { className: "uf-relative", children: /* @__PURE__ */ jsx6(
1151
+ "input",
1152
+ {
1153
+ type: "text",
1154
+ value: searchQuery,
1155
+ onChange: (e) => setSearchQuery(e.target.value),
1156
+ placeholder: "Search",
1157
+ className: "uf-currency-modal-search uf-w-full uf-p-4 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
1158
+ style: {
1159
+ backgroundColor: components.search.backgroundColor,
1160
+ color: components.search.inputColor,
1161
+ fontFamily: fonts.regular,
1162
+ borderRadius: components.input.borderRadius,
1163
+ border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
1164
+ }
1165
+ }
1166
+ ) })
1167
+ ] }),
1168
+ /* @__PURE__ */ jsx6("div", { className: "uf-flex-1 sm:uf-flex-none uf-overflow-y-auto uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden sm:uf-min-h-[200px] sm:uf-max-h-[400px]", children: /* @__PURE__ */ jsxs5("div", { className: "uf-space-y-2", children: [
1152
1169
  /* @__PURE__ */ jsx6(
1153
1170
  CurrencyListSection,
1154
1171
  {
@@ -1708,188 +1725,153 @@ function DepositDetailContent({ execution }) {
1708
1725
  className: "uf-overflow-hidden uf-mb-3",
1709
1726
  style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` },
1710
1727
  children: [
1711
- /* @__PURE__ */ jsxs6(
1712
- "div",
1713
- {
1714
- className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
1715
- style: { borderColor: colors2.border },
1716
- children: [
1717
- /* @__PURE__ */ jsx7(
1718
- "span",
1719
- {
1720
- className: "uf-text-sm",
1721
- style: {
1722
- color: components.card.labelColor,
1723
- fontFamily: fonts.regular
1724
- },
1725
- children: "Amount Sent"
1726
- }
1727
- ),
1728
- /* @__PURE__ */ jsxs6(
1729
- "span",
1730
- {
1731
- style: {
1732
- color: components.card.titleColor,
1733
- fontFamily: fonts.regular,
1734
- fontSize: "14px"
1735
- },
1736
- children: [
1737
- formatAmount(
1738
- execution.source_amount_base_unit,
1739
- execution.source_token_metadata?.decimals
1740
- ),
1741
- " ",
1742
- formatCurrency(execution.source_currency)
1743
- ]
1744
- }
1745
- )
1746
- ]
1747
- }
1748
- ),
1749
- /* @__PURE__ */ jsxs6(
1750
- "div",
1751
- {
1752
- className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
1753
- style: { borderColor: colors2.border },
1754
- children: [
1755
- /* @__PURE__ */ jsx7(
1756
- "span",
1757
- {
1758
- className: "uf-text-sm",
1759
- style: {
1760
- color: components.card.labelColor,
1761
- fontFamily: fonts.regular
1762
- },
1763
- children: "Amount Received"
1764
- }
1765
- ),
1766
- /* @__PURE__ */ jsxs6(
1767
- "span",
1768
- {
1769
- style: {
1770
- color: components.card.titleColor,
1771
- fontFamily: fonts.regular,
1772
- fontSize: "14px"
1773
- },
1774
- children: [
1775
- formatAmount(
1776
- execution.destination_amount_base_unit,
1777
- execution.destination_token_metadata?.decimals
1778
- ),
1779
- " ",
1780
- formatCurrency(execution.destination_currency)
1781
- ]
1782
- }
1783
- )
1784
- ]
1785
- }
1786
- ),
1787
- /* @__PURE__ */ jsxs6(
1788
- "div",
1789
- {
1790
- className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
1791
- style: { borderColor: colors2.border },
1792
- children: [
1793
- /* @__PURE__ */ jsx7(
1794
- "span",
1795
- {
1796
- className: "uf-text-sm",
1797
- style: {
1798
- color: components.card.labelColor,
1799
- fontFamily: fonts.regular
1800
- },
1801
- children: "USD Value"
1802
- }
1803
- ),
1804
- /* @__PURE__ */ jsx7(
1805
- "span",
1806
- {
1807
- style: {
1808
- color: components.card.titleColor,
1809
- fontFamily: fonts.regular,
1810
- fontSize: "14px"
1811
- },
1812
- children: formatUsdAmount2(
1813
- execution.source_amount_usd,
1814
- execution.source_amount_base_unit
1815
- )
1816
- }
1817
- )
1818
- ]
1819
- }
1820
- ),
1821
- isPending && /* @__PURE__ */ jsxs6(
1822
- "div",
1823
- {
1824
- className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
1825
- style: { borderColor: colors2.border },
1826
- children: [
1827
- /* @__PURE__ */ jsx7(
1828
- "span",
1829
- {
1830
- className: "uf-text-sm",
1831
- style: {
1832
- color: components.card.labelColor,
1833
- fontFamily: fonts.regular
1834
- },
1835
- children: "Estimated delivery time"
1836
- }
1837
- ),
1838
- /* @__PURE__ */ jsx7(
1839
- "span",
1840
- {
1841
- style: {
1842
- color: components.card.titleColor,
1843
- fontFamily: fonts.regular,
1844
- fontSize: "14px"
1845
- },
1846
- children: formatEstimatedTime(execution?.estimated_processing_time)
1847
- }
1728
+ /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1729
+ /* @__PURE__ */ jsx7(
1730
+ "span",
1731
+ {
1732
+ className: "uf-text-sm",
1733
+ style: {
1734
+ color: components.card.rowLeftLabel,
1735
+ fontFamily: fonts.regular
1736
+ },
1737
+ children: "Amount Sent"
1738
+ }
1739
+ ),
1740
+ /* @__PURE__ */ jsxs6(
1741
+ "span",
1742
+ {
1743
+ style: {
1744
+ color: components.card.rowRightLabel,
1745
+ fontFamily: fonts.regular,
1746
+ fontSize: "14px"
1747
+ },
1748
+ children: [
1749
+ formatAmount(
1750
+ execution.source_amount_base_unit,
1751
+ execution.source_token_metadata?.decimals
1752
+ ),
1753
+ " ",
1754
+ formatCurrency(execution.source_currency)
1755
+ ]
1756
+ }
1757
+ )
1758
+ ] }),
1759
+ /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1760
+ /* @__PURE__ */ jsx7(
1761
+ "span",
1762
+ {
1763
+ className: "uf-text-sm",
1764
+ style: {
1765
+ color: components.card.rowLeftLabel,
1766
+ fontFamily: fonts.regular
1767
+ },
1768
+ children: "Amount Received"
1769
+ }
1770
+ ),
1771
+ /* @__PURE__ */ jsxs6(
1772
+ "span",
1773
+ {
1774
+ style: {
1775
+ color: components.card.rowRightLabel,
1776
+ fontFamily: fonts.regular,
1777
+ fontSize: "14px"
1778
+ },
1779
+ children: [
1780
+ formatAmount(
1781
+ execution.destination_amount_base_unit,
1782
+ execution.destination_token_metadata?.decimals
1783
+ ),
1784
+ " ",
1785
+ formatCurrency(execution.destination_currency)
1786
+ ]
1787
+ }
1788
+ )
1789
+ ] }),
1790
+ /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1791
+ /* @__PURE__ */ jsx7(
1792
+ "span",
1793
+ {
1794
+ className: "uf-text-sm",
1795
+ style: {
1796
+ color: components.card.rowLeftLabel,
1797
+ fontFamily: fonts.regular
1798
+ },
1799
+ children: "USD Value"
1800
+ }
1801
+ ),
1802
+ /* @__PURE__ */ jsx7(
1803
+ "span",
1804
+ {
1805
+ style: {
1806
+ color: components.card.rowRightLabel,
1807
+ fontFamily: fonts.regular,
1808
+ fontSize: "14px"
1809
+ },
1810
+ children: formatUsdAmount2(
1811
+ execution.source_amount_usd,
1812
+ execution.source_amount_base_unit
1848
1813
  )
1849
- ]
1850
- }
1851
- ),
1852
- /* @__PURE__ */ jsxs6(
1853
- "div",
1854
- {
1855
- className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
1856
- style: { borderColor: colors2.border },
1857
- children: [
1858
- /* @__PURE__ */ jsx7(
1859
- "span",
1860
- {
1861
- className: "uf-text-sm",
1862
- style: {
1863
- color: components.card.labelColor,
1864
- fontFamily: fonts.regular
1865
- },
1866
- children: "Source Network"
1867
- }
1868
- ),
1869
- /* @__PURE__ */ jsx7(
1870
- "span",
1871
- {
1872
- style: {
1873
- color: components.card.titleColor,
1874
- fontFamily: fonts.regular,
1875
- fontSize: "14px"
1876
- },
1877
- children: getNetworkName(
1878
- execution.source_chain_type,
1879
- execution.source_chain_id
1880
- )
1881
- }
1814
+ }
1815
+ )
1816
+ ] }),
1817
+ isPending && /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1818
+ /* @__PURE__ */ jsx7(
1819
+ "span",
1820
+ {
1821
+ className: "uf-text-sm",
1822
+ style: {
1823
+ color: components.card.rowLeftLabel,
1824
+ fontFamily: fonts.regular
1825
+ },
1826
+ children: "Estimated delivery time"
1827
+ }
1828
+ ),
1829
+ /* @__PURE__ */ jsx7(
1830
+ "span",
1831
+ {
1832
+ style: {
1833
+ color: components.card.rowRightLabel,
1834
+ fontFamily: fonts.regular,
1835
+ fontSize: "14px"
1836
+ },
1837
+ children: formatEstimatedTime(execution?.estimated_processing_time)
1838
+ }
1839
+ )
1840
+ ] }),
1841
+ /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1842
+ /* @__PURE__ */ jsx7(
1843
+ "span",
1844
+ {
1845
+ className: "uf-text-sm",
1846
+ style: {
1847
+ color: components.card.rowLeftLabel,
1848
+ fontFamily: fonts.regular
1849
+ },
1850
+ children: "Source Network"
1851
+ }
1852
+ ),
1853
+ /* @__PURE__ */ jsx7(
1854
+ "span",
1855
+ {
1856
+ style: {
1857
+ color: components.card.rowRightLabel,
1858
+ fontFamily: fonts.regular,
1859
+ fontSize: "14px"
1860
+ },
1861
+ children: getNetworkName(
1862
+ execution.source_chain_type,
1863
+ execution.source_chain_id
1882
1864
  )
1883
- ]
1884
- }
1885
- ),
1865
+ }
1866
+ )
1867
+ ] }),
1886
1868
  /* @__PURE__ */ jsxs6("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
1887
1869
  /* @__PURE__ */ jsx7(
1888
1870
  "span",
1889
1871
  {
1890
1872
  className: "uf-text-sm",
1891
1873
  style: {
1892
- color: components.card.labelColor,
1874
+ color: components.card.rowLeftLabel,
1893
1875
  fontFamily: fonts.regular
1894
1876
  },
1895
1877
  children: "Destination Network"
@@ -1899,7 +1881,7 @@ function DepositDetailContent({ execution }) {
1899
1881
  "span",
1900
1882
  {
1901
1883
  style: {
1902
- color: components.card.titleColor,
1884
+ color: components.card.rowRightLabel,
1903
1885
  fontFamily: fonts.regular,
1904
1886
  fontSize: "14px"
1905
1887
  },
@@ -1941,15 +1923,14 @@ function DepositDetailContent({ execution }) {
1941
1923
  href: execution.explorer_url,
1942
1924
  target: "_blank",
1943
1925
  rel: "noopener noreferrer",
1944
- className: "uf-grid uf-grid-cols-[auto_1fr_auto] uf-items-center uf-gap-2 uf-px-4 uf-py-3 uf-border-b hover:uf-bg-card/50 uf-transition-colors",
1945
- style: { borderColor: colors2.border },
1926
+ className: "uf-grid uf-grid-cols-[auto_1fr_auto] uf-items-center uf-gap-2 uf-px-4 uf-py-3 hover:uf-bg-card/50 uf-transition-colors",
1946
1927
  children: [
1947
1928
  /* @__PURE__ */ jsx7(
1948
1929
  "div",
1949
1930
  {
1950
1931
  className: "uf-text-sm",
1951
1932
  style: {
1952
- color: components.card.labelColor,
1933
+ color: components.card.rowLeftLabel,
1953
1934
  fontFamily: fonts.regular
1954
1935
  },
1955
1936
  children: "Deposit Tx"
@@ -1960,7 +1941,7 @@ function DepositDetailContent({ execution }) {
1960
1941
  {
1961
1942
  className: "uf-text-sm uf-text-right",
1962
1943
  style: {
1963
- color: components.card.titleColor,
1944
+ color: components.card.rowRightLabel,
1964
1945
  fontFamily: fonts.regular
1965
1946
  },
1966
1947
  children: formatTransactionHash(execution.transaction_hash)
@@ -1970,7 +1951,7 @@ function DepositDetailContent({ execution }) {
1970
1951
  ExternalLink,
1971
1952
  {
1972
1953
  className: "uf-w-3.5 uf-h-3.5 uf-block",
1973
- style: { color: components.card.actionColor }
1954
+ style: { color: components.card.actionIcon }
1974
1955
  }
1975
1956
  )
1976
1957
  ]
@@ -1989,7 +1970,7 @@ function DepositDetailContent({ execution }) {
1989
1970
  {
1990
1971
  className: "uf-text-sm",
1991
1972
  style: {
1992
- color: components.card.labelColor,
1973
+ color: components.card.rowLeftLabel,
1993
1974
  fontFamily: fonts.regular
1994
1975
  },
1995
1976
  children: "Completion Tx"
@@ -2000,7 +1981,7 @@ function DepositDetailContent({ execution }) {
2000
1981
  {
2001
1982
  className: "uf-text-sm uf-text-right",
2002
1983
  style: {
2003
- color: components.card.titleColor,
1984
+ color: components.card.rowRightLabel,
2004
1985
  fontFamily: fonts.regular
2005
1986
  },
2006
1987
  children: formatTransactionHash(
@@ -2012,7 +1993,7 @@ function DepositDetailContent({ execution }) {
2012
1993
  ExternalLink,
2013
1994
  {
2014
1995
  className: "uf-w-3.5 uf-h-3.5 uf-block",
2015
- style: { color: components.card.actionColor }
1996
+ style: { color: components.card.actionIcon }
2016
1997
  }
2017
1998
  )
2018
1999
  ]
@@ -2780,25 +2761,28 @@ function BuyWithCard({
2780
2761
  }
2781
2762
  }
2782
2763
  ) }) }),
2783
- selectedCurrencyData?.suggested_amounts && selectedCurrencyData.suggested_amounts.length > 0 && /* @__PURE__ */ jsx10("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: selectedCurrencyData.suggested_amounts.map((quickAmount) => /* @__PURE__ */ jsxs8(
2784
- "button",
2785
- {
2786
- onClick: () => handleQuickAmount(quickAmount),
2787
- className: "uf-w-24 uf-py-2 hover:uf-bg-accent uf-transition-colors uf-text-sm uf-font-medium",
2788
- style: {
2789
- backgroundColor: components.card.backgroundColor,
2790
- color: components.card.titleColor,
2791
- fontFamily: fonts.medium,
2792
- borderRadius: components.card.borderRadius,
2793
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
2764
+ selectedCurrencyData?.suggested_amounts && selectedCurrencyData.suggested_amounts.length > 0 && /* @__PURE__ */ jsx10("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: selectedCurrencyData.suggested_amounts.map((quickAmount) => {
2765
+ const isSelected = parseFloat(amount) === quickAmount;
2766
+ return /* @__PURE__ */ jsxs8(
2767
+ "button",
2768
+ {
2769
+ onClick: () => handleQuickAmount(quickAmount),
2770
+ className: "uf-w-24 uf-py-2 hover:uf-bg-accent uf-transition-colors uf-text-sm uf-font-medium",
2771
+ style: {
2772
+ backgroundColor: components.card.backgroundColor,
2773
+ color: components.card.titleColor,
2774
+ fontFamily: fonts.medium,
2775
+ borderRadius: components.card.borderRadius,
2776
+ border: `${components.card.borderWidth}px solid ${isSelected ? colors2.primary : components.card.borderColor}`
2777
+ },
2778
+ children: [
2779
+ getCurrencySymbol(currency),
2780
+ quickAmount.toLocaleString()
2781
+ ]
2794
2782
  },
2795
- children: [
2796
- getCurrencySymbol(currency),
2797
- quickAmount.toLocaleString()
2798
- ]
2799
- },
2800
- quickAmount
2801
- )) }),
2783
+ quickAmount
2784
+ );
2785
+ }) }),
2802
2786
  amountValidationError && /* @__PURE__ */ jsx10(
2803
2787
  "div",
2804
2788
  {
@@ -2817,7 +2801,7 @@ function BuyWithCard({
2817
2801
  "span",
2818
2802
  {
2819
2803
  style: {
2820
- color: components.card.headerColor,
2804
+ color: components.card.labelColor,
2821
2805
  fontFamily: fonts.medium
2822
2806
  },
2823
2807
  children: "Provider"
@@ -2876,7 +2860,7 @@ function BuyWithCard({
2876
2860
  {
2877
2861
  className: "uf-text-xs uf-font-normal uf-mb-2",
2878
2862
  style: {
2879
- color: components.card.labelColor,
2863
+ color: components.card.headerColor,
2880
2864
  fontFamily: fonts.regular
2881
2865
  },
2882
2866
  children: "Auto-picked for you"
@@ -2991,8 +2975,8 @@ function BuyWithCard({
2991
2975
  /* @__PURE__ */ jsx10(
2992
2976
  "div",
2993
2977
  {
2994
- className: `uf-transition-all uf-duration-300 uf-min-h-[420px] ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
2995
- children: /* @__PURE__ */ jsx10("div", { className: "uf-space-y-2 uf-pt-2", children: sortedQuotes.map((quote, index) => {
2978
+ className: `uf-transition-all uf-duration-300 uf-min-h-[420px] uf-flex uf-flex-col ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
2979
+ children: /* @__PURE__ */ jsx10("div", { className: "uf-space-y-2 uf-pt-2 uf-pb-8 uf-overflow-y-auto uf-flex-1 uf-min-h-0", children: sortedQuotes.map((quote, index) => {
2996
2980
  const badges = getProviderBadges(quote, sortedQuotes);
2997
2981
  const displayName = quote.service_provider_display_name;
2998
2982
  const isSelected = selectedProvider?.service_provider === quote.service_provider;
@@ -3009,11 +2993,11 @@ function BuyWithCard({
3009
2993
  },
3010
2994
  onMouseEnter: () => setHoveredProviderIndex(index),
3011
2995
  onMouseLeave: () => setHoveredProviderIndex(null),
3012
- className: `uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between uf-group ${isSelected ? "uf-ring-2 uf-ring-inset uf-ring-primary" : ""}`,
2996
+ className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
3013
2997
  style: {
3014
2998
  backgroundColor: hoveredProviderIndex === index ? colors2.cardHover : components.card.backgroundColor,
3015
2999
  borderRadius: components.card.borderRadius,
3016
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
3000
+ border: isSelected ? `2px solid ${colors2.primary}` : `${components.card.borderWidth}px solid ${components.card.borderColor}`
3017
3001
  },
3018
3002
  children: [
3019
3003
  /* @__PURE__ */ jsxs8("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
@@ -3040,7 +3024,8 @@ function BuyWithCard({
3040
3024
  badges.map((badge, i) => /* @__PURE__ */ jsxs8(
3041
3025
  "span",
3042
3026
  {
3043
- className: "uf-text-[10px] uf-text-green-400 uf-font-normal",
3027
+ className: "uf-text-[10px] uf-font-normal",
3028
+ style: { color: colors2.success },
3044
3029
  children: [
3045
3030
  badge,
3046
3031
  i < badges.length - 1 && ","
@@ -3048,8 +3033,25 @@ function BuyWithCard({
3048
3033
  },
3049
3034
  i
3050
3035
  )),
3051
- quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ jsx10("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
3052
- quote.low_kyc === false && /* @__PURE__ */ jsx10("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
3036
+ quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ jsx10(
3037
+ "span",
3038
+ {
3039
+ className: "uf-text-[10px]",
3040
+ style: { color: components.card.subtextRightColor },
3041
+ children: "\u2022"
3042
+ }
3043
+ ),
3044
+ quote.low_kyc === false && /* @__PURE__ */ jsx10(
3045
+ "span",
3046
+ {
3047
+ className: "uf-text-[10px] uf-font-normal",
3048
+ style: {
3049
+ color: components.card.subtextRightColor,
3050
+ fontFamily: fonts.regular
3051
+ },
3052
+ children: "No document upload"
3053
+ }
3054
+ )
3053
3055
  ] })
3054
3056
  ] })
3055
3057
  ] }),
@@ -3150,7 +3152,7 @@ function BuyWithCard({
3150
3152
  }
3151
3153
  )
3152
3154
  ] }),
3153
- /* @__PURE__ */ jsx10("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
3155
+ /* @__PURE__ */ jsx10("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
3154
3156
  /* @__PURE__ */ jsxs8("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
3155
3157
  /* @__PURE__ */ jsx10("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ jsxs8("div", { className: "uf-relative", children: [
3156
3158
  /* @__PURE__ */ jsx10(
@@ -3193,7 +3195,7 @@ function BuyWithCard({
3193
3195
  }
3194
3196
  )
3195
3197
  ] }),
3196
- /* @__PURE__ */ jsx10("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
3198
+ /* @__PURE__ */ jsx10("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
3197
3199
  /* @__PURE__ */ jsxs8("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
3198
3200
  /* @__PURE__ */ jsx10("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ jsxs8("div", { className: "uf-relative", children: [
3199
3201
  /* @__PURE__ */ jsx10(
@@ -3691,7 +3693,7 @@ function DepositExecutionItem({
3691
3693
  {
3692
3694
  className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
3693
3695
  style: {
3694
- color: components.card.titleColor,
3696
+ color: components.card.textRightColor,
3695
3697
  fontFamily: fonts.medium
3696
3698
  },
3697
3699
  children: formatUsdAmount2(execution.source_amount_usd || "0")
@@ -3745,7 +3747,7 @@ function TransferCryptoButton({
3745
3747
  Zap,
3746
3748
  {
3747
3749
  className: "uf-w-5 uf-h-5",
3748
- style: { color: colors2.foregroundMuted }
3750
+ style: { color: components.card.iconColor }
3749
3751
  }
3750
3752
  ) }),
3751
3753
  /* @__PURE__ */ jsxs11("div", { className: "uf-text-left", children: [
@@ -3837,7 +3839,7 @@ function DepositWithCardButton({
3837
3839
  CreditCard,
3838
3840
  {
3839
3841
  className: "uf-w-5 uf-h-5",
3840
- style: { color: colors2.foregroundMuted }
3842
+ style: { color: components.card.iconColor }
3841
3843
  }
3842
3844
  ) }),
3843
3845
  /* @__PURE__ */ jsxs12("div", { className: "uf-text-left", children: [
@@ -3935,7 +3937,7 @@ function PayWithExchangeButton({
3935
3937
  ArrowLeftRight,
3936
3938
  {
3937
3939
  className: "uf-w-5 uf-h-5",
3938
- style: { color: colors2.foregroundMuted }
3940
+ style: { color: components.card.iconColor }
3939
3941
  }
3940
3942
  ) }),
3941
3943
  /* @__PURE__ */ jsxs13("div", { className: "uf-text-left", children: [
@@ -4027,7 +4029,7 @@ function DepositTrackerButton({
4027
4029
  Clock,
4028
4030
  {
4029
4031
  className: "uf-w-5 uf-h-5",
4030
- style: { color: colors2.foregroundMuted }
4032
+ style: { color: components.card.iconColor }
4031
4033
  }
4032
4034
  ),
4033
4035
  badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx16(
@@ -6988,7 +6990,7 @@ function DepositsModal({
6988
6990
  onClose: handleClose
6989
6991
  }
6990
6992
  ),
6991
- /* @__PURE__ */ jsx33("div", { className: "uf-flex-1 uf-min-h-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsx33("div", { className: "uf-space-y-2", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx33("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx33(
6993
+ /* @__PURE__ */ jsx33("div", { className: "uf-flex-1 uf-min-h-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsx33("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx33("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx33(
6992
6994
  "div",
6993
6995
  {
6994
6996
  className: "uf-text-sm",
@@ -7187,23 +7189,33 @@ function TokenSelectorSheet({
7187
7189
  ),
7188
7190
  /* @__PURE__ */ jsx34("div", { className: "uf-w-7 uf-h-5 uf-invisible" })
7189
7191
  ] }),
7190
- /* @__PURE__ */ jsx34("div", { className: "uf-pb-3", children: /* @__PURE__ */ jsx34("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx34(
7191
- "input",
7192
- {
7193
- type: "text",
7194
- placeholder: "Search",
7195
- value: searchQuery,
7196
- onChange: (e) => setSearchQuery(e.target.value),
7197
- className: "uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
7198
- style: {
7199
- backgroundColor: components.search.backgroundColor,
7200
- color: components.search.inputColor,
7201
- fontFamily: fonts.regular,
7202
- borderRadius: components.input.borderRadius,
7203
- border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
7192
+ /* @__PURE__ */ jsxs30("div", { className: "uf-pb-3", children: [
7193
+ /* @__PURE__ */ jsx34(
7194
+ "style",
7195
+ {
7196
+ dangerouslySetInnerHTML: {
7197
+ __html: `.uf-token-sheet-search::placeholder { color: ${components.search.placeholderColor}; }`
7198
+ }
7204
7199
  }
7205
- }
7206
- ) }) }),
7200
+ ),
7201
+ /* @__PURE__ */ jsx34("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx34(
7202
+ "input",
7203
+ {
7204
+ type: "text",
7205
+ placeholder: "Search",
7206
+ value: searchQuery,
7207
+ onChange: (e) => setSearchQuery(e.target.value),
7208
+ className: "uf-token-sheet-search uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
7209
+ style: {
7210
+ backgroundColor: components.search.backgroundColor,
7211
+ color: components.search.inputColor,
7212
+ fontFamily: fonts.regular,
7213
+ borderRadius: components.input.borderRadius,
7214
+ border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
7215
+ }
7216
+ }
7217
+ ) })
7218
+ ] }),
7207
7219
  quickSelectOptions.length > 0 && !searchQuery && /* @__PURE__ */ jsxs30("div", { className: "uf-pb-3 uf--mx-6", children: [
7208
7220
  /* @__PURE__ */ jsx34(
7209
7221
  "div",
@@ -7455,12 +7467,13 @@ function TokenSelectorSheet({
7455
7467
  style: {
7456
7468
  fontSize: 12,
7457
7469
  flexShrink: 0,
7458
- color: components.card.labelColor,
7459
7470
  fontFamily: fonts.regular
7460
7471
  },
7461
7472
  children: [
7462
- "Minimum:",
7463
- " ",
7473
+ /* @__PURE__ */ jsxs30("span", { style: { color: components.card.textRightColor }, children: [
7474
+ "Minimum:",
7475
+ " "
7476
+ ] }),
7464
7477
  /* @__PURE__ */ jsxs30("span", { style: { color: components.card.labelHighlightRightColor }, children: [
7465
7478
  "$",
7466
7479
  chain.minimum_deposit_amount_usd
@@ -7542,13 +7555,15 @@ import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
7542
7555
  function DepositFooterLinks({
7543
7556
  onGlossaryClick
7544
7557
  }) {
7558
+ const { colors: colors2 } = useTheme();
7545
7559
  return /* @__PURE__ */ jsxs32("div", { className: "uf-flex uf-justify-end uf-items-center uf-gap-2 uf-text-xs uf-text-muted-foreground", children: [
7546
7560
  /* @__PURE__ */ jsx36(
7547
7561
  "a",
7548
7562
  {
7549
7563
  href: "https://unifold.io/terms",
7550
7564
  target: "_blank",
7551
- className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
7565
+ className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
7566
+ style: { color: colors2.primary },
7552
7567
  children: "Terms"
7553
7568
  }
7554
7569
  ),
@@ -7558,7 +7573,8 @@ function DepositFooterLinks({
7558
7573
  {
7559
7574
  href: "https://unifold.io/support",
7560
7575
  target: "_blank",
7561
- className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
7576
+ className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
7577
+ style: { color: colors2.primary },
7562
7578
  children: "Help"
7563
7579
  }
7564
7580
  ),
@@ -7566,8 +7582,9 @@ function DepositFooterLinks({
7566
7582
  /* @__PURE__ */ jsx36(
7567
7583
  "div",
7568
7584
  {
7569
- className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
7585
+ className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
7570
7586
  onClick: onGlossaryClick,
7587
+ style: { color: colors2.primary },
7571
7588
  children: "Glossary"
7572
7589
  }
7573
7590
  )
@@ -7581,61 +7598,117 @@ var t3 = i18n.transferCrypto;
7581
7598
  function GlossaryModal({
7582
7599
  open,
7583
7600
  onOpenChange,
7584
- themeClass,
7585
- colors: colors2
7601
+ backgroundColor: backgroundColorProp,
7602
+ themeClass: themeClassProp,
7603
+ colors: colorsProp
7586
7604
  }) {
7605
+ const { themeClass, colors: colors2, components } = useTheme();
7606
+ const resolvedThemeClass = themeClassProp ?? themeClass;
7607
+ const modalBackground = backgroundColorProp ?? colors2.background;
7587
7608
  return /* @__PURE__ */ jsx37(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs33(
7588
7609
  DialogContent,
7589
7610
  {
7590
- className: `sm:uf-max-w-[400px] !uf-top-auto !uf-h-auto sm:!uf-top-[50%] uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`,
7591
- style: { backgroundColor: colors2.card },
7611
+ className: `sm:uf-max-w-[400px] !uf-top-auto !uf-h-auto sm:!uf-top-[50%] uf-border-secondary uf-p-0 uf-gap-0 [&>button]:uf-hidden ${resolvedThemeClass}`,
7612
+ style: { backgroundColor: modalBackground },
7592
7613
  children: [
7593
- /* @__PURE__ */ jsxs33("div", { className: "uf-flex uf-items-center uf-justify-between uf-p-4 uf-pb-2", children: [
7594
- /* @__PURE__ */ jsx37(DialogTitle, { className: "uf-text-base uf-font-semibold", children: "Glossary" }),
7614
+ /* @__PURE__ */ jsxs33("div", { className: "uf-relative uf-flex uf-items-center uf-justify-between", children: [
7615
+ /* @__PURE__ */ jsx37("span", { className: "uf-invisible uf-w-9 uf-h-9 uf-flex uf-shrink-0 uf-items-center uf-justify-center", "aria-hidden": true, children: /* @__PURE__ */ jsx37(X5, { className: "uf-w-4 uf-h-4" }) }),
7616
+ /* @__PURE__ */ jsx37(
7617
+ DialogTitle,
7618
+ {
7619
+ className: "uf-text-base uf-font-medium uf-absolute uf-left-0 uf-right-0 uf-text-center uf-pointer-events-none",
7620
+ style: { color: components.header.titleColor },
7621
+ children: "Glossary"
7622
+ }
7623
+ ),
7595
7624
  /* @__PURE__ */ jsx37(
7596
7625
  "button",
7597
7626
  {
7598
7627
  onClick: () => onOpenChange(false),
7599
- className: "uf-p-1 uf-rounded-lg hover:uf-bg-secondary uf-transition-colors uf-text-muted-foreground hover:uf-text-foreground",
7628
+ className: "uf-p-1 uf-rounded-lg hover:uf-bg-secondary uf-transition-colors uf-flex-shrink-0 uf-z-[1]",
7629
+ style: { color: components.header.buttonColor },
7600
7630
  children: /* @__PURE__ */ jsx37(X5, { className: "uf-w-4 uf-h-4" })
7601
7631
  }
7602
7632
  )
7603
7633
  ] }),
7604
- /* @__PURE__ */ jsx37("div", { className: "uf-max-h-[60vh] sm:uf-max-h-[400px] uf-overflow-y-auto uf-px-4 uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsxs33("div", { className: "uf-space-y-4", children: [
7605
- /* @__PURE__ */ jsxs33("div", { children: [
7606
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Your Deposit Token" }),
7607
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.selectTokenDepositTooltip })
7608
- ] }),
7609
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7610
- /* @__PURE__ */ jsxs33("div", { children: [
7611
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Deposit Address" }),
7612
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "A unique wallet address generated for you. Send supported tokens to this address and they will be automatically converted and deposited into your account." })
7613
- ] }),
7614
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7615
- /* @__PURE__ */ jsxs33("div", { children: [
7616
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Price Impact" }),
7617
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.priceImpact.tooltip })
7618
- ] }),
7619
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7620
- /* @__PURE__ */ jsxs33("div", { children: [
7621
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Slippage" }),
7622
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.slippage.tooltip })
7623
- ] }),
7624
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7625
- /* @__PURE__ */ jsxs33("div", { children: [
7626
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Processing Time" }),
7627
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "The estimated time for your deposit to be confirmed and credited. This depends on the source network's block confirmation time and current congestion." })
7628
- ] }),
7629
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7630
- /* @__PURE__ */ jsxs33("div", { children: [
7631
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Minimum Deposit" }),
7632
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.minDeposit.tooltip })
7633
- ] }),
7634
- /* @__PURE__ */ jsx37("div", { className: "uf-border-t uf-border-border" }),
7635
- /* @__PURE__ */ jsxs33("div", { children: [
7636
- /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Recipient Address" }),
7637
- /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "The destination address on the target blockchain where your converted deposit will be sent. This is typically your wallet address on the application's native chain." })
7638
- ] })
7634
+ /* @__PURE__ */ jsx37("div", { className: "uf-max-h-[60vh] sm:uf-max-h-[400px] uf-overflow-y-auto uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsxs33("div", { className: "uf-space-y-3", children: [
7635
+ /* @__PURE__ */ jsxs33(
7636
+ "div",
7637
+ {
7638
+ className: "uf-rounded-xl uf-p-3",
7639
+ style: { backgroundColor: components.card.backgroundColor },
7640
+ children: [
7641
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Your Deposit Token" }),
7642
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.selectTokenDepositTooltip })
7643
+ ]
7644
+ }
7645
+ ),
7646
+ /* @__PURE__ */ jsxs33(
7647
+ "div",
7648
+ {
7649
+ className: "uf-rounded-xl uf-p-3",
7650
+ style: { backgroundColor: components.card.backgroundColor },
7651
+ children: [
7652
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Deposit Address" }),
7653
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "A unique wallet address generated for you. Send supported tokens to this address and they will be automatically converted and deposited into your account." })
7654
+ ]
7655
+ }
7656
+ ),
7657
+ /* @__PURE__ */ jsxs33(
7658
+ "div",
7659
+ {
7660
+ className: "uf-rounded-xl uf-p-3",
7661
+ style: { backgroundColor: components.card.backgroundColor },
7662
+ children: [
7663
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Price Impact" }),
7664
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.priceImpact.tooltip })
7665
+ ]
7666
+ }
7667
+ ),
7668
+ /* @__PURE__ */ jsxs33(
7669
+ "div",
7670
+ {
7671
+ className: "uf-rounded-xl uf-p-3",
7672
+ style: { backgroundColor: components.card.backgroundColor },
7673
+ children: [
7674
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Slippage" }),
7675
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.slippage.tooltip })
7676
+ ]
7677
+ }
7678
+ ),
7679
+ /* @__PURE__ */ jsxs33(
7680
+ "div",
7681
+ {
7682
+ className: "uf-rounded-xl uf-p-3",
7683
+ style: { backgroundColor: components.card.backgroundColor },
7684
+ children: [
7685
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Processing Time" }),
7686
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "The estimated time for your deposit to be confirmed and credited. This depends on the source network's block confirmation time and current congestion." })
7687
+ ]
7688
+ }
7689
+ ),
7690
+ /* @__PURE__ */ jsxs33(
7691
+ "div",
7692
+ {
7693
+ className: "uf-rounded-xl uf-p-3",
7694
+ style: { backgroundColor: components.card.backgroundColor },
7695
+ children: [
7696
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Minimum Deposit" }),
7697
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.minDeposit.tooltip })
7698
+ ]
7699
+ }
7700
+ ),
7701
+ /* @__PURE__ */ jsxs33(
7702
+ "div",
7703
+ {
7704
+ className: "uf-rounded-xl uf-p-3",
7705
+ style: { backgroundColor: components.card.backgroundColor },
7706
+ children: [
7707
+ /* @__PURE__ */ jsx37("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Recipient Address" }),
7708
+ /* @__PURE__ */ jsx37("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "The destination address on the target blockchain where your converted deposit will be sent. This is typically your wallet address on the application's native chain." })
7709
+ ]
7710
+ }
7711
+ )
7639
7712
  ] }) })
7640
7713
  ]
7641
7714
  }
@@ -7914,7 +7987,7 @@ function TransferCryptoSingleInput({
7914
7987
  className: "uf-space-y-3 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden",
7915
7988
  style: { backgroundColor: colors2.background },
7916
7989
  children: [
7917
- /* @__PURE__ */ jsx39("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-1 uf-flex uf-items-center uf-justify-between", children: /* @__PURE__ */ jsx39("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
7990
+ /* @__PURE__ */ jsx39("div", { className: "uf-text-xs uf-mb-1 uf-flex uf-items-center uf-justify-between", style: { color: components.card.labelColor }, children: /* @__PURE__ */ jsx39("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
7918
7991
  /* @__PURE__ */ jsx39(
7919
7992
  "button",
7920
7993
  {
@@ -8018,7 +8091,7 @@ function TransferCryptoSingleInput({
8018
8091
  ] })
8019
8092
  ] }),
8020
8093
  /* @__PURE__ */ jsxs34("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
8021
- /* @__PURE__ */ jsx39("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: "Intent address" }),
8094
+ /* @__PURE__ */ jsx39("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
8022
8095
  /* @__PURE__ */ jsx39("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
8023
8096
  // QR Skeleton - matches QR code appearance
8024
8097
  /* @__PURE__ */ jsx39(
@@ -8063,7 +8136,7 @@ function TransferCryptoSingleInput({
8063
8136
  }
8064
8137
  ) })
8065
8138
  ] }),
8066
- /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs34("div", { className: "uf-text-sm uf-text-muted-foreground uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
8139
+ /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs34("div", { className: "uf-text-sm uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
8067
8140
  loading || tokensLoading || !initialSelectionDone ? (
8068
8141
  // Address skeleton
8069
8142
  /* @__PURE__ */ jsx39(
@@ -8075,12 +8148,13 @@ function TransferCryptoSingleInput({
8075
8148
  }
8076
8149
  }
8077
8150
  )
8078
- ) : /* @__PURE__ */ jsx39("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t4.noAddressAvailable }),
8151
+ ) : /* @__PURE__ */ jsx39("span", { className: "uf-text-sm uf-truncate uf-min-w-0", style: { color: components.card.titleColor }, children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t4.noAddressAvailable }),
8079
8152
  depositAddress && initialSelectionDone && /* @__PURE__ */ jsx39(
8080
8153
  "span",
8081
8154
  {
8082
8155
  onClick: handleCopyAddress,
8083
- className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copied ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
8156
+ className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
8157
+ style: { color: copied ? colors2.success : components.card.actionColor },
8084
8158
  children: copied ? /* @__PURE__ */ jsx39(Check3, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ jsx39(Copy, { className: "uf-w-3.5 uf-h-3.5" })
8085
8159
  }
8086
8160
  )
@@ -8142,7 +8216,8 @@ function TransferCryptoSingleInput({
8142
8216
  "span",
8143
8217
  {
8144
8218
  onClick: () => handleCopyRecipientAddress(recipientAddress),
8145
- className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copiedRecipient ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
8219
+ className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
8220
+ style: { color: copiedRecipient ? colors2.success : components.card.actionColor },
8146
8221
  children: copiedRecipient ? /* @__PURE__ */ jsx39(Check3, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ jsx39(Copy, { className: "uf-w-3.5 uf-h-3.5" })
8147
8222
  }
8148
8223
  )
@@ -8561,7 +8636,7 @@ function TransferCryptoDoubleInput({
8561
8636
  children: [
8562
8637
  /* @__PURE__ */ jsxs36("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
8563
8638
  /* @__PURE__ */ jsxs36("div", { children: [
8564
- /* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: t5.selectedToken }),
8639
+ /* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: t5.selectedToken }),
8565
8640
  /* @__PURE__ */ jsxs36(
8566
8641
  Select,
8567
8642
  {
@@ -8569,7 +8644,7 @@ function TransferCryptoDoubleInput({
8569
8644
  onValueChange: setToken,
8570
8645
  disabled: tokensLoading || supportedTokens.length === 0,
8571
8646
  children: [
8572
- /* @__PURE__ */ jsx41(SelectTrigger, { className: "uf-bg-secondary uf-h-10 hover:uf-bg-accent uf-text-foreground disabled:uf-opacity-50", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}` }, children: /* @__PURE__ */ jsx41(SelectValue, { children: tokensLoading ? /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
8647
+ /* @__PURE__ */ jsx41(SelectTrigger, { className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50", style: { backgroundColor: components.card.backgroundColor, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: /* @__PURE__ */ jsx41(SelectValue, { children: tokensLoading ? /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
8573
8648
  /* @__PURE__ */ jsx41(SelectContent, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`, ...fonts.regular ? { "--uf-font-family": fonts.regular } : {} }, children: supportedTokens.map((tokenData) => /* @__PURE__ */ jsx41(
8574
8649
  SelectItem,
8575
8650
  {
@@ -8584,7 +8659,7 @@ function TransferCryptoDoubleInput({
8584
8659
  )
8585
8660
  ] }),
8586
8661
  /* @__PURE__ */ jsxs36("div", { children: [
8587
- /* @__PURE__ */ jsxs36("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: [
8662
+ /* @__PURE__ */ jsxs36("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: [
8588
8663
  t5.selectedChain,
8589
8664
  /* @__PURE__ */ jsxs36("span", { className: "uf-font-medium", style: { color: components.card.labelHighlightRightColor }, children: [
8590
8665
  "$",
@@ -8600,7 +8675,7 @@ function TransferCryptoDoubleInput({
8600
8675
  onValueChange: setChain,
8601
8676
  disabled: tokensLoading || availableChainsForToken.length === 0,
8602
8677
  children: [
8603
- /* @__PURE__ */ jsx41(SelectTrigger, { className: "uf-bg-secondary uf-h-10 hover:uf-bg-accent uf-text-foreground disabled:uf-opacity-50", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}` }, children: /* @__PURE__ */ jsx41(SelectValue, { children: tokensLoading ? /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
8678
+ /* @__PURE__ */ jsx41(SelectTrigger, { className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50", style: { backgroundColor: components.card.backgroundColor, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: /* @__PURE__ */ jsx41(SelectValue, { children: tokensLoading ? /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ jsx41("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx41("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
8604
8679
  /* @__PURE__ */ jsx41(
8605
8680
  SelectContent,
8606
8681
  {
@@ -8643,7 +8718,7 @@ function TransferCryptoDoubleInput({
8643
8718
  ] })
8644
8719
  ] }),
8645
8720
  /* @__PURE__ */ jsxs36("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
8646
- /* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: "Intent address" }),
8721
+ /* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
8647
8722
  /* @__PURE__ */ jsx41("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
8648
8723
  // QR Skeleton - matches QR code appearance
8649
8724
  /* @__PURE__ */ jsx41(
@@ -8688,7 +8763,7 @@ function TransferCryptoDoubleInput({
8688
8763
  }
8689
8764
  ) })
8690
8765
  ] }),
8691
- /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsxs36("div", { className: "uf-text-sm uf-text-muted-foreground uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
8766
+ /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsxs36("div", { className: "uf-text-sm uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
8692
8767
  loading || tokensLoading || !initialSelectionDone ? (
8693
8768
  // Address skeleton
8694
8769
  /* @__PURE__ */ jsx41(
@@ -8700,12 +8775,13 @@ function TransferCryptoDoubleInput({
8700
8775
  }
8701
8776
  }
8702
8777
  )
8703
- ) : /* @__PURE__ */ jsx41("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t5.noAddressAvailable }),
8778
+ ) : /* @__PURE__ */ jsx41("span", { className: "uf-text-sm uf-truncate uf-min-w-0", style: { color: components.card.titleColor }, children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t5.noAddressAvailable }),
8704
8779
  depositAddress && initialSelectionDone && /* @__PURE__ */ jsx41(
8705
8780
  "span",
8706
8781
  {
8707
8782
  onClick: handleCopyAddress,
8708
- className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copied ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
8783
+ className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
8784
+ style: { color: copied ? colors2.success : components.card.actionColor },
8709
8785
  children: copied ? /* @__PURE__ */ jsx41(Check5, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ jsx41(Copy2, { className: "uf-w-3.5 uf-h-3.5" })
8710
8786
  }
8711
8787
  )
@@ -8767,7 +8843,8 @@ function TransferCryptoDoubleInput({
8767
8843
  "span",
8768
8844
  {
8769
8845
  onClick: () => handleCopyRecipientAddress(recipientAddress),
8770
- className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copiedRecipient ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
8846
+ className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
8847
+ style: { color: copiedRecipient ? colors2.success : components.card.actionColor },
8771
8848
  children: copiedRecipient ? /* @__PURE__ */ jsx41(Check5, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ jsx41(Copy2, { className: "uf-w-3.5 uf-h-3.5" })
8772
8849
  }
8773
8850
  )
@@ -10800,14 +10877,23 @@ function DepositModal({
10800
10877
  onDepositSuccess,
10801
10878
  onDepositError,
10802
10879
  theme = "dark",
10803
- hideOverlay = false
10880
+ hideOverlay = false,
10881
+ initialScreen = "main"
10804
10882
  }) {
10805
10883
  const { colors: colors2, fonts, components } = useTheme();
10884
+ const effectiveInitialScreen = useMemo8(() => {
10885
+ const s = initialScreen ?? "main";
10886
+ if (s === "tracker" && hideDepositTracker) return "main";
10887
+ return s;
10888
+ }, [initialScreen, hideDepositTracker]);
10806
10889
  const [containerEl, setContainerEl] = useState26(null);
10807
10890
  const containerCallbackRef = useCallback3((el) => {
10808
10891
  setContainerEl(el);
10809
10892
  }, []);
10810
- const [view, setView] = useState26("main");
10893
+ const [view, setView] = useState26(
10894
+ effectiveInitialScreen
10895
+ );
10896
+ const resetViewTimeoutRef = useRef5(null);
10811
10897
  const [cardView, setCardView] = useState26(
10812
10898
  "amount"
10813
10899
  );
@@ -10927,6 +11013,43 @@ function DepositModal({
10927
11013
  const template = errors[code] ?? addressValidationMessages.defaultError;
10928
11014
  return interpolate(template, metadata);
10929
11015
  };
11016
+ const openingScreen = effectiveInitialScreen;
11017
+ const sessionOpenedFromMenu = openingScreen === "main";
11018
+ const standaloneNeedsDepositPrereq = openingScreen !== "main" && (view === "transfer" || view === "card");
11019
+ let depositPrerequisiteBody;
11020
+ if (isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig) {
11021
+ depositPrerequisiteBody = standaloneNeedsDepositPrereq ? /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ jsxs43(Fragment11, { children: [
11022
+ /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
11023
+ /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
11024
+ !hideDepositTracker && /* @__PURE__ */ jsx48(SkeletonButton, {})
11025
+ ] });
11026
+ } else if (countryError) {
11027
+ depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11028
+ /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11029
+ /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
11030
+ /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
11031
+ ] });
11032
+ } else if (!isAllowed) {
11033
+ depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11034
+ /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11035
+ /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
11036
+ /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
11037
+ ] });
11038
+ } else if (isAddressValid === false) {
11039
+ depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11040
+ /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11041
+ /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
11042
+ /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
11043
+ addressFailureCode,
11044
+ addressFailureMetadata
11045
+ ) })
11046
+ ] });
11047
+ } else {
11048
+ depositPrerequisiteBody = null;
11049
+ }
11050
+ const showBackTransfer = sessionOpenedFromMenu;
11051
+ const showBackCard = cardView !== "amount" || sessionOpenedFromMenu;
11052
+ const showBackTracker = selectedExecution !== null || sessionOpenedFromMenu;
10930
11053
  const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
10931
11054
  const handleWalletDisconnect = () => {
10932
11055
  setUserDisconnectedWallet(true);
@@ -10937,13 +11060,37 @@ function DepositModal({
10937
11060
  };
10938
11061
  const handleClose = () => {
10939
11062
  onOpenChange(false);
10940
- setTimeout(() => {
10941
- setView("main");
11063
+ if (resetViewTimeoutRef.current) {
11064
+ clearTimeout(resetViewTimeoutRef.current);
11065
+ }
11066
+ resetViewTimeoutRef.current = setTimeout(() => {
11067
+ setView(effectiveInitialScreen);
10942
11068
  setCardView("amount");
10943
11069
  setExchangeView("providers");
10944
11070
  setBrowserWalletInfo(null);
11071
+ resetViewTimeoutRef.current = null;
10945
11072
  }, 200);
10946
11073
  };
11074
+ useLayoutEffect2(() => {
11075
+ if (!open) return;
11076
+ if (resetViewTimeoutRef.current) {
11077
+ clearTimeout(resetViewTimeoutRef.current);
11078
+ resetViewTimeoutRef.current = null;
11079
+ }
11080
+ setView(effectiveInitialScreen);
11081
+ setCardView("amount");
11082
+ setExchangeView("providers");
11083
+ setBrowserWalletInfo(null);
11084
+ setSelectedExecution(null);
11085
+ }, [open, effectiveInitialScreen]);
11086
+ useEffect20(
11087
+ () => () => {
11088
+ if (resetViewTimeoutRef.current) {
11089
+ clearTimeout(resetViewTimeoutRef.current);
11090
+ }
11091
+ },
11092
+ []
11093
+ );
10947
11094
  const handleBack = () => {
10948
11095
  if (view === "card" && cardView === "quotes") {
10949
11096
  setCardView("amount");
@@ -11056,95 +11203,64 @@ function DepositModal({
11056
11203
  publishableKey
11057
11204
  }
11058
11205
  ),
11059
- /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ jsxs43(Fragment11, { children: [
11060
- /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
11061
- /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
11062
- !hideDepositTracker && /* @__PURE__ */ jsx48(SkeletonButton, {})
11063
- ] }) : countryError ? (
11064
- /* Error state - couldn't verify location */
11065
- /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11066
- /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11067
- /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
11068
- /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
11069
- ] })
11070
- ) : !isAllowed ? (
11071
- /* Blocked country state (isAllowed is false or null without error) */
11072
- /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11073
- /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11074
- /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
11075
- /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
11076
- ] })
11077
- ) : isAddressValid === false ? (
11078
- /* Invalid recipient address state (e.g., Algorand not opted in) */
11079
- /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
11080
- /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
11081
- /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
11082
- /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
11083
- addressFailureCode,
11084
- addressFailureMetadata
11085
- ) })
11086
- ] })
11087
- ) : (
11088
- /* Normal deposit options */
11089
- /* @__PURE__ */ jsxs43(Fragment11, { children: [
11090
- /* @__PURE__ */ jsx48(
11091
- TransferCryptoButton,
11092
- {
11093
- onClick: () => setView("transfer"),
11094
- title: t6.transferCrypto.title,
11095
- subtitle: t6.transferCrypto.subtitle,
11096
- featuredTokens: projectConfig.transfer_crypto.networks
11097
- }
11098
- ),
11099
- enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx48(
11100
- BrowserWalletButton,
11101
- {
11102
- onClick: handleBrowserWalletClick,
11103
- onConnectClick: handleWalletConnectClick,
11104
- onDisconnect: handleWalletDisconnect,
11105
- chainType: browserWalletChainType,
11106
- publishableKey
11107
- }
11108
- ),
11109
- /* @__PURE__ */ jsx48(
11110
- DepositWithCardButton,
11111
- {
11112
- onClick: () => setView("card"),
11113
- title: t6.depositWithCard.title,
11114
- subtitle: t6.depositWithCard.subtitle,
11115
- paymentNetworks: projectConfig.payment_networks.networks
11116
- }
11117
- ),
11118
- showPayWithExchange && /* @__PURE__ */ jsx48(
11119
- PayWithExchangeButton,
11120
- {
11121
- onClick: () => setView("exchange"),
11122
- title: t6.payWithExchange.title,
11123
- subtitle: t6.payWithExchange.subtitle,
11124
- exchanges,
11125
- loading: exchangesLoading
11126
- }
11127
- ),
11128
- !hideDepositTracker && /* @__PURE__ */ jsx48(
11129
- DepositTrackerButton,
11130
- {
11131
- onClick: () => {
11132
- setAllExecutions(depositExecutions);
11133
- setView("tracker");
11134
- },
11135
- title: "Deposit Tracker",
11136
- subtitle: "Track your deposit progress",
11137
- badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
11138
- }
11139
- )
11140
- ] })
11141
- ) })
11206
+ /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ jsxs43(Fragment11, { children: [
11207
+ /* @__PURE__ */ jsx48(
11208
+ TransferCryptoButton,
11209
+ {
11210
+ onClick: () => setView("transfer"),
11211
+ title: t6.transferCrypto.title,
11212
+ subtitle: t6.transferCrypto.subtitle,
11213
+ featuredTokens: projectConfig?.transfer_crypto.networks
11214
+ }
11215
+ ),
11216
+ enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx48(
11217
+ BrowserWalletButton,
11218
+ {
11219
+ onClick: handleBrowserWalletClick,
11220
+ onConnectClick: handleWalletConnectClick,
11221
+ onDisconnect: handleWalletDisconnect,
11222
+ chainType: browserWalletChainType,
11223
+ publishableKey
11224
+ }
11225
+ ),
11226
+ /* @__PURE__ */ jsx48(
11227
+ DepositWithCardButton,
11228
+ {
11229
+ onClick: () => setView("card"),
11230
+ title: t6.depositWithCard.title,
11231
+ subtitle: t6.depositWithCard.subtitle,
11232
+ paymentNetworks: projectConfig?.payment_networks.networks
11233
+ }
11234
+ ),
11235
+ showPayWithExchange && /* @__PURE__ */ jsx48(
11236
+ PayWithExchangeButton,
11237
+ {
11238
+ onClick: () => setView("exchange"),
11239
+ title: t6.payWithExchange.title,
11240
+ subtitle: t6.payWithExchange.subtitle,
11241
+ exchanges,
11242
+ loading: exchangesLoading
11243
+ }
11244
+ ),
11245
+ !hideDepositTracker && /* @__PURE__ */ jsx48(
11246
+ DepositTrackerButton,
11247
+ {
11248
+ onClick: () => {
11249
+ setAllExecutions(depositExecutions);
11250
+ setView("tracker");
11251
+ },
11252
+ title: "Deposit Tracker",
11253
+ subtitle: "Track your deposit progress",
11254
+ badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
11255
+ }
11256
+ )
11257
+ ] }) })
11142
11258
  ] }) : view === "transfer" ? /* @__PURE__ */ jsxs43(Fragment11, { children: [
11143
11259
  /* @__PURE__ */ jsx48(
11144
11260
  DepositHeader,
11145
11261
  {
11146
11262
  title: t6.transferCrypto.title,
11147
- showBack: true,
11263
+ showBack: showBackTransfer,
11148
11264
  onBack: handleBack,
11149
11265
  onClose: handleClose,
11150
11266
  showBalance: showBalanceHeader,
@@ -11156,7 +11272,7 @@ function DepositModal({
11156
11272
  publishableKey
11157
11273
  }
11158
11274
  ),
11159
- transferInputVariant === "single_input" ? /* @__PURE__ */ jsx48(
11275
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ jsx48(
11160
11276
  TransferCryptoSingleInput,
11161
11277
  {
11162
11278
  userId,
@@ -11192,12 +11308,12 @@ function DepositModal({
11192
11308
  DepositHeader,
11193
11309
  {
11194
11310
  title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
11195
- showBack: true,
11311
+ showBack: showBackTracker,
11196
11312
  onBack: handleBack,
11197
11313
  onClose: handleClose
11198
11314
  }
11199
11315
  ),
11200
- /* @__PURE__ */ jsx48("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ jsx48(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ jsx48("div", { className: "uf-space-y-2 uf-pb-4", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx48("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx48(
11316
+ /* @__PURE__ */ jsx48("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ jsx48(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ jsx48("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx48("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx48(
11201
11317
  "div",
11202
11318
  {
11203
11319
  className: "uf-text-sm",
@@ -11217,7 +11333,7 @@ function DepositModal({
11217
11333
  DepositHeader,
11218
11334
  {
11219
11335
  title: cardView === "quotes" ? t6.quotes : t6.depositWithCard.title,
11220
- showBack: true,
11336
+ showBack: showBackCard,
11221
11337
  onBack: handleBack,
11222
11338
  onClose: handleClose,
11223
11339
  badge: cardView === "quotes" ? { count: quotesCount } : void 0,
@@ -11230,7 +11346,7 @@ function DepositModal({
11230
11346
  publishableKey
11231
11347
  }
11232
11348
  ),
11233
- /* @__PURE__ */ jsx48(
11349
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ jsx48(
11234
11350
  BuyWithCard,
11235
11351
  {
11236
11352
  userId,