Merge pull request #232 from blockworks-foundation/lou/position-privacy

Add privacy toggle to PerpPositions

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 = () => {
                       <TrashIcon className="h-4 w-4" />
                       <span className="ml-2">{t('close-account')}</span>
                     </ActionsLinkButton>
+                    <ActionsLinkButton
+                      mangoAccount={mangoAccount!}
+                      onClick={() => setPrivacyMode(!privacyMode)}
+                    >
+                      {privacyMode ? (
+                        <>
+                          <EyeIcon className="h-4 w-4" />
+                          <span className="ml-2">
+                            {t('settings:privacy-disable')}
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <EyeSlashIcon className="h-4 w-4" />
+                          <span className="ml-2">
+                            {t('settings:privacy-enable')}
+                          </span>
+                        </>
+                      )}
+                    </ActionsLinkButton>
                   </Popover.Panel>
                 </Transition>
               </>

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)}
         />
       </div>
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
+        <p className="">Privacy Mode</p>
+        <Switch
+          checked={privacyMode}
+          onChange={() => setPrivacyMode(!privacyMode)}
+        />
+      </div>
     </>
   )
 }

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 (
     <span className={classNames}>
       {isUsd
-        ? formatCurrencyValue(value, decimals)
+        ? privacyMode
+          ? '****'
+          : formatCurrencyValue(value, decimals)
         : formatNumericValue(value, decimals, roundUp)}
     </span>
   )

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",

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",

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",

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提供者",

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提供者",

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',