cleanup, better local testing

2026-04-29 09:55:41 +08:00 · 2020-01-14 09:47:50 -06:00
parent 149653bb73
commit d7ad306934
43 changed files with 14450 additions and 337 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ dist
 test
 pages
 .next
+test-app/node_modules
--- a/.npmignore
+++ b/.npmignore
@@ -0,0 +1,13 @@
+.idea*.log
+.DS_Store
+node_modules
+.rts2_cache_cjs
+.rts2_cache_esm
+.rts2_cache_umd
+.rts2_cache_system
+.idea
+test
+pages
+.next
+test-app
+.circleci
--- a/README.md
+++ b/README.md
@@ -4,25 +4,25 @@ A library for building excellent user experiences with Blockstack.

 ## Installation

-~~~bash
+```bash
 yarn add @blockstack/connect
-~~~
+```

 ## API Methods

 ### `authenticate`

-~~~javascript
-import { authenticate } from '@blockstack/connect'
+```javascript
+import { authenticate } from '@blockstack/connect';

 authenticate({
  redirectTo,
  manifestPath,
  finished,
  vaultUrl,
-  sendToSignIn
-})
-~~~
+  sendToSignIn,
+});
+```

 Call this method to redirect the user to authentication. It will first check for whether the user has the Blockstack extension installed. If not, it'll send them to the hosted version. The authentication flow opens a popup in the center of the screen.

@@ -32,4 +32,8 @@ Call this method to redirect the user to authentication. It will first check for
 - `vaultUrl`: The URL you'd like to use for authentication. Only necessary when developing the authentication app.
 - `sendToSignIn`: defaults to `false`. Whether the user should go straight to the 'sign in' flow.
 - `appDetails`: an optional object which includes `appName: string` and `appIcon: string`. This will speed up the process of loading your app's information during onboarding.
- `userSession`: Optionally, pass a `UserSession` instance to use for authentication. If it's not passed, `@blockstack/connect` will create one for you.
+- `userSession`: Optionally, pass a `UserSession` instance to use for authentication. If it's not passed, `@blockstack/connect` will create one for you.
+
+### Local Development
+
+There is a test app located in `/test-app`. `cd test-app && yarn && yarn start` to run a local react app with `fast-refresh`.
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test",
-    "lint": "eslint --ext .ts ./src -f unix",
+    "lint": "eslint --ext .ts,.tsx ./src/ -f unix",
+    "lint:fix": "eslint --ext .ts,.tsx ./src/ -f unix --fix",
    "prepublishOnly": "yarn build",
    "typecheck": "tsc --noEmit"
  },
@@ -20,29 +21,24 @@
    "blockstack": "^19",
    "styled-components": "^4.4"
  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint"
-    }
-  },
  "prettier": "@blockstack/prettier-config",
  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@blockstack/prettier-config": "^0.0.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.0",
+    "@blockstack/prettier-config": "^0.0.5",
    "@types/jest": "^24.0.25",
-    "@typescript-eslint/eslint-plugin": "^2.15.0",
-    "@typescript-eslint/parser": "^2.15.0",
+    "@typescript-eslint/eslint-plugin": "^2.16.0",
+    "@typescript-eslint/parser": "^2.16.0",
    "blockstack": "^19.3.0",
    "bundlesize": "^0.18.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
-    "husky": "^4.0.1",
+    "husky": "^4.0.7",
    "prettier": "^1.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
-    "tsdx": "^0.12.1",
+    "tsdx": "^0.12.3",
    "tslib": "^1.10.0",
    "typescript": "^3.7.4"
  },
