Merge pull request #2905 from input-output-hk/fix/ddw-911-remove-warning-when-recommended-decimal-is-zero

Author: danielmain

CHANGELOG.md

@@ -15,6 +15,7 @@
 
 ### Fixes
 
+- Fix warning sign displayed when recommend decimals is zero ([PR 2905](https://github.com/input-output-hk/daedalus/pull/2905))
 - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902))
 
 ## 4.9.0

jest.config.js

@@ -89,6 +89,7 @@ module.exports = {
     // Jest does not support WASM imports from ESM modules
     // https://github.com/facebook/jest/issues/9430
     '^@iohk-jormungandr/wallet-js$': 'identity-obj-proxy',
+    'tests/(.*)': '<rootDir>/tests/$1',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

source/renderer/app/components/assets/Asset.tsx

@@ -209,7 +209,9 @@ class Asset extends Component<Props, State> {
               })}
               className={styles.warningIconWrapper}
             >
-              <SVGInline className={styles.warningIcon} svg={warningIcon} />
+              <span data-testid="warning-icon">
+                <SVGInline className={styles.warningIcon} svg={warningIcon} />
+              </span>
             </PopOver>
           </div>
         )}

source/renderer/app/components/assets/AssetSettingsDialog.spec.tsx

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom';
+
+import React from 'react';
+import noop from 'lodash/noop';
+import { cleanup, screen, waitFor } from '@testing-library/react';
+
+import createTestBed from 'tests/_utils/TestBed';
+import {
+  withDecimalPlacesToken,
+  zeroDecimalPlacesToken,
+} from 'tests/mocks/asset';
+
+import AssetSettingsDialog from './AssetSettingsDialog';
+
+describe('AssetSettingsDialog', () => {
+  afterEach(() => cleanup());
+
+  it('should not show a warning when an asset is set to zero recommended decimal places', async () => {
+    createTestBed(
+      <AssetSettingsDialog
+        asset={zeroDecimalPlacesToken}
+        onSubmit={noop}
+        onCancel={noop}
+      />
+    );
+    await waitFor(() => screen.getByText('Number of decimal places'));
+    expect(screen.queryByTestId('warning-icon')).not.toBeInTheDocument();
+  });
+
+  it('should show a warning when an asset is not set to the recommended decimal places', async () => {
+    createTestBed(
+      <AssetSettingsDialog
+        asset={withDecimalPlacesToken}
+        onSubmit={noop}
+        onCancel={noop}
+      />
+    );
+    await waitFor(() => screen.getByText('Number of decimal places'));
+    expect(screen.queryByTestId('warning-icon')).toBeInTheDocument();
+  });
+});

source/renderer/app/components/assets/AssetSettingsDialog.tsx

@@ -17,6 +17,7 @@ import {
   MAX_DECIMAL_PRECISION,
 } from '../../config/assetsConfig';
 import { DiscreetTokenWalletAmount } from '../../features/discreet-mode';
+import { isRecommendedDecimal } from '../wallet/tokens/wallet-token/helpers';
 
 const messages = defineMessages({
   title: {
@@ -135,7 +136,6 @@ class AssetSettingsDialog extends Component<Props, State> {
     const { decimals: savedDecimals, recommendedDecimals } = asset;
     const { decimals } = this.state;
     const hasSavedDecimals = typeof savedDecimals === 'number';
-    const hasRecommendedDecimals = typeof recommendedDecimals === 'number';
     const options = range(MAX_DECIMAL_PRECISION + 1).map((value) => ({
       value,
     }));
@@ -153,8 +153,12 @@ class AssetSettingsDialog extends Component<Props, State> {
         onClick: () => onSubmit(asset, decimals),
       },
     ];
-    const hasWarning =
-      hasRecommendedDecimals && savedDecimals !== recommendedDecimals;
+
+    const hasWarning = isRecommendedDecimal({
+      recommendedDecimals,
+      decimals: savedDecimals,
+    });
+
     let warningPopOverMessage;
 
     if (hasWarning) {
@@ -209,10 +213,12 @@ class AssetSettingsDialog extends Component<Props, State> {
                       recommendedDecimals,
                     })}
                   >
-                    <SVGInline
-                      className={styles.warningIcon}
-                      svg={warningIcon}
-                    />
+                    <span data-testid="warning-icon">
+                      <SVGInline
+                        className={styles.warningIcon}
+                        svg={warningIcon}
+                      />
+                    </span>
                   </PopOver>
                 )}
               </span>

