feat: add memo to tx form, closes #216

chore: update packages 2

app/modals/transaction/transaction-form.tsx

@@ -8,7 +8,7 @@ import { toHumanReadableStx } from '../../utils/unit-convert';
 
 interface TxModalFormProps {
   balance: string;
-  form: FormikProps<{ recipient: string; amount: string }>;
+  form: FormikProps<{ recipient: string; amount: string; memo: string }>;
 }
 
 export const TxModalForm: FC<TxModalFormProps> = ({ balance, form }) => {
@@ -55,6 +55,23 @@ export const TxModalForm: FC<TxModalFormProps> = ({ balance, form }) => {
             <ErrorText>{capitalize(form.errors.amount)}</ErrorText>
           </ErrorLabel>
         )}
+        <Text textStyle="body.small.medium" mt="base-loose" as="label">
+          <label htmlFor="stxAmount">Memo</label>
+        </Text>
+        <Input
+          id="memo"
+          name="memo"
+          inputMode="numeric"
+          mt="base-tight"
+          placeholder="Memo"
+          onChange={form.handleChange}
+          value={form.values.memo}
+        />
+        {form.touched.memo && form.errors.memo && (
+          <ErrorLabel>
+            <ErrorText>{capitalize(form.errors.memo)}</ErrorText>
+          </ErrorLabel>
+        )}
       </Flex>
     </Box>
   );

app/modals/transaction/transaction-modal.tsx

@@ -7,8 +7,8 @@ import { BigNumber } from 'bignumber.js';
 import { Modal, Text, Button, Box } from '@blockstack/ui';
 import {
   makeSTXTokenTransfer,
-  makeUnsignedSTXTokenTransfer,
   pubKeyfromPrivKey,
+  MEMO_MAX_LENGTH_BYTES,
 } from '@blockstack/stacks-transactions';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -38,7 +38,6 @@ import {
 import { TxModalForm } from './transaction-form';
 import { DecryptWalletForm } from './decrypt-wallet-form';
 import { SignTxWithLedger } from './sign-tx-with-ledger';
-import { StacksTransaction } from '@blockstack/stacks-transactions';
 import BlockstackApp from '../../../../ledger-blockstack/js/src/index';
 import { MessageSignature } from '@blockstack/stacks-transactions/lib/authorization';
 import { selectPublicKey } from '../../store/keys/keys.reducer';
@@ -200,11 +199,13 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   };
 
   const totalIsMoreThanBalance = total.isGreaterThan(balance);
