fix: custom hd path dropdown self closing

near · May 9, 2022 · 90639d5 · 90639d5
1 parent 1745f75
commit 90639d5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/packages/frontend/src/components/accounts/ledger/SignInLedgerViews/Authorize.js b/packages/frontend/src/components/accounts/ledger/SignInLedgerViews/Authorize.js
@@ -2,12 +2,10 @@ import React from 'react';
 import { Translate } from 'react-localize-redux';
 
 import FormButton from '../../../common/FormButton';
-import LocalAlertBox from '../../../common/LocalAlertBox';
 import LedgerImageCircle from '../../../svg/LedgerImageCircle';
 import LedgerHdPaths from '../LedgerHdPaths';
 
 const Authorize = ({
-    status,
     confirmedPath,
     setConfirmedPath,
     handleSignIn,
@@ -20,7 +18,6 @@ const Authorize = ({
             <h1><Translate id='signInLedger.header' /></h1>
             <Translate id='signInLedger.one' />
             <br /><br />
-            <LocalAlertBox localAlert={status.localAlert} />
             <LedgerHdPaths
                 confirmedPath={confirmedPath}
                 setConfirmedPath={setConfirmedPath}

diff --git a/packages/frontend/src/components/accounts/ledger/SignInLedgerViews/EnterAccountId.js b/packages/frontend/src/components/accounts/ledger/SignInLedgerViews/EnterAccountId.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Translate } from 'react-localize-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { clearLocalAlert } from '../../../../redux/actions/status';
+import { selectStatusSlice } from '../../../../redux/slices/status';
 import AccountFormAccountId from '../../../accounts/AccountFormAccountId';
 import FormButton from '../../../common/FormButton';
 import LedgerImageCircle from '../../../svg/LedgerImageCircle';
@@ -9,13 +12,15 @@ const EnterAccountId = ({
     handleAdditionalAccountId, 
     handleChange, 
     checkAccountAvailable, 
-    localAlert, 
     mainLoader, 
-    clearLocalAlert, 
     stateAccountId, 
     loader,
     clearSignInWithLedgerModalState
 }) => {
+    const dispatch = useDispatch();
+
+    const status = useSelector(selectStatusSlice);
+
     return (
         <>
             <LedgerImageCircle />
@@ -26,15 +31,15 @@ const EnterAccountId = ({
                 mainLoader={mainLoader}
                 handleChange={handleChange}
                 checkAvailability={checkAccountAvailable}
-                localAlert={localAlert}
+                localAlert={status.localAlert}
                 autoFocus={true}
-                clearLocalAlert={clearLocalAlert}
+                clearLocalAlert={() => dispatch(clearLocalAlert())}
                 stateAccountId={stateAccountId}
             />
             <div className='buttons-bottom-buttons'>
                 <FormButton
                     onClick={handleAdditionalAccountId}
-                    disabled={mainLoader || !localAlert?.success}
+                    disabled={mainLoader || !status?.localAlert?.success}
                     sending={loader}
                 >
                     <Translate id='button.confirm'/>

diff --git a/packages/frontend/src/components/accounts/ledger/SignInLedgerWrapper.js b/packages/frontend/src/components/accounts/ledger/SignInLedgerWrapper.js
@@ -10,10 +10,9 @@ import {
     checkAccountAvailable,
     clearAccountState
 } from '../../../redux/actions/account';
-import { clearLocalAlert } from '../../../redux/actions/status';
 import { selectAccountSlice } from '../../../redux/slices/account';
 import { actions as ledgerActions, LEDGER_MODAL_STATUS, selectLedgerSignInWithLedger, selectLedgerSignInWithLedgerStatus, selectLedgerTxSigned } from '../../../redux/slices/ledger';
-import { selectStatusMainLoader, selectStatusSlice } from '../../../redux/slices/status';
+import { selectStatusMainLoader } from '../../../redux/slices/status';
 import parseFundingOptions from '../../../utils/parseFundingOptions';
 import Container from '../../common/styled/Container.css';
 import Authorize from './SignInLedgerViews/Authorize';
@@ -44,7 +43,6 @@ export function SignInLedgerWrapper(props) {
     const ledgerHdPath = `44'/397'/0'/0'/${confirmedPath}'`;
 
     const account = useSelector(selectAccountSlice);
-    const status = useSelector(selectStatusSlice);
     const signInWithLedgerState = useSelector(selectLedgerSignInWithLedger);
     const txSigned = useSelector(selectLedgerTxSigned);
     const signInWithLedgerStatus = useSelector(selectLedgerSignInWithLedgerStatus);
@@ -125,7 +123,6 @@ export function SignInLedgerWrapper(props) {
     const LedgerView = () => {
         if (!signInWithLedgerStatus) {
             return <Authorize
-                status={status}
                 confirmedPath={confirmedPath}
                 setConfirmedPath={setConfirmedPath}
                 handleSignIn={handleSignIn}
@@ -144,10 +141,8 @@ export function SignInLedgerWrapper(props) {
                 handleAdditionalAccountId={handleAdditionalAccountId}
                 accountId={accountId}
                 handleChange={handleChange}
-                localAlert={status.localAlert}
                 checkAccountAvailable={(accountId) => dispatch(checkAccountAvailable(accountId))}
                 mainLoader={mainLoader}
-                clearLocalAlert={() => dispatch(clearLocalAlert())}
                 stateAccountId={account.accountId}
                 loader={loader}
                 clearSignInWithLedgerModalState={() => dispatch(clearSignInWithLedgerModalState())}