Merge branch 'develop' into fix/ddw-1011-fix-stake-pool-list-view-overlap

Author: shawnbusuttil

CHANGELOG.md

@@ -7,17 +7,20 @@
 - Improved RTS flags splash screen message ([PR 2901](https://github.com/input-output-hk/daedalus/pull/2901))
 - Implemented error message when trying to leave wallet without enough ada to support tokens ([PR 2783](https://github.com/input-output-hk/daedalus/pull/2783))
 
+### Fixes
+
+- Fixed stake pool list view overlapping news feed ([PR 2917](https://github.com/input-output-hk/daedalus/pull/2917))
+- Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907))
+- 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))
+- Sets minimum transaction fee to ada input field when tokens are removed ([PR 2918](https://github.com/input-output-hk/daedalus/pull/2918))
+
 ### Chores
 
 - Fixed spelling issues and typos ([PR 2915](https://github.com/input-output-hk/daedalus/pull/2915))
 - Removed SASS ts-lint ignore comments ([PR 2870](https://github.com/input-output-hk/daedalus/pull/2870))
 - Enabled debugging of the main process ([PR 2893](https://github.com/input-output-hk/daedalus/pull/2893))
 
-### Fixes
-
-- Fixed stake pool list view overlapping news feed ([PR 2917](https://github.com/input-output-hk/daedalus/pull/2917))
-- 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
 
 ### Features

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

package.json

@@ -255,7 +255,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "1.0.2",
+    "react-polymorph": "1.0.3",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

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/staking/redeem-itn-rewards/Step1ConfigurationDialog.scss

@@ -38,20 +38,6 @@
     margin-bottom: 17px;
   }
 
-  .walletsDropdown {
-    &.disabled {
-      pointer-events: none;
-      :global {
-        .SelectOverrides_selectInput:after {
-          opacity: 0.5;
-        }
-        .SimpleFormField_inputWrapper {
-          opacity: 0.5;
-        }
-      }
-    }
-  }
-
   .checkbox {
     margin-bottom: 20px;
 

source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.tsx

@@ -142,6 +142,10 @@ type Props = {
   wallets: Array<Wallet>;
 };
 
+type State = {
+  wasRecoveryPhraseValidAtLeastOnce: boolean;
+};
+
 interface FormFields {
   checkboxAcceptance1: string;
   checkboxAcceptance2: string;
@@ -150,14 +154,19 @@ interface FormFields {
 }
 
 @observer
-class Step1ConfigurationDialog extends Component<Props> {
+class Step1ConfigurationDialog extends Component<Props, State> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
   static defaultProps = {
     error: null,
     recoveryPhrase: [],
   };
+
+  state = {
+    wasRecoveryPhraseValidAtLeastOnce: false,
+  };
+
   recoveryPhraseAutocomplete: Autocomplete;
   form = new ReactToolboxMobxForm<FormFields>(
     {
@@ -177,6 +186,16 @@ class Step1ConfigurationDialog extends Component<Props> {
                 this.context.intl.formatMessage(messages.invalidRecoveryPhrase),
               ],
             }),
+          hooks: {
+            onChange: (field) => {
+              if (
+                this.state.wasRecoveryPhraseValidAtLeastOnce === false &&
+                field.isValid
+              ) {
+                this.setState({ wasRecoveryPhraseValidAtLeastOnce: true });
+              }
+            },
+          },
         },
         walletsDropdown: {
           type: 'select',
@@ -276,11 +295,11 @@ class Step1ConfigurationDialog extends Component<Props> {
     const checkboxAcceptance1Field = form.$('checkboxAcceptance1');
     const checkboxAcceptance2Field = form.$('checkboxAcceptance2');
     const walletId = get(wallet, 'id', null);
-    const validRecoveryPhase = recoveryPhraseField.isValid;
-    const walletsDropdownClasses = classnames([
-      styles.walletsDropdown,
-      !validRecoveryPhase ? styles.disabled : null,
-    ]);
+    const walletsDropdownDisabled = !(
+      recoveryPhraseField.isValid ||
+      this.state.wasRecoveryPhraseValidAtLeastOnce
+    );
+
     const actions = {
       direction: 'column',
       items: [
@@ -365,7 +384,6 @@ class Step1ConfigurationDialog extends Component<Props> {
           />
           <div className={styles.walletsDropdownWrapper}>
             <WalletsDropdown
-              className={walletsDropdownClasses}
               {...walletsDropdownField.bind()}
               numberOfStakePools={4}
               wallets={wallets}
@@ -376,6 +394,7 @@ class Step1ConfigurationDialog extends Component<Props> {
               value={walletId}
               getStakePoolById={() => {}}
               errorPosition="bottom"
+              disabled={walletsDropdownDisabled}
             />
           </div>
           <Checkbox

source/renderer/app/components/wallet/WalletSendForm.scss

@@ -56,7 +56,7 @@
 
   input {
     background-color: var(--rp-input-bg-color-disabled) !important;
-    border-color: var(--rp-input-bg-color-disabled) !important;
+    border-color: var(--rp-input-border-color-disabled) !important;
     font-family: var(--font-regular);
     pointer-events: none;
 

source/renderer/app/components/wallet/WalletSendForm.spec.tsx

@@ -174,32 +174,50 @@ describe('wallet/Wallet Send Form', () => {
     return mock;
   }
 
+  const MINIMUM_AMOUNT_UPDATED_MESSAGE_TEST_ID =
+    'WalletSendForm::minimumAmountNotice::updated';
+
+  function assertMinimumAmountNoticeMessage(minimumAda: number) {
+    expect(
+      screen.getByTestId(MINIMUM_AMOUNT_UPDATED_MESSAGE_TEST_ID)
+    ).toHaveTextContent(
+      `Note: the ada field was automatically updated because this transaction requires a minimum of ${minimumAda} ADA.`
+    );
+  }
+
   test('should update Ada input field to minimum required and restore to original value when tokens are removed', async () => {
     expect.assertions(4);
+
     const minimumAda = 2;
-    const calculateTransactionFeeMock = createTransactionFeeMock(2, minimumAda);
+    const calculateTransactionFeeMock = createTransactionFeeMock(1, minimumAda);
+
     render(
       <SetupWallet calculateTransactionFee={calculateTransactionFeeMock} />
     );
+
     enterReceiverAddress();
+
     const removeToken1 = await addToken();
+
     await waitForMinimumAdaRequiredMsg();
     assertAdaInput(minimumAda);
+
     const minimumAmountNoticeTestId =
       'WalletSendForm::minimumAmountNotice::updated';
+
     expect(screen.getByTestId(minimumAmountNoticeTestId)).toHaveTextContent(
       `Note: the ada field was automatically updated because this transaction requires a minimum of ${minimumAda} ADA.`
     );
+
     await removeToken1();
-    const minimumAdaRequiredMsg = screen.getByTestId('minimumAdaRequiredMsg');
-    await within(minimumAdaRequiredMsg).findByText(
-      `to the minimum of 1 ADA required`
-    );
-    assertAdaInput(0);
-    expect(
-      screen.queryByTestId(minimumAmountNoticeTestId)
-    ).not.toBeInTheDocument();
+
+    await waitForMinimumAdaRequiredMsg(1);
+
+    assertAdaInput(1);
+
+    expect(screen.queryByTestId(minimumAmountNoticeTestId)).toBeInTheDocument();
   });
+
   test('should display an update button when Ada input field is less than minimum required', async () => {
     expect.assertions(3);
     const minimumAda = 2;
@@ -227,6 +245,7 @@ describe('wallet/Wallet Send Form', () => {
     await waitForElementToBeRemoved(updateButton);
     assertAdaInput(minimumAda);
   });
+
   test('should favour user Ada input instead of minimum required when the value is greater than the minimum one', async () => {
     expect.assertions(2);
     const minimumAda = 2.5;
@@ -253,6 +272,7 @@ describe('wallet/Wallet Send Form', () => {
       `Note: the ada field was automatically updated to ${userAdaAmount} ADA because now it fulfills the minimum amount of 1 ADA for the transaction.`
     );
   });
+
   test('should remove message when user entry is higher than minimum amount', async () => {
     expect.assertions(3);
     const minimumAda = 2.5;
@@ -287,6 +307,7 @@ describe('wallet/Wallet Send Form', () => {
       screen.queryByTestId(minimumAmountNoticeTestId)
     ).not.toBeInTheDocument();
   });
+
   test('should not display any minimum amount notice message when ada input is greater than minimum amount', async () => {
     expect.assertions(2);
     const calculateTransactionFeeMock = jest.fn().mockResolvedValue({
@@ -311,6 +332,7 @@ describe('wallet/Wallet Send Form', () => {
       screen.findByTestId('WalletSendForm::minimumAmountNotice::restored')
     ).rejects.toBeTruthy();
   });
+
   test('should apply minimum fee to ada field when user has removed the previous update', async () => {
     expect.assertions(3);
     const minimumAda = 2;
@@ -334,6 +356,7 @@ describe('wallet/Wallet Send Form', () => {
     await waitForMinimumAdaRequiredMsg();
     assertAdaInput(minimumAda);
   });
+
   test('should format ada input field using numeric format profile', async () => {
     expect.assertions(1);
     const minimumAda = 2;
@@ -350,6 +373,7 @@ describe('wallet/Wallet Send Form', () => {
     const adaInput = getInput('Ada');
     expect(adaInput).toHaveValue(`${minimumAda},000000`);
   });
+
   test('should calculate transaction fee even when one of the assets are empty', async () => {
     expect.assertions(2);
     const minimumAda = 2;
@@ -365,4 +389,30 @@ describe('wallet/Wallet Send Form', () => {
     await waitForMinimumAdaRequiredMsg();
     assertAdaInput(minimumAda);
   });
+
+  test('should keep transaction fee when assets are removed and ada field is untouched', async () => {
+    expect.assertions(3);
+
+    const fee = 2;
+    const minimumAda = 1;
+    const calculateTransactionFeeMock = createTransactionFeeMock(1, fee);
+
+    render(
+      <SetupWallet calculateTransactionFee={calculateTransactionFeeMock} />
+    );
+
+    enterReceiverAddress();
+
+    const removeToken = await addToken();
+    await waitForMinimumAdaRequiredMsg();
+
+    assertAdaInput(fee);
+
+    await removeToken();
+
+    await waitForMinimumAdaRequiredMsg(minimumAda);
+
+    assertAdaInput(minimumAda);
+    assertMinimumAmountNoticeMessage(minimumAda);
+  });
 });