@funkit/connect 8.1.0 → 8.2.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.
- package/CHANGELOG.md +33 -0
- package/dist/__generated__/default_configs.d.ts +7 -6
- package/dist/{chunk-IVO7KGHT.js → chunk-JIC2XXGY.js} +7 -2
- package/dist/{chunk-5GV4UXWB.js → chunk-QHRAQNOB.js} +7 -2
- package/dist/{chunk-RJAD5CZH.js → chunk-WIDI2TYC.js} +28 -2
- package/dist/clients/fanatics.css +10067 -0
- package/dist/clients/fanatics.d.ts +31 -0
- package/dist/clients/fanatics.js +525 -0
- package/dist/components/Box/Box.d.ts +47 -46
- package/dist/components/Dialog/Dialog.d.ts +1 -1
- package/dist/components/FunBottomBar/FunBottomBar.d.ts +2 -1
- package/dist/components/FunButton/FunIconButton.d.ts +1 -1
- package/dist/components/FunInfoBanner/FunInfoBanner.d.ts +5 -1
- package/dist/components/FunInput/FunInput.d.ts +1 -0
- package/dist/components/FunOptionBox/FunOptionBox.css.d.ts +1 -1
- package/dist/components/FunOptionBox/FunOptionBox.d.ts +2 -1
- package/dist/components/Icons/BitcoinIcon.d.ts +4 -0
- package/dist/components/Icons/New/CashIcon.d.ts +4 -0
- package/dist/components/Tabs/Tabs.d.ts +10 -0
- package/dist/consts/customers.d.ts +1 -0
- package/dist/css/sprinkles.css.d.ts +136 -49
- package/dist/hooks/queries/useWithdrawalQuote.d.ts +2 -1
- package/dist/hooks/usePaymentSources.d.ts +3 -1
- package/dist/index.css +3710 -3090
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3450 -3157
- package/dist/modals/CheckoutModal/InputAmount/useAmountInput.d.ts +1 -0
- package/dist/modals/CheckoutModal/SourceChange/CryptoCashToggle.d.ts +9 -0
- package/dist/modals/CheckoutModal/SourceChange/DefaultSourceList.d.ts +12 -0
- package/dist/modals/CheckoutModal/SourceChange/FanaticsSourceList.d.ts +15 -0
- package/dist/modals/CheckoutModal/SourceChange/PayPal.d.ts +2 -0
- package/dist/modals/CheckoutModal/SourceChange/SourceChange.d.ts +1 -1
- package/dist/modals/CheckoutModal/SourceChange/sourceChange.css.d.ts +1 -0
- package/dist/providers/FunkitConfigContext.d.ts +43 -4
- package/dist/providers/FunkitThemeProvider.d.ts +132 -3
- package/dist/themes/baseTheme.d.ts +2 -1
- package/dist/themes/baseTheme.js +1 -1
- package/dist/themes/darkTheme.js +2 -2
- package/dist/themes/lightTheme.js +2 -2
- package/dist/utils/flags/config.d.ts +3 -42
- package/dist/utils/flags/resolver.d.ts +34 -0
- package/dist/utils/funLogger.d.ts +2 -1
- package/dist/wallets/walletConnectors/index.js +21 -21
- package/package.json +5 -4
- package/dist/utils/flags/patches/enable-bitcoin-patch.d.ts +0 -13
|
@@ -4,6 +4,7 @@ import { type AmountInputDerivedState, type AmountInputInitOptions } from './sta
|
|
|
4
4
|
import { type InputAmountSuggestion } from './utils';
|
|
5
5
|
export interface UseAmountInputResult extends AmountInputDerivedState {
|
|
6
6
|
fontSize: number;
|
|
7
|
+
inputHeight: number;
|
|
7
8
|
inputWidth: number | undefined;
|
|
8
9
|
onChange(event: FunInputChangeEvent): void;
|
|
9
10
|
ref: RefObject<HTMLInputElement>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
|
|
3
|
+
interface CryptoCashToggleProps {
|
|
4
|
+
activeTab: PaymentMethodType;
|
|
5
|
+
onTabChange: (tab: PaymentMethodType) => void;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
}
|
|
8
|
+
export declare const CryptoCashToggle: ({ activeTab, onTabChange, style, }: CryptoCashToggleProps) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ConnectablePaymentMethodInfo, PaymentMethod } from '../../../domains/paymentMethods';
|
|
3
|
+
interface DefaultSourceListProps {
|
|
4
|
+
preferred: (ConnectablePaymentMethodInfo | PaymentMethod)[];
|
|
5
|
+
moreSources: (ConnectablePaymentMethodInfo | PaymentMethod)[];
|
|
6
|
+
comingSoon: PaymentMethod[];
|
|
7
|
+
hasMoreSources: boolean;
|
|
8
|
+
renderSource: (source: ConnectablePaymentMethodInfo | PaymentMethod) => React.ReactNode;
|
|
9
|
+
renderComingSoon: (source: PaymentMethod) => React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare function DefaultSourceList({ preferred, moreSources, comingSoon, hasMoreSources, renderSource, renderComingSoon, }: DefaultSourceListProps): React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ConnectablePaymentMethodInfo, PaymentMethod } from '../../../domains/paymentMethods';
|
|
3
|
+
import type { PaymentMethodType } from '../../../hooks/usePaymentSources';
|
|
4
|
+
interface FanaticsSourceListProps {
|
|
5
|
+
preferred: (ConnectablePaymentMethodInfo | PaymentMethod)[];
|
|
6
|
+
moreSources: (ConnectablePaymentMethodInfo | PaymentMethod)[];
|
|
7
|
+
comingSoon: PaymentMethod[];
|
|
8
|
+
isFallback: boolean;
|
|
9
|
+
renderSource: (source: ConnectablePaymentMethodInfo | PaymentMethod) => React.ReactNode;
|
|
10
|
+
renderComingSoon: (source: PaymentMethod) => React.ReactNode;
|
|
11
|
+
cryptoCashTab: PaymentMethodType;
|
|
12
|
+
onTabChange: (tab: PaymentMethodType) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function FanaticsSourceList({ cryptoCashTab, isFallback, onTabChange, preferred, moreSources, comingSoon, renderSource, renderComingSoon, }: FanaticsSourceListProps): React.JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -27,4 +27,4 @@ export type SourceChangeNext = {
|
|
|
27
27
|
paymentMethodInfo: ConnectablePaymentMethodInfo;
|
|
28
28
|
};
|
|
29
29
|
export declare const SourceChangeInfo: ModalStepInfo<FunCheckoutStep.SOURCE_CHANGE>;
|
|
30
|
-
export declare function SourceChange({ modalState, onNext, setModalState, }: ModalStepComponentProps<FunCheckoutStep.SOURCE_CHANGE>): React.JSX.Element;
|
|
30
|
+
export declare function SourceChange({ modalState, onClose, onNext, setModalState, }: ModalStepComponentProps<FunCheckoutStep.SOURCE_CHANGE>): React.JSX.Element;
|
|
@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
|
|
|
2
2
|
export interface FunkitTextCustomizationsConfig {
|
|
3
3
|
virtualFiat: string;
|
|
4
4
|
brokerageOrExchange: string;
|
|
5
|
+
checkoutModalCloseButtonLabel: string;
|
|
5
6
|
debitOrCredit: string;
|
|
6
7
|
accountBalance: string;
|
|
7
8
|
selectAccount: string;
|
|
@@ -15,6 +16,14 @@ export interface FunkitTextCustomizationsConfig {
|
|
|
15
16
|
payAmountLabel: string;
|
|
16
17
|
receiveAmountLabel: string;
|
|
17
18
|
};
|
|
19
|
+
paymentMethodSubtitles: {
|
|
20
|
+
accountBalance?: string;
|
|
21
|
+
brokerageOrExchange?: string;
|
|
22
|
+
debitOrCredit?: string;
|
|
23
|
+
paypal?: string;
|
|
24
|
+
transferTokens?: string;
|
|
25
|
+
virtualFiat?: string;
|
|
26
|
+
};
|
|
18
27
|
}
|
|
19
28
|
export interface FunkitUiDestinationConfig {
|
|
20
29
|
/** What icon (15x15) to show in the `destination` row - defaults to user wallet icon */
|
|
@@ -33,8 +42,10 @@ export interface FunkitUiSelectedRouteConfig {
|
|
|
33
42
|
export interface FunkitUiCustomizationsConfig {
|
|
34
43
|
/** Title alignment - defaults to "center" */
|
|
35
44
|
alignTitle?: 'left' | 'center';
|
|
36
|
-
/**
|
|
45
|
+
/** Whether to show CTA in uppercase - defaults to false */
|
|
37
46
|
callToActionsUppercase?: boolean;
|
|
47
|
+
/** Whether to enable compact list style for option boxes - defaults to false */
|
|
48
|
+
enableCompactList?: boolean;
|
|
38
49
|
confirmationScreen?: {
|
|
39
50
|
/** Custom destination icon and text used in checkout summary */
|
|
40
51
|
destinationConfig?: FunkitUiDestinationConfig;
|
|
@@ -63,29 +74,55 @@ export interface FunkitUiCustomizationsConfig {
|
|
|
63
74
|
allowTokenAmountInput?: boolean;
|
|
64
75
|
};
|
|
65
76
|
selectAssetScreen?: {
|
|
77
|
+
/** Whether to navigate directly on asset click, rather than having to select then click Continue - defaults to false */
|
|
78
|
+
navigateOnAssetClick?: boolean;
|
|
66
79
|
/**
|
|
67
80
|
* Whether to show target asset selection menu if dynamicTargetAssetCandidates exist - defaults to false
|
|
68
81
|
* @deprecated use sourceChangeScreen.showTargetAssetSelection instead
|
|
69
82
|
*/
|
|
70
83
|
showTargetAssetSelection?: boolean;
|
|
84
|
+
/** Function that returns a custom React component to render before other UIs in the select asset screen */
|
|
85
|
+
customTopComponent?: () => ReactNode;
|
|
71
86
|
};
|
|
72
87
|
transferCryptoScreen?: {
|
|
73
88
|
/** Whether to show the "You Send -> You Receive" block in the transfer crypto screen - defaults to false */
|
|
74
89
|
showYouSendYouReceive?: boolean;
|
|
90
|
+
/** Function that returns a custom React component to render before other UIs in the transfer crypto screen */
|
|
91
|
+
customTopComponent?: () => ReactNode;
|
|
92
|
+
};
|
|
93
|
+
selectBrokerageScreen?: {
|
|
94
|
+
/** Function that returns a custom React component to render before other UIs in the select brokerage screen */
|
|
95
|
+
customTopComponent?: () => ReactNode;
|
|
96
|
+
};
|
|
97
|
+
connectExchangeScreen?: {
|
|
98
|
+
/** Function that returns a custom React component to render before other UIs in the connect exchange screen */
|
|
99
|
+
customTopComponent?: () => ReactNode;
|
|
75
100
|
};
|
|
76
101
|
sourceChangeScreen?: {
|
|
77
102
|
/** Whether to show target asset selection menu if dynamicTargetAssetCandidates exist - defaults to false */
|
|
78
103
|
showTargetAssetSelection?: boolean;
|
|
79
104
|
/** Whether to show wallet option when balance is insufficient - defaults to false (hides wallet) */
|
|
80
105
|
showWalletOnInsufficientBalance?: boolean;
|
|
106
|
+
/** Function that returns a custom React component to render before other UIs in the source change screen */
|
|
107
|
+
customTopComponent?: () => ReactNode;
|
|
81
108
|
};
|
|
82
109
|
}
|
|
110
|
+
/**
|
|
111
|
+
* Makes all properties of T required except for customTopComponent which remains optional.
|
|
112
|
+
* Used for internal screen configs where we want defaults for all settings but allow
|
|
113
|
+
* customTopComponent to be optionally provided.
|
|
114
|
+
*/
|
|
115
|
+
type RequiredExceptCustomTop<T> = Required<Omit<T & {}, 'customTopComponent'>> & {
|
|
116
|
+
customTopComponent?: () => ReactNode;
|
|
117
|
+
};
|
|
83
118
|
export type FunkitUiCustomizationsConfigInternal = Required<FunkitUiCustomizationsConfig> & {
|
|
84
119
|
confirmationScreen: FunkitUiCustomizationsConfig['confirmationScreen'] & Required<Omit<FunkitUiCustomizationsConfig['confirmationScreen'] & {}, 'destinationConfig' | 'selectedRouteConfig'>>;
|
|
85
120
|
inputAmountScreen: Required<FunkitUiCustomizationsConfig['inputAmountScreen'] & {}>;
|
|
86
|
-
selectAssetScreen:
|
|
87
|
-
transferCryptoScreen:
|
|
88
|
-
|
|
121
|
+
selectAssetScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['selectAssetScreen']>;
|
|
122
|
+
transferCryptoScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['transferCryptoScreen']>;
|
|
123
|
+
selectBrokerageScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['selectBrokerageScreen']>;
|
|
124
|
+
connectExchangeScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['connectExchangeScreen']>;
|
|
125
|
+
sourceChangeScreen: RequiredExceptCustomTop<FunkitUiCustomizationsConfig['sourceChangeScreen']>;
|
|
89
126
|
};
|
|
90
127
|
export declare const DEFAULT_TEXT_CUSTOMIZATIONS: FunkitTextCustomizationsConfig;
|
|
91
128
|
export declare const DEFAULT_UI_CUSTOMIZATIONS: FunkitUiCustomizationsConfigInternal;
|
|
@@ -100,6 +137,8 @@ export type FunkitConfig = {
|
|
|
100
137
|
uiCustomizations?: FunkitUiCustomizationsConfig;
|
|
101
138
|
/** used to link funkit users to your own user system */
|
|
102
139
|
externalUserId?: string;
|
|
140
|
+
/** Disable Datadog logging - defaults to false (logging enabled) */
|
|
141
|
+
disableLogging?: boolean;
|
|
103
142
|
};
|
|
104
143
|
interface FinalFunkitConfigInternal extends FunkitConfig {
|
|
105
144
|
textCustomizations: FunkitTextCustomizationsConfig;
|
|
@@ -79,6 +79,7 @@ export declare const useActiveTheme: () => {
|
|
|
79
79
|
buttonIconBackgroundHover: string;
|
|
80
80
|
buttonIconBackgroundPressed: string;
|
|
81
81
|
buttonIconStroke: string;
|
|
82
|
+
buttonBorderTertiary: string;
|
|
82
83
|
buttonBorderFocusedTertiary: string;
|
|
83
84
|
buttonFocusedOutline: string;
|
|
84
85
|
buttonBorderGradient: string;
|
|
@@ -121,20 +122,28 @@ export declare const useActiveTheme: () => {
|
|
|
121
122
|
fiatAccountGradientFrom: string;
|
|
122
123
|
fiatAccountGradientTo: string;
|
|
123
124
|
optionBoxBackground: string;
|
|
125
|
+
optionBoxBackgroundUninteractive: string;
|
|
126
|
+
dropdownActiveItemBackgroundBase: string;
|
|
127
|
+
dropdownActiveItemBackgroundHover: string;
|
|
128
|
+
dropdownActiveItemBackgroundDisabled: string;
|
|
124
129
|
spinnerBackground: string;
|
|
125
130
|
spinnerIndicator: string;
|
|
126
131
|
spinnerBackgroundVerifyAccount: string;
|
|
127
132
|
spinnerIndicatorVerifyAccount: string;
|
|
128
133
|
};
|
|
129
134
|
dimensions: {
|
|
135
|
+
inputAmountQuickOptionButtonHeight: string;
|
|
136
|
+
inputAmountMinHeight: string;
|
|
130
137
|
modalBottomBarButtonHeight: string;
|
|
131
138
|
modalTopBarHeight: string;
|
|
139
|
+
selectAssetItemIconSize: string;
|
|
132
140
|
};
|
|
133
141
|
fonts: {
|
|
142
|
+
body: string;
|
|
134
143
|
buttonTextPrimary: string;
|
|
135
144
|
buttonTextSecondary: string;
|
|
136
145
|
buttonTextTertiary: string;
|
|
137
|
-
|
|
146
|
+
inputAmount: string;
|
|
138
147
|
};
|
|
139
148
|
fontWeight: {
|
|
140
149
|
regular: string;
|
|
@@ -144,6 +153,10 @@ export declare const useActiveTheme: () => {
|
|
|
144
153
|
heavy: string;
|
|
145
154
|
modalTopbarTitle: string;
|
|
146
155
|
modalBottomBarButtonText: string;
|
|
156
|
+
paymentMethodItemSubtitle: string;
|
|
157
|
+
paymentMethodItemTitle: string;
|
|
158
|
+
selectAssetItemSubtitle: string;
|
|
159
|
+
selectAssetItemTitle: string;
|
|
147
160
|
};
|
|
148
161
|
fontSize: {
|
|
149
162
|
'10': {
|
|
@@ -198,6 +211,10 @@ export declare const useActiveTheme: () => {
|
|
|
198
211
|
fontSize: string;
|
|
199
212
|
lineHeight: string;
|
|
200
213
|
};
|
|
214
|
+
inputAmount: {
|
|
215
|
+
fontSize: string;
|
|
216
|
+
lineHeight: string;
|
|
217
|
+
};
|
|
201
218
|
modalTopbarSubtitle: {
|
|
202
219
|
fontSize: string;
|
|
203
220
|
lineHeight: string;
|
|
@@ -210,6 +227,22 @@ export declare const useActiveTheme: () => {
|
|
|
210
227
|
fontSize: string;
|
|
211
228
|
lineHeight: string;
|
|
212
229
|
};
|
|
230
|
+
paymentMethodItemSubtitle: {
|
|
231
|
+
fontSize: string;
|
|
232
|
+
lineHeight: string;
|
|
233
|
+
};
|
|
234
|
+
paymentMethodItemTitle: {
|
|
235
|
+
fontSize: string;
|
|
236
|
+
lineHeight: string;
|
|
237
|
+
};
|
|
238
|
+
selectAssetItemSubtitle: {
|
|
239
|
+
fontSize: string;
|
|
240
|
+
lineHeight: string;
|
|
241
|
+
};
|
|
242
|
+
selectAssetItemTitle: {
|
|
243
|
+
fontSize: string;
|
|
244
|
+
lineHeight: string;
|
|
245
|
+
};
|
|
213
246
|
};
|
|
214
247
|
radii: {
|
|
215
248
|
actionButton: string;
|
|
@@ -232,6 +265,7 @@ export declare const useActiveTheme: () => {
|
|
|
232
265
|
};
|
|
233
266
|
borderWidths: {
|
|
234
267
|
activeOptionBorderWidth: string;
|
|
268
|
+
buttonTertiaryBorderWidth: string;
|
|
235
269
|
};
|
|
236
270
|
shadows: {
|
|
237
271
|
connectButton: string;
|
|
@@ -265,6 +299,15 @@ export declare const useActiveTheme: () => {
|
|
|
265
299
|
modalPaddingBottomUpper: string;
|
|
266
300
|
modalPaddingBottomLower: string;
|
|
267
301
|
modalTopBarVerticalTextSpacing: string;
|
|
302
|
+
selectAssetItemPaddingX: string;
|
|
303
|
+
selectAssetItemPaddingY: string;
|
|
304
|
+
selectAssetItemTextGap: string;
|
|
305
|
+
selectBrokerageItemPaddingX: string;
|
|
306
|
+
selectBrokerageItemPaddingY: string;
|
|
307
|
+
youPayYouReceivePaddingY: string;
|
|
308
|
+
};
|
|
309
|
+
textTransforms: {
|
|
310
|
+
inputAmountQuickOptionButtonTextTransform: string;
|
|
268
311
|
};
|
|
269
312
|
blurs: {
|
|
270
313
|
modalOverlay: string;
|
|
@@ -339,6 +382,7 @@ export declare const useActiveTheme: () => {
|
|
|
339
382
|
buttonIconBackgroundHover: string;
|
|
340
383
|
buttonIconBackgroundPressed: string;
|
|
341
384
|
buttonIconStroke: string;
|
|
385
|
+
buttonBorderTertiary: string;
|
|
342
386
|
buttonBorderFocusedTertiary: string;
|
|
343
387
|
buttonFocusedOutline: string;
|
|
344
388
|
buttonBorderGradient: string;
|
|
@@ -381,20 +425,28 @@ export declare const useActiveTheme: () => {
|
|
|
381
425
|
fiatAccountGradientFrom: string;
|
|
382
426
|
fiatAccountGradientTo: string;
|
|
383
427
|
optionBoxBackground: string;
|
|
428
|
+
optionBoxBackgroundUninteractive: string;
|
|
429
|
+
dropdownActiveItemBackgroundBase: string;
|
|
430
|
+
dropdownActiveItemBackgroundHover: string;
|
|
431
|
+
dropdownActiveItemBackgroundDisabled: string;
|
|
384
432
|
spinnerBackground: string;
|
|
385
433
|
spinnerIndicator: string;
|
|
386
434
|
spinnerBackgroundVerifyAccount: string;
|
|
387
435
|
spinnerIndicatorVerifyAccount: string;
|
|
388
436
|
};
|
|
389
437
|
dimensions: {
|
|
438
|
+
inputAmountQuickOptionButtonHeight: string;
|
|
439
|
+
inputAmountMinHeight: string;
|
|
390
440
|
modalBottomBarButtonHeight: string;
|
|
391
441
|
modalTopBarHeight: string;
|
|
442
|
+
selectAssetItemIconSize: string;
|
|
392
443
|
};
|
|
393
444
|
fonts: {
|
|
445
|
+
body: string;
|
|
394
446
|
buttonTextPrimary: string;
|
|
395
447
|
buttonTextSecondary: string;
|
|
396
448
|
buttonTextTertiary: string;
|
|
397
|
-
|
|
449
|
+
inputAmount: string;
|
|
398
450
|
};
|
|
399
451
|
fontWeight: {
|
|
400
452
|
regular: string;
|
|
@@ -404,6 +456,10 @@ export declare const useActiveTheme: () => {
|
|
|
404
456
|
heavy: string;
|
|
405
457
|
modalTopbarTitle: string;
|
|
406
458
|
modalBottomBarButtonText: string;
|
|
459
|
+
paymentMethodItemSubtitle: string;
|
|
460
|
+
paymentMethodItemTitle: string;
|
|
461
|
+
selectAssetItemSubtitle: string;
|
|
462
|
+
selectAssetItemTitle: string;
|
|
407
463
|
};
|
|
408
464
|
fontSize: {
|
|
409
465
|
'10': {
|
|
@@ -458,6 +514,10 @@ export declare const useActiveTheme: () => {
|
|
|
458
514
|
fontSize: string;
|
|
459
515
|
lineHeight: string;
|
|
460
516
|
};
|
|
517
|
+
inputAmount: {
|
|
518
|
+
fontSize: string;
|
|
519
|
+
lineHeight: string;
|
|
520
|
+
};
|
|
461
521
|
modalTopbarSubtitle: {
|
|
462
522
|
fontSize: string;
|
|
463
523
|
lineHeight: string;
|
|
@@ -470,6 +530,22 @@ export declare const useActiveTheme: () => {
|
|
|
470
530
|
fontSize: string;
|
|
471
531
|
lineHeight: string;
|
|
472
532
|
};
|
|
533
|
+
paymentMethodItemSubtitle: {
|
|
534
|
+
fontSize: string;
|
|
535
|
+
lineHeight: string;
|
|
536
|
+
};
|
|
537
|
+
paymentMethodItemTitle: {
|
|
538
|
+
fontSize: string;
|
|
539
|
+
lineHeight: string;
|
|
540
|
+
};
|
|
541
|
+
selectAssetItemSubtitle: {
|
|
542
|
+
fontSize: string;
|
|
543
|
+
lineHeight: string;
|
|
544
|
+
};
|
|
545
|
+
selectAssetItemTitle: {
|
|
546
|
+
fontSize: string;
|
|
547
|
+
lineHeight: string;
|
|
548
|
+
};
|
|
473
549
|
};
|
|
474
550
|
radii: {
|
|
475
551
|
actionButton: string;
|
|
@@ -492,6 +568,7 @@ export declare const useActiveTheme: () => {
|
|
|
492
568
|
};
|
|
493
569
|
borderWidths: {
|
|
494
570
|
activeOptionBorderWidth: string;
|
|
571
|
+
buttonTertiaryBorderWidth: string;
|
|
495
572
|
};
|
|
496
573
|
shadows: {
|
|
497
574
|
connectButton: string;
|
|
@@ -525,6 +602,15 @@ export declare const useActiveTheme: () => {
|
|
|
525
602
|
modalPaddingBottomUpper: string;
|
|
526
603
|
modalPaddingBottomLower: string;
|
|
527
604
|
modalTopBarVerticalTextSpacing: string;
|
|
605
|
+
selectAssetItemPaddingX: string;
|
|
606
|
+
selectAssetItemPaddingY: string;
|
|
607
|
+
selectAssetItemTextGap: string;
|
|
608
|
+
selectBrokerageItemPaddingX: string;
|
|
609
|
+
selectBrokerageItemPaddingY: string;
|
|
610
|
+
youPayYouReceivePaddingY: string;
|
|
611
|
+
};
|
|
612
|
+
textTransforms: {
|
|
613
|
+
inputAmountQuickOptionButtonTextTransform: string;
|
|
528
614
|
};
|
|
529
615
|
blurs: {
|
|
530
616
|
modalOverlay: string;
|
|
@@ -597,6 +683,7 @@ export declare const useActiveTheme: () => {
|
|
|
597
683
|
buttonIconBackgroundHover: string;
|
|
598
684
|
buttonIconBackgroundPressed: string;
|
|
599
685
|
buttonIconStroke: string;
|
|
686
|
+
buttonBorderTertiary: string;
|
|
600
687
|
buttonBorderFocusedTertiary: string;
|
|
601
688
|
buttonFocusedOutline: string;
|
|
602
689
|
buttonBorderGradient: string;
|
|
@@ -639,20 +726,28 @@ export declare const useActiveTheme: () => {
|
|
|
639
726
|
fiatAccountGradientFrom: string;
|
|
640
727
|
fiatAccountGradientTo: string;
|
|
641
728
|
optionBoxBackground: string;
|
|
729
|
+
optionBoxBackgroundUninteractive: string;
|
|
730
|
+
dropdownActiveItemBackgroundBase: string;
|
|
731
|
+
dropdownActiveItemBackgroundHover: string;
|
|
732
|
+
dropdownActiveItemBackgroundDisabled: string;
|
|
642
733
|
spinnerBackground: string;
|
|
643
734
|
spinnerIndicator: string;
|
|
644
735
|
spinnerBackgroundVerifyAccount: string;
|
|
645
736
|
spinnerIndicatorVerifyAccount: string;
|
|
646
737
|
};
|
|
647
738
|
dimensions: {
|
|
739
|
+
inputAmountQuickOptionButtonHeight: string;
|
|
740
|
+
inputAmountMinHeight: string;
|
|
648
741
|
modalBottomBarButtonHeight: string;
|
|
649
742
|
modalTopBarHeight: string;
|
|
743
|
+
selectAssetItemIconSize: string;
|
|
650
744
|
};
|
|
651
745
|
fonts: {
|
|
746
|
+
body: string;
|
|
652
747
|
buttonTextPrimary: string;
|
|
653
748
|
buttonTextSecondary: string;
|
|
654
749
|
buttonTextTertiary: string;
|
|
655
|
-
|
|
750
|
+
inputAmount: string;
|
|
656
751
|
};
|
|
657
752
|
fontWeight: {
|
|
658
753
|
regular: string;
|
|
@@ -662,6 +757,10 @@ export declare const useActiveTheme: () => {
|
|
|
662
757
|
heavy: string;
|
|
663
758
|
modalTopbarTitle: string;
|
|
664
759
|
modalBottomBarButtonText: string;
|
|
760
|
+
paymentMethodItemSubtitle: string;
|
|
761
|
+
paymentMethodItemTitle: string;
|
|
762
|
+
selectAssetItemSubtitle: string;
|
|
763
|
+
selectAssetItemTitle: string;
|
|
665
764
|
};
|
|
666
765
|
fontSize: {
|
|
667
766
|
'10': {
|
|
@@ -716,6 +815,10 @@ export declare const useActiveTheme: () => {
|
|
|
716
815
|
fontSize: string;
|
|
717
816
|
lineHeight: string;
|
|
718
817
|
};
|
|
818
|
+
inputAmount: {
|
|
819
|
+
fontSize: string;
|
|
820
|
+
lineHeight: string;
|
|
821
|
+
};
|
|
719
822
|
modalTopbarSubtitle: {
|
|
720
823
|
fontSize: string;
|
|
721
824
|
lineHeight: string;
|
|
@@ -728,6 +831,22 @@ export declare const useActiveTheme: () => {
|
|
|
728
831
|
fontSize: string;
|
|
729
832
|
lineHeight: string;
|
|
730
833
|
};
|
|
834
|
+
paymentMethodItemSubtitle: {
|
|
835
|
+
fontSize: string;
|
|
836
|
+
lineHeight: string;
|
|
837
|
+
};
|
|
838
|
+
paymentMethodItemTitle: {
|
|
839
|
+
fontSize: string;
|
|
840
|
+
lineHeight: string;
|
|
841
|
+
};
|
|
842
|
+
selectAssetItemSubtitle: {
|
|
843
|
+
fontSize: string;
|
|
844
|
+
lineHeight: string;
|
|
845
|
+
};
|
|
846
|
+
selectAssetItemTitle: {
|
|
847
|
+
fontSize: string;
|
|
848
|
+
lineHeight: string;
|
|
849
|
+
};
|
|
731
850
|
};
|
|
732
851
|
radii: {
|
|
733
852
|
actionButton: string;
|
|
@@ -750,6 +869,7 @@ export declare const useActiveTheme: () => {
|
|
|
750
869
|
};
|
|
751
870
|
borderWidths: {
|
|
752
871
|
activeOptionBorderWidth: string;
|
|
872
|
+
buttonTertiaryBorderWidth: string;
|
|
753
873
|
};
|
|
754
874
|
shadows: {
|
|
755
875
|
connectButton: string;
|
|
@@ -783,6 +903,15 @@ export declare const useActiveTheme: () => {
|
|
|
783
903
|
modalPaddingBottomUpper: string;
|
|
784
904
|
modalPaddingBottomLower: string;
|
|
785
905
|
modalTopBarVerticalTextSpacing: string;
|
|
906
|
+
selectAssetItemPaddingX: string;
|
|
907
|
+
selectAssetItemPaddingY: string;
|
|
908
|
+
selectAssetItemTextGap: string;
|
|
909
|
+
selectBrokerageItemPaddingX: string;
|
|
910
|
+
selectBrokerageItemPaddingY: string;
|
|
911
|
+
youPayYouReceivePaddingY: string;
|
|
912
|
+
};
|
|
913
|
+
textTransforms: {
|
|
914
|
+
inputAmountQuickOptionButtonTextTransform: string;
|
|
786
915
|
};
|
|
787
916
|
blurs: {
|
|
788
917
|
modalOverlay: string;
|
|
@@ -18,12 +18,13 @@ interface BaseThemeOptions {
|
|
|
18
18
|
customBorderWidths?: Partial<ThemeVars['borderWidths']>;
|
|
19
19
|
customDimensions?: Partial<ThemeVars['dimensions']>;
|
|
20
20
|
customSpacings?: Partial<ThemeVars['spacing']>;
|
|
21
|
+
customTextTransforms?: Partial<ThemeVars['textTransforms']>;
|
|
21
22
|
fontSizing?: FontSizeType;
|
|
22
23
|
borderRadius?: RadiusScale;
|
|
23
24
|
fontStack?: FontStack;
|
|
24
25
|
overlayBlur?: Blurs;
|
|
25
26
|
}
|
|
26
|
-
export declare const baseTheme: ({ borderRadius, fontStack, fontSizing, customFontFamily, customFontWeights, customFontSizings, customBorderWidths, customBorderRadiuses, customDimensions, customSpacings, overlayBlur, }: BaseThemeOptions) => Pick<ThemeVars, "radii" | "dimensions" | "fonts" | "fontWeight" | "fontSize" | "blurs" | "spacing" | "borderWidths">;
|
|
27
|
+
export declare const baseTheme: ({ borderRadius, fontStack, fontSizing, customFontFamily, customFontWeights, customFontSizings, customBorderWidths, customBorderRadiuses, customDimensions, customSpacings, customTextTransforms, overlayBlur, }: BaseThemeOptions) => Pick<ThemeVars, "radii" | "dimensions" | "fonts" | "fontWeight" | "fontSize" | "blurs" | "spacing" | "borderWidths" | "textTransforms">;
|
|
27
28
|
export interface AccentColor {
|
|
28
29
|
accentColor: string;
|
|
29
30
|
accentColorForeground: string;
|
package/dist/themes/baseTheme.js
CHANGED
package/dist/themes/darkTheme.js
CHANGED
|
@@ -56,35 +56,10 @@ export declare const flagConfig: {
|
|
|
56
56
|
readonly type: "string";
|
|
57
57
|
readonly default_value: string;
|
|
58
58
|
readonly overrides: [{
|
|
59
|
-
readonly if_all: [{
|
|
60
|
-
readonly key: "apiKey";
|
|
61
|
-
readonly type: "isAnyOf";
|
|
62
|
-
readonly values: ["Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6"];
|
|
63
|
-
}, {
|
|
64
|
-
readonly key: "userId";
|
|
65
|
-
readonly type: "isAnyOf";
|
|
66
|
-
readonly values: string[];
|
|
67
|
-
}];
|
|
68
59
|
readonly if_any: [{
|
|
69
|
-
readonly key: "userId";
|
|
70
|
-
readonly type: "isAnyOf";
|
|
71
|
-
readonly values: string[];
|
|
72
|
-
}];
|
|
73
|
-
readonly value: string;
|
|
74
|
-
}, {
|
|
75
|
-
readonly if_all: [{
|
|
76
60
|
readonly key: "apiKey";
|
|
77
61
|
readonly type: "isAnyOf";
|
|
78
62
|
readonly values: ["Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6"];
|
|
79
|
-
}, {
|
|
80
|
-
readonly key: "userId";
|
|
81
|
-
readonly type: "pctRollout";
|
|
82
|
-
readonly pct: 5;
|
|
83
|
-
}];
|
|
84
|
-
readonly if_any: [{
|
|
85
|
-
readonly key: "userId";
|
|
86
|
-
readonly type: "pctRollout";
|
|
87
|
-
readonly pct: 5;
|
|
88
63
|
}];
|
|
89
64
|
readonly value: string;
|
|
90
65
|
}, {
|
|
@@ -112,7 +87,7 @@ export declare const flagConfig: {
|
|
|
112
87
|
readonly if_any: [{
|
|
113
88
|
readonly key: "apiKey";
|
|
114
89
|
readonly type: "isAnyOf";
|
|
115
|
-
readonly values: ["clDebbfo9edXq1GydZ0CahSAfSimPj616lFa9p8e"
|
|
90
|
+
readonly values: ["clDebbfo9edXq1GydZ0CahSAfSimPj616lFa9p8e"];
|
|
116
91
|
}];
|
|
117
92
|
readonly value: string;
|
|
118
93
|
}];
|
|
@@ -230,7 +205,7 @@ export declare const flagConfig: {
|
|
|
230
205
|
readonly if_any: [{
|
|
231
206
|
readonly key: "apiKey";
|
|
232
207
|
readonly type: "isAnyOf";
|
|
233
|
-
readonly values: ["6TUi99Tq3O9MWj1IFX8Pv6spmPXzcvhy9NvBoeW2", "clDebbfo9edXq1GydZ0CahSAfSimPj616lFa9p8e", "57G91zNoew4nYxIoqSCpS1vWr8JT3gGVasNqMwgG", "M3uox3cw0u8YCPV9cIREA6AugUMvPFTk6qOpm4um", "cGlmpTmNh657m8TiV5RFdwna6FG5pxM6ajiNHvw3", "1QxzeJ4XKT78ba86whLct6sc7dW60Dl461UVWFdw", "ODW4jUppoG3H87YcY9GZhoGj4hX5W0w9mr24LEU8", "pLQBJsA6zS9tg990rbdBD6UdABkWRv5O60vlrVcW", "lUzTaIRxs95iin3pCAafB1ChA5akBiuQ1tjhXnau", "di9ZSqn1Ya68Y2XpBPUV1rCtNGXh8Xe5MGWzb1Xe", "53OWivH0fK2VIAuMZTycr52EnSEnPWj97Jy3Dpiz", "AH7lRIhbsL167nptv6eub9xDJXVHnYUm2vL7FLjK", "1cRIX8XoWP801OILra02i13IJ08IARBP5B6ydcnp", "i6e1I8cfX625TTwRJlD2DshKyAoaUtO8aeoaR4i2", "2hicPxo2vy2NMHcg2cEU9crOeKtDpc14NEfMCthc", "SMbBD7DS9b3EPcyBVg4a8az1rRWR9xB068chHoUN", "wQDLu86Qab61vbtru7thf8Yj0xaeqVUH4ohoXESu", "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6", "iMTsSsgDdI2FC0FjeEejS9LMxuJgDhFO3OHlwVjT", "HKHvPSPDezaxsTohFgDuG4WpKW6hB4SFYyztm9vc", "5UzOrcAE2F3rcuMX2EeIlaYv5VUcDe6Lyh0PeZX2"];
|
|
208
|
+
readonly values: ["6TUi99Tq3O9MWj1IFX8Pv6spmPXzcvhy9NvBoeW2", "clDebbfo9edXq1GydZ0CahSAfSimPj616lFa9p8e", "57G91zNoew4nYxIoqSCpS1vWr8JT3gGVasNqMwgG", "M3uox3cw0u8YCPV9cIREA6AugUMvPFTk6qOpm4um", "lI7amueGK94QtGa7sGGVf8n0XhIcn4sHFAZRu5Jj", "cGlmpTmNh657m8TiV5RFdwna6FG5pxM6ajiNHvw3", "1QxzeJ4XKT78ba86whLct6sc7dW60Dl461UVWFdw", "ODW4jUppoG3H87YcY9GZhoGj4hX5W0w9mr24LEU8", "pLQBJsA6zS9tg990rbdBD6UdABkWRv5O60vlrVcW", "lUzTaIRxs95iin3pCAafB1ChA5akBiuQ1tjhXnau", "di9ZSqn1Ya68Y2XpBPUV1rCtNGXh8Xe5MGWzb1Xe", "53OWivH0fK2VIAuMZTycr52EnSEnPWj97Jy3Dpiz", "AH7lRIhbsL167nptv6eub9xDJXVHnYUm2vL7FLjK", "1cRIX8XoWP801OILra02i13IJ08IARBP5B6ydcnp", "i6e1I8cfX625TTwRJlD2DshKyAoaUtO8aeoaR4i2", "2hicPxo2vy2NMHcg2cEU9crOeKtDpc14NEfMCthc", "SMbBD7DS9b3EPcyBVg4a8az1rRWR9xB068chHoUN", "wQDLu86Qab61vbtru7thf8Yj0xaeqVUH4ohoXESu", "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6", "iMTsSsgDdI2FC0FjeEejS9LMxuJgDhFO3OHlwVjT", "HKHvPSPDezaxsTohFgDuG4WpKW6hB4SFYyztm9vc", "5UzOrcAE2F3rcuMX2EeIlaYv5VUcDe6Lyh0PeZX2"];
|
|
234
209
|
}];
|
|
235
210
|
readonly value: true;
|
|
236
211
|
}];
|
|
@@ -292,21 +267,7 @@ export declare const flagConfig: {
|
|
|
292
267
|
readonly enable_bitcoin: {
|
|
293
268
|
readonly type: "boolean";
|
|
294
269
|
readonly default_value: false;
|
|
295
|
-
readonly overrides: [
|
|
296
|
-
readonly if_any: [{
|
|
297
|
-
readonly key: "apiKey";
|
|
298
|
-
readonly type: "isAnyOf";
|
|
299
|
-
readonly values: ["M3uox3cw0u8YCPV9cIREA6AugUMvPFTk6qOpm4um"];
|
|
300
|
-
}];
|
|
301
|
-
readonly value: false;
|
|
302
|
-
}, {
|
|
303
|
-
readonly if_any: [{
|
|
304
|
-
readonly key: "apiKey";
|
|
305
|
-
readonly type: "isAnyOf";
|
|
306
|
-
readonly values: ["2hicPxo2vy2NMHcg2cEU9crOeKtDpc14NEfMCthc", "Y53dikxXdT4E3afI1l8BMBSWgyhKvf65k6Dut1k6"];
|
|
307
|
-
}];
|
|
308
|
-
readonly value: false;
|
|
309
|
-
}];
|
|
270
|
+
readonly overrides: [];
|
|
310
271
|
};
|
|
311
272
|
readonly chain_info_banners: {
|
|
312
273
|
readonly type: "string";
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
type BaseCondition = {
|
|
2
|
+
type: 'country';
|
|
3
|
+
countryCodes: string[];
|
|
4
|
+
};
|
|
5
|
+
type Condition = BaseCondition | {
|
|
6
|
+
type: 'all';
|
|
7
|
+
conditions: Condition[];
|
|
8
|
+
} | {
|
|
9
|
+
type: 'any';
|
|
10
|
+
conditions: Condition[];
|
|
11
|
+
};
|
|
12
|
+
interface Variant<T> {
|
|
13
|
+
condition?: Condition;
|
|
14
|
+
value: T;
|
|
15
|
+
}
|
|
16
|
+
interface VariantConfig<T> {
|
|
17
|
+
variants: Variant<T>[];
|
|
18
|
+
value: T;
|
|
19
|
+
}
|
|
20
|
+
interface EvaluationContext {
|
|
21
|
+
countryCode?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Type guard to check if a value is a VariantConfig
|
|
25
|
+
* (used to distinguish from simple static configs)
|
|
26
|
+
*/
|
|
27
|
+
export declare function isVariantConfig<T>(value: unknown): value is VariantConfig<T>;
|
|
28
|
+
/**
|
|
29
|
+
* Resolves the appropriate value from a VariantConfig based on runtime context.
|
|
30
|
+
* Evaluates variants in order and returns the first matching variant's value.
|
|
31
|
+
* Falls back to default value if no variants match.
|
|
32
|
+
*/
|
|
33
|
+
export declare function resolveValue<T>(config: VariantConfig<T>, ctx: EvaluationContext): T;
|
|
34
|
+
export {};
|
|
@@ -9,6 +9,7 @@ declare class FunLogger {
|
|
|
9
9
|
protected l2Address: string | null;
|
|
10
10
|
private isConfigured;
|
|
11
11
|
private logQueue;
|
|
12
|
+
private disableLogging;
|
|
12
13
|
constructor();
|
|
13
14
|
private getFunLogEnv;
|
|
14
15
|
private logDataDog;
|
|
@@ -32,7 +33,7 @@ declare class FunLogger {
|
|
|
32
33
|
*/
|
|
33
34
|
error(title: string, errorOrData: unknown, _data?: object): void;
|
|
34
35
|
private flushLogQueue;
|
|
35
|
-
configure(apiKey: string | null, isDebug: boolean, sdkVersion: string): void;
|
|
36
|
+
configure(apiKey: string | null, isDebug: boolean, sdkVersion: string, disableLogging?: boolean): void;
|
|
36
37
|
getUserId(): string | null;
|
|
37
38
|
getUserAddress(): string | null;
|
|
38
39
|
getUserName(): string | null;
|