fix: handle error cases when signing transactions, closes #234

refactor: upgrade ts-jest, eslint

refactor: remove mini-css-extract-plugin

refactor: update other packages

refactor: remove optimize-css-assets-webpack-plugin

.gitignore

@@ -13,8 +13,8 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+app/.yalc
+app/yalc.lock
 
 # node-waf configuration
 .lock-wscript

app/hooks/use-ledger.ts

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useCallback, useState } from 'react';
-import BlockstackApp from '@zondax/ledger-blockstack';
+import BlockstackApp, { LedgerError } from '@zondax/ledger-blockstack';
 import type Transport from '@ledgerhq/hw-transport';
 import TransportNodeHid from '@ledgerhq/hw-transport-node-hid';
 
@@ -86,9 +86,10 @@ export function useLedger() {
       void new BlockstackApp(transport.current)
         .getVersion()
         .then(resp => {
-          // TODO: Refactor Ledger app to use enum rather than direct values
-          if (resp.returnCode === 0x6e00) return setStep(LedgerConnectStep.ConnectedAppClosed);
-          if (resp.returnCode === 0x9000) return setStep(LedgerConnectStep.ConnectedAppOpen);
+          if (resp.returnCode === LedgerError.AppDoesNotSeemToBeOpen)
+            return setStep(LedgerConnectStep.ConnectedAppClosed);
+          if (resp.returnCode === LedgerError.NoErrors)
+            return setStep(LedgerConnectStep.ConnectedAppOpen);
         })
         .catch(() => ({}));
     }

app/modals/transaction/sign-tx-with-ledger.tsx

@@ -15,9 +15,7 @@ export const SignTxWithLedger: FC<SignTxWithLedgerProps> = ({ onLedgerConnect, u
 
   useEffect(() => {
     updateStep(step);
-  }, [step, updateStep]);
 
-  useEffect(() => {
     async function run() {
       const usbTransport = transport;
 
@@ -34,7 +32,8 @@ export const SignTxWithLedger: FC<SignTxWithLedgerProps> = ({ onLedgerConnect, u
       }
     }
     void run();
-  }, [transport, step, onLedgerConnect]);
+  }, [transport, step, onLedgerConnect, updateStep]);
+
   return (
     <Box mx="extra-loose" mb="extra-loose">
       <LedgerConnectInstructions action="Sign transaction on Ledger" step={step} />

app/modals/transaction/transaction-modal.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef } from 'react';
+import React, { FC, useState, useRef, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
@@ -18,7 +18,7 @@ import { RootState } from '@store/index';
 import routes from '@constants/routes.json';
 import { validateStacksAddress } from '@utils/get-stx-transfer-direction';
 
-import { selectTxModalOpen, homeActions } from '@store/home/home.reducer';
+import { homeActions } from '@store/home/home.reducer';
 import {
   selectEncryptedMnemonic,
   selectSalt,
@@ -78,21 +78,15 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   const [isDecrypting, setIsDecrypting] = useState(false);
   const [loading, setLoading] = useState(false);
   const interactedWithSendAllBtn = useRef(false);
-  const {
-    txModalOpen,
-    encryptedMnemonic,
-    salt,
-    walletType,
-    publicKey,
-    broadcastError,
-  } = useSelector((state: RootState) => ({
-    txModalOpen: selectTxModalOpen(state),
-    salt: selectSalt(state),
-    encryptedMnemonic: selectEncryptedMnemonic(state),
-    broadcastError: selectMostRecentlyTxError(state),
-    walletType: selectWalletType(state),
-    publicKey: selectPublicKey(state),
-  }));
+  const { encryptedMnemonic, salt, walletType, publicKey, broadcastError } = useSelector(
+    (state: RootState) => ({
+      salt: selectSalt(state),
+      encryptedMnemonic: selectEncryptedMnemonic(state),
+      broadcastError: selectMostRecentlyTxError(state),
+      walletType: selectWalletType(state),
+      publicKey: selectPublicKey(state),
+    })
+  );
 
   const [blockstackApp, setBlockstackApp] = useState<null | BlockstackApp>(null);
 
@@ -146,7 +140,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
 
         const resp = await blockstackApp.sign(`m/44'/5757'/0'/0/0`, tx.serialize());
 
-        if (resp.returnCode === LedgerError.TransactionRejected) {
+        if (resp.returnCode !== LedgerError.NoErrors) {
           setHasSubmitted(false);
           return;
         }
@@ -166,7 +160,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
           })
         );
       } catch (e) {
-        console.log(e);
+        setHasSubmitted(false);
       }
     }
 