source/renderer/app/components/wallet/tokens/wallet-token/WalletToken.spec.tsx

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+
+import React from 'react';
+import noop from 'lodash/noop';
+import { cleanup, screen, waitFor } from '@testing-library/react';
+
+import createTestBed from 'tests/_utils/TestBed';
+import {
+  withDecimalPlacesToken,
+  zeroDecimalPlacesToken,
+} from 'tests/mocks/asset';
+
+import WalletToken from './WalletToken';
+
+const defaultWalletProps = {
+  isFavorite: false,
+  isInsertingAsset: false,
+  isLoading: false,
+  isRemovingAsset: false,
+  anyAssetWasHovered: false,
+  assetSettingsDialogWasOpened: false,
+  onAssetSettings: noop,
+  onCopyAssetParam: noop,
+  onOpenAssetSend: noop,
+  onToggleFavorite: noop,
+};
+
+describe('WalletToken', () => {
+  afterEach(() => cleanup());
+
+  it('should not show a warning when an asset is set to zero recommended decimal places', async () => {
+    createTestBed(
+      <WalletToken asset={zeroDecimalPlacesToken} {...defaultWalletProps} />
+    );
+    await waitFor(() => screen.getByText(zeroDecimalPlacesToken.policyId));
+    expect(screen.queryByTestId('warning-icon')).not.toBeInTheDocument();
+  });
+
+  it('should show a warning when an asset is not set to the recommended decimal places', async () => {
+    createTestBed(
+      <WalletToken asset={withDecimalPlacesToken} {...defaultWalletProps} />
+    );
+    await waitFor(() => screen.getByText(withDecimalPlacesToken.policyId));
+    expect(screen.queryAllByTestId('warning-icon').length).toEqual(2);
+  });
+});

source/renderer/app/components/wallet/tokens/wallet-token/WalletToken.tsx

@@ -6,6 +6,7 @@ import AssetContent from '../../../assets/AssetContent';
 import type { AssetToken } from '../../../../api/assets/types';
 import WalletTokenFooter from './WalletTokenFooter';
 import WalletTokenHeader from './WalletTokenHeader';
