feat: stacks wallet for web

.eslintrc.js

@@ -2,8 +2,21 @@ module.exports = {
   root: true,
   reportUnusedDisableDirectives: true,
   extends: ['@blockstack/eslint-config'],
+  plugins: [
+    'react-hooks',
+    'jest',
+  ],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: './tsconfig.json',
+  },
+  rules: {
+    '@typescript-eslint/no-unsafe-assignment': [0],
+    '@typescript-eslint/no-unsafe-return': [0],
+    '@typescript-eslint/no-unsafe-call': [0],
+    '@typescript-eslint/no-unsafe-member-access': [0],
+    '@typescript-eslint/ban-types': [0],
+    '@typescript-eslint/restrict-template-expressions': [0],
+    '@typescript-eslint/explicit-module-boundary-types': [0],
   }
 };

.github/actions/integration-tests/action.yml

@@ -11,11 +11,10 @@ runs:
       run: yarn --frozen-lockfile
     - name: Build web apps
       shell: bash
-      run: yarn lerna run prod:web --parallel
+      run: yarn build:test
     - name: Integration Tests
       shell: bash
       run: |
-        yarn http-server packages/app/dist -p 8080 -s &
-        yarn http-server packages/test-app/dist -p 3000 -s &
+        yarn serve:test &
         cd packages/app &&
         yarn test:integration

.github/workflows/publish.yml

@@ -28,8 +28,8 @@ jobs:
       - uses: actions/upload-artifact@v2
         name: Upload Extension Zip
         with:
-          name: connect-extension
-          path: connect-extension.zip
+          name: stacks-wallet-chromium
+          path: stacks-wallet-chromium.zip
       - name: Sign Production Firefox version
         continue-on-error: true
         run: yarn web-ext sign --channel=listed

.github/workflows/pull_request.yml

@@ -2,6 +2,20 @@ name: Pull Request
 on: [pull_request, workflow_dispatch]
 
 jobs:
+  check_fork:
+    name: Disable jobs for forks
+    runs-on: ubuntu-latest
+    outputs:
+      is_not_fork: ${{ steps.is_not_fork.outputs.is_not_fork }}
+    steps:
+      - name: Check for secret
+        id: is_not_fork
+        env:
+          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
+        run: |
+          echo "Is a fork: ${{ env.WEB_EXT_API_KEY == '' }}"
+          echo "::set-output name=is_not_fork::${{ env.WEB_EXT_API_KEY != '' }}"
+
   commitlint:
     runs-on: ubuntu-latest
     env:
@@ -13,20 +27,23 @@ jobs:
       - uses: wagoid/commitlint-github-action@v1
 
   code_checks:
+    needs: [check_fork]
     name: Code checks
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
       - uses: lucasmotta/pull-request-sticky-header@1.0.0
+        if: needs.check_fork.outputs.is_not_fork == 'true'
         with:
           header: '> Try out this version of the Stacks Wallet - download [extension builds](https://github.com/blockstack/ux/actions/runs/${{ github.run_id }}), the [hosted version](https://pr-${{ github.event.number }}.app.stacks.engineering), or the [Stacks testnet demo app](https://pr-${{ github.event.number }}.testnet-demo.stacks.engineering)'
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Set Node Version
         uses: actions/setup-node@v2-beta
         with:
           node-version: 12.16.1
-      - uses: microsoft/playwright-github-action@v1
       - name: Restore lerna cache
         uses: actions/cache@v2
         with:
@@ -39,8 +56,21 @@ jobs:
       - uses: actions/upload-artifact@v2
         name: Upload Extension Zip
         with:
-          name: connect-extension
-          path: connect-extension.zip
+          name: stacks-wallet-chromium
+          path: stacks-wallet-chromium.zip
+      - name: Get git branch
+        id: git-branch
+        run: echo "::set-output name=branch::$(git rev-parse --abbrev-ref HEAD | cut -d'/' -f2 )"
+      - name: Echo git branch
+        run: echo "${{ steps.git-branch.outputs.branch }}"
+      - name: Upload chromium extension to GCS
+        if: needs.check_fork.outputs.is_not_fork == 'true' && steps.git-branch.outputs.branch == 'connect-2'
+        uses: google-github-actions/upload-cloud-storage@864317d
+        with:
+          credentials: ${{ secrets.GCS_BUCKET_CREDENTIALS }}
+          path: ./stacks-wallet-chromium.zip
+          destination: wallet-extensions
+
 
   integration_tests:
     name: Integration tests
@@ -73,7 +103,8 @@ jobs:
   publish_npm_betas:
     name: Publish NPM beta versions
     runs-on: ubuntu-latest