@@ -50,9 +46,9 @@
    "access": "public"
  },
  "dependencies": {
-    "@blockstack/ui": "^1.0.0-alpha.22",
+    "@blockstack/ui": "^1.0.0-alpha.23",
    "mdi-react": "^6.5.0",
-    "styled-components": "^4.4.1",
+    "styled-components": "^5.0.0",
    "use-events": "^1.4.1"
  },
  "bundlesize": [
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -33,10 +33,7 @@ export const authenticate = async ({
  appDetails,
 }: AuthOptions) => {
  if (!userSession) {
-    const appConfig = new AppConfig(
-      ['store_write', 'publish_data'],
-      document.location.href
-    );
+    const appConfig = new AppConfig(['store_write', 'publish_data'], document.location.href);
    // eslint-disable-next-line no-param-reassign
    userSession = new UserSession({ appConfig });
  }
@@ -80,13 +77,7 @@ interface ListenerParams {
  userSession: UserSession;
 }

-const setupListener = ({
-  popup,
-  authRequest,
-  finished,
-  dataVaultURL,
-  userSession,
-}: ListenerParams) => {
+const setupListener = ({ popup, authRequest, finished, dataVaultURL, userSession }: ListenerParams) => {
  const interval = setInterval(() => {
    if (popup) {
      try {
@@ -97,9 +88,7 @@ const setupListener = ({
          dataVaultURL.origin
        );
      } catch (error) {
-        console.warn(
-          '[Blockstack] Unable to send ping to authentication service'
-        );
+        console.warn('[Blockstack] Unable to send ping to authentication service');
        clearInterval(interval);
      }
    }
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -9,23 +9,12 @@ const defaultHeight = 584;
 const defaultWidth = 440;
 const defaultTitle = 'Continue with Data Vault';

-export const popupCenter = ({
-  url,
-  title = defaultTitle,
-  w = defaultWidth,
-  h = defaultHeight,
-}: PopupOptions) => {
+export const popupCenter = ({ url, title = defaultTitle, w = defaultWidth, h = defaultHeight }: PopupOptions) => {
  const dualScreenLeft = window.screenLeft || window.screenX;
  const dualScreenTop = window.screenTop || window.screenY;

-  const width =
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    window.screen.width;
-  const height =
-    window.innerHeight ||
-    document.documentElement.clientHeight ||
-    window.screen.height;
+  const width = window.innerWidth || document.documentElement.clientWidth || window.screen.width;
+  const height = window.innerHeight || document.documentElement.clientHeight || window.screen.height;

  const systemZoom = width / window.screen.availWidth;
  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
--- a/src/react/components/checklist/index.tsx
+++ b/src/react/components/checklist/index.tsx
@@ -1,36 +1,43 @@
 import React from 'react';
-import { Flex, Box, Text, Stack } from '@blockstack/ui';
-import CheckIcon from 'mdi-react/CheckIcon';
-
-/**
- * This renders a list of items with a checkmark to their left
- */
-
-const Checkmark: React.FC = props => (
-  <Box transform="translateY(-2px)" color="ink.300" mr={2} pt={1} {...props}>
-    <CheckIcon size={18} />
-  </Box>
-);
+import { Flex, Box, Text } from '@blockstack/ui';

 const Item: React.FC = ({ children }) => (
-  <Text fontSize="14px" color="ink.600">
+  <Text fontSize="14px" color="ink.900">
    {children}
  </Text>
 );
-
+type Item = {
+  icon: any;
+  text: any;
+};
 interface CheckListProps {
-  items: string[];
+  items: Item[];
 }

-const CheckList: React.FC<CheckListProps> = ({ items, ...rest }) => (
-  <Stack spacing={3} {...rest}>
-    {items.map((text, key) => (
-      <Flex align="flex-start" textAlign="left" key={key}>
-        <Checkmark />
-        <Item>{text}</Item>
-      </Flex>
-    ))}
-  </Stack>
+const CheckList: React.FC<CheckListProps> = ({ items }) => (
+  <>
+    {items.map((item, key) => {
+      const Icon = item.icon;
+      const { text } = item;
+      return (
+        <Flex
+          px={5}
+          pb={3}
+          pt={key === 0 ? 0 : 3}
+          borderBottom={items.length - 1 !== key ? '1px solid' : 'unset'}
+          borderColor="inherit"
+          align="center"
+          textAlign="left"
+          key={key}
+        >
+          <Box color="blue" pr={3}>
+            <Icon />
+          </Box>
+          <Item>{text}</Item>
+        </Flex>
+      );
+    })}
+  </>
 );

 export { CheckList };
--- a/src/react/components/connect/context.tsx
+++ b/src/react/components/connect/context.tsx
@@ -32,10 +32,7 @@ const initialState: State = {
  },
 };

-const connectReducer = (
-  state: State,
-  { type, payload }: { type: string; payload?: any }
-) => {
+const connectReducer = (state: State, { type, payload }: { type: string; payload?: any }) => {
  switch (type) {
    case States.MODAL_OPEN: {
      return { ...state, isOpen: true };
@@ -82,28 +79,13 @@ const ConnectContext = createContext<State>(initialState);

 const ConnectDispatchContext = createContext<Dispatch | undefined>(undefined);

-const ConnectProvider = ({
-  authOptions,
-  children,
-}: {
-  authOptions: AuthOptions;
-  children: any;
-}) => {
+const ConnectProvider = ({ authOptions, children }: { authOptions: AuthOptions; children: any }) => {
  const [state, dispatch] = useReducer(connectReducer, initialState);
  return (
    <ConnectContext.Provider value={{ ...state, authOptions }}>
-      <ConnectDispatchContext.Provider value={dispatch}>
-        {children}
-      </ConnectDispatchContext.Provider>
+      <ConnectDispatchContext.Provider value={dispatch}>{children}</ConnectDispatchContext.Provider>
    </ConnectContext.Provider>
  );
 };

-export {
-  initialState,
-  connectReducer,
-  ConnectContext,
-  ConnectDispatchContext,
-  ConnectProvider,
-  States,
-};
+export { initialState, connectReducer, ConnectContext, ConnectDispatchContext, ConnectProvider, States };
--- a/src/react/components/connect/index.tsx
+++ b/src/react/components/connect/index.tsx
@@ -22,13 +22,7 @@ import { AuthOptions } from '../../../auth';
 *
 * <Connect authOptions={authOptions} />
 */
-const Connect = ({
-  authOptions,
-  children
-}: {
-  authOptions: AuthOptions;
-  children: any;
-}) => {
+const Connect = ({ authOptions, children }: { authOptions: AuthOptions; children: any }) => {
  return (
    <ConnectProvider authOptions={authOptions}>
      <Modal />
--- a/src/react/components/image/index.tsx
+++ b/src/react/components/image/index.tsx
@@ -12,7 +12,7 @@ const Image: React.FC<ImageProps> = ({ ...props }) => {
    <img
      style={{
        maxWidth: '100%',
-        display: 'block'
+        display: 'block',
      }}
      {...props}
    />
--- a/src/react/components/link/index.tsx
+++ b/src/react/components/link/index.tsx
@@ -7,10 +7,7 @@ interface LinkProps extends BoxProps {

 const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
  <Box {...rest}>
-    <Text
-      _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }}
-      fontWeight="medium"
-    >
+    <Text color="blue" _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} fontWeight="medium">
      {children}
    </Text>
  </Box>
--- a/src/react/components/logo/index.tsx
+++ b/src/react/components/logo/index.tsx
@@ -3,14 +3,7 @@ import { Box } from '@blockstack/ui';

 const Logo = (props: any) => {
  return (
-    <Box
-      as="svg"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
+    <Box as="svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
      <rect width="24" height="24" rx="12" fill="#E3E5FF" />
      <path
        d="M15.2727 10.0179H14.8636V8.8125C14.8636 8.06658 14.5619 7.35121 14.0249 6.82376C13.4879 6.29632 12.7595 6 12 6C11.2405 6 10.5121 6.29632 9.9751 6.82376C9.43807 7.35121 9.13636 8.06658 9.13636 8.8125V10.0179H8.72727C8.40189 10.0182 8.08994 10.1453 7.85985 10.3713C7.62977 10.5973 7.50036 10.9036 7.5 11.2232V16.0446C7.50036 16.3642 7.62977 16.6706 7.85985 16.8966C8.08994 17.1225 8.40189 17.2497 8.72727 17.25H15.2727C15.5981 17.2497 15.9101 17.1225 16.1401 16.8966C16.3702 16.6706 16.4996 16.3642 16.5 16.0446V11.2232C16.4996 10.9036 16.3702 10.5973 16.1401 10.3713C15.9101 10.1453 15.5981 10.0182 15.2727 10.0179ZM9.95455 8.8125C9.95455 8.2797 10.17 7.76872 10.5536 7.39197C10.9372 7.01523 11.4575 6.80357 12 6.80357C12.5425 6.80357 13.0628 7.01523 13.4464 7.39197C13.83 7.76872 14.0455 8.2797 14.0455 8.8125V10.0179H9.95455V8.8125ZM12.4091 13.7231V14.6384C12.4091 14.745 12.366 14.8471 12.2893 14.9225C12.2126 14.9978 12.1085 15.0402 12 15.0402C11.8915 15.0402 11.7874 14.9978 11.7107 14.9225C11.634 14.8471 11.5909 14.745 11.5909 14.6384V13.7231C11.4349 13.6346 11.313 13.4981 11.2441 13.3347C11.1752 13.1712 11.1631 12.99 11.2097 12.8192C11.2563 12.6483 11.359 12.4973 11.5019 12.3896C11.6448 12.282 11.8199 12.2236 12 12.2236C12.1801 12.2236 12.3552 12.282 12.4981 12.3896C12.641 12.4973 12.7437 12.6483 12.7903 12.8192C12.8369 12.99 12.8248 13.1712 12.7559 13.3347C12.687 13.4981 12.5651 13.6346 12.4091 13.7231Z"
--- a/src/react/components/modal/index.tsx
+++ b/src/react/components/modal/index.tsx
@@ -9,6 +9,7 @@ import {
  Text,
 } from '@blockstack/ui';
 import CloseIcon from 'mdi-react/CloseIcon';
+import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import { useHover } from 'use-events';
 import { Logo } from '../logo';
 import { Intro } from '../screens/intro';
@@ -37,12 +38,13 @@ const HeaderTitle: React.FC<HeaderTitleProps> = ({
 interface IModalHeader {
  title: string;
  close?: boolean;
+  back?: any;
  hideIcon?: boolean;
 }

-const ModalHeaderCloseButtom = (props: any) => {
+const ModalHeaderIconButton = (props: any) => {
  const [hover, bind] = useHover();
-  const { doCloseDataVault } = useConnect();
+  const Icon = props.icon;

  return (
    <Box
@@ -50,36 +52,49 @@ const ModalHeaderCloseButtom = (props: any) => {
      opacity={hover ? 1 : 0.5}
      {...bind}
      {...props}
-      onClick={doCloseDataVault}
    >
-      <CloseIcon size={20} />
+      <Icon size={20} />
    </Box>
  );
 };

-const ModalHeader = ({ title, hideIcon, close, ...rest }: IModalHeader) => {
-  // const { icon } = useAppDetails();
+const ModalHeader = ({
+  title,
+  back,
+  hideIcon,
+  close,
+  ...rest
+}: IModalHeader) => {
+  const { doCloseDataVault, doChangeScreen } = useConnect();

  return (
    <Flex
      p={[4, 5]}
-      borderBottom="1px solid"
-      borderBottomColor="inherit"
      borderRadius={['unset', '6px 6px 0 0']}
      bg="white"
      align="center"
      justify="space-between"
+      position="relative"
+      borderBottom={back ? '1px solid' : 'unset'}
+      borderBottomColor="inherit"
      {...rest}
    >
-      <Flex align="center">
-        {/*{icon ? (*/}
-        {/*  <Box pr={1} pl={2} color="ink.300">*/}
-        {/*    <ChevronRightIcon size={20} />*/}
-        {/*  </Box>*/}
-        {/*) : null}*/}
+      {back ? (
+        <ModalHeaderIconButton
+          onClick={() => doChangeScreen(back)}
+          icon={ChevronLeftIcon}
+        />
+      ) : null}
+      <Flex
+        align="center"
+        mx={back ? 'auto' : 'unset'}
+        transform={back ? 'translateX(-15px)' : 'unset'}
+      >
        <HeaderTitle hideIcon={hideIcon} title={title} />
      </Flex>
-      {close ? <ModalHeaderCloseButtom onClick={close} /> : null}
+      {close ? (
+        <ModalHeaderIconButton icon={CloseIcon} onClick={doCloseDataVault} />
+      ) : null}
    </Flex>
  );
 };
@@ -112,6 +127,11 @@ const Modal = () => {
        headerComponent={
          <ModalHeader
            close
+            back={
+              screen === States.SCREENS_HOW_IT_WORKS
+                ? States.SCREENS_INTRO
+                : undefined
+            }
            title={screen === States.SCREENS_SIGN_IN ? 'Sign In' : 'Data Vault'}
          />
        }
--- a/src/react/components/screen/how-it-works/index.tsx
+++ b/src/react/components/screen/how-it-works/index.tsx
@@ -7,25 +7,25 @@ import { useConnect } from '../../../hooks/useConnect';

 const howDataVaultWorks = (appName: string) => [
  {
-    body: `Usually, apps store your data on their servers for their own use. Data Vault isolates your encrypted data from use by others so that apps like ${appName} (and even Data Vault) can’t use it.`
+    body: `Usually, apps store your data on their servers for their own use. Data Vault isolates your encrypted data from use by others so that apps like ${appName} (and even Data Vault) can’t use it.`,
  },
  {
    icon: <EncryptionIcon />,
    title: 'Encryption',
    body:
-      'Data Vault’s encryption locks your app data into codes that only you can open using a Secret Key that you control. This lock and key keeps everything you do private.'
+      'Data Vault’s encryption locks your app data into codes that only you can open using a Secret Key that you control. This lock and key keeps everything you do private.',
  },
  {
    icon: <BlockchainIcon />,
    title: 'Blockchain technology',
    body:
-      'The Secret Key to your Data Vault is made using a blockchain. The blockchain ensures that only you have the key and that no one can take it from you. Your data is private, for your own use, and safe from misuse by app creators.'
+      'The Secret Key to your Data Vault is made using a blockchain. The blockchain ensures that only you have the key and that no one can take it from you. Your data is private, for your own use, and safe from misuse by app creators.',
  },
  {
    icon: <AppsIcon />,
    title: 'Over 300 apps use Data Vault',
-    body: 'Data Vault is free to use with over 300 apps.'
-  }
+    body: 'Data Vault is free to use with over 300 apps.',
+  },
 ];

 const HowItWorks: React.FC = () => {
@@ -37,10 +37,9 @@ const HowItWorks: React.FC = () => {
      <ScreenTemplate
        pretitle="How it works"
        title={`Data Vault keeps what you do in ${name} private`}
-        noMinHeight
        body={howDataVaultWorks(name).map(
          ({ title, body, icon: Icon }, key) => (
-            <Box key={key}>
+            <Box px={5} key={key}>
              <Stack spacing={3}>
                {Icon && (
                  <Box size="24px" color="blue" borderRadius="8px">
@@ -48,7 +47,7 @@ const HowItWorks: React.FC = () => {
                  </Box>
                )}
                {title && <Text fontWeight="semibold">{title}</Text>}
-                <Text>{body}</Text>
+                <Text pb={2}>{body}</Text>
              </Stack>
            </Box>
          )
@@ -56,8 +55,9 @@ const HowItWorks: React.FC = () => {
        action={{
          label: 'Create your Data Vault',
          onClick: () => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
            authenticate(authOptions);
-          }
+          },
        }}
      />
    </>
--- a/src/react/components/screen/index.tsx
+++ b/src/react/components/screen/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Flex, Box, Spinner, Stack, BoxProps } from '@blockstack/ui';
-import { Title, Pretitle, Body, BackLink } from '../typography';
+import { Title, Pretitle, Body } from '../typography';
 import { Link } from '../link';

 const Footer = ({ content }: { content: any }) =>
@@ -49,6 +49,7 @@ interface ScreenAction {
  href?: string;
  disabled?: boolean;
  variant?: string;
+  isLoading?: boolean;
 }

 interface IScreenTemplate {
@@ -67,7 +68,7 @@ interface IScreenTemplate {
 const MainContent = ({
  pretitle,
  title,
-  body
+  body,
 }: {
  pretitle: any;
  title: any;
@@ -95,7 +96,11 @@ const Actions = ({ action }: { action?: ScreenAction | ScreenAction[] }) =>
                {a.label}
              </Link>
            ) : (
-              <Button onClick={a.onClick} isDisabled={a.disabled}>
+              <Button
+                onClick={a.onClick}
+                isDisabled={a.disabled}
+                isLoading={a.isLoading}
+              >
                {a.label}
              </Button>
            )}
@@ -103,11 +108,12 @@ const Actions = ({ action }: { action?: ScreenAction | ScreenAction[] }) =>
        ))}
      </Flex>
    ) : (
-      <Box py={[4, 6]}>
+      <Box pt={5}>
        <Button
          width="100%"
          onClick={action.onClick}
          isDisabled={action.disabled}
+          isLoading={action.isLoading}
        >
          {action.label}
        </Button>
@@ -122,7 +128,6 @@ const ScreenTemplate = ({
  body,
  action,
  after,
-  back,
  footer,
  isLoading,
  noMinHeight = false,
@@ -139,12 +144,15 @@ const ScreenTemplate = ({
        style={{ pointerEvents: isLoading ? 'none' : 'unset' }}
        {...rest}
      >
-        <BackLink onClick={back} />
        {before ? before : null}
        <MainContent pretitle={pretitle} title={title} body={body} />
-        <Actions action={action} />
+        <Box px={5}>
+          <Actions action={action} />
+        </Box>
        {after ? after : null}
-        <Footer content={footer} />
+        <Box px={5} pb={5}>
+          <Footer content={footer} />
+        </Box>
      </Stack>
    </>
  );
--- a/src/react/components/screen/sign-in/index.tsx
+++ b/src/react/components/screen/sign-in/index.tsx
@@ -24,6 +24,7 @@ const ContinueWithDataVault: React.FC = props => {
      bg={hovered ? 'rgba(0,0,0,0.02)' : 'white'}
      transform={hovered ? 'translateY(-2px)' : 'none'}
      onClick={() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
        authenticate({ ...authOptions, sendToSignIn: true });
      }}
      {...bind}
--- a/src/react/components/screens/intro/index.tsx
+++ b/src/react/components/screens/intro/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Box, Stack } from '@blockstack/ui';
+import React, { useState } from 'react';
+import { Box, BoxProps, Stack } from '@blockstack/ui';
 import { ScreenTemplate } from '../../screen';
 import { CheckList } from '../../checklist';
 import { Link } from '../../link';
@@ -8,58 +8,70 @@ import { authenticate } from '../../../../auth';
 import { useConnect } from '../../../hooks/useConnect';
 import { Logo } from '../../logo';
 import { useAppDetails } from '../../../hooks/useAppDetails';
+import { AppsIcon, EncryptionIcon } from '../../vector';

 const AppElement = ({
  name,
  icon,
  ...rest
-}: {
+}: BoxProps & {
  name: string;
  icon: string;
 }) => (
-  <Box mx="auto" size="78px" position="relative" {...rest}>
+  <Box mx="auto" size="70px" position="relative" {...rest}>
    <Box position="absolute" top="-4px" right="-4px">
      <Logo />
    </Box>
-    <AppIcon size="78px" src={icon} alt={name} borderRadius="0" />
+    <AppIcon size="64px" src={icon} alt={name} borderRadius="0" />
  </Box>
 );

 const Intro = () => {
  const { doGoToHowItWorksScreen, authOptions } = useConnect();
  const { name, icon } = useAppDetails();
+  const [loading, setLoading] = useState(false);
  return (
    <>
      <ScreenTemplate
-        before={<AppElement name={name} icon={icon} />}
+        before={<AppElement mt={5} name={name} icon={icon} />}
        textAlign="center"
        noMinHeight
        title={`Use ${name} privately and securely with Data Vault`}
        body={[
-          `${name} will use your Data Vault to store your data privately, where no one but you can see it.`,
-          <Box mx="auto" width="128px" height="1px" bg="#E5E5EC" />,
+          'Create your Data Vault to continue.',
+          <Box mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
          <CheckList
            items={[
-              `Keep everything you do in ${name} private with encryption and blockchain`,
-              'It’s free and takes just 2 minutes to create'
+              {
+                icon: EncryptionIcon,
+                text: `Keep everything you do in ${name} private with encryption and blockchain`,
+              },
+              {
+                icon: AppsIcon,
+                text: 'Data Vault is easy to set up and free to use with over 300 apps',
+              },
            ]}
-          />
+          />,
        ]}
        action={{
          label: 'Create Data Vault',
+          isLoading: loading,
          onClick: () => {
+            setLoading(true);
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
            authenticate(authOptions);
-          }
+          },
        }}
        footer={
          <>
            <Stack spacing={4} isInline>
              <Link
                onClick={() => {
+                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
                  authenticate({ ...authOptions, sendToSignIn: true });
                }}
              >
-                Sign in instead
+                Sign in to Data Vault
              </Link>
              <Link
                onClick={() => {
@@ -69,7 +81,6 @@ const Intro = () => {
                How Data Vault works
              </Link>
            </Stack>
-            <Link>Help</Link>
          </>
        }
      />
--- a/src/react/components/typography/index.tsx
+++ b/src/react/components/typography/index.tsx
@@ -4,6 +4,7 @@ import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';

 const Title: React.FC = props => (
  <Text
+    px={5}
    width="100%"
    fontWeight="medium"
    fontSize={['20px', '24px']}
@@ -14,13 +15,15 @@ const Title: React.FC = props => (

 const Pretitle: React.FC = props => (
  <Text
+    px={5}
+    pt={5}
    width="100%"
    fontWeight="medium"
    fontSize={['11px']}
    lineHeight={['20px']}
    color="ink.600"
    style={{
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
    }}
    {...props}
  />
--- a/src/react/components/vector/index.tsx
+++ b/src/react/components/vector/index.tsx
@@ -2,26 +2,13 @@ import React from 'react';

 const AppsIcon: React.FC = props => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-    <rect
-      y="1.02686"
-      width="10.0435"
-      height="9.88235"
-      rx="1.75"
-      fill="currentColor"
-    />
+    <rect y="1.02686" width="10.0435" height="9.88235" rx="1.75" fill="currentColor" />
    <path
      opacity="0.8"
      d="M13.5697 10.9091H22.2999C23.0625 10.9091 23.5444 10.0897 23.1739 9.42317L18.8088 1.57201C18.4277 0.886573 17.4419 0.886572 17.0608 1.572L12.6957 9.42316C12.3251 10.0897 12.8071 10.9091 13.5697 10.9091Z"
      fill="currentColor"
    />
-    <rect
-      opacity="0.64"
-      y="13.7327"
-      width="10.4348"
-      height="10.2674"
-      rx="5.13369"
-      fill="currentColor"
-    />
+    <rect opacity="0.64" y="13.7327" width="10.4348" height="10.2674" rx="5.13369" fill="currentColor" />
    <path
      opacity="0.4"
      fillRule="evenodd"
@@ -45,15 +32,7 @@ const BlockchainIcon: React.FC<{ color?: string }> = props => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <rect width="12" height="12" rx="2.25" fill={color} />
-      <rect
-        opacity="0.6"
-        x="12"
-        y="12"
-        width="12"
-        height="12"
-        rx="2.25"
-        fill={color}
-      />
+      <rect opacity="0.6" x="12" y="12" width="12" height="12" rx="2.25" fill={color} />
      <rect
        opacity="0.4"
        x="14.75"
--- a/src/react/hooks/useConnect.ts
+++ b/src/react/hooks/useConnect.ts
@@ -1,10 +1,6 @@
 import { useContext } from 'react';
 import { authenticate, AuthOptions } from '../../auth';
-import {
-  ConnectContext,
-  ConnectDispatchContext,
-  States,
-} from '../components/connect/context';
+import { ConnectContext, ConnectDispatchContext, States } from '../components/connect/context';

 const useConnectDispatch = () => {
  const dispatch = useContext(ConnectDispatchContext);
@@ -18,19 +14,16 @@ const useConnect = () => {
  const { isOpen, screen, authOptions } = useContext(ConnectContext);
  const dispatch = useConnectDispatch();

-  const doUpdateAuthOptions = (payload: Partial<AuthOptions>) =>
-    dispatch({ type: States.UPDATE_AUTH_OPTIONS, payload });
+  const doUpdateAuthOptions = (payload: Partial<AuthOptions>) => {
+    return dispatch({ type: States.UPDATE_AUTH_OPTIONS, payload });
+  };

  const doChangeScreen = (newScreen: string) => dispatch({ type: newScreen });
  const doGoToIntroScreen = () => doChangeScreen(States.SCREENS_INTRO);
-  const doGoToHowItWorksScreen = () =>
-    doChangeScreen(States.SCREENS_HOW_IT_WORKS);
+  const doGoToHowItWorksScreen = () => doChangeScreen(States.SCREENS_HOW_IT_WORKS);
  const doGoToSignInScreen = () => doChangeScreen(States.SCREENS_SIGN_IN);

-  const doOpenDataVault = (
-    signIn?: boolean,
-    authOptions?: Partial<AuthOptions>
-  ) => {
+  const doOpenDataVault = (signIn?: boolean, authOptions?: Partial<AuthOptions>) => {
    signIn && doGoToSignInScreen();
    authOptions && doUpdateAuthOptions(authOptions);
    dispatch({ type: States.MODAL_OPEN });
--- a/test-app/.gitignore
+++ b/test-app/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/test-app/README.md
+++ b/test-app/README.md
@@ -0,0 +1,44 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
--- a/test-app/config-overrides.js
+++ b/test-app/config-overrides.js
@@ -0,0 +1,22 @@
+const {
+  override,
+  babelInclude,
+  removeModuleScopePlugin,
+  addWebpackAlias,
+} = require('customize-cra');
+const { addReactRefresh } = require('customize-cra-react-refresh');
+const path = require('path');
+
+/* config-overrides.js */
+module.exports = override(
+  removeModuleScopePlugin(),
+  addWebpackAlias({
+    react: path.resolve('./node_modules', 'react'),
+    'react-dom': path.resolve('./node_modules', 'react-dom'),
+  }),
+  babelInclude([
+    path.resolve('src'), // make sure you link your own source
+    path.resolve('../src'),
+  ]),
+  addReactRefresh({ disableRefreshCheck: true })
+);
--- a/test-app/package.json
+++ b/test-app/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "test-app",
+  "version": "0.1.0",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@blockstack/prettier-config": "^0.0.5",
+    "@blockstack/ui": "^1.0.0-alpha.23",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
+    "blockstack": "^19.3.0",
+    "bundlesize": "^0.18.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "husky": "^4.0.1",
+    "mdi-react": "^6.5.0",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "styled-components": "^5.0.0",
+    "tsdx": "^0.12.1",
+    "tslib": "^1.10.0",
+    "typescript": "^3.7.4",
+    "use-events": "^1.4.1"
+  },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "customize-cra-react-refresh": "^1.0.1",
+    "react-app-rewired": "^2.1.5"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "private": true,
+  "scripts": {
+    "build": "react-app-rewired build",
+    "eject": "react-scripts eject",
+    "start": "react-app-rewired start",
+    "test": "react-app-rewired test --env=jsdom"
+  }
+}
--- a/test-app/public/favicon.ico
+++ b/test-app/public/favicon.ico
--- a/test-app/public/index.html
+++ b/test-app/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/test-app/public/logo192.png
+++ b/test-app/public/logo192.png
--- a/test-app/public/logo512.png
+++ b/test-app/public/logo512.png
--- a/test-app/public/manifest.json
+++ b/test-app/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/test-app/public/messenger-app-icon.png
+++ b/test-app/public/messenger-app-icon.png
--- a/test-app/public/robots.txt
+++ b/test-app/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
--- a/test-app/src/App.css
+++ b/test-app/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/test-app/src/App.test.tsx
+++ b/test-app/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/test-app/src/App.tsx
+++ b/test-app/src/App.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { Connect } from '../../src/react/components/connect';
+import { useConnect } from '../../src/react';
+import { Button, ThemeProvider, theme } from '@blockstack/ui';
+
+const icon = `/messenger-app-icon.png`;
+const authOptions = {
+  manifestPath: '/static/manifest.json',
+  redirectTo: '/',
+  finished: () => {
+    console.log('finish');
+  },
+  vaultUrl: 'http://localhost:8080',
+  appDetails: {
+    name: 'Testing App',
+    icon,
+  },
+};
+const DataVaultButton: React.FC = () => {
+  const { doOpenDataVault } = useConnect();
+
+  return <Button onClick={() => doOpenDataVault()}>Get Started</Button>;
+};
+const App: React.FC = () => {
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <Connect authOptions={authOptions}>
+          <div
+            style={{
+              width: '100vw',
+              height: '100vh',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            className="App"
+          >
+            <DataVaultButton />
+          </div>
+        </Connect>
+      </ThemeProvider>
+    </>
+  );
+};
+
+export default App;
--- a/test-app/src/index.css
+++ b/test-app/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/test-app/src/index.tsx
+++ b/test-app/src/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
--- a/test-app/src/logo.svg
+++ b/test-app/src/logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>
--- a/test-app/src/react-app-env.d.ts
+++ b/test-app/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/test-app/src/serviceWorker.ts
+++ b/test-app/src/serviceWorker.ts
@@ -0,0 +1,145 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/test-app/src/setupTests.ts
+++ b/test-app/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
--- a/test-app/tsconfig.json
+++ b/test-app/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/test-app/yarn.lock
+++ b/test-app/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,6 +9,13 @@
  dependencies:
    "@babel/highlight" "^7.0.0"

+"@babel/code-frame@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.0.tgz#8c98d4ac29d6f80f28127b1bc50970a72086c5ac"
+  integrity sha512-AN2IR/wCUYsM+PdErq6Bp3RFTXl8W0p9Nmymm7zkpsCmh+r/YYcckaCGpU8Q/mEKmST19kkGRaG42A/jxOWwBA==
+  dependencies:
+    "@babel/highlight" "^7.8.0"
+
 "@babel/core@^7.1.0", "@babel/core@^7.4.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab"
@@ -39,6 +46,16 @@
    lodash "^4.17.13"
    source-map "^0.5.0"

+"@babel/generator@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.0.tgz#40a1244677be58ffdc5cd01e22634cd1d5b29edf"
+  integrity sha512-2Lp2e02CV2C7j/H4n4D9YvsvdhPVVg9GDIamr6Tu4tU35mL3mzOrzl1lZ8ZJtysfZXh+y+AGORc2rPS7yHxBUg==
+  dependencies:
+    "@babel/types" "^7.8.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
@@ -109,6 +126,15 @@
    "@babel/template" "^7.7.4"
    "@babel/types" "^7.7.4"

+"@babel/helper-function-name@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.0.tgz#dde5cf0d6b15c21817a67dd66fe7350348e023bf"
+  integrity sha512-x9psucuU0Xalw+0Vpr2FYJMLB7/KnPSLZhlkUyOGbYAWRDfmtZBrguYpJYiaNCRV7vGkYjO/gF6/J6yMvdWTDw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.0"
+    "@babel/template" "^7.8.0"
+    "@babel/types" "^7.8.0"
+
 "@babel/helper-get-function-arity@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -116,6 +142,13 @@
  dependencies:
    "@babel/types" "^7.7.4"

+"@babel/helper-get-function-arity@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.0.tgz#90977f61d76d2225d1ae0208def7df22ea92792e"
+  integrity sha512-eUP5grliToMapQiTaYS2AAO/WwaCG7cuJztR1v/a1aPzUzUeGt+AaI9OvLATc/AfFkF8SLJ10d5ugGt/AQ9d6w==
+  dependencies:
+    "@babel/types" "^7.8.0"
+
 "@babel/helper-hoist-variables@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
@@ -161,6 +194,11 @@
  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==

+"@babel/helper-plugin-utils@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.0.tgz#59ec882d43c21c544ccb51decaecb306b34a8231"
+  integrity sha512-+hAlRGdf8fHQAyNnDBqTHQhwdLURLdrCROoWaEQYiQhk2sV9Rhs+GoFZZfMJExTq9HG8o2NX3uN2G90bFtmFdA==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -204,6 +242,13 @@
  dependencies:
    "@babel/types" "^7.7.4"

+"@babel/helper-split-export-declaration@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.0.tgz#ed10cb03b07454c0d40735fad4e9c9711e739588"
+  integrity sha512-YhYFhH4T6DlbT6CPtVgLfC1Jp2gbCawU/ml7WJvUpBg01bCrXSzTYMZZXbbIGjq/kHmK8YUATxTppcRGzj31pA==
+  dependencies:
+    "@babel/types" "^7.8.0"
+
 "@babel/helper-wrap-function@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -232,11 +277,25 @@
    esutils "^2.0.2"
    js-tokens "^4.0.0"

+"@babel/highlight@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.0.tgz#4cc003dc10359919e2e3a1d9459150942913dd1a"
+  integrity sha512-OsdTJbHlPtIk2mmtwXItYrdmalJ8T0zpVzNAbKSkHshuywj7zb29Y09McV/jQsQunc/nEyHiPV2oy9llYMLqxw==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
  integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==

+"@babel/parser@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.0.tgz#54682775f1fb25dd29a93a02315aab29a6a292bb"
+  integrity sha512-VVtsnUYbd1+2A2vOVhm4P2qNXQE8L/W859GpUHfUcdhX8d3pEKThZuIr6fztocWx9HbK+00/CR0tXnhAggJ4CA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -302,6 +361,14 @@
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-syntax-optional-chaining" "^7.7.4"

+"@babel/plugin-proposal-optional-chaining@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.0.tgz#d05e4fa3c1e4ef18eaea6bc92a4b06f95eaf1df5"
+  integrity sha512-PNBHxPHE91m+LLOdGwlvyGicWfrMgiVwng5WdB3CMjd61+vn3vPw0GbgECIAUCZnyi7Jqs5htUIZRztGuV8/5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
@@ -359,6 +426,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.0.tgz#c40f4d4d6a4f5e71d2bfd949b0a7f1e1e6792fe0"
+  integrity sha512-LV1c+TTAO8Vawe3t+WXBHYWbS7endP8MSlqKPKEZOyWPEJX2akl3jfvFG828/OE7RpyoC3JXfLJDFj/jN7A8hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-top-level-await@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"
@@ -716,6 +790,15 @@
    "@babel/parser" "^7.7.4"
    "@babel/types" "^7.7.4"

+"@babel/template@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.0.tgz#a32f57ad3be89c0fa69ae87b53b4826844dc6330"
+  integrity sha512-0NNMDsY2t3ltAVVK1WHNiaePo3tXPUeJpCX4I3xSKFoEl852wJHG8mrgHVADf8Lz1y+8al9cF7cSSfzSnFSYiw==
+  dependencies:
+    "@babel/code-frame" "^7.8.0"
+    "@babel/parser" "^7.8.0"
+    "@babel/types" "^7.8.0"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -731,6 +814,21 @@
    globals "^11.1.0"
    lodash "^4.17.13"

+"@babel/traverse@^7.4.5":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.0.tgz#d85266fdcff553c10e57b672604b36383a127c1f"
+  integrity sha512-d/6sPXFLGlJHZO/zWDtgFaKyalCOHLedzxpVJn6el1cw+f2TZa7xZEszeXdOw6EUemqRFBAn106BWBvtSck9Qw==
+  dependencies:
+    "@babel/code-frame" "^7.8.0"
+    "@babel/generator" "^7.8.0"
+    "@babel/helper-function-name" "^7.8.0"
+    "@babel/helper-split-export-declaration" "^7.8.0"
+    "@babel/parser" "^7.8.0"
+    "@babel/types" "^7.8.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
@@ -740,19 +838,28 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@blockstack/prettier-config@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@blockstack/prettier-config/-/prettier-config-0.0.4.tgz#b051cd5eb66ff9ec61b0776f0eecc5a8437196d7"
-  integrity sha512-fiDOBRLpm/Sv34qx9GsNer38qyTkp+rDRs74rrVd9Nn0JZVHoV97W98o81+6E9Bd+xvnY6JV+g1gA1P60RBCYA==
+"@babel/types@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.0.tgz#1a2039a028057a2c888b668d94c98e61ea906e7f"
+  integrity sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"

-"@blockstack/ui@^1.0.0-alpha.22":
-  version "1.0.0-alpha.22"
-  resolved "https://registry.yarnpkg.com/@blockstack/ui/-/ui-1.0.0-alpha.22.tgz#2bda7162d4b46f7dd75302ab819716b2a4492536"
-  integrity sha512-2Cr3d8lWKS5m7ENRqUGns8bKwnK1DxCDmc9eOTG4+IN2su7zNzs4Eu4lVRhs86uyaF8zYYfEpCxspZuQtOpe8Q==
+"@blockstack/prettier-config@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@blockstack/prettier-config/-/prettier-config-0.0.5.tgz#871bd2a38b5bc9aabb1cefeeba6199cc64098957"
+  integrity sha512-A+wfdVwD1Sxd/D3PPJI67Evo7q2fp15hCOFLB5jmzcS1MdN8BQdFm6j51Sti8xLN4qHmuYkicbFBUluGx2h63g==
+
+"@blockstack/ui@^1.0.0-alpha.23":
+  version "1.0.0-alpha.23"
+  resolved "https://registry.yarnpkg.com/@blockstack/ui/-/ui-1.0.0-alpha.23.tgz#290ed6c21e521f72b6627da13e24a47e8c35f6db"
+  integrity sha512-xF5fUa3nLVUltawMRsPmO6gqcpluw271YJBmc6hDiH0/DPLUBi/dK8lb812HYDnPn4OB9Wy9BEp85Ypu2jRA9w==
  dependencies:
    "@styled-system/css" "5.1.4"
-    "@types/color" "^3.0.0"
-    "@types/styled-components" "^4.4.1"
+    "@types/color" "^3.0.1"
+    "@types/styled-components" "^4.4.2"
    "@types/styled-system" "^5.1.4"
    "@types/styled-system__css" "^5.0.4"
    color "3.1.2"
@@ -770,22 +877,27 @@
    exec-sh "^0.3.2"
    minimist "^1.2.0"

-"@emotion/is-prop-valid@^0.8.1":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
-  integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
+"@emotion/is-prop-valid@^0.8.3":
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
+  integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==
  dependencies:
-    "@emotion/memoize" "0.7.3"
+    "@emotion/memoize" "0.7.4"

-"@emotion/memoize@0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
-  integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
-
-"@emotion/unitless@^0.7.0":
+"@emotion/memoize@0.7.4":
  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
-  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==

 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
  version "24.9.0"
@@ -935,6 +1047,17 @@
    "@types/istanbul-reports" "^1.1.1"
    "@types/yargs" "^13.0.0"

+"@rollup/plugin-commonjs@^11.0.0":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.1.tgz#6056a6757286901cc6c1599123e6680a78cad6c2"
+  integrity sha512-SaVUoaLDg3KnIXC5IBNIspr1APTYDzk05VaYcI6qz+0XX3ZlSCwAkfAhNSOxfd5GAdcm/63Noi4TowOY9MpcDg==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.0"
+    estree-walker "^0.6.1"
+    is-reference "^1.1.2"
+    magic-string "^0.25.2"
+    resolve "^1.11.0"
+
 "@rollup/plugin-json@^4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.0.tgz#4462e83c7ad5544bef4a601a6e8450daedc4b69b"
@@ -942,6 +1065,17 @@
  dependencies:
    rollup-pluginutils "^2.5.0"

+"@rollup/plugin-node-resolve@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.1.0.tgz#0d2909f4bf606ae34d43a9bc8be06a9b0c850cf0"
+  integrity sha512-Cv7PDIvxdE40SWilY5WgZpqfIUEaDxFxs89zCAHjqyRwlTSuql4M5hjIuc5QYJkOH0/vyiyNXKD72O+LhRipGA==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.0"
+    "@types/resolve" "0.0.8"
+    builtin-modules "^3.1.0"
+    is-module "^1.0.0"
+    resolve "^1.11.1"
+
 "@rollup/plugin-replace@^2.2.1":
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.2.1.tgz#94af20cb3d70cccdcec991d1f97dd373936ec544"
@@ -950,6 +1084,13 @@
    magic-string "^0.25.2"
    rollup-pluginutils "^2.6.0"

+"@rollup/pluginutils@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.4.tgz#3a104a41a90f8d1dcf308e18f8fa402d1cc6576e"
+  integrity sha512-buc0oeq2zqQu2mpMyvZgAaQvitikYjT/4JYhA4EXwxX8/g0ZGHoGiX+0AwmfhrNqH4oJv67gn80sTZFQ/jL1bw==
+  dependencies:
+    estree-walker "^0.6.1"
+
 "@styled-system/background@^5.1.2":
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
@@ -1092,10 +1233,10 @@
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==

-"@types/color@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.0.tgz#40f8a6bf2fd86e969876b339a837d8ff1b0a6e30"
-  integrity sha512-5qqtNia+m2I0/85+pd2YzAXaTyKO8j+svirO5aN+XaQJ5+eZ8nx0jPtEWZLxCi50xwYsX10xUHetFzfb1WEs4Q==
+"@types/color@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071"
+  integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==
  dependencies:
    "@types/color-convert" "*"

@@ -1249,10 +1390,10 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==

-"@types/styled-components@^4.4.1":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.1.tgz#bc40cf5ce0708032f4b148b04ab3c470d3e74026"
-  integrity sha512-cQXT4pkAkM0unk/s26UBrJx9RmJ2rNUn2aDTgzp1rtu+tTkScebE78jbxNWhlqkA43XF3d41CcDlyl9Ldotm2g==
+"@types/styled-components@^4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.2.tgz#709fa7afd7dc0963b8316a0159240f0fe19a026d"
+  integrity sha512-dngFx2PuGoy0MGE68eHayAmJvLSqWrnTe9w+DnQruu8PS+waWEsKmoBRhkzL2h2pK1OJhzJhVfuiz+oZa4etpA==
  dependencies:
    "@types/hoist-non-react-statics" "*"
    "@types/react" "*"
@@ -1296,12 +1437,12 @@
    regexpp "^3.0.0"
    tsutils "^3.17.1"

-"@typescript-eslint/eslint-plugin@^2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.15.0.tgz#5442c30b687ffd576ff74cfea46a6d7bfb0ee893"
-  integrity sha512-XRJFznI5v4K1WvIrWmjFjBAdQWaUTz4xJEdqR7+wAFsv6Q9dP3mOlE6BMNT3pdlp9eF1+bC5m5LZTmLMqffCVw==
+"@typescript-eslint/eslint-plugin@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.16.0.tgz#bf339b7db824c7cc3fd1ebedbc88dd17016471af"
+  integrity sha512-TKWbeFAKRPrvKiR9GNxErQ8sELKqg1ZvXi6uho07mcKShBnCnqNpDQWP01FEvWKf0bxM2g7uQEI5MNjSNqvUpQ==
  dependencies:
-    "@typescript-eslint/experimental-utils" "2.15.0"
+    "@typescript-eslint/experimental-utils" "2.16.0"
    eslint-utils "^1.4.3"
    functional-red-black-tree "^1.0.1"
    regexpp "^3.0.0"
@@ -1316,13 +1457,13 @@
    "@typescript-eslint/typescript-estree" "2.12.0"
    eslint-scope "^5.0.0"

-"@typescript-eslint/experimental-utils@2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.15.0.tgz#41e35313bfaef91650ddb5380846d1c78a780070"
-  integrity sha512-Qkxu5zndY5hqlcQkmA88gfLvqQulMpX/TN91XC7OuXsRf4XG5xLGie0sbpX97o/oeccjeZYRMipIsjKk/tjDHA==
+"@typescript-eslint/experimental-utils@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.16.0.tgz#bba65685728c532e0ddc811a0376e8d38e671f77"
+  integrity sha512-bXTmAztXpqxliDKZgvWkl+5dHeRN+jqXVZ16peKKFzSXVzT6mz8kgBpHiVzEKO2NZ8OCU7dG61K9sRS/SkUUFQ==
  dependencies:
    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.15.0"
+    "@typescript-eslint/typescript-estree" "2.16.0"
    eslint-scope "^5.0.0"

 "@typescript-eslint/parser@^2.12.0":
@@ -1335,14 +1476,14 @@
    "@typescript-eslint/typescript-estree" "2.12.0"
    eslint-visitor-keys "^1.1.0"

-"@typescript-eslint/parser@^2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.15.0.tgz#379a71a51b0429bc3bc55c5f8aab831bf607e411"
-  integrity sha512-6iSgQsqAYTaHw59t0tdjzZJluRAjswdGltzKEdLtcJOxR2UVTPHYvZRqkAVGCkaMVb6Fpa60NnuozNCvsSpA9g==
+"@typescript-eslint/parser@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.16.0.tgz#d0c0135a8fdb915f670802ddd7c1ba457c1b4f9d"
+  integrity sha512-+w8dMaYETM9v6il1yYYkApMSiwgnqXWJbXrA94LAWN603vXHACsZTirJduyeBOJjA9wT6xuXe5zZ1iCUzoxCfw==
  dependencies:
    "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.15.0"
-    "@typescript-eslint/typescript-estree" "2.15.0"
+    "@typescript-eslint/experimental-utils" "2.16.0"
+    "@typescript-eslint/typescript-estree" "2.16.0"
    eslint-visitor-keys "^1.1.0"

 "@typescript-eslint/typescript-estree@2.12.0":
@@ -1358,16 +1499,16 @@
    semver "^6.3.0"
    tsutils "^3.17.1"

-"@typescript-eslint/typescript-estree@2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.15.0.tgz#79ae52eed8701b164d91e968a65d85a9105e76d3"
-  integrity sha512-L6Pog+w3VZzXkAdyqA0VlwybF8WcwZX+mufso86CMxSdWmcizJ38lgBdpqTbc9bo92iyi0rOvmATKiwl+amjxg==
+"@typescript-eslint/typescript-estree@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.16.0.tgz#b444943a76c716ed32abd08cbe96172d2ca0ab75"
+  integrity sha512-hyrCYjFHISos68Bk5KjUAXw0pP/455qq9nxqB1KkT67Pxjcfw+r6Yhcmqnp8etFL45UexCHUMrADHH7dI/m2WQ==
  dependencies:
    debug "^4.1.1"
    eslint-visitor-keys "^1.1.0"
    glob "^7.1.6"
    is-glob "^4.0.1"
-    lodash.unescape "4.0.1"
+    lodash "^4.17.15"
    semver "^6.3.0"
    tsutils "^3.17.1"

@@ -2568,14 +2709,14 @@ css-select@~1.2.0:
    domutils "1.5.1"
    nth-check "~1.0.1"

-css-to-react-native@^2.2.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
-  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
  dependencies:
    camelize "^1.0.0"
    css-color-keywords "^1.0.0"
-    postcss-value-parser "^3.3.0"
+    postcss-value-parser "^4.0.2"

 css-what@2.1:
  version "2.1.3"
@@ -3772,7 +3913,7 @@ hmac-drbg@^1.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
  integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
@@ -3822,10 +3963,10 @@ humanize-duration@^3.15.3:
  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.21.0.tgz#ae5dc7e67640770cbf6a8d03a5d1138d47c7ce38"
  integrity sha512-7BLsrQZ2nMGeakmGDUl1pDne6/7iAdvwf1RtDLCOPHNFIHjkOVW7lcu7xHkIM9HhZAlSSO5crhC1dHvtl4dIQw==

-husky@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-4.0.1.tgz#b0d9e16e660ec352392b3c2164ba709694d86b4d"
-  integrity sha512-x2wzNz3mra5rSYBPb9w59Bg3d5HnJZ+DBAALbMl/1K15Yv8zhcAxhrS792nMyjkxLsoPZtNpmnX+RqLtIKxpDQ==
+husky@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.0.7.tgz#cee4301d1db1d731be9c2aa2ac72b46439d30c91"
+  integrity sha512-ULivTOe0k+nNjZKIojoHxXjybtEycaba0EDuk1G8iNGD8wZgo8Sr3YiN8bKitXNpI1RvVKTJwRnh2GLysLbxMQ==
  dependencies:
    chalk "^3.0.0"
    ci-info "^2.0.0"
@@ -4170,11 +4311,6 @@ is-typedarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=

-is-what@^3.3.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.4.0.tgz#a9b3fe0c22f52d49efef977f640da44e65a3f866"
-  integrity sha512-oFdBRuSY9PocqPoUUseDXek4I+A1kWGigZGhuG+7GEkp0tRkek11adc0HbTEVsNvtojV7rp0uhf5LWtGvHzoOQ==
-
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5053,18 +5189,6 @@ mdi-react@^6.5.0:
  resolved "https://registry.yarnpkg.com/mdi-react/-/mdi-react-6.5.0.tgz#c29bd5c45245e012599bd6d067827f9edb9b5bf0"
  integrity sha512-oR7znMshEi/bDageK2nzaZNoz3vXe3Sba6J/V0SdaJ79n1NJlHHHNmbNGGOkuT1IhC05VcpVRghZVIsi7dK2HA==

-memoize-one@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
-
-merge-anything@^2.2.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0"
-  integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==
-  dependencies:
-    is-what "^3.3.1"
-
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5827,10 +5951,10 @@ posix-character-classes@^0.1.0:
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=

-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+postcss-value-parser@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+  integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==

 prebuild-install@^5.3.2:
  version "5.3.3"
@@ -5925,7 +6049,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.3"

-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6005,7 +6129,7 @@ react-dom@^16.12.0:
    prop-types "^15.6.2"
    scheduler "^0.18.0"

-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
  version "16.12.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
@@ -6361,28 +6485,6 @@ rollup-plugin-babel@^4.3.2:
    "@babel/helper-module-imports" "^7.0.0"
    rollup-pluginutils "^2.8.1"

-rollup-plugin-commonjs@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz#417af3b54503878e084d127adf4d1caf8beb86fb"
-  integrity sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==
-  dependencies:
-    estree-walker "^0.6.1"
-    is-reference "^1.1.2"
-    magic-string "^0.25.2"
-    resolve "^1.11.0"
-    rollup-pluginutils "^2.8.1"
-
-rollup-plugin-node-resolve@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523"
-  integrity sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==
-  dependencies:
-    "@types/resolve" "0.0.8"
-    builtin-modules "^3.1.0"
-    is-module "^1.0.0"
-    resolve "^1.11.1"
-    rollup-pluginutils "^2.8.1"
-
 rollup-plugin-sourcemaps@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.4.2.tgz#62125aa94087aadf7b83ef4dfaf629b473135e87"
@@ -6562,6 +6664,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6934,23 +7041,20 @@ strip-json-comments@~2.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=

-styled-components@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
-  integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
+styled-components@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0.tgz#fc59932c9b574571fa3cd462c862af1956114ff2"
+  integrity sha512-F7VhIXIbUXJ8KO3pU9wap2Hxdtqa6PZ1uHrx+YXTgRjyxGlwvBHb8LULXPabmDA+uEliTXRJM5WcZntJnKNn3g==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/unitless" "^0.7.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.3"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
    babel-plugin-styled-components ">= 1"
-    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
    supports-color "^5.5.0"

 styled-system@5.1.4:
@@ -6972,16 +7076,6 @@ styled-system@5.1.4:
    "@styled-system/variant" "^5.1.4"
    object-assign "^4.1.1"

-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7215,10 +7309,10 @@ ts-jest@^24.0.2:
    semver "^5.5"
    yargs-parser "10.x"

-tsdx@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/tsdx/-/tsdx-0.12.1.tgz#b9a9ac9a627d927196d273e94b6a5aeadfdc8731"
-  integrity sha512-DwfTE3HJ8mGmDGGuRnu/EwB3LBFy+fqchi1cc57eiylkYIaFtmslAqlixrkd0XZfOvaLQ1ZILGeXFJJeCFIDWw==
+tsdx@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/tsdx/-/tsdx-0.12.3.tgz#688ef9c4ed8f1c5de5da94daf2e3cc02f8134c2c"
+  integrity sha512-BQ0oj9S5Yti6Esol+29ztiJs0kSUA57LngT0G4VF2lqTDRZcMlByCMyWa7yOih08t1wNUj8ah0ml7WJkf8PIbA==
  dependencies:
    "@babel/core" "^7.4.4"
    "@babel/helper-module-imports" "^7.0.0"
@@ -7230,7 +7324,9 @@ tsdx@^0.12.1:
    "@babel/plugin-transform-runtime" "^7.6.0"
    "@babel/polyfill" "^7.4.4"
    "@babel/preset-env" "^7.4.4"
+    "@rollup/plugin-commonjs" "^11.0.0"
    "@rollup/plugin-json" "^4.0.0"
+    "@rollup/plugin-node-resolve" "^6.0.0"
    "@rollup/plugin-replace" "^2.2.1"
    "@types/rimraf" "^2.0.2"
    "@types/shelljs" "^0.8.5"
@@ -7275,8 +7371,6 @@ tsdx@^0.12.1:
    rimraf "^3.0.0"
    rollup "^1.27.8"
    rollup-plugin-babel "^4.3.2"
-    rollup-plugin-commonjs "^10.0.0"
-    rollup-plugin-node-resolve "^5.0.0"
    rollup-plugin-sourcemaps "^0.4.2"
    rollup-plugin-terser "^5.1.2"
    rollup-plugin-typescript2 "^0.25.3"