@funkit/connect 8.2.1 → 8.3.1-next.0

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.
Files changed (98) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/__generated__/default_configs.d.ts +70 -0
  3. package/dist/atoms/activeCheckout.d.ts +183 -0
  4. package/dist/atoms/activeWithdrawal.d.ts +21 -0
  5. package/dist/atoms/bridgeProviders/acrossAdapter.d.ts +109 -0
  6. package/dist/atoms/bridgeProviders/index.d.ts +25 -0
  7. package/dist/atoms/bridgeProviders/registry.d.ts +12 -0
  8. package/dist/atoms/bridgeProviders/relayAdapter.d.ts +60 -0
  9. package/dist/atoms/bridgeProviders/types.d.ts +182 -0
  10. package/dist/atoms/checkoutProgress.d.ts +22 -0
  11. package/dist/atoms/directExecution.d.ts +70 -0
  12. package/dist/atoms/funkitCheckout.d.ts +18 -0
  13. package/dist/atoms/funkitProvider/index.d.ts +24 -0
  14. package/dist/atoms/generalWallet.d.ts +45 -0
  15. package/dist/atoms/i18n.d.ts +6 -0
  16. package/dist/atoms/modalState.d.ts +30 -0
  17. package/dist/atoms/quote.d.ts +98 -0
  18. package/dist/atoms/stepTransition.d.ts +6 -0
  19. package/dist/atoms/store.d.ts +1 -0
  20. package/dist/atoms/track/index.d.ts +10 -0
  21. package/dist/atoms/utils.d.ts +2 -0
  22. package/dist/atoms/wagmi.d.ts +4 -0
  23. package/dist/atoms/walletClient.d.ts +15391 -0
  24. package/dist/chunk-5JRQC2VM.js +300 -0
  25. package/dist/{chunk-BP7VOYBS.js → chunk-A24XIU2M.js} +3 -1
  26. package/dist/{chunk-MYPFORR2.js → chunk-CMS4F5PL.js} +3 -2
  27. package/dist/chunk-CUWQELX3.js +209 -0
  28. package/dist/chunk-FBCU3TQA.js +204 -0
  29. package/dist/{chunk-KKGSXLMH.js → chunk-GRQP5R23.js} +3 -2
  30. package/dist/chunk-MGQZMUZ2.js +288 -0
  31. package/dist/chunk-OTMBU2BL.js +204 -0
  32. package/dist/chunk-VWSYBHAK.js +209 -0
  33. package/dist/clients/fanatics.css +3648 -3563
  34. package/dist/clients/fanatics.js +3 -3
  35. package/dist/components/Box/Box.d.ts +28 -28
  36. package/dist/components/FunPaymentMethodItem/FunPaymentMethodItemSkeleton.d.ts +2 -0
  37. package/dist/components/Icons/AcrossIcon.d.ts +4 -0
  38. package/dist/css/sprinkles.css.d.ts +40 -28
  39. package/dist/domains/across.d.ts +29 -0
  40. package/dist/domains/track.d.ts +14 -0
  41. package/dist/hooks/queries/useFops.d.ts +15 -0
  42. package/dist/hooks/usePaymentSources.d.ts +1 -1
  43. package/dist/hooks/useRelayBypass.d.ts +0 -9
  44. package/dist/hooks/useUsableWalletAssetsForCheckout.d.ts +2 -0
  45. package/dist/hooks/useUserIpInfo.d.ts +19 -0
  46. package/dist/index.css +3654 -3569
  47. package/dist/index.js +2648 -2650
  48. package/dist/modals/CheckoutModal/SelectAsset.d.ts +14 -0
  49. package/dist/modals/CheckoutModal/SourceChange/ConnectedSource.d.ts +11 -0
  50. package/dist/modals/CheckoutModal/SwappedIframe/SwappedIframe.d.ts +16 -0
  51. package/dist/modals/CheckoutModal/SwappedIframe/index.d.ts +1 -0
  52. package/dist/providers/FunkitCheckoutContext/types.d.ts +1 -0
  53. package/dist/providers/FunkitConfigContext.d.ts +9 -2
  54. package/dist/providers/FunkitMoonpayProvider.d.ts +0 -14
  55. package/dist/providers/FunkitThemeProvider.d.ts +18 -0
  56. package/dist/themes/baseTheme.js +1 -1
  57. package/dist/themes/darkTheme.js +2 -2
  58. package/dist/themes/lightTheme.js +2 -2
  59. package/dist/utils/flags/config.d.ts +1 -1
  60. package/dist/utils/lighter.d.ts +0 -2
  61. package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js +2 -2
  62. package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js +2 -2
  63. package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js +2 -2
  64. package/dist/wallets/walletConnectors/chunk-2E4PDCEJ.js +103 -0
  65. package/dist/wallets/walletConnectors/chunk-47QF6EET.js +93 -0
  66. package/dist/wallets/walletConnectors/chunk-5EAOMOTO.js +98 -0
  67. package/dist/wallets/walletConnectors/chunk-77UTBHGP.js +70 -0
  68. package/dist/wallets/walletConnectors/chunk-CZYUE3AR.js +100 -0
  69. package/dist/wallets/walletConnectors/chunk-FA5DTT5R.js +99 -0
  70. package/dist/wallets/walletConnectors/chunk-HPHADOYD.js +87 -0
  71. package/dist/wallets/walletConnectors/chunk-JFHP4YJG.js +106 -0
  72. package/dist/wallets/walletConnectors/chunk-MRRZOQGZ.js +92 -0
  73. package/dist/wallets/walletConnectors/chunk-R6Y36CMA.js +69 -0
  74. package/dist/wallets/walletConnectors/chunk-RA7MCWF4.js +218 -0
  75. package/dist/wallets/walletConnectors/chunk-RLRQYUYC.js +96 -0
  76. package/dist/wallets/walletConnectors/chunk-T5KHVUFR.js +96 -0
  77. package/dist/wallets/walletConnectors/chunk-U5QP7MI5.js +94 -0
  78. package/dist/wallets/walletConnectors/chunk-UOTQQJJD.js +92 -0
  79. package/dist/wallets/walletConnectors/chunk-VYNVAGSV.js +95 -0
  80. package/dist/wallets/walletConnectors/chunk-W7Y6I22Y.js +110 -0
  81. package/dist/wallets/walletConnectors/chunk-YLJDPTYF.js +66 -0
  82. package/dist/wallets/walletConnectors/clvWallet/clvWallet.js +2 -2
  83. package/dist/wallets/walletConnectors/coin98Wallet/coin98Wallet.js +2 -2
  84. package/dist/wallets/walletConnectors/coreWallet/coreWallet.js +2 -2
  85. package/dist/wallets/walletConnectors/foxWallet/foxWallet.js +2 -2
  86. package/dist/wallets/walletConnectors/frontierWallet/frontierWallet.js +2 -2
  87. package/dist/wallets/walletConnectors/gateWallet/gateWallet.js +2 -2
  88. package/dist/wallets/walletConnectors/index.js +39 -39
  89. package/dist/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.js +2 -2
  90. package/dist/wallets/walletConnectors/okxWallet/okxWallet.js +2 -2
  91. package/dist/wallets/walletConnectors/rainbowWallet/rainbowWallet.js +2 -2
  92. package/dist/wallets/walletConnectors/roninWallet/roninWallet.js +2 -2
  93. package/dist/wallets/walletConnectors/safepalWallet/safepalWallet.js +2 -2
  94. package/dist/wallets/walletConnectors/subWallet/subWallet.js +2 -2
  95. package/dist/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.js +2 -2
  96. package/dist/wallets/walletConnectors/trustWallet/trustWallet.js +2 -2
  97. package/dist/wallets/walletConnectors/zerionWallet/zerionWallet.js +2 -2
  98. package/package.json +4 -4
