Hide private data - pt.1 (#2515)

- [x] `SymDeposit` - [x] `Swap` - [x] `EditableAddress` - [x] `MaxBalanceButton`
thorchain · Jan 2, 2023 · 5181488 · 5181488
1 parent e64d3e7
commit 5181488
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 55 deletions.
diff --git a/src/renderer/components/deposit/add/SymDeposit.stories.tsx b/src/renderer/components/deposit/add/SymDeposit.stories.tsx
@@ -134,7 +134,8 @@ const defaultProps: SymDepositProps = {
   hasAsymAssets: RD.initial,
   symAssetMismatch: RD.initial,
   openRecoveryTool: () => console.log('openRecoveryTool'),
-  openAsymDepositTool: () => console.log('openAsymDepositTool')
+  openAsymDepositTool: () => console.log('openAsymDepositTool'),
+  hidePrivateData: false
 }
 
 export const Default: Story = () => <SymDeposit {...defaultProps} />

diff --git a/src/renderer/components/deposit/add/SymDeposit.tsx b/src/renderer/components/deposit/add/SymDeposit.tsx
@@ -48,7 +48,7 @@ import { eqBaseAmount, eqOAsset, eqOApproveParams, eqAsset } from '../../../help
 import { sequenceSOption, sequenceTOption } from '../../../helpers/fpHelpers'
 import * as PoolHelpers from '../../../helpers/poolHelper'
 import { liveData, LiveData } from '../../../helpers/rx/liveData'
-import { emptyString, loadingString, noDataString } from '../../../helpers/stringHelper'
+import { emptyString, hiddenString, loadingString, noDataString } from '../../../helpers/stringHelper'
 import * as WalletHelper from '../../../helpers/walletHelper'
 import { useSubscriptionState } from '../../../hooks/useSubscriptionState'
 import { INITIAL_SYM_DEPOSIT_STATE } from '../../../services/chain/const'
@@ -153,6 +153,7 @@ export type Props = {
   hasAsymAssets: LiquidityProviderHasAsymAssetsRD
   symAssetMismatch: LiquidityProviderAssetMismatchRD
   openAsymDepositTool: FP.Lazy<void>
+  hidePrivateData: boolean
 }
 
 type SelectedInput = 'asset' | 'rune' | 'none'
@@ -193,7 +194,8 @@ export const SymDeposit: React.FC<Props> = (props) => {
     openRecoveryTool,
     hasAsymAssets: hasAsymAssetsRD,
     symAssetMismatch: symAssetMismatchRD,
-    openAsymDepositTool
+    openAsymDepositTool,
+    hidePrivateData
   } = props
 
   const intl = useIntl()
@@ -240,16 +242,18 @@ export const SymDeposit: React.FC<Props> = (props) => {
         : FP.pipe(
             oRuneWB,
             O.map(({ amount, asset }) =>
-              formatAssetAmountCurrency({
-                amount: baseToAsset(amount),
-                asset,
-                decimal: 8,
-                trimZeros: true
-              })
+              hidePrivateData
+                ? hiddenString
+                : formatAssetAmountCurrency({
+                    amount: baseToAsset(amount),
+                    asset,
+                    decimal: 8,
+                    trimZeros: true
+                  })
             ),
             O.getOrElse(() => noDataString)
           ),
-    [oRuneWB, walletBalancesLoading]
+    [hidePrivateData, oRuneWB, walletBalancesLoading]
   )
 
   const oAssetWB: O.Option<WalletBalance> = useMemo(() => {
@@ -268,16 +272,18 @@ export const SymDeposit: React.FC<Props> = (props) => {
         : FP.pipe(
             oAssetWB,
             O.map(({ amount, asset }) =>
-              formatAssetAmountCurrency({
-                amount: baseToAsset(amount),
-                asset,
-                decimal: 8,
-                trimZeros: true
-              })
+              hidePrivateData
+                ? hiddenString
+                : formatAssetAmountCurrency({
+                    amount: baseToAsset(amount),
+                    asset,
+                    decimal: 8,
+                    trimZeros: true
+                  })
             ),
             O.getOrElse(() => noDataString)
           ),
-    [oAssetWB, walletBalancesLoading]
+    [hidePrivateData, oAssetWB, walletBalancesLoading]
   )
 
   const hasAssetLedger = useMemo(
@@ -1844,6 +1850,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
             { id: 'deposit.add.max.infoWithFee' },
             { balance: runeBalanceLabel, fee: runeFeeLabel }
           )}
+          hidePrivateData={hidePrivateData}
         />
         {minRuneAmountError &&
           renderMinAmount({
@@ -1892,6 +1899,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
                 )
               : intl.formatMessage({ id: 'deposit.add.max.info' }, { balance: assetBalanceLabel })
           }
+          hidePrivateData={hidePrivateData}
         />
         {minAssetAmountError &&
           renderMinAmount({
@@ -1903,15 +1911,16 @@ export const SymDeposit: React.FC<Props> = (props) => {
       </div>
     ),
     [
+      maxAssetAmountToDepositMax1e8,
       asset,
-      updateAssetAmount,
+      intl,
       assetBalanceLabel,
       assetFeeLabel,
-      intl,
-      maxAssetAmountToDepositMax1e8,
+      hidePrivateData,
       minAssetAmountError,
+      renderMinAmount,
       minAssetAmountToDepositMax1e8,
-      renderMinAmount
+      updateAssetAmount
     ]
   )
 
@@ -2086,7 +2095,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
                       oRuneWB,
                       O.map(({ walletAddress: address }) => (
                         <TooltipAddress title={address} key="tooltip-asset-sender-addr">
-                          {address}
+                          {hidePrivateData ? hiddenString : address}
                         </TooltipAddress>
                       )),
                       O.getOrElse(() => <>{noDataString}</>)
@@ -2101,7 +2110,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
                       oAssetWB,
                       O.map(({ walletAddress: address }) => (
                         <TooltipAddress title={address} key="tooltip-asset-sender-addr">
-                          {address}
+                          {hidePrivateData ? hiddenString : address}
                         </TooltipAddress>
                       )),
                       O.getOrElse(() => <>{noDataString}</>)
@@ -2179,7 +2188,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
                       oDepositParams,
                       O.map(({ memos: { rune: memo } }) => (
                         <Tooltip title={memo} key="tooltip-rune-memo">
-                          {memo}
+                          {hidePrivateData ? hiddenString : memo}
                         </Tooltip>
                       )),
                       O.toNullable
@@ -2209,7 +2218,7 @@ export const SymDeposit: React.FC<Props> = (props) => {
                       oDepositParams,
                       O.map(({ memos: { asset: memo } }) => (
                         <Tooltip title={memo} key="tooltip-asset-memo">
-                          {memo}
+                          {hidePrivateData ? hiddenString : memo}
                         </Tooltip>
                       )),
                       O.toNullable

diff --git a/src/renderer/components/swap/EditableAddress.stories.tsx b/src/renderer/components/swap/EditableAddress.stories.tsx
@@ -15,7 +15,8 @@ const defaultProps: EditableAddressProps = {
   onChangeAddress: () => console.log('address changed'),
   onChangeEditableAddress: () => console.log('address changed'),
   onChangeEditableMode: () => console.log('edit mode changed'),
-  addressValidator: (address: Address) => Promise.resolve(eqString.equals(address, bnbAddress))
+  addressValidator: (address: Address) => Promise.resolve(eqString.equals(address, bnbAddress)),
+  hidePrivateData: false
 }
 export const Default: StoryFn = () => <Component {...defaultProps} />
 

diff --git a/src/renderer/components/swap/EditableAddress.tsx b/src/renderer/components/swap/EditableAddress.tsx
@@ -9,6 +9,7 @@ import { useIntl } from 'react-intl'
 
 import { Network } from '../../../shared/api/types'
 import { truncateAddress } from '../../helpers/addressHelper'
+import { hiddenString } from '../../helpers/stringHelper'
 import { AddressValidationAsync } from '../../services/clients'
 import { InnerForm } from '../shared/form'
 import { BaseButton } from '../uielements/button'
@@ -24,6 +25,7 @@ export type EditableAddressProps = {
   onChangeEditableAddress: (address: Address) => void
   onChangeEditableMode: (editModeActive: boolean) => void
   addressValidator: AddressValidationAsync
+  hidePrivateData: boolean
 }
 export const EditableAddress = ({
   asset,
@@ -33,7 +35,8 @@ export const EditableAddress = ({
   onClickOpenAddress,
   onChangeEditableMode,
   addressValidator,
-  network
+  network,
+  hidePrivateData
 }: EditableAddressProps) => {
   const RECIPIENT_FIELD = 'recipient'
   const intl = useIntl()
@@ -100,7 +103,7 @@ export const EditableAddress = ({
               setEditableAddress(O.fromNullable(address))
               onChangeEditableMode(true)
             }}>
-            {truncatedAddress}
+            {hidePrivateData ? hiddenString : truncatedAddress}
           </BaseButton>
         </Tooltip>
         <div className="flex flex-row items-center">
@@ -119,7 +122,7 @@ export const EditableAddress = ({
         </div>
       </div>
     )
-  }, [address, truncatedAddress, onChangeEditableMode, onClickOpenAddress])
+  }, [address, hidePrivateData, truncatedAddress, onChangeEditableMode, onClickOpenAddress])
 
   const renderEditableAddress = useCallback(
     (editableAddress: Address) => {

diff --git a/src/renderer/components/swap/Swap.stories.tsx b/src/renderer/components/swap/Swap.stories.tsx
@@ -117,7 +117,8 @@ const defaultProps: SwapProps = {
   isApprovedERC20Token$: () => Rx.of(RD.success(true)),
   importWalletHandler: () => console.log('import wallet'),
   clickAddressLinkHandler: () => console.log('handle click on address'),
-  addressValidator: () => Promise.resolve(true)
+  addressValidator: () => Promise.resolve(true),
+  hidePrivateData: false
 }
 
 export const Default: StoryFn = () => <Component {...defaultProps} />

diff --git a/src/renderer/components/swap/Swap.tsx b/src/renderer/components/swap/Swap.tsx
@@ -51,7 +51,7 @@ import { eqAsset, eqBaseAmount, eqOAsset, eqOApproveParams, eqAddress } from '..
 import { sequenceSOption, sequenceTOption } from '../../helpers/fpHelpers'
 import * as PoolHelpers from '../../helpers/poolHelper'
 import { liveData, LiveData } from '../../helpers/rx/liveData'
-import { emptyString, loadingString, noDataString } from '../../helpers/stringHelper'
+import { emptyString, hiddenString, loadingString, noDataString } from '../../helpers/stringHelper'
 import {
   filterWalletBalancesByAssets,
   getWalletBalanceByAssetAndWalletType,
@@ -169,6 +169,7 @@ export type SwapProps = {
   disableSwapAction: boolean
   clickAddressLinkHandler: (address: Address) => void
   addressValidator: AddressValidationAsync
+  hidePrivateData: boolean
 }
 
 export const Swap = ({
@@ -208,7 +209,8 @@ export const Swap = ({
   importWalletHandler,
   disableSwapAction,
   clickAddressLinkHandler,
-  addressValidator
+  addressValidator,
+  hidePrivateData
 }: SwapProps) => {
   const intl = useIntl()
 
@@ -1684,6 +1686,7 @@ export const Swap = ({
                 balance={{ amount: maxAmountToSwapMax1e8, asset: sourceAsset }}
                 onClick={() => setAmountToSwapMax1e8(maxAmountToSwapMax1e8)}
                 maxInfoText={maxBalanceInfoTxt}
+                hidePrivateData={hidePrivateData}
               />
               {minAmountError && renderMinAmount}
             </div>
@@ -1732,6 +1735,7 @@ export const Swap = ({
                   onChangeEditableAddress={onChangeEditableRecipientAddress}
                   onChangeEditableMode={(editModeActive) => setCustomAddressEditActive(editModeActive)}
                   addressValidator={addressValidator}
+                  hidePrivateData={hidePrivateData}
                 />
               </div>
             )),
@@ -1925,7 +1929,7 @@ export const Swap = ({
                           oSourceWalletAddress,
                           O.map((address) => (
                             <TooltipAddress title={address} key="tooltip-sender-addr">
-                              {address}
+                              {hidePrivateData ? hiddenString : address}
                             </TooltipAddress>
                           )),
                           O.getOrElse(() => <>{noDataString}</>)
@@ -1940,7 +1944,7 @@ export const Swap = ({
                           oRecipientAddress,
                           O.map((address) => (
                             <TooltipAddress title={address} key="tooltip-target-addr">
-                              {address}
+                              {hidePrivateData ? hiddenString : address}
                             </TooltipAddress>
                           )),
                           O.getOrElse(() => <>{noDataString}</>)
@@ -1983,6 +1987,8 @@ export const Swap = ({
                       <div className="truncate pl-20px text-[13px] normal-case leading-normal">
                         {walletBalancesLoading
                           ? loadingString
+                          : hidePrivateData
+                          ? hiddenString
                           : formatAssetAmountCurrency({
                               amount: baseToAsset(sourceAssetAmountMax1e8),
                               asset: sourceAsset,
@@ -2006,7 +2012,9 @@ export const Swap = ({
                     <div className="ml-[-2px] flex w-full items-start pt-10px font-mainBold text-[14px]">
                       {memoTitle}
                     </div>
-                    <div className="truncate pl-10px font-main text-[12px]">{memoLabel}</div>
+                    <div className="truncate pl-10px font-main text-[12px]">
+                      {hidePrivateData ? hiddenString : memoLabel}
+                    </div>
                   </>
                 )}
               </div>

diff --git a/src/renderer/components/uielements/button/MaxBalanceButton.tsx b/src/renderer/components/uielements/button/MaxBalanceButton.tsx
@@ -4,6 +4,7 @@ import { Balance } from '@xchainjs/xchain-client'
 import { BaseAmount, baseToAsset, formatAssetAmountCurrency } from '@xchainjs/xchain-util'
 import { useIntl } from 'react-intl'
 
+import { hiddenString } from '../../../helpers/stringHelper'
 import { InfoIcon } from '../info'
 import { TextButton, Props as ButtonProps } from './TextButton'
 
@@ -15,6 +16,8 @@ export type ComponentProps = {
   className?: string
   classNameButton?: string
   classNameIcon?: string
+  // TODO (@veado) Make it default (not) optional to handle private data everyhere properly
+  hidePrivateData?: boolean
 }
 
 export type Props = ComponentProps & Omit<ButtonProps, 'onClick'>
@@ -29,7 +32,8 @@ export const MaxBalanceButton: React.FC<Props> = (props): JSX.Element => {
     size = 'normal',
     className = '',
     classNameButton = '',
-    classNameIcon = ''
+    classNameIcon = '',
+    hidePrivateData = false
   } = props
   const { amount, asset } = balance
 
@@ -47,11 +51,13 @@ export const MaxBalanceButton: React.FC<Props> = (props): JSX.Element => {
         className={`mr-5px w-auto !p-0 ${classNameButton} whitespace-nowrap`}>
         <span className="pr-5px underline">{intl.formatMessage({ id: 'common.max' })}:</span>
         &nbsp;
-        {formatAssetAmountCurrency({
-          amount: baseToAsset(amount),
-          asset,
-          trimZeros: true
-        })}
+        {hidePrivateData
+          ? hiddenString
+          : formatAssetAmountCurrency({
+              amount: baseToAsset(amount),
+              asset,
+              trimZeros: true
+            })}
       </TextButton>
 
       {maxInfoText && <InfoIcon tooltip={maxInfoText} className={classNameIcon} />}

diff --git a/src/renderer/components/wallet/assets/AssetsTableCollapsable.stories.tsx b/src/renderer/components/wallet/assets/AssetsTableCollapsable.stories.tsx
@@ -182,6 +182,7 @@ const Template = (args: Partial<Record<Chain, RDStatus>>) => {
       pricePool={RUNE_PRICE_POOL}
       network="testnet"
       mimirHalt={RD.initial}
+      hidePrivateData={false}
     />
   )
 }