feat: implementation of router

.circleci/config.yml

@@ -53,7 +53,7 @@ jobs:
           background: true
       - run:
           name: test
-          command: yarn lerna run test --scope @blockstack/app
+          command: yarn lerna run test --scope @blockstack/app --stream
       - run:
           name: Build extension
           command: yarn lerna run prod:ext && zip -r extension.zip ./packages/app/dist

netlify.toml

@@ -0,0 +1,5 @@
+[[redirects]]
+  from = "/actions.html"
+  to = "/#/sign-up?authRequest=:authRequest"
+  force = true
+  query = {authRequest = ":authRequest"}

package.json

@@ -46,5 +46,6 @@
   },
   "workspaces":[
     "packages/*"
-  ]
+  ],
+  "dependencies": {}
 }

packages/app/package.json

@@ -29,6 +29,7 @@
     "@blockstack/prettier-config": "^0.0.5",
     "@blockstack/ui": "^1.0.1",
     "@rehooks/document-title": "^1.0.1",
+    "@types/react-router-dom": "^5.1.3",
     "blockstack": "^19.3.0",
     "formik": "^2.1.4",
     "mdi-react": "^6.7.0",
@@ -38,6 +39,8 @@
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.0",
     "react-refresh": "^0.7.2",
+    "react-router": "^6.0.0-alpha.2",
+    "react-router-dom": "^6.0.0-alpha.2",
     "redux": "4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",

packages/app/src/common/dev/types/react-router.d.ts

@@ -0,0 +1,16 @@
+import * as reactRouterDom from 'react-router-dom';
+
+interface ToOptions {
+  pathname?: string;
+  hash?: string;
+  search?: string;
+}
+
+interface NavigateProps {
+  to: string | ToOptions;
+}
+
+declare module 'react-router-dom' {
+  export const Navigate: React.FC<NavigateProps>;
+  export const Routes: React.FC;
+}

packages/app/src/common/hooks/use-analytics.ts

@@ -1,11 +1,20 @@
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { selectDecodedAuthRequest } from '@store/onboarding/selectors';
 import { doTrack as track, doTrackScreenChange } from '@common/track';
 import { doChangeScreen as changeScreen } from '@store/onboarding/actions';
-import { ScreenName } from '@store/onboarding/types';
+import { ScreenPaths } from '@store/onboarding/types';
 import { useAppDetails } from './useAppDetails';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
 
 export const useAnalytics = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const doNavigatePage = (path: ScreenPaths) => {
+    navigate(path);
+    dispatch(changeScreen(path));
+  };
   const authRequest = useSelector(selectDecodedAuthRequest);
   const { name, url } = useAppDetails();
 
@@ -23,9 +32,9 @@ export const useAnalytics = () => {
     });
   };
 
