Add unlock and wallet component and add more routes

.gitpod.yml

@@ -1,9 +1,8 @@
-# This configuration file was automatically generated by Gitpod.
-# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
-# and commit this file to your remote git repository to share the goodness with others.
-
 tasks:
-  - init: yarn install
-    command: yarn run start
+  - init: yarn
+    command: yarn start
+  - init: cd popup && yarn
+    command: yarn start
+    name: React app
 
 

popup/package.json

@@ -10,8 +10,10 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "ethers": "^6.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.7"
   }
 }

popup/src/App.tsx

@@ -1,25 +1,37 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Wallet from "./pages/wallet";
+import Create from "./pages/create";
+import { WalletProvider } from "./contexts/WalletContext";
+import Unlock from "./pages/unlock";
+import MyPasswords from "./pages/my-passwords";
+
+const router = createBrowserRouter([
+  {
+    path: "/wallet",
+    element: <Wallet />,
+  },
+  {
+    path: "/create",
+    element: <Create />,
+  },
+  {
+    path: "/unlock",
+    element: <Unlock />,
+  },
+  {
+    path: "/my-passwords",
+    element: <MyPasswords />,
+  },
+]);
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <WalletProvider>
+      <RouterProvider router={router} />
+    </WalletProvider>
   );
 }
 

popup/src/contexts/WalletContext.tsx