@@ -262,11 +256,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   const [calculatingMaxSpend, setCalculatingMaxSpend] = useState(false);
   const [ledgerConnectStep, setLedgerConnectStep] = useState(LedgerConnectStep.Disconnected);
 
-  if (!txModalOpen) return null;
-
-  const closeModalResetForm = () => {
-    dispatch(homeActions.closeTxModal());
-  };
+  const closeModalResetForm = () => dispatch(homeActions.closeTxModal());
 
   const proceedToSignTransactionStep = () =>
     walletType === 'software'
@@ -275,7 +265,6 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
 
   const updateAmountFieldToMaxBalance = async () => {
     interactedWithSendAllBtn.current = true;
-    // if (!form.values.recipient) return;
     setCalculatingMaxSpend(true);
     const demoTx = await makeSTXTokenTransfer({
       // SECURITY: remove hardcoded test address
@@ -301,7 +290,13 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
     setTimeout(() => (interactedWithSendAllBtn.current = false), 1000);
   };
 
-  const txFormStepMap: { [step in TxModalStep]: ModalComponents } = {
+  const setBlockstackAppCallback = useCallback(
+    blockstackApp => setBlockstackApp(blockstackApp),
+    []
+  );
+  const updateStep = useCallback(step => setLedgerConnectStep(step), []);
+
+  const txFormStepMap: Record<TxModalStep, ModalComponents> = {
     [TxModalStep.DescribeTx]: () => ({
       header: <TxModalHeader onSelectClose={closeModalResetForm}>Send STX</TxModalHeader>,
       body: (
@@ -413,12 +408,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
       header: (
         <TxModalHeader onSelectClose={closeModalResetForm}>Confirm on your Ledger</TxModalHeader>
       ),
-      body: (
-        <SignTxWithLedger
-          onLedgerConnect={blockstackApp => setBlockstackApp(blockstackApp)}
-          updateStep={step => setLedgerConnectStep(step)}
-        />
-      ),
+      body: <SignTxWithLedger onLedgerConnect={setBlockstackAppCallback} updateStep={updateStep} />,
       footer: (
         <TxModalFooter>
           <Button mode="tertiary" onClick={() => setStep(TxModalStep.PreviewTx)} {...buttonStyle}>

app/pages/onboarding/04-connect-ledger/connect-ledger.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import BlockstackApp from '@zondax/ledger-blockstack';
+import BlockstackApp, { LedgerError } from '@zondax/ledger-blockstack';
 
 import { useDispatch } from 'react-redux';
 
@@ -48,14 +48,10 @@ export const ConnectLedger: React.FC = () => {
     const app = new BlockstackApp(usbTransport);
 
     try {
-      const version = await app.getVersion();
-      // await app.getAppInfo();
-      console.log(version);
+      await app.getVersion();
 
       const confirmedResponse = await app.showAddressAndPubKey(STX_DERIVATION_PATH);
-      // TODO: Replace with ref to LedgerError
-      if (confirmedResponse.returnCode !== 0x9000) {
-        console.log('resp', confirmedResponse);
+      if (confirmedResponse.returnCode !== LedgerError.NoErrors) {
         setDeviceError('Has your Ledger device locked itself?');
         return;
       }

configs/webpack.config.renderer.prod.babel.js

@@ -4,8 +4,6 @@
 
 import path from 'path';
 import webpack from 'webpack';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import merge from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
@@ -100,14 +98,6 @@ export default merge.smart(baseConfig, {
             sourceMap: true,
             cache: true,
           }),
-          new OptimizeCSSAssetsPlugin({
-            cssProcessorOptions: {
-              map: {
-                inline: false,
-                annotation: true,
-              },
-            },
-          }),
         ],
   },
 
@@ -127,10 +117,6 @@ export default merge.smart(baseConfig, {
       E2E_BUILD: false,
     }),
 
-    new MiniCssExtractPlugin({
-      filename: 'style.css',
-    }),
-
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
       openAnalyzer: process.env.OPEN_ANALYZER === 'true',

package.json

@@ -117,7 +117,7 @@
     "@babel/register": "7.11.5",
     "@blockstack/eslint-config": "1.0.5",
     "@blockstack/prettier-config": "0.0.6",
-    "@blockstack/stacks-blockchain-api-types": "0.14.2",
+    "@blockstack/stacks-blockchain-api-types": "0.14.4",
     "@commitlint/config-conventional": "11.0.0",
     "@types/argon2-browser": "1.12.0",
     "@types/bcryptjs": "2.4.2",
@@ -128,10 +128,10 @@
     "@types/enzyme": "3.10.6",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/history": "4.7.7",
-    "@types/jest": "26.0.13",
+    "@types/jest": "26.0.14",
     "@types/ledgerhq__hw-transport-node-hid": "4.22.1",
     "@types/ledgerhq__hw-transport-webusb": "4.70.0",
-    "@types/node": "14.10.1",
+    "@types/node": "14.10.3",
     "@types/qrcode.react": "1.0.1",
     "@types/ramda": "types/npm-ramda#dist",
     "@types/react": "16.9.49",
@@ -146,12 +146,12 @@
     "@types/url-join": "4.0.0",
     "@types/uuid": "8.3.0",
     "@types/vfile-message": "2.0.0",
-    "@types/webpack": "4.41.21",
+    "@types/webpack": "4.41.22",
     "@types/webpack-merge": "4.1.5",
     "@types/yup": "0.29.7",
     "@types/zxcvbn": "4.4.0",
-    "@typescript-eslint/eslint-plugin": "3.10.0",
-    "@typescript-eslint/parser": "3.10.0",
+    "@typescript-eslint/eslint-plugin": "4.1.1",
+    "@typescript-eslint/parser": "4.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
@@ -173,44 +173,42 @@
     "electron-devtools-installer": "3.0.0",
     "electron-rebuild": "1.11.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.3",
+    "enzyme-adapter-react-16": "1.15.4",
     "enzyme-to-json": "3.5.0",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react-hooks": "4.1.0",
+    "eslint-plugin-react-hooks": "4.1.2",
     "fbjs-scripts": "2.0.0",
-    "file-loader": "6.0.0",
-    "husky": "4.2.5",
+    "file-loader": "6.1.0",
+    "husky": "4.3.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.4.2",
-    "lint-staged": "10.3.0",
-    "mini-css-extract-plugin": "0.10.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "prettier": "2.1.1",
+    "lint-staged": "10.4.0",
+    "prettier": "2.1.2",
     "ramda": "0.27.1",
     "react-test-renderer": "16.13.1",
     "redux-logger": "3.0.6",
     "rimraf": "3.0.2",
     "sinon": "9.0.3",
     "style-loader": "1.2.1",
-    "terser-webpack-plugin": "4.1.0",
-    "ts-jest": "26.2.0",
+    "terser-webpack-plugin": "4.2.1",
+    "ts-jest": "26.3.0",
     "tsconfig-paths-webpack-plugin": "3.3.0",
     "url-loader": "4.1.0",
     "webpack": "4.44.1",
     "webpack-bundle-analyzer": "3.8.0",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0",
     "webpack-merge": "4.2.2",
-    "yarn": "1.22.4"
+    "yarn": "1.22.5"
   },
   "dependencies": {
-    "@blockstack/rpc-client": "0.3.0-alpha.16",
+    "@blockstack/rpc-client": "0.3.0-alpha.17",
     "@blockstack/stacks-transactions": "0.7.0",
     "@blockstack/ui": "2.13.0",
     "@hot-loader/react-dom": "16.13.0",
     "@ledgerhq/hw-transport-webusb": "5.23.0",
     "@reduxjs/toolkit": "1.4.0",
-    "@stacks/blockchain-api-client": "0.14.2",
+    "@stacks/blockchain-api-client": "0.14.4",
     "@styled-system/theme-get": "5.1.2",
     "@zondax/ledger-blockstack": "0.0.2",
     "argon2-browser": "1.15.1",
@@ -235,7 +233,7 @@
     "react-countup": "4.3.3",
     "react-dom": "16.13.1",
     "react-hot-loader": "4.12.21",
-    "react-hotkeys-hook": "2.2.2",
+    "react-hotkeys-hook": "2.3.1",
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",