paritytech · ryanleecode · Mar 18, 2024 · Mar 9, 2024 · Mar 10, 2024 · Mar 11, 2024
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/wallet-template/assets/accounts.html b/projects/wallet-template/assets/accounts.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Substrate Connect Accounts</title>
+    <meta charset="utf-8" />
+  </head>
+  <body style="background-color: #f9f9f9">
+    <div id="accounts"></div>
+    <script type="module" src="../src/accounts.tsx"></script>
+  </body>
+</html>
diff --git a/projects/wallet-template/package.json b/projects/wallet-template/package.json
@@ -59,17 +59,20 @@
     "@polkadot-api/substrate-client": "0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0",
     "@polkadot-api/tx-helper": "0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0",
     "@polkadot-api/utils": "0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0",
+    "@substrate/connect-known-chains": "workspace:^",
     "@polkadot-labs/hdkd": "^0.0.5",
     "@polkadot-labs/hdkd-helpers": "^0.0.5",
     "@react-rxjs/core": "^0.10.7",
     "@react-rxjs/utils": "^0.9.7",
     "@substrate/connect-extension-protocol": "workspace:*",
     "@substrate/light-client-extension-helpers": "workspace:^",
+    "lucide-react": "^0.352.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.22.3",
+    "react-select": "^5.8.0",
     "rxjs": "^7.8.1",
     "smoldot": "2.0.22",
     "swr": "^2.2.5"

diff --git a/projects/wallet-template/src/accounts.tsx b/projects/wallet-template/src/accounts.tsx
@@ -0,0 +1,5 @@
+import { render } from "react-dom"
+import { Accounts } from "./containers/Accounts"
+import "./style.css"
+
+render(<Accounts />, document.getElementById("accounts"))
diff --git a/projects/wallet-template/src/background/createBackgroundRpc.ts b/projects/wallet-template/src/background/createBackgroundRpc.ts
@@ -20,7 +20,7 @@
   getTxCreator,
 } from "@polkadot-api/tx-helper"
 
-import type { BackgroundRpcSpec, SignRequest } from "./types"
+import type { BackgroundRpcSpec, Keyset, SignRequest } from "./types"
 
 const entropy = mnemonicToEntropy(DEV_PHRASE)
 const miniSecret = entropyToMiniSecret(entropy)
@@ -79,6 +79,12 @@
     signRequests: Record<string, InternalSignRequest>
     port: chrome.runtime.Port
   }
+
+  const listKeysets = async () => {
+    const keysets = (await chrome.storage.local.get("keysets")) || {}
+    return keysets["keysets"] || {}
+  }
+
   const handlers: RpcMethodHandlers<BackgroundRpcSpec, Context> = {
     async getAccounts([chainId], { lightClientPageHelper }) {
       const chains = await lightClientPageHelper.getChains()
@@ -215,6 +221,28 @@
     async changePassword([currentPassword, newPassword]) {
       keyring.changePassword(currentPassword, newPassword)
     },
+    async insertKeyset([keysetName, keyset]) {
+      const existingKeysets = await listKeysets()
+      await chrome.storage.local.set({
+        keysets: {
+          ...existingKeysets,
+          [keysetName]: keyset,
+        },
+      })
+    },
+    async getKeyset([keysetName]) {
+      const keysets = await listKeysets()
+      return keysets[keysetName]
+    },
+    listKeysets,
+    async removeKeyset([keysetName]) {
+      const keysets = await listKeysets()
+      delete keysets[keysetName]
+      await chrome.storage.local.set({ keysets })
+    },
+    async clearKeysets() {
+      await chrome.storage.local.remove("keysets")
+    },
   }
 
   type Method = keyof BackgroundRpcSpec

diff --git a/projects/wallet-template/src/background/types.ts b/projects/wallet-template/src/background/types.ts
@@ -7,6 +7,12 @@ export type Account = {
   address: string
 }
 
+export type Keyset = {
+  scheme: string
+  entropy: string
+  derivationPaths: string[]
+}
+
 export type SignRequest = {
   url: string
   chainId: string
@@ -29,4 +35,9 @@ export type BackgroundRpcSpec = {
   unlockKeyring(password: string): Promise<void>
   isKeyringLocked(): Promise<boolean>
   changePassword(currentPassword: string, newPassword: 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>
 }
diff --git a/projects/wallet-template/src/components/StepIndicator.tsx b/projects/wallet-template/src/components/StepIndicator.tsx
@@ -0,0 +1,27 @@
+import { CheckCircle } from "lucide-react"
+
+const range = (start: number, end: number) => {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+}
+
+type StepIndicatorProps = {
+  currentStep: number
+  steps: number
+}
+
+export const StepIndicator = ({ currentStep, steps }: StepIndicatorProps) => (
+  <div className="flex justify-center my-6 space-x-4">
+    {range(1, Math.max(1, steps)).map((step) => (
+      <div
+        key={step}
+        className={`w-8 h-8 rounded-full flex items-center justify-center ${
+          currentStep >= step
+            ? "bg-blue-500 text-white"
+            : "bg-gray-200 text-gray-500"
+        }`}
+      >
+        {currentStep > step ? <CheckCircle size="20" /> : step}
+      </div>
+    ))}
+  </div>
+)
diff --git a/projects/wallet-template/src/components/index.tsx b/projects/wallet-template/src/components/index.tsx
@@ -9,3 +9,4 @@ export { IconWeb3 } from "./IconWeb3"
 export { Bootnodes } from "./Bootnodes"
 export { Title } from "./Title"
 export { Switch } from "./Switch"
+export { StepIndicator } from "./StepIndicator"
diff --git a/projects/wallet-template/src/containers/Accounts/index.tsx b/projects/wallet-template/src/containers/Accounts/index.tsx
@@ -0,0 +1,13 @@
+import { HashRouter, Routes, Route } from "react-router-dom"
+import { AddAccount, Home } from "./pages"
+
+export const Accounts = () => {
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/add" element={<AddAccount />} />
+      </Routes>
+    </HashRouter>
+  )
+}
diff --git a/projects/wallet-template/src/containers/Accounts/networks.ts b/projects/wallet-template/src/containers/Accounts/networks.ts
@@ -0,0 +1,38 @@
+export type Network = {
+  label: string
+  value: string
+  logo: string
+}
+
+export const networks: Network[] = [
+  {
+    value: "polkadot",
+    label: "Polkadot",
+    logo: "https://cryptologos.cc/logos/polkadot-new-dot-logo.svg",
+  },
+  {
+    value: "westend2",
+    label: "Westend",
+    logo: "https://i.imgur.com/Dwb1yMS.png",
+  },
+  {
+    value: "ksmcc3",
+    label: "Kusama",
+    logo: "https://cryptologos.cc/logos/kusama-ksm-logo.svg",
+  },
+  {
+    value: "polkadot_asset_hub",
+    label: "Polkadot Asset Hub",
+    logo: "https://i.imgur.com/Vu3xpq2.png",
+  },
+  {
+    value: "westend_asset_hub",
+    label: "Westend Asset Hub",
+    logo: "https://i.imgur.com/RkU4UQQ.png",
+  },
+  {
+    value: "kusama_asset_hub",
+    label: "Kusama Asset Hub",
+    logo: "https://i.imgur.com/Q1bH3U9.png",
+  },
+]