feat: refactor connect ui into web components with stencil

fixes #581, fixes #604, fixes #612, fixes #606, fixes #613

.circleci/config.yml

@@ -55,8 +55,11 @@ jobs:
           paths:
             - ./.cache/yarn
       - run:
-          name: Build UI
-          command: $HOME/.yarn/bin/yarn lerna run build --scope @blockstack/ui
+          name: Lerna bootstrap
+          command: $HOME/.yarn/bin/yarn lerna bootstrap
+      - run:
+          name: Build Connect UI
+          command: $HOME/.yarn/bin/yarn lerna run build --scope @blockstack/connect-ui
       - run:
           name: test server
           command: $HOME/.yarn/bin/yarn lerna run dev --scope @blockstack/app

.github/workflows/build-extension.yml

@@ -22,6 +22,8 @@ jobs:
       - name: Install monorepo deps
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Build connect-ui
+        run: yarn lerna run build --scope @blockstack/connect-ui
       - name: Build Extension
         run: yarn lerna run prod:ext --stream
       - name: Zip extension

.github/workflows/deploy-apps.yml

@@ -22,6 +22,8 @@ jobs:
       - name: Install monorepo deps
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Build connect-ui
+        run: yarn lerna run build --scope @blockstack/connect-ui
       - name: Build Blockstack App
         run: yarn prod:web
         working-directory: packages/app

.github/workflows/main.yml

@@ -45,6 +45,8 @@ jobs:
       - name: Install monorepo deps
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Build connect-ui
+        run: yarn lerna run build --scope @blockstack/connect-ui
       - name: Lint
         run: yarn lint
       - name: Typecheck
@@ -66,6 +68,8 @@ jobs:
       - name: Install monorepo deps (no cache)
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Build connect-ui
+        run: yarn lerna run build --scope @blockstack/connect-ui
       - name: Setup .npmrc
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -104,6 +108,8 @@ jobs:
       - name: Install monorepo deps
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Build connect-ui
+        run: yarn lerna run build --scope @blockstack/connect-ui
       - name: Build Blockstack App
         run: yarn prod:web
         working-directory: packages/app

.github/workflows/publish-npm-betas.yml

@@ -0,0 +1,51 @@
+name: Publish NPM Betas
+on:
+  push:
+    branches-ignore:
+      - master
+
+jobs:
+  publish_npm_betas:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set Node Version
+        uses: actions/setup-node@v1.4.2
+        with:
+          node-version: 12.16.1
+      - name: Restore lerna cache
+        id: lerna-cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Install monorepo deps
+        run: yarn --frozen-lockfile
+        if: steps.lerna-cache.outputs.cache-hit != 'true'
+      - name: Setup .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+      - name: Get git branch
+        id: git-branch
+        run: echo "::set-output name=branch::$(git rev-parse --abbrev-ref HEAD)"
+      - name: Get git commit
+        id: git-commit
+        run: echo "::set-output name=sha::$(git rev-parse --short HEAD)"
+      - name: print preid
+        env:
+          BRANCH: ${{ steps.git-branch.outputs.branch }}
+          SHA: ${{ steps.git-commit.outputs.sha }}
+        run: echo $BRANCH.$SHA
+      - name: Setup git
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+      - name: Publish to NPM
+        env:
+          BRANCH: ${{ steps.git-branch.outputs.branch }}
+          SHA: ${{ steps.git-commit.outputs.sha }}
+        run: yarn lerna publish prepatch --preid alpha.$SHA --dist-tag $BRANCH --yes --no-push

.gitignore

@@ -14,3 +14,33 @@ yarn-error.log
 .npmrc
 coverage/
 *.zip
+
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+yalc.lock
+.yalc

.prettierignore

@@ -1,2 +1,3 @@
 node_modules/
-*.d.ts
+*.d.ts
+dist/

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": [
-    "packages/**"
+    "packages/*"
   ],
   "version": "independent",
   "npmClient": "yarn",

package.json

@@ -48,7 +48,8 @@
     "husky": "^4.2.3",
     "lerna": "^3.20.2",
     "prettier": "^2.0.5",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.3",
+    "yalc": "^1.0.0-pre.42"
   },
   "dependencies": {
     "@babel/preset-env": "^7.10.3",
@@ -58,6 +59,8 @@
     "@blockstack/eslint-config": "^1.0.5",
     "eslint-plugin-import": "2.21.2",
     "@blockstack/prettier-config": "^0.0.6",
-    "buffer": "5.6.0"
+    "buffer": "5.6.0",
+    "typescript": "3.9.3",
+    "@types/node": "12.7.12"
   }
 }

packages/app/package.json

@@ -28,7 +28,7 @@
     "@blockstack/keychain": "^0.12.7",
     "@blockstack/prettier-config": "^0.0.6",
     "@blockstack/rpc-client": "^0.3.0-alpha.21",
-    "@blockstack/stacks-transactions": "0.5.1",
+    "@blockstack/stacks-transactions": "0.7.0",
     "@blockstack/stats": "^0.7.0",
     "@blockstack/ui": "^2.12.13",
     "@rehooks/document-title": "^1.0.1",

packages/app/src/common/hooks/use-message-pong.ts