-
+  const exceedsMaxLengthBytes = (string: string, maxLengthBytes: number): boolean =>
+    string ? Buffer.from(string).length > maxLengthBytes : false;
   const form = useFormik({
     initialValues: {
       recipient: '',
       amount: '',
+      memo: '',
     },
     validationSchema: yup.object().shape({
       recipient: yup
@@ -245,6 +246,13 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
           }
         )
         .required(),
+      memo: yup
+        .string()
+        .test(
+          'test-max-memo-length',
+          'Transaction memo cannot exceed 34 bytes',
+          (value = '') => !exceedsMaxLengthBytes(value, MEMO_MAX_LENGTH_BYTES)
+        ),
     }),
     onSubmit: async () => {
       setLoading(true);

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

@@ -14,7 +14,6 @@ import {
 } from '../../../components/onboarding';
 import { setLedgerWallet } from '../../../store/keys';
 
-import { ERROR_CODE } from '../../../../../ledger-blockstack/js/src/common';
 import { delay } from '../../../utils/delay';
 import { LedgerConnectInstructions } from '../../../components/ledger/ledger-connect-instructions';
 import { useLedger } from '../../../hooks/use-ledger';
@@ -53,7 +52,8 @@ export const ConnectLedger: React.FC = () => {
       console.log(version);
 
       const confirmedResponse = await app.showAddressAndPubKey(STX_DERIVATION_PATH);
-      if (confirmedResponse.returnCode !== ERROR_CODE.NoError) {
+      // TODO: Replace with ref to LedgerError
+      if (confirmedResponse.returnCode !== 0x90000) {
         console.log('resp', confirmedResponse);
         setDeviceError('Has your Ledger device locked itself?');
         return;

app/store/keys/keys.actions.ts

@@ -18,6 +18,7 @@ import { deriveStxAddressKeychain } from '../../crypto/derive-address-keychain';
 import { encryptMnemonic, decryptMnemonic } from '../../crypto/key-encryption';
 import { persistPublicKey } from '../../utils/disk-store';
 import { selectMnemonic } from './keys.reducer';
+import { BIP32Interface } from '../../types/bip32';
 
 type History = ReturnType<typeof useHistory>;
 
@@ -103,5 +104,9 @@ export async function decryptSoftwareWallet(args: DecryptSoftwareWalletArgs) {
     derivedKeyHash,
   });
   const rootNode = await deriveRootKeychainFromMnemonic(plaintextMnemonic);
-  return deriveStxAddressKeychain(rootNode);
+  return deriveStxAddressKeychain(rootNode) as {
+    childKey: BIP32Interface;
+    address: string;
+    privateKey: string;
+  };
 }

app/yarn.lock

@@ -20,9 +20,9 @@
     zone-file "^1.0.0"
 
 "@blockstack/rpc-client@^0.3.0-alpha.11":
-  version "0.3.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/@blockstack/rpc-client/-/rpc-client-0.3.0-alpha.11.tgz#205c33df3d3a6d0c1f45f7dfbc675a297818a032"
-  integrity sha512-Gy/UlL9wjJh4GFdlFlmGT0wA/K7x4AK5Y5Y+N+qNnvE1FJipfsB3l5eE5aYamBEiTp1MRQPRi08+YUrhpPnHSQ==
+  version "0.3.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/@blockstack/rpc-client/-/rpc-client-0.3.0-alpha.12.tgz#b09e8b98309de1d80d5198afe14ae7884adf4a35"
+  integrity sha512-kWdI3+TqEPFDdNUwfWOiYokztPOUqbNT6+2ZnzriveBjMrMRb1F1lUTPC/OjLRyUDNxPRrnjhSQdqXQCm+EeNA==
   dependencies:
     "@blockstack/stacks-transactions" "0.5.1"
     cross-fetch "^3.0.4"

package.json

@@ -16,7 +16,7 @@
     "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
     "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
     "electron-rebuild": "electron-rebuild --parallel --force --types prod,dev,optional --module-dir app",
-    "lint:eslint": "eslint app/**/*.{ts,tsx}",
+    "lint:eslint": "eslint \"app/**/*.{ts,tsx}\"",
     "package": "yarn build && electron-builder build --publish never",
     "package-all": "yarn build && electron-builder build -mwl",
     "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
@@ -92,7 +92,7 @@
   },
   "devDependencies": {
     "@actions/core": "1.2.4",
-    "@babel/core": "7.10.5",
+    "@babel/core": "7.11.1",
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-proposal-decorators": "7.10.5",
     "@babel/plugin-proposal-do-expressions": "7.10.4",
@@ -101,24 +101,24 @@
     "@babel/plugin-proposal-function-bind": "7.10.5",
     "@babel/plugin-proposal-function-sent": "7.10.4",
     "@babel/plugin-proposal-json-strings": "7.10.4",
-    "@babel/plugin-proposal-logical-assignment-operators": "7.10.4",
+    "@babel/plugin-proposal-logical-assignment-operators": "7.11.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
     "@babel/plugin-proposal-numeric-separator": "7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "7.11.0",
     "@babel/plugin-proposal-pipeline-operator": "7.10.5",
     "@babel/plugin-proposal-throw-expressions": "7.10.4",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-meta": "7.10.4",
     "@babel/plugin-transform-react-constant-elements": "7.10.4",
     "@babel/plugin-transform-react-inline-elements": "7.10.4",
-    "@babel/preset-env": "7.10.4",
+    "@babel/preset-env": "7.11.0",
     "@babel/preset-react": "7.10.4",
     "@babel/preset-typescript": "7.10.4",
     "@babel/register": "7.10.5",
     "@blockstack/eslint-config": "1.0.5",
     "@blockstack/prettier-config": "0.0.6",
     "@blockstack/stacks-blockchain-api-types": "0.4.0",
-    "@commitlint/config-conventional": "9.1.1",
+    "@commitlint/config-conventional": "9.1.2",
     "@types/argon2-browser": "1.12.0",
     "@types/bcryptjs": "2.4.2",
     "@types/bn.js": "4.11.6",
@@ -127,39 +127,39 @@
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/history": "4.7.7",
-    "@types/jest": "26.0.7",
+    "@types/jest": "26.0.10",
     "@types/ledgerhq__hw-transport-node-hid": "4.22.1",
     "@types/ledgerhq__hw-transport-webusb": "4.70.0",
-    "@types/node": "12",
+    "@types/node": "14.0.27",
     "@types/qrcode.react": "1.0.1",
     "@types/ramda": "types/npm-ramda#dist",
-    "@types/react": "16.9.44",
+    "@types/react": "16.9.46",
     "@types/react-dom": "16.9.8",
     "@types/react-redux": "7.1.9",
     "@types/react-router": "5.1.8",
     "@types/react-router-dom": "5.1.5",
-    "@types/react-test-renderer": "16.9.2",
+    "@types/react-test-renderer": "16.9.3",
     "@types/redux-logger": "3.0.8",
     "@types/source-map-support": "0.5.2",
     "@types/terser-webpack-plugin": "3.0.0",
     "@types/vfile-message": "2.0.0",
     "@types/webpack": "4.41.21",
     "@types/webpack-merge": "4.1.5",
-    "@types/yup": "0.29.3",
+    "@types/yup": "0.29.5",
     "@types/zxcvbn": "4.4.0",
-    "@typescript-eslint/eslint-plugin": "3.7.0",
-    "@typescript-eslint/parser": "3.7.0",
+    "@typescript-eslint/eslint-plugin": "3.9.0",
+    "@typescript-eslint/parser": "3.9.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
+    "babel-jest": "26.3.0",
     "babel-loader": "8.1.0",
     "babel-plugin-dev-expression": "0.2.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "base64-loader": "1.0.0",
     "browserslist-config-erb": "0.0.1",
     "chalk": "4.1.0",
     "circular-dependency-plugin": "5.2.0",
-    "concurrently": "5.2.0",
+    "concurrently": "5.3.0",
     "cross-env": "7.0.2",
     "cross-spawn": "7.0.3",
     "csstype": "3.0.2",
@@ -169,48 +169,48 @@
     "electron-devtools-installer": "3.0.0",
     "electron-rebuild": "1.11.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
+    "enzyme-adapter-react-16": "1.15.3",
     "enzyme-to-json": "3.5.0",
     "eslint-plugin-react-hooks": "4.0.8",
-    "fbjs-scripts": "1.2.0",
+    "fbjs-scripts": "2.0.0",
     "file-loader": "6.0.0",
     "husky": "4.2.5",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.1.0",
+    "jest": "26.4.0",
     "lint-staged": "10.2.11",
     "mini-css-extract-plugin": "0.9.0",
     "node-sass": "4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "prettier": "2.0.5",
-    "ramda": "0.27.0",
+    "ramda": "0.27.1",
     "react-test-renderer": "16.13.1",
     "redux-logger": "3.0.6",
     "rimraf": "3.0.2",
-    "sinon": "9.0.2",
+    "sinon": "9.0.3",
     "style-loader": "1.2.1",
-    "terser-webpack-plugin": "3.0.7",
+    "terser-webpack-plugin": "4.1.0",
     "ts-jest": "26.1.3",
     "url-loader": "4.1.0",
-    "webpack": "4.44.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"
   },
   "dependencies": {
-    "@blockstack/rpc-client": "0.3.0-alpha.7",
+    "@blockstack/rpc-client": "0.3.0-alpha.12",
     "@blockstack/stacks-transactions": "0.6.0",
-    "@blockstack/ui": "2.12.5",
+    "@blockstack/ui": "2.13.0",
     "@hot-loader/react-dom": "16.13.0",
-    "@ledgerhq/hw-transport-webusb": "5.19.1",
+    "@ledgerhq/hw-transport-webusb": "5.22.0",
     "@reduxjs/toolkit": "1.4.0",
     "@styled-system/theme-get": "5.1.2",
     "@zondax/ledger-blockstack": "0.0.1",
     "argon2-browser": "1.14.0",
     "axios": "0.19.2",
     "bignumber.js": "9.0.0",
-    "bn.js": "5.1.2",
+    "bn.js": "5.1.3",
     "buffer": "5.6.0",
     "c32check": "1.0.1",
     "connected-react-router": "6.8.0",
@@ -227,7 +227,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-hot-loader": "4.12.21",
-    "react-hotkeys-hook": "2.2.1",
+    "react-hotkeys-hook": "2.2.2",
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
@@ -236,7 +236,7 @@
     "source-map-support": "0.5.19",
     "styled-components": "5.1.1",
     "typescript": "3.9.7",
-    "yup": "0.29.1",
+    "yup": "0.29.3",
     "zxcvbn": "4.4.2"
   },
   "devEngines": {