diff --git a/components/account/AccountActions.tsx b/components/account/AccountActions.tsx index c97cf2f7..ddb095bc 100644 --- a/components/account/AccountActions.tsx +++ b/components/account/AccountActions.tsx @@ -4,6 +4,8 @@ import { ArrowDownRightIcon, ArrowUpLeftIcon, DocumentDuplicateIcon, + EyeIcon, + EyeSlashIcon, PencilIcon, SquaresPlusIcon, TrashIcon, @@ -29,6 +31,8 @@ import { useViewport } from 'hooks/useViewport' import { breakpoints } from 'utils/theme' import MangoAccountSizeModal from '@components/modals/MangoAccountSizeModal' import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts' +import useLocalStorageState from 'hooks/useLocalStorageState' +import { PRIVACY_MODE } from 'utils/constants' export const handleCopyAddress = ( mangoAccount: MangoAccount, @@ -51,6 +55,7 @@ const AccountActions = () => { const [showDelegateModal, setShowDelegateModal] = useState(false) const [showCreateAccountModal, setShowCreateAccountModal] = useState(false) const [showAccountSizeModal, setShowAccountSizeModal] = useState(false) + const [privacyMode, setPrivacyMode] = useLocalStorageState(PRIVACY_MODE) const { connected } = useWallet() const { isDelegatedAccount, isUnownedAccount } = useUnownedAccount() const { width } = useViewport() @@ -169,6 +174,26 @@ const AccountActions = () => { {t('close-account')} + setPrivacyMode(!privacyMode)} + > + {privacyMode ? ( + <> + + + {t('settings:privacy-disable')} + + + ) : ( + <> + + + {t('settings:privacy-enable')} + + + )} + diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx index 99e0db6e..ca4ed909 100644 --- a/components/settings/DisplaySettings.tsx +++ b/components/settings/DisplaySettings.tsx @@ -19,6 +19,7 @@ import { useRouter } from 'next/router' import { AUTO_CONNECT_WALLET, NOTIFICATION_POSITION_KEY, + PRIVACY_MODE, SIZE_INPUT_UI_KEY, TRADE_CHART_UI_KEY, TRADE_LAYOUT_KEY, @@ -92,6 +93,8 @@ const DisplaySettings = () => { true, ) + const [privacyMode, setPrivacyMode] = useLocalStorageState(PRIVACY_MODE) + // add nft skins to theme selection list useEffect(() => { if (nfts.length) { @@ -227,6 +230,13 @@ const DisplaySettings = () => { onChange={() => setAutoConnect(!autoConnect)} /> +
+

Privacy Mode

+ setPrivacyMode(!privacyMode)} + /> +
) } diff --git a/components/shared/FormatNumericValue.tsx b/components/shared/FormatNumericValue.tsx index e37b7bb3..6079e3e6 100644 --- a/components/shared/FormatNumericValue.tsx +++ b/components/shared/FormatNumericValue.tsx @@ -1,4 +1,6 @@ import Decimal from 'decimal.js' +import useLocalStorageState from 'hooks/useLocalStorageState' +import { PRIVACY_MODE } from 'utils/constants' import { formatCurrencyValue, formatNumericValue } from 'utils/numbers' const FormatNumericValue = ({ @@ -14,10 +16,13 @@ const FormatNumericValue = ({ isUsd?: boolean roundUp?: boolean }) => { + const [privacyMode] = useLocalStorageState(PRIVACY_MODE) return ( {isUsd - ? formatCurrencyValue(value, decimals) + ? privacyMode + ? '****' + : formatCurrencyValue(value, decimals) : formatNumericValue(value, decimals, roundUp)} ) diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json index 140f793c..f7323349 100644 --- a/public/locales/en/settings.json +++ b/public/locales/en/settings.json @@ -68,6 +68,8 @@ "perp-positions": "Perp Positions", "placing-order": "Placing Order...", "preferred-explorer": "Preferred Explorer", + "privacy-disable": "Disable Privacy Mode", + "privacy-enable": "Enable Privacy Mode", "recent-trades": "Recent Trades", "rpc": "RPC", "rpc-provider": "RPC Provider", diff --git a/public/locales/es/settings.json b/public/locales/es/settings.json index 140f793c..f7323349 100644 --- a/public/locales/es/settings.json +++ b/public/locales/es/settings.json @@ -68,6 +68,8 @@ "perp-positions": "Perp Positions", "placing-order": "Placing Order...", "preferred-explorer": "Preferred Explorer", + "privacy-disable": "Disable Privacy Mode", + "privacy-enable": "Enable Privacy Mode", "recent-trades": "Recent Trades", "rpc": "RPC", "rpc-provider": "RPC Provider", diff --git a/public/locales/ru/settings.json b/public/locales/ru/settings.json index 140f793c..f7323349 100644 --- a/public/locales/ru/settings.json +++ b/public/locales/ru/settings.json @@ -68,6 +68,8 @@ "perp-positions": "Perp Positions", "placing-order": "Placing Order...", "preferred-explorer": "Preferred Explorer", + "privacy-disable": "Disable Privacy Mode", + "privacy-enable": "Enable Privacy Mode", "recent-trades": "Recent Trades", "rpc": "RPC", "rpc-provider": "RPC Provider", diff --git a/public/locales/zh/settings.json b/public/locales/zh/settings.json index 3041a34c..6e27d9ef 100644 --- a/public/locales/zh/settings.json +++ b/public/locales/zh/settings.json @@ -67,6 +67,8 @@ "perp-positions": "Perp Positions", "placing-order": "Placing Order...", "preferred-explorer": "首选探索器", + "privacy-disable": "Disable Privacy Mode", + "privacy-enable": "Enable Privacy Mode", "recent-trades": "最近交易", "rpc": "RPC", "rpc-provider": "RPC提供者", diff --git a/public/locales/zh_tw/settings.json b/public/locales/zh_tw/settings.json index 035381da..d591cfa1 100644 --- a/public/locales/zh_tw/settings.json +++ b/public/locales/zh_tw/settings.json @@ -67,6 +67,8 @@ "perp-positions": "Perp Positions", "placing-order": "Placing Order...", "preferred-explorer": "首選探索器", + "privacy-disable": "Disable Privacy Mode", + "privacy-enable": "Enable Privacy Mode", "recent-trades": "最近交易", "rpc": "RPC", "rpc-provider": "RPC提供者", diff --git a/utils/constants.ts b/utils/constants.ts index c8462f29..4d349b43 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -73,6 +73,8 @@ export const AUTO_CONNECT_WALLET = 'auto-connect-0.1' export const LAST_WALLET_NAME = 'lastWalletName' +export const PRIVACY_MODE = 'privacy-mode-0.1' + // Unused export const PROFILE_CATEGORIES = [ 'borrower',