package/dist/chunk-OTMBU2BL.js ADDED
@@ -0,0 +1,204 @@
1
+ "use client";
2
+ import {
3
+ baseTheme
4
+ } from "./chunk-MGQZMUZ2.js";
5
+
6
+ // src/themes/darkTheme.ts
7
+ var accentColors = {
8
+ blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
9
+ green: { accentColor: "#66CC00", accentColorForeground: "#000" },
10
+ orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
11
+ pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
12
+ purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
13
+ red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
14
+ white: { accentColor: "#FFF", accentColorForeground: "#000" }
15
+ };
16
+ var defaultAccentColor = accentColors.white;
17
+ var darkTheme = ({
18
+ accentColor = defaultAccentColor.accentColor,
19
+ accentColorForeground = defaultAccentColor.accentColorForeground,
20
+ customColors,
21
+ customShadows,
22
+ ...baseThemeOptions
23
+ } = {}) => ({
24
+ ...baseTheme(baseThemeOptions),
25
+ colors: {
26
+ accentColor,
27
+ accentColorForeground,
28
+ actionButtonBorder: "rgba(255, 255, 255, 0.04)",
29
+ connectButtonBackground: "#000",
30
+ connectButtonBackgroundError: "#C60000",
31
+ connectButtonText: "#FFF",
32
+ connectButtonTextError: "#FFF",
33
+ connectionIndicator: "#30E000",
34
+ error: accentColors.red.accentColor,
35
+ errorBackground: "#F2E6E4",
36
+ errorBorder: "rgba(243, 65, 38, 0.2)",
37
+ generalBorder: "#292929",
38
+ // strokeColor in figma
39
+ generalBorderDim: "rgba(255, 255, 255, 0.04)",
40
+ menuItemBackground: "rgba(255, 255, 255, 0.03)",
41
+ selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
42
+ focusedOptionBorder: "#8C8C8C",
43
+ standby: "#F6851B",
44
+ success: "#66CC00",
45
+ delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
46
+ // backward compatibility
47
+ chainIconBorder: "#fff",
48
+ // FUNKIT COLORS
49
+ // modal backgrounds
50
+ modalBackdrop: "rgba(0, 0, 0, 0.2)",
51
+ modalBackground: "#000000",
52
+ modalBorder: "#292929",
53
+ modalTopbarIcon: "#FFF",
54
+ offBackground: "#1F1F1F",
55
+ offBackgroundInverse: "#F2F2F2",
56
+ hoverState: "#333333",
57
+ lightStroke: "#333333",
58
+ mediumStroke: "#333333",
59
+ heavyStroke: "rgba(117, 117, 117, 0.40)",
60
+ strokeColor: "#333333",
61
+ //Text
62
+ primaryText: "#FFF",
63
+ secondaryText: "#8C8C8C",
64
+ tertiaryText: "rgba(255, 255, 255, 0.35)",
65
+ textSelection: "rgba(255, 255, 255, 0.10)",
66
+ // input
67
+ inputBackground: "#000000",
68
+ inputBorderBase: "#333333",
69
+ inputBorderHover: "#525252",
70
+ // tab
71
+ activeTabBorderColor: "#333333",
72
+ activeTabBackground: "#333333",
73
+ // button
74
+ actionColor: "#FFF",
75
+ actionColorHover: "rgba(255, 255, 255, 0.8)",
76
+ actionColorDisabled: "rgba(255, 255, 255, 0.65)",
77
+ buttonPrimary: accentColor,
78
+ buttonDisabled: "rgba(255, 255, 255, 0.20)",
79
+ buttonTextPrimary: "#000000",
80
+ buttonTextHover: "#000000",
81
+ buttonTextDisabled: "#000000",
82
+ buttonWarning: accentColors.red.accentColor,
83
+ buttonSuccess: "#2EA200",
84
+ transparent: "transparent",
85
+ buttonBackgroundTertiary: "#333333",
86
+ buttonBackgroundHoverTertiary: "#333333",
87
+ buttonBackgroundDisabledTertiary: "transparent",
88
+ buttonTextTertiary: "#FFF",
89
+ buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
90
+ buttonBackground: "#FFF",
91
+ buttonBackgroundHover: "#f2f2f2",
92
+ buttonBackgroundPressed: "#FFF",
93
+ buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
94
+ buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
95
+ buttonTextSecondary: "#FFFFFF",
96
+ buttonIconBackgroundHover: "#333333",
97
+ buttonIconBackgroundPressed: "#333333",
98
+ buttonIconStroke: "rgba(255, 255, 255, 0.35)",
99
+ buttonBorderTertiary: "transparent",
100
+ buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
101
+ buttonFocusedOutline: "none",
102
+ buttonBorderGradient: "none",
103
+ buttonHoverBorderGradient: "none",
104
+ buttonDisabledBorderGradient: "none",
105
+ // TODO: Make common colors when refactoring the design system
106
+ inputAmountQuickOptionBaseBackground: "#1F1F1F",
107
+ inputAmountQuickOptionHoverBackground: "#333333",
108
+ inputAmountQuickOptionActiveBackground: "#333333",
109
+ inputAmountQuickOptionDisabledBackground: "#333333",
110
+ inputAmountQuickOptionBaseBorder: "#f2f2f2",
111
+ inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
112
+ inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
113
+ inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
114
+ inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
115
+ youPayYouReceiveBackground: "#000000",
116
+ // modalBackground
117
+ youPayYouReceiveBorder: "#333333",
118
+ // mediumStroke
119
+ youPayYouReceivePrimaryText: "#FFF",
120
+ // primaryText
121
+ youPayYouReceiveSecondaryText: "#8C8C8C",
122
+ // secondaryText
123
+ // badges
124
+ badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
125
+ badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
126
+ badgeTextSuccess: "rgb(124, 242, 136)",
127
+ newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
128
+ newBadgeBorder: "rgba(122, 221, 122, 0.3)",
129
+ newBadgeText: "#A4FF9A",
130
+ approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
131
+ approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
132
+ approvedBadgeText: "#8FFFA9",
133
+ failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
134
+ failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
135
+ failedBadgeText: "#F88877",
136
+ announceGradientFrom: "#AAAAAA",
137
+ announceGradientTo: "#BEBEBE",
138
+ fiatPendingGradientFrom: "#AAAAAA",
139
+ fiatPendingGradientTo: "#BEBEBE",
140
+ fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
141
+ fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
142
+ fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
143
+ fiatAccountIconFill: "#002F5E",
144
+ fiatAccountGradientFrom: "#3A82FE",
145
+ fiatAccountGradientTo: "#73A7FF",
146
+ modalHeaderDivider: "#333333",
147
+ // lightStroke
148
+ modalFooterDivider: "#333333",
149
+ // lightStroke
150
+ spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
151
+ // 30% buttonTextPrimary
152
+ spinnerIndicator: customColors?.primaryText ?? "#000",
153
+ // 100% buttonTextPrimary
154
+ spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
155
+ // 30% buttonTextPrimary
156
+ spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
157
+ // 100% buttonTextPrimary
158
+ // Override colors
159
+ ...customColors || {},
160
+ // option Boxes
161
+ optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
162
+ // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
163
+ optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
164
+ dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
165
+ dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
166
+ dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
167
+ txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
168
+ txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333"
169
+ },
170
+ shadows: {
171
+ connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
172
+ dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
173
+ selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
174
+ selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
175
+ dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
176
+ notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
177
+ qrCode: "0px 0px 0px 1px rgba(255, 255, 255, 0.16)",
178
+ buttonShadow: "none",
179
+ buttonShadowTertiary: "none",
180
+ buttonHoverShadow: "none",
181
+ buttonHoverShadowTertiary: "none",
182
+ buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
183
+ buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
184
+ buttonDisabledShadow: "none",
185
+ buttonDisabledShadowTertiary: "none",
186
+ buttonInnerShadow: "none",
187
+ buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
188
+ buttonFocusedInnerShadow: "none",
189
+ buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
190
+ buttonHoverInnerShadow: "none",
191
+ buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
192
+ buttonDisabledInnerShadow: "none",
193
+ buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
194
+ selectedDropdownItem: "none",
195
+ // Override shadows
196
+ ...customShadows || {}
197
+ },
198
+ moonpayTheme: "dark"
199
+ });
200
+ darkTheme.accentColors = accentColors;
201
+
202
+ export {
203
+ darkTheme
204
+ };
package/dist/chunk-VWSYBHAK.js ADDED
@@ -0,0 +1,209 @@
1
+ "use client";
2
+ import {
3
+ baseTheme
4
+ } from "./chunk-5JRQC2VM.js";
5
+
6
+ // src/themes/darkTheme.ts
7
+ var accentColors = {
8
+ blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
9
+ green: { accentColor: "#66CC00", accentColorForeground: "#000" },
10
+ orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
11
+ pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
12
+ purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
13
+ red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
14
+ white: { accentColor: "#FFF", accentColorForeground: "#000" }
15
+ };
16
+ var defaultAccentColor = accentColors.white;
17
+ var darkTheme = ({
18
+ accentColor = defaultAccentColor.accentColor,
19
+ accentColorForeground = defaultAccentColor.accentColorForeground,
20
+ customColors,
21
+ customShadows,
22
+ ...baseThemeOptions
23
+ } = {}) => ({
24
+ ...baseTheme(baseThemeOptions),
25
+ colors: {
26
+ accentColor,
27
+ accentColorForeground,
28
+ actionButtonBorder: "rgba(255, 255, 255, 0.04)",
29
+ connectButtonBackground: "#000",
30
+ connectButtonBackgroundError: "#C60000",
31
+ connectButtonText: "#FFF",
32
+ connectButtonTextError: "#FFF",
33
+ connectionIndicator: "#30E000",
34
+ error: accentColors.red.accentColor,
35
+ errorBackground: "#F2E6E4",
36
+ errorBorder: "rgba(243, 65, 38, 0.2)",
37
+ generalBorder: "#292929",
38
+ // strokeColor in figma
39
+ generalBorderDim: "rgba(255, 255, 255, 0.04)",
40
+ menuItemBackground: "rgba(255, 255, 255, 0.03)",
41
+ selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
42
+ focusedOptionBorder: "#8C8C8C",
43
+ standby: "#F6851B",
44
+ success: "#66CC00",
45
+ delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
46
+ // backward compatibility
47
+ chainIconBorder: "#fff",
48
+ // FUNKIT COLORS
49
+ // modal backgrounds
50
+ modalBackdrop: "rgba(0, 0, 0, 0.2)",
51
+ modalBackground: "#000000",
52
+ modalBorder: "#292929",
53
+ modalTopbarIcon: "#FFF",
54
+ modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
55
+ modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
56
+ modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
57
+ modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
58
+ offBackground: "#1F1F1F",
59
+ offBackgroundInverse: "#F2F2F2",
60
+ hoverState: "#333333",
61
+ lightStroke: "#333333",
62
+ mediumStroke: "#333333",
63
+ heavyStroke: "rgba(117, 117, 117, 0.40)",
64
+ strokeColor: "#333333",
65
+ //Text
66
+ primaryText: "#FFF",
67
+ secondaryText: "#8C8C8C",
68
+ tertiaryText: "rgba(255, 255, 255, 0.35)",
69
+ textSelection: "rgba(255, 255, 255, 0.10)",
70
+ // input
71
+ inputBackground: "#000000",
72
+ inputBorderBase: "#333333",
73
+ inputBorderHover: "#525252",
74
+ // tab
75
+ activeTabBorderColor: "#333333",
76
+ activeTabBackground: "#333333",
77
+ // button
78
+ actionColor: "#FFF",
79
+ actionColorHover: "rgba(255, 255, 255, 0.8)",
80
+ actionColorDisabled: "rgba(255, 255, 255, 0.65)",
81
+ buttonPrimary: accentColor,
82
+ buttonDisabled: "rgba(255, 255, 255, 0.20)",
83
+ buttonTextPrimary: "#000000",
84
+ buttonTextHover: "#000000",
85
+ buttonTextDisabled: "#000000",
86
+ buttonWarning: accentColors.red.accentColor,
87
+ buttonSuccess: "#2EA200",
88
+ transparent: "transparent",
89
+ buttonBackgroundTertiary: "#333333",
90
+ buttonBackgroundHoverTertiary: "#333333",
91
+ buttonBackgroundDisabledTertiary: "transparent",
92
+ buttonTextTertiary: "#FFF",
93
+ buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
94
+ buttonBackground: "#FFF",
95
+ buttonBackgroundHover: "#f2f2f2",
96
+ buttonBackgroundPressed: "#FFF",
97
+ buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
98
+ buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
99
+ buttonTextSecondary: "#FFFFFF",
100
+ buttonIconBackgroundHover: "#333333",
101
+ buttonIconBackgroundPressed: "#333333",
102
+ buttonIconStroke: "rgba(255, 255, 255, 0.35)",
103
+ buttonBorderTertiary: "transparent",
104
+ buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
105
+ buttonFocusedOutline: "none",
106
+ buttonBorderGradient: "none",
107
+ buttonHoverBorderGradient: "none",
108
+ buttonDisabledBorderGradient: "none",
109
+ // TODO: Make common colors when refactoring the design system
110
+ inputAmountQuickOptionBaseBackground: "#1F1F1F",
111
+ inputAmountQuickOptionHoverBackground: "#333333",
112
+ inputAmountQuickOptionActiveBackground: "#333333",
113
+ inputAmountQuickOptionDisabledBackground: "#333333",
114
+ inputAmountQuickOptionBaseBorder: "#f2f2f2",
115
+ inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
116
+ inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
117
+ inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
118
+ inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
119
+ youPayYouReceiveBackground: "#000000",
120
+ // modalBackground
121
+ youPayYouReceiveBorder: "#333333",
122
+ // mediumStroke
123
+ youPayYouReceivePrimaryText: "#FFF",
124
+ // primaryText
125
+ youPayYouReceiveSecondaryText: "#8C8C8C",
126
+ // secondaryText
127
+ // badges
128
+ badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
129
+ badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
130
+ badgeTextSuccess: "rgb(124, 242, 136)",
131
+ newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
132
+ newBadgeBorder: "rgba(122, 221, 122, 0.3)",
133
+ newBadgeText: "#A4FF9A",
134
+ approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
135
+ approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
136
+ approvedBadgeText: "#8FFFA9",
137
+ failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
138
+ failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
139
+ failedBadgeText: "#F88877",
140
+ announceGradientFrom: "#AAAAAA",
141
+ announceGradientTo: "#BEBEBE",
142
+ fiatPendingGradientFrom: "#AAAAAA",
143
+ fiatPendingGradientTo: "#BEBEBE",
144
+ fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
145
+ fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
146
+ fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
147
+ fiatAccountIconFill: "#002F5E",
148
+ fiatAccountGradientFrom: "#3A82FE",
149
+ fiatAccountGradientTo: "#73A7FF",
150
+ modalHeaderDivider: "#333333",
151
+ // lightStroke
152
+ modalFooterDivider: "#333333",
153
+ // lightStroke
154
+ spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
155
+ // 30% buttonTextPrimary
156
+ spinnerIndicator: customColors?.primaryText ?? "#000",
157
+ // 100% buttonTextPrimary
158
+ spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
159
+ // 30% buttonTextPrimary
160
+ spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
161
+ // 100% buttonTextPrimary
162
+ // Override colors
163
+ ...customColors || {},
164
+ // option Boxes
165
+ optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
166
+ // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
167
+ optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
168
+ dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
169
+ dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
170
+ dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
171
+ txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
172
+ txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
173
+ counterRingColor: customColors?.counterRingColor ?? accentColor
174
+ },
175
+ shadows: {
176
+ connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
177
+ dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
178
+ selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
179
+ selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
180
+ dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
181
+ notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
182
+ qrCode: "0px 0px 0px 1px rgba(255, 255, 255, 0.16)",
183
+ buttonShadow: "none",
184
+ buttonShadowTertiary: "none",
185
+ buttonHoverShadow: "none",
186
+ buttonHoverShadowTertiary: "none",
187
+ buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
188
+ buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
189
+ buttonDisabledShadow: "none",
190
+ buttonDisabledShadowTertiary: "none",
191
+ buttonInnerShadow: "none",
192
+ buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
193
+ buttonFocusedInnerShadow: "none",
194
+ buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
195
+ buttonHoverInnerShadow: "none",
196
+ buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
197
+ buttonDisabledInnerShadow: "none",
198
+ buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
199
+ selectedDropdownItem: "none",
200
+ // Override shadows
201
+ ...customShadows || {}
202
+ },
203
+ moonpayTheme: "dark"
204
+ });
205
+ darkTheme.accentColors = accentColors;
206
+
207
+ export {
208
+ darkTheme
209
+ };