+import { isRecommendedDecimal } from './helpers';
 
 type Props = {
   anyAssetWasHovered: boolean;
@@ -43,9 +44,16 @@ const WalletToken = observer((props: Props) => {
     isRemovingAsset,
   } = props;
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
   const toggleIsExpanded = useCallback(() => {
     setIsExpanded(!isExpanded);
   }, [setIsExpanded, isExpanded]);
+
+  const hasWarning = isRecommendedDecimal({
+    decimals: asset.decimals,
+    recommendedDecimals: asset.recommendedDecimals,
+  });
+
   const componentStyles = useMemo(
     () =>
       classNames(
@@ -71,6 +79,7 @@ const WalletToken = observer((props: Props) => {
         onCopyAssetParam={onCopyAssetParam}
         onToggleFavorite={onToggleFavorite}
         assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
+        hasWarning={hasWarning}
       />
       <div className={styles.content}>
         <AssetContent
@@ -84,6 +93,7 @@ const WalletToken = observer((props: Props) => {
           isLoading={isLoading}
           onAssetSettings={onAssetSettings}
           onOpenAssetSend={onOpenAssetSend}
+          hasWarning={hasWarning}
         />
       </div>
     </div>

source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenFooter.tsx

@@ -11,13 +11,13 @@ import type { AssetToken } from '../../../../api/assets/types';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../../assets/images/asse... Remove this comment to see the full error message
 import warningIcon from '../../../../assets/images/asset-token-warning-ic.inline.svg';
 import { messages } from './WalletToken.messages';
-import { isRecommendedDecimal } from './helpers';
 
 type Props = {
   asset: AssetToken;
   className?: string;
   intl: intlShape.isRequired;
   isLoading: boolean;
+  hasWarning: boolean;
   onAssetSettings?: (...args: Array<any>) => any;
   onOpenAssetSend?: (...args: Array<any>) => any;
 };
@@ -28,14 +28,12 @@ const WalletTokenFooter = (props: Props) => {
     className,
     intl,
     isLoading,
+    hasWarning,
     onAssetSettings,
     onOpenAssetSend,
   } = props;
   const { recommendedDecimals, decimals } = asset;
-  const hasWarning = isRecommendedDecimal({
-    decimals,
-    recommendedDecimals,
-  });
+
   const warningPopOverMessage =
     typeof decimals === 'number'
       ? messages.settingsWarningPopOverNotUsing
@@ -74,7 +72,11 @@ const WalletTokenFooter = (props: Props) => {
               label={
                 <>
                   {intl.formatMessage(messages.settingsButtonLabel)}
-                  {hasWarning && <SVGInline svg={warningIcon} />}
+                  {hasWarning && (
+                    <span data-testid="warning-icon">
+                      <SVGInline svg={warningIcon} />
+                    </span>
+                  )}
                 </>
               }
               onClick={() =>

source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenHeader.tsx

@@ -13,7 +13,6 @@ import arrow from '../../../../assets/images/collapse-arrow-small.inline.svg';
 import starNotFilledIcon from '../../../../assets/images/star-not-filled.inline.svg';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../../assets/images/star... Remove this comment to see the full error message
 import starFilledIcon from '../../../../assets/images/star-filled.inline.svg';
-import { isRecommendedDecimal } from './helpers';
 
 type Props = {
   anyAssetWasHovered: boolean;
@@ -24,6 +23,7 @@ type Props = {
   isExpanded: boolean;
   isFavorite: boolean;
   isLoading: boolean;
+  hasWarning: boolean;
   onClick: (...args: Array<any>) => any;
   onCopyAssetParam: (...args: Array<any>) => any;
   onToggleFavorite?: (...args: Array<any>) => any;
@@ -39,16 +39,14 @@ const WalletTokenHeader = (props: Props) => {
     isExpanded,
     isFavorite,
     isLoading,
+    hasWarning,
     onClick,
     onCopyAssetParam,
     onToggleFavorite,
   } = props;
-  const { decimals, uniqueId, recommendedDecimals } = asset;
+  const { uniqueId } = asset;
   const starIcon = isFavorite ? starFilledIcon : starNotFilledIcon;
-  const hasWarning = isRecommendedDecimal({
-    decimals,
-    recommendedDecimals,
-  });
+
   const rootStyles = classNames(
     styles.root,
     isExpanded && styles.isExpanded,
@@ -58,6 +56,7 @@ const WalletTokenHeader = (props: Props) => {
     styles.favoriteIcon,
     isFavorite && styles.isFavorite
   );
+
   return (
     <div className={rootStyles} onClick={onClick}>
       {onToggleFavorite && (

source/renderer/app/components/wallet/tokens/wallet-token/helpers.ts

@@ -2,8 +2,14 @@ type IsRecommendedDecimal = {
   decimals: number | null | undefined;
   recommendedDecimals: number | null | undefined;
 };
+
 export const isRecommendedDecimal = ({
   recommendedDecimals,
   decimals,
-}: IsRecommendedDecimal) =>
-  typeof recommendedDecimals === 'number' && decimals !== recommendedDecimals;
+}: IsRecommendedDecimal) => {
+  return (
+    typeof recommendedDecimals === 'number' &&
+    typeof decimals === 'number' &&
+    decimals !== recommendedDecimals
+  );
+};