[DDW-814] Introduce configurable replacer pattern

input-output-hk · Nov 22, 2021 · c9c19b0 · c9c19b0
1 parent 97b0891
commit c9c19b0
Show file tree

Hide file tree

Showing 14 changed files with 137 additions and 114 deletions.
diff --git a/source/renderer/app/components/assets/AssetAmount.js b/source/renderer/app/components/assets/AssetAmount.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { defineMessages, FormattedHTMLMessage } from 'react-intl';
 import { observer } from 'mobx-react';
+import { discreetWalletTokenAmount } from '../../features/discreet-mode/replacers/discreetWalletTokenAmount';
 import styles from './AssetAmount.scss';
 import type { AssetMetadata } from '../../api/assets/types';
 import { useDiscreetModeFeature } from '../../features/discreet-mode';
@@ -39,11 +40,13 @@ function AssetAmount({
   if (isLoading) return '-';
   const componentStyles = classnames([styles.component, className]);
   const content = !isLoading
-    ? discreetModeFeature.hideOrShowTokenWalletAmount({
-        amount,
-        metadata,
-        decimals,
-        isShort,
+    ? discreetModeFeature.discreetValue({
+        replacer: discreetWalletTokenAmount({
+          amount,
+          metadata,
+          decimals,
+          isShort,
+        }),
       })
     : '-';
 
@@ -55,10 +58,12 @@ function AssetAmount({
             <FormattedHTMLMessage
               {...messages.unformattedAmount}
               values={{
-                amount: discreetModeFeature.hideOrShowTokenWalletAmount({
-                  amount,
-                  metadata: null,
-                  decimals: 0,
+                amount: discreetModeFeature.discreetValue({
+                  replacer: discreetWalletTokenAmount({
+                    amount,
+                    metadata: null,
+                    decimals: 0,
+                  }),
                 }),
               }}
             />

diff --git a/source/renderer/app/components/staking/delegation-center/widgets/WalletAmount.js b/source/renderer/app/components/staking/delegation-center/widgets/WalletAmount.js
@@ -16,7 +16,7 @@ export function WalletAmount({ amount, walletAmount }: Props) {
     <FormattedHTMLMessage
       {...walletAmount}
       values={{
-        amount: discreetModeFeature.hideOrShowSensitiveData(amount),
+        amount: discreetModeFeature.discreetValue({ value: amount }),
       }}
     />
   );

diff --git a/source/renderer/app/components/wallet/utxo/WalletUtxoDescription.js b/source/renderer/app/components/wallet/utxo/WalletUtxoDescription.js
@@ -21,7 +21,7 @@ export function WalletUtxoDescription({
     <FormattedHTMLMessage
       {...description}
       values={{
-        formattedWalletAmount: discreetModeFeature.hideOrShowSensitiveData(
+        formattedWalletAmount: discreetModeFeature.discreetValue(
           formattedWalletAmount
         ),
         walletUtxosAmount,

diff --git a/source/renderer/app/components/widgets/forms/AssetsDropdown.js b/source/renderer/app/components/widgets/forms/AssetsDropdown.js
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import { omit, filter, escapeRegExp } from 'lodash';
+import { discreetWalletTokenAmount } from '../../../features/discreet-mode/replacers/discreetWalletTokenAmount';
 import ItemsDropdown from './ItemsDropdown';
 import type { AssetToken } from '../../../api/assets/types';
 import { useDiscreetModeFeature } from '../../../features/discreet-mode';
@@ -57,10 +58,12 @@ export default function AssetsDropdown({
   };
   const formattedOptions = assets.map((asset) => {
     const { uniqueId: value, metadata, quantity, decimals } = asset;
-    const detail = discreetModeFeature.hideOrShowTokenWalletAmount({
-      amount: quantity,
-      metadata,
-      decimals,
+    const detail = discreetModeFeature.discreetValue({
+      replacer: discreetWalletTokenAmount({
+        amount: quantity,
+        metadata,
+        decimals,
+      }),
     });
     return {
       label: (

diff --git a/source/renderer/app/components/widgets/forms/WalletsDropdown.js b/source/renderer/app/components/widgets/forms/WalletsDropdown.js
@@ -1,6 +1,8 @@
 // @flow
 import React from 'react';
+import { observer } from 'mobx-react';
 import { omit, filter, escapeRegExp } from 'lodash';
+import { discreetWalletAmount } from '../../../features/discreet-mode/replacers/discreetWalletAmount';
 import WalletsDropdownLabel from './WalletsDropdownLabel';
 import { useDiscreetModeFeature } from '../../../features/discreet-mode';
 import Wallet from '../../../domains/Wallet';
@@ -34,7 +36,7 @@ export const onSearchWalletsDropdown = (
   });
 };
 
-export default function WalletsDropdown({
+function WalletsDropdown({
   className,
   getStakePoolById,
   numberOfStakePools,
@@ -56,7 +58,9 @@ export default function WalletsDropdown({
       restorationProgress: syncingProgress,
     } = wallet;
     const detail = !isRestoring
-      ? discreetModeFeature.hideOrShowWalletAmount({ amount })
+      ? discreetModeFeature.discreetValue({
+          replacer: discreetWalletAmount({ amount }),
+        })
       : null;
     return {
       label: (
@@ -81,3 +85,5 @@ export default function WalletsDropdown({
     />
   );
 }
+
+export default observer(WalletsDropdown);
diff --git a/source/renderer/app/features/discreet-mode/feature.js b/source/renderer/app/features/discreet-mode/feature.js
@@ -1,38 +1,30 @@
 // @flow
-import BigNumber from 'bignumber.js';
 import { observable, action, runInAction } from 'mobx';
 import { Feature } from '../../utils/mobx-features/feature';
 import Request from '../../stores/lib/LocalizedRequest';
-import type { AssetMetadata } from '../../api/assets/types';
-import {
-  formattedWalletAmount,
-  formattedTokenWalletAmount,
-} from '../../utils/formatters';
 import { DiscreetModeApi } from './api';
 import { SENSITIVE_DATA_SYMBOL } from './config';
+import { defaultReplacer } from './replacers/defaultReplacer';
+import type { DiscreetValueReplacer } from './types';
 
 export class DiscreetMode extends Feature {
   api: DiscreetModeApi;
   @observable isDiscreetMode: boolean = false;
   @observable openInDiscreetMode: boolean = false;
 
-  @observable getDiscreetModeSettingsRequest: Request<
-    Promise<boolean>
-  > = new Request(this.api.getDiscreetModeSettings);
+  @observable getDiscreetModeSettingsRequest: Request<Promise<boolean>> =
+    new Request(this.api.getDiscreetModeSettings);
 
-  @observable setDiscreetModeSettingsRequest: Request<
-    Promise<boolean>
-  > = new Request(this.api.setDiscreetModeSettings);
+  @observable setDiscreetModeSettingsRequest: Request<Promise<boolean>> =
+    new Request(this.api.setDiscreetModeSettings);
 
   constructor(api: DiscreetModeApi) {
     super();
-
     this.api = api;
   }
 
   async start() {
     super.start();
-
     await this._setupDiscreetMode();
   }
 
@@ -57,55 +49,13 @@ export class DiscreetMode extends Feature {
     });
   };
 
-  hideOrShowTokenWalletAmount({
-    amount,
-    metadata,
-    decimals,
-    isShort,
-  }: {
-    amount: BigNumber,
-    metadata?: ?AssetMetadata,
-    decimals: ?number,
-    isShort?: boolean,
-  }) {
-    if (!this.isDiscreetMode) {
-      return formattedTokenWalletAmount(amount, metadata, decimals, isShort);
-    }
-
-    const { ticker } = metadata || {};
-
-    if (!ticker) {
-      return SENSITIVE_DATA_SYMBOL;
-    }
-
-    return `${SENSITIVE_DATA_SYMBOL} ${ticker}`;
-  }
-
-  hideOrShowWalletAmount({
-    amount,
-    withCurrency = true,
-    long = true,
+  discreetValue({
+    replacer = defaultReplacer(),
+    value,
   }: {
-    amount: BigNumber,
-    withCurrency?: boolean,
-    long?: boolean,
+    replacer: DiscreetValueReplacer,
+    value?: any,
   }) {
-    if (!this.isDiscreetMode) {
-      return formattedWalletAmount(amount, withCurrency, long);
-    }
-
-    if (!withCurrency) {
-      return SENSITIVE_DATA_SYMBOL;
-    }
-
-    return `${SENSITIVE_DATA_SYMBOL} ADA`;
-  }
-
-  hideOrShowSensitiveData(data: string | number) {
-    if (!this.isDiscreetMode) {
-      return data;
-    }
-
-    return SENSITIVE_DATA_SYMBOL;
+    return replacer(this.isDiscreetMode, SENSITIVE_DATA_SYMBOL, value);
   }
 }
diff --git a/source/renderer/app/features/discreet-mode/replacers/defaultReplacer.js b/source/renderer/app/features/discreet-mode/replacers/defaultReplacer.js
@@ -0,0 +1,6 @@
+// @flow
+export function defaultReplacer() {
+  return (isDiscreetMode, symbol: string, value: any) => {
+    return isDiscreetMode ? symbol : value;
+  };
+}
diff --git a/source/renderer/app/features/discreet-mode/replacers/discreetWalletAmount.js b/source/renderer/app/features/discreet-mode/replacers/discreetWalletAmount.js
@@ -0,0 +1,26 @@
+// @flow
+import BigNumber from 'bignumber.js';
+import { formattedWalletAmount } from '../../../utils/formatters';
+import { DiscreetValueReplacer } from '../types';
+
+export type DiscreetWalletAmountProps = {
+  amount: BigNumber,
+  withCurrency?: boolean,
+  long?: boolean,
+};
+
+export const discreetWalletAmount: DiscreetValueReplacer = ({
+  amount,
+  withCurrency = true,
+  long = true,
+}: DiscreetWalletAmountProps) => {
+  return (isDiscreetMode, replacement) => {
+    if (!isDiscreetMode) {
+      return formattedWalletAmount(amount, withCurrency, long);
+    }
+    if (!withCurrency) {
+      return replacement;
+    }
+    return `${replacement} ADA`;
+  };
+};
diff --git a/source/renderer/app/features/discreet-mode/replacers/discreetWalletTokenAmount.js b/source/renderer/app/features/discreet-mode/replacers/discreetWalletTokenAmount.js
@@ -0,0 +1,30 @@
+// @flow
+import BigNumber from 'bignumber.js';
+import type { AssetMetadata } from '../../../api/assets/types';
+import { formattedTokenWalletAmount } from '../../../utils/formatters';
+import { DiscreetValueReplacer } from '../types';
+
+export type DiscreetWalletTokenAmountProps = {
+  amount: BigNumber,
+  metadata?: ?AssetMetadata,
+  decimals: ?number,
+  isShort?: boolean,
+};
+
+export const discreetWalletTokenAmount: DiscreetValueReplacer = ({
+  amount,
+  metadata,
+  decimals,
+  isShort,
+}: DiscreetWalletTokenAmountProps) => {
+  return (isDiscreetMode, replacement) => {
+    if (!isDiscreetMode) {
+      return formattedTokenWalletAmount(amount, metadata, decimals, isShort);
+    }
+    const { ticker } = metadata || {};
+    if (!ticker) {
+      return replacement;
+    }
+    return `${replacement} ${ticker}`;
+  };
+};
diff --git a/source/renderer/app/features/discreet-mode/types.js b/source/renderer/app/features/discreet-mode/types.js
@@ -0,0 +1,7 @@
+// @flow
+
+export type DiscreetValueReplacer = () => (
+  isDiscreetMode: boolean,
+  symbol: string,
+  value: any
+) => string;
diff --git a/source/renderer/app/features/discreet-mode/ui/DiscreetTokenWalletAmount.js b/source/renderer/app/features/discreet-mode/ui/DiscreetTokenWalletAmount.js
@@ -1,21 +1,14 @@
 // @flow
 import React from 'react';
-import BigNumber from 'bignumber.js';
 import { observer } from 'mobx-react';
-import type { AssetMetadata } from '../../../api/assets/types';
-import { useDiscreetModeFeature } from '../context';
-
-type Props = {
-  amount: BigNumber,
-  metadata?: ?AssetMetadata,
-  decimals: ?number,
-  isShort?: boolean,
-};
-
-function DiscreetTokenWalletAmount(props: Props) {
-  const feature = useDiscreetModeFeature();
-
-  return <>{feature.hideOrShowTokenWalletAmount(props)}</>;
+import {
+  discreetWalletTokenAmount,
+  DiscreetWalletTokenAmountProps,
+} from '../replacers/discreetWalletTokenAmount';
+import DiscreetValue from './DiscreetValue';
+
+function DiscreetTokenWalletAmount(props: DiscreetWalletTokenAmountProps) {
+  return <DiscreetValue replacer={discreetWalletTokenAmount(props)} />;
 }
 
 export default observer(DiscreetTokenWalletAmount);
diff --git a/source/renderer/app/features/discreet-mode/ui/DiscreetValue.js b/source/renderer/app/features/discreet-mode/ui/DiscreetValue.js
@@ -5,15 +5,19 @@ import type { Node } from 'react';
 
 import { useDiscreetModeFeature } from '../context';
 import { SENSITIVE_DATA_SYMBOL } from '../config';
+import { defaultReplacer } from '../replacers/defaultReplacer';
+import { DiscreetValueReplacer } from '../types';
 
 type Props = {
   children: Node,
+  replacer: DiscreetValueReplacer,
 };
 
-function DiscreetValue({ children }: Props) {
+function DiscreetValue({ children, replacer = defaultReplacer() }: Props) {
   const feature = useDiscreetModeFeature();
-
-  return <>{feature.isDiscreetMode ? SENSITIVE_DATA_SYMBOL : children}</>;
+  return (
+    <>{replacer(feature.isDiscreetMode, SENSITIVE_DATA_SYMBOL, children)}</>
+  );
 }
 
 export default observer(DiscreetValue);
diff --git a/source/renderer/app/features/discreet-mode/ui/DiscreetWalletAmount.js b/source/renderer/app/features/discreet-mode/ui/DiscreetWalletAmount.js
@@ -1,19 +1,11 @@
 // @flow
 import React from 'react';
-import BigNumber from 'bignumber.js';
-import { observer } from 'mobx-react';
-import { useDiscreetModeFeature } from '../context';
-
-type Props = {
-  amount: BigNumber,
-  withCurrency?: boolean,
-  long?: boolean,
-};
-
-function DiscreetWalletAmount(props: Props) {
-  const feature = useDiscreetModeFeature();
-
-  return <>{feature.hideOrShowWalletAmount(props)}</>;
+import {
+  discreetWalletAmount,
+  DiscreetWalletAmountProps,
+} from '../replacers/discreetWalletAmount';
+import DiscreetValue from './DiscreetValue';
+
+export default function DiscreetWalletAmount(props: DiscreetWalletAmountProps) {
+  return <DiscreetValue replacer={discreetWalletAmount(props)} />;
 }
-
-export default observer(DiscreetWalletAmount);
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.js b/source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.js
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import { observer } from 'mobx-react';
 import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
 import revealIcon from '../../../../assets/images/reveal-key.inline.svg';
@@ -26,4 +27,4 @@ const DiscreetToggle = ({ className }: Props) => {
   );
 };
 
-export default DiscreetToggle;
+export default injectIntl(observer(DiscreetToggle));