@@ -1,23 +1,26 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { selectAuthRequest } from '@store/onboarding/selectors';
 import { getEventSourceWindow } from '@common/utils';
 
 export const useMessagePong = () => {
   const authRequest = useSelector(selectAuthRequest);
-  const sendMessage = (event: MessageEvent) => {
-    if (event.data.method === 'ping') {
-      const source = getEventSourceWindow(event);
-      source?.postMessage(
-        {
-          method: 'pong',
-          authRequest: event.data.authRequest,
-          source: 'blockstack-app',
-        },
-        event.origin
-      );
-    }
-  };
+  const sendMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.method === 'ping') {
+        const source = getEventSourceWindow(event);
+        source?.postMessage(
+          {
+            method: 'pong',
+            authRequest: event.data.authRequest,
+            source: 'blockstack-app',
+          },
+          event.origin
+        );
+      }
+    },
+    [authRequest]
+  );
 
   const deregister = () => {
     window.removeEventListener('message', sendMessage);
@@ -26,5 +29,5 @@ export const useMessagePong = () => {
   useEffect(() => {
     window.addEventListener('message', sendMessage);
     return deregister;
-  }, [authRequest]);
+  }, []);
 };

packages/app/src/components/app-icon/index.tsx

@@ -6,11 +6,11 @@ import { Image } from '@components/image';
 import { AppState } from '@store';
 import { selectAppName, selectFullAppIcon } from '@store/onboarding/selectors';
 
-export const AppIcon = ({ ...rest }: BoxProps) => {
+export const AppIcon: React.FC<BoxProps> = ({ ...rest }) => {
   const appIcon = useSelector((state: AppState) => selectFullAppIcon(state));
   const appName = useSelector((state: AppState) => selectAppName(state));
   return (
-    <Box size={['48px', '78px']} mx="auto" {...rest}>
+    <Box size={'24px'} mx="auto" {...rest}>
       <Image src={appIcon} alt={appName} />
     </Box>
   );

packages/app/src/components/drawer/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Flex, Stack, Button, Text } from '@blockstack/ui';
-import { ScreenBody, ScreenActions, Title } from '@blockstack/connect';
+import { ScreenBody, ScreenActions } from '@screen';
+import { Title } from '@components/typography';
 import useOnClickOutside from 'use-onclickoutside';
 
 import { Image } from '@components/image';

packages/app/src/components/extension-button.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Box, Text, Flex, PseudoBox, ChevronIcon, BoxProps } from '@blockstack/ui';
-import { PoweredBy } from '@blockstack/connect';
-import { buildEnterKeyEvent } from '@blockstack/connect';
+import { PoweredBy } from '@screen';
+import { buildEnterKeyEvent } from '@components/link';
 import { ChromeIcon } from '@components/icons/chrome-icon';
 import { FirefoxIcon } from '@components/icons/firefox-icon';
 

packages/app/src/components/link.tsx

@@ -1,14 +1,40 @@
 import React from 'react';
-import { BoxProps } from '@blockstack/ui';
-import { Link as ConnectLink } from '@blockstack/connect';
+import { Text, Box, BoxProps } from '@blockstack/ui';
 
 interface LinkProps extends BoxProps {
   _hover?: BoxProps;
   onClick: () => void;
 }
 
-export const Link: React.FC<LinkProps> = ({ children, fontSize = '14px', ...rest }) => (
-  <ConnectLink fontSize={fontSize} {...rest}>
+export const buildEnterKeyEvent = (onClick: () => void) => {
+  return (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && onClick) {
+      onClick();
+    }
+  };
+};
+
+export const Link: React.FC<LinkProps> = ({
+  _hover = {},
+  children,
+  fontSize = '12px',
+  textStyle = 'caption.medium',
+  onClick,
+  ...rest
+}) => (
+  <Box {...rest} onKeyPress={buildEnterKeyEvent(onClick)} onClick={onClick} tabIndex={0}>
+    <Text
+      _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }}
+      fontSize={fontSize}
+      textStyle={textStyle}
+    >
+      {children}
+    </Text>
+  </Box>
+);
+
+export const MediumLink: React.FC<LinkProps> = ({ children, fontSize = '14px', ...rest }) => (
+  <Link fontSize={fontSize} {...rest}>
     {children}
-  </ConnectLink>
+  </Link>
 );

packages/connect/src/react/components/screen/index.tsx → packages/app/src/components/screen/index.tsx

@@ -4,4 +4,6 @@ export * from './screen-body';
 export * from './screen-footer';
 export * from './screen-header';
 export * from './screen-loader';
-export * from '../powered-by';
+export * from './powered-by';
+export * from '../typography';
+export * from './spacing';

packages/connect/src/react/components/powered-by.tsx → packages/app/src/components/screen/powered-by.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Flex, PseudoBox, Box } from '@blockstack/ui';
-import { BlockstackMini } from './vector';
-import { buildEnterKeyEvent } from './link';
+import { BlockstackMini } from '../vector';
+import { buildEnterKeyEvent } from '../link';
 
 const onClick = () => {
   typeof window !== 'undefined' && window.open('https://blockstack.org', '_blank');

packages/connect/src/react/components/screen/screen-actions.tsx → packages/app/src/components/screen/screen-actions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Flex, FlexProps } from '@blockstack/ui';
-import { PX } from '../../common';
+import { PX } from './spacing';
 
 export const ScreenActions = (props: FlexProps) => <Flex px={PX} {...props} />;

packages/connect/src/react/components/screen/screen-body.tsx → packages/app/src/components/screen/screen-body.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Flex, FlexProps } from '@blockstack/ui';
 import { Body, Pretitle, Title } from '../typography';
-import { PX } from '../../common';
+import { PX } from './spacing';
 
 export interface ScreenBodyProps extends FlexProps {
   pretitle?: string | React.ElementType;

packages/connect/src/react/components/screen/screen-footer.tsx → packages/app/src/components/screen/screen-footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Flex, BoxProps } from '@blockstack/ui';
-import { PX } from '../../common';
+import { PX } from './spacing';
 
 type ScreenFooterProps = BoxProps;