@@ -0,0 +1,43 @@
+import { Wallet } from "ethers";
+import React, { useMemo, useState } from "react";
+import { get_wallet_from_local } from "../wallet/wallet";
+
+type WalletContextType = {
+  wallet: Wallet | undefined;
+  lock: () => void;
+  unlock: (password: string) => void;
+};
+export let WalletContext: React.Context<WalletContextType>;
+
+export function WalletProvider(props: React.PropsWithChildren) {
+  const [wallet, set_wallet] = useState<Wallet>();
+  const lock = () => {
+    set_wallet(undefined);
+  };
+
+  const unlock = async (password: string) => {
+    try {
+      const wallet = await get_wallet_from_local(password);
+      set_wallet(wallet);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const value: WalletContextType = useMemo(
+    () => ({
+      wallet,
+      lock,
+      unlock,
+    }),
+    [wallet]
+  );
+
+  WalletContext = React.createContext(value);
+
+  return (
+    <WalletContext.Provider value={value}>
+      {props.children}
+    </WalletContext.Provider>
+  );
+}

popup/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

popup/src/pages/create/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { create_wallet } from "../../wallet/wallet";
+
+const Create = () => {
+  const [password, set_password] = useState("");
+  const on_create = () => {
+    create_wallet(password);
+  };
+  return (
+    <div>
+      <label htmlFor="">New Password</label>
+      <br />
+      <input
+        placeholder="Password"
+        type="password"
+        className="bg-black"
+        onChange={(e) => set_password(e.target.value)}
+      />
+      <button onClick={on_create}>Create</button>
+    </div>
+  );
+};
+
+export default Create;

popup/src/pages/my-passwords/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const MyPasswords = () => {
+  return <div>MyPasswords</div>;
+};
+
+export default MyPasswords;

popup/src/pages/unlock/index.tsx

@@ -0,0 +1,27 @@
+import React, { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { WalletContext } from "../../contexts/WalletContext";
+
+const Unlock = () => {
+  const [password, set_password] = useState("");
+  const navigate = useNavigate();
+  const wallet_context = useContext(WalletContext);
+
+  const on_unlock = () => {
+    wallet_context.unlock(password);
+    navigate("/wallet");
+  };
+  return (
+    <div>
+      Unlock
+      <input
+        type="password"
+        placeholder="password"
+        onChange={(e) => set_password(e.target.value)}
+      />
+      <button onClick={on_unlock}>Unlock</button>
+    </div>
+  );
+};
+
+export default Unlock;

popup/src/pages/wallet/index.tsx

@@ -0,0 +1,9 @@
+import React, { useContext } from "react";
+import { WalletContext } from "../../contexts/WalletContext";
+
+const Wallet = () => {
+  const wallet_context = useContext(WalletContext);
+  return <div>{wallet_context.wallet?.address}</div>;
+};
+
+export default Wallet;

popup/src/wallet/wallet.ts

@@ -0,0 +1,16 @@
+import { ethers, Wallet } from "ethers";
+
+export const WALLET_ENCRYPTED_KEY = "WALLET_ENCRYPTED"
+
+export const get_wallet_from_local = async (password: string): Promise<Wallet> => {
+    const encrypted_json = localStorage.getItem(WALLET_ENCRYPTED_KEY)
+    if (!encrypted_json) throw new Error("Wallet not found")
+    const wallet = await ethers.Wallet.fromEncryptedJson(encrypted_json, password)
+    return wallet as Wallet
+}
+
+export const create_wallet = async (password: string) => {
+    const wallet = ethers.Wallet.createRandom()
+    const encrypt_res = await wallet.encrypt(password)
+    localStorage.setItem(WALLET_ENCRYPTED_KEY, encrypt_res)
+}

popup/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

popup/yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.2.0.tgz#e1a84fca468f4b337816fcb7f0964beb620ba855"
   integrity sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==
 
+"@adraffy/[email protected]":
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.8.9.tgz#67b3acadebbb551669c9a1da15fac951db795b85"
+  integrity sha512-93OmGCV0vO8+JQ3FHG+gZk/MPHzzMPDRiCiFcCQNTCnHaaxsacO3ScTPGlu2wX2dOtgfalbchPcw1cOYYjHCYQ==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -1556,6 +1561,16 @@
   dependencies:
     eslint-scope "5.1.1"
 
+"@noble/[email protected]":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.1.2.tgz#e9e035b9b166ca0af657a7848eb2718f0f22f183"
+  integrity sha512-KYRCASVTv6aeUi1tsF8/vpyR7zpfs3FUzy2Jqm+MU+LmUKhQ0y2FpfwqkCcxSg2ua4GALJd8k2R76WxwZGbQpA==
+
+"@noble/[email protected]":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1592,6 +1607,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@remix-run/[email protected]":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.4.0.tgz#74935d538e4df8893e47831a7aea362f295bcd39"
+  integrity sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -2446,6 +2466,11 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+[email protected]:
+  version "4.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-4.0.0-beta.3.tgz#da2253f0ff03a0b3a9e445c8cbdf78e7fda7d48c"
+  integrity sha512-/xJX0/VTPcbc5xQE2VUP91y1xN8q/rDfhEzLm+vLc3hYvb5+qHCnpJRuFcrKn63zumK/sCwYYzhG8HP78JYSTA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -4270,6 +4295,18 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+ethers@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.1.0.tgz#de9c3acbb865fda6c080e80ec88ae0aada046947"
+  integrity sha512-aC45YGbvgXt7Nses5WsdQwc1cUIrrQt32zeFShNW7ZT3RQCIHBnd4nmbE5sJmrp70uTdwkRHkr4cZr1D/YwFPg==
+  dependencies:
+    "@adraffy/ens-normalize" "1.8.9"
+    "@noble/hashes" "1.1.2"
+    "@noble/secp256k1" "1.7.1"
+    aes-js "4.0.0-beta.3"
+    tslib "2.4.0"
+    ws "8.5.0"
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -7532,6 +7569,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.9.0.tgz#dd8b4e461453bd4cad2e6404493d1a5b4bfea758"
+  integrity sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==
+  dependencies:
+    "@remix-run/router" "1.4.0"
+    react-router "6.9.0"
+
+[email protected]:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.9.0.tgz#0f503d9becbc62d9e4ddc0f9bd4026e0fd29fbf5"
+  integrity sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==
+  dependencies:
+    "@remix-run/router" "1.4.0"
+
 [email protected]:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
@@ -8403,7 +8455,7 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwindcss@^3.0.2:
+tailwindcss@^3.0.2, tailwindcss@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"
   integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==
@@ -8571,6 +8623,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+[email protected]:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -9239,6 +9296,11 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+[email protected]:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
+  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
+
 ws@^7.4.6:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"