diff --git a/ui/_locales/en/messages.json b/ui/_locales/en/messages.json index be3a9b8a96..17e0d38f27 100644 --- a/ui/_locales/en/messages.json +++ b/ui/_locales/en/messages.json @@ -550,9 +550,13 @@ "asset.label.balance": "Balance", "asset.label.symbol": "Name", "networkSelect.title": "Select Network", - "warning.alreadyExists.title": "Asset already exists, you will see it once your balance is over 0", - "warning.alreadyExists.desc": "If you still have issues seeing an asset, turn off “Hide asset balances under 2$” from Settings", - "warning.dust.title": "Asset balance is under <$2, you wil see it once your balance is over $2", + "warning.alreadyExists.title": "Asset already exists", + "warning.alreadyExists.desc": { + "dust": "Your balance is under {{sign}}{{amount}}. You will see it once you turn off “{{settings}}” in Settings.", + "noBalance": "Your balance is 0, you will see it once your balance is over {{sign}}{{amount}}.", + "visibility": "You should see it in your asset list." + }, + "warning.dust.title": "Asset balance is under {{sign}}{{amount}}, you wil see it once your balance is over {{sign}}{{amount}}", "error.invalidToken": "Invalid contract address", "submit": "Add asset", "snackbar.success": "Asset added successfully", diff --git a/ui/pages/Settings.tsx b/ui/pages/Settings.tsx index 3d1fc96215..34a71365b9 100644 --- a/ui/pages/Settings.tsx +++ b/ui/pages/Settings.tsx @@ -14,7 +14,10 @@ import { toggleShowUnverifiedAssets, } from "@tallyho/tally-background/redux-slices/ui" import { useHistory } from "react-router-dom" -import { selectMainCurrencySign } from "@tallyho/tally-background/redux-slices/selectors" +import { + selectMainCurrencySign, + userValueDustThreshold, +} from "@tallyho/tally-background/redux-slices/selectors" import { FeatureFlags, isEnabled, @@ -156,7 +159,7 @@ export default function Settings(): ReactElement { const hideSmallAssetBalance = { title: t("settings.hideSmallAssetBalance", { - amount: 2, + amount: userValueDustThreshold, sign: mainCurrencySign, }), component: () => ( diff --git a/ui/pages/Settings/SettingsAddCustomAsset.tsx b/ui/pages/Settings/SettingsAddCustomAsset.tsx index 9925e0c3ba..6a0b7fb9f3 100644 --- a/ui/pages/Settings/SettingsAddCustomAsset.tsx +++ b/ui/pages/Settings/SettingsAddCustomAsset.tsx @@ -10,6 +10,7 @@ import { } from "@tallyho/tally-background/redux-slices/assets" import { selectCurrentNetwork, + selectMainCurrencySign, userValueDustThreshold, } from "@tallyho/tally-background/redux-slices/selectors" import { selectEVMNetworks } from "@tallyho/tally-background/redux-slices/selectors/networks" @@ -96,6 +97,7 @@ export default function SettingsAddCustomAsset(): ReactElement { const currentNetwork = useBackgroundSelector(selectCurrentNetwork) const allNetworks = useBackgroundSelector(selectEVMNetworks) const showTestNetworks = useBackgroundSelector(selectShowTestNetworks) + const mainCurrencySign = useBackgroundSelector(selectMainCurrencySign) const networks = allNetworks.filter( (network) => @@ -178,9 +180,32 @@ export default function SettingsAddCustomAsset(): ReactElement { const hideDustEnabled = useBackgroundSelector(selectHideDust) const showWarningAboutDust = hideDustEnabled && + assetData?.mainCurrencyAmount !== 0 && assetData?.mainCurrencyAmount !== undefined && assetData?.mainCurrencyAmount < userValueDustThreshold + const warningOptions = { + amount: userValueDustThreshold, + sign: mainCurrencySign, + } + + const renderWarningText = () => { + if (showWarningAboutDust) { + return t("warning.alreadyExists.desc.dust", { + ...warningOptions, + settings: sharedT("settings.hideSmallAssetBalance", warningOptions), + }) + } + + // showWarningAboutNoBalance + if (assetData?.mainCurrencyAmount === 0) { + return t("warning.alreadyExists.desc.noBalance", warningOptions) + } + + // showWarningAboutVisibility + return t("warning.alreadyExists.desc.visibility") + } + return (
{t(`title`)} @@ -370,7 +395,7 @@ export default function SettingsAddCustomAsset(): ReactElement { />
{t("warning.alreadyExists.title")}
-
{t("warning.alreadyExists.desc")}
+
{renderWarningText()}
) : ( @@ -385,7 +410,7 @@ export default function SettingsAddCustomAsset(): ReactElement { />
- {t("warning.dust.title")} + {t("warning.dust.title", warningOptions)}
@@ -398,6 +423,7 @@ export default function SettingsAddCustomAsset(): ReactElement { background: var(--green-120); border-radius: 8px; padding: 8px; + padding-right: 24px; display: flex; gap: 8px; }