-  const doChangeScreen = (screen: ScreenName) => {
-    doTrackScreenChange(screen, authRequest);
-    return changeScreen(screen);
+  const doChangeScreen = (path: ScreenPaths) => {
+    doTrackScreenChange(path, authRequest);
+    return doNavigatePage(path);
   };
 
   return { doTrack, doChangeScreen };

packages/app/src/common/hooks/use-onboarding-state.ts

@@ -0,0 +1,22 @@
+import { useSelector } from 'react-redux';
+import {
+  selectSecretKey,
+  selectCurrentScreen,
+  selectAuthRequest,
+  selectDecodedAuthRequest,
+  selectMagicRecoveryCode,
+  selectOnboardingProgress,
+  selectUsername,
+} from '@store/onboarding/selectors';
+
+export const useOnboardingState = () => {
+  const secretKey = useSelector(selectSecretKey);
+  const screen = useSelector(selectCurrentScreen);
+  const authRequest = useSelector(selectAuthRequest);
+  const decodedAuthRequest = useSelector(selectDecodedAuthRequest);
+  const magicRecoveryCode = useSelector(selectMagicRecoveryCode);
+  const isOnboardingInProgress = useSelector(selectOnboardingProgress);
+  const username = useSelector(selectUsername);
+
+  return { secretKey, screen, authRequest, decodedAuthRequest, magicRecoveryCode, isOnboardingInProgress, username };
+};

packages/app/src/common/hooks/use-wallet.ts

@@ -0,0 +1,20 @@
+import { useSelector } from 'react-redux';
+import {
+  selectIdentities,
+  selectCurrentWallet,
+  selectFirstIdentity,
+  selectIsRestoringWallet,
+  selectIsSignedIn,
+} from '@store/wallet/selectors';
+import { selectSecretKey } from '@store/onboarding/selectors';
+
+export const useWallet = () => {
+  const identities = useSelector(selectIdentities);
+  const firstIdentity = useSelector(selectFirstIdentity);
+  const wallet = useSelector(selectCurrentWallet);
+  const secretKey = useSelector(selectSecretKey);
+  const isRestoringWallet = useSelector(selectIsRestoringWallet);
+  const isSignedIn = useSelector(selectIsSignedIn);
+
+  return { identities, firstIdentity, wallet, secretKey, isRestoringWallet, isSignedIn };
+};

packages/app/src/common/track.ts

@@ -1,4 +1,4 @@
-import { ScreenName } from '@store/onboarding/types';
+import { ScreenPaths } from '@store/onboarding/types';
 import { DecodedAuthRequest } from './dev/types';
 
 export const SECRET_KEY_FAQ_WHERE = 'View Secret Key FAQ (Where)';
@@ -23,32 +23,30 @@ export const USERNAME_SUBMIT_SUCCESS = 'Submit Username Success';
 
 // Nice page names for Mark to see in Mixpanel
 export const pageTrackingNameMap = {
-  [ScreenName.CHOOSE_ACCOUNT]: 'Choose Account',
-  [ScreenName.USERNAME]: 'Username',
-  [ScreenName.GENERATION]: 'Generation',
-  [ScreenName.SECRET_KEY]: 'Copy Secret Key',
-  [ScreenName.SAVE_KEY]: 'Save Secret Key',
-  [ScreenName.CONNECT_APP]: 'Connect App',
-  [ScreenName.SIGN_IN]: 'Sign In',
-  [ScreenName.RECOVERY_CODE]: 'Magic Recovery Code',
-  [ScreenName.ADD_ACCOUNT]: ' Select Username',
-  [ScreenName.REGISTRY_ERROR]: 'Username Registry Error',
+  [ScreenPaths.CHOOSE_ACCOUNT]: 'Choose Account',
+  [ScreenPaths.USERNAME]: 'Username',
+  [ScreenPaths.GENERATION]: 'Generation',
+  [ScreenPaths.SECRET_KEY]: 'Copy Secret Key',
+  [ScreenPaths.SAVE_KEY]: 'Save Secret Key',
+  [ScreenPaths.SIGN_IN]: 'Sign In',
+  [ScreenPaths.RECOVERY_CODE]: 'Magic Recovery Code',
+  [ScreenPaths.ADD_ACCOUNT]: ' Select Username',
+  [ScreenPaths.REGISTRY_ERROR]: 'Username Registry Error',
 };
 
 export const titleNameMap = {
-  [ScreenName.CHOOSE_ACCOUNT]: 'Choose account',
-  [ScreenName.USERNAME]: 'Choose a username',
-  [ScreenName.GENERATION]: 'Generating your Secret Key',
-  [ScreenName.SECRET_KEY]: 'Your Secret Key',
-  [ScreenName.SAVE_KEY]: 'Save your Secret Key',
-  [ScreenName.CONNECT_APP]: 'Connect App',
-  [ScreenName.SIGN_IN]: 'Sign in',
-  [ScreenName.RECOVERY_CODE]: 'Enter your password',
-  [ScreenName.ADD_ACCOUNT]: ' Select Username',
-  [ScreenName.REGISTRY_ERROR]: 'Failed to register username',
+  [ScreenPaths.CHOOSE_ACCOUNT]: 'Choose account',
+  [ScreenPaths.USERNAME]: 'Choose a username',
+  [ScreenPaths.GENERATION]: 'Generating your Secret Key',
+  [ScreenPaths.SECRET_KEY]: 'Your Secret Key',
+  [ScreenPaths.SAVE_KEY]: 'Save your Secret Key',
+  [ScreenPaths.SIGN_IN]: 'Sign in',
+  [ScreenPaths.RECOVERY_CODE]: 'Enter your password',
+  [ScreenPaths.ADD_ACCOUNT]: ' Select Username',
+  [ScreenPaths.REGISTRY_ERROR]: 'Failed to register username',
 };
 
-export const doTrackScreenChange = (screen: ScreenName, decodedAuthRequest: DecodedAuthRequest | undefined) => {
+export const doTrackScreenChange = (screen: ScreenPaths, decodedAuthRequest: DecodedAuthRequest | undefined) => {
   document.title = titleNameMap[screen];
   const appURL = decodedAuthRequest ? new URL(decodedAuthRequest?.redirect_uri) : null;
   window.analytics.page(pageTrackingNameMap[screen], {

packages/app/src/common/utils.ts

@@ -2,8 +2,8 @@ import { DecodedAuthRequest } from './dev/types';
 import { wordlists } from 'bip39';
 
 export const getAuthRequestParam = () => {
-  const { search } = document.location;
-  const matches = /authRequest=(.*)&?/.exec(search);
+  const { hash } = document.location;
+  const matches = /authRequest=(.*)&?/.exec(hash);
   if (matches && matches.length === 2) {
     return matches[1];
   }

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

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { Identity } from '@blockstack/keychain';
 import { Text, Flex, FlexProps, Spinner } from '@blockstack/ui';
-import { ScreenName } from '@store/onboarding/types';
+import { ScreenPaths } from '@store/onboarding/types';
 import { PlusInCircle } from '@components/icons/plus-in-circle';
 import { ListItem } from './list-item';
 import { AccountAvatar } from './account-avatar';
@@ -52,7 +51,6 @@ interface AccountsProps {
 }
 
 export const Accounts = ({ identities, showAddAccount, next }: AccountsProps) => {
-  const dispatch = useDispatch();
   const [selectedAddress, setSelectedAddress] = useState<null | string>(null);
   const { doChangeScreen } = useAnalytics();
 
@@ -86,7 +84,7 @@ export const Accounts = ({ identities, showAddAccount, next }: AccountsProps) =>
         <ListItem
           onClick={() => {
             if (selectedAddress) return;
-            dispatch(doChangeScreen(ScreenName.ADD_ACCOUNT));
+            doChangeScreen(ScreenPaths.ADD_ACCOUNT);
           }}
           cursor={selectedAddress ? 'not-allowed' : 'pointer'}
           hasAction

packages/app/src/pages/onboarding.tsx → packages/app/src/components/app.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ThemeProvider, theme, CSSReset } from '@blockstack/ui';
 import { createGlobalStyle } from 'styled-components';
-import { Onboarding } from '@components/onboarding';
+import { Routes } from '@components/routes';
+import { HashRouter as Router } from 'react-router-dom';
 
 const GlobalStyles = createGlobalStyle`
 #actions-root{
@@ -11,16 +12,18 @@ width: 100%;
 flex-direction: column;
 }`;
 
-export const OnboardingApp: React.FC = () => {
+export const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <React.Fragment>
         <GlobalStyles />
         <CSSReset />
-        <Onboarding />
+        <Router>
+          <Routes />
+        </Router>
       </React.Fragment>
     </ThemeProvider>
   );
 };
 
-export default OnboardingApp;
+export default App;