-    if: github.repository == 'blockstack/ux'
+    needs: [check_fork]
+    if: needs.check_fork.outputs.is_not_fork == 'true'
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -120,7 +151,8 @@ jobs:
   publish_beta_web_apps:
     name: Publich beta hosted versions
     runs-on: ubuntu-latest
-    if: github.repository == 'blockstack/ux'
+    needs: [check_fork]
+    if: needs.check_fork.outputs.is_not_fork == 'true'
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -183,10 +215,13 @@ jobs:
   publish_firefox_beta:
     name: Publish beta firefox extension
     runs-on: ubuntu-latest
-    if: github.repository == 'blockstack/ux'
+    needs: [check_fork]
+    if: needs.check_fork.outputs.is_not_fork == 'true'
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
       - name: Set Node Version
         uses: actions/setup-node@v2-beta
         with:
@@ -210,3 +245,25 @@ jobs:
         with:
           name: connect-addon
           path: web-ext-artifacts/*.xpi
+      - name: Get Firefox addon filename
+        id: addon-file
+        run: echo "::set-output name=addon_path::$(find ./web-ext-artifacts -type f -iname "*.xpi" | tail -n1)"
+      - name: Echo FF addon file
+        env:
+          ADDON_PATH: ${{ steps.addon-file.outputs.addon_path }}
+        run: echo $ADDON_PATH
+      - name: Get git branch
+        id: git-branch
+        run: echo "::set-output name=branch::$(git rev-parse --abbrev-ref HEAD | cut -d'/' -f2 )"
+      - name: Echo git branch
+        run: echo "${{ steps.git-branch.outputs.branch }}"
+      - name: Rename Firefox addon file
+        run: cp ${{ steps.addon-file.outputs.addon_path }} stacks-wallet-firefox.xpi
+      # TODO: move this action to the `publish` workflow after Stacks Wallet is released
+      - name: Upload chromium extension to GCS
+        if: needs.check_fork.outputs.is_not_fork == 'true' && steps.git-branch.outputs.branch == 'connect-2'
+        uses: google-github-actions/upload-cloud-storage@864317d
+        with:
+          credentials: ${{ secrets.GCS_BUCKET_CREDENTIALS }}
+          path: ./stacks-wallet-firefox.xpi
+          destination: wallet-extensions/

.github/workflows/version.yml

@@ -33,8 +33,8 @@ jobs:
       - uses: actions/upload-artifact@v2
         name: Upload Extension Zip
         with:
-          name: connect-extension
-          path: connect-extension.zip
+          name: stacks-wallet-chromium
+          path: stacks-wallet-chromium.zip
 
   integration_tests:
     name: Integration tests

.gitignore

@@ -14,6 +14,7 @@ yarn-error.log
 .npmrc
 coverage/
 *.zip
+*.xpi
 
 dist/
 www/

Dockerfile

@@ -6,11 +6,11 @@ RUN apt-get update -y && apt-get install -y build-essential python3 nodejs zip c
   && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |  apt-key add - \
   && sh -c 'echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list' \
   && apt-get update -y && apt-get install -y yarn \
-  && ./build-ext.sh /connect-extension.zip
+  && ./build-ext.sh /stacks-wallet-chromium.zip
 
 
 FROM alpine:latest
-COPY --from=builder /connect-extension.zip .
+COPY --from=builder /stacks-wallet-chromium.zip .
 
 # Wait for extension.zip to be copied into local
 CMD sleep 30

README.md

@@ -45,7 +45,7 @@ For development instructions of specific packages, see the `README` in each pack
 ## Building browser extensions
 
 1. From the root of this repository, in the command line, run `sh build-ext.sh`
-2. The extension will be packaged as `connect-extension.zip` inside this folder.
+2. The extension will be packaged as `stacks-wallet-chromium.zip` inside this folder.
 
 ### Optional - Build browser extensions using Docker
 
@@ -56,23 +56,23 @@ For development instructions of specific packages, see the `README` in each pack
 
 1. Copy the built extensions to your local machine:
     ```bash
-    docker run -d --name ux ux && docker cp ux:connect-extension.zip . && docker rm -f ux
+    docker run -d --name ux ux && docker cp ux:stacks-wallet-chromium.zip . && docker rm -f ux
     ```
 
 ## Install browser extension from source
 
-First, unzip the `connect-extension.zip` file that was generated in the previous step.
+First, unzip the `stacks-wallet-chromium.zip` file that was generated in the previous step.
 
 If installing for Chrome or Brave:
 
 1. Go to: [**chrome://extensions**](chrome://extensions)
 2. Toggle: "**developer mode**" on.
 3. Click on: "**Load unpacked**"
-4. Select the new folder that was unzipped from `connect-extension.zip`.
+4. Select the new folder that was unzipped from `stacks-wallet-chromium.zip`.
 
 If installing for Firefox:
 
 1. Go to: [**about:debugging**](about:debugging)
 2. Click on "**This Firefox**"
 3. Click on: "**Load Temporary Add-on…**"
-4. Inside the new folder that was unzipped from `connect-extension.zip`, select the `manifest.json` file.
+4. Inside the new folder that was unzipped from `stacks-wallet-chromium.zip`, select the `manifest.json` file.

build-ext.sh

@@ -9,7 +9,7 @@ TS=$(date +%Y)$(date +%m)010000
 find -print | while read file; do
     touch -t $TS "$file"
 done
-DEFAULT_DEST="../../../connect-extension.zip"
+DEFAULT_DEST="../../../stacks-wallet-chromium.zip"
 DEST=${1:-$DEFAULT_DEST}
 zip -Xro $DEST *
 echo "✅  Extension packaged as $(basename $DEST)"

package.json

@@ -4,21 +4,24 @@
   "scripts": {
     "typecheck": "lerna run typecheck --parallel --no-bail --stream",
     "dev": "NODE_ENV=development yarn lerna exec --parallel 'yarn dev' --scope test-app --scope @stacks/app",
-    "bootstrap": "yarn lerna exec --parallel 'yarn'",
+    "bootstrap": "lerna exec --parallel 'yarn'",
     "build:libs": "yarn build:ui && yarn build:keychain && yarn build:connect",
     "build:keychain": "lerna run build --scope @stacks/keychain",
     "build:connect": "lerna run build --scope @stacks/connect",
     "build:connect-ui": "lerna run build --scope @stacks/connect-ui",
     "build:app": "yarn build:connect-ui && lerna run prod:web --scope @stacks/app",
     "build:test-app": "lerna run prod:web --scope test-app",
+    "build:test": "lerna run build:test --parallel --stream",
+    "build:test:watch": "lerna run build:test:watch --parallel --stream",
     "build:extension": "lerna run prod:ext",
     "deploy-contracts": "lerna run deploy-contracts --stream",
     "lint": "yarn lint:eslint && yarn lint:prettier",
-    "lint:eslint": "eslint \"packages/**/src/**/*.{ts,tsx}\" -f unix",
-    "lint:fix": "eslint \"packages/**/src/**/*.{ts,tsx}\" -f unix --fix",
+    "lint:eslint": "eslint \"packages/**/src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"packages/**/src/**/*.{ts,tsx}\" --fix",
     "lint:prettier": "prettier --check \"packages/**/src/**/*.{ts,tsx}\" *.js",
     "lint:prettier:fix": "prettier --write \"packages/**/src/**/*.{ts,tsx}\" *.js",
