feat: setup onboarding routes

projects/wallet-template/assets/manifest-v3-chrome.json

@@ -13,7 +13,7 @@
   },
   "action": {
     "default_title": "Substrate Connect",
-    "default_popup": "ui/assets/popup.html"
+    "default_popup": "ui/assets/wallet-popup.html"
   },
   "options_ui": {
     "page": "ui/assets/options.html",

projects/wallet-template/assets/manifest-v3-firefox.json

@@ -13,7 +13,7 @@
   },
   "action": {
     "default_title": "Substrate Connect",
-    "default_popup": "ui/assets/popup.html"
+    "default_popup": "ui/assets/wallet-popup.html"
   },
   "options_ui": {
     "page": "ui/assets/options.html",

projects/wallet-template/src/background/createBackgroundRpc.ts

@@ -86,6 +86,9 @@ const createKeyring = () => {
       await removeKeystore()
       isLocked = true
     },
+    async hasPassword() {
+      return !!(await getKeystore())
+    },
   }
 }
 
@@ -246,9 +249,6 @@ export const createBackgroundRpc = (
     async unlockKeyring([password]) {
       return keyring.unlock(password)
     },
-    async isKeyringLocked() {
-      return keyring.isLocked()
-    },
     async changePassword([currentPassword, newPassword]) {
       return keyring.changePassword(currentPassword, newPassword)
     },
@@ -277,6 +277,12 @@ export const createBackgroundRpc = (
     async clearKeysets() {
       await chrome.storage.local.remove("keysets")
     },
+    async getKeyringState() {
+      return {
+        isLocked: await keyring.isLocked(),
+        hasPassword: await keyring.hasPassword(),
+      }
+    },
   }
 
   type Method = keyof BackgroundRpcSpec

projects/wallet-template/src/background/types.ts

@@ -26,6 +26,11 @@ export type SignRequest = {
   userSignedExtensionNames: UserSignedExtensionName[]
 }
 
+type KeyringState = {
+  isLocked: boolean
+  hasPassword: boolean
+}
+
 export type BackgroundRpcSpec = {
   getAccounts(chainId: string): Promise<Account[]>
   createTx(chainId: string, from: string, callData: string): Promise<string>
@@ -38,12 +43,12 @@ export type BackgroundRpcSpec = {
   cancelSignRequest(id: string): Promise<void>
   lockKeyring(): Promise<void>
   unlockKeyring(password: string): Promise<void>
-  isKeyringLocked(): Promise<boolean>
   changePassword(currentPassword: string, newPassword: string): Promise<void>
   createPassword(password: string): Promise<void>
   insertKeyset(keysetName: string, keyset: Keyset): Promise<void>
   getKeyset(keysetName: string): Promise<Keyset | undefined>
   listKeysets(): Promise<Record<string, Keyset>>
   removeKeyset(keysetName: string): Promise<void>
   clearKeysets(): Promise<void>
+  getKeyringState(): Promise<KeyringState>
 }

projects/wallet-template/src/containers/WalletPopup.tsx

@@ -20,6 +20,7 @@ export const WalletPopup = () => (
         <Routes>
           <Route element={<ProtectedRoute />}>
             <Route path="/" element={<Debug />} />
+            <Route path="/debug" element={<Debug />} />
             <Route path="/change-password" element={<ChangePassword />} />
             <Route path="/accounts" element={<Accounts />} />
             <Route path="/accounts/add" element={<AddAccount />} />
@@ -37,11 +38,14 @@ export const WalletPopup = () => (
 )
 
 const Header = () => {
-  const { isLocked } = useKeyring()
+  const {
+    keyring: { isLocked },
+  } = useKeyring()
+
   if (isLocked) return null
   return (
     <header className="w-[32rem] mx-auto px-6 py-2">
-      <Link to={"/"}>Debug</Link>
+      <Link to={"/debug"}>Debug</Link>
     </header>
   )
 }

projects/wallet-template/src/containers/WalletPopup/components/ProtectedRoute.tsx

@@ -3,9 +3,13 @@ import { Navigate, Outlet, useLocation } from "react-router-dom"
 import { useKeyring } from "../hooks"
 
 export const ProtectedRoute = ({ children }: { children?: ReactNode }) => {
-  const { isLocked } = useKeyring()
+  const {
+    keyring: { isLocked, hasPassword },
+  } = useKeyring()
   const location = useLocation()
-  return isLocked ? (
+  return !hasPassword ? (
+    <Navigate to="/welcome" replace />
+  ) : isLocked ? (
     <Navigate
       to="/unlock-keyring"
       replace

projects/wallet-template/src/containers/WalletPopup/hooks/useKeyring.tsx

@@ -4,7 +4,10 @@ import useSWR from "swr"
 import { rpc } from "../api"
 
 type Context = {
-  isLocked: boolean
+  keyring: {
+    isLocked: boolean
+    hasPassword: boolean
+  }
   unlock(password: string): Promise<void>
   lock(): Promise<void>
   refresh(): Promise<void>
@@ -14,11 +17,11 @@ const LockContext = createContext({} as Context)
 
 export const KeyringProvider = ({ children }: { children?: ReactNode }) => {
   const {
-    data: isLocked,
+    data: keyring,
     isLoading,
     error,
     mutate,
-  } = useSWR("rpc.isKeyringLocked", () => rpc.client.isKeyringLocked())
+  } = useSWR("rpc.getKeyringState", () => rpc.client.getKeyringState())
   const navigate = useNavigate()
   const location = useLocation()
   // FIXME: on error, navigate to error page
@@ -34,10 +37,10 @@ export const KeyringProvider = ({ children }: { children?: ReactNode }) => {
   const lock = async () => {
     await rpc.client.lockKeyring()
     await refresh()
-    navigate("/unlock-keyring", { replace: true })
+    navigate("/unlock-keyring")
   }
   const value = {
-    isLocked: isLocked!,
+    keyring: keyring!,
     unlock,
     lock,
     refresh,

projects/wallet-template/src/containers/WalletPopup/pages/UnlockKeyring.tsx

@@ -16,7 +16,7 @@ export const UnlockKeyring = () => {
   const onSubmit: SubmitHandler<FormFields> = ({ password }) => unlock(password)
   return (
     <div>
-      <div className="my-4 h-96 flex justify-center items-center">
+      <div className="my-4 h-80 flex justify-center items-center">
         <h1 className="text-3xl font-bold text-center">Unlock Wallet</h1>
       </div>
       <form