Wire up actual calls to the controller to poll for ledger connectivity

Author: darkwing

app/scripts/metamask-controller.js

@@ -1158,6 +1158,7 @@ export default class MetamaskController extends EventEmitter {
       establishLedgerTransportPreference: this.establishLedgerTransportPreference.bind(
         this,
       ),
+      checkLedgerReady: this.checkLedgerReady.bind(this),
 
       // qr hardware devices
       submitQRHardwareCryptoHDKey: qrHardwareKeyring.submitCryptoHDKey.bind(
@@ -1991,6 +1992,28 @@ export default class MetamaskController extends EventEmitter {
     return { ...keyState, identities };
   }
 
+  async checkLedgerReady(address) {
+    console.log('checkLedgerReady; called for address: ', address);
+
+    const keyring = await this.keyringController.getKeyringForAccount(address);
+
+    console.log('checkLedgerReady; keyring is: ', keyring);
+    if (!keyring) {
+      throw new Error('No keyring could be found for this address');
+    }
+
+    const isReady = Boolean(keyring?.isConnected?.());
+
+    console.log(
+      '[checkLedgerReady] keyring is: ',
+      keyring,
+      '; isReady: ',
+      isReady,
+    );
+
+    return isReady;
+  }
+
   //
   // Account Management
   //

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -143,22 +143,24 @@ export default class ConfirmPageContainerContent extends Component {
             />
           </div>
         )}
-        {showingHardwareConnectionContents ? null : (<ConfirmPageContainerSummary
-          className={classnames({
-            'confirm-page-container-summary--border':
-              !detailsComponent || !dataComponent,
-          })}
-          action={action}
-          title={title}
-          image={image}
-          titleComponent={titleComponent}
-          subtitleComponent={subtitleComponent}
-          hideSubtitle={hideSubtitle}
-          identiconAddress={identiconAddress}
-          nonce={nonce}
-          origin={origin}
-          hideTitle={hideTitle}
-        />)}
+        {showingHardwareConnectionContents ? null : (
+          <ConfirmPageContainerSummary
+            className={classnames({
+              'confirm-page-container-summary--border':
+                !detailsComponent || !dataComponent,
+            })}
+            action={action}
+            title={title}
+            image={image}
+            titleComponent={titleComponent}
+            subtitleComponent={subtitleComponent}
+            hideSubtitle={hideSubtitle}
+            identiconAddress={identiconAddress}
+            nonce={nonce}
+            origin={origin}
+            hideTitle={hideTitle}
+          />
+        )}
         {this.renderContent()}
         {!supportsEIP1559V2 &&
           !hasSimulationError &&

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -16,8 +16,8 @@ import AdvancedGasFeePopover from '../advanced-gas-fee-popover';
 import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover';
 import EditGasPopover from '../edit-gas-popover';
 
-import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
 import HardwareConnectivityPopover from '../../../pages/confirm-transaction-base/hardware-connectivity/hardware-connectivity-popover';
+import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
 import {
   ConfirmPageContainerHeader,
   ConfirmPageContainerContent,

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -56,6 +56,7 @@ import {
   getGasFeeEstimatesAndStartPolling,
   addPollingTokenToAppState,
   removePollingTokenFromAppState,
+  checkLedgerReady,
 } from '../../store/actions';
 
 import Typography from '../../components/ui/typography/typography';
@@ -144,6 +145,7 @@ export default class ConfirmTransactionBase extends Component {
     nativeCurrency: PropTypes.string,
     supportsEIP1559: PropTypes.bool,
     hardwareWalletRequiresConnection: PropTypes.bool,
+    connectHardwareWallet: PropTypes.func,
     isMultiLayerFeeNetwork: PropTypes.bool,
     eip1559V2Enabled: PropTypes.bool,
   };
@@ -155,10 +157,64 @@ export default class ConfirmTransactionBase extends Component {
     ethGasPriceWarning: '',
     editingGas: false,
     userAcknowledgedGasMissing: false,
-    showingHardwareConnectionContents: /* false */ true,
-    showingHardwareConnectionAdvancedPopover: /* false */ true,
+    showingHardwareConnectionContents: false,
+    showingHardwareConnectionAdvancedPopover: false,
+    pollingIntervalId: null,
+    hardwareIsReady: true, // Optimistic
   };
 
+  async pollLedgerReady() {
+    const { fromAddress } = this.props;
+    const { pollingIntervalId } = this.state;
+
+    console.log(
+      '[confirm-transaction-base] pollLedgerReadycalled; id: ',
+      pollingIntervalId,
+    );
+
+    // Don't set off multiple calls to checkLedgerReady
+    if (pollingIntervalId !== null) {
+      console.log(
+        '[confirm-transaction-base] avoiding multiple calls for ; id: ',
+        pollingIntervalId,
+      );
+      return undefined;
+    }
+
+    let hardwareIsReady = true;
+    try {
+      console.log(
+        `[confirm-transaction-base] about to call checkLedgerReady for ${fromAddress}`,
+      );
+      hardwareIsReady = await checkLedgerReady(fromAddress);
+      console.log(`[confirm-transaction-base] RETURNED! ${hardwareIsReady}`);
+    } catch (e) {
+      console.error(
+        '[confirm-transaction-base] ERROR checking ledger ready!',
+        e,
+      );
+    }
+
+    this.setState({ hardwareIsReady, pollingIntervalId: null });
+    return undefined;
+  }
+
+  UNSAFE_componentWillMount() {
+    console.log('UNSAFE_componentWillMount!');
+
+    const { showLedgerSteps } = this.props;
+
+    if (!showLedgerSteps) {
+      return;
+    }
+
+    this.pollLedgerReady();
+    const intervalId = setInterval(() => {
+      this.pollLedgerReady();
+    }, 2000);
+    this.setState({ pollingIntervalId: intervalId });
+  }
+
   componentDidUpdate(prevProps) {
     const {
       transactionStatus,
@@ -329,7 +385,7 @@ export default class ConfirmTransactionBase extends Component {
       nativeCurrency,
       connectHardwareWallet,
     } = this.props;
-    const { showingHardwareConnectionContents } = this.state;
+    const { showingHardwareConnectionContents, hardwareIsReady } = this.state;
     const { t } = this.context;
     const { userAcknowledgedGasMissing } = this.state;
 
@@ -652,16 +708,15 @@ export default class ConfirmTransactionBase extends Component {
             showDataInstruction={Boolean(txData.txParams?.data)}
           />
         ) : null}
-        {
-          /* showLedgerSteps */ true ? (
-            <HardwareConnectivityMessage
-              onClick={() => {
-                console.log('Opening the modal!');
-                this.setState({ showingHardwareConnectionContents: true });
-              }}
-            />
-          ) : null
-        }
+        {showLedgerSteps ? (
+          <HardwareConnectivityMessage
+            connected={hardwareIsReady}
+            onClick={() => {
+              console.log('Opening the modal!');
+              this.setState({ showingHardwareConnectionContents: true });
+            }}
+          />
+        ) : null}
       </div>
     );
   }
@@ -1011,6 +1066,11 @@ export default class ConfirmTransactionBase extends Component {
   componentWillUnmount() {
     this._beforeUnloadForGasPolling();
     this._removeBeforeUnload();
+
+    const { pollingIntervalId } = this.state;
+    if (pollingIntervalId) {
+      clearInterval(pollingIntervalId);
+    }
   }
 
   supportsEIP1559V2 =

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -246,7 +246,7 @@ const mapStateToProps = (state, ownProps) => {
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
     gasFeeIsCustom,
-    showLedgerSteps: true /* fromAddressIsLedger */,
+    showLedgerSteps: fromAddressIsLedger,
     nativeCurrency,
     hardwareWalletRequiresConnection,
     isMultiLayerFeeNetwork,

ui/pages/confirm-transaction-base/hardware-connectivity/index.scss

@@ -1,5 +1,4 @@
 .hardware-connectivity-content {
-
   &-list-container {
     display: flex;
     justify-content: center;
@@ -8,7 +7,7 @@
   ol {
     list-style-type: decimal;
     padding-inline-start: 20px;
-    
+
     li {
       font-size: 0.875rem;
       line-height: 35px;

ui/store/actions.js

@@ -482,6 +482,22 @@ export function unlockHardwareWalletAccounts(
   };
 }
 
+export async function checkLedgerReady(fromAddress) {
+  console.log('[actions] checkLedgerReady for address: ', fromAddress);
+  console.log(
+    '[actions] About to call to server : ',
+    promisifiedBackground.checkLedgerReady,
+  );
+  let isReady = false;
+  try {
+    isReady = await promisifiedBackground.checkLedgerReady(fromAddress);
+  } catch (e) {
+    console.log('[actions]] ERROR! ', e);
+  }
+  console.log('[actions] checkLedgerReady response: ', isReady);
+  return isReady;
+}
+
 export function showQrScanner() {
   return (dispatch) => {
     dispatch(