-    "postinstall": "yarn build:connect-ui"
+    "postinstall": "yarn build:connect-ui",
+    "serve:test": "lerna run serve:test --parallel --stream"
   },
   "prettier": "@blockstack/prettier-config",
   "husky": {
@@ -35,6 +38,8 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@commitlint/config-lerna-scopes": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "4.2.0",
+    "@typescript-eslint/parser": "4.2.0",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.0.0",
@@ -46,13 +51,13 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.2.3",
     "http-server": "0.12.3",
     "lerna": "^3.22.1",
     "prettier": "^2.0.5",
-    "typescript": "^3.9.3",
     "web-ext": "^5.4.1",
+    "typescript": "4.1.2",
     "yalc": "^1.0.0-pre.42"
   },
   "dependencies": {
@@ -61,11 +66,13 @@
   },
   "resolutions": {
     "@blockstack/eslint-config": "^1.0.5",
-    "eslint-plugin-import": "2.21.2",
     "@blockstack/prettier-config": "^0.0.6",
+    "@typescript-eslint/eslint-plugin": "4.2.0",
+    "@typescript-eslint/parser": "4.2.0",
+    "@types/node": "12.7.12",
     "buffer": "5.6.0",
-    "typescript": "3.9.3",
-    "@types/node": "12.7.12"
+    "typescript": "4.1.2",
+    "eslint-plugin-import": "2.21.2"
   },
   "webExt": {
     "sourceDir": "packages/app/dist/"

packages/app/.eslintrc.js

@@ -17,5 +17,17 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-unnecessary-type-assertion': [0],
+    '@typescript-eslint/no-unsafe-assignment': [0],
+    '@typescript-eslint/no-unsafe-return': [0],
+    '@typescript-eslint/no-unsafe-call': [0],
+    '@typescript-eslint/no-unsafe-member-access': [0],
+    '@typescript-eslint/ban-types': [0],
+    '@typescript-eslint/restrict-template-expressions': [0],
+    '@typescript-eslint/explicit-module-boundary-types': [0],
+    "react-hooks/exhaustive-deps": [
+      "warn", {
+        "additionalHooks": "useRecoilCallback"
+      }
+    ]
   },
 };