diff --git a/README.md b/README.md index 040cdbfa..5f4131cf 100644 --- a/README.md +++ b/README.md @@ -243,6 +243,14 @@ path: `global.style[name]` ##### component +###### notification + +path: `component.notification[name]` + +> | name | type | default value | description | +> | --------------- | ------ | ---------------------------------------------------- | --------------------- | +> | `color.colorBg` | string | `config?.global?.color?.colorBgSecondary ?? #2B313E` | Notification bg color | + ###### popup path: `component.popup[name]` @@ -427,102 +435,102 @@ path: `component.meta[name]` Translation keys | -> | name | type | default value | description | -> | -------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -> | `depositSlippageWarning` | string | Excludes entry fee. Slippage may be amplified by the leverage. See the docs for more info. | | -> | `withdrawSlippageWarning` | string | Slippage only applies to single asset withdrawals and withdrawals from vaults with debt positions in Aave. | | -> | `minSlippageWarning` | string | Flexible min slippage value that is likely enough to process the transaction. | | -> | `highSlippageWarning` | string | We recommend using another asset to trade with lower slippage. | | -> | `recommendedMinSlippage` | string | Recommended Min Slippage | | -> | `projectedDailyEarningsTooltip` | string | Projected daily earnings are based on the current APY and may differ from actual earnings. | | -> | `dailyEarnings` | string | Daily Earnings | | -> | `projectedYearlyEarningsTooltip` | string | Projected yearly earnings are based on the current APY and may differ from actual earnings. | | -> | `yearlyEarnings` | string | Yearly Earnings | | -> | `fullReceiveDetails` | string | See full details influencing what you will receive. | | -> | `tradeDetails` | string | Trade details | | -> | `maxSlippage` | string | Max slippage | | -> | `minReceiveAmount` | string | You will receive no less than this amount. | | -> | `minReceived` | string | Minimum Received | | -> | `estimatedMultiAssetFractions` | string | Estimated multi asset fractions | | -> | `infinite` | string | Infinite | | -> | `tokenAllowance` | string | Token Allowance | | -> | `entryFee` | string | Entry Fee | | -> | `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. | | -> | `minDepositUsd` | string | Minimum deposit in USD. | | -> | `minDeposit` | string | Minimum Deposit | | -> | `tokensLockTime` | string | Purchased tokens will have a {lockTime} lock. | | -> | `slippageTolerance` | string | Slippage tolerance | | -> | `bypassEntryFee` | string | Bypass Entry Fee | | -> | `tokenAmountToApprove` | string | Amount of tokens to be approved. | | -> | `auto` | string | Auto | | -> | `lengthenLockup` | string | Lengthen lockup to remove entry fee | | -> | `deposit` | string | Buy | | -> | `withdraw` | string | Sell | | -> | `yourBalance` | string | Your Balance | | -> | `max` | string | Max | | -> | `allAssets` | string | All Assets | | -> | `all` | string | All | | -> | `payWith` | string | Pay with | | -> | `buyEstimated` | string | Buy (estimated) | | -> | `sell` | string | Sell | | -> | `receiveEstimated` | string | Receive (estimated) | | -> | `confirmInWallet` | string | Please confirm in wallet | | -> | `pending` | string | Pending... | | -> | `approve` | string | Approve | | -> | `connectWallet` | string | Connect Wallet | | -> | `minimumPurchase` | string | Minimum purchase is ${value} | | -> | `poolIsInactive` | string | {poolSymbol} token is no longer active. Please withdraw from them. | | -> | `poolIsPrivate` | string | This vault is currently private | | -> | `updateOracles` | string | Update Oracles | | -> | `checkingOracles` | string | Checking Oracles | | -> | `confirmMaxSlippage` | string | Confirm {slippagePercentage}% max slippage | | -> | `withdrawalWindowDisabled` | string | You can sell your {tokenSymbol} tokens during withdrawal window period starting from {startTime} | | -> | `withdrawalLiquidityDisabled` | string | Intended withdraw value is greater than available liquidity ({symbol} {value}) | | -> | `withdrawCooldown` | string | You can sell your {tokenSymbol} tokens in {cooldownEndTime} | | -> | `termsOfUse` | string | Terms Of Use | | -> | `termOfUseDepositListTitle` | string | Please know the following before depositing | | -> | `termOfUseDepositAssetSlippage` | string | When exiting, investors receive single asset or the underlying vault assets. Withdraw slippage can be customized in withdraw settings | | -> | `termOfUseDepositBugs` | string | There may be interface bugs on the platform | | -> | `termOfUseDepositDowntime` | string | There may be interface downtime (planned and unplanned) | | -> | `termOfUseDepositAuditRisk` | string | Smart contracts are audited but a risk is still present | | -> | `termOfUseDepositAccept` | string | Accept & Deposit | | -> | `back` | string | Back | | -> | `highSlippage` | string | High Slippage Alert | | +> | name | type | default value | description | +> | -------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +> | `depositSlippageWarning` | string | Excludes entry fee. Slippage may be amplified by the leverage. See the docs for more info. | | +> | `withdrawSlippageWarning` | string | Slippage only applies to single asset withdrawals and withdrawals from vaults with debt positions in Aave. | | +> | `minSlippageWarning` | string | Flexible min slippage value that is likely enough to process the transaction. | | +> | `highSlippageWarning` | string | We recommend using another asset to trade with lower slippage. | | +> | `recommendedMinSlippage` | string | Recommended Min Slippage | | +> | `projectedDailyEarningsTooltip` | string | Projected daily earnings are based on the current APY and may differ from actual earnings. | | +> | `dailyEarnings` | string | Daily Earnings | | +> | `projectedYearlyEarningsTooltip` | string | Projected yearly earnings are based on the current APY and may differ from actual earnings. | | +> | `yearlyEarnings` | string | Yearly Earnings | | +> | `fullReceiveDetails` | string | See full details influencing what you will receive. | | +> | `tradeDetails` | string | Trade details | | +> | `maxSlippage` | string | Max slippage | | +> | `minReceiveAmount` | string | You will receive no less than this amount. | | +> | `minReceived` | string | Minimum Received | | +> | `estimatedMultiAssetFractions` | string | Estimated multi asset fractions | | +> | `infinite` | string | Infinite | | +> | `tokenAllowance` | string | Token Allowance | | +> | `entryFee` | string | Entry Fee | | +> | `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. | | +> | `minDepositUsd` | string | Minimum deposit in USD. | | +> | `minDeposit` | string | Minimum Deposit | | +> | `tokensLockTime` | string | Purchased tokens will have a {lockTime} lock. | | +> | `slippageTolerance` | string | Slippage tolerance | | +> | `bypassEntryFee` | string | Bypass Entry Fee | | +> | `tokenAmountToApprove` | string | Amount of tokens to be approved. | | +> | `auto` | string | Auto | | +> | `lengthenLockup` | string | Lengthen lockup to remove entry fee | | +> | `deposit` | string | Buy | | +> | `withdraw` | string | Sell | | +> | `yourBalance` | string | Your Balance | | +> | `max` | string | Max | | +> | `allAssets` | string | All Assets | | +> | `all` | string | All | | +> | `payWith` | string | Pay with | | +> | `buyEstimated` | string | Buy (estimated) | | +> | `sell` | string | Sell | | +> | `receiveEstimated` | string | Receive (estimated) | | +> | `confirmInWallet` | string | Please confirm in wallet | | +> | `pending` | string | Pending... | | +> | `approve` | string | Approve | | +> | `connectWallet` | string | Connect Wallet | | +> | `minimumPurchase` | string | Minimum purchase is ${value} | | +> | `poolIsInactive` | string | {poolSymbol} token is no longer active. Please withdraw from them. | | +> | `poolIsPrivate` | string | This vault is currently private | | +> | `updateOracles` | string | Update Oracles | | +> | `checkingOracles` | string | Checking Oracles | | +> | `confirmMaxSlippage` | string | Confirm {slippagePercentage}% max slippage | | +> | `withdrawalWindowDisabled` | string | You can sell your {tokenSymbol} tokens during withdrawal window period starting from {startTime} | | +> | `withdrawalLiquidityDisabled` | string | Intended withdraw value is greater than available liquidity ({symbol} {value}) | | +> | `withdrawCooldown` | string | You can sell your {tokenSymbol} tokens in {cooldownEndTime} | | +> | `termsOfUse` | string | Terms Of Use | | +> | `termOfUseDepositListTitle` | string | Please know the following before depositing | | +> | `termOfUseDepositAssetSlippage` | string | When exiting, investors receive single asset or the underlying vault assets. Withdraw slippage can be customized in withdraw settings | | +> | `termOfUseDepositBugs` | string | There may be interface bugs on the platform | | +> | `termOfUseDepositDowntime` | string | There may be interface downtime (planned and unplanned) | | +> | `termOfUseDepositAuditRisk` | string | Smart contracts are audited but a risk is still present | | +> | `termOfUseDepositAccept` | string | Accept & Deposit | | +> | `back` | string | Back | | +> | `highSlippage` | string | High Slippage Alert | | > | `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. | | -> | `highSlippageListTitle` | string | Please consider the following before confirming | | -> | `highSlippageQuoteDiff` | string | Be aware that the final amount of assets you receive may be different from the initially quoted value. | | -> | `highSlippageRisk` | string | Ensure that you understand the risks associated with high slippage and are comfortable proceeding with the trade. | | -> | `confirm` | string | Confirm | | -> | `selectToken` | string | Select Token | | -> | `sendingOrderToWallet` | string | Sending order to your wallet | | -> | `settingUpTx` | string | Setting up transaction | | -> | `miningTx` | string | Processing | | -> | `updateSynthetixOracles` | string | Updating Synthetix Oracles | | -> | `approveSpending` | string | Approve {symbol} spending | | -> | `pay` | string | Pay | | -> | `multiAssetFractions` | string | multi asset fractions | | -> | `swappableAssets` | string | swappable assets | | -> | `explorer` | string | Explorer | | -> | `as` | string | As | | -> | `switchNetwork` | string | Switch Network | | -> | `depositAction` | string | Buy | | -> | `withdrawAction` | string | Sell | | -> | `swapAction` | string | Swap | | -> | `unrollAction` | string | Unroll | | -> | `unrollAndClaimAction` | string | Claim | | -> | `claimAction` | string | Claim Without Swap | | -> | `claimLabel` | string | Claim Assets | | -> | `swapAndClaimTo` | string | Swap and claim assets to | | -> | `initWithdrawDescription` | string | Unroll | | -> | `initWithdrawTooltip` | string | Unroll prepares assets for single asset withdrawal | | -> | `completeWithdrawDescription` | string | Claim | | -> | `completeWithdrawTooltip` | string | This final step swaps all assets to a single asset and sends it to your wallet | | -> | `unrollAndClaimDescription` | string | Claim | | -> | `total` | string | Total: | | -> | `showAll` | string | Show All | | -> | `hide` | string | Hide | | -> | `refreshSwapQuoteTooltip` | string | Refresh swap quote | | -> | `proceedWithNextStep` | string | Please proceed with the next step. | | +> | `highSlippageListTitle` | string | Please consider the following before confirming | | +> | `highSlippageQuoteDiff` | string | Be aware that the final amount of assets you receive may be different from the initially quoted value. | | +> | `highSlippageRisk` | string | Ensure that you understand the risks associated with high slippage and are comfortable proceeding with the trade. | | +> | `confirm` | string | Confirm | | +> | `selectToken` | string | Select Token | | +> | `sendingOrderToWallet` | string | Sending order to your wallet | | +> | `settingUpTx` | string | Setting up transaction | | +> | `miningTx` | string | Processing | | +> | `updateSynthetixOracles` | string | Updating Synthetix Oracles | | +> | `approveSpending` | string | Approve {symbol} spending | | +> | `pay` | string | Pay | | +> | `multiAssetFractions` | string | multi asset fractions | | +> | `swappableAssets` | string | swappable assets | | +> | `explorer` | string | Explorer | | +> | `as` | string | As | | +> | `switchNetwork` | string | Switch Network | | +> | `depositAction` | string | Buy | | +> | `withdrawAction` | string | Sell | | +> | `swapAction` | string | Swap | | +> | `unrollAction` | string | Unroll | | +> | `unrollAndClaimAction` | string | Claim | | +> | `claimAction` | string | Claim Without Swap | | +> | `claimLabel` | string | Claim Assets | | +> | `swapAndClaimTo` | string | Swap and claim assets to | | +> | `initWithdrawDescription` | string | Unroll | | +> | `initWithdrawTooltip` | string | Unroll prepares assets for single asset withdrawal | | +> | `completeWithdrawDescription` | string | Claim | | +> | `completeWithdrawTooltip` | string | This final step swaps all assets to a single asset and sends it to your wallet | | +> | `unrollAndClaimDescription` | string | Claim | | +> | `total` | string | Total: | | +> | `showAll` | string | Show All | | +> | `hide` | string | Hide | | +> | `refreshSwapQuoteTooltip` | string | Refresh swap quote | | +> | `proceedWithNextStep` | string | Please proceed with the next step. | | ###### Source: `packages/trading-widget/src/trading-widget/providers/translation-provider/translation-provider.tsx` diff --git a/packages/trading-widget/package.json b/packages/trading-widget/package.json index b2d2c8ee..fecbaabe 100644 --- a/packages/trading-widget/package.json +++ b/packages/trading-widget/package.json @@ -1,6 +1,6 @@ { "name": "@dhedge/trading-widget", - "version": "3.2.1", + "version": "3.2.2", "license": "MIT", "type": "module", "main": "index.js", diff --git a/packages/trading-widget/src/trading-widget/components/common/layout/notification/notification.tsx b/packages/trading-widget/src/trading-widget/components/common/layout/notification/notification.tsx index 5b6d4054..a19b6ac9 100644 --- a/packages/trading-widget/src/trading-widget/components/common/layout/notification/notification.tsx +++ b/packages/trading-widget/src/trading-widget/components/common/layout/notification/notification.tsx @@ -40,7 +40,7 @@ export const Notification: FC> = ({ }, [defaultNotificationDuration, onClose]) return ( -
+
{children}
{!!onClose && ( diff --git a/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.tsx b/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.tsx index 80c9b806..6ca5ea27 100644 --- a/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.tsx +++ b/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.tsx @@ -153,6 +153,12 @@ export const ThemeProvider: FC> = ({ config?.global?.color?.colorIcon ?? 'var(--panel-content-color)' }`, + //notification + '--panel-notification-bg': `${ + config?.component?.notification?.color?.colorBg ?? + 'var(--panel-secondary-color)' + }`, + //popup //popup-color '--panel-popup-content-color': `${ diff --git a/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.types.ts b/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.types.ts index 0fbebcb8..9ebd5299 100644 --- a/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.types.ts +++ b/packages/trading-widget/src/trading-widget/providers/theme-provider/theme-provider.types.ts @@ -56,6 +56,11 @@ export interface ThemeProviderConfigProps { } } component?: { + notification?: { + color?: { + colorBg?: string + } + } popup?: { color?: { colorText?: string