@dhedge/trading-widget 2.0.7 → 2.0.9
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/README.md +314 -301
- package/{index-10e5f6b7.cjs → index-5d0c2a92.cjs} +36 -36
- package/{index-f50b0dfa.js → index-7cce568d.js} +2212 -2224
- package/index.cjs +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/{pyth-adapter-5256483f.cjs → pyth-adapter-7966026e.cjs} +1 -1
- package/{pyth-adapter-b09c2a74.js → pyth-adapter-eba3a414.js} +1 -1
- package/style.css +1 -1
- package/trading-widget/components/widget/widget-input/token-selector/token-selector.hooks.d.ts +2 -0
- package/trading-widget/providers/theme-provider/theme-provider.types.d.ts +1 -0
package/README.md
CHANGED
|
@@ -18,11 +18,12 @@ Widget library has some vital `peerDependencies` as a core tool stack. Make sure
|
|
|
18
18
|
```bash
|
|
19
19
|
npm i @dhedge/trading-widget
|
|
20
20
|
```
|
|
21
|
+
|
|
21
22
|
2. Providers hierarchy
|
|
22
23
|
|
|
23
24
|
```typescript jsx
|
|
24
|
-
import { WagmiProvider } from 'wagmi'
|
|
25
|
-
import { TradingPanelProvider, TradingWidget } from '@dhedge/trading-widget'
|
|
25
|
+
import { WagmiProvider } from 'wagmi'
|
|
26
|
+
import { TradingPanelProvider, TradingWidget } from '@dhedge/trading-widget'
|
|
26
27
|
```
|
|
27
28
|
|
|
28
29
|
- Setup [Wagmi Provider](https://wagmi.sh/react/api/WagmiProvider) on top level or use existing one in your app
|
|
@@ -48,53 +49,57 @@ See [TradingWidget](#tradingwidget) -> `theme` config to manage customization
|
|
|
48
49
|
|
|
49
50
|
### TradingPanelProvider
|
|
50
51
|
|
|
51
|
-
Top level provider component. Headless part of trading logic. API handles params to setup `initialState` and `actions`. See below for more details
|
|
52
|
+
Top level provider component. Headless part of trading logic. API handles params to setup `initialState` and `actions`. See below for more details
|
|
52
53
|
|
|
53
54
|
<details>
|
|
54
55
|
<summary><code>actions</code> <code><b>/</b></code> <code>Optional General callbacks to interact with 3rd party services</code></summary>
|
|
55
56
|
|
|
56
|
-
> | name
|
|
57
|
-
>
|
|
58
|
-
> | `onUpdateSendTokenInput`
|
|
59
|
-
> | `onUpdateTradingSettings`
|
|
60
|
-
> | `onSetTradingType`
|
|
61
|
-
> | `onUpdateTradingMeta`
|
|
62
|
-
> | `onUpdateTradingModal`
|
|
63
|
-
> | `onUpdateTransactions`
|
|
64
|
-
> | `onTradingSettleError`
|
|
65
|
-
> | `onTransactionError`
|
|
66
|
-
> | `onTransactionSuccess`
|
|
67
|
-
> | `onTransactionEstimationError`
|
|
68
|
-
> | `onTokenSelector`
|
|
69
|
-
> | `onLog`
|
|
70
|
-
> | `onSimulateTransaction`
|
|
71
|
-
> | `getSwapData`
|
|
57
|
+
> | name | type | default value | description |
|
|
58
|
+
> | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------- |
|
|
59
|
+
> | `onUpdateSendTokenInput` | (payload: Partial\<{ address: `Address`; symbol: `string`; value: `string`; decimals: `number`; isLoading?: `boolean` }\>) => void | undefined | triggers on send token change |
|
|
60
|
+
> | `onUpdateTradingSettings` | (payload: Partial\<{ slippage: `number \| 'auto'`; minSlippage?: `number` isInfiniteAllowance: `boolean`; isMultiAssetWithdrawalEnabled: `boolean`; isMaxSlippageLoading: `boolean` }\>) => void | undefined | triggers on trading settings change |
|
|
61
|
+
> | `onSetTradingType` | (payload: `'deposit' \| 'withdraw'`) => void | undefined | triggers on trading type change |
|
|
62
|
+
> | `onUpdateTradingMeta` | (payload: Partial\<{ approvingStatus: `'pending' \| 'success'` }\>) => void | undefined | triggers on trading meta change |
|
|
63
|
+
> | `onUpdateTradingModal` | (payload: Partial\<{ isOpen: `boolean`; status: `'Success' \| 'None' \| 'Mining' \| 'Wallet'` }\>) => void | undefined | triggers on trading modal change |
|
|
64
|
+
> | `onUpdateTransactions` | (payload: AddTransaction \| UpdateTransaction \| RemoveTransaction) => void | undefined | triggers on transaction action change |
|
|
65
|
+
> | `onTradingSettleError` | (error: `Error`) => void | undefined | triggers on trading settle error |
|
|
66
|
+
> | `onTransactionError` | (error: `Error`, action: `TransactionAction` \| `undefined`, chainId?: `ChainId`, txHash?: `Address`) => void | undefined | triggers on transaction error |
|
|
67
|
+
> | `onTransactionSuccess` | (data: `WaitForTransactionReceiptReturnType`, action: `TransactionAction` \| `undefined`, link?: `string`) => void | undefined | triggers on transaction success |
|
|
68
|
+
> | `onTransactionEstimationError` | (error: `EstimationError`, address: `Address`, chainId?: `ChainId`, account?: `Address`) => void | undefined | triggers on transaction estimation error |
|
|
69
|
+
> | `onTokenSelector` | (payload: { isOpen: `boolean`; entity: `'token' \| 'pool'` }) => void | undefined | triggers on token selector change |
|
|
70
|
+
> | `onLog` | (eventName: `string`, payload?: `Record<string, unknown>`) => void | undefined | triggers on log event |
|
|
71
|
+
> | `onSimulateTransaction` | (payload: { chainId: `ChainId`; from: `Address`: to: `Address`; input: `string`; gas: `number`; value?: `string` }) => Promise<{ link?: `string`; simulation: { status: `boolean`; error_message: `string` } } \| null> | undefined | triggers to simulate transaction and get error details after failed tx estimation |
|
|
72
|
+
> | `getSwapData` | ({ signal: `AbortSignal`, variables: { chainId: `number`; sourceAddress: `Address`; destinationAddress: `Address`; walletAddress: `Address`; fromAddress: `Address`; amount: `string`; slippage: `string` } }) => Promise<{ destinationAmount: `string`; txData: `string` ; routerKey: `'ONE_INCH' / 'ONE_INCH_V5' / 'ZERO_X' / 'PARASWAP'` } } \| null> | undefined | provides off chain swap data based on send token value |
|
|
72
73
|
|
|
73
74
|
###### Source: `packages/trading-widget/src/core-kit/providers/index.tsx`
|
|
75
|
+
|
|
74
76
|
###### Default values: `undefined`
|
|
77
|
+
|
|
75
78
|
</details>
|
|
76
79
|
|
|
77
|
-
|
|
80
|
+
---
|
|
78
81
|
|
|
79
82
|
<details>
|
|
80
83
|
<summary><code>initialState</code> <code><b>/</b></code> <code>Optional initial state of trading panel</code></summary>
|
|
81
84
|
|
|
82
|
-
> | name | type
|
|
83
|
-
>
|
|
84
|
-
> | `poolAddress` | Address
|
|
85
|
-
> | `poolConfigMap` | Record<Address, PoolConfig>
|
|
86
|
-
> | `settings` | { slippage: `number \| 'auto'`; minSlippage?: `number`; isInfiniteAllowance: `boolean`; isMultiAssetWithdrawalEnabled: `boolean`; isMaxSlippageLoading: `boolean` }
|
|
87
|
-
> | `type` | 'deposit' \| 'withdraw'
|
|
88
|
-
> | `input` | { sendToken: { address: `Address`; symbol: `string`; value: `string`; decimals: `number`; isLoading?: `boolean` }; receiveToken: { address: `Address`; symbol: `string`; value: `string`; decimals: `number`; isLoading?: `boolean` }
|
|
89
|
-
> | `entryFee` | { deposit: `number`; depositWithCustomCooldown: `number`; }
|
|
90
|
-
> | `meta` | { approvingStatus?: `'pending' \| 'success'` }
|
|
91
|
-
> | `modal` | { isOpen: `boolean`; status: `'Success' \| 'None' \| 'Mining' \| 'Wallet'`; action: `'deposit' \| 'withdraw' \| 'approve \| 'oraclesUpdate'`; link?: `string`; sendToken: TradingToken \| null; receiveToken: TradingToken \| null }
|
|
92
|
-
> | `transactions` | { action: `'deposit' \| 'withdraw' \| 'approve'`; symbol: `string`; chainId: `ChainId`; txHash?: `Address` }[]
|
|
93
|
-
> | `poolFallbackData` | { address: `Address`; managerLogicAddress?: `Address`; poolCompositions: `PoolComposition[]`; tokenPrice?: `string`; apy?: { value: `number`; currency: `'USD' \| 'ETH'`
|
|
94
|
-
> | `defaultChainId` | number (optional)
|
|
85
|
+
> | name | type | default value | description |
|
|
86
|
+
> | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
87
|
+
> | `poolAddress` | Address | `AddressZero` | Current active pool address |
|
|
88
|
+
> | `poolConfigMap` | Record<Address, PoolConfig> | `{}` | Map of pool configs available for trading |
|
|
89
|
+
> | `settings` | { slippage: `number \| 'auto'`; minSlippage?: `number`; isInfiniteAllowance: `boolean`; isMultiAssetWithdrawalEnabled: `boolean`; isMaxSlippageLoading: `boolean` } | { slippage: `'auto'`; isInfiniteAllowance: `false`; isMultiAssetWithdrawalEnabled: `true`; isMaxSlippageLoading: `false` } | Panel settings |
|
|
90
|
+
> | `type` | 'deposit' \| 'withdraw' | `'deposit'` | Trading type |
|
|
91
|
+
> | `input` | { sendToken: { address: `Address`; symbol: `string`; value: `string`; decimals: `number`; isLoading?: `boolean` }; receiveToken: { address: `Address`; symbol: `string`; value: `string`; decimals: `number`; isLoading?: `boolean` } } | `poolConfigMap[poolAddress]` | Send/receive tokens pair |
|
|
92
|
+
> | `entryFee` | { deposit: `number`; depositWithCustomCooldown: `number`; } | { deposit: `0`; depositWithCustomCooldown: `0.1` } | Entry fee config map |
|
|
93
|
+
> | `meta` | { approvingStatus?: `'pending' \| 'success'` } | `{}` | Trading meta info |
|
|
94
|
+
> | `modal` | { isOpen: `boolean`; status: `'Success' \| 'None' \| 'Mining' \| 'Wallet'`; action: `'deposit' \| 'withdraw' \| 'approve \| 'oraclesUpdate'`; link?: `string`; sendToken: TradingToken \| null; receiveToken: TradingToken \| null } | `{ isOpen: `false`,status: `'None'`, receiveToken: `null`, sendToken: `null` }` | Trading modal state |
|
|
95
|
+
> | `transactions` | { action: `'deposit' \| 'withdraw' \| 'approve'`; symbol: `string`; chainId: `ChainId`; txHash?: `Address` }[] | `[]` | Pending transactions |
|
|
96
|
+
> | `poolFallbackData` | { address: `Address`; managerLogicAddress?: `Address`; poolCompositions: `PoolComposition[]`; tokenPrice?: `string`; apy?: { value: `number`; currency: `'USD' \| 'ETH'` } } | { address: `AddressZero` } | Current active pool fallback data to override or extend contract's response |
|
|
97
|
+
> | `defaultChainId` | number (optional) | undefined | Chain id that will be returned from useNetwork wagmi hook when connected to unsupported network |
|
|
95
98
|
|
|
96
99
|
###### Source: `packages/trading-widget/src/core-kit/providers/index.tsx`
|
|
100
|
+
|
|
97
101
|
###### Default values: `packages/trading-widget/src/core-kit/providers/index.tsx`
|
|
102
|
+
|
|
98
103
|
</details>
|
|
99
104
|
|
|
100
105
|
### TradingWidget
|
|
@@ -106,33 +111,35 @@ UI configuration provider. Manages params to configure custom styling, component
|
|
|
106
111
|
|
|
107
112
|
##### params
|
|
108
113
|
|
|
109
|
-
> | name
|
|
110
|
-
>
|
|
111
|
-
> | `isGeoBlocked`
|
|
112
|
-
> | `isSanctioned`
|
|
113
|
-
> | `depositQuoteDiffWarningThreshold`
|
|
114
|
-
> | `depositQuoteDiffErrorThreshold`
|
|
115
|
-
> | `defaultWithdrawSlippageScale`
|
|
116
|
-
> | `defaultSwapTransactionSlippage`
|
|
117
|
-
> | `defaultNoSwapMinDepositAmountGap`
|
|
118
|
-
> | `defaultLockTime`
|
|
119
|
-
> | `customLockTime`
|
|
120
|
-
> | `stablePrecision`
|
|
121
|
-
> | `defaultPrecision`
|
|
122
|
-
> | `stakingChainId`
|
|
123
|
-
> | `termsOfUseAccepted`
|
|
124
|
-
> | `standalone`
|
|
125
|
-
> | `chainConfig`
|
|
114
|
+
> | name | type | default value | description |
|
|
115
|
+
> | ---------------------------------- | -------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
116
|
+
> | `isGeoBlocked` | `boolean` | `false` | Restricts depositing action button and conditionally renders GeoBlockAlert component |
|
|
117
|
+
> | `isSanctioned` | `boolean` | `false` | Restricts depositing action button and conditionally renders SanctionedAlert component |
|
|
118
|
+
> | `depositQuoteDiffWarningThreshold` | `number` | `1` | Deposit slippage absolute percent value warning threshold, Affects styling to warn user |
|
|
119
|
+
> | `depositQuoteDiffErrorThreshold` | `number` | `3` | Deposit slippage absolute percent value error threshold, Affects styling to warn user |
|
|
120
|
+
> | `defaultWithdrawSlippageScale` | `number[]` | `[0.1, 0.3, 0.5, 1, 1.5, 3]` | Initial withdraw slippage absolute percent. Further adjustments are available in panel settings |
|
|
121
|
+
> | `defaultSwapTransactionSlippage` | `number` | `0.3` | Default slippage (%) applied to swap transaction. |
|
|
122
|
+
> | `defaultNoSwapMinDepositAmountGap` | `number` | `0.1` | Default gap (%) for min received vault tokens during no swap deposits. |
|
|
123
|
+
> | `defaultLockTime` | `string` | `'24 hours'` | Formatted default deposit lock time to be displayed in panel (Long lockup period is used to bypass entry fee and can be managed in panel settings) |
|
|
124
|
+
> | `customLockTime` | `string` | `'15 minutes'` | Formatted custom deposit lock time alternative to be displayed in panel |
|
|
125
|
+
> | `stablePrecision` | `number` | `3` | Number of decimals to be displayed in stables (e.g USDC balance) |
|
|
126
|
+
> | `defaultPrecision` | `number` | `6` | Number of decimals to be displayed in token values |
|
|
127
|
+
> | `stakingChainId` | `number` | `10` (Optimism) | ChainId to be used in staking logic |
|
|
128
|
+
> | `termsOfUseAccepted` | `boolean` | `true` | Requires user to confirm terms of use by rendering DepositTermsOfUse component before deposit action |
|
|
129
|
+
> | `standalone` | `boolean` | `true` | Handles token selection in SPA mode |
|
|
130
|
+
> | `chainConfig` | `Partial<Record<ChainId, { name: string; iconPath: string }>>` | `{}` | Sets map of chain `name` and `iconPath` |
|
|
126
131
|
|
|
127
132
|
##### actions
|
|
128
133
|
|
|
129
|
-
> | name
|
|
130
|
-
>
|
|
131
|
-
> | `onConnect`
|
|
132
|
-
> | `onAcceptTermsOfUse`
|
|
134
|
+
> | name | type | default value | description |
|
|
135
|
+
> | -------------------- | ------------------------ | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
136
|
+
> | `onConnect` | `() => void` | `() => {}` | Widget has built-in `Connect Wallet` action button that triggers `onConnect` callback assuming starting of abstract wallet connection process. After all the only requirement is to get connected wallet inside wagmi's `useAccount` hook to make trading operations possible |
|
|
137
|
+
> | `onAcceptTermsOfUse` | `() => Promise<boolean>` | `() => Promise.resolve(true)` | Callback is triggered after user's approval of Terms of Use statements assuming switching of external `config.termsOfUseAccepted` param to `true` state |
|
|
133
138
|
|
|
134
139
|
###### Source: `packages/trading-widget/src/trading-widget/providers/config-provider`
|
|
140
|
+
|
|
135
141
|
###### Default values: `packages/trading-widget/src/trading-widget/providers/config-provider/config-provider.defaults.ts`
|
|
142
|
+
|
|
136
143
|
</details>
|
|
137
144
|
|
|
138
145
|
<details>
|
|
@@ -142,24 +149,25 @@ UI configuration provider. Manages params to configure custom styling, component
|
|
|
142
149
|
<code>Custom components to be injected into widget layout</code>
|
|
143
150
|
</summary>
|
|
144
151
|
|
|
145
|
-
> | name
|
|
146
|
-
>
|
|
147
|
-
> | `GeoBlockAlert`
|
|
148
|
-
> | `SanctionedAlert`
|
|
149
|
-
> | `DepositMetaInfo`
|
|
150
|
-
> | `WithdrawMetaInfo`
|
|
151
|
-
> | `ExtraActionButton`
|
|
152
|
-
> | `Image`
|
|
153
|
-
> | `LogoSpinner`
|
|
154
|
-
> | `DepositTermsOfUse`
|
|
155
|
-
> | `ActionButton`
|
|
156
|
-
|
|
152
|
+
> | name | type | default value | description |
|
|
153
|
+
> | ------------------- | ----------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
154
|
+
> | `GeoBlockAlert` | ComponentType | `<GeoBlockAlert>` | Component replaces deposit button while `isGeoBlocked` config param is set to `true` |
|
|
155
|
+
> | `SanctionedAlert` | ComponentType | `<SanctionedAlert>` | Component replaces deposit button while `isSanctioned` config param is set to `true` |
|
|
156
|
+
> | `DepositMetaInfo` | ComponentType | `undefined` | Component is injected into deposit meta part of widget layout nearby TransactionOverviewDisclosure |
|
|
157
|
+
> | `WithdrawMetaInfo` | ComponentType | `undefined` | Component is injected into withdraw meta part of widget layout nearby WithdrawTransactionOverviewDisclosure |
|
|
158
|
+
> | `ExtraActionButton` | ComponentType | `undefined` | Component is injected below deposit action button and rendered if `isGeoBlocked` config param is set to `false` |
|
|
159
|
+
> | `Image` | ComponentType<ImageProps> | `<img>` | Component optionally can be used to pass `nextjs` Image component to be used for assets rendering |
|
|
160
|
+
> | `LogoSpinner` | ComponentType<SVGProps<SVGElement>> | `<Spinner>` | Component is injected into widget pending transaction overlay. Assume using of spinning animation |
|
|
161
|
+
> | `DepositTermsOfUse` | ComponentType | `undefined` | Component is injected into `TermsOfUseOverlay` to extend default terms of use statement points |
|
|
162
|
+
> | `ActionButton` | ComponentType | `<ActionButton>` | Component overrides default `ActionButton` and has `ButtonProps` API |
|
|
157
163
|
|
|
158
164
|
###### Source: `packages/trading-widget/src/trading-widget/providers/component-provider/component-provider.tsx`
|
|
165
|
+
|
|
159
166
|
###### Default values: `undefined`
|
|
167
|
+
|
|
160
168
|
</details>
|
|
161
169
|
|
|
162
|
-
|
|
170
|
+
---
|
|
163
171
|
|
|
164
172
|
<details>
|
|
165
173
|
<summary>
|
|
@@ -174,64 +182,64 @@ UI configuration provider. Manages params to configure custom styling, component
|
|
|
174
182
|
|
|
175
183
|
path: `global.color[name]`
|
|
176
184
|
|
|
177
|
-
> | name
|
|
178
|
-
>
|
|
179
|
-
> | `colorTextPrimary`
|
|
180
|
-
> | `colorTextPrimaryHover`
|
|
181
|
-
> | `colorBorderPrimary`
|
|
182
|
-
> | `colorTextSecondary`
|
|
183
|
-
> | `colorBgPrimary`
|
|
184
|
-
> | `colorBgSecondary`
|
|
185
|
-
> | `colorTextAccent`
|
|
186
|
-
> | `colorTextAccentHover`
|
|
187
|
-
> | `colorBgAccentFrom`
|
|
188
|
-
> | `colorBgAccentTo`
|
|
189
|
-
> | `colorBgAccentFromHover`
|
|
190
|
-
> | `colorBgAccentToHover`
|
|
191
|
-
> | `colorTextNeutral`
|
|
192
|
-
> | `colorBgNeutral`
|
|
193
|
-
> | `colorTextLoading`
|
|
194
|
-
> | `colorTextError`
|
|
195
|
-
> | `colorTextWarning`
|
|
196
|
-
> | `colorIcon`
|
|
185
|
+
> | name | type | default value | description |
|
|
186
|
+
> | ------------------------ | ------ | -------------------------------------------- | ------------------------------------- |
|
|
187
|
+
> | `colorTextPrimary` | string | `#ffffff` | Primary text color |
|
|
188
|
+
> | `colorTextPrimaryHover` | string | `#ffffffCC` | Primary hover text color |
|
|
189
|
+
> | `colorBorderPrimary` | string | `global?.color?.colorTextPrimary ?? #ffffff` | Primary border color |
|
|
190
|
+
> | `colorTextSecondary` | string | `#9DA2AD` | Secondary text color |
|
|
191
|
+
> | `colorBgPrimary` | string | `#1B2432` | Primary bg color |
|
|
192
|
+
> | `colorBgSecondary` | string | `#2B313E` | Secondary bg color |
|
|
193
|
+
> | `colorTextAccent` | string | `#ffffff` | Accent text color |
|
|
194
|
+
> | `colorTextAccentHover` | string | `#ffffffCC` | Accent hover text color |
|
|
195
|
+
> | `colorBgAccentFrom` | string | `#73D393` | Accent bg gradient `from` color |
|
|
196
|
+
> | `colorBgAccentTo` | string | `#34855E` | Accent bg gradient `to` color |
|
|
197
|
+
> | `colorBgAccentFromHover` | string | `#73D393CC` | Accent hover bg gradient `from` color |
|
|
198
|
+
> | `colorBgAccentToHover` | string | `#162435` | Accent hover bg gradient `to` color |
|
|
199
|
+
> | `colorTextNeutral` | string | `#9DA2AD80` | Neutral text color |
|
|
200
|
+
> | `colorBgNeutral` | string | `#9DA2AD33` | Neutral bg color |
|
|
201
|
+
> | `colorTextLoading` | string | `#ffffff99` | Loading text color |
|
|
202
|
+
> | `colorTextError` | string | `#EF4444` | Error text color |
|
|
203
|
+
> | `colorTextWarning` | string | `#AFA58D` | Warning text color |
|
|
204
|
+
> | `colorIcon` | string | `global?.color?.colorTextPrimary ?? #ffffff` | Warning text color |
|
|
197
205
|
|
|
198
206
|
###### size
|
|
199
207
|
|
|
200
208
|
path: `global.size[name]`
|
|
201
209
|
|
|
202
|
-
> | name
|
|
203
|
-
>
|
|
204
|
-
> | `gap`
|
|
205
|
-
> | `spacer`
|
|
206
|
-
> | `fontSizeBase`
|
|
207
|
-
> | `lineHeightBase`
|
|
208
|
-
> | `fontSizeXs`
|
|
209
|
-
> | `lineHeightXs`
|
|
210
|
-
> | `fontSizeSm`
|
|
211
|
-
> | `lineHeightSm`
|
|
212
|
-
> | `fontSizeLg`
|
|
213
|
-
> | `lineHeightLg`
|
|
214
|
-
> | `iconSize`
|
|
215
|
-
> | `iconSizeSm`
|
|
216
|
-
> | `iconSecondarySize`
|
|
217
|
-
> | `iconSecondarySizeSm`
|
|
218
|
-
> | `labelFontSize`
|
|
219
|
-
> | `labelLineHeight`
|
|
220
|
-
> | `labelLineHeight`
|
|
210
|
+
> | name | type | default value | description |
|
|
211
|
+
> | --------------------- | ------ | -------------------------------------------- | ---------------------- |
|
|
212
|
+
> | `gap` | string | `0.25rem` | General flex gap |
|
|
213
|
+
> | `spacer` | string | `4px` | General spacer |
|
|
214
|
+
> | `fontSizeBase` | string | `16px` | Font size base |
|
|
215
|
+
> | `lineHeightBase` | string | `24px` | Line height base |
|
|
216
|
+
> | `fontSizeXs` | string | `12px` | Font size xs |
|
|
217
|
+
> | `lineHeightXs` | string | `16px` | Line height xs |
|
|
218
|
+
> | `fontSizeSm` | string | `14px` | Font size sm |
|
|
219
|
+
> | `lineHeightSm` | string | `20px` | Line height sm |
|
|
220
|
+
> | `fontSizeLg` | string | `18px` | Font size lg |
|
|
221
|
+
> | `lineHeightLg` | string | `28px` | Line height lg |
|
|
222
|
+
> | `iconSize` | string | `20px` | Icon size base |
|
|
223
|
+
> | `iconSizeSm` | string | `24px` | Icon size sm |
|
|
224
|
+
> | `iconSecondarySize` | string | `16px` | Icon secondary size |
|
|
225
|
+
> | `iconSecondarySizeSm` | string | `16px` | Icon secondary size sm |
|
|
226
|
+
> | `labelFontSize` | string | `config?.global?.size?.fontSizeXs ?? 12px` | Label font size |
|
|
227
|
+
> | `labelLineHeight` | string | `config?.global?.size?.lineHeightXs ?? 16px` | Label font size |
|
|
228
|
+
> | `labelLineHeight` | string | `config?.global?.size?.lineHeightXs ?? 16px` | Label font size |
|
|
221
229
|
|
|
222
230
|
###### style
|
|
223
231
|
|
|
224
232
|
path: `global.style[name]`
|
|
225
233
|
|
|
226
|
-
> | name
|
|
227
|
-
>
|
|
228
|
-
> | `radiusPrimary`
|
|
229
|
-
> | `radiusSecondary`
|
|
230
|
-
> | `fontWeightLight`
|
|
231
|
-
> | `fontWeightMedium`
|
|
232
|
-
> | `fontWeightBold`
|
|
233
|
-
> | `actionOpacity`
|
|
234
|
-
> | `actionOpacityHover`
|
|
234
|
+
> | name | type | default value | description |
|
|
235
|
+
> | -------------------- | ------ | ------------- | ---------------------------- |
|
|
236
|
+
> | `radiusPrimary` | string | `1rem` | General border radius |
|
|
237
|
+
> | `radiusSecondary` | string | `1rem` | Secondary border radius |
|
|
238
|
+
> | `fontWeightLight` | string | `300` | Font weight light |
|
|
239
|
+
> | `fontWeightMedium` | string | `500` | Font weight medium |
|
|
240
|
+
> | `fontWeightBold` | string | `700` | Font weight bold |
|
|
241
|
+
> | `actionOpacity` | string | `1` | Action element opacity |
|
|
242
|
+
> | `actionOpacityHover` | string | `0.8` | Action hover element opacity |
|
|
235
243
|
|
|
236
244
|
##### component
|
|
237
245
|
|
|
@@ -239,175 +247,178 @@ path: `global.style[name]`
|
|
|
239
247
|
|
|
240
248
|
path: `component.popup[name]`
|
|
241
249
|
|
|
242
|
-
> | name
|
|
243
|
-
>
|
|
244
|
-
> | `color.colorText`
|
|
245
|
-
> | `color.colorBg`
|
|
246
|
-
> | `color.colorBorder`
|
|
247
|
-
> | `size.fontSize`
|
|
250
|
+
> | name | type | default value | description |
|
|
251
|
+
> | ------------------- | ------ | ------------------------------------------------------ | ---------------- |
|
|
252
|
+
> | `color.colorText` | string | `config?.global?.color?.colorTextSecondary ?? #9DA2AD` | Popup text color |
|
|
253
|
+
> | `color.colorBg` | string | `config?.global?.color?.colorBgSecondary ?? #2B313E` | Popup bg color |
|
|
254
|
+
> | `color.colorBorder` | string | `config?.global?.color?.colorTextSecondary ?? #9DA2AD` | Popup bg color |
|
|
255
|
+
> | `size.fontSize` | string | `config?.global?.size?.fontSizeXs ?? 12px` | Popup font size |
|
|
248
256
|
|
|
249
257
|
###### popupList
|
|
250
258
|
|
|
251
259
|
path: `component.popupList[name]`
|
|
252
260
|
|
|
253
|
-
> | name
|
|
254
|
-
>
|
|
255
|
-
> | `color.itemBgEven`
|
|
256
|
-
> | `color.itemBgOdd`
|
|
257
|
-
> | `color.headerBg`
|
|
261
|
+
> | name | type | default value | description |
|
|
262
|
+
> | ------------------ | ------ | ------------- | ----------------------------- |
|
|
263
|
+
> | `color.itemBgEven` | string | `transparent` | Popup list even item bg color |
|
|
264
|
+
> | `color.itemBgOdd` | string | `#2A3648` | Popup list odd item bg color |
|
|
265
|
+
> | `color.headerBg` | string | `#1B2432` | Popup list header bg color |
|
|
258
266
|
|
|
259
267
|
###### tabGroup
|
|
260
268
|
|
|
261
269
|
path: `component.tabGroup[name]`
|
|
262
270
|
|
|
263
|
-
> | name | type
|
|
264
|
-
>
|
|
265
|
-
> | `size.px` | string
|
|
271
|
+
> | name | type | default value | description |
|
|
272
|
+
> | --------- | ------ | ------------------------ | ------------------------ |
|
|
273
|
+
> | `size.px` | string | `global.size.spacer * 3` | Tab group padding inline |
|
|
266
274
|
|
|
267
275
|
###### tabContent
|
|
268
276
|
|
|
269
277
|
path: `component.tabContent[name]`
|
|
270
278
|
|
|
271
|
-
> | name | type
|
|
272
|
-
>
|
|
273
|
-
> | `size.pt` | string
|
|
274
|
-
> | `size.px` | string
|
|
275
|
-
> | `size.pb` | string
|
|
276
|
-
> | `size.gap` | string
|
|
279
|
+
> | name | type | default value | description |
|
|
280
|
+
> | ---------- | ------ | ------------------------ | -------------------------- |
|
|
281
|
+
> | `size.pt` | string | `global.size.spacer * 3` | Tab content padding top |
|
|
282
|
+
> | `size.px` | string | `0px` | Tab content padding inline |
|
|
283
|
+
> | `size.pb` | string | `global.size.spacer * 9` | Tab content padding bottom |
|
|
284
|
+
> | `size.gap` | string | `global.size.spacer * 2` | Tab content flex gap |
|
|
277
285
|
|
|
278
286
|
###### tab
|
|
279
287
|
|
|
280
288
|
path: `component.tab[name]`
|
|
281
289
|
|
|
282
|
-
> | name
|
|
283
|
-
>
|
|
284
|
-
> | `size.px`
|
|
285
|
-
> | `size.py`
|
|
286
|
-
> | `size.fontSize`
|
|
287
|
-
> | `color.colorBg`
|
|
288
|
-
> | `color.colorText`
|
|
289
|
-
> | `color.selectColorText`
|
|
290
|
-
> | `color.colorTextHover`
|
|
291
|
-
> | `style.fontWeight`
|
|
292
|
-
> | `style.lineHeight`
|
|
290
|
+
> | name | type | default value | description |
|
|
291
|
+
> | ----------------------- | ------ | ------------------------------------ | --------------------- |
|
|
292
|
+
> | `size.px` | string | `global.size.spacer * 9` | Tab padding inline |
|
|
293
|
+
> | `size.py` | string | `global.size.spacer * 3` | Tab padding block |
|
|
294
|
+
> | `size.fontSize` | string | `global.size.fontSizeSm` | Tab font size |
|
|
295
|
+
> | `color.colorBg` | string | `global.color.colorBgNeutral` | Tab bg color |
|
|
296
|
+
> | `color.colorText` | string | `global.color.colorTextNeutral` | Tab text color |
|
|
297
|
+
> | `color.selectColorText` | string | `global.color.colorTextPrimary` | Tab select text color |
|
|
298
|
+
> | `color.colorTextHover` | string | `global.color.colorTextPrimaryHover` | Tab hover text color |
|
|
299
|
+
> | `style.fontWeight` | string | `global.style.fontWeightBold` | Tab font weight |
|
|
300
|
+
> | `style.lineHeight` | string | `global.size.lineHeightSm` | Tab line height |
|
|
293
301
|
|
|
294
302
|
###### balance
|
|
295
303
|
|
|
296
304
|
path: `component.balance[name]`
|
|
297
305
|
|
|
298
|
-
> | name | type
|
|
299
|
-
>
|
|
300
|
-
> | `size.px` | string
|
|
301
|
-
> | `size.gap` | string
|
|
302
|
-
> | `size.fontSize` | string
|
|
303
|
-
> | `size.lineHeight` | string
|
|
304
|
-
> | `size.priceFontSize` | string
|
|
305
|
-
> | `size.priceLineHeight` | string
|
|
306
|
-
> | `color.colorText` | string
|
|
307
|
-
> | `color.priceColorText` | string
|
|
306
|
+
> | name | type | default value | description |
|
|
307
|
+
> | ---------------------- | ------ | --------------------------------- | ------------------------- |
|
|
308
|
+
> | `size.px` | string | `global.size.spacer * 3` | Balance padding inline |
|
|
309
|
+
> | `size.gap` | string | `global.size.gap` | Balance flex gap |
|
|
310
|
+
> | `size.fontSize` | string | `global.size.fontSizeLg` | Balance font size |
|
|
311
|
+
> | `size.lineHeight` | string | `global.size.lineHeightLg` | Balance line height |
|
|
312
|
+
> | `size.priceFontSize` | string | `global.size.fontSizeBase` | Balance price font size |
|
|
313
|
+
> | `size.priceLineHeight` | string | `global.size.lineHeightBase` | Balance price line height |
|
|
314
|
+
> | `color.colorText` | string | `global.color.colorTextPrimary` | Balance text color |
|
|
315
|
+
> | `color.priceColorText` | string | `global.color.colorTextSecondary` | Balance price text color |
|
|
308
316
|
|
|
309
317
|
###### inputGroup
|
|
310
318
|
|
|
311
319
|
path: `component.inputGroup[name]`
|
|
312
320
|
|
|
313
|
-
> | name
|
|
314
|
-
>
|
|
315
|
-
> | `size.px`
|
|
316
|
-
> | `size.gap`
|
|
321
|
+
> | name | type | default value | description |
|
|
322
|
+
> | ---------- | ------ | ------------------------ | -------------------------- |
|
|
323
|
+
> | `size.px` | string | `global.size.spacer * 3` | Input group padding inline |
|
|
324
|
+
> | `size.gap` | string | `global.size.gap` | Input group flex gap |
|
|
317
325
|
|
|
318
326
|
###### input
|
|
319
327
|
|
|
320
328
|
path: `component.input[name]`
|
|
321
329
|
|
|
322
|
-
> | name
|
|
323
|
-
>
|
|
324
|
-
> | `size.px`
|
|
325
|
-
> | `size.py`
|
|
326
|
-
> | `size.gap`
|
|
327
|
-
> | `size.priceGap`
|
|
328
|
-
> | `size.iconSize`
|
|
329
|
-
> | `size.iconSizeSm`
|
|
330
|
-
> | `size.labelFontSize`
|
|
331
|
-
> | `size.labelLineHeight`
|
|
332
|
-
> | `size.fontSize`
|
|
333
|
-
> | `size.lineHeight`
|
|
334
|
-
> | `size.fontSizeLg`
|
|
335
|
-
> | `size.lineHeightLg`
|
|
336
|
-
> | `size.tokenFontSize`
|
|
337
|
-
> | `size.tokenLineHeight`
|
|
338
|
-
> | `size.tokenFontSizeSm`
|
|
339
|
-
> | `size.tokenLineHeightSm`
|
|
340
|
-
> | `size.buttonPx`
|
|
341
|
-
> | `size.buttonPy`
|
|
342
|
-
> | `size.buttonFontSize`
|
|
343
|
-
> | `size.buttonLineHeight`
|
|
344
|
-
> | `color.textColor`
|
|
345
|
-
> | `color.loadingTextColor`
|
|
346
|
-
> | `color.bgColor`
|
|
347
|
-
> | `color.bgColorFocus`
|
|
348
|
-
> | `color.borderColor`
|
|
349
|
-
> | `color.borderColorFocus`
|
|
350
|
-
> | `color.placeholderColor`
|
|
351
|
-
> | `color.buttonBgColor`
|
|
352
|
-
> | `color.buttonBorderColor`
|
|
353
|
-
> | `color.buttonTextColor`
|
|
354
|
-
> | `style.radius`
|
|
355
|
-
> | `style.labelFontWeight`
|
|
356
|
-
> | `style.fontWeight`
|
|
357
|
-
> | `style.tokenFontWeight`
|
|
358
|
-
> | `style.buttonRadius`
|
|
330
|
+
> | name | type | default value | description |
|
|
331
|
+
> | ------------------------- | ------ | --------------------------------- | --------------------------- |
|
|
332
|
+
> | `size.px` | string | `global.size.spacer * 3` | Input padding inline |
|
|
333
|
+
> | `size.py` | string | `global.size.spacer * 2` | Input padding block |
|
|
334
|
+
> | `size.gap` | string | `global.size.gap * 2` | Input flex gap |
|
|
335
|
+
> | `size.priceGap` | string | `global.size.gap * 2` | Input flex gap |
|
|
336
|
+
> | `size.iconSize` | string | `global.size.iconSize` | Input icon size |
|
|
337
|
+
> | `size.iconSizeSm` | string | `global.size.iconSizeSm` | Input icon size sm |
|
|
338
|
+
> | `size.labelFontSize` | string | `global.size.fontSizeSm` | Input label line height |
|
|
339
|
+
> | `size.labelLineHeight` | string | `global.size.lineHeightSm` | Input label font size |
|
|
340
|
+
> | `size.fontSize` | string | `global.size.fontSizeSm` | Input font size |
|
|
341
|
+
> | `size.lineHeight` | string | `global.size.lineHeightSm` | Input line height |
|
|
342
|
+
> | `size.fontSizeLg` | string | `global.size.fontSizeLg` | Input font size lg |
|
|
343
|
+
> | `size.lineHeightLg` | string | `global.size.lineHeightLg` | Input line height lg |
|
|
344
|
+
> | `size.tokenFontSize` | string | `global.size.fontSizeXs` | Input token font size |
|
|
345
|
+
> | `size.tokenLineHeight` | string | `global.size.lineHeightXs` | Input token line height |
|
|
346
|
+
> | `size.tokenFontSizeSm` | string | `global.size.fontSizeBase` | Input token font size sm |
|
|
347
|
+
> | `size.tokenLineHeightSm` | string | `global.size.lineHeightBase` | Input token line height sm |
|
|
348
|
+
> | `size.buttonPx` | string | `global.size.spacer * 2` | Input button padding inline |
|
|
349
|
+
> | `size.buttonPy` | string | `global.size.spacer` | Input button padding block |
|
|
350
|
+
> | `size.buttonFontSize` | string | `global?.size?.fontSizeXs` | Input button font size |
|
|
351
|
+
> | `size.buttonLineHeight` | string | `global?.size?.lineHeightXs` | Input button line height |
|
|
352
|
+
> | `color.textColor` | string | `global.color.colorTextPrimary` | Input text color |
|
|
353
|
+
> | `color.loadingTextColor` | string | `global.color.colorTextLoading` | Input loading text color |
|
|
354
|
+
> | `color.bgColor` | string | `global.color.colorBgNeutral` | Input bg color |
|
|
355
|
+
> | `color.bgColorFocus` | string | `transparent` | Input bg color |
|
|
356
|
+
> | `color.borderColor` | string | `#4C505B` | Input border color |
|
|
357
|
+
> | `color.borderColorFocus` | string | `global.color.colorTextPrimary` | Input border focus color |
|
|
358
|
+
> | `color.placeholderColor` | string | `global.color.colorTextSecondary` | Input placeholder color |
|
|
359
|
+
> | `color.buttonBgColor` | string | `global.color.colorBgSecondary` | Input button bg color |
|
|
360
|
+
> | `color.buttonBorderColor` | string | `global.color.colorBgAccentTo` | Input button border color |
|
|
361
|
+
> | `color.buttonTextColor` | string | `global.color.colorTextPrimary` | Input button text color |
|
|
362
|
+
> | `style.radius` | string | `global.style.radiusPrimary` | Input border radius |
|
|
363
|
+
> | `style.labelFontWeight` | string | `global.style.fontWeightLight` | Input label font weight |
|
|
364
|
+
> | `style.fontWeight` | string | `global.style.fontWeightLight` | Input font weight |
|
|
365
|
+
> | `style.tokenFontWeight` | string | `global.style.fontWeightLight` | Input token font weight |
|
|
366
|
+
> | `style.buttonRadius` | string | `30px` | Input button border radius |
|
|
359
367
|
|
|
360
368
|
###### tooltip
|
|
361
369
|
|
|
362
370
|
path: `component.tooltip[name]`
|
|
363
371
|
|
|
364
|
-
> | name
|
|
365
|
-
>
|
|
366
|
-
> | `color.colorBg`
|
|
372
|
+
> | name | type | default value | description |
|
|
373
|
+
> | ----------------- | ------ | ------------- | ---------------- |
|
|
374
|
+
> | `color.colorBg` | string | `#12171F` | Tooltip bg color |
|
|
375
|
+
> | `color.colorText` | string | `#ffffff` | Tooltip bg color |
|
|
367
376
|
|
|
368
377
|
###### switch
|
|
369
378
|
|
|
370
379
|
path: `component.switch[name]`
|
|
371
380
|
|
|
372
|
-
> | name
|
|
373
|
-
>
|
|
374
|
-
> | `color.colorBgChecked`
|
|
375
|
-
> | `color.colorBg`
|
|
381
|
+
> | name | type | default value | description |
|
|
382
|
+
> | ---------------------- | ------ | ------------- | ------------------------- |
|
|
383
|
+
> | `color.colorBgChecked` | string | `#152E4D` | Switch checked bg color |
|
|
384
|
+
> | `color.colorBg` | string | `#4C505B` | Switch unchecked bg color |
|
|
376
385
|
|
|
377
386
|
###### actionButton
|
|
378
387
|
|
|
379
388
|
path: `component.actionButton[name]`
|
|
380
389
|
|
|
381
|
-
> | name
|
|
382
|
-
>
|
|
383
|
-
> | `size.borderWidth`
|
|
384
|
-
> | `color.colorBgFrom`
|
|
385
|
-
> | `color.colorBgTo`
|
|
386
|
-
> | `color.colorBgFromHover`
|
|
387
|
-
> | `color.colorBgToHover`
|
|
388
|
-
> | `color.colorBorder`
|
|
389
|
-
> | `color.colorText`
|
|
390
|
-
> | `color.colorText`
|
|
391
|
-
> | `color.outlineColorBorder`
|
|
392
|
-
> | `color.outlineColorBorderHover`
|
|
393
|
-
> | `color.outlineColorText`
|
|
390
|
+
> | name | type | default value | description |
|
|
391
|
+
> | ------------------------------- | ------ | ------------------------------------- | ------------------------------------------ |
|
|
392
|
+
> | `size.borderWidth` | string | `1px` | Action button border width |
|
|
393
|
+
> | `color.colorBgFrom` | string | `global.color.colorBgAccentFrom` | Action button bg gradient color from |
|
|
394
|
+
> | `color.colorBgTo` | string | `global.color.colorBgAccentTo` | Action button bg gradient color to |
|
|
395
|
+
> | `color.colorBgFromHover` | string | `global.color.colorBgAccentFromHover` | Action button hover bg gradient color from |
|
|
396
|
+
> | `color.colorBgToHover` | string | `global.color.colorBgAccentTo` | Action button hover bg gradient color to |
|
|
397
|
+
> | `color.colorBorder` | string | `global.color.colorBgAccentFrom` | Action button border color |
|
|
398
|
+
> | `color.colorText` | string | `global.color.colorTextAccent` | Action button text color |
|
|
399
|
+
> | `color.colorText` | string | `global.color.colorTextAccent` | Action button text color |
|
|
400
|
+
> | `color.outlineColorBorder` | string | `#ffffff33` | Action outline button border color |
|
|
401
|
+
> | `color.outlineColorBorderHover` | string | `#ffffffCC` | Action outline button hover border color |
|
|
402
|
+
> | `color.outlineColorText` | string | `global.color.colorTextPrimary` | Action outline button text color |
|
|
394
403
|
|
|
395
404
|
###### meta
|
|
396
405
|
|
|
397
406
|
path: `component.meta[name]`
|
|
398
407
|
|
|
399
|
-
> | name | type
|
|
400
|
-
>
|
|
401
|
-
> | `size.gap` | string
|
|
402
|
-
> | `size.px` | string
|
|
403
|
-
> | `color.linkTextColor` | string
|
|
404
|
-
> | `color.panelBgHover` | string
|
|
408
|
+
> | name | type | default value | description |
|
|
409
|
+
> | --------------------- | ------ | ------------------------------------ | -------------------- |
|
|
410
|
+
> | `size.gap` | string | `global.size.gap` | Meta flex gap |
|
|
411
|
+
> | `size.px` | string | `global.size.spacer * 3` | Meta padding inline |
|
|
412
|
+
> | `color.linkTextColor` | string | `global.color.colorBgAccentFrom` | Meta link text color |
|
|
413
|
+
> | `color.panelBgHover` | string | `config.global.color.colorBgNeutral` | Meta panel hover bg |
|
|
405
414
|
|
|
406
415
|
###### Source: `packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.tsx`
|
|
416
|
+
|
|
407
417
|
###### Default values: `undefined`
|
|
418
|
+
|
|
408
419
|
</details>
|
|
409
420
|
|
|
410
|
-
|
|
421
|
+
---
|
|
411
422
|
|
|
412
423
|
<details>
|
|
413
424
|
<summary>
|
|
@@ -416,84 +427,86 @@ path: `component.meta[name]`
|
|
|
416
427
|
<code>Translation keys</code>
|
|
417
428
|
</summary>|
|
|
418
429
|
|
|
419
|
-
> | name
|
|
420
|
-
>
|
|
421
|
-
> | `depositSlippageWarning`
|
|
422
|
-
> | `withdrawSlippageWarning`
|
|
423
|
-
> | `minSlippageWarning`
|
|
424
|
-
> | `highSlippageWarning`
|
|
425
|
-
> | `recommendedMinSlippage`
|
|
426
|
-
> | `projectedDailyEarningsTooltip`
|
|
427
|
-
> | `dailyEarnings`
|
|
428
|
-
> | `projectedYearlyEarningsTooltip`
|
|
429
|
-
> | `yearlyEarnings`
|
|
430
|
-
> | `fullReceiveDetails`
|
|
431
|
-
> | `tradeDetails`
|
|
432
|
-
> | `maxSlippage`
|
|
433
|
-
> | `minReceiveAmount`
|
|
434
|
-
> | `minReceived`
|
|
435
|
-
> | `estimatedMultiAssetFractions`
|
|
436
|
-
> | `infinite`
|
|
437
|
-
> | `tokenAllowance`
|
|
438
|
-
> | `entryFee`
|
|
439
|
-
> | `entryFeeExplanation`
|
|
440
|
-
> | `amountToBeApproved`
|
|
441
|
-
> | `minDepositUsd`
|
|
442
|
-
> | `minDeposit`
|
|
443
|
-
> | `tokensLockTime`
|
|
444
|
-
> | `slippageTolerance`
|
|
445
|
-
> | `bypassEntryFee`
|
|
446
|
-
> | `tokenAmountToApprove`
|
|
447
|
-
> | `auto`
|
|
448
|
-
> | `autoSlippageDescription`
|
|
449
|
-
> | `lengthenLockup`
|
|
450
|
-
> | `deposit`
|
|
451
|
-
> | `withdraw`
|
|
452
|
-
> | `yourBalance`
|
|
453
|
-
> | `max`
|
|
454
|
-
> | `allAssets`
|
|
455
|
-
> | `all`
|
|
456
|
-
> | `payWith`
|
|
457
|
-
> | `buyEstimated`
|
|
458
|
-
> | `sell`
|
|
459
|
-
> | `receiveEstimated`
|
|
460
|
-
> | `confirmInWallet`
|
|
461
|
-
> | `pending`
|
|
462
|
-
> | `approve`
|
|
463
|
-
> | `connectWallet`
|
|
464
|
-
> | `minimumPurchase`
|
|
465
|
-
> | `poolIsInactive`
|
|
466
|
-
> | `poolIsPrivate`
|
|
467
|
-
> | `updateOracles`
|
|
468
|
-
> | `checkingOracles`
|
|
469
|
-
> | `confirmMaxSlippage`
|
|
470
|
-
> | `withdrawalWindowDisabled`
|
|
471
|
-
> | `withdrawalLiquidityDisabled`
|
|
472
|
-
> | `withdrawCooldown`
|
|
473
|
-
> | `termsOfUse`
|
|
474
|
-
> | `termOfUseDepositListTitle`
|
|
475
|
-
> | `termOfUseDepositAssetSlippage`
|
|
476
|
-
> | `termOfUseDepositBugs`
|
|
477
|
-
> | `termOfUseDepositDowntime`
|
|
478
|
-
> | `termOfUseDepositAuditRisk`
|
|
479
|
-
> | `termOfUseDepositAccept`
|
|
480
|
-
> | `back`
|
|
481
|
-
> | `highSlippage`
|
|
482
|
-
> | `responsibleHighSlippage`
|
|
483
|
-
> | `highSlippageListTitle`
|
|
484
|
-
> | `highSlippageQuoteDiff`
|
|
485
|
-
> | `highSlippageRisk`
|
|
486
|
-
> | `confirm`
|
|
487
|
-
> | `selectToken`
|
|
488
|
-
> | `sendingOrderToWallet`
|
|
489
|
-
> | `settingUpTx`
|
|
490
|
-
> | `updateSynthetixOracles`
|
|
491
|
-
> | `approveSpending`
|
|
492
|
-
> | `pay`
|
|
493
|
-
> | `multiAssetFractions`
|
|
494
|
-
> | `explorer`
|
|
495
|
-
> | `as`
|
|
430
|
+
> | name | type | default value | description |
|
|
431
|
+
> | -------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
432
|
+
> | `depositSlippageWarning` | string | Excludes entry fee. Slippage may be amplified by the leverage. See the docs for more info. | |
|
|
433
|
+
> | `withdrawSlippageWarning` | string | Slippage only applies to single asset withdrawals and withdrawals from vaults with debt positions in Aave. | |
|
|
434
|
+
> | `minSlippageWarning` | string | Flexible min slippage value that is likely enough to process the transaction. | |
|
|
435
|
+
> | `highSlippageWarning` | string | We recommend using another asset to trade with lower slippage. | |
|
|
436
|
+
> | `recommendedMinSlippage` | string | Recommended Min Slippage | |
|
|
437
|
+
> | `projectedDailyEarningsTooltip` | string | Projected daily earnings are based on the current APY and may differ from actual earnings. | |
|
|
438
|
+
> | `dailyEarnings` | string | Daily Earnings | |
|
|
439
|
+
> | `projectedYearlyEarningsTooltip` | string | Projected yearly earnings are based on the current APY and may differ from actual earnings. | |
|
|
440
|
+
> | `yearlyEarnings` | string | Yearly Earnings | |
|
|
441
|
+
> | `fullReceiveDetails` | string | See full details influencing what you will receive. | |
|
|
442
|
+
> | `tradeDetails` | string | Trade details | |
|
|
443
|
+
> | `maxSlippage` | string | Max slippage | |
|
|
444
|
+
> | `minReceiveAmount` | string | You will receive no less than this amount. | |
|
|
445
|
+
> | `minReceived` | string | Minimum Received | |
|
|
446
|
+
> | `estimatedMultiAssetFractions` | string | Estimated multi asset fractions | |
|
|
447
|
+
> | `infinite` | string | Infinite | |
|
|
448
|
+
> | `tokenAllowance` | string | Token Allowance | |
|
|
449
|
+
> | `entryFee` | string | Entry Fee | |
|
|
450
|
+
> | `entryFeeExplanation` | string | When you deposit, the token takes a small entry fee. This fee helps cover the costs when we rebalance the underlying funds, and it's shared among all token holders. | |
|
|
451
|
+
> | `amountToBeApproved` | string | Amount of {symbol} tokens to be approved. Can be customized in settings. | |
|
|
452
|
+
> | `minDepositUsd` | string | Minimum deposit in USD. | |
|
|
453
|
+
> | `minDeposit` | string | Minimum Deposit | |
|
|
454
|
+
> | `tokensLockTime` | string | Purchased tokens will have a {lockTime} lock. | |
|
|
455
|
+
> | `slippageTolerance` | string | Slippage tolerance | |
|
|
456
|
+
> | `bypassEntryFee` | string | Bypass Entry Fee | |
|
|
457
|
+
> | `tokenAmountToApprove` | string | Amount of tokens to be approved. | |
|
|
458
|
+
> | `auto` | string | Auto | |
|
|
459
|
+
> | `autoSlippageDescription` | string | App is testing different slippage ranges, starting low and increasing until it's likely to pass | |
|
|
460
|
+
> | `lengthenLockup` | string | Lengthen lockup to remove entry fee | |
|
|
461
|
+
> | `deposit` | string | Buy | |
|
|
462
|
+
> | `withdraw` | string | Sell | |
|
|
463
|
+
> | `yourBalance` | string | Your Balance | |
|
|
464
|
+
> | `max` | string | Max | |
|
|
465
|
+
> | `allAssets` | string | All Assets | |
|
|
466
|
+
> | `all` | string | All | |
|
|
467
|
+
> | `payWith` | string | Pay with | |
|
|
468
|
+
> | `buyEstimated` | string | Buy (estimated) | |
|
|
469
|
+
> | `sell` | string | Sell | |
|
|
470
|
+
> | `receiveEstimated` | string | Receive (estimated) | |
|
|
471
|
+
> | `confirmInWallet` | string | Please confirm in wallet | |
|
|
472
|
+
> | `pending` | string | Pending... | |
|
|
473
|
+
> | `approve` | string | Approve | |
|
|
474
|
+
> | `connectWallet` | string | Connect Wallet | |
|
|
475
|
+
> | `minimumPurchase` | string | Minimum purchase is ${value} | |
|
|
476
|
+
> | `poolIsInactive` | string | {poolSymbol} token is no longer active. Please withdraw from them. | |
|
|
477
|
+
> | `poolIsPrivate` | string | This vault is currently private | |
|
|
478
|
+
> | `updateOracles` | string | Update Oracles | |
|
|
479
|
+
> | `checkingOracles` | string | Checking Oracles | |
|
|
480
|
+
> | `confirmMaxSlippage` | string | Confirm {slippagePercentage}% max slippage | |
|
|
481
|
+
> | `withdrawalWindowDisabled` | string | You can sell your {tokenSymbol} tokens during withdrawal window period starting from {startTime} | |
|
|
482
|
+
> | `withdrawalLiquidityDisabled` | string | Intended withdraw value is greater than available liquidity ({symbol} {value}) | |
|
|
483
|
+
> | `withdrawCooldown` | string | You can sell your {tokenSymbol} tokens in {cooldownEndTime} | |
|
|
484
|
+
> | `termsOfUse` | string | Terms Of Use | |
|
|
485
|
+
> | `termOfUseDepositListTitle` | string | Please know the following before depositing | |
|
|
486
|
+
> | `termOfUseDepositAssetSlippage` | string | When exiting, investors receive single asset or the underlying vault assets. Withdraw slippage can be customized in withdraw settings | |
|
|
487
|
+
> | `termOfUseDepositBugs` | string | There may be interface bugs on the platform | |
|
|
488
|
+
> | `termOfUseDepositDowntime` | string | There may be interface downtime (planned and unplanned) | |
|
|
489
|
+
> | `termOfUseDepositAuditRisk` | string | Smart contracts are audited but a risk is still present | |
|
|
490
|
+
> | `termOfUseDepositAccept` | string | Accept & Deposit | |
|
|
491
|
+
> | `back` | string | Back | |
|
|
492
|
+
> | `highSlippage` | string | High Slippage Alert | |
|
|
493
|
+
> | `responsibleHighSlippage` | string | By proceeding with this trade, you acknowledge and accept the possibility of experiencing high slippage, resulting in a potential difference between the expected and executed price. | |
|
|
494
|
+
> | `highSlippageListTitle` | string | Please consider the following before confirming | |
|
|
495
|
+
> | `highSlippageQuoteDiff` | string | Be aware that the final amount of assets you receive may be different from the initially quoted value. | |
|
|
496
|
+
> | `highSlippageRisk` | string | Ensure that you understand the risks associated with high slippage and are comfortable proceeding with the trade. | |
|
|
497
|
+
> | `confirm` | string | Confirm | |
|
|
498
|
+
> | `selectToken` | string | Select Token | |
|
|
499
|
+
> | `sendingOrderToWallet` | string | Sending order to your wallet | |
|
|
500
|
+
> | `settingUpTx` | string | Setting up transaction | |
|
|
501
|
+
> | `updateSynthetixOracles` | string | Updating Synthetix Oracles | |
|
|
502
|
+
> | `approveSpending` | string | Approve {symbol} spending | |
|
|
503
|
+
> | `pay` | string | Pay | |
|
|
504
|
+
> | `multiAssetFractions` | string | multi asset fractions | |
|
|
505
|
+
> | `explorer` | string | Explorer | |
|
|
506
|
+
> | `as` | string | As | |
|
|
496
507
|
|
|
497
508
|
###### Source: `packages/trading-widget/src/trading-widget/providers/translation-provider/translation-provider.tsx`
|
|
509
|
+
|
|
498
510
|
###### Default values: `packages/trading-widget/src/trading-widget/providers/translation-provider/translation-provider.defaults.ts`
|
|
511
|
+
|
|
499
512
|
</details>
|