Merge pull request #2907 from input-output-hk/fix/ddw-931-add-disabled-state-to-selects

Author: danielmain

CHANGELOG.md

@@ -7,6 +7,10 @@
 - 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 styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907))
+
 ### Chores
 
 - Fixed spelling issues and typos ([PR 2915](https://github.com/input-output-hk/daedalus/pull/2915))

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/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/widgets/DialogFullSizeOverride.scss

@@ -19,9 +19,9 @@
     .AutocompleteOverrides_autocompleteContent,
     .SimpleInput_customValueBlock,
     .SimpleInput_customValueWrapper,
-    .SimpleInput_input,
-    .SimpleInput_input:focus,
-    .SimpleInput_input:hover,
+    .SimpleInput_input:not(.SimpleInput_disabled),
+    .SimpleInput_input:focus:not(.SimpleInput_disabled),
+    .SimpleInput_input:hover:not(.SimpleInput_disabled),
     .SimpleLink_root {
       background-color: transparent !important;
     }
@@ -106,9 +106,10 @@
 
     // Border Color
     .AutocompleteOverrides_autocompleteContent:not(.SimpleAutocomplete_errored),
-    .SelectOverrides_selectInput input,
+    .SelectOverrides_selectInput input:not(.SimpleInput_disabled),
     .SimpleInput_customValueBlock,
-    .SimpleInput_customValueWrapper .SimpleInput_input,
+    .SimpleInput_customValueWrapper
+      .SimpleInput_input:not(.SimpleInput_disabled),
     .SimpleInput_input:focus:not(.SimpleInput_errored),
     .SimpleInput_input:hover:not(.SimpleInput_errored),
     .SimpleOptions_option:after {

source/renderer/app/components/widgets/forms/ItemsDropdown.tsx

@@ -30,6 +30,7 @@ import globalMessages from '../../../i18n/global-messages';
 export type ItemDropdownProps = {
   options: Array<ItemDropdown>;
   className?: string;
+  disabled?: boolean;
 };
 export const onSearchItemsDropdown = (
   searchValue: string,

source/renderer/app/themes/daedalus/cardano.ts

@@ -640,7 +640,7 @@ export const CARDANO_THEME_OUTPUT = {
     '--rp-input-bg-color': '#ffffff',
     '--rp-input-bg-color-disabled': 'rgba(94, 96, 102, 0.05)',
     '--rp-input-border-color': 'rgba(94, 96, 102, 0.3)',
-    '--rp-input-border-color-disabled': 'rgba(94, 96, 102, 0.05)',
+    '--rp-input-border-color-disabled': 'transparent',
     '--rp-input-border-color-errored': '#ea4c5b',
     '--rp-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
     '--rp-input-line-height': '22px',
@@ -700,8 +700,10 @@ export const CARDANO_THEME_OUTPUT = {
     '--rp-select-arrow-bg-color': 'rgba(94, 96, 102, 0.3)',
     '--rp-select-arrow-bg-color-open': 'rgba(94, 96, 102, 0.7)',
     '--rp-select-input-bg-color': 'transparent',
+    '--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
     '--rp-select-input-border-color': 'rgba(94, 96, 102, 0.3)',
     '--rp-select-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
+    '--rp-select-input-border-color-disabled': 'transparent',
     '--rp-select-input-text-color': '#5e6066',
     '--rp-select-input-placeholder-color': 'rgba(94, 96, 102, 0.5)',
   },

source/renderer/app/themes/daedalus/dark-blue.ts

@@ -702,8 +702,10 @@ export const DARK_BLUE_THEME_OUTPUT = {
     '--rp-select-arrow-bg-color': 'rgba(233, 244, 254, 0.3)',
     '--rp-select-arrow-bg-color-open': 'rgba(233, 244, 254, 1)',
     '--rp-select-input-bg-color': 'transparent',
+    '--rp-select-input-bg-color-disabled': 'rgba(233, 244, 254, 0.05)',
     '--rp-select-input-border-color': 'rgba(233, 244, 254, 0.3)',
     '--rp-select-input-border-color-focus': 'rgba(233, 244, 254, 0.7)',
+    '--rp-select-input-border-color-disabled': 'transparent',
     '--rp-select-input-text-color': 'rgba(233, 244, 254, 1)',
     '--rp-select-input-placeholder-color': 'rgba(233, 244, 254, 0.5)',
   },

source/renderer/app/themes/daedalus/dark-cardano.ts

@@ -686,8 +686,10 @@ export const DARK_CARDANO_THEME_OUTPUT = {
     '--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
     '--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
     '--rp-select-input-bg-color': 'transparent',
+    '--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
     '--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
     '--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
+    '--rp-select-input-border-color-disabled': 'transparent',
     '--rp-select-input-text-color': '#ffffff',
     '--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
   },