feat: Page title changes between screens, Closes #149

packages/app/package.json

@@ -25,6 +25,7 @@
     "@blockstack/keychain": "^0.2.5",
     "@blockstack/prettier-config": "^0.0.5",
     "@blockstack/ui": "^1.0.0-alpha.31",
+    "@rehooks/document-title": "^1.0.1",
     "@segment/analytics.js-core": "^3.10.1",
     "@types/segment-analytics": "^0.0.32",
     "formik": "^2.1.3",

packages/app/src/components/onboarding/screens/choose-account.tsx

@@ -14,6 +14,7 @@ import { selectIdentities, selectCurrentWallet } from '@store/wallet/selectors';
 import { ConfigApp } from '@blockstack/keychain/dist/wallet';
 import { Wallet } from '@blockstack/keychain';
 import { gaiaUrl } from '@common/constants';
+import useDocumentTitle from '@rehooks/document-title';
 import {
   doTrack,
   CHOOSE_ACCOUNT_REUSE_WARNING,
@@ -29,6 +30,7 @@ interface ChooseAccountProps {
 }
 
 export const ChooseAccount: React.FC<ChooseAccountProps> = ({ next }) => {
+  useDocumentTitle('Choose account');
   const { appName, identities, wallet } = useSelector((state: AppState) => ({
     appName: selectAppName(state),
     identities: selectIdentities(state),

packages/app/src/components/onboarding/screens/create.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Box, Spinner, Flex, Text } from '@blockstack/ui';
 import { Screen, ScreenBody, PoweredBy, ScreenFooter } from '@blockstack/connect';
+import useDocumentTitle from '@rehooks/document-title';
 import { ScreenHeader } from '@components/connected-screen-header';
 
 import { doCreateSecretKey } from '@store/onboarding/actions';
@@ -56,12 +57,13 @@ const preloadImages = (images: { imageUrl: string }[]) => {
 interface CreateProps {
   next: () => void;
 }
-
 export const Create: React.FC<CreateProps> = props => {
+  const title = 'Generating your Secret Key...';
   const [state, setState] = useState({
-    title: 'Generating your Secret Key...',
+    title,
     imageUrl: '/assets/images/icon-delay-key.svg',
   });
+  useDocumentTitle(title);
   const { name } = useAppDetails();
   const dispatch = useDispatch();
 

packages/app/src/components/onboarding/screens/decrypt-recovery-code.tsx

@@ -10,12 +10,15 @@ import { Box, Input, Text, Button } from '@blockstack/ui';
 import { Screen, ScreenBody, ScreenActions, Title, PoweredBy, ScreenFooter } from '@blockstack/connect';
 import { ScreenHeader } from '@components/connected-screen-header';
 import { decrypt } from '@blockstack/keychain';
+import useDocumentTitle from '@rehooks/document-title';
 
 interface RecoveryProps {
   next: (identityIndex: number) => void;
 }
 
 export const DecryptRecoveryCode: React.FC<RecoveryProps> = ({ next }) => {
+  const title = 'Enter your password';
+  useDocumentTitle(title);
   const [passwordError, setPasswordError] = useState('');
   const [password, setCode] = useState('');
   const [loading, setLoading] = useState(false);
@@ -27,7 +30,7 @@ export const DecryptRecoveryCode: React.FC<RecoveryProps> = ({ next }) => {
       <ScreenHeader />
       <ScreenBody
         body={[
-          <Title>Enter your password</Title>,
+          <Title>{title}</Title>,
           'You entered a Magic Recovery Code. Enter the password you set when you first created your Blockstack ID.',
           <Box textAlign="left">
             {/*Validate: track SIGN_IN_INCORRECT*/}

packages/app/src/components/onboarding/screens/save-key.tsx

@@ -10,12 +10,15 @@ import { AppState } from '@store';
 
 import { selectAppName } from '@store/onboarding/selectors';
 import { faqs } from '@components/onboarding/data';
+import useDocumentTitle from '@rehooks/document-title';
 
 interface SaveKeyProps {
   next: () => void;
 }
 
 export const SaveKey: React.FC<SaveKeyProps> = ({ next }) => {
+  const title = 'Save your Secret Key';
+  useDocumentTitle(title);
   const appName = useSelector((state: AppState) => selectAppName(state));
   const [loading, setLoading] = useState(false);
   return (
@@ -24,7 +27,7 @@ export const SaveKey: React.FC<SaveKeyProps> = ({ next }) => {
       <ScreenBody
         mt={6}
         body={[
-          <Title>Save your Secret Key</Title>,
+          <Title>{title}</Title>,
           <Text display="block" mt={2}>
             Paste your Secret Key wherever you keep critical, private, information such as passwords.
           </Text>,

packages/app/src/components/onboarding/screens/secret-key.tsx

@@ -9,12 +9,15 @@ import { Card } from '@components/card';
 import { SeedTextarea } from '@components/seed-textarea';
 import { AppState } from '@store';
 import { selectSecretKey } from '@store/onboarding/selectors';
+import useDocumentTitle from '@rehooks/document-title';
 
 interface SecretKeyProps {
   next: () => void;
 }
 
 export const SecretKey: React.FC<SecretKeyProps> = props => {
+  const title = 'Your Secret Key';
+  useDocumentTitle(title);
   const { secretKey } = useSelector((state: AppState) => ({
     secretKey: selectSecretKey(state),
   }));
@@ -35,7 +38,7 @@ export const SecretKey: React.FC<SecretKeyProps> = props => {
         <ScreenBody
           mt={6}
           body={[
-            <Title>Your Secret Key</Title>,
+            <Title>{title}</Title>,
             <Text mt={2} display="block">
               Here’s your Secret Key: 12 words that prove it’s you when you want to use Messenger on a new device. Once
               lost it’s lost forever, so save it somewhere you won’t forget.

packages/app/src/components/onboarding/screens/sign-in.tsx

@@ -4,7 +4,7 @@ import { ScreenHeader } from '@components/connected-screen-header';
 import { Box, Text, Input, Flex, Button } from '@blockstack/ui';
 import { AppIcon } from '@components/app-icon';
 import { Link } from '@components/link';
-
+import useDocumentTitle from '@rehooks/document-title';
 import { useDispatch, useSelector } from 'react-redux';
 import { doTrack, SIGN_IN_CORRECT, SIGN_IN_CREATE, SIGN_IN_INCORRECT } from '@common/track';
 import { doChangeScreen, doSetMagicRecoveryCode } from '@store/onboarding/actions';
@@ -24,6 +24,8 @@ export const SignIn: React.FC<SignInProps> = props => {
   const [seedError, setSeedError] = useState<null | string>(null);
   const dispatch = useDispatch();
   const appName = useSelector((state: AppState) => selectAppName(state));
+  const title = `Sign into ${appName}`;
+  useDocumentTitle(title);
 
   return (
     <Screen isLoading={isLoading} textAlign="center">
@@ -32,7 +34,7 @@ export const SignIn: React.FC<SignInProps> = props => {
       <ScreenBody
         mt={4}
         body={[
-          <Title>Sign into {appName}</Title>,
+          <Title>{title}</Title>,
           <Box mt={2}>Enter your Secret Key to continue</Box>,
           <Box textAlign="left" mt={6}>
             {/*Validate: track SIGN_IN_INCORRECT*/}

packages/app/src/components/onboarding/screens/username.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Box, Flex, Input, Text, Button } from '@blockstack/ui';
 import { Screen, ScreenBody, ScreenActions, Title, PoweredBy, ScreenFooter } from '@blockstack/connect';
 import { ScreenHeader } from '@components/connected-screen-header';
+import useDocumentTitle from '@rehooks/document-title';
 
 import { useAppDetails } from '@common/hooks/useAppDetails';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,6 +31,8 @@ interface UsernameProps {
 }
 
 export const Username: React.FC<UsernameProps> = ({ next }) => {
+  const title = 'Choose a username';
+  useDocumentTitle(title);
   const dispatch = useDispatch();
   const { name } = useAppDetails();
 
@@ -85,7 +88,7 @@ export const Username: React.FC<UsernameProps> = ({ next }) => {
         mt={6}
         body={[
           <Box>
-            <Title>Choose a username</Title>
+            <Title>{title}</Title>
             <Text mt={2} display="block">
               This is how people will find you in {name} and other apps you use with your Secret Key.
             </Text>

packages/app/yarn.lock

@@ -1301,6 +1301,13 @@
     react-dev-utils "^9.1.0"
     sockjs-client "^1.4.0"
 
+"@rehooks/document-title@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@rehooks/document-title/-/document-title-1.0.1.tgz#a80f108ec6f8ab6aa65f6a82cde40724fbc6ae2e"
+  integrity sha512-yuVyOahut8UKbm8ajn/cLp8coreq+GIqILRfCJmX6elfKt/TtEs4LXj3Nw0QfauUGrzQZJUwODf8Q/IF2/B8hA==
+  dependencies:
+    react "^16.8.3"
+
 "@schemastore/web-manifest@^0.0.4":
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/@schemastore/web-manifest/-/web-manifest-0.0.4.tgz#b9c5c8374dc9b920bd0c62fb1c94778584b6e4ab"
@@ -8173,7 +8180,7 @@ react-test-renderer@^16.8.6:
     react-is "^16.8.6"
     scheduler "^0.18.0"
 
-react@^16.12.0:
+react@^16.12.0, react@^16.8.3:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==