From 1a35f56beb221541379de2c6e866d14db45b629b Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Tue, 7 Feb 2023 23:58:25 +0800
Subject: [PATCH 01/24] feat: generate seed

---
 config/config.ts                              |  21 +-
 package-lock.json                             | 567 +++++++++++++++++-
 package.json                                  |   2 +
 src/extension/background/bootstrap.ts         |  15 +
 .../controller/wallet.controller.ts           |  11 +
 src/extension/background/router.ts            |   2 +
 .../background/service/wallet.service.ts      |  14 +
 src/pages/Home/index.tsx                      |  82 ++-
 8 files changed, 685 insertions(+), 29 deletions(-)
 create mode 100644 src/extension/background/controller/wallet.controller.ts
 create mode 100644 src/extension/background/service/wallet.service.ts

diff --git a/config/config.ts b/config/config.ts
index ba293ef..d0f29b7 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -1,9 +1,9 @@
 import { defineConfig } from '@umijs/max'
-// import fs from 'fs'
+import fs from 'fs'
 import GenerateJsonPlugin from 'generate-json-webpack-plugin'
+import path from 'path'
+import type { Compiler } from 'webpack'
 
-// import path from 'path'
-// import type { Compiler } from 'webpack'
 import manifest from './manifest'
 import routes from './routes'
 
@@ -53,6 +53,21 @@ export default defineConfig({
       memo.plugins.delete('hmr')
     }
 
+    memo.plugin('fixCSP').use(
+      class {
+        apply(compiler: Compiler) {
+          compiler.hooks.done.tap('fixCSP', () => {
+            const htmlPath = path.resolve(__dirname, '../dist/index.html')
+            const html = fs.readFileSync(htmlPath).toString()
+            fs.writeFileSync(
+              htmlPath,
+              html.replace(/<script>\s*.*\s*<\/script>/g, ''),
+            )
+          })
+        }
+      },
+    )
+
     // generate manifest.json, it will auto load version/env
     memo
       .plugin('generate-json-webpack-plugin')
diff --git a/package-lock.json b/package-lock.json
index 55d2a4b..1f120eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@ant-design/icons": "^4.7.0",
         "@ant-design/pro-components": "^2.0.1",
         "@deficonnect/utils": "^2.0.3",
+        "@polkadot/ui-keyring": "^2.11.1",
+        "@polkadot/util-crypto": "^10.3.1",
         "@umijs/max": "^4.0.47",
         "@walletconnect/utils": "^1.8.0",
         "ahooks": "^3.7.4",
@@ -3575,6 +3577,16 @@
         "eslint-scope": "5.1.1"
       }
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@noble/hashes/-/hashes-1.1.5.tgz",
+      "integrity": "sha512-LTMZiiLc+V4v1Yi16TD6aX2gmtKszNye0pQgbaLqkvhIqP7nVsSaJsWloGQjJfJ8offaoP5GtX3yY5swbcJxxQ=="
+    },
+    "node_modules/@noble/secp256k1": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz",
+      "integrity": "sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3852,6 +3864,268 @@
         }
       }
     },
+    "node_modules/@polkadot/keyring": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/keyring/-/keyring-10.3.1.tgz",
+      "integrity": "sha512-xBkUtyQ766NVS1ccSYbQssWpxAhSf0uwkw9Amj8TFhu++pnZcVm+EmM2VczWqgOkmWepO7MGRjEXeOIw1YUGiw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "10.3.1",
+        "@polkadot/util-crypto": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "10.3.1",
+        "@polkadot/util-crypto": "10.3.1"
+      }
+    },
+    "node_modules/@polkadot/networks": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/networks/-/networks-10.3.1.tgz",
+      "integrity": "sha512-W9E1g6zRbIVyF7sGqbpxH0P6caxtBHNEwvDa5/8ZQi9UsLj6mUs0HdwZtAdIo3KcSO4uAyV9VYJjY/oAWWcnXg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "10.3.1",
+        "@substrate/ss58-registry": "^1.38.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/ui-keyring": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-keyring/-/ui-keyring-2.11.1.tgz",
+      "integrity": "sha512-uCOVrRv2nEVkvmM6KK/H2YzHFAXBYTAm+VnLoCMG1HxHLmKXQCCH7YYNppJNjKqJjQ+Gd2+27Yqs5Y28bOfkSA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/ui-settings": "2.11.1",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "mkdirp": "^2.1.3",
+        "rxjs": "^7.8.0",
+        "store": "^2.0.12"
+      },
+      "peerDependencies": {
+        "@polkadot/keyring": "*",
+        "@polkadot/ui-settings": "*",
+        "@polkadot/util": "*"
+      }
+    },
+    "node_modules/@polkadot/ui-settings": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-settings/-/ui-settings-2.11.1.tgz",
+      "integrity": "sha512-7yZwb3VxGh7VPHkyygktL7Oep0c4XUyKkYGwSmgP2Gt2IcvnGXFUQVSEARKs9FCanl19f2CEU1m19+FFrjlUNQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/networks": "^10.3.1",
+        "@polkadot/util": "^10.3.1",
+        "eventemitter3": "^4.0.7",
+        "store": "^2.0.12"
+      },
+      "peerDependencies": {
+        "@polkadot/networks": "*",
+        "@polkadot/util": "*"
+      }
+    },
+    "node_modules/@polkadot/util": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-global": "10.3.1",
+        "@polkadot/x-textdecoder": "10.3.1",
+        "@polkadot/x-textencoder": "10.3.1",
+        "@types/bn.js": "^5.1.1",
+        "bn.js": "^5.2.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/util-crypto": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util-crypto/-/util-crypto-10.3.1.tgz",
+      "integrity": "sha512-viqLMuNGrbB2lyDIYdXAl3tq/Em/Y7ql2FvCTHJmxXaB5C1NXiWf1SqFAahUJKohL+ke5IL0jr19wZu/f88lIQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@noble/hashes": "1.1.5",
+        "@noble/secp256k1": "1.7.1",
+        "@polkadot/networks": "10.3.1",
+        "@polkadot/util": "10.3.1",
+        "@polkadot/wasm-crypto": "^6.4.1",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-randomvalues": "10.3.1",
+        "@scure/base": "1.1.1",
+        "ed2curve": "^0.3.0",
+        "tweetnacl": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "10.3.1"
+      }
+    },
+    "node_modules/@polkadot/wasm-bridge": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-bridge/-/wasm-bridge-6.4.1.tgz",
+      "integrity": "sha512-QZDvz6dsUlbYsaMV5biZgZWkYH9BC5AfhT0f0/knv8+LrbAoQdP3Asbvddw8vyU9sbpuCHXrd4bDLBwUCRfrBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*",
+        "@polkadot/x-randomvalues": "*"
+      }
+    },
+    "node_modules/@polkadot/wasm-crypto": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto/-/wasm-crypto-6.4.1.tgz",
+      "integrity": "sha512-FH+dcDPdhSLJvwL0pMLtn/LIPd62QDPODZRCmDyw+pFjLOMaRBc7raomWUOqyRWJTnqVf/iscc2rLVLNMyt7ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-bridge": "6.4.1",
+        "@polkadot/wasm-crypto-asmjs": "6.4.1",
+        "@polkadot/wasm-crypto-init": "6.4.1",
+        "@polkadot/wasm-crypto-wasm": "6.4.1",
+        "@polkadot/wasm-util": "6.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*",
+        "@polkadot/x-randomvalues": "*"
+      }
+    },
+    "node_modules/@polkadot/wasm-crypto-asmjs": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-6.4.1.tgz",
+      "integrity": "sha512-UxZTwuBZlnODGIQdCsE2Sn/jU0O2xrNQ/TkhRFELfkZXEXTNu4lw6NpaKq7Iey4L+wKd8h4lT3VPVkMcPBLOvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*"
+      }
+    },
+    "node_modules/@polkadot/wasm-crypto-init": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-init/-/wasm-crypto-init-6.4.1.tgz",
+      "integrity": "sha512-1ALagSi/nfkyFaH6JDYfy/QbicVbSn99K8PV9rctDUfxc7P06R7CoqbjGQ4OMPX6w1WYVPU7B4jPHGLYBlVuMw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-bridge": "6.4.1",
+        "@polkadot/wasm-crypto-asmjs": "6.4.1",
+        "@polkadot/wasm-crypto-wasm": "6.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*",
+        "@polkadot/x-randomvalues": "*"
+      }
+    },
+    "node_modules/@polkadot/wasm-crypto-wasm": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-6.4.1.tgz",
+      "integrity": "sha512-3VV9ZGzh0ZY3SmkkSw+0TRXxIpiO0nB8lFwlRgcwaCihwrvLfRnH9GI8WE12mKsHVjWTEVR3ogzILJxccAUjDA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-util": "6.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*"
+      }
+    },
+    "node_modules/@polkadot/wasm-util": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-util/-/wasm-util-6.4.1.tgz",
+      "integrity": "sha512-Uwo+WpEsDmFExWC5kTNvsVhvqXMZEKf4gUHXFn4c6Xz4lmieRT5g+1bO1KJ21pl4msuIgdV3Bksfs/oiqMFqlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*"
+      }
+    },
+    "node_modules/@polkadot/x-bigint": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-bigint/-/x-bigint-10.3.1.tgz",
+      "integrity": "sha512-hXtnwy9LXmV43B9pT8gY1zwdNRhpPBEOk1PfL2Ze0Iw2zd+lbljD3GwDP5mkBfIYIw/s15eRTjiUIKfpTRRDXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-global": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.3.1.tgz",
+      "integrity": "sha512-kPAVYP2H3aTjS7BKqGkYV1I3Mu03dnRyeX+rDebC8xoN+hUC5bhb7dzCtb5F8DdqlvFl67ZxRaVtq2XUssGTKQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-randomvalues": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-randomvalues/-/x-randomvalues-10.3.1.tgz",
+      "integrity": "sha512-9b0hakA4ERcWui7LalqYN+gjYpHpL5OLBhktco62CI9oVNYYKVY6H5+iMO+d3I5U+MecqAqdejl0+L2xhzk3sw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-textdecoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-textencoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rc-component/context": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
@@ -3929,6 +4203,11 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@scure/base": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@scure/base/-/base-1.1.1.tgz",
+      "integrity": "sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA=="
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.25.21",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.21.tgz",
@@ -3946,6 +4225,11 @@
         "postcss-syntax": ">=0.36.2"
       }
     },
+    "node_modules/@substrate/ss58-registry": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmmirror.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz",
+      "integrity": "sha512-sHiVRWekGMRZAjPukN9/W166NM6D5wtHcK6RVyLy66kg3CHNZ1BXfpXcjOiXSwhbd7guQFDEwnOVaDrbk1XL1g=="
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
@@ -4363,6 +4647,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/bn.js": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/bn.js/-/bn.js-5.1.1.tgz",
+      "integrity": "sha512-qNrYbZqMx0uJAfKnKclPh+dTwK33KfLHYqtyODwd5HnXOjnkhc4qgn3BrK6RWyGZm5+sIFE7Q7Vz6QQtJB7w7g==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -8608,6 +8900,14 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/ed2curve": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/ed2curve/-/ed2curve-0.3.0.tgz",
+      "integrity": "sha512-8w2fmmq3hv9rCrcI7g9hms2pMunQr1JINfcjwR9tAyZqhtyaMN991lF/ZfHfr5tzZQ8c7y7aBgZbjfbd0fjFwQ==",
+      "dependencies": {
+        "tweetnacl": "1.x.x"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
@@ -9605,6 +9905,11 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -12546,6 +12851,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-2.1.3.tgz",
+      "integrity": "sha512-sjAkg21peAG9HS+Dkx7hlG9Ztx7HLeKnvB3NQRcu/mltCVmvkF0pisbiTSfDVYTT86XEfZrTUosLdZLStquZUw==",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -15494,7 +15810,6 @@
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
       "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
-      "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15924,6 +16239,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/store": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmmirror.com/store/-/store-2.0.12.tgz",
+      "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -16880,6 +17203,11 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
     },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
     "node_modules/type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
@@ -20145,6 +20473,16 @@
         "eslint-scope": "5.1.1"
       }
     },
+    "@noble/hashes": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@noble/hashes/-/hashes-1.1.5.tgz",
+      "integrity": "sha512-LTMZiiLc+V4v1Yi16TD6aX2gmtKszNye0pQgbaLqkvhIqP7nVsSaJsWloGQjJfJ8offaoP5GtX3yY5swbcJxxQ=="
+    },
+    "@noble/secp256k1": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz",
+      "integrity": "sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -20261,6 +20599,186 @@
         "source-map": "^0.7.3"
       }
     },
+    "@polkadot/keyring": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/keyring/-/keyring-10.3.1.tgz",
+      "integrity": "sha512-xBkUtyQ766NVS1ccSYbQssWpxAhSf0uwkw9Amj8TFhu++pnZcVm+EmM2VczWqgOkmWepO7MGRjEXeOIw1YUGiw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "10.3.1",
+        "@polkadot/util-crypto": "10.3.1"
+      }
+    },
+    "@polkadot/networks": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/networks/-/networks-10.3.1.tgz",
+      "integrity": "sha512-W9E1g6zRbIVyF7sGqbpxH0P6caxtBHNEwvDa5/8ZQi9UsLj6mUs0HdwZtAdIo3KcSO4uAyV9VYJjY/oAWWcnXg==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "10.3.1",
+        "@substrate/ss58-registry": "^1.38.0"
+      }
+    },
+    "@polkadot/ui-keyring": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-keyring/-/ui-keyring-2.11.1.tgz",
+      "integrity": "sha512-uCOVrRv2nEVkvmM6KK/H2YzHFAXBYTAm+VnLoCMG1HxHLmKXQCCH7YYNppJNjKqJjQ+Gd2+27Yqs5Y28bOfkSA==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/ui-settings": "2.11.1",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "mkdirp": "^2.1.3",
+        "rxjs": "^7.8.0",
+        "store": "^2.0.12"
+      }
+    },
+    "@polkadot/ui-settings": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-settings/-/ui-settings-2.11.1.tgz",
+      "integrity": "sha512-7yZwb3VxGh7VPHkyygktL7Oep0c4XUyKkYGwSmgP2Gt2IcvnGXFUQVSEARKs9FCanl19f2CEU1m19+FFrjlUNQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/networks": "^10.3.1",
+        "@polkadot/util": "^10.3.1",
+        "eventemitter3": "^4.0.7",
+        "store": "^2.0.12"
+      }
+    },
+    "@polkadot/util": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-global": "10.3.1",
+        "@polkadot/x-textdecoder": "10.3.1",
+        "@polkadot/x-textencoder": "10.3.1",
+        "@types/bn.js": "^5.1.1",
+        "bn.js": "^5.2.1"
+      }
+    },
+    "@polkadot/util-crypto": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util-crypto/-/util-crypto-10.3.1.tgz",
+      "integrity": "sha512-viqLMuNGrbB2lyDIYdXAl3tq/Em/Y7ql2FvCTHJmxXaB5C1NXiWf1SqFAahUJKohL+ke5IL0jr19wZu/f88lIQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@noble/hashes": "1.1.5",
+        "@noble/secp256k1": "1.7.1",
+        "@polkadot/networks": "10.3.1",
+        "@polkadot/util": "10.3.1",
+        "@polkadot/wasm-crypto": "^6.4.1",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-randomvalues": "10.3.1",
+        "@scure/base": "1.1.1",
+        "ed2curve": "^0.3.0",
+        "tweetnacl": "^1.0.3"
+      }
+    },
+    "@polkadot/wasm-bridge": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-bridge/-/wasm-bridge-6.4.1.tgz",
+      "integrity": "sha512-QZDvz6dsUlbYsaMV5biZgZWkYH9BC5AfhT0f0/knv8+LrbAoQdP3Asbvddw8vyU9sbpuCHXrd4bDLBwUCRfrBQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "@polkadot/wasm-crypto": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto/-/wasm-crypto-6.4.1.tgz",
+      "integrity": "sha512-FH+dcDPdhSLJvwL0pMLtn/LIPd62QDPODZRCmDyw+pFjLOMaRBc7raomWUOqyRWJTnqVf/iscc2rLVLNMyt7ag==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-bridge": "6.4.1",
+        "@polkadot/wasm-crypto-asmjs": "6.4.1",
+        "@polkadot/wasm-crypto-init": "6.4.1",
+        "@polkadot/wasm-crypto-wasm": "6.4.1",
+        "@polkadot/wasm-util": "6.4.1"
+      }
+    },
+    "@polkadot/wasm-crypto-asmjs": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-6.4.1.tgz",
+      "integrity": "sha512-UxZTwuBZlnODGIQdCsE2Sn/jU0O2xrNQ/TkhRFELfkZXEXTNu4lw6NpaKq7Iey4L+wKd8h4lT3VPVkMcPBLOvA==",
+      "requires": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "@polkadot/wasm-crypto-init": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-init/-/wasm-crypto-init-6.4.1.tgz",
+      "integrity": "sha512-1ALagSi/nfkyFaH6JDYfy/QbicVbSn99K8PV9rctDUfxc7P06R7CoqbjGQ4OMPX6w1WYVPU7B4jPHGLYBlVuMw==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-bridge": "6.4.1",
+        "@polkadot/wasm-crypto-asmjs": "6.4.1",
+        "@polkadot/wasm-crypto-wasm": "6.4.1"
+      }
+    },
+    "@polkadot/wasm-crypto-wasm": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-6.4.1.tgz",
+      "integrity": "sha512-3VV9ZGzh0ZY3SmkkSw+0TRXxIpiO0nB8lFwlRgcwaCihwrvLfRnH9GI8WE12mKsHVjWTEVR3ogzILJxccAUjDA==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "@polkadot/wasm-util": "6.4.1"
+      }
+    },
+    "@polkadot/wasm-util": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/wasm-util/-/wasm-util-6.4.1.tgz",
+      "integrity": "sha512-Uwo+WpEsDmFExWC5kTNvsVhvqXMZEKf4gUHXFn4c6Xz4lmieRT5g+1bO1KJ21pl4msuIgdV3Bksfs/oiqMFqlw==",
+      "requires": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "@polkadot/x-bigint": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-bigint/-/x-bigint-10.3.1.tgz",
+      "integrity": "sha512-hXtnwy9LXmV43B9pT8gY1zwdNRhpPBEOk1PfL2Ze0Iw2zd+lbljD3GwDP5mkBfIYIw/s15eRTjiUIKfpTRRDXw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      }
+    },
+    "@polkadot/x-global": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.3.1.tgz",
+      "integrity": "sha512-kPAVYP2H3aTjS7BKqGkYV1I3Mu03dnRyeX+rDebC8xoN+hUC5bhb7dzCtb5F8DdqlvFl67ZxRaVtq2XUssGTKQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13"
+      }
+    },
+    "@polkadot/x-randomvalues": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-randomvalues/-/x-randomvalues-10.3.1.tgz",
+      "integrity": "sha512-9b0hakA4ERcWui7LalqYN+gjYpHpL5OLBhktco62CI9oVNYYKVY6H5+iMO+d3I5U+MecqAqdejl0+L2xhzk3sw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      }
+    },
+    "@polkadot/x-textdecoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      }
+    },
+    "@polkadot/x-textencoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      }
+    },
     "@rc-component/context": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
@@ -20310,6 +20828,11 @@
         "rc-util": "^5.24.4"
       }
     },
+    "@scure/base": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@scure/base/-/base-1.1.1.tgz",
+      "integrity": "sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA=="
+    },
     "@sinclair/typebox": {
       "version": "0.25.21",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.21.tgz",
@@ -20323,6 +20846,11 @@
         "@babel/core": "^7.17.9"
       }
     },
+    "@substrate/ss58-registry": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmmirror.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz",
+      "integrity": "sha512-sHiVRWekGMRZAjPukN9/W166NM6D5wtHcK6RVyLy66kg3CHNZ1BXfpXcjOiXSwhbd7guQFDEwnOVaDrbk1XL1g=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
@@ -20583,6 +21111,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/bn.js": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/bn.js/-/bn.js-5.1.1.tgz",
+      "integrity": "sha512-qNrYbZqMx0uJAfKnKclPh+dTwK33KfLHYqtyODwd5HnXOjnkhc4qgn3BrK6RWyGZm5+sIFE7Q7Vz6QQtJB7w7g==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -24031,6 +24567,14 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "ed2curve": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/ed2curve/-/ed2curve-0.3.0.tgz",
+      "integrity": "sha512-8w2fmmq3hv9rCrcI7g9hms2pMunQr1JINfcjwR9tAyZqhtyaMN991lF/ZfHfr5tzZQ8c7y7aBgZbjfbd0fjFwQ==",
+      "requires": {
+        "tweetnacl": "1.x.x"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
@@ -24676,6 +25220,11 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -26827,6 +27376,11 @@
         }
       }
     },
+    "mkdirp": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-2.1.3.tgz",
+      "integrity": "sha512-sjAkg21peAG9HS+Dkx7hlG9Ztx7HLeKnvB3NQRcu/mltCVmvkF0pisbiTSfDVYTT86XEfZrTUosLdZLStquZUw=="
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -28881,7 +29435,6 @@
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
       "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
-      "dev": true,
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -29216,6 +29769,11 @@
         "internal-slot": "^1.0.4"
       }
     },
+    "store": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmmirror.com/store/-/store-2.0.12.tgz",
+      "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw=="
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -29947,6 +30505,11 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw=="
     },
+    "tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
     "type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
diff --git a/package.json b/package.json
index d1665a4..662313e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "^2.0.1",
     "@deficonnect/utils": "^2.0.3",
+    "@polkadot/ui-keyring": "^2.11.1",
+    "@polkadot/util-crypto": "^10.3.1",
     "@umijs/max": "^4.0.47",
     "@walletconnect/utils": "^1.8.0",
     "ahooks": "^3.7.4",
diff --git a/src/extension/background/bootstrap.ts b/src/extension/background/bootstrap.ts
index 399dd6b..aa022f7 100644
--- a/src/extension/background/bootstrap.ts
+++ b/src/extension/background/bootstrap.ts
@@ -1,3 +1,5 @@
+import { cryptoWaitReady } from '@polkadot/util-crypto'
+
 import { createServer } from './app/server'
 import Job from './job'
 import Koa from './koa-ts'
@@ -26,6 +28,19 @@ export const server = createServer({
   },
   beforeStart: async () => {
     await Job.startAllJobs()
+
+    // initial setup
+    cryptoWaitReady()
+      .then((): void => {
+        console.log('crypto initialized')
+
+        // load all the keyring data
+
+        console.log('initialization completed')
+      })
+      .catch((error): void => {
+        console.error('initialization failed', error)
+      })
   },
   afterStart: async () => {},
 })
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
new file mode 100644
index 0000000..042eba4
--- /dev/null
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -0,0 +1,11 @@
+import WalletService from '../service/wallet.service'
+import { KoaContext } from './../koa-ts/lib/context'
+
+const WalletController = {
+  async wallet_createSeed(ctx: KoaContext) {
+    const result = await WalletService.createSeed()
+    return ctx.pushResponse(result)
+  },
+}
+
+export default WalletController
diff --git a/src/extension/background/router.ts b/src/extension/background/router.ts
index 93196ef..de0ddb3 100644
--- a/src/extension/background/router.ts
+++ b/src/extension/background/router.ts
@@ -1,10 +1,12 @@
 import DappController from './controller/dapp.controller'
 import ExampleController from './controller/example.controller'
+import WalletController from './controller/wallet.controller'
 import { KoaContext } from './koa-ts'
 
 const routers = {
   ...ExampleController,
   ...DappController,
+  ...WalletController,
 }
 
 export type IRouters = keyof typeof routers
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
new file mode 100644
index 0000000..3000cf6
--- /dev/null
+++ b/src/extension/background/service/wallet.service.ts
@@ -0,0 +1,14 @@
+import { mnemonicGenerate } from '@polkadot/util-crypto'
+
+const WalletService = {
+  async createSeed() {
+    const seed = mnemonicGenerate()
+
+    return {
+      // address: keyring.createFromUri(seed).address,
+      seed,
+    }
+  },
+}
+
+export default WalletService
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 9a1eb45..d45f5d1 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,8 +1,7 @@
 import { PageContainer } from '@ant-design/pro-components'
 import { useModel } from '@umijs/max'
 import { useRequest } from 'ahooks'
-import { Input } from 'antd'
-import { useState } from 'react'
+import { Button, Form, Input, Typography, message } from 'antd'
 
 import { trim } from '@/utils/format'
 
@@ -12,11 +11,16 @@ import Guide from '@/components/Guide'
 
 import styles from './index.less'
 
+interface FormFields {
+  username: string
+}
+
 const HomePage: React.FC = () => {
   const { name } = useModel('global')
-  const [state, setState] = useState('')
 
-  const { run, error, data, loading } = useRequest(
+  const [form] = Form.useForm<FormFields>()
+
+  const { run, data } = useRequest(
     async (username: string) => {
       return rpcClient.sendRequest({
         method: 'example_queryUserInfo',
@@ -27,32 +31,62 @@ const HomePage: React.FC = () => {
         ],
       })
     },
-    { manual: true },
+    {
+      manual: true,
+      onError: (e) => {
+        message.error(e.message)
+      },
+    },
+  )
+
+  const { run: runCreateSeed, data: accountData } = useRequest(
+    async () => {
+      return rpcClient.sendRequest({
+        method: 'wallet_createSeed',
+      })
+    },
+    {
+      manual: true,
+      onError: (e) => {
+        message.error(e.message)
+      },
+    },
   )
+
+  const onFinished = (values: FormFields) => {
+    const { username } = values
+    run(username)
+  }
+
   return (
     <PageContainer ghost>
       <div className={styles.container}>
         <Guide name={trim(name)} />
         <div>
-          <Input
-            onChange={(e) => setState(e.target.value)}
-            value={state}
-            placeholder="Please enter username"
-            style={{ width: 240, marginRight: 16 }}
-          />
-          <button disabled={loading} type="button" onClick={() => run(state)}>
-            {loading ? 'Loading' : 'Edit'}
-          </button>
-          {error && <>{error.message}</>}
-          {data && (
-            <div>
-              username: {data.username}
-              <br />
-              age: {data.age}
-              <br />
-              school: {data.school}
-            </div>
-          )}
+          <Form form={form} onFinish={onFinished} style={{ maxWidth: 600 }}>
+            <Form.Item label="Your name" name="username">
+              <Input placeholder="input placeholders" />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+              <Button onClick={runCreateSeed}>Create new account</Button>
+            </Form.Item>
+          </Form>
+          <Typography>
+            <Typography.Paragraph>
+              Username: {data?.username}
+            </Typography.Paragraph>
+            <Typography.Paragraph>Age: {data?.age}</Typography.Paragraph>
+            <Typography.Paragraph>School: {data?.school}</Typography.Paragraph>
+            <Typography.Paragraph>
+              Seed: {accountData?.seed}
+            </Typography.Paragraph>
+            {/* <Typography.Paragraph>
+              Address: {accountData?.address}
+            </Typography.Paragraph> */}
+          </Typography>
         </div>
       </div>
     </PageContainer>

From 9c9fbe31e0dc1c776e112343af94a5d466341e0e Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 00:32:34 +0800
Subject: [PATCH 02/24] feat: finished generate phrase and address

---
 config/manifest.ts                            |   5 +-
 package-lock.json                             | 969 ++++++++++++++++++
 package.json                                  |   1 +
 src/extension/background/bootstrap.ts         |   4 +-
 .../controller/wallet.controller.ts           |  11 +-
 .../background/service/wallet.service.ts      |   9 +-
 src/pages/Home/index.tsx                      |  13 +-
 7 files changed, 1001 insertions(+), 11 deletions(-)

diff --git a/config/manifest.ts b/config/manifest.ts
index 32d947a..faf90d9 100644
--- a/config/manifest.ts
+++ b/config/manifest.ts
@@ -28,7 +28,7 @@ export default {
       '512': 'icon-512.png',
     },
   },
-  permissions: ['alarms'],
+  permissions: ['alarms', 'storage'],
   host_permissions: ['<all_urls>'],
   content_scripts: [
     {
@@ -58,4 +58,7 @@ export default {
       matches: ['<all_urls>'],
     },
   ],
+  content_security_policy: {
+    extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
+  },
 }
diff --git a/package-lock.json b/package-lock.json
index 1f120eb..b35beb4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@ant-design/icons": "^4.7.0",
         "@ant-design/pro-components": "^2.0.1",
         "@deficonnect/utils": "^2.0.3",
+        "@polkadot/extension-base": "^0.44.8",
         "@polkadot/ui-keyring": "^2.11.1",
         "@polkadot/util-crypto": "^10.3.1",
         "@umijs/max": "^4.0.47",
@@ -3864,6 +3865,161 @@
         }
       }
     },
+    "node_modules/@polkadot/api": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api/-/api-9.13.6.tgz",
+      "integrity": "sha512-dvnic7MbrYc7bAHKuEaR9mfaHZljXzC+UaXuKT8tpGJuKrus6qeUqEWPh4Ak9LLqhW87PCTrpeGaTz22djSmLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api-augment": "9.13.6",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/api-derive": "9.13.6",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/rpc-provider": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/types-known": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "eventemitter3": "^5.0.0",
+        "rxjs": "^7.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/api-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-augment/-/api-augment-9.13.6.tgz",
+      "integrity": "sha512-ndurtzLazGiIxhRDdisDBbzN57gbi/v5414LYAWyYMannPTRdIntpn/dOkJ7Uym3ONJhmWZx5umRUGv6Uy9gUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/api-base": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-base/-/api-base-9.13.6.tgz",
+      "integrity": "sha512-07zQD9Mb8qO9+EpvuEKl6ZUSj/UJl4ZwCCrp44pxymkHDM62efSQhSkPOyNRVTihEYbIercK//Ry4aUfvwoU1w==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "rxjs": "^7.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/api-derive": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-derive/-/api-derive-9.13.6.tgz",
+      "integrity": "sha512-9P0zbwSzhzwaUDu6XuodrfM3PntKb2i6O119HQb5CkeHWdSUTPYq1D4/0PMsCCrfyxh5PvJrMIdvEoleAjA52g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api": "9.13.6",
+        "@polkadot/api-augment": "9.13.6",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "rxjs": "^7.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/api/node_modules/eventemitter3": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.0.tgz",
+      "integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
+    },
+    "node_modules/@polkadot/extension-base": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-base/-/extension-base-0.44.8.tgz",
+      "integrity": "sha512-aMpT46lYFAGi+jed0dWJTxjAyXn9iV/d+zpQIM7bx256vk9GZGxo/EbEDFTjpad//sxgmVaaDwrqlqtx8DhvVA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/api": "^9.11.1",
+        "@polkadot/extension-chains": "^0.44.8",
+        "@polkadot/extension-dapp": "^0.44.8",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/keyring": "^10.2.3",
+        "@polkadot/networks": "^10.2.3",
+        "@polkadot/phishing": "^0.18.13",
+        "@polkadot/rpc-provider": "^9.11.1",
+        "@polkadot/types": "^9.11.1",
+        "@polkadot/ui-keyring": "^2.9.15",
+        "@polkadot/ui-settings": "^2.9.15",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "eventemitter3": "^4.0.7",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "node_modules/@polkadot/extension-chains": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-chains/-/extension-chains-0.44.8.tgz",
+      "integrity": "sha512-zBH/IrnY2mieo36UGAanTyuCa9r1zw0Ih2RlhFy9rJzB+Pg9IsQvvVHIsP7B7CGAHEq5MfIwdLzCzQJDHh4bYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/networks": "^10.2.3",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3"
+      },
+      "peerDependencies": {
+        "@polkadot/api": "*",
+        "@polkadot/types": "*"
+      }
+    },
+    "node_modules/@polkadot/extension-dapp": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-dapp/-/extension-dapp-0.44.8.tgz",
+      "integrity": "sha512-CaGrY+Vh9u2ABPpLsbMEVQniQDKreBWEmtp0RzfmIbed8lmmOgwtfDZjb7ncTNR79WJX+1AD+VX5dKQtvT3S4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3"
+      },
+      "peerDependencies": {
+        "@polkadot/api": "*",
+        "@polkadot/util": "*",
+        "@polkadot/util-crypto": "*"
+      }
+    },
+    "node_modules/@polkadot/extension-inject": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-inject/-/extension-inject-0.44.8.tgz",
+      "integrity": "sha512-srBjCgOMUuQTCvU2Mu6hPHEmrxqJb+DImh8lHy79bpz4IoTATepuJGdeDONUiLS4KFhUstFSxkVsbL/4YSEVng==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/rpc-provider": "^9.11.1",
+        "@polkadot/types": "^9.11.1",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "@polkadot/x-global": "^10.2.3"
+      },
+      "peerDependencies": {
+        "@polkadot/api": "*"
+      }
+    },
     "node_modules/@polkadot/keyring": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/keyring/-/keyring-10.3.1.tgz",
@@ -3894,6 +4050,164 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@polkadot/phishing": {
+      "version": "0.18.13",
+      "resolved": "https://registry.npmmirror.com/@polkadot/phishing/-/phishing-0.18.13.tgz",
+      "integrity": "sha512-8GteEs/BF881ZRcxBtU7BEXNq8dXQLa2Xxc7JUTN/grrdRKPRtg0Hl/+5xjDe5VvyeTGV2mIp629S5Mpzhxo5g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "@polkadot/x-fetch": "^10.2.3"
+      }
+    },
+    "node_modules/@polkadot/rpc-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-augment/-/rpc-augment-9.13.6.tgz",
+      "integrity": "sha512-ZOEdS9PLfhpojuPJKtV1Z3C6fNXOCAjdFgF3YMfv3xqK9Xtj9+TDxGVcPtY0wPLtDoNmaHJq3m1gQKfTI5ZK5g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/rpc-core": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-core/-/rpc-core-9.13.6.tgz",
+      "integrity": "sha512-/LH4etyCsTTO43qW5sGcsG0yN4KchaAnQrejxheanyIrv8mB2Px+8ioLJJt1IU+iSpJO8VVJp64zjsegEK/PVw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/rpc-provider": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "rxjs": "^7.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/rpc-provider": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-provider/-/rpc-provider-9.13.6.tgz",
+      "integrity": "sha512-1hZ1Z3L5HRxE83jjVqDmQn20sq5WK2bSIGbxPLp/a0DJBpDmqhmVMVkh9KvK7WN6lpmNSJSr2W9iJV6vAQkjRA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-support": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "@polkadot/x-fetch": "^10.3.1",
+        "@polkadot/x-global": "^10.3.1",
+        "@polkadot/x-ws": "^10.3.1",
+        "eventemitter3": "^5.0.0",
+        "mock-socket": "^9.1.5",
+        "nock": "^13.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@substrate/connect": "0.7.19"
+      }
+    },
+    "node_modules/@polkadot/rpc-provider/node_modules/eventemitter3": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.0.tgz",
+      "integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
+    },
+    "node_modules/@polkadot/types": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types/-/types-9.13.6.tgz",
+      "integrity": "sha512-O3NaVK5yJOHb0CmYMN78RVG/MwoxAI3hnyQPt7bHRFsr8SYE9VMTX50IXH1zfL+gNexMpm+LLUehnI9CZiyeRQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "rxjs": "^7.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/types-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-augment/-/types-augment-9.13.6.tgz",
+      "integrity": "sha512-wpDLPePlV+Xoyp+6bim0MpzuAPOdv5mfTLb0P61LbeL18Xx9RTht5Axg5AFP9ULcpiuIPqRwNasIkbwvbHAMug==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/types-codec": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-codec/-/types-codec-9.13.6.tgz",
+      "integrity": "sha512-i8P7qzlJTCunEuPTnZnRM7sQT0EFkvFsRIlJizFX20i+ISgUbfvqT5VAfGyyU7BFNEM1D5WEvrKP9B9iVrCjqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/x-bigint": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/types-create": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-create/-/types-create-9.13.6.tgz",
+      "integrity": "sha512-oMh4YkUUpYbtD+BoOa5Z/kujaRVkE9sBZxFllkgZWBEg04UKktpNX9MeUfkSW/wJJlvGplw+fpJgCUBG5Hf9Vg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/types-known": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-known/-/types-known-9.13.6.tgz",
+      "integrity": "sha512-pThMiiU2A3ZIs6CZ8I9Ac0lhHRgAQ+Koe5Y2RuVBkQTJQT39YJrZZCJi41Yja90CBWz3ErEKzIfPU5Xh7r5M2Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/networks": "^10.3.1",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/types-support": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-support/-/types-support-9.13.6.tgz",
+      "integrity": "sha512-9Avpx0jdk0N/tp6U9211uaOP1CJY85DQYVXzr+HjiE9c+WaXyWfipLwK8sg5tJ7zVezbdVjkcCfSrTrMMwF8sg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "^10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@polkadot/ui-keyring": {
       "version": "2.11.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/ui-keyring/-/ui-keyring-2.11.1.tgz",
@@ -4079,6 +4393,20 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@polkadot/x-fetch": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-fetch/-/x-fetch-10.3.1.tgz",
+      "integrity": "sha512-v07jNzFK1uzuZ9pAg0oNyU84vFwyekGWZi7Xanh+GPKt6G5RY1JyvSW1GSNcyXpWiqqTnTuaoF+e5PRHeyOnhw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1",
+        "@types/node-fetch": "^2.6.2",
+        "node-fetch": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@polkadot/x-global": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.3.1.tgz",
@@ -4126,6 +4454,20 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@polkadot/x-ws": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-ws/-/x-ws-10.3.1.tgz",
+      "integrity": "sha512-gjYXB+W2slfnnnpCn3KjxP/VR3GZ6BK9xmZbeyVhlWFM3e+1WyMoetumxWbqzfpdXjwe3hIl1R28sngxqllfUQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1",
+        "@types/websocket": "^1.0.5",
+        "websocket": "^1.0.34"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rc-component/context": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
@@ -4225,6 +4567,39 @@
         "postcss-syntax": ">=0.36.2"
       }
     },
+    "node_modules/@substrate/connect": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmmirror.com/@substrate/connect/-/connect-0.7.19.tgz",
+      "integrity": "sha512-+DDRadc466gCmDU71sHrYOt1HcI2Cbhm7zdCFjZfFVHXhC/E8tOdrVSglAH2HDEHR0x2SiHRxtxOGC7ak2Zjog==",
+      "optional": true,
+      "dependencies": {
+        "@substrate/connect-extension-protocol": "^1.0.1",
+        "@substrate/smoldot-light": "0.7.9",
+        "eventemitter3": "^4.0.7"
+      }
+    },
+    "node_modules/@substrate/connect-extension-protocol": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@substrate/connect-extension-protocol/-/connect-extension-protocol-1.0.1.tgz",
+      "integrity": "sha512-161JhCC1csjH3GE5mPLEd7HbWtwNSPJBg3p1Ksz9SFlTzj/bgEwudiRN2y5i0MoLGCIJRYKyKGMxVnd29PzNjg==",
+      "optional": true
+    },
+    "node_modules/@substrate/smoldot-light": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmmirror.com/@substrate/smoldot-light/-/smoldot-light-0.7.9.tgz",
+      "integrity": "sha512-HP8iP7sFYlpSgjjbo0lqHyU+gu9lL2hbDNce6dWk5/10mFFF9jKIFGfui4zCecUY808o/Go9pan/31kMJoLbug==",
+      "optional": true,
+      "dependencies": {
+        "pako": "^2.0.4",
+        "ws": "^8.8.1"
+      }
+    },
+    "node_modules/@substrate/smoldot-light/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "optional": true
+    },
     "node_modules/@substrate/ss58-registry": {
       "version": "1.38.0",
       "resolved": "https://registry.npmmirror.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz",
@@ -4925,6 +5300,28 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
     },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+      "integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      }
+    },
+    "node_modules/@types/node-fetch/node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
@@ -5111,6 +5508,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@types/websocket": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/websocket/-/websocket-1.0.5.tgz",
+      "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "16.0.5",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
@@ -7793,6 +8198,18 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -12087,6 +12504,11 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
@@ -12862,6 +13284,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/mock-socket": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmmirror.com/mock-socket/-/mock-socket-9.1.5.tgz",
+      "integrity": "sha512-3DeNIcsQixWHHKk6NdoBhWI4t1VMj5/HzfnI1rE/pLl5qKx7+gd4DNA07ehTaZ6MoUU053si6Hd+YtiM/tQZfg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -12942,6 +13372,20 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/nock": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmmirror.com/nock/-/nock-13.3.0.tgz",
+      "integrity": "sha512-HHqYQ6mBeiMc+N038w8LkMpDCRquCHWeNmN3v6645P3NhN2+qXOBqvPqo7Rt1VyCMzKhJ733wZqw5B7cQVFNPg==",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "json-stringify-safe": "^5.0.1",
+        "lodash": "^4.17.21",
+        "propagate": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      }
+    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
@@ -12982,6 +13426,16 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -14342,6 +14796,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/propagate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/propagate/-/propagate-2.0.1.tgz",
+      "integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/proxy-compare": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.4.0.tgz",
@@ -17484,6 +17946,18 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmmirror.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -17818,6 +18292,35 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmmirror.com/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/whatwg-fetch": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
@@ -18008,6 +18511,27 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.12.0.tgz",
+      "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
+      "optional": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -18024,6 +18548,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -20599,6 +21131,139 @@
         "source-map": "^0.7.3"
       }
     },
+    "@polkadot/api": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api/-/api-9.13.6.tgz",
+      "integrity": "sha512-dvnic7MbrYc7bAHKuEaR9mfaHZljXzC+UaXuKT8tpGJuKrus6qeUqEWPh4Ak9LLqhW87PCTrpeGaTz22djSmLg==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api-augment": "9.13.6",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/api-derive": "9.13.6",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/rpc-provider": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/types-known": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "eventemitter3": "^5.0.0",
+        "rxjs": "^7.8.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.0.tgz",
+          "integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
+        }
+      }
+    },
+    "@polkadot/api-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-augment/-/api-augment-9.13.6.tgz",
+      "integrity": "sha512-ndurtzLazGiIxhRDdisDBbzN57gbi/v5414LYAWyYMannPTRdIntpn/dOkJ7Uym3ONJhmWZx5umRUGv6Uy9gUA==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
+    "@polkadot/api-base": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-base/-/api-base-9.13.6.tgz",
+      "integrity": "sha512-07zQD9Mb8qO9+EpvuEKl6ZUSj/UJl4ZwCCrp44pxymkHDM62efSQhSkPOyNRVTihEYbIercK//Ry4aUfvwoU1w==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "@polkadot/api-derive": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/api-derive/-/api-derive-9.13.6.tgz",
+      "integrity": "sha512-9P0zbwSzhzwaUDu6XuodrfM3PntKb2i6O119HQb5CkeHWdSUTPYq1D4/0PMsCCrfyxh5PvJrMIdvEoleAjA52g==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/api": "9.13.6",
+        "@polkadot/api-augment": "9.13.6",
+        "@polkadot/api-base": "9.13.6",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "@polkadot/extension-base": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-base/-/extension-base-0.44.8.tgz",
+      "integrity": "sha512-aMpT46lYFAGi+jed0dWJTxjAyXn9iV/d+zpQIM7bx256vk9GZGxo/EbEDFTjpad//sxgmVaaDwrqlqtx8DhvVA==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/api": "^9.11.1",
+        "@polkadot/extension-chains": "^0.44.8",
+        "@polkadot/extension-dapp": "^0.44.8",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/keyring": "^10.2.3",
+        "@polkadot/networks": "^10.2.3",
+        "@polkadot/phishing": "^0.18.13",
+        "@polkadot/rpc-provider": "^9.11.1",
+        "@polkadot/types": "^9.11.1",
+        "@polkadot/ui-keyring": "^2.9.15",
+        "@polkadot/ui-settings": "^2.9.15",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "eventemitter3": "^4.0.7",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "@polkadot/extension-chains": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-chains/-/extension-chains-0.44.8.tgz",
+      "integrity": "sha512-zBH/IrnY2mieo36UGAanTyuCa9r1zw0Ih2RlhFy9rJzB+Pg9IsQvvVHIsP7B7CGAHEq5MfIwdLzCzQJDHh4bYA==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/networks": "^10.2.3",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3"
+      }
+    },
+    "@polkadot/extension-dapp": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-dapp/-/extension-dapp-0.44.8.tgz",
+      "integrity": "sha512-CaGrY+Vh9u2ABPpLsbMEVQniQDKreBWEmtp0RzfmIbed8lmmOgwtfDZjb7ncTNR79WJX+1AD+VX5dKQtvT3S4w==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/extension-inject": "^0.44.8",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3"
+      }
+    },
+    "@polkadot/extension-inject": {
+      "version": "0.44.8",
+      "resolved": "https://registry.npmmirror.com/@polkadot/extension-inject/-/extension-inject-0.44.8.tgz",
+      "integrity": "sha512-srBjCgOMUuQTCvU2Mu6hPHEmrxqJb+DImh8lHy79bpz4IoTATepuJGdeDONUiLS4KFhUstFSxkVsbL/4YSEVng==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/rpc-provider": "^9.11.1",
+        "@polkadot/types": "^9.11.1",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "@polkadot/x-global": "^10.2.3"
+      }
+    },
     "@polkadot/keyring": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/keyring/-/keyring-10.3.1.tgz",
@@ -20619,6 +21284,137 @@
         "@substrate/ss58-registry": "^1.38.0"
       }
     },
+    "@polkadot/phishing": {
+      "version": "0.18.13",
+      "resolved": "https://registry.npmmirror.com/@polkadot/phishing/-/phishing-0.18.13.tgz",
+      "integrity": "sha512-8GteEs/BF881ZRcxBtU7BEXNq8dXQLa2Xxc7JUTN/grrdRKPRtg0Hl/+5xjDe5VvyeTGV2mIp629S5Mpzhxo5g==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@polkadot/util": "^10.2.3",
+        "@polkadot/util-crypto": "^10.2.3",
+        "@polkadot/x-fetch": "^10.2.3"
+      }
+    },
+    "@polkadot/rpc-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-augment/-/rpc-augment-9.13.6.tgz",
+      "integrity": "sha512-ZOEdS9PLfhpojuPJKtV1Z3C6fNXOCAjdFgF3YMfv3xqK9Xtj9+TDxGVcPtY0wPLtDoNmaHJq3m1gQKfTI5ZK5g==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-core": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
+    "@polkadot/rpc-core": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-core/-/rpc-core-9.13.6.tgz",
+      "integrity": "sha512-/LH4etyCsTTO43qW5sGcsG0yN4KchaAnQrejxheanyIrv8mB2Px+8ioLJJt1IU+iSpJO8VVJp64zjsegEK/PVw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/rpc-augment": "9.13.6",
+        "@polkadot/rpc-provider": "9.13.6",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "@polkadot/rpc-provider": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/rpc-provider/-/rpc-provider-9.13.6.tgz",
+      "integrity": "sha512-1hZ1Z3L5HRxE83jjVqDmQn20sq5WK2bSIGbxPLp/a0DJBpDmqhmVMVkh9KvK7WN6lpmNSJSr2W9iJV6vAQkjRA==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-support": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "@polkadot/x-fetch": "^10.3.1",
+        "@polkadot/x-global": "^10.3.1",
+        "@polkadot/x-ws": "^10.3.1",
+        "@substrate/connect": "0.7.19",
+        "eventemitter3": "^5.0.0",
+        "mock-socket": "^9.1.5",
+        "nock": "^13.3.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.0.tgz",
+          "integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
+        }
+      }
+    },
+    "@polkadot/types": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types/-/types-9.13.6.tgz",
+      "integrity": "sha512-O3NaVK5yJOHb0CmYMN78RVG/MwoxAI3hnyQPt7bHRFsr8SYE9VMTX50IXH1zfL+gNexMpm+LLUehnI9CZiyeRQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/types-augment": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "rxjs": "^7.8.0"
+      }
+    },
+    "@polkadot/types-augment": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-augment/-/types-augment-9.13.6.tgz",
+      "integrity": "sha512-wpDLPePlV+Xoyp+6bim0MpzuAPOdv5mfTLb0P61LbeL18Xx9RTht5Axg5AFP9ULcpiuIPqRwNasIkbwvbHAMug==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
+    "@polkadot/types-codec": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-codec/-/types-codec-9.13.6.tgz",
+      "integrity": "sha512-i8P7qzlJTCunEuPTnZnRM7sQT0EFkvFsRIlJizFX20i+ISgUbfvqT5VAfGyyU7BFNEM1D5WEvrKP9B9iVrCjqw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/x-bigint": "^10.3.1"
+      }
+    },
+    "@polkadot/types-create": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-create/-/types-create-9.13.6.tgz",
+      "integrity": "sha512-oMh4YkUUpYbtD+BoOa5Z/kujaRVkE9sBZxFllkgZWBEg04UKktpNX9MeUfkSW/wJJlvGplw+fpJgCUBG5Hf9Vg==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
+    "@polkadot/types-known": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-known/-/types-known-9.13.6.tgz",
+      "integrity": "sha512-pThMiiU2A3ZIs6CZ8I9Ac0lhHRgAQ+Koe5Y2RuVBkQTJQT39YJrZZCJi41Yja90CBWz3ErEKzIfPU5Xh7r5M2Q==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/networks": "^10.3.1",
+        "@polkadot/types": "9.13.6",
+        "@polkadot/types-codec": "9.13.6",
+        "@polkadot/types-create": "9.13.6",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
+    "@polkadot/types-support": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmmirror.com/@polkadot/types-support/-/types-support-9.13.6.tgz",
+      "integrity": "sha512-9Avpx0jdk0N/tp6U9211uaOP1CJY85DQYVXzr+HjiE9c+WaXyWfipLwK8sg5tJ7zVezbdVjkcCfSrTrMMwF8sg==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/util": "^10.3.1"
+      }
+    },
     "@polkadot/ui-keyring": {
       "version": "2.11.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/ui-keyring/-/ui-keyring-2.11.1.tgz",
@@ -20744,6 +21540,17 @@
         "@polkadot/x-global": "10.3.1"
       }
     },
+    "@polkadot/x-fetch": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-fetch/-/x-fetch-10.3.1.tgz",
+      "integrity": "sha512-v07jNzFK1uzuZ9pAg0oNyU84vFwyekGWZi7Xanh+GPKt6G5RY1JyvSW1GSNcyXpWiqqTnTuaoF+e5PRHeyOnhw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1",
+        "@types/node-fetch": "^2.6.2",
+        "node-fetch": "^3.3.0"
+      }
+    },
     "@polkadot/x-global": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.3.1.tgz",
@@ -20779,6 +21586,17 @@
         "@polkadot/x-global": "10.3.1"
       }
     },
+    "@polkadot/x-ws": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-ws/-/x-ws-10.3.1.tgz",
+      "integrity": "sha512-gjYXB+W2slfnnnpCn3KjxP/VR3GZ6BK9xmZbeyVhlWFM3e+1WyMoetumxWbqzfpdXjwe3hIl1R28sngxqllfUQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1",
+        "@types/websocket": "^1.0.5",
+        "websocket": "^1.0.34"
+      }
+    },
     "@rc-component/context": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
@@ -20846,6 +21664,41 @@
         "@babel/core": "^7.17.9"
       }
     },
+    "@substrate/connect": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmmirror.com/@substrate/connect/-/connect-0.7.19.tgz",
+      "integrity": "sha512-+DDRadc466gCmDU71sHrYOt1HcI2Cbhm7zdCFjZfFVHXhC/E8tOdrVSglAH2HDEHR0x2SiHRxtxOGC7ak2Zjog==",
+      "optional": true,
+      "requires": {
+        "@substrate/connect-extension-protocol": "^1.0.1",
+        "@substrate/smoldot-light": "0.7.9",
+        "eventemitter3": "^4.0.7"
+      }
+    },
+    "@substrate/connect-extension-protocol": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@substrate/connect-extension-protocol/-/connect-extension-protocol-1.0.1.tgz",
+      "integrity": "sha512-161JhCC1csjH3GE5mPLEd7HbWtwNSPJBg3p1Ksz9SFlTzj/bgEwudiRN2y5i0MoLGCIJRYKyKGMxVnd29PzNjg==",
+      "optional": true
+    },
+    "@substrate/smoldot-light": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmmirror.com/@substrate/smoldot-light/-/smoldot-light-0.7.9.tgz",
+      "integrity": "sha512-HP8iP7sFYlpSgjjbo0lqHyU+gu9lL2hbDNce6dWk5/10mFFF9jKIFGfui4zCecUY808o/Go9pan/31kMJoLbug==",
+      "optional": true,
+      "requires": {
+        "pako": "^2.0.4",
+        "ws": "^8.8.1"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
+          "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+          "optional": true
+        }
+      }
+    },
     "@substrate/ss58-registry": {
       "version": "1.38.0",
       "resolved": "https://registry.npmmirror.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz",
@@ -21388,6 +22241,27 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
     },
+    "@types/node-fetch": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+      "integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
+      "requires": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "@types/normalize-package-data": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
@@ -21576,6 +22450,14 @@
         "source-map": "^0.7.3"
       }
     },
+    "@types/websocket": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/websocket/-/websocket-1.0.5.tgz",
+      "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/yargs": {
       "version": "16.0.5",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
@@ -23747,6 +24629,14 @@
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
     },
+    "bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -26797,6 +27687,11 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+    },
     "json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
@@ -27381,6 +28276,11 @@
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-2.1.3.tgz",
       "integrity": "sha512-sjAkg21peAG9HS+Dkx7hlG9Ztx7HLeKnvB3NQRcu/mltCVmvkF0pisbiTSfDVYTT86XEfZrTUosLdZLStquZUw=="
     },
+    "mock-socket": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmmirror.com/mock-socket/-/mock-socket-9.1.5.tgz",
+      "integrity": "sha512-3DeNIcsQixWHHKk6NdoBhWI4t1VMj5/HzfnI1rE/pLl5qKx7+gd4DNA07ehTaZ6MoUU053si6Hd+YtiM/tQZfg=="
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -27448,6 +28348,17 @@
         "tslib": "^2.0.3"
       }
     },
+    "nock": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmmirror.com/nock/-/nock-13.3.0.tgz",
+      "integrity": "sha512-HHqYQ6mBeiMc+N038w8LkMpDCRquCHWeNmN3v6645P3NhN2+qXOBqvPqo7Rt1VyCMzKhJ733wZqw5B7cQVFNPg==",
+      "requires": {
+        "debug": "^4.1.0",
+        "json-stringify-safe": "^5.0.1",
+        "lodash": "^4.17.21",
+        "propagate": "^2.0.0"
+      }
+    },
     "node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
@@ -27468,6 +28379,11 @@
         "formdata-polyfill": "^4.0.10"
       }
     },
+    "node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ=="
+    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -28371,6 +29287,11 @@
         }
       }
     },
+    "propagate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/propagate/-/propagate-2.0.1.tgz",
+      "integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag=="
+    },
     "proxy-compare": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.4.0.tgz",
@@ -30701,6 +31622,14 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
+    "utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmmirror.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -30930,6 +31859,34 @@
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "peer": true
     },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmmirror.com/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
     "whatwg-fetch": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
@@ -31071,6 +32028,13 @@
         "signal-exit": "^3.0.7"
       }
     },
+    "ws": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.12.0.tgz",
+      "integrity": "sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==",
+      "optional": true,
+      "requires": {}
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -31081,6 +32045,11 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 662313e..174c7d7 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "^2.0.1",
     "@deficonnect/utils": "^2.0.3",
+    "@polkadot/extension-base": "^0.44.8",
     "@polkadot/ui-keyring": "^2.11.1",
     "@polkadot/util-crypto": "^10.3.1",
     "@umijs/max": "^4.0.47",
diff --git a/src/extension/background/bootstrap.ts b/src/extension/background/bootstrap.ts
index aa022f7..5b79d42 100644
--- a/src/extension/background/bootstrap.ts
+++ b/src/extension/background/bootstrap.ts
@@ -1,3 +1,4 @@
+import keyring from '@polkadot/ui-keyring'
 import { cryptoWaitReady } from '@polkadot/util-crypto'
 
 import { createServer } from './app/server'
@@ -34,7 +35,8 @@ export const server = createServer({
       .then((): void => {
         console.log('crypto initialized')
 
-        // load all the keyring data
+        // load all the keyring data// load all the keyring data
+        keyring.loadAll({ ss58Format: 78, type: 'sr25519' })
 
         console.log('initialization completed')
       })
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index 042eba4..68b68fc 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -1,9 +1,16 @@
+import { mnemonicValidate } from '@polkadot/util-crypto'
+import assert from 'assert'
+
 import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
 const WalletController = {
-  async wallet_createSeed(ctx: KoaContext) {
-    const result = await WalletService.createSeed()
+  async wallet_createSeed(ctx: KoaContext<[{ seed: string }]>) {
+    const { seed } = ctx.params[0]
+    if (seed) {
+      assert(mnemonicValidate(seed), 'Not a valid mnemonic seed')
+    }
+    const result = await WalletService.createSeed(seed)
     return ctx.pushResponse(result)
   },
 }
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index 3000cf6..dc494d3 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -1,12 +1,13 @@
+import keyring from '@polkadot/ui-keyring'
 import { mnemonicGenerate } from '@polkadot/util-crypto'
 
 const WalletService = {
-  async createSeed() {
-    const seed = mnemonicGenerate()
+  async createSeed(seed?: string) {
+    const newSeed = seed ?? mnemonicGenerate()
 
     return {
-      // address: keyring.createFromUri(seed).address,
-      seed,
+      address: keyring.createFromUri(newSeed).address,
+      seed: newSeed,
     }
   },
 }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d45f5d1..2ca07b6 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -41,8 +41,10 @@ const HomePage: React.FC = () => {
 
   const { run: runCreateSeed, data: accountData } = useRequest(
     async () => {
+      const seed = form.getFieldValue('seed') as string
       return rpcClient.sendRequest({
         method: 'wallet_createSeed',
+        params: [{ seed: seed }],
       })
     },
     {
@@ -67,11 +69,16 @@ const HomePage: React.FC = () => {
             <Form.Item label="Your name" name="username">
               <Input placeholder="input placeholders" />
             </Form.Item>
+            <Form.Item label="Your seed" name="seed">
+              <Input placeholder="input placeholders" />
+            </Form.Item>
             <Form.Item>
               <Button type="primary" htmlType="submit">
                 Submit
               </Button>
-              <Button onClick={runCreateSeed}>Create new account</Button>
+              <Button style={{ marginLeft: 8 }} onClick={runCreateSeed}>
+                Create new account
+              </Button>
             </Form.Item>
           </Form>
           <Typography>
@@ -83,9 +90,9 @@ const HomePage: React.FC = () => {
             <Typography.Paragraph>
               Seed: {accountData?.seed}
             </Typography.Paragraph>
-            {/* <Typography.Paragraph>
+            <Typography.Paragraph>
               Address: {accountData?.address}
-            </Typography.Paragraph> */}
+            </Typography.Paragraph>
           </Typography>
         </div>
       </div>

From e316890fd47627d1969d966ee779c6bf4c0e0975 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 11:35:40 +0800
Subject: [PATCH 03/24] feat: finished generate seed

---
 config/routes.ts                              |  11 +-
 .../controller/wallet.controller.ts           |   2 +-
 .../background/service/wallet.service.ts      |   1 -
 src/pages/Create/index.less                   |   3 +
 src/pages/Create/index.tsx                    | 110 ++++++++++++++++
 src/pages/Home/index.less                     |   2 +-
 src/pages/Home/index.tsx                      | 119 ++++--------------
 7 files changed, 150 insertions(+), 98 deletions(-)
 create mode 100644 src/pages/Create/index.less
 create mode 100644 src/pages/Create/index.tsx

diff --git a/config/routes.ts b/config/routes.ts
index 07e1a23..0416d41 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -7,17 +7,22 @@ export default defineConfig({
       redirect: '/home',
     },
     {
-      name: '首页',
+      name: 'Home',
       path: '/home',
       component: './Home',
     },
     {
-      name: '权限演示',
+      name: 'Create',
+      path: '/create',
+      component: './Create',
+    },
+    {
+      name: 'Access',
       path: '/access',
       component: './Access',
     },
     {
-      name: ' CRUD 示例',
+      name: ' CRUD Example',
       path: '/table',
       component: './Table',
     },
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index 68b68fc..c68a721 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -5,7 +5,7 @@ import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
 const WalletController = {
-  async wallet_createSeed(ctx: KoaContext<[{ seed: string }]>) {
+  async wallet_createSeed(ctx: KoaContext<[{ seed?: string }]>) {
     const { seed } = ctx.params[0]
     if (seed) {
       assert(mnemonicValidate(seed), 'Not a valid mnemonic seed')
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index dc494d3..c81381b 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -4,7 +4,6 @@ import { mnemonicGenerate } from '@polkadot/util-crypto'
 const WalletService = {
   async createSeed(seed?: string) {
     const newSeed = seed ?? mnemonicGenerate()
-
     return {
       address: keyring.createFromUri(newSeed).address,
       seed: newSeed,
diff --git a/src/pages/Create/index.less b/src/pages/Create/index.less
new file mode 100644
index 0000000..e624b13
--- /dev/null
+++ b/src/pages/Create/index.less
@@ -0,0 +1,3 @@
+.container {
+  padding: 24px;
+}
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
new file mode 100644
index 0000000..41c15f1
--- /dev/null
+++ b/src/pages/Create/index.tsx
@@ -0,0 +1,110 @@
+import { CloseOutlined, WarningTwoTone } from '@ant-design/icons'
+import { useRequest } from 'ahooks'
+import {
+  Button,
+  Typography,
+  message,
+  Row,
+  Col,
+  Card,
+  Avatar,
+  Checkbox,
+  Spin,
+} from 'antd'
+import { useState } from 'react'
+
+import { rpcClient } from '@/services/rpc-client'
+
+import styles from './index.less'
+
+const { Title, Paragraph } = Typography
+
+const CreatePage: React.FC = () => {
+  const [isChecked, setIsChecked] = useState(false)
+
+  const { data: account, loading } = useRequest(
+    async () => {
+      return rpcClient.sendRequest({
+        method: 'wallet_createSeed',
+        params: [{}],
+      })
+    },
+    {
+      onError: (e) => {
+        message.error(e.message)
+      },
+    },
+  )
+
+  return (
+    <div className={styles.container}>
+      <Spin spinning={loading}>
+        <Row style={{ marginBottom: 16 }}>
+          <Col span={16}>
+            <Title level={4} style={{ marginTop: 0 }}>
+              Create an account
+            </Title>
+          </Col>
+          <Col span={8} style={{ textAlign: 'right' }}>
+            <Button
+              title="Cancel"
+              icon={<CloseOutlined />}
+              onClick={() => {
+                history.go(-1)
+              }}
+            ></Button>
+          </Col>
+        </Row>
+        <Card>
+          <Card.Meta avatar={<Avatar>U</Avatar>} title="unknown" />
+          <Paragraph
+            copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+            style={{ marginTop: 16, marginBottom: 0 }}
+          >
+            {account?.address}
+          </Paragraph>
+        </Card>
+        <Row style={{ marginTop: 16 }}>
+          <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph>
+        </Row>
+        <Card>
+          <Paragraph
+            copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+            style={{ marginBottom: 0 }}
+            type="warning"
+          >
+            {account?.seed}
+          </Paragraph>
+        </Card>
+        <Row style={{ marginTop: 16 }}>
+          <Paragraph>
+            <WarningTwoTone twoToneColor="#faad14" style={{ marginRight: 8 }} />
+            Please write down your wallet&#39;s mnemonic seed and keep it in a
+            safe place. The mnemonic can be used to restore your wallet. Keep it
+            carefully to not lose your assets.
+          </Paragraph>
+        </Row>
+        <Row style={{ marginTop: 16 }}>
+          <Checkbox
+            onChange={(e) => {
+              setIsChecked(e.target.checked)
+            }}
+          >
+            I have saved my mnemonic seed safely
+          </Checkbox>
+        </Row>
+        <Row style={{ marginTop: 16 }}>
+          <Button
+            disabled={!isChecked}
+            style={{ width: '100%' }}
+            type="primary"
+          >
+            Next step
+          </Button>
+        </Row>
+      </Spin>
+    </div>
+  )
+}
+
+export default CreatePage
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
index 06fdb67..e624b13 100644
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@@ -1,3 +1,3 @@
 .container {
-  padding-top: 80px;
+  padding: 24px;
 }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 2ca07b6..1e803f6 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,102 +1,37 @@
-import { PageContainer } from '@ant-design/pro-components'
-import { useModel } from '@umijs/max'
-import { useRequest } from 'ahooks'
-import { Button, Form, Input, Typography, message } from 'antd'
-
-import { trim } from '@/utils/format'
-
-import { rpcClient } from '@/services/rpc-client'
-
-import Guide from '@/components/Guide'
+import { PlusOutlined } from '@ant-design/icons'
+import { history } from '@umijs/max'
+import { Button, Typography, Row, Col } from 'antd'
 
 import styles from './index.less'
 
-interface FormFields {
-  username: string
-}
+const { Title } = Typography
 
 const HomePage: React.FC = () => {
-  const { name } = useModel('global')
-
-  const [form] = Form.useForm<FormFields>()
-
-  const { run, data } = useRequest(
-    async (username: string) => {
-      return rpcClient.sendRequest({
-        method: 'example_queryUserInfo',
-        params: [
-          {
-            username,
-          },
-        ],
-      })
-    },
-    {
-      manual: true,
-      onError: (e) => {
-        message.error(e.message)
-      },
-    },
-  )
-
-  const { run: runCreateSeed, data: accountData } = useRequest(
-    async () => {
-      const seed = form.getFieldValue('seed') as string
-      return rpcClient.sendRequest({
-        method: 'wallet_createSeed',
-        params: [{ seed: seed }],
-      })
-    },
-    {
-      manual: true,
-      onError: (e) => {
-        message.error(e.message)
-      },
-    },
-  )
-
-  const onFinished = (values: FormFields) => {
-    const { username } = values
-    run(username)
-  }
-
   return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
-        <div>
-          <Form form={form} onFinish={onFinished} style={{ maxWidth: 600 }}>
-            <Form.Item label="Your name" name="username">
-              <Input placeholder="input placeholders" />
-            </Form.Item>
-            <Form.Item label="Your seed" name="seed">
-              <Input placeholder="input placeholders" />
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" htmlType="submit">
-                Submit
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={runCreateSeed}>
-                Create new account
-              </Button>
-            </Form.Item>
-          </Form>
-          <Typography>
-            <Typography.Paragraph>
-              Username: {data?.username}
-            </Typography.Paragraph>
-            <Typography.Paragraph>Age: {data?.age}</Typography.Paragraph>
-            <Typography.Paragraph>School: {data?.school}</Typography.Paragraph>
-            <Typography.Paragraph>
-              Seed: {accountData?.seed}
-            </Typography.Paragraph>
-            <Typography.Paragraph>
-              Address: {accountData?.address}
-            </Typography.Paragraph>
-          </Typography>
-        </div>
+    <div className={styles.container}>
+      <Row style={{ marginBottom: 16 }}>
+        <Col span={16}>
+          <Title level={4} style={{ marginTop: 0 }}>
+            Accounts
+          </Title>
+        </Col>
+        <Col span={8} style={{ textAlign: 'right' }}>
+          <Button
+            icon={<PlusOutlined />}
+            title="Create new account"
+            onClick={() => {
+              history.push('/create')
+            }}
+          ></Button>
+        </Col>
+      </Row>
+      <div style={{ marginTop: 60, textAlign: 'center' }}>
+        <Typography.Text>
+          You currently do not have any accounts. Create your first account to
+          get started.
+        </Typography.Text>
       </div>
-    </PageContainer>
+    </div>
   )
 }
 

From 37404b17d72bf0cd6903e9a9dada2535c6388c3e Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 15:22:13 +0800
Subject: [PATCH 04/24] feat: finished create step 2 UIs

---
 src/pages/Create/index.tsx | 289 ++++++++++++++++++++++++++++---------
 1 file changed, 224 insertions(+), 65 deletions(-)

diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index 41c15f1..ea67e69 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -1,4 +1,8 @@
-import { CloseOutlined, WarningTwoTone } from '@ant-design/icons'
+import {
+  ArrowLeftOutlined,
+  CloseOutlined,
+  WarningTwoTone,
+} from '@ant-design/icons'
 import { useRequest } from 'ahooks'
 import {
   Button,
@@ -10,18 +14,32 @@ import {
   Avatar,
   Checkbox,
   Spin,
+  Form,
+  Input,
+  Select,
 } from 'antd'
-import { useState } from 'react'
+import { FC, useState } from 'react'
 
 import { rpcClient } from '@/services/rpc-client'
 
 import styles from './index.less'
 
-const { Title, Paragraph } = Typography
+interface FormFields {
+  name: string
+  password: string
+  network: number
+}
+
+const { Title, Paragraph, Text } = Typography
 
 const CreatePage: React.FC = () => {
   const [isChecked, setIsChecked] = useState(false)
 
+  const [current, setCurrent] = useState(1)
+
+  const [form] = Form.useForm<FormFields>()
+  const name = Form.useWatch('name', form)
+
   const { data: account, loading } = useRequest(
     async () => {
       return rpcClient.sendRequest({
@@ -36,73 +54,214 @@ const CreatePage: React.FC = () => {
     },
   )
 
+  const AccountInfo: FC<{ name?: string }> = ({ name }) => {
+    const cName = name ?? ''
+    return (
+      <Card>
+        <Card.Meta
+          avatar={
+            <Avatar>
+              {cName.length > 2 ? cName[0].toLocaleUpperCase() : 'U'}
+            </Avatar>
+          }
+          title={cName.length > 2 ? name : '<unknown>'}
+        />
+        <Paragraph
+          copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+          style={{ marginTop: 16, marginBottom: 0 }}
+        >
+          {account?.address}
+        </Paragraph>
+      </Card>
+    )
+  }
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values)
+  }
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo)
+  }
+
   return (
     <div className={styles.container}>
-      <Spin spinning={loading}>
-        <Row style={{ marginBottom: 16 }}>
-          <Col span={16}>
-            <Title level={4} style={{ marginTop: 0 }}>
-              Create an account
-            </Title>
-          </Col>
-          <Col span={8} style={{ textAlign: 'right' }}>
+      <Row style={{ marginBottom: 16 }}>
+        <Col span={16}>
+          <Title level={4} style={{ marginTop: 0 }}>
+            Create an account <Text type="warning">{current}</Text>
+            <Text>/2</Text>
+          </Title>
+        </Col>
+        <Col span={8} style={{ textAlign: 'right' }}>
+          <Button
+            title="Cancel"
+            icon={<CloseOutlined />}
+            onClick={() => {
+              history.go(-1)
+            }}
+          ></Button>
+        </Col>
+      </Row>
+      {/* Step 1 */}
+      {current === 1 && (
+        <Spin spinning={loading}>
+          <AccountInfo />
+          <Row style={{ marginTop: 16 }}>
+            <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph>
+          </Row>
+          <Card>
+            <Paragraph
+              copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+              style={{ marginBottom: 0 }}
+              type="warning"
+            >
+              {account?.seed}
+            </Paragraph>
+          </Card>
+          <Row style={{ marginTop: 16 }}>
+            <Paragraph>
+              <WarningTwoTone
+                twoToneColor="#faad14"
+                style={{ marginRight: 8 }}
+              />
+              Please write down your wallet&#39;s mnemonic seed and keep it in a
+              safe place. The mnemonic can be used to restore your wallet. Keep
+              it carefully to not lose your assets.
+            </Paragraph>
+          </Row>
+          <Row style={{ marginTop: 16 }}>
+            <Checkbox
+              checked={isChecked}
+              onChange={(e) => {
+                setIsChecked(e.target.checked)
+              }}
+            >
+              I have saved my mnemonic seed safely
+            </Checkbox>
+          </Row>
+          <Row style={{ marginTop: 16 }}>
             <Button
-              title="Cancel"
-              icon={<CloseOutlined />}
+              disabled={!isChecked}
+              style={{ width: '100%' }}
+              type="primary"
               onClick={() => {
-                history.go(-1)
+                setCurrent(2)
               }}
-            ></Button>
-          </Col>
-        </Row>
-        <Card>
-          <Card.Meta avatar={<Avatar>U</Avatar>} title="unknown" />
-          <Paragraph
-            copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-            style={{ marginTop: 16, marginBottom: 0 }}
-          >
-            {account?.address}
-          </Paragraph>
-        </Card>
-        <Row style={{ marginTop: 16 }}>
-          <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph>
-        </Row>
-        <Card>
-          <Paragraph
-            copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-            style={{ marginBottom: 0 }}
-            type="warning"
-          >
-            {account?.seed}
-          </Paragraph>
-        </Card>
-        <Row style={{ marginTop: 16 }}>
-          <Paragraph>
-            <WarningTwoTone twoToneColor="#faad14" style={{ marginRight: 8 }} />
-            Please write down your wallet&#39;s mnemonic seed and keep it in a
-            safe place. The mnemonic can be used to restore your wallet. Keep it
-            carefully to not lose your assets.
-          </Paragraph>
-        </Row>
-        <Row style={{ marginTop: 16 }}>
-          <Checkbox
-            onChange={(e) => {
-              setIsChecked(e.target.checked)
-            }}
-          >
-            I have saved my mnemonic seed safely
-          </Checkbox>
-        </Row>
-        <Row style={{ marginTop: 16 }}>
-          <Button
-            disabled={!isChecked}
-            style={{ width: '100%' }}
-            type="primary"
-          >
-            Next step
-          </Button>
-        </Row>
-      </Spin>
+            >
+              Next step
+            </Button>
+          </Row>
+        </Spin>
+      )}
+
+      {/* Step 2 */}
+      {current === 2 && (
+        <Spin spinning={loading}>
+          <AccountInfo name={name} />
+          <Row style={{ marginTop: 16 }}>
+            <Form
+              name="basic"
+              form={form}
+              labelCol={{ span: 24 }}
+              wrapperCol={{ span: 24 }}
+              style={{ width: '100%' }}
+              initialValues={{ network: 78 }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+              layout="vertical"
+            >
+              <Form.Item
+                name="network"
+                label="Network"
+                rules={[{ required: true }]}
+              >
+                <Select
+                  disabled
+                  placeholder="Select a option and change input text above"
+                >
+                  <Select.Option value={78}>
+                    Calamari Parachain Staging
+                  </Select.Option>
+                </Select>
+              </Form.Item>
+
+              <Form.Item
+                label="name"
+                name="name"
+                rules={[
+                  { required: true, message: 'Please input your username!' },
+                  { min: 3, message: 'At least 3 characters' },
+                ]}
+              >
+                <Input placeholder="A descriptive name for your account" />
+              </Form.Item>
+
+              <Form.Item
+                label="Password"
+                name="password"
+                rules={[
+                  { required: true, message: 'Please input your password!' },
+                  { min: 6, message: 'At least 6 characters' },
+                ]}
+              >
+                <Input.Password placeholder="A new password for this account" />
+              </Form.Item>
+
+              <Form.Item
+                name="confirm"
+                label="Confirm Password"
+                dependencies={['password']}
+                hasFeedback
+                rules={[
+                  {
+                    required: true,
+                    message: 'Please confirm your password!',
+                  },
+                  ({ getFieldValue }) => ({
+                    validator(_, value) {
+                      if (!value || getFieldValue('password') === value) {
+                        return Promise.resolve()
+                      }
+                      return Promise.reject(
+                        new Error(
+                          'The two passwords that you entered do not match!',
+                        ),
+                      )
+                    },
+                  }),
+                ]}
+              >
+                <Input.Password />
+              </Form.Item>
+
+              <Row style={{ marginTop: 16 }}>
+                <Col flex="36px">
+                  <Button
+                    icon={<ArrowLeftOutlined />}
+                    onClick={() => {
+                      setCurrent(1)
+                    }}
+                  ></Button>
+                </Col>
+                <Col flex="auto">
+                  <Form.Item wrapperCol={{ span: 24 }}>
+                    <Button
+                      htmlType="submit"
+                      type="primary"
+                      style={{ width: '100%' }}
+                    >
+                      Add the account
+                    </Button>
+                  </Form.Item>
+                </Col>
+              </Row>
+            </Form>
+            {/* <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph> */}
+          </Row>
+        </Spin>
+      )}
     </div>
   )
 }

From 6981a69e72d1a505517ed3b6e6c765dce7516bc2 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 15:23:25 +0800
Subject: [PATCH 05/24] chore: update confirm

---
 src/pages/Create/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index ea67e69..78c04b8 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -233,7 +233,7 @@ const CreatePage: React.FC = () => {
                   }),
                 ]}
               >
-                <Input.Password />
+                <Input.Password placeholder="Confirm your password" />
               </Form.Item>
 
               <Row style={{ marginTop: 16 }}>

From 65bcd5eaf3cc7415aa8b95a2f2796520dd195900 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 15:29:05 +0800
Subject: [PATCH 06/24] chore: update auto complate

---
 src/pages/Create/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index 78c04b8..0282a8c 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -169,6 +169,7 @@ const CreatePage: React.FC = () => {
               initialValues={{ network: 78 }}
               onFinish={onFinish}
               onFinishFailed={onFinishFailed}
+              autoCorrect="off"
               autoComplete="off"
               layout="vertical"
             >

From 9bcca6ff14a7d04f2524834d44dade9aa1c0ee78 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 17:08:34 +0800
Subject: [PATCH 07/24] feat: finished create account

---
 .vscode/settings.json                         |   3 +
 package-lock.json                             | 363 +++++++++++++++++-
 package.json                                  |   3 +
 src/components/AccountInfo/index.tsx          |  29 ++
 .../controller/wallet.controller.ts           |  39 ++
 .../background/model/keyring.model.ts         |  31 ++
 .../background/model/wallet.model.ts          |  32 ++
 .../background/service/keyring.service.ts     |  24 ++
 .../background/service/wallet.service.ts      |  28 ++
 .../background/utils/crypto-utils.ts          |  35 ++
 src/pages/Create/index.tsx                    |  68 ++--
 src/pages/Home/index.tsx                      |  39 +-
 src/utils/tools/json-tools.ts                 |  14 +
 13 files changed, 652 insertions(+), 56 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/components/AccountInfo/index.tsx
 create mode 100644 src/extension/background/model/keyring.model.ts
 create mode 100644 src/extension/background/model/wallet.model.ts
 create mode 100644 src/extension/background/service/keyring.service.ts
 create mode 100644 src/extension/background/utils/crypto-utils.ts
 create mode 100644 src/utils/tools/json-tools.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d94a004
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Dexie"]
+}
diff --git a/package-lock.json b/package-lock.json
index b35beb4..3ded611 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,12 +12,15 @@
         "@ant-design/pro-components": "^2.0.1",
         "@deficonnect/utils": "^2.0.3",
         "@polkadot/extension-base": "^0.44.8",
+        "@polkadot/react-identicon": "^2.11.1",
         "@polkadot/ui-keyring": "^2.11.1",
         "@polkadot/util-crypto": "^10.3.1",
         "@umijs/max": "^4.0.47",
+        "@walletconnect/iso-crypto": "^1.8.0",
         "@walletconnect/utils": "^1.8.0",
         "ahooks": "^3.7.4",
         "antd": "^5.0.0",
+        "browser-passworder": "^2.0.3",
         "dexie": "^3.2.3",
         "koa-compose": "^4.1.0",
         "uuid": "^9.0.0"
@@ -2539,7 +2542,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
       "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
-      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.8.0"
       }
@@ -2547,14 +2549,12 @@
     "node_modules/@emotion/memoize": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
-      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==",
-      "peer": true
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "node_modules/@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "peer": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
@@ -4061,6 +4061,33 @@
         "@polkadot/x-fetch": "^10.2.3"
       }
     },
+    "node_modules/@polkadot/react-identicon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/react-identicon/-/react-identicon-2.11.1.tgz",
+      "integrity": "sha512-pqEsiXuKOXDrXNnsFB1JyBbFqedbiDwtP0yewIQ9vtwJwm01o7oE0yGfYS88hnPN1mLDc++MMcqvrHBsxYr2Lw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/ui-settings": "2.11.1",
+        "@polkadot/ui-shared": "2.11.1",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "color": "^3.2.1",
+        "ethereum-blockies-base64": "^1.0.2",
+        "jdenticon": "3.2.0",
+        "react-copy-to-clipboard": "^5.1.0",
+        "styled-components": "^5.3.6"
+      },
+      "peerDependencies": {
+        "@polkadot/keyring": "*",
+        "@polkadot/util": "*",
+        "@polkadot/util-crypto": "*",
+        "react": "*",
+        "react-dom": "*",
+        "react-is": "*",
+        "styled-components": "*"
+      }
+    },
     "node_modules/@polkadot/rpc-augment": {
       "version": "9.13.6",
       "resolved": "https://registry.npmmirror.com/@polkadot/rpc-augment/-/rpc-augment-9.13.6.tgz",
@@ -4244,6 +4271,19 @@
         "@polkadot/util": "*"
       }
     },
+    "node_modules/@polkadot/ui-shared": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-shared/-/ui-shared-2.11.1.tgz",
+      "integrity": "sha512-+qCLPT3SEnHOG3WvO0iYSJ6zArPQGCz9nHx8X8rw9GhffdiEC20ae63jB6dQTjR5GppPQx0aLE/cOppWn/HpRg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "color": "^3.2.1"
+      },
+      "peerDependencies": {
+        "@polkadot/util": "*",
+        "@polkadot/util-crypto": "*"
+      }
+    },
     "node_modules/@polkadot/util": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
@@ -7045,6 +7085,24 @@
       "resolved": "https://registry.npmmirror.com/detect-browser/-/detect-browser-5.2.0.tgz",
       "integrity": "sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA=="
     },
+    "node_modules/@walletconnect/crypto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/crypto/-/crypto-1.0.3.tgz",
+      "integrity": "sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==",
+      "dependencies": {
+        "@walletconnect/encoding": "^1.0.2",
+        "@walletconnect/environment": "^1.0.1",
+        "@walletconnect/randombytes": "^1.0.3",
+        "aes-js": "^3.1.2",
+        "hash.js": "^1.1.7",
+        "tslib": "1.14.1"
+      }
+    },
+    "node_modules/@walletconnect/crypto/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@walletconnect/encoding": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/encoding/-/encoding-1.0.2.tgz",
@@ -7073,6 +7131,16 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@walletconnect/iso-crypto": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/iso-crypto/-/iso-crypto-1.8.0.tgz",
+      "integrity": "sha512-pWy19KCyitpfXb70hA73r9FcvklS+FvO9QUIttp3c2mfW8frxgYeRXfxLRCIQTkaYueRKvdqPjbyhPLam508XQ==",
+      "dependencies": {
+        "@walletconnect/crypto": "^1.0.2",
+        "@walletconnect/types": "^1.8.0",
+        "@walletconnect/utils": "^1.8.0"
+      }
+    },
     "node_modules/@walletconnect/jsonrpc-types": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.2.tgz",
@@ -7102,6 +7170,22 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@walletconnect/randombytes": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/randombytes/-/randombytes-1.0.3.tgz",
+      "integrity": "sha512-35lpzxcHFbTN3ABefC9W+uBpNZl1GC4Wpx0ed30gibfO/y9oLdy1NznbV96HARQKSBV9J9M/rrtIvf6a23jfYw==",
+      "dependencies": {
+        "@walletconnect/encoding": "^1.0.2",
+        "@walletconnect/environment": "^1.0.1",
+        "randombytes": "^2.1.0",
+        "tslib": "1.14.1"
+      }
+    },
+    "node_modules/@walletconnect/randombytes/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@walletconnect/safe-json": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/@walletconnect/safe-json/-/safe-json-1.0.0.tgz",
@@ -7360,6 +7444,11 @@
         "object-assign": "4.x"
       }
     },
+    "node_modules/aes-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/aes-js/-/aes-js-3.1.2.tgz",
+      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
+    },
     "node_modules/aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -8071,6 +8160,14 @@
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
       "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
     },
+    "node_modules/browser-passworder": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/browser-passworder/-/browser-passworder-2.0.3.tgz",
+      "integrity": "sha512-8mTcGjsVqYkRW0qLmdussBjf/5joBUpvZfR8jUojITBJVVZIS5BL41Qt/xehS+n2ChA2YJHHLPhlkXziK+gvsw==",
+      "dependencies": {
+        "browserify-unibabel": "^3.0.0"
+      }
+    },
     "node_modules/browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -8130,6 +8227,11 @@
         "safe-buffer": "^5.2.0"
       }
     },
+    "node_modules/browserify-unibabel": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/browserify-unibabel/-/browserify-unibabel-3.0.0.tgz",
+      "integrity": "sha512-j3MX0k2dC1/DEo9jSUyj7zpv5wLd1+klpFwYlM0E5mr7MX6LblQOWb+jkBEKV2iRszmhJuLHAtNuqranlGnpNQ=="
+    },
     "node_modules/browserify-zlib": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
@@ -8291,6 +8393,14 @@
         }
       ]
     },
+    "node_modules/canvas-renderer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/canvas-renderer/-/canvas-renderer-2.2.1.tgz",
+      "integrity": "sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -8486,6 +8596,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -8499,6 +8618,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -10313,6 +10441,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ethereum-blockies-base64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz",
+      "integrity": "sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w==",
+      "dependencies": {
+        "pnglib": "0.0.1"
+      }
+    },
     "node_modules/event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -12155,6 +12291,20 @@
       "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
       "dev": true
     },
+    "node_modules/jdenticon": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jdenticon/-/jdenticon-3.2.0.tgz",
+      "integrity": "sha512-z6Iq3fTODUMSOiR2nNYrqigS6Y0GvdXfyQWrUby7htDHvX7GNEwaWR4hcaL+FmhEgBe08Xkup/BKxXQhDJByPA==",
+      "dependencies": {
+        "canvas-renderer": "~2.2.0"
+      },
+      "bin": {
+        "jdenticon": "bin/jdenticon.js"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
     "node_modules/jest-haste-map": {
       "version": "29.4.1",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.4.1.tgz",
@@ -14064,6 +14214,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pnglib": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/pnglib/-/pnglib-0.0.1.tgz",
+      "integrity": "sha512-95ChzOoYLOPIyVmL+Y6X+abKGXUJlvOVLkB1QQkyXl7Uczc6FElUy/x01NS7r2GX6GRezloO/ecCX9h4U9KadA=="
+    },
     "node_modules/point-in-polygon": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
@@ -15557,6 +15712,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -16456,6 +16623,19 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/single-spa": {
       "version": "5.9.4",
       "resolved": "https://registry.npmjs.org/single-spa/-/single-spa-5.9.4.tgz",
@@ -16972,7 +17152,6 @@
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
       "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
@@ -20316,7 +20495,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
       "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
-      "peer": true,
       "requires": {
         "@emotion/memoize": "^0.8.0"
       }
@@ -20324,14 +20502,12 @@
     "@emotion/memoize": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
-      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==",
-      "peer": true
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "peer": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
@@ -21295,6 +21471,24 @@
         "@polkadot/x-fetch": "^10.2.3"
       }
     },
+    "@polkadot/react-identicon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/react-identicon/-/react-identicon-2.11.1.tgz",
+      "integrity": "sha512-pqEsiXuKOXDrXNnsFB1JyBbFqedbiDwtP0yewIQ9vtwJwm01o7oE0yGfYS88hnPN1mLDc++MMcqvrHBsxYr2Lw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/keyring": "^10.3.1",
+        "@polkadot/ui-settings": "2.11.1",
+        "@polkadot/ui-shared": "2.11.1",
+        "@polkadot/util": "^10.3.1",
+        "@polkadot/util-crypto": "^10.3.1",
+        "color": "^3.2.1",
+        "ethereum-blockies-base64": "^1.0.2",
+        "jdenticon": "3.2.0",
+        "react-copy-to-clipboard": "^5.1.0",
+        "styled-components": "^5.3.6"
+      }
+    },
     "@polkadot/rpc-augment": {
       "version": "9.13.6",
       "resolved": "https://registry.npmmirror.com/@polkadot/rpc-augment/-/rpc-augment-9.13.6.tgz",
@@ -21442,6 +21636,15 @@
         "store": "^2.0.12"
       }
     },
+    "@polkadot/ui-shared": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/ui-shared/-/ui-shared-2.11.1.tgz",
+      "integrity": "sha512-+qCLPT3SEnHOG3WvO0iYSJ6zArPQGCz9nHx8X8rw9GhffdiEC20ae63jB6dQTjR5GppPQx0aLE/cOppWn/HpRg==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "color": "^3.2.1"
+      }
+    },
     "@polkadot/util": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
@@ -23675,6 +23878,26 @@
         }
       }
     },
+    "@walletconnect/crypto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/crypto/-/crypto-1.0.3.tgz",
+      "integrity": "sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==",
+      "requires": {
+        "@walletconnect/encoding": "^1.0.2",
+        "@walletconnect/environment": "^1.0.1",
+        "@walletconnect/randombytes": "^1.0.3",
+        "aes-js": "^3.1.2",
+        "hash.js": "^1.1.7",
+        "tslib": "1.14.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@walletconnect/encoding": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/encoding/-/encoding-1.0.2.tgz",
@@ -23707,6 +23930,16 @@
         }
       }
     },
+    "@walletconnect/iso-crypto": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/iso-crypto/-/iso-crypto-1.8.0.tgz",
+      "integrity": "sha512-pWy19KCyitpfXb70hA73r9FcvklS+FvO9QUIttp3c2mfW8frxgYeRXfxLRCIQTkaYueRKvdqPjbyhPLam508XQ==",
+      "requires": {
+        "@walletconnect/crypto": "^1.0.2",
+        "@walletconnect/types": "^1.8.0",
+        "@walletconnect/utils": "^1.8.0"
+      }
+    },
     "@walletconnect/jsonrpc-types": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.2.tgz",
@@ -23740,6 +23973,24 @@
         }
       }
     },
+    "@walletconnect/randombytes": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@walletconnect/randombytes/-/randombytes-1.0.3.tgz",
+      "integrity": "sha512-35lpzxcHFbTN3ABefC9W+uBpNZl1GC4Wpx0ed30gibfO/y9oLdy1NznbV96HARQKSBV9J9M/rrtIvf6a23jfYw==",
+      "requires": {
+        "@walletconnect/encoding": "^1.0.2",
+        "@walletconnect/environment": "^1.0.1",
+        "randombytes": "^2.1.0",
+        "tslib": "1.14.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@walletconnect/safe-json": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/@walletconnect/safe-json/-/safe-json-1.0.0.tgz",
@@ -23988,6 +24239,11 @@
         "object-assign": "4.x"
       }
     },
+    "aes-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/aes-js/-/aes-js-3.1.2.tgz",
+      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
+    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -24516,6 +24772,14 @@
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
       "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
     },
+    "browser-passworder": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/browser-passworder/-/browser-passworder-2.0.3.tgz",
+      "integrity": "sha512-8mTcGjsVqYkRW0qLmdussBjf/5joBUpvZfR8jUojITBJVVZIS5BL41Qt/xehS+n2ChA2YJHHLPhlkXziK+gvsw==",
+      "requires": {
+        "browserify-unibabel": "^3.0.0"
+      }
+    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -24575,6 +24839,11 @@
         "safe-buffer": "^5.2.0"
       }
     },
+    "browserify-unibabel": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/browserify-unibabel/-/browserify-unibabel-3.0.0.tgz",
+      "integrity": "sha512-j3MX0k2dC1/DEo9jSUyj7zpv5wLd1+klpFwYlM0E5mr7MX6LblQOWb+jkBEKV2iRszmhJuLHAtNuqranlGnpNQ=="
+    },
     "browserify-zlib": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
@@ -24690,6 +24959,14 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
       "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw=="
     },
+    "canvas-renderer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/canvas-renderer/-/canvas-renderer-2.2.1.tgz",
+      "integrity": "sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -24830,6 +25107,15 @@
         "is-regexp": "^2.0.0"
       }
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -24843,6 +25129,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -26101,6 +26396,14 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
+    "ethereum-blockies-base64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz",
+      "integrity": "sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w==",
+      "requires": {
+        "pnglib": "0.0.1"
+      }
+    },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -27423,6 +27726,14 @@
       "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
       "dev": true
     },
+    "jdenticon": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jdenticon/-/jdenticon-3.2.0.tgz",
+      "integrity": "sha512-z6Iq3fTODUMSOiR2nNYrqigS6Y0GvdXfyQWrUby7htDHvX7GNEwaWR4hcaL+FmhEgBe08Xkup/BKxXQhDJByPA==",
+      "requires": {
+        "canvas-renderer": "~2.2.0"
+      }
+    },
     "jest-haste-map": {
       "version": "29.4.1",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.4.1.tgz",
@@ -28862,6 +29173,11 @@
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
       "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ=="
     },
+    "pnglib": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/pnglib/-/pnglib-0.0.1.tgz",
+      "integrity": "sha512-95ChzOoYLOPIyVmL+Y6X+abKGXUJlvOVLkB1QQkyXl7Uczc6FElUy/x01NS7r2GX6GRezloO/ecCX9h4U9KadA=="
+    },
     "point-in-polygon": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
@@ -29820,6 +30136,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "requires": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -30495,6 +30820,21 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "single-spa": {
       "version": "5.9.4",
       "resolved": "https://registry.npmjs.org/single-spa/-/single-spa-5.9.4.tgz",
@@ -30912,7 +31252,6 @@
       "version": "5.3.6",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
       "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
-      "peer": true,
       "requires": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
diff --git a/package.json b/package.json
index 174c7d7..ae42c5d 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,15 @@
     "@ant-design/pro-components": "^2.0.1",
     "@deficonnect/utils": "^2.0.3",
     "@polkadot/extension-base": "^0.44.8",
+    "@polkadot/react-identicon": "^2.11.1",
     "@polkadot/ui-keyring": "^2.11.1",
     "@polkadot/util-crypto": "^10.3.1",
     "@umijs/max": "^4.0.47",
+    "@walletconnect/iso-crypto": "^1.8.0",
     "@walletconnect/utils": "^1.8.0",
     "ahooks": "^3.7.4",
     "antd": "^5.0.0",
+    "browser-passworder": "^2.0.3",
     "dexie": "^3.2.3",
     "koa-compose": "^4.1.0",
     "uuid": "^9.0.0"
diff --git a/src/components/AccountInfo/index.tsx b/src/components/AccountInfo/index.tsx
new file mode 100644
index 0000000..19e5cc0
--- /dev/null
+++ b/src/components/AccountInfo/index.tsx
@@ -0,0 +1,29 @@
+import Icon from '@polkadot/react-identicon'
+import { Avatar, Card, Typography } from 'antd'
+import { FC } from 'react'
+
+const { Paragraph } = Typography
+
+export const AccountInfo: FC<{ name?: string; address?: string }> = ({
+  name,
+  address,
+}) => {
+  const cName = name ?? ''
+  const cAddress = address ?? ''
+  return (
+    <Card style={{ marginBottom: 16 }}>
+      <Card.Meta
+        avatar={
+          <Avatar icon={<Icon size={32} value={cAddress ?? 'User'} />}></Avatar>
+        }
+        title={cName.length > 2 ? name : '<unknown>'}
+      />
+      <Paragraph
+        copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+        style={{ marginTop: 16, marginBottom: 0 }}
+      >
+        {cAddress}
+      </Paragraph>
+    </Card>
+  )
+}
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index c68a721..c878632 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -1,6 +1,7 @@
 import { mnemonicValidate } from '@polkadot/util-crypto'
 import assert from 'assert'
 
+import KeyringService from '../service/keyring.service'
 import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
@@ -13,6 +14,44 @@ const WalletController = {
     const result = await WalletService.createSeed(seed)
     return ctx.pushResponse(result)
   },
+
+  async wallet_createAccount(
+    ctx: KoaContext<
+      [
+        {
+          name: string
+          network: number
+          password: string
+          seed: string
+        },
+      ]
+    >,
+  ) {
+    const { name, network, password, seed } = ctx.params[0]
+    assert(name, 'Missing name')
+    assert(network, 'Missing network')
+    assert(password, 'Missing password')
+
+    assert(mnemonicValidate(seed), 'Not a valid mnemonic seed')
+
+    const account = await WalletService.createSeed(seed)
+
+    const keyringId = await KeyringService.createMnemonic(password, seed)
+
+    const accountId = await WalletService.createAccount({
+      name,
+      network,
+      keyringId,
+      address: account.address,
+    })
+
+    return ctx.pushResponse({ accountId })
+  },
+
+  async wallet_queryAllAccount(ctx: KoaContext) {
+    const accounts = await WalletService.queryAllAccount()
+    return ctx.pushResponse(accounts)
+  },
 }
 
 export default WalletController
diff --git a/src/extension/background/model/keyring.model.ts b/src/extension/background/model/keyring.model.ts
new file mode 100644
index 0000000..ad8db6c
--- /dev/null
+++ b/src/extension/background/model/keyring.model.ts
@@ -0,0 +1,31 @@
+import type { Table } from 'dexie'
+import { Dexie } from 'dexie'
+
+export interface Keyring {
+  id?: number
+  buffer: Buffer
+}
+
+class KeyringModelDB extends Dexie {
+  public keyrings!: Table<Keyring, number>
+  public constructor() {
+    super('keyring-model')
+    this.version(1).stores({
+      keyrings: '++id',
+    })
+  }
+}
+
+class KeyringModel {
+  static db = new KeyringModelDB()
+
+  public static get keyrings() {
+    return KeyringModel.db.keyrings
+  }
+  public static async reset() {
+    await Dexie.delete('keyring-model')
+    KeyringModel.db = new KeyringModelDB()
+  }
+}
+
+export default KeyringModel
diff --git a/src/extension/background/model/wallet.model.ts b/src/extension/background/model/wallet.model.ts
new file mode 100644
index 0000000..2c3315e
--- /dev/null
+++ b/src/extension/background/model/wallet.model.ts
@@ -0,0 +1,32 @@
+import type { Table } from 'dexie'
+import Dexie from 'dexie'
+
+export type WalletType = 'mnemonic' | 'privateKey' | 'hardware' | 'mobile'
+
+export interface Wallet {
+  id?: number
+  walletId: string
+  name: string
+  icon?: string
+
+  /** for multi wallet */
+  keyringId?: number // reference to the KeyringModel id
+  walletType: WalletType
+  address: string
+  network: number
+  createTime: number
+}
+
+class WalletModelDB extends Dexie {
+  public wallets!: Table<Wallet, number>
+  public constructor() {
+    super('wallet-model')
+    this.version(1).stores({
+      wallets: '++id, &walletId',
+    })
+  }
+}
+
+const WalletModel = new WalletModelDB()
+
+export default WalletModel
diff --git a/src/extension/background/service/keyring.service.ts b/src/extension/background/service/keyring.service.ts
new file mode 100644
index 0000000..fc7fd1a
--- /dev/null
+++ b/src/extension/background/service/keyring.service.ts
@@ -0,0 +1,24 @@
+import assert from 'assert'
+
+import KeyringModel from '../model/keyring.model'
+import { decrypt, encrypt } from '../utils/crypto-utils'
+
+const KeyringService = {
+  async createMnemonic(password: string, mnemonic: string) {
+    const encryptedText = await encrypt(password, mnemonic)
+    const buffer = Buffer.from(encryptedText)
+    return KeyringModel.keyrings.add({ buffer })
+  },
+  async getMnemonic(password: string, id = 1) {
+    const keyring = await KeyringModel.keyrings.get({ id })
+    assert(keyring, `Not found this keyring by id: ${id}`)
+    const encryptedText = new TextDecoder().decode(keyring.buffer)
+    return decrypt<string>(password, encryptedText)
+  },
+
+  async deleteMnemonic(id = 1) {
+    return KeyringModel.keyrings.delete(id)
+  },
+}
+
+export default KeyringService
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index c81381b..23bbd70 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -1,6 +1,9 @@
+import { uuid } from '@deficonnect/utils'
 import keyring from '@polkadot/ui-keyring'
 import { mnemonicGenerate } from '@polkadot/util-crypto'
 
+import WalletModel from '../model/wallet.model'
+
 const WalletService = {
   async createSeed(seed?: string) {
     const newSeed = seed ?? mnemonicGenerate()
@@ -9,6 +12,31 @@ const WalletService = {
       seed: newSeed,
     }
   },
+  async createAccount(params: {
+    name: string
+    network: number
+    keyringId: number
+    address: string
+  }) {
+    const { name, network, address, keyringId } = params
+
+    const accountId = await WalletModel.wallets.add({
+      walletId: uuid(),
+      name,
+      network,
+      address,
+      keyringId,
+      walletType: 'mnemonic',
+      createTime: Date.now(),
+    })
+
+    return accountId
+  },
+
+  async queryAllAccount() {
+    const accounts = await WalletModel.wallets.toArray()
+    return accounts
+  },
 }
 
 export default WalletService
diff --git a/src/extension/background/utils/crypto-utils.ts b/src/extension/background/utils/crypto-utils.ts
new file mode 100644
index 0000000..69aa380
--- /dev/null
+++ b/src/extension/background/utils/crypto-utils.ts
@@ -0,0 +1,35 @@
+import { convertHexToArrayBuffer } from '@deficonnect/utils'
+import * as cryptoLib from '@walletconnect/iso-crypto'
+
+import { safeJsonParse } from '@/utils/tools/json-tools'
+
+const encryptor = require('browser-passworder')
+
+export async function encryptMessageByKey(
+  msg: string,
+  keyText: string,
+): Promise<string> {
+  const key = convertHexToArrayBuffer(keyText)
+  const result = await cryptoLib.encrypt(safeJsonParse(msg), key)
+  return JSON.stringify(result)
+}
+
+export async function decryptMessageByKey(
+  msg: string,
+  keyString: string,
+): Promise<string> {
+  const key = convertHexToArrayBuffer(keyString)
+  const result = await cryptoLib.decrypt(safeJsonParse(msg), key)
+  return JSON.stringify(result)
+}
+
+export async function encrypt<T>(
+  password: string,
+  dataObj: T,
+): Promise<string> {
+  return encryptor.encrypt(password, dataObj)
+}
+
+export async function decrypt<T>(password: string, text: string): Promise<T> {
+  return encryptor.decrypt(password, text)
+}
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index 0282a8c..dcfd42b 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -11,7 +11,6 @@ import {
   Row,
   Col,
   Card,
-  Avatar,
   Checkbox,
   Spin,
   Form,
@@ -19,9 +18,12 @@ import {
   Select,
 } from 'antd'
 import { FC, useState } from 'react'
+import { history } from 'umi'
 
 import { rpcClient } from '@/services/rpc-client'
 
+import { AccountInfo } from '@/components/AccountInfo'
+
 import styles from './index.less'
 
 interface FormFields {
@@ -32,7 +34,7 @@ interface FormFields {
 
 const { Title, Paragraph, Text } = Typography
 
-const CreatePage: React.FC = () => {
+const CreatePage: FC = () => {
   const [isChecked, setIsChecked] = useState(false)
 
   const [current, setCurrent] = useState(1)
@@ -54,30 +56,22 @@ const CreatePage: React.FC = () => {
     },
   )
 
-  const AccountInfo: FC<{ name?: string }> = ({ name }) => {
-    const cName = name ?? ''
-    return (
-      <Card>
-        <Card.Meta
-          avatar={
-            <Avatar>
-              {cName.length > 2 ? cName[0].toLocaleUpperCase() : 'U'}
-            </Avatar>
-          }
-          title={cName.length > 2 ? name : '<unknown>'}
-        />
-        <Paragraph
-          copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-          style={{ marginTop: 16, marginBottom: 0 }}
-        >
-          {account?.address}
-        </Paragraph>
-      </Card>
-    )
-  }
-
-  const onFinish = (values: any) => {
-    console.log('Success:', values)
+  const onFinish = async (values: FormFields) => {
+    const result = await rpcClient.sendRequest({
+      method: 'wallet_createAccount',
+      params: [
+        {
+          name: values.name.trim(),
+          password: values.password.trim(),
+          network: values.network,
+          seed: account?.seed ?? '',
+        },
+      ],
+    })
+    if (result) {
+      message.success('Create Account Success')
+      history.replace('/home')
+    }
   }
 
   const onFinishFailed = (errorInfo: any) => {
@@ -98,7 +92,7 @@ const CreatePage: React.FC = () => {
             title="Cancel"
             icon={<CloseOutlined />}
             onClick={() => {
-              history.go(-1)
+              history.replace('/home')
             }}
           ></Button>
         </Col>
@@ -106,20 +100,20 @@ const CreatePage: React.FC = () => {
       {/* Step 1 */}
       {current === 1 && (
         <Spin spinning={loading}>
-          <AccountInfo />
-          <Row style={{ marginTop: 16 }}>
+          <AccountInfo address={account?.address} />
+          <Row>
             <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph>
           </Row>
-          <Card>
+          <Card style={{ marginBottom: 16 }}>
             <Paragraph
               copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-              style={{ marginBottom: 0 }}
+              style={{ marginTop: 0 }}
               type="warning"
             >
               {account?.seed}
             </Paragraph>
           </Card>
-          <Row style={{ marginTop: 16 }}>
+          <Row style={{ marginBottom: 16 }}>
             <Paragraph>
               <WarningTwoTone
                 twoToneColor="#faad14"
@@ -130,7 +124,7 @@ const CreatePage: React.FC = () => {
               it carefully to not lose your assets.
             </Paragraph>
           </Row>
-          <Row style={{ marginTop: 16 }}>
+          <Row style={{ marginBottom: 16 }}>
             <Checkbox
               checked={isChecked}
               onChange={(e) => {
@@ -140,7 +134,7 @@ const CreatePage: React.FC = () => {
               I have saved my mnemonic seed safely
             </Checkbox>
           </Row>
-          <Row style={{ marginTop: 16 }}>
+          <Row style={{ marginBottom: 16 }}>
             <Button
               disabled={!isChecked}
               style={{ width: '100%' }}
@@ -158,8 +152,8 @@ const CreatePage: React.FC = () => {
       {/* Step 2 */}
       {current === 2 && (
         <Spin spinning={loading}>
-          <AccountInfo name={name} />
-          <Row style={{ marginTop: 16 }}>
+          <AccountInfo name={name} address={account?.address} />
+          <Row style={{ marginBottom: 16 }}>
             <Form
               name="basic"
               form={form}
@@ -237,7 +231,7 @@ const CreatePage: React.FC = () => {
                 <Input.Password placeholder="Confirm your password" />
               </Form.Item>
 
-              <Row style={{ marginTop: 16 }}>
+              <Row style={{ marginBottom: 16 }}>
                 <Col flex="36px">
                   <Button
                     icon={<ArrowLeftOutlined />}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 1e803f6..38138b1 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,12 +1,24 @@
 import { PlusOutlined } from '@ant-design/icons'
 import { history } from '@umijs/max'
-import { Button, Typography, Row, Col } from 'antd'
+import { useRequest } from 'ahooks'
+import { Button, Typography, Row, Col, Spin } from 'antd'
+
+import { rpcClient } from '@/services/rpc-client'
+
+import { AccountInfo } from '@/components/AccountInfo'
 
 import styles from './index.less'
 
 const { Title } = Typography
 
 const HomePage: React.FC = () => {
+  const { data: accounts, loading } = useRequest(async () => {
+    return rpcClient.sendRequest({
+      method: 'wallet_queryAllAccount',
+      params: [],
+    })
+  })
+  console.log('test', accounts)
   return (
     <div className={styles.container}>
       <Row style={{ marginBottom: 16 }}>
@@ -25,12 +37,25 @@ const HomePage: React.FC = () => {
           ></Button>
         </Col>
       </Row>
-      <div style={{ marginTop: 60, textAlign: 'center' }}>
-        <Typography.Text>
-          You currently do not have any accounts. Create your first account to
-          get started.
-        </Typography.Text>
-      </div>
+      <Spin spinning={loading}>
+        {!accounts && (
+          <div style={{ marginTop: 60, textAlign: 'center' }}>
+            <Typography.Text>
+              You currently do not have any accounts. Create your first account
+              to get started.
+            </Typography.Text>
+          </div>
+        )}
+
+        {accounts &&
+          accounts.map((account) => (
+            <AccountInfo
+              key={account.walletId}
+              name={account.name}
+              address={account.address}
+            />
+          ))}
+      </Spin>
     </div>
   )
 }
diff --git a/src/utils/tools/json-tools.ts b/src/utils/tools/json-tools.ts
new file mode 100644
index 0000000..4028bb5
--- /dev/null
+++ b/src/utils/tools/json-tools.ts
@@ -0,0 +1,14 @@
+/**
+ * safe json prase
+ * @param jsonString
+ * @returns
+ */
+export function safeJsonParse(jsonString: string | null) {
+  let res = null
+  try {
+    res = JSON.parse(jsonString ?? '')
+  } catch (e) {
+    // console.trace(e)
+  }
+  return res
+}

From 05a22953a269d98b791c7c5d450a2d551a7b6b1f Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 17:17:20 +0800
Subject: [PATCH 08/24] feat: home page accounts list

---
 src/pages/Home/index.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 38138b1..f240663 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,7 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons'
 import { history } from '@umijs/max'
 import { useRequest } from 'ahooks'
-import { Button, Typography, Row, Col, Spin } from 'antd'
+import { Button, Typography, Row, Col, Spin, Dropdown, MenuProps } from 'antd'
 
 import { rpcClient } from '@/services/rpc-client'
 
@@ -11,6 +11,23 @@ import styles from './index.less'
 
 const { Title } = Typography
 
+const items: MenuProps['items'] = [
+  {
+    key: '1',
+    label: 'Create new account',
+    onClick: () => {
+      history.push('/create')
+    },
+  },
+  {
+    key: '2',
+    label: 'Import account from pre-existing seed',
+    onClick: () => {
+      history.push('/create')
+    },
+  },
+]
+
 const HomePage: React.FC = () => {
   const { data: accounts, loading } = useRequest(async () => {
     return rpcClient.sendRequest({
@@ -18,7 +35,7 @@ const HomePage: React.FC = () => {
       params: [],
     })
   })
-  console.log('test', accounts)
+
   return (
     <div className={styles.container}>
       <Row style={{ marginBottom: 16 }}>
@@ -28,13 +45,9 @@ const HomePage: React.FC = () => {
           </Title>
         </Col>
         <Col span={8} style={{ textAlign: 'right' }}>
-          <Button
-            icon={<PlusOutlined />}
-            title="Create new account"
-            onClick={() => {
-              history.push('/create')
-            }}
-          ></Button>
+          <Dropdown menu={{ items }} placement="bottomRight" arrow>
+            <Button icon={<PlusOutlined />} title="Create new account"></Button>
+          </Dropdown>
         </Col>
       </Row>
       <Spin spinning={loading}>

From e9374fa8d8117e46fb9bb9b0d7a61d6678e72a9f Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 19:00:26 +0800
Subject: [PATCH 09/24] feat: finished import phrase

---
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 src/components/AccountInfo/index.tsx          |   4 +-
 .../controller/balance.controller.ts          |  16 ++
 .../controller/wallet.controller.ts           |   6 +
 .../background/model/wallet.model.ts          |   3 +-
 src/extension/background/router.ts            |   2 +
 .../background/service/balance.service.ts     |  17 +++
 .../background/service/wallet.service.ts      |  10 +-
 src/pages/Create/index.tsx                    | 138 +++++++++++++-----
 src/pages/Home/index.tsx                      |   8 +-
 11 files changed, 162 insertions(+), 44 deletions(-)
 create mode 100644 src/extension/background/controller/balance.controller.ts
 create mode 100644 src/extension/background/service/balance.service.ts

diff --git a/package-lock.json b/package-lock.json
index 3ded611..9ad58bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@ant-design/icons": "^4.7.0",
         "@ant-design/pro-components": "^2.0.1",
         "@deficonnect/utils": "^2.0.3",
+        "@polkadot/api": "^9.13.6",
         "@polkadot/extension-base": "^0.44.8",
         "@polkadot/react-identicon": "^2.11.1",
         "@polkadot/ui-keyring": "^2.11.1",
diff --git a/package.json b/package.json
index ae42c5d..eedb5b0 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "^2.0.1",
     "@deficonnect/utils": "^2.0.3",
+    "@polkadot/api": "^9.13.6",
     "@polkadot/extension-base": "^0.44.8",
     "@polkadot/react-identicon": "^2.11.1",
     "@polkadot/ui-keyring": "^2.11.1",
diff --git a/src/components/AccountInfo/index.tsx b/src/components/AccountInfo/index.tsx
index 19e5cc0..9fb3af9 100644
--- a/src/components/AccountInfo/index.tsx
+++ b/src/components/AccountInfo/index.tsx
@@ -14,7 +14,7 @@ export const AccountInfo: FC<{ name?: string; address?: string }> = ({
     <Card style={{ marginBottom: 16 }}>
       <Card.Meta
         avatar={
-          <Avatar icon={<Icon size={32} value={cAddress ?? 'User'} />}></Avatar>
+          <Avatar icon={<Icon size={32} value={cAddress || 'User'} />}></Avatar>
         }
         title={cName.length > 2 ? name : '<unknown>'}
       />
@@ -22,7 +22,7 @@ export const AccountInfo: FC<{ name?: string; address?: string }> = ({
         copyable={{ tooltips: ['Copy address', 'Copied!'] }}
         style={{ marginTop: 16, marginBottom: 0 }}
       >
-        {cAddress}
+        {cAddress || '<unknown>'}
       </Paragraph>
     </Card>
   )
diff --git a/src/extension/background/controller/balance.controller.ts b/src/extension/background/controller/balance.controller.ts
new file mode 100644
index 0000000..941456f
--- /dev/null
+++ b/src/extension/background/controller/balance.controller.ts
@@ -0,0 +1,16 @@
+import assert from 'assert'
+
+import BalanceService from '../service/balance.service'
+import { KoaContext } from './../koa-ts/lib/context'
+
+const BalanceController = {
+  async balance_queryByAddress(ctx: KoaContext<[{ address: string }]>) {
+    const { address } = ctx.params[0]
+    assert(address, 'Missing address')
+
+    const balance = await BalanceService.queryByAddress(address)
+    return ctx.pushResponse({ balance })
+  },
+}
+
+export default BalanceController
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index c878632..4613fb7 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -1,10 +1,13 @@
 import { mnemonicValidate } from '@polkadot/util-crypto'
 import assert from 'assert'
 
+// import BalanceService from '../service/balance.service'
 import KeyringService from '../service/keyring.service'
 import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
+// import BalanceController from './balance.controller'
+
 const WalletController = {
   async wallet_createSeed(ctx: KoaContext<[{ seed?: string }]>) {
     const { seed } = ctx.params[0]
@@ -50,6 +53,9 @@ const WalletController = {
 
   async wallet_queryAllAccount(ctx: KoaContext) {
     const accounts = await WalletService.queryAllAccount()
+    // const [account] = accounts
+    // const result = await BalanceService.queryByAddress(account.address)
+    // console.log('test', result)
     return ctx.pushResponse(accounts)
   },
 }
diff --git a/src/extension/background/model/wallet.model.ts b/src/extension/background/model/wallet.model.ts
index 2c3315e..5ff93b4 100644
--- a/src/extension/background/model/wallet.model.ts
+++ b/src/extension/background/model/wallet.model.ts
@@ -22,7 +22,8 @@ class WalletModelDB extends Dexie {
   public constructor() {
     super('wallet-model')
     this.version(1).stores({
-      wallets: '++id, &walletId',
+      wallets:
+        '++id, &walletId, name, keyringId, walletType, address, network, createTime',
     })
   }
 }
diff --git a/src/extension/background/router.ts b/src/extension/background/router.ts
index de0ddb3..5a1e406 100644
--- a/src/extension/background/router.ts
+++ b/src/extension/background/router.ts
@@ -1,3 +1,4 @@
+import BalanceController from './controller/balance.controller'
 import DappController from './controller/dapp.controller'
 import ExampleController from './controller/example.controller'
 import WalletController from './controller/wallet.controller'
@@ -7,6 +8,7 @@ const routers = {
   ...ExampleController,
   ...DappController,
   ...WalletController,
+  ...BalanceController,
 }
 
 export type IRouters = keyof typeof routers
diff --git a/src/extension/background/service/balance.service.ts b/src/extension/background/service/balance.service.ts
new file mode 100644
index 0000000..48edc09
--- /dev/null
+++ b/src/extension/background/service/balance.service.ts
@@ -0,0 +1,17 @@
+import { ApiPromise, WsProvider } from '@polkadot/api'
+
+const BalanceService = {
+  async queryByAddress(address: string) {
+    const wsProvider = new WsProvider('wss://ws.calamari.seabird.systems')
+    const api = await ApiPromise.create({ provider: wsProvider })
+
+    const now = await api.query.timestamp.now()
+
+    const { nonce, data: balance } = await api.query.system.account(address)
+    console.log(`${now}: balance of ${balance.free} and a nonce of ${nonce}`)
+
+    return address
+  },
+}
+
+export default BalanceService
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index 23bbd70..fc0c799 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -1,6 +1,7 @@
 import { uuid } from '@deficonnect/utils'
 import keyring from '@polkadot/ui-keyring'
 import { mnemonicGenerate } from '@polkadot/util-crypto'
+import assert from 'assert'
 
 import WalletModel from '../model/wallet.model'
 
@@ -20,6 +21,13 @@ const WalletService = {
   }) {
     const { name, network, address, keyringId } = params
 
+    const wallet = await WalletModel.wallets
+      .where('address')
+      .equals(address)
+      .first()
+
+    assert(!wallet, 'Existed same wallet')
+
     const accountId = await WalletModel.wallets.add({
       walletId: uuid(),
       name,
@@ -34,7 +42,7 @@ const WalletService = {
   },
 
   async queryAllAccount() {
-    const accounts = await WalletModel.wallets.toArray()
+    const accounts = await (await WalletModel.wallets.toArray()).reverse()
     return accounts
   },
 }
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index dcfd42b..36b0256 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -17,8 +17,8 @@ import {
   Input,
   Select,
 } from 'antd'
-import { FC, useState } from 'react'
-import { history } from 'umi'
+import { FC, useEffect, useMemo, useState } from 'react'
+import { history, useLocation } from 'umi'
 
 import { rpcClient } from '@/services/rpc-client'
 
@@ -26,6 +26,10 @@ import { AccountInfo } from '@/components/AccountInfo'
 
 import styles from './index.less'
 
+interface StateFields {
+  model?: string
+}
+
 interface FormFields {
   name: string
   password: string
@@ -35,42 +39,74 @@ interface FormFields {
 const { Title, Paragraph, Text } = Typography
 
 const CreatePage: FC = () => {
-  const [isChecked, setIsChecked] = useState(false)
-
+  const [isEnable, setIsEnable] = useState(false)
   const [current, setCurrent] = useState(1)
 
+  const location = useLocation()
+
   const [form] = Form.useForm<FormFields>()
   const name = Form.useWatch('name', form)
 
-  const { data: account, loading } = useRequest(
-    async () => {
+  const isImport = useMemo(() => {
+    const state = location.state as StateFields
+    return state?.model === 'import'
+  }, [location.state])
+
+  const {
+    data: account,
+    loading,
+    run,
+  } = useRequest(
+    async (seed?: string) => {
       return rpcClient.sendRequest({
         method: 'wallet_createSeed',
-        params: [{}],
+        params: [{ seed }],
       })
     },
     {
+      manual: true,
+      debounceWait: 300,
+      onSuccess: () => {
+        if (isImport) {
+          setIsEnable(true)
+        }
+      },
       onError: (e) => {
+        if (isImport) {
+          setIsEnable(false)
+        }
         message.error(e.message)
       },
     },
   )
 
+  useEffect(() => {
+    const state = location.state as StateFields
+    if (state?.model !== 'import') {
+      run()
+    }
+  }, [])
+
   const onFinish = async (values: FormFields) => {
-    const result = await rpcClient.sendRequest({
-      method: 'wallet_createAccount',
-      params: [
-        {
-          name: values.name.trim(),
-          password: values.password.trim(),
-          network: values.network,
-          seed: account?.seed ?? '',
-        },
-      ],
-    })
-    if (result) {
-      message.success('Create Account Success')
-      history.replace('/home')
+    try {
+      const result = await rpcClient.sendRequest({
+        method: 'wallet_createAccount',
+        params: [
+          {
+            name: values.name.trim(),
+            password: values.password.trim(),
+            network: values.network,
+            seed: account?.seed ?? '',
+          },
+        ],
+      })
+      if (result) {
+        message.success('Create Account Success')
+        history.replace('/home')
+        return
+      }
+    } catch (error: any) {
+      message.error(error?.message)
     }
   }
 
@@ -97,8 +133,37 @@ const CreatePage: FC = () => {
           ></Button>
         </Col>
       </Row>
-      {/* Step 1 */}
-      {current === 1 && (
+      {/* Step 1 import */}
+      {current === 1 && isImport && (
+        <>
+          <AccountInfo address={account?.address} />
+          <Row>
+            <Paragraph>EXISTING 12 OR 24-WORD MNEMONIC SEED</Paragraph>
+          </Row>
+
+          <Input.TextArea
+            style={{ height: 100, marginBottom: 16 }}
+            allowClear
+            onChange={(e) => run(e.target.value)}
+          />
+
+          <Row style={{ marginBottom: 16 }}>
+            <Button
+              disabled={!isEnable}
+              style={{ width: '100%' }}
+              type="primary"
+              onClick={() => {
+                setCurrent(2)
+              }}
+            >
+              Next step
+            </Button>
+          </Row>
+        </>
+      )}
+
+      {/* Step 1 create */}
+      {current === 1 && !isImport && (
         <Spin spinning={loading}>
           <AccountInfo address={account?.address} />
           <Row>
@@ -107,7 +172,7 @@ const CreatePage: FC = () => {
           <Card style={{ marginBottom: 16 }}>
             <Paragraph
               copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-              style={{ marginTop: 0 }}
+              style={{ marginBottom: 0 }}
               type="warning"
             >
               {account?.seed}
@@ -126,9 +191,9 @@ const CreatePage: FC = () => {
           </Row>
           <Row style={{ marginBottom: 16 }}>
             <Checkbox
-              checked={isChecked}
+              checked={isEnable}
               onChange={(e) => {
-                setIsChecked(e.target.checked)
+                setIsEnable(e.target.checked)
               }}
             >
               I have saved my mnemonic seed safely
@@ -136,7 +201,7 @@ const CreatePage: FC = () => {
           </Row>
           <Row style={{ marginBottom: 16 }}>
             <Button
-              disabled={!isChecked}
+              disabled={!isEnable}
               style={{ width: '100%' }}
               type="primary"
               onClick={() => {
@@ -232,14 +297,16 @@ const CreatePage: FC = () => {
               </Form.Item>
 
               <Row style={{ marginBottom: 16 }}>
-                <Col flex="36px">
-                  <Button
-                    icon={<ArrowLeftOutlined />}
-                    onClick={() => {
-                      setCurrent(1)
-                    }}
-                  ></Button>
-                </Col>
+                {!isImport && (
+                  <Col flex="36px">
+                    <Button
+                      icon={<ArrowLeftOutlined />}
+                      onClick={() => {
+                        setCurrent(1)
+                      }}
+                    ></Button>
+                  </Col>
+                )}
                 <Col flex="auto">
                   <Form.Item wrapperCol={{ span: 24 }}>
                     <Button
@@ -253,7 +320,6 @@ const CreatePage: FC = () => {
                 </Col>
               </Row>
             </Form>
-            {/* <Paragraph>GENERATED 12-WORD MNEMONIC SEED:</Paragraph> */}
           </Row>
         </Spin>
       )}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index f240663..0f07aa6 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -23,7 +23,7 @@ const items: MenuProps['items'] = [
     key: '2',
     label: 'Import account from pre-existing seed',
     onClick: () => {
-      history.push('/create')
+      history.push('/create', { model: 'import' })
     },
   },
 ]
@@ -51,7 +51,7 @@ const HomePage: React.FC = () => {
         </Col>
       </Row>
       <Spin spinning={loading}>
-        {!accounts && (
+        {accounts?.length === 0 && (
           <div style={{ marginTop: 60, textAlign: 'center' }}>
             <Typography.Text>
               You currently do not have any accounts. Create your first account
@@ -60,8 +60,8 @@ const HomePage: React.FC = () => {
           </div>
         )}
 
-        {accounts &&
-          accounts.map((account) => (
+        {accounts?.length !== 0 &&
+          accounts?.map((account) => (
             <AccountInfo
               key={account.walletId}
               name={account.name}

From 864c239a26b4d735305d77da67496581d600aee1 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 20:02:21 +0800
Subject: [PATCH 10/24] chore: update wallet list UIs

---
 src/components/AccountInfo/index.tsx | 38 +++++++++++++++++-----------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/AccountInfo/index.tsx b/src/components/AccountInfo/index.tsx
index 9fb3af9..88bc77e 100644
--- a/src/components/AccountInfo/index.tsx
+++ b/src/components/AccountInfo/index.tsx
@@ -1,5 +1,5 @@
 import Icon from '@polkadot/react-identicon'
-import { Avatar, Card, Typography } from 'antd'
+import { Avatar, Badge, Card, Typography } from 'antd'
 import { FC } from 'react'
 
 const { Paragraph } = Typography
@@ -11,19 +11,27 @@ export const AccountInfo: FC<{ name?: string; address?: string }> = ({
   const cName = name ?? ''
   const cAddress = address ?? ''
   return (
-    <Card style={{ marginBottom: 16 }}>
-      <Card.Meta
-        avatar={
-          <Avatar icon={<Icon size={32} value={cAddress || 'User'} />}></Avatar>
-        }
-        title={cName.length > 2 ? name : '<unknown>'}
-      />
-      <Paragraph
-        copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-        style={{ marginTop: 16, marginBottom: 0 }}
-      >
-        {cAddress || '<unknown>'}
-      </Paragraph>
-    </Card>
+    <Badge.Ribbon
+      text="Calamari Parachain Staging"
+      color="#ff7d01"
+      style={{ fontSize: '12px', lineHeight: '18px', height: '18px' }}
+    >
+      <Card style={{ marginBottom: 16 }}>
+        <Card.Meta
+          avatar={
+            <Avatar
+              icon={<Icon size={32} value={cAddress || 'User'} />}
+            ></Avatar>
+          }
+          title={cName.length > 2 ? name : '<unknown>'}
+        />
+        <Paragraph
+          copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+          style={{ marginTop: 16, marginBottom: 0 }}
+        >
+          {cAddress || '<unknown>'}
+        </Paragraph>
+      </Card>
+    </Badge.Ribbon>
   )
 }

From 2043a122891b50e1cf20f1ef6e5aa2c9049f4b4a Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 22:24:23 +0800
Subject: [PATCH 11/24] feat: finished balance update

---
 package-lock.json                             | 138 +++++++++++++++++-
 package.json                                  |   3 +
 src/components/AccountInfo/index.tsx          |  50 +++----
 src/extension/background/bootstrap.ts         |   4 +
 .../controller/balance.controller.ts          |   8 +-
 .../controller/wallet.controller.ts           |  24 ++-
 .../background/job/balance.refresh.job.ts     |  21 +++
 src/extension/background/job/index.ts         |   5 +-
 .../{keep-alive-job.ts => keep.alive.job.ts}  |   3 +-
 .../background/model/balance.model.ts         |  32 ++++
 .../background/service/balance.service.ts     |  36 ++++-
 .../background/service/wallet.service.ts      |   7 +
 src/pages/Create/index.tsx                    |   5 +
 src/pages/Home/index.tsx                      |  63 +++++++-
 14 files changed, 344 insertions(+), 55 deletions(-)
 create mode 100644 src/extension/background/job/balance.refresh.job.ts
 rename src/extension/background/job/{keep-alive-job.ts => keep.alive.job.ts} (89%)
 create mode 100644 src/extension/background/model/balance.model.ts

diff --git a/package-lock.json b/package-lock.json
index 9ad58bf..f95de22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,8 @@
         "browser-passworder": "^2.0.3",
         "dexie": "^3.2.3",
         "koa-compose": "^4.1.0",
+        "mathjs": "^11.5.1",
+        "numeral": "^2.0.6",
         "uuid": "^9.0.0"
       },
       "devDependencies": {
@@ -33,6 +35,7 @@
         "@types/generate-json-webpack-plugin": "^0.3.4",
         "@types/koa-compose": "^3.2.5",
         "@types/lodash": "^4.14.191",
+        "@types/numeral": "^2.0.2",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "@types/uuid": "^9.0.0",
@@ -5368,6 +5371,12 @@
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
     },
+    "node_modules/@types/numeral": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/numeral/-/numeral-2.0.2.tgz",
+      "integrity": "sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==",
+      "dev": true
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -8664,6 +8673,14 @@
       "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
       "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
     },
+    "node_modules/complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
@@ -9150,6 +9167,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -10050,6 +10072,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -12289,8 +12316,7 @@
     "node_modules/javascript-natural-sort": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
-      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
-      "dev": true
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
     },
     "node_modules/jdenticon": {
       "version": "3.2.0",
@@ -13210,6 +13236,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mathjs": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmmirror.com/mathjs/-/mathjs-11.5.1.tgz",
+      "integrity": "sha512-9r35KHkpywim2hfYhJS3QHnKS7u61CODQcYPbJZ6Rov2jXDOAun07mM+8a7SRsJKfiMxtWWMJeiHQXTEnnHyoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.1.0"
+      },
+      "bin": {
+        "mathjs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -13762,6 +13810,14 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -16538,6 +16594,11 @@
         "compute-scroll-into-view": "^2.0.4"
       }
     },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17732,6 +17793,11 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -17891,6 +17957,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-function": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/typed-function/-/typed-function-4.1.0.tgz",
+      "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -22471,6 +22545,12 @@
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
     },
+    "@types/numeral": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/numeral/-/numeral-2.0.2.tgz",
+      "integrity": "sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -25169,6 +25249,11 @@
       "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
       "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
     },
+    "complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg=="
+    },
     "compute-scroll-into-view": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
@@ -25524,6 +25609,11 @@
         }
       }
     },
+    "decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
     "decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -26132,6 +26222,11 @@
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -27724,8 +27819,7 @@
     "javascript-natural-sort": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
-      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
-      "dev": true
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
     },
     "jdenticon": {
       "version": "3.2.0",
@@ -28421,6 +28515,22 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ=="
     },
+    "mathjs": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmmirror.com/mathjs/-/mathjs-11.5.1.tgz",
+      "integrity": "sha512-9r35KHkpywim2hfYhJS3QHnKS7u61CODQcYPbJZ6Rov2jXDOAun07mM+8a7SRsJKfiMxtWWMJeiHQXTEnnHyoQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.1.0"
+      }
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -28844,6 +28954,11 @@
         "boolbase": "^1.0.0"
       }
     },
+    "numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -30750,6 +30865,11 @@
         "compute-scroll-into-view": "^2.0.4"
       }
     },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -31671,6 +31791,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -31800,6 +31925,11 @@
         "is-typed-array": "^1.1.9"
       }
     },
+    "typed-function": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/typed-function/-/typed-function-4.1.0.tgz",
+      "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg=="
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
diff --git a/package.json b/package.json
index eedb5b0..8dc9b47 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
     "browser-passworder": "^2.0.3",
     "dexie": "^3.2.3",
     "koa-compose": "^4.1.0",
+    "mathjs": "^11.5.1",
+    "numeral": "^2.0.6",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -37,6 +39,7 @@
     "@types/generate-json-webpack-plugin": "^0.3.4",
     "@types/koa-compose": "^3.2.5",
     "@types/lodash": "^4.14.191",
+    "@types/numeral": "^2.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/uuid": "^9.0.0",
diff --git a/src/components/AccountInfo/index.tsx b/src/components/AccountInfo/index.tsx
index 88bc77e..3e72b0d 100644
--- a/src/components/AccountInfo/index.tsx
+++ b/src/components/AccountInfo/index.tsx
@@ -1,37 +1,33 @@
 import Icon from '@polkadot/react-identicon'
-import { Avatar, Badge, Card, Typography } from 'antd'
+import { Avatar, Card, Typography } from 'antd'
 import { FC } from 'react'
 
 const { Paragraph } = Typography
 
-export const AccountInfo: FC<{ name?: string; address?: string }> = ({
-  name,
-  address,
-}) => {
+export const AccountInfo: FC<{
+  name?: string
+  address?: string
+  actions?: React.ReactNode[]
+  children?: React.ReactNode
+}> = ({ name, address, actions, children }) => {
   const cName = name ?? ''
   const cAddress = address ?? ''
+
   return (
-    <Badge.Ribbon
-      text="Calamari Parachain Staging"
-      color="#ff7d01"
-      style={{ fontSize: '12px', lineHeight: '18px', height: '18px' }}
-    >
-      <Card style={{ marginBottom: 16 }}>
-        <Card.Meta
-          avatar={
-            <Avatar
-              icon={<Icon size={32} value={cAddress || 'User'} />}
-            ></Avatar>
-          }
-          title={cName.length > 2 ? name : '<unknown>'}
-        />
-        <Paragraph
-          copyable={{ tooltips: ['Copy address', 'Copied!'] }}
-          style={{ marginTop: 16, marginBottom: 0 }}
-        >
-          {cAddress || '<unknown>'}
-        </Paragraph>
-      </Card>
-    </Badge.Ribbon>
+    <Card style={{ marginBottom: 16 }} actions={actions}>
+      <Card.Meta
+        avatar={
+          <Avatar icon={<Icon size={32} value={cAddress || 'User'} />}></Avatar>
+        }
+        title={cName.length > 2 ? name : '<unknown>'}
+      />
+      <Paragraph
+        copyable={{ tooltips: ['Copy address', 'Copied!'] }}
+        style={{ marginTop: 16, marginBottom: 0 }}
+      >
+        {cAddress || '<unknown>'}
+      </Paragraph>
+      {children}
+    </Card>
   )
 }
diff --git a/src/extension/background/bootstrap.ts b/src/extension/background/bootstrap.ts
index 5b79d42..ff22789 100644
--- a/src/extension/background/bootstrap.ts
+++ b/src/extension/background/bootstrap.ts
@@ -1,3 +1,4 @@
+import { WsProvider } from '@polkadot/api'
 import keyring from '@polkadot/ui-keyring'
 import { cryptoWaitReady } from '@polkadot/util-crypto'
 
@@ -10,6 +11,7 @@ import RouterMiddleware from './middleware/router.middleware'
 import RpcResponseMiddleware from './middleware/rpc.response.middleware'
 
 export const app = new Koa()
+export let wsProvider: WsProvider
 
 const middleware = [
   ErrorHandleMiddleware,
@@ -30,6 +32,8 @@ export const server = createServer({
   beforeStart: async () => {
     await Job.startAllJobs()
 
+    wsProvider = new WsProvider('wss://ws.calamari.seabird.systems')
+
     // initial setup
     cryptoWaitReady()
       .then((): void => {
diff --git a/src/extension/background/controller/balance.controller.ts b/src/extension/background/controller/balance.controller.ts
index 941456f..6d2f51c 100644
--- a/src/extension/background/controller/balance.controller.ts
+++ b/src/extension/background/controller/balance.controller.ts
@@ -1,14 +1,18 @@
 import assert from 'assert'
 
 import BalanceService from '../service/balance.service'
+import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
 const BalanceController = {
-  async balance_queryByAddress(ctx: KoaContext<[{ address: string }]>) {
+  async balance_refreshBalance(ctx: KoaContext<[{ address: string }]>) {
     const { address } = ctx.params[0]
     assert(address, 'Missing address')
 
-    const balance = await BalanceService.queryByAddress(address)
+    const wallet = await WalletService.getWalletByAddress(address)
+    assert(wallet, 'Wallet not found')
+
+    const balance = await BalanceService.refreshBalance(wallet)
     return ctx.pushResponse({ balance })
   },
 }
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index 4613fb7..150179a 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -1,13 +1,11 @@
 import { mnemonicValidate } from '@polkadot/util-crypto'
 import assert from 'assert'
 
-// import BalanceService from '../service/balance.service'
+import BalanceService from '../service/balance.service'
 import KeyringService from '../service/keyring.service'
 import WalletService from '../service/wallet.service'
 import { KoaContext } from './../koa-ts/lib/context'
 
-// import BalanceController from './balance.controller'
-
 const WalletController = {
   async wallet_createSeed(ctx: KoaContext<[{ seed?: string }]>) {
     const { seed } = ctx.params[0]
@@ -48,15 +46,27 @@ const WalletController = {
       address: account.address,
     })
 
+    const wallet = await WalletService.getWalletById(accountId)
+    if (wallet) {
+      await BalanceService.refreshBalance(wallet)
+    }
+
     return ctx.pushResponse({ accountId })
   },
 
   async wallet_queryAllAccount(ctx: KoaContext) {
     const accounts = await WalletService.queryAllAccount()
-    // const [account] = accounts
-    // const result = await BalanceService.queryByAddress(account.address)
-    // console.log('test', result)
-    return ctx.pushResponse(accounts)
+
+    const accountsWithBalance = await Promise.all(
+      accounts.map(async (account) => {
+        const balance = await BalanceService.queryByAddressFromCache(
+          account.address,
+        )
+        return { ...account, balance }
+      }),
+    )
+
+    return ctx.pushResponse(accountsWithBalance)
   },
 }
 
diff --git a/src/extension/background/job/balance.refresh.job.ts b/src/extension/background/job/balance.refresh.job.ts
new file mode 100644
index 0000000..7ced438
--- /dev/null
+++ b/src/extension/background/job/balance.refresh.job.ts
@@ -0,0 +1,21 @@
+import type { JobProps } from '.'
+import BalanceService from '../service/balance.service'
+import WalletService from '../service/wallet.service'
+
+const BalanceRefreshJob: JobProps = {
+  name: 'Balance-Refresh-Job',
+  alarmInfo: {
+    periodInMinutes: 1,
+  },
+  callback: async () => {
+    const wallets = await WalletService.queryAllAccount()
+    await Promise.all(
+      wallets?.map((wallet) => {
+        return BalanceService.refreshBalance(wallet)
+      }),
+    )
+    console.log('Balance refresh success')
+  },
+}
+
+export default BalanceRefreshJob
diff --git a/src/extension/background/job/index.ts b/src/extension/background/job/index.ts
index 80b0c5a..d7011c4 100644
--- a/src/extension/background/job/index.ts
+++ b/src/extension/background/job/index.ts
@@ -1,4 +1,5 @@
-import KeepAliveJob from './keep-alive-job'
+import BalanceRefreshJob from './balance.refresh.job'
+import KeepAliveJob from './keep.alive.job'
 
 export interface JobProps {
   name: string
@@ -6,7 +7,7 @@ export interface JobProps {
   callback: (alarmInfo: chrome.alarms.AlarmCreateInfo) => Promise<void>
 }
 
-const jobs = [KeepAliveJob]
+const jobs = [KeepAliveJob, BalanceRefreshJob]
 
 const Job = {
   async startAllJobs() {
diff --git a/src/extension/background/job/keep-alive-job.ts b/src/extension/background/job/keep.alive.job.ts
similarity index 89%
rename from src/extension/background/job/keep-alive-job.ts
rename to src/extension/background/job/keep.alive.job.ts
index cef5612..504df6b 100644
--- a/src/extension/background/job/keep-alive-job.ts
+++ b/src/extension/background/job/keep.alive.job.ts
@@ -12,7 +12,7 @@ const KeepAliveJob: JobProps = {
     const session = SessionManager.getSessionsByRole('dapp').find((s) =>
       s.origin.startsWith('https'),
     )
-    session?.sendMsg({
+    await session?.sendMsg({
       from: 'extension',
       to: session.origin,
       payload: {
@@ -22,6 +22,7 @@ const KeepAliveJob: JobProps = {
         params: [],
       },
     })
+    console.log('Keep alive job done')
   },
 }
 
diff --git a/src/extension/background/model/balance.model.ts b/src/extension/background/model/balance.model.ts
new file mode 100644
index 0000000..ebff396
--- /dev/null
+++ b/src/extension/background/model/balance.model.ts
@@ -0,0 +1,32 @@
+import type { Table } from 'dexie'
+import Dexie from 'dexie'
+
+export interface Balance {
+  id?: number
+  walletId: string
+  address: string
+  symbol: string
+  decimals: number
+  balance: string
+}
+
+export const TokenMap = {
+  KMA: {
+    decimals: 12,
+    symbol: 'KMA',
+  },
+}
+
+class BalanceModelDB extends Dexie {
+  public balances!: Table<Balance, number>
+  public constructor() {
+    super('balance-model')
+    this.version(1).stores({
+      balances: '++id, &[address+symbol], walletId, address, balance',
+    })
+  }
+}
+
+const BalanceModel = new BalanceModelDB()
+
+export default BalanceModel
diff --git a/src/extension/background/service/balance.service.ts b/src/extension/background/service/balance.service.ts
index 48edc09..ef0ad5f 100644
--- a/src/extension/background/service/balance.service.ts
+++ b/src/extension/background/service/balance.service.ts
@@ -1,16 +1,40 @@
-import { ApiPromise, WsProvider } from '@polkadot/api'
+import { ApiPromise } from '@polkadot/api'
+
+import { wsProvider } from '../bootstrap'
+import BalanceModel, { Balance } from '../model/balance.model'
+import { Wallet } from '../model/wallet.model'
+import { TokenMap } from './../model/balance.model'
 
 const BalanceService = {
+  async queryByAddressFromCache(address: string) {
+    return BalanceModel.balances.where('address').equals(address).first()
+  },
   async queryByAddress(address: string) {
-    const wsProvider = new WsProvider('wss://ws.calamari.seabird.systems')
     const api = await ApiPromise.create({ provider: wsProvider })
+    const { data: balance } = await api.query.system.account(address)
 
-    const now = await api.query.timestamp.now()
+    return balance
+  },
 
-    const { nonce, data: balance } = await api.query.system.account(address)
-    console.log(`${now}: balance of ${balance.free} and a nonce of ${nonce}`)
+  async refreshBalance(wallet: Wallet) {
+    const balance = await this.queryByAddress(wallet.address)
 
-    return address
+    const existed = await BalanceModel.balances
+      .where('address')
+      .equals(wallet.address)
+      .first()
+    const params: Balance = {
+      walletId: wallet.walletId,
+      address: wallet.address,
+      balance: `${balance.free}`,
+      decimals: TokenMap.KMA.decimals,
+      symbol: TokenMap.KMA.symbol,
+    }
+    if (existed) {
+      params.id = existed.id
+    }
+    const updated = await BalanceModel.balances.put(params)
+    return updated
   },
 }
 
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index fc0c799..5f832be 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -41,6 +41,13 @@ const WalletService = {
     return accountId
   },
 
+  async getWalletById(id: number) {
+    return WalletModel.wallets.where('id').equals(id).first()
+  },
+  async getWalletByAddress(address: string) {
+    return WalletModel.wallets.where('address').equals(address).first()
+  },
+
   async queryAllAccount() {
     const accounts = await (await WalletModel.wallets.toArray()).reverse()
     return accounts
diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
index 36b0256..ad1b291 100644
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -41,6 +41,7 @@ const { Title, Paragraph, Text } = Typography
 const CreatePage: FC = () => {
   const [isEnable, setIsEnable] = useState(false)
   const [current, setCurrent] = useState(1)
+  const [submitLoading, setSubmitLoading] = useState(false)
 
   const location = useLocation()
 
@@ -89,6 +90,7 @@ const CreatePage: FC = () => {
 
   const onFinish = async (values: FormFields) => {
     try {
+      setSubmitLoading(true)
       const result = await rpcClient.sendRequest({
         method: 'wallet_createAccount',
         params: [
@@ -100,12 +102,14 @@ const CreatePage: FC = () => {
           },
         ],
       })
+      setSubmitLoading(false)
       if (result) {
         message.success('Create Account Success')
         history.replace('/home')
         return
       }
     } catch (error: any) {
+      setSubmitLoading(false)
       message.error(error?.message)
     }
   }
@@ -313,6 +317,7 @@ const CreatePage: FC = () => {
                       htmlType="submit"
                       type="primary"
                       style={{ width: '100%' }}
+                      loading={submitLoading}
                     >
                       Add the account
                     </Button>
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 0f07aa6..b5dbe0c 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,7 +1,23 @@
-import { PlusOutlined } from '@ant-design/icons'
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons'
 import { history } from '@umijs/max'
 import { useRequest } from 'ahooks'
-import { Button, Typography, Row, Col, Spin, Dropdown, MenuProps } from 'antd'
+import {
+  Button,
+  Typography,
+  Row,
+  Col,
+  Spin,
+  Dropdown,
+  MenuProps,
+  Badge,
+} from 'antd'
+import * as Mathjs from 'mathjs'
+import Numeral from 'numeral'
 
 import { rpcClient } from '@/services/rpc-client'
 
@@ -28,6 +44,19 @@ const items: MenuProps['items'] = [
   },
 ]
 
+const formatBalance = ({
+  balance,
+  decimals,
+}: {
+  balance: string
+  decimals: number
+}) => {
+  const formatted = Mathjs.bignumber(balance).div(
+    Mathjs.bignumber(10).pow(decimals),
+  )
+  return Numeral(formatted.toString()).format('0,0.0000')
+}
+
 const HomePage: React.FC = () => {
   const { data: accounts, loading } = useRequest(async () => {
     return rpcClient.sendRequest({
@@ -62,11 +91,33 @@ const HomePage: React.FC = () => {
 
         {accounts?.length !== 0 &&
           accounts?.map((account) => (
-            <AccountInfo
+            <Badge.Ribbon
               key={account.walletId}
-              name={account.name}
-              address={account.address}
-            />
+              text="Calamari Parachain Staging"
+              color="#ff7d01"
+              style={{ fontSize: '12px', lineHeight: '18px', height: '18px' }}
+            >
+              <AccountInfo
+                name={account.name}
+                address={account.address}
+                actions={[
+                  <ReloadOutlined key="refresh" />,
+                  <EditOutlined key="edit" />,
+                  <EllipsisOutlined key="ellipsis" />,
+                ]}
+              >
+                <Row style={{ marginTop: 8 }}>
+                  <Col>Balance:</Col>
+                  <Col flex="auto" style={{ textAlign: 'right' }}>
+                    {formatBalance({
+                      balance: account.balance?.balance ?? '',
+                      decimals: account.balance?.decimals ?? 0,
+                    })}{' '}
+                    {account.balance?.symbol}
+                  </Col>
+                </Row>
+              </AccountInfo>
+            </Badge.Ribbon>
           ))}
       </Spin>
     </div>

From c962c3b751aa1c4c5de7c026bce2e0853acbbe86 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Wed, 8 Feb 2023 23:10:39 +0800
Subject: [PATCH 12/24] feat: finished remove account and auto refresh balance

---
 .../controller/wallet.controller.ts           | 15 +++-
 .../background/service/balance.service.ts     |  4 +
 .../background/service/wallet.service.ts      |  8 ++
 src/pages/Home/index.tsx                      | 81 ++++++++++++++++---
 4 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index 150179a..5fb9328 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -48,7 +48,7 @@ const WalletController = {
 
     const wallet = await WalletService.getWalletById(accountId)
     if (wallet) {
-      await BalanceService.refreshBalance(wallet)
+      BalanceService.refreshBalance(wallet)
     }
 
     return ctx.pushResponse({ accountId })
@@ -68,6 +68,19 @@ const WalletController = {
 
     return ctx.pushResponse(accountsWithBalance)
   },
+
+  async wallet_deleteAccount(ctx: KoaContext<[{ address: string }]>) {
+    const { address } = ctx.params[0]
+    assert(address, 'Invalid address')
+
+    const deleted = await WalletService.deleteAccount(address)
+
+    await BalanceService.deleteBalance(address)
+
+    assert(deleted, 'Delete Account Failed')
+
+    return ctx.pushResponse(deleted)
+  },
 }
 
 export default WalletController
diff --git a/src/extension/background/service/balance.service.ts b/src/extension/background/service/balance.service.ts
index ef0ad5f..abd5e2b 100644
--- a/src/extension/background/service/balance.service.ts
+++ b/src/extension/background/service/balance.service.ts
@@ -36,6 +36,10 @@ const BalanceService = {
     const updated = await BalanceModel.balances.put(params)
     return updated
   },
+
+  async deleteBalance(address: string) {
+    return BalanceModel.balances.where('address').equals(address).delete()
+  },
 }
 
 export default BalanceService
diff --git a/src/extension/background/service/wallet.service.ts b/src/extension/background/service/wallet.service.ts
index 5f832be..21b3317 100644
--- a/src/extension/background/service/wallet.service.ts
+++ b/src/extension/background/service/wallet.service.ts
@@ -52,6 +52,14 @@ const WalletService = {
     const accounts = await (await WalletModel.wallets.toArray()).reverse()
     return accounts
   },
+
+  async deleteAccount(address: string) {
+    const deleted = WalletModel.wallets
+      .where('address')
+      .equals(address)
+      .delete()
+    return deleted
+  },
 }
 
 export default WalletService
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b5dbe0c..b806f9e 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -2,7 +2,7 @@ import {
   PlusOutlined,
   ReloadOutlined,
   EditOutlined,
-  EllipsisOutlined,
+  DeleteTwoTone,
 } from '@ant-design/icons'
 import { history } from '@umijs/max'
 import { useRequest } from 'ahooks'
@@ -15,6 +15,8 @@ import {
   Dropdown,
   MenuProps,
   Badge,
+  Popconfirm,
+  message,
 } from 'antd'
 import * as Mathjs from 'mathjs'
 import Numeral from 'numeral'
@@ -27,7 +29,7 @@ import styles from './index.less'
 
 const { Title } = Typography
 
-const items: MenuProps['items'] = [
+const headerMenuItems: MenuProps['items'] = [
   {
     key: '1',
     label: 'Create new account',
@@ -58,12 +60,22 @@ const formatBalance = ({
 }
 
 const HomePage: React.FC = () => {
-  const { data: accounts, loading } = useRequest(async () => {
-    return rpcClient.sendRequest({
-      method: 'wallet_queryAllAccount',
-      params: [],
-    })
-  })
+  const {
+    data: accounts,
+    loading,
+    run,
+  } = useRequest(
+    async () => {
+      return rpcClient.sendRequest({
+        method: 'wallet_queryAllAccount',
+        params: [],
+      })
+    },
+    {
+      pollingInterval: 30000,
+      pollingErrorRetryCount: 3,
+    },
+  )
 
   return (
     <div className={styles.container}>
@@ -74,7 +86,11 @@ const HomePage: React.FC = () => {
           </Title>
         </Col>
         <Col span={8} style={{ textAlign: 'right' }}>
-          <Dropdown menu={{ items }} placement="bottomRight" arrow>
+          <Dropdown
+            menu={{ items: headerMenuItems }}
+            placement="bottomRight"
+            arrow
+          >
             <Button icon={<PlusOutlined />} title="Create new account"></Button>
           </Dropdown>
         </Col>
@@ -101,17 +117,56 @@ const HomePage: React.FC = () => {
                 name={account.name}
                 address={account.address}
                 actions={[
-                  <ReloadOutlined key="refresh" />,
+                  <ReloadOutlined
+                    key="refresh"
+                    onClick={async () => {
+                      try {
+                        const result = await rpcClient.sendRequest({
+                          method: 'balance_refreshBalance',
+                          params: [{ address: account.address }],
+                        })
+                        if (result) {
+                          run()
+                          message.success('Balance refreshed')
+                        }
+                      } catch (error: any) {
+                        message.error(error.message)
+                      }
+                    }}
+                  />,
                   <EditOutlined key="edit" />,
-                  <EllipsisOutlined key="ellipsis" />,
+                  <Popconfirm
+                    key="delete"
+                    title="Forget account"
+                    description="You are about to remove the account?"
+                    okText="Yes"
+                    cancelText="Cancel"
+                    placement="topRight"
+                    onConfirm={async () => {
+                      try {
+                        const result = await rpcClient.sendRequest({
+                          method: 'wallet_deleteAccount',
+                          params: [{ address: account.address }],
+                        })
+                        if (result) {
+                          run()
+                          message.success('Forget Account Success')
+                        }
+                      } catch (error: any) {
+                        message.error(error.message)
+                      }
+                    }}
+                  >
+                    <DeleteTwoTone twoToneColor="red" />
+                  </Popconfirm>,
                 ]}
               >
                 <Row style={{ marginTop: 8 }}>
                   <Col>Balance:</Col>
                   <Col flex="auto" style={{ textAlign: 'right' }}>
                     {formatBalance({
-                      balance: account.balance?.balance ?? '',
-                      decimals: account.balance?.decimals ?? 0,
+                      balance: account.balance?.balance ?? '0',
+                      decimals: account.balance?.decimals ?? 1,
                     })}{' '}
                     {account.balance?.symbol}
                   </Col>

From 4633054429202584cf9d80786a094c52eeda4af3 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Thu, 9 Feb 2023 11:24:49 +0800
Subject: [PATCH 13/24] chore: add send icon

---
 .gitignore               |  1 +
 src/assets/send.svg      |  9 +++++++++
 src/pages/Home/index.tsx | 11 ++++-------
 3 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/send.svg

diff --git a/.gitignore b/.gitignore
index ec0cabb..ebe089d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@
 /dist
 /.mfsu
 .swc
+.DS_Store
\ No newline at end of file
diff --git a/src/assets/send.svg b/src/assets/send.svg
new file mode 100644
index 0000000..77edccc
--- /dev/null
+++ b/src/assets/send.svg
@@ -0,0 +1,9 @@
+<svg aria-hidden="true" focusable="false" data-prefix="reload"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-testid="paper-plane"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    tabindex="-1">
+    <path fill="currentColor"
+        d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b806f9e..bc505c6 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,9 +1,4 @@
-import {
-  PlusOutlined,
-  ReloadOutlined,
-  EditOutlined,
-  DeleteTwoTone,
-} from '@ant-design/icons'
+import { PlusOutlined, ReloadOutlined, DeleteTwoTone } from '@ant-design/icons'
 import { history } from '@umijs/max'
 import { useRequest } from 'ahooks'
 import {
@@ -23,6 +18,8 @@ import Numeral from 'numeral'
 
 import { rpcClient } from '@/services/rpc-client'
 
+import { ReactComponent as SendIcon } from '@/assets/send.svg'
+
 import { AccountInfo } from '@/components/AccountInfo'
 
 import styles from './index.less'
@@ -134,7 +131,7 @@ const HomePage: React.FC = () => {
                       }
                     }}
                   />,
-                  <EditOutlined key="edit" />,
+                  <SendIcon key="send" fontSize={12} />,
                   <Popconfirm
                     key="delete"
                     title="Forget account"

From ba1a70e9cfee64f3994e3b8303f6af09bd628336 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Thu, 9 Feb 2023 15:33:35 +0800
Subject: [PATCH 14/24] feat: finished send transaction

---
 config/routes.ts                              |   5 +
 .../controller/transaction.controller.ts      |  54 ++++
 .../controller/wallet.controller.ts           |   2 +-
 src/extension/background/router.ts            |   2 +
 .../background/service/balance.service.ts     |  12 +
 .../background/service/transaction.service.ts |  38 +++
 .../background/utils/validate.address.ts      |  12 +
 src/pages/Home/index.tsx                      |  35 +--
 src/pages/Send/index.less                     |   3 +
 src/pages/Send/index.tsx                      | 252 ++++++++++++++++++
 src/utils/format.ts                           |  19 +-
 11 files changed, 415 insertions(+), 19 deletions(-)
 create mode 100644 src/extension/background/controller/transaction.controller.ts
 create mode 100644 src/extension/background/service/transaction.service.ts
 create mode 100644 src/extension/background/utils/validate.address.ts
 create mode 100644 src/pages/Send/index.less
 create mode 100644 src/pages/Send/index.tsx

diff --git a/config/routes.ts b/config/routes.ts
index 0416d41..16eda0e 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -16,6 +16,11 @@ export default defineConfig({
       path: '/create',
       component: './Create',
     },
+    {
+      name: 'Send',
+      path: '/send',
+      component: './Send',
+    },
     {
       name: 'Access',
       path: '/access',
diff --git a/src/extension/background/controller/transaction.controller.ts b/src/extension/background/controller/transaction.controller.ts
new file mode 100644
index 0000000..0bf1142
--- /dev/null
+++ b/src/extension/background/controller/transaction.controller.ts
@@ -0,0 +1,54 @@
+import assert from 'assert'
+
+import { KoaContext } from '../koa-ts'
+import BalanceService from '../service/balance.service'
+import KeyringService from '../service/keyring.service'
+import TransactionService from '../service/transaction.service'
+import WalletService from '../service/wallet.service'
+import { isValidAddressPolkadotAddress } from '../utils/validate.address'
+
+const TransactionController = {
+  async transaction_sendTransaction(
+    ctx: KoaContext<
+      [
+        {
+          password: string
+          sender: string
+          amount: number
+          recipient: string
+        },
+      ]
+    >,
+  ) {
+    const { sender, recipient, amount, password } = ctx.params[0]
+
+    console.log('test', ctx.params[0])
+
+    assert(sender, 'Sender must be specified')
+    assert(recipient, 'Recipient must be specified')
+    assert(amount > 0, 'Amount must be greater than zero')
+    assert(password, 'Password must be specified')
+
+    const isValid = isValidAddressPolkadotAddress(recipient)
+    assert(isValid, 'Invalid address')
+
+    const account = await WalletService.getWalletByAddress(sender)
+    assert(account, 'Account not found')
+
+    const seed = await KeyringService.getMnemonic(password, account.keyringId)
+    assert(seed, 'Password not correct!')
+
+    const tx = await TransactionService.sendTransaction({
+      sender,
+      amount,
+      recipient,
+      seed,
+    })
+
+    await BalanceService.refreshTransactionBalance(sender, recipient)
+
+    return ctx.pushResponse({ tx: tx.toHex() })
+  },
+}
+
+export default TransactionController
diff --git a/src/extension/background/controller/wallet.controller.ts b/src/extension/background/controller/wallet.controller.ts
index 5fb9328..8fe7fc8 100644
--- a/src/extension/background/controller/wallet.controller.ts
+++ b/src/extension/background/controller/wallet.controller.ts
@@ -48,7 +48,7 @@ const WalletController = {
 
     const wallet = await WalletService.getWalletById(accountId)
     if (wallet) {
-      BalanceService.refreshBalance(wallet)
+      await BalanceService.refreshBalance(wallet)
     }
 
     return ctx.pushResponse({ accountId })
diff --git a/src/extension/background/router.ts b/src/extension/background/router.ts
index 5a1e406..2c37d97 100644
--- a/src/extension/background/router.ts
+++ b/src/extension/background/router.ts
@@ -1,6 +1,7 @@
 import BalanceController from './controller/balance.controller'
 import DappController from './controller/dapp.controller'
 import ExampleController from './controller/example.controller'
+import TransactionController from './controller/transaction.controller'
 import WalletController from './controller/wallet.controller'
 import { KoaContext } from './koa-ts'
 
@@ -9,6 +10,7 @@ const routers = {
   ...DappController,
   ...WalletController,
   ...BalanceController,
+  ...TransactionController,
 }
 
 export type IRouters = keyof typeof routers
diff --git a/src/extension/background/service/balance.service.ts b/src/extension/background/service/balance.service.ts
index abd5e2b..15fdea7 100644
--- a/src/extension/background/service/balance.service.ts
+++ b/src/extension/background/service/balance.service.ts
@@ -4,6 +4,7 @@ import { wsProvider } from '../bootstrap'
 import BalanceModel, { Balance } from '../model/balance.model'
 import { Wallet } from '../model/wallet.model'
 import { TokenMap } from './../model/balance.model'
+import WalletService from './wallet.service'
 
 const BalanceService = {
   async queryByAddressFromCache(address: string) {
@@ -40,6 +41,17 @@ const BalanceService = {
   async deleteBalance(address: string) {
     return BalanceModel.balances.where('address').equals(address).delete()
   },
+
+  async refreshTransactionBalance(sender: string, recipient: string) {
+    const senderAccount = await WalletService.getWalletByAddress(sender)
+    const recipientAccount = await WalletService.getWalletByAddress(recipient)
+    if (senderAccount) {
+      await this.refreshBalance(senderAccount)
+    }
+    if (recipientAccount) {
+      await this.refreshBalance(recipientAccount)
+    }
+  },
 }
 
 export default BalanceService
diff --git a/src/extension/background/service/transaction.service.ts b/src/extension/background/service/transaction.service.ts
new file mode 100644
index 0000000..2baefaf
--- /dev/null
+++ b/src/extension/background/service/transaction.service.ts
@@ -0,0 +1,38 @@
+import { ApiPromise } from '@polkadot/api'
+import { Keyring } from '@polkadot/api'
+import * as Mathjs from 'mathjs'
+
+import { wsProvider } from '../bootstrap'
+import { TokenMap } from './../model/balance.model'
+
+const TransactionService = {
+  async sendTransaction(params: {
+    sender: string
+    /** Do not format amount, will auto handle decimals on this function */
+    amount: number
+    recipient: string
+    seed: string
+  }) {
+    const { amount, recipient, sender, seed } = params
+    const api = await ApiPromise.create({ provider: wsProvider })
+    const keyring = new Keyring({ type: 'sr25519' })
+    const newPair = keyring.addFromUri(seed)
+
+    const formattedAmount = await this.formatAmountWithKMA(amount)
+
+    const { nonce } = await api.query.system.account(sender)
+
+    const tx = await api.tx.balances
+      .transfer(recipient, formattedAmount)
+      .signAndSend(newPair, { nonce })
+    return tx
+  },
+
+  async formatAmountWithKMA(amount: number) {
+    return Mathjs.bignumber(amount)
+      .mul(Mathjs.bignumber(10).pow(TokenMap['KMA'].decimals))
+      .toNumber()
+  },
+}
+
+export default TransactionService
diff --git a/src/extension/background/utils/validate.address.ts b/src/extension/background/utils/validate.address.ts
new file mode 100644
index 0000000..11283e8
--- /dev/null
+++ b/src/extension/background/utils/validate.address.ts
@@ -0,0 +1,12 @@
+const { decodeAddress, encodeAddress } = require('@polkadot/keyring')
+const { hexToU8a, isHex } = require('@polkadot/util')
+
+export const isValidAddressPolkadotAddress = (address: string) => {
+  try {
+    encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address))
+
+    return true
+  } catch (error) {
+    return false
+  }
+}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index bc505c6..c9a3b45 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,4 +1,8 @@
-import { PlusOutlined, ReloadOutlined, DeleteTwoTone } from '@ant-design/icons'
+import Icon, {
+  PlusOutlined,
+  ReloadOutlined,
+  DeleteTwoTone,
+} from '@ant-design/icons'
 import { history } from '@umijs/max'
 import { useRequest } from 'ahooks'
 import {
@@ -13,8 +17,8 @@ import {
   Popconfirm,
   message,
 } from 'antd'
-import * as Mathjs from 'mathjs'
-import Numeral from 'numeral'
+
+import { formatBalance } from '@/utils/format'
 
 import { rpcClient } from '@/services/rpc-client'
 
@@ -43,19 +47,6 @@ const headerMenuItems: MenuProps['items'] = [
   },
 ]
 
-const formatBalance = ({
-  balance,
-  decimals,
-}: {
-  balance: string
-  decimals: number
-}) => {
-  const formatted = Mathjs.bignumber(balance).div(
-    Mathjs.bignumber(10).pow(decimals),
-  )
-  return Numeral(formatted.toString()).format('0,0.0000')
-}
-
 const HomePage: React.FC = () => {
   const {
     data: accounts,
@@ -131,7 +122,17 @@ const HomePage: React.FC = () => {
                       }
                     }}
                   />,
-                  <SendIcon key="send" fontSize={12} />,
+                  <Icon
+                    key="send"
+                    component={SendIcon}
+                    onClick={() => {
+                      console.log('test click')
+                      history.push(`/send`, {
+                        sender: account.address,
+                      })
+                    }}
+                  />,
+
                   <Popconfirm
                     key="delete"
                     title="Forget account"
diff --git a/src/pages/Send/index.less b/src/pages/Send/index.less
new file mode 100644
index 0000000..e624b13
--- /dev/null
+++ b/src/pages/Send/index.less
@@ -0,0 +1,3 @@
+.container {
+  padding: 24px;
+}
diff --git a/src/pages/Send/index.tsx b/src/pages/Send/index.tsx
new file mode 100644
index 0000000..4d5244e
--- /dev/null
+++ b/src/pages/Send/index.tsx
@@ -0,0 +1,252 @@
+import { CloseOutlined } from '@ant-design/icons'
+import { history, useLocation } from '@umijs/max'
+import { useRequest } from 'ahooks'
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Row,
+  Select,
+  Spin,
+  Typography,
+} from 'antd'
+import { useMemo, useState } from 'react'
+
+import { formatBalance } from '@/utils/format'
+
+import { rpcClient } from '@/services/rpc-client'
+
+import styles from './index.less'
+
+const { Title } = Typography
+
+interface StateFields {
+  sender?: string
+}
+
+interface FormFields {
+  sender: string
+  password: string
+  amount: number
+  recipient: string[]
+}
+
+const formatLabel = ({ name, address }: { name: string; address: string }) => {
+  return `${name.toUpperCase()}(${address.substring(0, 10)}...)`
+}
+
+const SendPage: React.FC = () => {
+  const location = useLocation()
+
+  const sender = useMemo(() => {
+    const state = location.state as StateFields
+    return state?.sender
+  }, [location.state])
+
+  const [submitLoading, setSubmitLoading] = useState(false)
+
+  const { data: accounts, loading } = useRequest(async () => {
+    return rpcClient.sendRequest({
+      method: 'wallet_queryAllAccount',
+      params: [],
+    })
+  })
+
+  const senderAccount = useMemo(() => {
+    return accounts?.find((account) => account.address === sender)
+  }, [accounts, sender])
+
+  const [form] = Form.useForm<FormFields>()
+
+  const onFinish = async (values: FormFields) => {
+    console.log('Success finished', values)
+    try {
+      setSubmitLoading(true)
+      const result = await rpcClient.sendRequest({
+        method: 'transaction_sendTransaction',
+        params: [
+          {
+            sender: values.sender,
+            password: values.password,
+            recipient: values.recipient[0],
+            amount: values.amount,
+          },
+        ],
+      })
+      if (result) {
+        message.success(`Send successful!`)
+        history.replace('/home')
+        return
+      }
+    } catch (error: any) {
+      setSubmitLoading(false)
+      message.error(error?.message)
+    }
+  }
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo)
+  }
+
+  return (
+    <div className={styles.container}>
+      <Row style={{ marginBottom: 16 }}>
+        <Col span={16}>
+          <Title level={4} style={{ marginTop: 0 }}>
+            Send funds
+          </Title>
+        </Col>
+        <Col span={8} style={{ textAlign: 'right' }}>
+          <Button
+            title="Cancel"
+            icon={<CloseOutlined />}
+            onClick={() => {
+              history.replace('/home')
+            }}
+          ></Button>
+        </Col>
+      </Row>
+      <Spin spinning={loading}>
+        <Row style={{ marginBottom: 16 }}>
+          <Form
+            name="basic"
+            form={form}
+            labelCol={{ span: 24 }}
+            wrapperCol={{ span: 24 }}
+            style={{ width: '100%' }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoCorrect="off"
+            autoComplete="off"
+            layout="vertical"
+            initialValues={{
+              sender: sender,
+            }}
+          >
+            <Form.Item
+              name="sender"
+              label="Sender from account"
+              rules={[{ required: true }]}
+            >
+              <>
+                <Input
+                  disabled
+                  placeholder={formatLabel({
+                    name: senderAccount?.name ?? '',
+                    address: senderAccount?.address ?? '',
+                  })}
+                />
+                <Row style={{ marginTop: 8 }}>
+                  <Col>Balance:</Col>
+                  <Col flex="auto" style={{ textAlign: 'right' }}>
+                    {formatBalance({
+                      balance: senderAccount?.balance?.balance ?? '0',
+                      decimals: senderAccount?.balance?.decimals ?? 1,
+                    })}{' '}
+                    {senderAccount?.balance?.symbol}
+                  </Col>
+                </Row>
+              </>
+            </Form.Item>
+
+            <Form.Item
+              name="recipient"
+              label="Send to address"
+              rules={[
+                { required: true, message: 'Please input recipient address!' },
+                () => ({
+                  validator(_, value) {
+                    if (value?.length === 1) {
+                      return Promise.resolve()
+                    }
+                    return Promise.reject(
+                      new Error('Only input one recipient address at a time'),
+                    )
+                  },
+                }),
+              ]}
+            >
+              <Select
+                mode="tags"
+                style={{ width: '100%' }}
+                placeholder=""
+                options={accounts?.map((account) => {
+                  return {
+                    value: account.address,
+                    label: formatLabel({
+                      name: account.name,
+                      address: account.address,
+                    }),
+                  }
+                })}
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="amount"
+              label="Amount"
+              rules={[
+                { required: true, message: 'Amount is required' },
+                () => ({
+                  validator(_, value) {
+                    const balance = formatBalance({
+                      balance: senderAccount?.balance?.balance ?? '0',
+                      decimals: senderAccount?.balance?.decimals ?? 1,
+                      format: '0.0000',
+                    })
+                    if (
+                      value &&
+                      !isNaN(value) &&
+                      Number(value) + 0.4811 <= Number(balance)
+                    ) {
+                      return Promise.resolve()
+                    }
+                    return Promise.reject(
+                      new Error(
+                        'The amount must be less than or equal to the balance',
+                      ),
+                    )
+                  },
+                }),
+              ]}
+            >
+              <InputNumber
+                style={{ width: '100%' }}
+                addonAfter="KMA"
+                min="0"
+                step="1"
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="Password"
+              name="password"
+              rules={[
+                { required: true, message: 'Please input your password!' },
+                { min: 6, message: 'At least 6 characters' },
+              ]}
+            >
+              <Input.Password placeholder="A new password for this account" />
+            </Form.Item>
+
+            <Form.Item wrapperCol={{ span: 24 }}>
+              <Button
+                htmlType="submit"
+                type="primary"
+                style={{ width: '100%' }}
+                loading={submitLoading}
+              >
+                Sign the transaction
+              </Button>
+            </Form.Item>
+          </Form>
+        </Row>
+      </Spin>
+    </div>
+  )
+}
+
+export default SendPage
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 3279563..757824a 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -1,4 +1,21 @@
-// 示例方法，没有实际意义
+import * as Mathjs from 'mathjs'
+import Numeral from 'numeral'
+
 export function trim(str: string) {
   return str.trim()
 }
+
+export const formatBalance = ({
+  balance,
+  decimals,
+  format,
+}: {
+  balance: string
+  decimals: number
+  format?: string
+}) => {
+  const formatted = Mathjs.bignumber(balance).div(
+    Mathjs.bignumber(10).pow(decimals),
+  )
+  return Numeral(formatted.toString()).format(format ?? '0,0.0000')
+}

From cd99a8414d66311c19b38dd0bb1319a78f36d9d8 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Thu, 9 Feb 2023 15:41:33 +0800
Subject: [PATCH 15/24] chore: update build config

---
 config/config.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index d0f29b7..6fe3a7f 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -35,10 +35,6 @@ export default defineConfig({
   jsMinifierOptions: {
     keepNames: true,
   },
-  codeSplitting: {
-    jsStrategy: 'depPerChunk',
-    jsStrategyOptions: {},
-  },
   polyfill: {
     imports: ['core-js/stable'],
   },

From df57960eddacd851bf63c8a0157182f20be2cd57 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Fri, 10 Feb 2023 17:41:03 +0800
Subject: [PATCH 16/24] docs: update readme info

---
 README.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/README.md b/README.md
index b55ba2b..dbb6d93 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,32 @@
 # Kumi
 
 Koa + Umi = Kumi, an framework for Chrome extension
+
+## Directory structure
+
+```bash
+├── config # Build and Environment Configuration
+├── mock
+├── public # Static resources
+└── src
+    ├── assets # Media resources, including img, svg
+    ├── components # Frontend Public components
+    │   ├── AccountInfo
+    │   └── Guide
+    ├── constants # Static data structures
+    ├── extension # Chrome extension files
+    │   ├── background # Service worker
+    │   ├── common # some common tools or structures for Service Worker and content script
+    │   └── content # Content scripts, inject to WebSite
+    ├── models # Front-end status containers
+    ├── pages # Front-end pages (Popup UIs)
+    │   ├── Access
+    │   ├── Create
+    │   ├── Home
+    │   ├── Send
+    │   └── Table
+    ├── services # Front-end services (API definition)
+    │   └── demo
+    └── utils # Front-end utilities
+        └── tools
+```

From 2dc90a32d430d0d997f8b5610a0f9d5affe3d825 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Mon, 13 Feb 2023 15:53:58 +0800
Subject: [PATCH 17/24] feat: finished connect with dapp

---
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 src/extension/background/bootstrap.ts         |   2 +
 .../background/controller/pub.controller.ts   |  65 ++++++
 .../middleware/dapp.request.middleware.ts     |  48 ++++
 .../background/model/balance.model.ts         |   4 +
 .../background/model/connect.session.model.ts |  30 +++
 .../background/model/general.config.model.ts  |  21 ++
 .../background/model/wallet.model.ts          |   1 +
 src/extension/background/router.ts            |   2 +
 .../utils/extension-tools/chrome-extension.ts | 170 ++++++++++++++
 .../utils/extension-tools/popup-tool.ts       | 101 +++++++++
 src/extension/common/constants.ts             |  14 ++
 .../content/connector/dapp-connect-client.ts  |   3 +-
 .../content/connector/dapp-rpc-client.ts      |  11 +-
 src/extension/content/inpage-content.ts       |  45 +++-
 .../content/polkadot-provider/accounts.ts     |  37 +++
 .../content/polkadot-provider/index.ts        |  35 +++
 .../content/polkadot-provider/metadata.ts     |  30 +++
 .../post-message-provider.ts                  | 213 ++++++++++++++++++
 .../content/polkadot-provider/signer.ts       |  54 +++++
 .../content/polkadot-provider/types.ts        |  25 ++
 src/services/rpc-client.ts                    |   4 +-
 23 files changed, 902 insertions(+), 15 deletions(-)
 create mode 100644 src/extension/background/controller/pub.controller.ts
 create mode 100644 src/extension/background/middleware/dapp.request.middleware.ts
 create mode 100644 src/extension/background/model/connect.session.model.ts
 create mode 100644 src/extension/background/model/general.config.model.ts
 create mode 100644 src/extension/background/utils/extension-tools/chrome-extension.ts
 create mode 100644 src/extension/background/utils/extension-tools/popup-tool.ts
 create mode 100644 src/extension/content/polkadot-provider/accounts.ts
 create mode 100644 src/extension/content/polkadot-provider/index.ts
 create mode 100644 src/extension/content/polkadot-provider/metadata.ts
 create mode 100644 src/extension/content/polkadot-provider/post-message-provider.ts
 create mode 100644 src/extension/content/polkadot-provider/signer.ts
 create mode 100644 src/extension/content/polkadot-provider/types.ts

diff --git a/package-lock.json b/package-lock.json
index f95de22..656ef02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@deficonnect/utils": "^2.0.3",
         "@polkadot/api": "^9.13.6",
         "@polkadot/extension-base": "^0.44.8",
+        "@polkadot/extension-inject": "^0.44.8",
         "@polkadot/react-identicon": "^2.11.1",
         "@polkadot/ui-keyring": "^2.11.1",
         "@polkadot/util-crypto": "^10.3.1",
diff --git a/package.json b/package.json
index 8dc9b47..5ed06ba 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@deficonnect/utils": "^2.0.3",
     "@polkadot/api": "^9.13.6",
     "@polkadot/extension-base": "^0.44.8",
+    "@polkadot/extension-inject": "^0.44.8",
     "@polkadot/react-identicon": "^2.11.1",
     "@polkadot/ui-keyring": "^2.11.1",
     "@polkadot/util-crypto": "^10.3.1",
diff --git a/src/extension/background/bootstrap.ts b/src/extension/background/bootstrap.ts
index ff22789..877719d 100644
--- a/src/extension/background/bootstrap.ts
+++ b/src/extension/background/bootstrap.ts
@@ -5,6 +5,7 @@ import { cryptoWaitReady } from '@polkadot/util-crypto'
 import { createServer } from './app/server'
 import Job from './job'
 import Koa from './koa-ts'
+import DappRequestMiddleware from './middleware/dapp.request.middleware'
 import ErrorHandleMiddleware from './middleware/error.handle.middleware'
 import RespondMiddleware from './middleware/respond.middleware'
 import RouterMiddleware from './middleware/router.middleware'
@@ -16,6 +17,7 @@ export let wsProvider: WsProvider
 const middleware = [
   ErrorHandleMiddleware,
   RespondMiddleware, // do not change this middleware position
+  DappRequestMiddleware, // do not change this middleware position
   RpcResponseMiddleware,
   RouterMiddleware, // do not change this middleware position
 ]
diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
new file mode 100644
index 0000000..fdf91a0
--- /dev/null
+++ b/src/extension/background/controller/pub.controller.ts
@@ -0,0 +1,65 @@
+import { SignerResult } from '@polkadot/api/types'
+import { InjectedAccount, MetadataDef } from '@polkadot/extension-inject/types'
+import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
+
+import { KoaContext } from '../koa-ts'
+import WalletService from '../service/wallet.service'
+
+const PubController = {
+  async 'pub(accounts.list)'(ctx: KoaContext<[{ anyType?: boolean }]>) {
+    const accounts = await WalletService.queryAllAccount()
+
+    const result: InjectedAccount[] = accounts.map((account) => {
+      return {
+        address: account.address,
+        name: account.name,
+        genesisHash:
+          '0x2ae061f08422b6503b8aa5f401242a209999669c3b8945f814dc096fb1a977bd',
+        type: 'sr25519',
+      }
+    })
+
+    return ctx.pushResponse(result)
+  },
+  async 'pub(metadata.list)'(ctx: KoaContext) {
+    return ctx.pushResponse([
+      {
+        genesisHash:
+          '0x2ae061f08422b6503b8aa5f401242a209999669c3b8945f814dc096fb1a977bd',
+        specVersion: 4010,
+      },
+    ])
+  },
+  async 'pub(metadata.provide)'(ctx: KoaContext<[MetadataDef]>) {
+    console.log('test', ctx.params[0])
+    return ctx.pushResponse(true)
+  },
+  async 'pub(rpc.listProviders)'(ctx: KoaContext) {
+    return ctx.pushResponse({})
+  },
+  async 'pub(extrinsic.sign)'(ctx: KoaContext<[SignerPayloadJSON]>) {
+    console.log('test', ctx.params[0])
+    const result: SignerResult = {
+      id: 0,
+      signature: '0x23',
+    }
+    return ctx.pushResponse(result)
+  },
+  async 'pub(bytes.sign)'(ctx: KoaContext<[SignerPayloadRaw]>) {
+    console.log('test', ctx.params[0])
+    const result: SignerResult = {
+      id: 0,
+      signature: '0x23',
+    }
+    return ctx.pushResponse(result)
+  },
+  async 'pub(authorize.tab)'(ctx: KoaContext<[{ origin: string }]>) {
+    console.log('test', ctx.params[0])
+    return ctx.pushResponse({
+      authorizedAccounts: [],
+      result: false,
+    })
+  },
+}
+
+export default PubController
diff --git a/src/extension/background/middleware/dapp.request.middleware.ts b/src/extension/background/middleware/dapp.request.middleware.ts
new file mode 100644
index 0000000..7cbbd5b
--- /dev/null
+++ b/src/extension/background/middleware/dapp.request.middleware.ts
@@ -0,0 +1,48 @@
+import {
+  dappAutoPopupMethods,
+  dappAllowMethods,
+} from '@/extension/common/constants'
+
+import type { KoaContext } from '../koa-ts'
+import type { IRouters } from '../router'
+import PopupRequestService from '../service/popup.request.service'
+import { DefaultPopupManager } from '../utils/extension-tools/popup-tool'
+
+const checkNeedPopupUIForRequests = async (
+  ctx: KoaContext,
+): Promise<boolean> => {
+  const request = ctx.rpcReq
+  const method = (request?.method ?? '') as IRouters
+  const needPopupUI =
+    dappAutoPopupMethods.includes(method) && ctx.req.sess.role === 'dapp'
+  if (!needPopupUI) {
+    return false
+  }
+  await PopupRequestService.addRequestToQueue(ctx)
+  await DefaultPopupManager.showPopup(chrome.runtime.getURL('index.html#'))
+  return true
+}
+// TODO limit dapp request if disconnected
+const checkAccessForDappRequests = (ctx: KoaContext): boolean => {
+  const method = (ctx.rpcReq?.method ?? '') as IRouters
+  if (ctx.req.sess.role === 'dapp' && !dappAllowMethods.includes(method)) {
+    console.warn(`no access to call ${method} from ${ctx.req.sess.role}`)
+    return false
+  }
+  return true
+}
+
+/**
+ * process the request from dapp side, such as popup a UI for sign or connect request.
+ * filter the Illegal request from web side.
+ */
+const DappRequestMiddleware = async (
+  ctx: KoaContext,
+  next: () => Promise<any>,
+) => {
+  const needStubRequest = await checkNeedPopupUIForRequests(ctx)
+  if (!needStubRequest && checkAccessForDappRequests(ctx)) {
+    await next()
+  }
+}
+export default DappRequestMiddleware
diff --git a/src/extension/background/model/balance.model.ts b/src/extension/background/model/balance.model.ts
index ebff396..6c2adcb 100644
--- a/src/extension/background/model/balance.model.ts
+++ b/src/extension/background/model/balance.model.ts
@@ -15,6 +15,10 @@ export const TokenMap = {
     decimals: 12,
     symbol: 'KMA',
   },
+  DOL: {
+    decimals: 10,
+    symbol: 'DOL',
+  },
 }
 
 class BalanceModelDB extends Dexie {
diff --git a/src/extension/background/model/connect.session.model.ts b/src/extension/background/model/connect.session.model.ts
new file mode 100644
index 0000000..ad59b7b
--- /dev/null
+++ b/src/extension/background/model/connect.session.model.ts
@@ -0,0 +1,30 @@
+import type { IClientMeta } from '@deficonnect/types'
+import type { Table } from 'dexie'
+import Dexie from 'dexie'
+
+import type { ClientRole } from '@/extension'
+
+export interface ConnectSession {
+  origin: string
+  chainId: string
+  chainType: string
+  accounts: string[]
+  clientMeta: IClientMeta
+  walletId: string
+  role: ClientRole
+  rpcUrl?: string
+}
+
+class ConnectSessionModelDB extends Dexie {
+  public connectSessions!: Table<ConnectSession, string>
+  public constructor() {
+    super('connect-session-model')
+    this.version(1).stores({
+      connectSessions: '&[origin+walletId], origin, role, walletId, accounts',
+    })
+  }
+}
+
+const ConnectSessionModel = new ConnectSessionModelDB()
+
+export default ConnectSessionModel
diff --git a/src/extension/background/model/general.config.model.ts b/src/extension/background/model/general.config.model.ts
new file mode 100644
index 0000000..ab0aed1
--- /dev/null
+++ b/src/extension/background/model/general.config.model.ts
@@ -0,0 +1,21 @@
+import type { Table } from 'dexie'
+import Dexie from 'dexie'
+
+export interface GeneralConfig {
+  key: string
+  value: unknown
+}
+
+class GeneralConfigModelDB extends Dexie {
+  public configs!: Table<GeneralConfig, string>
+  public constructor() {
+    super('general-config-model')
+    this.version(1).stores({
+      configs: '&key',
+    })
+  }
+}
+
+const GeneralConfigModel = new GeneralConfigModelDB()
+
+export default GeneralConfigModel
diff --git a/src/extension/background/model/wallet.model.ts b/src/extension/background/model/wallet.model.ts
index 5ff93b4..0186f8a 100644
--- a/src/extension/background/model/wallet.model.ts
+++ b/src/extension/background/model/wallet.model.ts
@@ -15,6 +15,7 @@ export interface Wallet {
   address: string
   network: number
   createTime: number
+  accountIndex?: string
 }
 
 class WalletModelDB extends Dexie {
diff --git a/src/extension/background/router.ts b/src/extension/background/router.ts
index 2c37d97..8c2861b 100644
--- a/src/extension/background/router.ts
+++ b/src/extension/background/router.ts
@@ -1,6 +1,7 @@
 import BalanceController from './controller/balance.controller'
 import DappController from './controller/dapp.controller'
 import ExampleController from './controller/example.controller'
+import PubController from './controller/pub.controller'
 import TransactionController from './controller/transaction.controller'
 import WalletController from './controller/wallet.controller'
 import { KoaContext } from './koa-ts'
@@ -11,6 +12,7 @@ const routers = {
   ...WalletController,
   ...BalanceController,
   ...TransactionController,
+  ...PubController,
 }
 
 export type IRouters = keyof typeof routers
diff --git a/src/extension/background/utils/extension-tools/chrome-extension.ts b/src/extension/background/utils/extension-tools/chrome-extension.ts
new file mode 100644
index 0000000..cd9802b
--- /dev/null
+++ b/src/extension/background/utils/extension-tools/chrome-extension.ts
@@ -0,0 +1,170 @@
+function checkForError() {
+  const { lastError } = chrome?.runtime
+  if (!lastError) {
+    return undefined
+  }
+  if (lastError.message) {
+    return lastError
+  }
+  return new Error(lastError.message)
+}
+
+export const ChromeExtension = {
+  openExtensionInBrowser(path?: string) {
+    let extensionURL = chrome.runtime.getURL('index.html')
+    if (path) {
+      extensionURL += `#${path}`
+    }
+    ChromeExtension.openTab({ url: extensionURL })
+  },
+  async checkIsOpenByExtensionIcon() {
+    try {
+      await ChromeExtension.getCurrentTab()
+      return false
+    } catch (error) {
+      return true
+    }
+  },
+  async checkIsPopup() {
+    try {
+      const isOpenByExtensionIcon =
+        await ChromeExtension.checkIsOpenByExtensionIcon()
+      const currentWindow = await ChromeExtension.getCurrentWindow()
+      return isOpenByExtensionIcon || currentWindow.type === 'popup'
+    } catch (error) {
+      return false
+    }
+  },
+  openTab(options: chrome.tabs.CreateProperties): Promise<chrome.tabs.Tab> {
+    return new Promise((resolve, reject) => {
+      chrome.tabs.create(options, (newTab) => {
+        if (newTab) {
+          return resolve(newTab)
+        }
+        const error = checkForError()
+        return reject(error)
+      })
+    })
+  },
+  getCurrentTab(): Promise<chrome.tabs.Tab> {
+    return new Promise<chrome.tabs.Tab>((resolve, reject) => {
+      chrome.tabs.getCurrent((tab) => {
+        if (tab) {
+          return resolve(tab)
+        }
+        return reject()
+      })
+    })
+  },
+  getCurrentWindow(): Promise<chrome.windows.Window> {
+    return chrome.windows.getCurrent()
+  },
+  getAllWindows(): Promise<chrome.windows.Window[]> {
+    return new Promise((resolve, reject) => {
+      chrome.windows.getAll((windows) => {
+        const error = checkForError()
+        if (error) {
+          return reject(error)
+        }
+        return resolve(windows)
+      })
+    })
+  },
+  async focusWindow(
+    windowId: number,
+    url?: string,
+  ): Promise<chrome.windows.Window> {
+    const chromeWindow = (await ChromeExtension.getWindow(windowId)) || {}
+    await new Promise((resolve, reject) => {
+      chrome.windows.update(windowId, { focused: true }, () => {
+        const error = checkForError()
+        if (error) {
+          reject(error)
+        } else {
+          resolve(chromeWindow)
+        }
+      })
+    })
+    return new Promise((resolve, reject) => {
+      if (chromeWindow.tabs?.length) {
+        const tab = chromeWindow.tabs[0]
+        chrome.tabs.update(tab.id as number, { active: true, url }, () => {
+          const error = checkForError()
+          if (error) {
+            reject(error)
+          } else {
+            resolve(chromeWindow)
+          }
+        })
+      } else {
+        resolve(chromeWindow)
+      }
+    })
+  },
+  async getLastFocusedWindow(): Promise<chrome.windows.Window> {
+    return new Promise((resolve, reject) => {
+      chrome.windows.getLastFocused((windowObject) => {
+        const error = checkForError()
+        if (error) {
+          return reject(error)
+        }
+        return resolve(windowObject)
+      })
+    })
+  },
+  getWindow(windowId: number): Promise<chrome.windows.Window> {
+    return new Promise<chrome.windows.Window>((resolve, reject) => {
+      try {
+        chrome.windows.get(windowId, (chromeWindow) => {
+          if (chromeWindow) {
+            return resolve(chromeWindow)
+          }
+          const error = checkForError()
+          return reject(error)
+        })
+      } catch (e) {
+        reject(e)
+      }
+    })
+  },
+  openWindow(
+    options: chrome.windows.CreateData,
+  ): Promise<chrome.windows.Window> {
+    return new Promise((resolve, reject) => {
+      chrome.windows.create(options, (newWindow) => {
+        if (newWindow) {
+          return resolve(newWindow)
+        }
+        const error = checkForError()
+        return reject(error)
+      })
+    })
+  },
+  updateWindowPosition(
+    windowId: number,
+    left: number,
+    top: number,
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      chrome.windows.update(windowId, { left, top }, () => {
+        const error = checkForError()
+        if (error) {
+          return reject(error)
+        }
+        return resolve()
+      })
+    })
+  },
+  async closeCurrentPopup() {
+    if (!chrome.tabs) {
+      return
+    }
+    const tab = await ChromeExtension.getCurrentTab()
+    const chromeWindow = await ChromeExtension.getWindow(tab.windowId)
+    if (chromeWindow.type === 'popup') {
+      chrome.windows.remove(chromeWindow.id as number)
+    } else {
+      throw new Error('current window is not a popup')
+    }
+  },
+}
diff --git a/src/extension/background/utils/extension-tools/popup-tool.ts b/src/extension/background/utils/extension-tools/popup-tool.ts
new file mode 100644
index 0000000..91d92d6
--- /dev/null
+++ b/src/extension/background/utils/extension-tools/popup-tool.ts
@@ -0,0 +1,101 @@
+import GeneralConfigModel from '../../model/general.config.model'
+import { ChromeExtension } from './chrome-extension'
+
+const APP_SIZE = {
+  width: 360,
+  height: 580,
+  statusBarHeight: 60,
+}
+
+class PopupManager {
+  async getPopupID(): Promise<number> {
+    const popupIDConfig = await GeneralConfigModel.configs.get(
+      'PopupManager_popupID',
+    )
+    const popupId = popupIDConfig?.value as number
+    return popupId
+  }
+
+  private async setPopupID(num: number | undefined) {
+    if (!!num) {
+      await GeneralConfigModel.configs.put({
+        key: 'PopupManager_popupID',
+        value: num,
+      })
+    } else {
+      GeneralConfigModel.configs.delete('PopupManager_popupID')
+    }
+  }
+
+  constructor() {
+    chrome.windows.onRemoved.addListener(async (windowId) => {
+      const popupId = await this.getPopupID()
+      if (windowId === popupId) {
+        this.setPopupID(undefined)
+      }
+    })
+  }
+  private async getPopupWindow() {
+    try {
+      const popupId = (await this.getPopupID()) ?? 0
+      const popupWindow = await ChromeExtension.getWindow(popupId)
+      if (popupWindow.type !== 'popup') {
+        return undefined
+      }
+      return popupWindow
+    } catch {
+      return undefined
+    }
+  }
+
+  showPopup = async (url: string): Promise<chrome.windows.Window> => {
+    let left = 0
+    let top = 0
+    try {
+      const lastFocused = await ChromeExtension.getLastFocusedWindow()
+      top = lastFocused.top as number
+      left =
+        (lastFocused.left as number) +
+        (lastFocused.width as number) -
+        APP_SIZE.width
+    } catch (_) {
+      const { screenX, screenY, outerWidth } = window
+      top = Math.max(screenY, 0)
+      left = Math.max(screenX + (outerWidth - APP_SIZE.width), 0)
+    }
+    let popupWindow = await this.getPopupWindow()
+
+    if (popupWindow && popupWindow.id) {
+      await ChromeExtension.focusWindow(popupWindow.id).catch()
+    } else {
+      // create new notification popup
+      popupWindow = await ChromeExtension.openWindow({
+        url: url,
+        type: 'popup',
+        width: APP_SIZE.width,
+        height: APP_SIZE.height + APP_SIZE.statusBarHeight,
+        left,
+        top,
+      })
+      this.setPopupID(popupWindow.id)
+    }
+
+    // Firefox currently ignores left/top for create, but it works for update
+    if (popupWindow.left !== left && popupWindow.state !== 'fullscreen') {
+      await ChromeExtension.updateWindowPosition(
+        popupWindow.id as number,
+        left,
+        top,
+      )
+    }
+    return popupWindow
+  }
+
+  closeAllPopup = async () => {
+    const popupId = await this.getPopupID()
+    chrome.windows.remove(popupId)
+    this.setPopupID(undefined)
+  }
+}
+
+export const DefaultPopupManager = new PopupManager()
diff --git a/src/extension/common/constants.ts b/src/extension/common/constants.ts
index 0137343..6359cc3 100644
--- a/src/extension/common/constants.ts
+++ b/src/extension/common/constants.ts
@@ -27,10 +27,15 @@ export const aptosAutoPopupMethos = [
   'aptos_createCollection',
   'aptos_createToken',
 ]
+
+export const polkadotAutoPopupMethos = ['pub(extrinsic.sign)']
+
 export const dappAutoPopupMethods = [
   ...allSigningMethods,
   ...aptosAutoPopupMethos,
+  ...polkadotAutoPopupMethos,
 ]
+
 export const dappAllowMethods = [
   ...dappAutoPopupMethods,
   ...aptosAutoPopupMethos,
@@ -52,6 +57,15 @@ export const dappAllowMethods = [
   'aptos_getTransactionByHash',
   'aptos_getAccountTransactions',
   'aptos_getAccountResources',
+
+  // polkadot
+  'pub(accounts.list)',
+  'pub(metadata.list)',
+  'pub(metadata.provide)',
+  'pub(rpc.listProviders)',
+  'pub(extrinsic.sign)',
+  'pub(bytes.sign)',
+  'pub(authorize.tab)',
 ]
 
 export const ETH_EVENT_LOG_SIGNATURE = {
diff --git a/src/extension/content/connector/dapp-connect-client.ts b/src/extension/content/connector/dapp-connect-client.ts
index ee3e4b1..9685767 100644
--- a/src/extension/content/connector/dapp-connect-client.ts
+++ b/src/extension/content/connector/dapp-connect-client.ts
@@ -67,7 +67,6 @@ export class DappConnectClient extends SafeEventEmitter {
       }
     })
     this.rpcClient.on('dapp_pong', () => {
-      console.log('test dapp_pong')
       this.rpcClient.sendRequest({
         method: 'dapp_ping',
       })
@@ -101,7 +100,7 @@ export class DappConnectClient extends SafeEventEmitter {
     return this.session?.accounts ?? []
   }
 
-  async disconnect(): Promise<void> {
+  async disconnect() {
     if (this.session) {
       this.session = {
         approved: false,
diff --git a/src/extension/content/connector/dapp-rpc-client.ts b/src/extension/content/connector/dapp-rpc-client.ts
index 6ab4dd3..f6dccb8 100644
--- a/src/extension/content/connector/dapp-rpc-client.ts
+++ b/src/extension/content/connector/dapp-rpc-client.ts
@@ -5,6 +5,9 @@ import {
   payloadId,
 } from '@walletconnect/utils'
 
+import { SendRequestProps } from '@/services/rpc-client'
+
+import { GetResponseType, IRouters } from '@/extension/background/router'
 import SafeEventEmitter from '@/extension/background/utils/safe-event-emitter'
 
 import type { IJsonRpcResponse } from '../..'
@@ -33,11 +36,9 @@ export class DappRpcClient extends SafeEventEmitter {
       }
     })
   }
-  sendRequest<T = any>(request: {
-    method: string
-    params?: any[]
-    id?: number
-  }): Promise<T> {
+  sendRequest<T extends IRouters>(
+    request: SendRequestProps<T>,
+  ): Promise<GetResponseType<T>> {
     const { method, params = [], id } = request
     const koaMsg: KoaMessage = {
       from: location.origin,
diff --git a/src/extension/content/inpage-content.ts b/src/extension/content/inpage-content.ts
index c98fc92..89de64f 100644
--- a/src/extension/content/inpage-content.ts
+++ b/src/extension/content/inpage-content.ts
@@ -1,3 +1,6 @@
+import type { Injected } from '@polkadot/extension-inject/types'
+
+import { PolkadotProvider } from './polkadot-provider'
 import { Provider } from './provider'
 
 declare global {
@@ -5,16 +8,46 @@ declare global {
     ethereum?: Provider
     deficonnectProvider?: Provider
     deficonnect: { ethereum?: Provider }
+    injectedWeb3: {
+      'crypto-js': {
+        version: string
+        enable: (originName: string) => Promise<Injected>
+      }
+    }
   }
 }
 
-window.deficonnect = {
-  ethereum: new Provider(),
-}
+// window.deficonnect = {
+//   ethereum: new Provider(),
+// }
 // for SDK 2.0.X
-window.deficonnectProvider = window.deficonnect.ethereum
-if (!(window.ethereum && window.ethereum.isMetaMask)) {
-  window.ethereum = window.deficonnectProvider
+// window.deficonnectProvider = window.deficonnect.ethereum
+// if (!(window.ethereum && window.ethereum.isMetaMask)) {
+//   window.ethereum = window.deficonnectProvider
+// }
+
+// the enable function, called by the dapp to allow access
+export async function enable(origin: string): Promise<Injected> {
+  const injected = new PolkadotProvider()
+  await injected.connectorClient.rpcClient.sendRequest({
+    method: 'pub(authorize.tab)',
+    params: [{ origin }],
+  })
+  return injected
+}
+
+window.injectedWeb3 = {
+  // this is the name for this extension, there could be multiples injected,
+  // each with their own keys, here `polkadot-js` is for this extension
+  'crypto-js': {
+    // semver for the package
+    version: '0.1.0',
+
+    // this is called to enable the injection, and returns an injected
+    // object containing the accounts, signer and provider interfaces
+    // (or it will reject if not authorized)
+    enable: (origin) => enable(origin),
+  },
 }
 
 export {}
diff --git a/src/extension/content/polkadot-provider/accounts.ts b/src/extension/content/polkadot-provider/accounts.ts
new file mode 100644
index 0000000..e8805af
--- /dev/null
+++ b/src/extension/content/polkadot-provider/accounts.ts
@@ -0,0 +1,37 @@
+// Copyright 2019-2023 @polkadot/extension authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import type {
+  InjectedAccount,
+  InjectedAccounts,
+  Unsubcall,
+} from '@polkadot/extension-inject/types'
+
+import { DappRpcClient } from '../connector/dapp-rpc-client'
+
+// External to class, this.# is not private enough (yet)
+let rpcClient: DappRpcClient
+
+export default class Accounts implements InjectedAccounts {
+  constructor(_rpcClient: DappRpcClient) {
+    rpcClient = _rpcClient
+  }
+
+  public get(anyType?: boolean): Promise<InjectedAccount[]> {
+    return rpcClient.sendRequest({
+      method: 'pub(accounts.list)',
+      params: [{ anyType: Boolean(anyType) }],
+    })
+  }
+
+  public subscribe(): Unsubcall {
+    // let id: string | null = null
+
+    // sendRequest('pub(accounts.subscribe)', null, cb)
+    //   .then((subId): void => {
+    //     id = subId
+    //   })
+    //   .catch(console.error)
+
+    return (): void => {}
+  }
+}
diff --git a/src/extension/content/polkadot-provider/index.ts b/src/extension/content/polkadot-provider/index.ts
new file mode 100644
index 0000000..014adc0
--- /dev/null
+++ b/src/extension/content/polkadot-provider/index.ts
@@ -0,0 +1,35 @@
+import type { Injected } from '@polkadot/extension-inject/types'
+
+import SafeEventEmitter from '@/extension/background/utils/safe-event-emitter'
+
+import { DappConnectClient } from '../connector/dapp-connect-client'
+import Accounts from './accounts'
+import Metadata from './metadata'
+import PostMessageProvider from './post-message-provider'
+import Signer from './signer'
+
+export class PolkadotProvider extends SafeEventEmitter implements Injected {
+  connectorClient: DappConnectClient
+  public readonly accounts: Accounts
+
+  public readonly metadata: Metadata
+
+  public readonly provider: PostMessageProvider
+
+  public readonly signer: Signer
+  constructor() {
+    super()
+    this.connectorClient = new DappConnectClient()
+
+    this.accounts = new Accounts(this.connectorClient.rpcClient)
+    this.metadata = new Metadata(this.connectorClient.rpcClient)
+    this.provider = new PostMessageProvider(this.connectorClient.rpcClient)
+    this.signer = new Signer(this.connectorClient.rpcClient)
+
+    // setInterval((): void => {
+    //   sendRequest('pub(ping)', null).catch((): void => {
+    //     console.error('Extension unavailable, ping failed');
+    //   });
+    // }, 5_000 + Math.floor(Math.random() * 5_000));
+  }
+}
diff --git a/src/extension/content/polkadot-provider/metadata.ts b/src/extension/content/polkadot-provider/metadata.ts
new file mode 100644
index 0000000..1c71ebe
--- /dev/null
+++ b/src/extension/content/polkadot-provider/metadata.ts
@@ -0,0 +1,30 @@
+// Copyright 2019-2023 @polkadot/extension authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import type {
+  InjectedMetadata,
+  InjectedMetadataKnown,
+  MetadataDef,
+} from '@polkadot/extension-inject/types'
+
+import { DappRpcClient } from '../connector/dapp-rpc-client'
+
+let rpcClient: DappRpcClient
+
+// External to class, this.# is not private enough (yet)
+
+export default class Metadata implements InjectedMetadata {
+  constructor(_rpcClient: DappRpcClient) {
+    rpcClient = _rpcClient
+  }
+
+  public get(): Promise<InjectedMetadataKnown[]> {
+    return rpcClient.sendRequest({ method: 'pub(metadata.list)' })
+  }
+
+  public provide(definition: MetadataDef): Promise<boolean> {
+    return rpcClient.sendRequest({
+      method: 'pub(metadata.provide)',
+      params: [definition],
+    })
+  }
+}
diff --git a/src/extension/content/polkadot-provider/post-message-provider.ts b/src/extension/content/polkadot-provider/post-message-provider.ts
new file mode 100644
index 0000000..392f227
--- /dev/null
+++ b/src/extension/content/polkadot-provider/post-message-provider.ts
@@ -0,0 +1,213 @@
+// Copyright 2019-2023 @polkadot/extension-base authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import type {
+  InjectedProvider,
+  ProviderList,
+  ProviderMeta,
+} from '@polkadot/extension-inject/types'
+import type {
+  ProviderInterfaceEmitCb,
+  ProviderInterfaceEmitted,
+} from '@polkadot/rpc-provider/types'
+import type { AnyFunction } from '@polkadot/types/types'
+// import { isUndefined, logger } from '@polkadot/util'
+import EventEmitter from 'eventemitter3'
+
+import { DappRpcClient } from '../connector/dapp-rpc-client'
+
+// const l = logger('PostMessageProvider')
+
+// type CallbackHandler = (error?: null | Error, value?: unknown) => void
+
+// Same as https://github.com/polkadot-js/api/blob/57ca9a9c3204339e1e1f693fcacc33039868dc27/packages/rpc-provider/src/ws/Provider.ts#L17
+// interface SubscriptionHandler {
+//   callback: CallbackHandler
+//   type: string
+// }
+
+// External to class, this.# is not private enough (yet)
+let rpcClient: DappRpcClient
+
+/**
+ * @name PostMessageProvider
+ *
+ * @description Extension provider to be used by dapps
+ */
+export default class PostMessageProvider implements InjectedProvider {
+  readonly #eventemitter: EventEmitter
+
+  // Whether or not the actual extension background provider is connected
+  #isConnected = false
+
+  // Subscription IDs are (historically) not guaranteed to be globally unique;
+  // only unique for a given subscription method; which is why we identify
+  // the subscriptions based on subscription id + type
+  readonly #subscriptions: Record<string, AnyFunction> = {} // {[(type,subscriptionId)]: callback}
+
+  /**
+   * @param {function}  rpcClient  The function to be called to send requests to the node
+   * @param {function}  subscriptionNotificationHandler  Channel for receiving subscription messages
+   */
+  public constructor(_rpcClient: DappRpcClient) {
+    this.#eventemitter = new EventEmitter()
+
+    rpcClient = _rpcClient
+  }
+
+  public get isClonable(): boolean {
+    return true
+  }
+
+  /**
+   * @description Returns a clone of the object
+   */
+  public clone(): PostMessageProvider {
+    return new PostMessageProvider(rpcClient)
+  }
+
+  /**
+   * @description Manually disconnect from the connection, clearing autoconnect logic
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  public async connect(): Promise<void> {
+    // FIXME This should see if the extension's state's provider can disconnect
+    console.error('PostMessageProvider.disconnect() is not implemented.')
+  }
+
+  /**
+   * @description Manually disconnect from the connection, clearing autoconnect logic
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  public async disconnect(): Promise<void> {
+    // FIXME This should see if the extension's state's provider can disconnect
+    console.error('PostMessageProvider.disconnect() is not implemented.')
+  }
+
+  /**
+   * @summary `true` when this provider supports subscriptions
+   */
+  public get hasSubscriptions(): boolean {
+    // FIXME This should see if the extension's state's provider has subscriptions
+    return true
+  }
+
+  /**
+   * @summary Whether the node is connected or not.
+   * @return {boolean} true if connected
+   */
+  public get isConnected(): boolean {
+    return this.#isConnected
+  }
+
+  public listProviders(): Promise<ProviderList> {
+    return rpcClient.sendRequest({ method: 'pub(rpc.listProviders)' })
+  }
+
+  /**
+   * @summary Listens on events after having subscribed using the [[subscribe]] function.
+   * @param  {ProviderInterfaceEmitted} type Event
+   * @param  {ProviderInterfaceEmitCb}  sub  Callback
+   * @return unsubscribe function
+   */
+  public on(
+    type: ProviderInterfaceEmitted,
+    sub: ProviderInterfaceEmitCb,
+  ): () => void {
+    this.#eventemitter.on(type, sub)
+
+    return (): void => {
+      this.#eventemitter.removeListener(type, sub)
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public async send(): // method: string,
+  // params: unknown[],
+  // _?: boolean,
+  // subscription?: SubscriptionHandler,
+  Promise<any> {
+    // if (subscription) {
+    //   const { callback, type } = subscription
+
+    //   const id = await rpcClient(
+    //     'pub(rpc.subscribe)',
+    //     { method, params, type },
+    //     (res): void => {
+    //       subscription.callback(null, res)
+    //     },
+    //   )
+
+    //   this.#subscriptions[`${type}::${id}`] = callback
+
+    //   return id
+    // }
+
+    // return rpcClient('pub(rpc.send)', { method, params })
+    return {}
+  }
+
+  /**
+   * @summary Spawn a provider on the extension background.
+   */
+  public async startProvider(): Promise<ProviderMeta> {
+    // Disconnect from the previous provider
+    this.#isConnected = false
+    this.#eventemitter.emit('disconnected')
+
+    // const meta = await rpcClient('pub(rpc.startProvider)', key)
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    // rpcClient('pub(rpc.subscribeConnected)', null, (connected) => {
+    //   this.#isConnected = connected
+
+    //   if (connected) {
+    //     this.#eventemitter.emit('connected')
+    //   } else {
+    //     this.#eventemitter.emit('disconnected')
+    //   }
+
+    //   return true
+    // })
+
+    return {}
+  }
+
+  public subscribe(): // type: string,
+  // method: string,
+  // params: unknown[],
+  // callback: AnyFunction,
+  Promise<number> {
+    return 0 as unknown as Promise<number>
+    // return this.send(method, params, false, {
+    //   callback,
+    //   type,
+    // }) as Promise<number>
+  }
+
+  /**
+   * @summary Allows unsubscribing to subscriptions made with [[subscribe]].
+   */
+  public async unsubscribe(): // type: string,
+  // method: string,
+  // id: number,
+  Promise<boolean> {
+    // const subscription = `${type}::${id}`
+
+    // FIXME This now could happen with re-subscriptions. The issue is that with a re-sub
+    // the assigned id now does not match what the API user originally received. It has
+    // a slight complication in solving - since we cannot rely on the send id, but rather
+    // need to find the actual subscription id to map it
+    // if (isUndefined(this.#subscriptions[subscription])) {
+    //   l.debug(
+    //     (): string => `Unable to find active subscription=${subscription}`,
+    //   )
+
+    //   return false
+    // }
+
+    // delete this.#subscriptions[subscription]
+
+    // return this.send(method, [id]) as Promise<boolean>
+    return true
+  }
+}
diff --git a/src/extension/content/polkadot-provider/signer.ts b/src/extension/content/polkadot-provider/signer.ts
new file mode 100644
index 0000000..945aaa9
--- /dev/null
+++ b/src/extension/content/polkadot-provider/signer.ts
@@ -0,0 +1,54 @@
+// Copyright 2019-2023 @polkadot/extension-base authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import type {
+  Signer as SignerInterface,
+  SignerResult,
+} from '@polkadot/api/types'
+import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
+
+import { DappRpcClient } from '../connector/dapp-rpc-client'
+
+// External to class, this.# is not private enough (yet)
+let rpcClient: DappRpcClient
+let nextId = 0
+
+export default class Signer implements SignerInterface {
+  constructor(_rpcClient: DappRpcClient) {
+    rpcClient = _rpcClient
+  }
+
+  public async signPayload(payload: SignerPayloadJSON): Promise<SignerResult> {
+    const id = ++nextId
+    const result = await rpcClient.sendRequest({
+      method: 'pub(extrinsic.sign)',
+      params: [payload],
+    })
+
+    // we add an internal id (number) - should have a mapping from the
+    // extension id (string) -> internal id (number) if we wish to provide
+    // updated via the update functionality (noop at this point)
+    return {
+      ...result,
+      id,
+    }
+  }
+
+  public async signRaw(payload: SignerPayloadRaw): Promise<SignerResult> {
+    const id = ++nextId
+    const result = await rpcClient.sendRequest({
+      method: 'pub(bytes.sign)',
+      params: [payload],
+    })
+
+    return {
+      ...result,
+      id,
+    }
+  }
+
+  // NOTE We don't listen to updates at all, if we do we can interpret the
+  // result as provided by the API here
+  // public update (id: number, status: Hash | SubmittableResult): void {
+  //   // ignore
+  // }
+}
diff --git a/src/extension/content/polkadot-provider/types.ts b/src/extension/content/polkadot-provider/types.ts
new file mode 100644
index 0000000..1047660
--- /dev/null
+++ b/src/extension/content/polkadot-provider/types.ts
@@ -0,0 +1,25 @@
+// Copyright 2019-2023 @polkadot/extension-base authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+import type {
+  MessageTypesWithNoSubscriptions,
+  MessageTypesWithNullRequest,
+  MessageTypesWithSubscriptions,
+  RequestTypes,
+  ResponseTypes,
+  SubscriptionMessageTypes,
+} from '../background/types'
+
+export interface SendRequest {
+  <TMessageType extends MessageTypesWithNullRequest>(
+    message: TMessageType,
+  ): Promise<ResponseTypes[TMessageType]>
+  <TMessageType extends MessageTypesWithNoSubscriptions>(
+    message: TMessageType,
+    request: RequestTypes[TMessageType],
+  ): Promise<ResponseTypes[TMessageType]>
+  <TMessageType extends MessageTypesWithSubscriptions>(
+    message: TMessageType,
+    request: RequestTypes[TMessageType],
+    subscriber: (data: SubscriptionMessageTypes[TMessageType]) => void,
+  ): Promise<ResponseTypes[TMessageType]>
+}
diff --git a/src/services/rpc-client.ts b/src/services/rpc-client.ts
index e6c78b4..a150378 100644
--- a/src/services/rpc-client.ts
+++ b/src/services/rpc-client.ts
@@ -20,13 +20,13 @@ import { DappTransport } from '@/extension/content/connector/dapp-transport'
 
 import type { ChromeConnectPortJSON, IJsonRpcResponse } from '@/extension'
 
-interface SendRequestProps<T extends IRouters> {
+export interface SendRequestProps<T extends IRouters> {
   method: T
   params?: GetParameters<T>
   id?: number
 }
 
-interface SendOptionProps {
+export interface SendOptionProps {
   timeout?: number
 }
 

From 877959cbba8265feb7b9e3467bc8743650aac530 Mon Sep 17 00:00:00 2001
From: Vern Zhang <vern.zhang@crypto.com>
Date: Tue, 14 Feb 2023 00:48:38 +0800
Subject: [PATCH 18/24] chore: rename file

---
 src/extension/content/polkadot-provider/index.ts                | 2 +-
 .../{post-message-provider.ts => post.message.provider.ts}      | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/extension/content/polkadot-provider/{post-message-provider.ts => post.message.provider.ts} (100%)

diff --git a/src/extension/content/polkadot-provider/index.ts b/src/extension/content/polkadot-provider/index.ts
index 014adc0..d36dab7 100644
--- a/src/extension/content/polkadot-provider/index.ts
+++ b/src/extension/content/polkadot-provider/index.ts
@@ -5,7 +5,7 @@ import SafeEventEmitter from '@/extension/background/utils/safe-event-emitter'
 import { DappConnectClient } from '../connector/dapp-connect-client'
 import Accounts from './accounts'
 import Metadata from './metadata'
-import PostMessageProvider from './post-message-provider'
+import PostMessageProvider from './post.message.provider'
 import Signer from './signer'
 
 export class PolkadotProvider extends SafeEventEmitter implements Injected {
diff --git a/src/extension/content/polkadot-provider/post-message-provider.ts b/src/extension/content/polkadot-provider/post.message.provider.ts
similarity index 100%
rename from src/extension/content/polkadot-provider/post-message-provider.ts
rename to src/extension/content/polkadot-provider/post.message.provider.ts

From 5e485c5bd2c8a08eeb4866d8c7172b3e6ca9f234 Mon Sep 17 00:00:00 2001
From: tkvern <verncake@gmail.com>
Date: Tue, 14 Feb 2023 16:51:34 +0800
Subject: [PATCH 19/24] feat: finished transaction UIs

---
 config/routes.ts                              |  62 +--
 package-lock.json                             | 370 ++++++++++++++++--
 package.json                                  |   1 +
 src/assets/icon-arrow-left-light.svg          |   3 +
 src/assets/icon-arrow-right-light.svg         |   3 +
 .../background/app/subscription.manager.ts    |  13 +-
 .../background/controller/dc.controller.ts    |  27 ++
 .../background/controller/pub.controller.ts   |  18 +-
 .../controller/subscribe.controller.ts        |  21 +
 src/extension/background/router.ts            |   4 +
 src/hooks/dapp.request.ts                     |  19 +
 src/hooks/subscription.ts                     |  59 +++
 src/models/popup-request-queue.ts             |  50 +++
 src/models/wallets.ts                         |  10 +
 .../components/Header/index.module.less       |  65 +++
 .../UIRequest/components/Header/index.tsx     |  83 ++++
 .../components/Transaction/index.module.less  |   3 +
 .../components/Transaction/index.tsx          | 166 ++++++++
 src/pages/UIRequest/index.module.less         |  12 +
 src/pages/UIRequest/index.tsx                 |  93 +++++
 src/pages/Wrappers/ui-request.tsx             |  19 +
 src/utils/tools/popup-redirect.ts             |  19 +
 22 files changed, 1060 insertions(+), 60 deletions(-)
 create mode 100644 src/assets/icon-arrow-left-light.svg
 create mode 100644 src/assets/icon-arrow-right-light.svg
 create mode 100644 src/extension/background/controller/dc.controller.ts
 create mode 100644 src/extension/background/controller/subscribe.controller.ts
 create mode 100644 src/hooks/dapp.request.ts
 create mode 100644 src/hooks/subscription.ts
 create mode 100644 src/models/popup-request-queue.ts
 create mode 100644 src/models/wallets.ts
 create mode 100644 src/pages/UIRequest/components/Header/index.module.less
 create mode 100644 src/pages/UIRequest/components/Header/index.tsx
 create mode 100644 src/pages/UIRequest/components/Transaction/index.module.less
 create mode 100644 src/pages/UIRequest/components/Transaction/index.tsx
 create mode 100644 src/pages/UIRequest/index.module.less
 create mode 100644 src/pages/UIRequest/index.tsx
 create mode 100644 src/pages/Wrappers/ui-request.tsx
 create mode 100644 src/utils/tools/popup-redirect.ts

diff --git a/config/routes.ts b/config/routes.ts
index 16eda0e..11e4de1 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -4,32 +4,42 @@ export default defineConfig({
   routes: [
     {
       path: '/',
-      redirect: '/home',
-    },
-    {
-      name: 'Home',
-      path: '/home',
-      component: './Home',
-    },
-    {
-      name: 'Create',
-      path: '/create',
-      component: './Create',
-    },
-    {
-      name: 'Send',
-      path: '/send',
-      component: './Send',
-    },
-    {
-      name: 'Access',
-      path: '/access',
-      component: './Access',
-    },
-    {
-      name: ' CRUD Example',
-      path: '/table',
-      component: './Table',
+      wrappers: ['@/pages/Wrappers/ui-request'],
+      routes: [
+        {
+          path: '/',
+          redirect: '/home',
+        },
+        {
+          name: 'Home',
+          path: '/home',
+          component: './Home',
+        },
+        {
+          name: 'Create',
+          path: '/create',
+          component: './Create',
+        },
+        {
+          name: 'Send',
+          path: '/send',
+          component: './Send',
+        },
+        {
+          name: 'Access',
+          path: '/access',
+          component: './Access',
+        },
+        {
+          name: ' CRUD Example',
+          path: '/table',
+          component: './Table',
+        },
+        {
+          path: 'ui-request/:reqId',
+          component: '@/pages/UIRequest',
+        },
+      ],
     },
   ],
 }).routes
diff --git a/package-lock.json b/package-lock.json
index 656ef02..4aa0176 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@polkadot/extension-inject": "^0.44.8",
         "@polkadot/react-identicon": "^2.11.1",
         "@polkadot/ui-keyring": "^2.11.1",
+        "@polkadot/util": "^10.4.1",
         "@polkadot/util-crypto": "^10.3.1",
         "@umijs/max": "^4.0.47",
         "@walletconnect/iso-crypto": "^1.8.0",
@@ -4042,6 +4043,47 @@
         "@polkadot/util-crypto": "10.3.1"
       }
     },
+    "node_modules/@polkadot/keyring/node_modules/@polkadot/util": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-global": "10.3.1",
+        "@polkadot/x-textdecoder": "10.3.1",
+        "@polkadot/x-textencoder": "10.3.1",
+        "@types/bn.js": "^5.1.1",
+        "bn.js": "^5.2.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/keyring/node_modules/@polkadot/x-textdecoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/keyring/node_modules/@polkadot/x-textencoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@polkadot/networks": {
       "version": "10.3.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/networks/-/networks-10.3.1.tgz",
@@ -4055,6 +4097,47 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@polkadot/networks/node_modules/@polkadot/util": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-global": "10.3.1",
+        "@polkadot/x-textdecoder": "10.3.1",
+        "@polkadot/x-textencoder": "10.3.1",
+        "@types/bn.js": "^5.1.1",
+        "bn.js": "^5.2.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/networks/node_modules/@polkadot/x-textdecoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/networks/node_modules/@polkadot/x-textencoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@polkadot/phishing": {
       "version": "0.18.13",
       "resolved": "https://registry.npmmirror.com/@polkadot/phishing/-/phishing-0.18.13.tgz",
@@ -4290,15 +4373,15 @@
       }
     },
     "node_modules/@polkadot/util": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
-      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.4.1.tgz",
+      "integrity": "sha512-dOlmue4nhbk8msbs/YgoBqVtUzDx5iqhiDnC62GWC8b+JmIlIM4Ddgg1rhBf1KJ6TfEQrzQA0FwLaqCCH5vYmA==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-bigint": "10.3.1",
-        "@polkadot/x-global": "10.3.1",
-        "@polkadot/x-textdecoder": "10.3.1",
-        "@polkadot/x-textencoder": "10.3.1",
+        "@polkadot/x-bigint": "10.4.1",
+        "@polkadot/x-global": "10.4.1",
+        "@polkadot/x-textdecoder": "10.4.1",
+        "@polkadot/x-textencoder": "10.4.1",
         "@types/bn.js": "^5.1.1",
         "bn.js": "^5.2.1"
       },
@@ -4330,6 +4413,70 @@
         "@polkadot/util": "10.3.1"
       }
     },
+    "node_modules/@polkadot/util-crypto/node_modules/@polkadot/util": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-bigint": "10.3.1",
+        "@polkadot/x-global": "10.3.1",
+        "@polkadot/x-textdecoder": "10.3.1",
+        "@polkadot/x-textencoder": "10.3.1",
+        "@types/bn.js": "^5.1.1",
+        "bn.js": "^5.2.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/util-crypto/node_modules/@polkadot/x-textdecoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/util-crypto/node_modules/@polkadot/x-textencoder": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/util/node_modules/@polkadot/x-bigint": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-bigint/-/x-bigint-10.4.1.tgz",
+      "integrity": "sha512-CpTGPwNUDrJcrnfDU/94mfZ16TZoTwWAwTLH0oMUJtrM2mHo+LtWZBlCTG+thhkcGcSRy/rrpzx4ffNsj5Sy1w==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@polkadot/x-global": "10.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/util/node_modules/@polkadot/x-global": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+      "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@polkadot/wasm-bridge": {
       "version": "6.4.1",
       "resolved": "https://registry.npmmirror.com/@polkadot/wasm-bridge/-/wasm-bridge-6.4.1.tgz",
@@ -4476,24 +4623,46 @@
       }
     },
     "node_modules/@polkadot/x-textdecoder": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
-      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.4.1.tgz",
+      "integrity": "sha512-OcAL0napRM4hukgvH6kYGdiczqvbkFYoLBgQFalZChktjL1tDNiF6tzzt4Nn8WQXYYFlfyxp5LoZRtNrcFJq4w==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-global": "10.3.1"
+        "@polkadot/x-global": "10.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-textdecoder/node_modules/@polkadot/x-global": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+      "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@polkadot/x-textencoder": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
-      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.4.1.tgz",
+      "integrity": "sha512-YBS04HV/QgRppt0XC5n48c89ueH3ErivrcmqFTlkKMcXNzvtpMCTZGCTzG5vU8ozP0tl/4Is5N8agmYHLMu1Cg==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-global": "10.3.1"
+        "@polkadot/x-global": "10.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@polkadot/x-textencoder/node_modules/@polkadot/x-global": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+      "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -21524,6 +21693,40 @@
         "@babel/runtime": "^7.20.13",
         "@polkadot/util": "10.3.1",
         "@polkadot/util-crypto": "10.3.1"
+      },
+      "dependencies": {
+        "@polkadot/util": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+          "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-bigint": "10.3.1",
+            "@polkadot/x-global": "10.3.1",
+            "@polkadot/x-textdecoder": "10.3.1",
+            "@polkadot/x-textencoder": "10.3.1",
+            "@types/bn.js": "^5.1.1",
+            "bn.js": "^5.2.1"
+          }
+        },
+        "@polkadot/x-textdecoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+          "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        },
+        "@polkadot/x-textencoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+          "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        }
       }
     },
     "@polkadot/networks": {
@@ -21534,6 +21737,40 @@
         "@babel/runtime": "^7.20.13",
         "@polkadot/util": "10.3.1",
         "@substrate/ss58-registry": "^1.38.0"
+      },
+      "dependencies": {
+        "@polkadot/util": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+          "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-bigint": "10.3.1",
+            "@polkadot/x-global": "10.3.1",
+            "@polkadot/x-textdecoder": "10.3.1",
+            "@polkadot/x-textencoder": "10.3.1",
+            "@types/bn.js": "^5.1.1",
+            "bn.js": "^5.2.1"
+          }
+        },
+        "@polkadot/x-textdecoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+          "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        },
+        "@polkadot/x-textencoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+          "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        }
       }
     },
     "@polkadot/phishing": {
@@ -21722,17 +21959,36 @@
       }
     },
     "@polkadot/util": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
-      "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.4.1.tgz",
+      "integrity": "sha512-dOlmue4nhbk8msbs/YgoBqVtUzDx5iqhiDnC62GWC8b+JmIlIM4Ddgg1rhBf1KJ6TfEQrzQA0FwLaqCCH5vYmA==",
       "requires": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-bigint": "10.3.1",
-        "@polkadot/x-global": "10.3.1",
-        "@polkadot/x-textdecoder": "10.3.1",
-        "@polkadot/x-textencoder": "10.3.1",
+        "@polkadot/x-bigint": "10.4.1",
+        "@polkadot/x-global": "10.4.1",
+        "@polkadot/x-textdecoder": "10.4.1",
+        "@polkadot/x-textencoder": "10.4.1",
         "@types/bn.js": "^5.1.1",
         "bn.js": "^5.2.1"
+      },
+      "dependencies": {
+        "@polkadot/x-bigint": {
+          "version": "10.4.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-bigint/-/x-bigint-10.4.1.tgz",
+          "integrity": "sha512-CpTGPwNUDrJcrnfDU/94mfZ16TZoTwWAwTLH0oMUJtrM2mHo+LtWZBlCTG+thhkcGcSRy/rrpzx4ffNsj5Sy1w==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.4.1"
+          }
+        },
+        "@polkadot/x-global": {
+          "version": "10.4.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+          "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+          "requires": {
+            "@babel/runtime": "^7.20.13"
+          }
+        }
       }
     },
     "@polkadot/util-crypto": {
@@ -21751,6 +22007,40 @@
         "@scure/base": "1.1.1",
         "ed2curve": "^0.3.0",
         "tweetnacl": "^1.0.3"
+      },
+      "dependencies": {
+        "@polkadot/util": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/util/-/util-10.3.1.tgz",
+          "integrity": "sha512-8j+O7gj7upj1ZwlGxmAaf3+V0xc0VZvqPeBvTFV30Oi1xoMDNH0q2vKst08wARQUUm1Gi0zIlipDMo0n4Sr7tw==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-bigint": "10.3.1",
+            "@polkadot/x-global": "10.3.1",
+            "@polkadot/x-textdecoder": "10.3.1",
+            "@polkadot/x-textencoder": "10.3.1",
+            "@types/bn.js": "^5.1.1",
+            "bn.js": "^5.2.1"
+          }
+        },
+        "@polkadot/x-textdecoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
+          "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        },
+        "@polkadot/x-textencoder": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
+          "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@polkadot/x-global": "10.3.1"
+          }
+        }
       }
     },
     "@polkadot/wasm-bridge": {
@@ -21848,21 +22138,41 @@
       }
     },
     "@polkadot/x-textdecoder": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.3.1.tgz",
-      "integrity": "sha512-BgjcImRYCM2TOMa/95Mmqo6T/YdQWQdVlVQ33PZda7A/I2jBYeOXDj16ftVgn4DWM9xcFVdy2Z3Jg3RGCNbjww==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textdecoder/-/x-textdecoder-10.4.1.tgz",
+      "integrity": "sha512-OcAL0napRM4hukgvH6kYGdiczqvbkFYoLBgQFalZChktjL1tDNiF6tzzt4Nn8WQXYYFlfyxp5LoZRtNrcFJq4w==",
       "requires": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-global": "10.3.1"
+        "@polkadot/x-global": "10.4.1"
+      },
+      "dependencies": {
+        "@polkadot/x-global": {
+          "version": "10.4.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+          "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+          "requires": {
+            "@babel/runtime": "^7.20.13"
+          }
+        }
       }
     },
     "@polkadot/x-textencoder": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.3.1.tgz",
-      "integrity": "sha512-nkNsVW1GNT1XfV4IuKlUkdeo9sFJ/2IPhBbC54gu469NFl52b5be5H9x+IHdqqA8cG0ElvsojTd3K3tVD3sx6Q==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmmirror.com/@polkadot/x-textencoder/-/x-textencoder-10.4.1.tgz",
+      "integrity": "sha512-YBS04HV/QgRppt0XC5n48c89ueH3ErivrcmqFTlkKMcXNzvtpMCTZGCTzG5vU8ozP0tl/4Is5N8agmYHLMu1Cg==",
       "requires": {
         "@babel/runtime": "^7.20.13",
-        "@polkadot/x-global": "10.3.1"
+        "@polkadot/x-global": "10.4.1"
+      },
+      "dependencies": {
+        "@polkadot/x-global": {
+          "version": "10.4.1",
+          "resolved": "https://registry.npmmirror.com/@polkadot/x-global/-/x-global-10.4.1.tgz",
+          "integrity": "sha512-Kdh2Fzl1fpEwU6vL1HMaXJy+fadX79eSy4VAnIx/uyCF3H5Z4WaxzoiNVmHdDZSVaamqtbuKepi1nkE3q1nvlA==",
+          "requires": {
+            "@babel/runtime": "^7.20.13"
+          }
+        }
       }
     },
     "@polkadot/x-ws": {
diff --git a/package.json b/package.json
index 5ed06ba..aa0003f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@polkadot/extension-inject": "^0.44.8",
     "@polkadot/react-identicon": "^2.11.1",
     "@polkadot/ui-keyring": "^2.11.1",
+    "@polkadot/util": "^10.4.1",
     "@polkadot/util-crypto": "^10.3.1",
     "@umijs/max": "^4.0.47",
     "@walletconnect/iso-crypto": "^1.8.0",
diff --git a/src/assets/icon-arrow-left-light.svg b/src/assets/icon-arrow-left-light.svg
new file mode 100644
index 0000000..2689226
--- /dev/null
+++ b/src/assets/icon-arrow-left-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 18L8 12L14 6" stroke="#7B849B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon-arrow-right-light.svg b/src/assets/icon-arrow-right-light.svg
new file mode 100644
index 0000000..95311bb
--- /dev/null
+++ b/src/assets/icon-arrow-right-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18L16 12L10 6" stroke="#7B849B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/extension/background/app/subscription.manager.ts b/src/extension/background/app/subscription.manager.ts
index 2103d40..a45c8e7 100644
--- a/src/extension/background/app/subscription.manager.ts
+++ b/src/extension/background/app/subscription.manager.ts
@@ -1,6 +1,8 @@
 import assert from 'assert'
 
 import type { KoaContext, Session } from '../koa-ts'
+import PopupRequestService from '../service/popup.request.service'
+import WalletService from '../service/wallet.service'
 
 type SessionSet = Map<string, Session>
 
@@ -10,8 +12,15 @@ interface ISubscription<T> {
 }
 
 const Subscriptions: Record<string, ISubscription<unknown>> = {
-  'popup.walletSession': {
-    data: async function () {},
+  'popup.uiRequestQueue': {
+    data: async function () {
+      return PopupRequestService.getAllPendingRequests()
+    },
+  },
+  'popup.wallets': {
+    data: async function () {
+      return WalletService.queryAllAccount()
+    },
   },
 }
 
diff --git a/src/extension/background/controller/dc.controller.ts b/src/extension/background/controller/dc.controller.ts
new file mode 100644
index 0000000..e669668
--- /dev/null
+++ b/src/extension/background/controller/dc.controller.ts
@@ -0,0 +1,27 @@
+import assert from 'assert'
+
+import type { KoaContext } from '../koa-ts'
+import { PopupRequestService } from '../service/popup.request.service'
+import { constructJsonRpcResponse } from '../utils/rpc-message-utils'
+import { isKoaReqMessage } from '../utils/types-utils'
+
+const DCController = {
+  async dc_rejectDappRequest(ctx: KoaContext) {
+    const { originReq } = ctx.rpcReq?.params[0]
+    assert(isKoaReqMessage(originReq), 'originReq is not a KoaReqMessage')
+    await PopupRequestService.removeRequestById(originReq.payload.id)
+
+    // notify dapp transaction rejected
+    ctx.responses.push({
+      from: ctx.from,
+      to: originReq.from,
+      payload: constructJsonRpcResponse({
+        id: originReq.payload.id,
+        error: { code: 4001, message: 'rejected' },
+      }),
+    })
+    return ctx.pushResponse('success')
+  },
+}
+
+export default DCController
diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
index fdf91a0..d3c9005 100644
--- a/src/extension/background/controller/pub.controller.ts
+++ b/src/extension/background/controller/pub.controller.ts
@@ -1,8 +1,10 @@
 import { SignerResult } from '@polkadot/api/types'
 import { InjectedAccount, MetadataDef } from '@polkadot/extension-inject/types'
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
+import assert from 'assert'
 
 import { KoaContext } from '../koa-ts'
+import KeyringService from '../service/keyring.service'
 import WalletService from '../service/wallet.service'
 
 const PubController = {
@@ -37,8 +39,20 @@ const PubController = {
   async 'pub(rpc.listProviders)'(ctx: KoaContext) {
     return ctx.pushResponse({})
   },
-  async 'pub(extrinsic.sign)'(ctx: KoaContext<[SignerPayloadJSON]>) {
-    console.log('test', ctx.params[0])
+  async 'pub(extrinsic.sign)'(
+    ctx: KoaContext<[SignerPayloadJSON, { password: string; sender: string }]>,
+  ) {
+    console.log('test sign', ctx.params[0], ctx.params[1])
+    const payload = ctx.params[0]
+    console.log('test payload', payload)
+    const { sender, password } = ctx.params[1]
+
+    const account = await WalletService.getWalletByAddress(sender)
+    assert(account, 'Account not found')
+
+    const seed = await KeyringService.getMnemonic(password, account.keyringId)
+    assert(seed, 'Password not correct!')
+
     const result: SignerResult = {
       id: 0,
       signature: '0x23',
diff --git a/src/extension/background/controller/subscribe.controller.ts b/src/extension/background/controller/subscribe.controller.ts
new file mode 100644
index 0000000..3fe6204
--- /dev/null
+++ b/src/extension/background/controller/subscribe.controller.ts
@@ -0,0 +1,21 @@
+import assert from 'assert'
+
+import SubscriptionManager from '../app/subscription.manager'
+import type { KoaContext } from '../koa-ts'
+
+const SubscribeController = {
+  async subscribe_register(ctx: KoaContext) {
+    assert.equal(ctx.req.sess.role, 'popup', 'Not as expected role')
+    await SubscriptionManager.register(ctx)
+    return ctx.pushResponse('success')
+  },
+  async subscribe_remove(ctx: KoaContext) {
+    assert.equal(ctx.req.sess.role, 'popup', 'Not as expected role')
+    const { path } = ctx.req.rpcReq?.params[0]
+    const session = ctx.req.sess
+    SubscriptionManager.removeSub({ path, session })
+    return ctx.pushResponse('success')
+  },
+}
+
+export default SubscribeController
diff --git a/src/extension/background/router.ts b/src/extension/background/router.ts
index 8c2861b..649e4d9 100644
--- a/src/extension/background/router.ts
+++ b/src/extension/background/router.ts
@@ -1,7 +1,9 @@
 import BalanceController from './controller/balance.controller'
 import DappController from './controller/dapp.controller'
+import DCController from './controller/dc.controller'
 import ExampleController from './controller/example.controller'
 import PubController from './controller/pub.controller'
+import SubscribeController from './controller/subscribe.controller'
 import TransactionController from './controller/transaction.controller'
 import WalletController from './controller/wallet.controller'
 import { KoaContext } from './koa-ts'
@@ -13,6 +15,8 @@ const routers = {
   ...BalanceController,
   ...TransactionController,
   ...PubController,
+  ...SubscribeController,
+  ...DCController,
 }
 
 export type IRouters = keyof typeof routers
diff --git a/src/hooks/dapp.request.ts b/src/hooks/dapp.request.ts
new file mode 100644
index 0000000..6218696
--- /dev/null
+++ b/src/hooks/dapp.request.ts
@@ -0,0 +1,19 @@
+import { useModel } from 'umi'
+
+export const useDappRequestById = (reqId?: number | string) => {
+  const { dappRequests = [] } = useModel('popup-request-queue')
+  const index = dappRequests.findIndex(
+    (req) => String(req.payload.id) === String(reqId),
+  )
+  if (index >= 0) {
+    const request = dappRequests[index]
+    const method = request.payload.method
+    return {
+      index,
+      request,
+      method,
+      allRequests: dappRequests,
+      total: dappRequests.length,
+    }
+  }
+}
diff --git a/src/hooks/subscription.ts b/src/hooks/subscription.ts
new file mode 100644
index 0000000..b0498e7
--- /dev/null
+++ b/src/hooks/subscription.ts
@@ -0,0 +1,59 @@
+// subscription.ts
+import type { IJsonRpcRequest } from '@deficonnect/types'
+import { useDeepCompareEffect } from 'ahooks'
+import { useEffect, useState } from 'react'
+
+import { rpcClient } from '@/services/rpc-client'
+
+import type { KoaReqMessage } from '@/extension/background/koa-ts/lib/message'
+import { Wallet } from '@/extension/background/model/wallet.model'
+
+export const useSubscription = <T>(path: string): [T | undefined, boolean] => {
+  const [value, setValue] = useState<T | undefined>(undefined)
+  const [memoValue, setMemoValue] = useState<T | undefined>(undefined)
+  const [initialed, setInitialed] = useState<boolean>(false)
+  const [reconnect, setReconnect] = useState(Symbol())
+  useEffect(() => {
+    rpcClient.on('reconnect', () => setReconnect(Symbol()))
+  }, [])
+
+  useEffect(() => {
+    const callback = (request: IJsonRpcRequest) => {
+      if (request.params[0].path !== path) {
+        return
+      }
+      setValue(request.params[0].data)
+      setInitialed(true)
+    }
+    rpcClient.on('subscribe_update', callback)
+    rpcClient
+      .sendRequest({
+        method: 'subscribe_register',
+        params: [
+          {
+            path,
+          },
+        ],
+      })
+      .catch(() => {
+        // ignore
+        return undefined
+      })
+
+    return () => {
+      rpcClient.removeListener('subscribe_update', callback)
+    }
+  }, [path, reconnect])
+  useDeepCompareEffect(() => {
+    setMemoValue(value)
+  }, [value, reconnect])
+  return [memoValue, initialed]
+}
+
+export const useSubscribePopupRequest = () => {
+  return useSubscription<KoaReqMessage[]>('popup.uiRequestQueue')
+}
+
+export const useSubscribeWallets = () => {
+  return useSubscription<Wallet[]>('popup.wallets')
+}
diff --git a/src/models/popup-request-queue.ts b/src/models/popup-request-queue.ts
new file mode 100644
index 0000000..09d0b47
--- /dev/null
+++ b/src/models/popup-request-queue.ts
@@ -0,0 +1,50 @@
+// ui-request-queue.ts
+import { usePrevious } from 'ahooks'
+import { useCallback, useMemo, useState } from 'react'
+
+import type { KoaReqMessage } from '@/extension/background/koa-ts/lib/message'
+
+import { useSubscribePopupRequest } from '@/hooks/subscription'
+
+export default () => {
+  const [localRequests, setLocalRequests] = useState<KoaReqMessage[]>([])
+  const [dappRequests] = useSubscribePopupRequest()
+  const preDappRequests = usePrevious(dappRequests)
+  const allRequests = useMemo(() => {
+    return localRequests
+      .concat(dappRequests ?? [])
+      .sort((a, b) => a.payload.id - b.payload.id)
+  }, [localRequests, dappRequests])
+
+  const getRequestById = useCallback(
+    (id: number | string): KoaReqMessage | undefined => {
+      return allRequests.find((req) => String(req.payload.id) === String(id))
+    },
+    [allRequests],
+  )
+  const addLocalRequest = useCallback(
+    (req: KoaReqMessage) => {
+      setLocalRequests([...localRequests, req])
+    },
+    [localRequests],
+  )
+  const removeLocalRequest = useCallback(
+    (id: number | string) => {
+      const newList = localRequests.filter(
+        (req) => String(req.payload.id) !== String(id),
+      )
+      setLocalRequests(newList)
+    },
+    [localRequests],
+  )
+
+  return {
+    allRequests,
+    dappRequests,
+    preDappRequests,
+    localRequests,
+    getRequestById,
+    addLocalRequest,
+    removeLocalRequest,
+  }
+}
diff --git a/src/models/wallets.ts b/src/models/wallets.ts
new file mode 100644
index 0000000..0b401bb
--- /dev/null
+++ b/src/models/wallets.ts
@@ -0,0 +1,10 @@
+import { useSubscribeWallets } from '@/hooks/subscription'
+
+export default () => {
+  const [wallets, initialed] = useSubscribeWallets()
+
+  return {
+    wallets,
+    loading: !initialed,
+  }
+}
diff --git a/src/pages/UIRequest/components/Header/index.module.less b/src/pages/UIRequest/components/Header/index.module.less
new file mode 100644
index 0000000..959bc2f
--- /dev/null
+++ b/src/pages/UIRequest/components/Header/index.module.less
@@ -0,0 +1,65 @@
+.container {
+  display: flex;
+  flex-direction: column;
+
+  .wallet {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    background: #f1f6fd;
+
+    .name {
+      margin-left: 15px;
+      overflow: hidden;
+      color: #323c52;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 16px;
+      white-space: nowrap;
+      text-align: end;
+      text-overflow: ellipsis;
+    }
+
+    .address {
+      margin-right: 15px;
+      color: #a0a9be;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: start;
+    }
+  }
+
+  .queue {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    border-bottom: 1px solid #d9e0ea;
+
+    .left {
+      margin-left: 10px;
+      border: none;
+    }
+
+    .disable {
+      opacity: 0.5;
+    }
+
+    .center {
+      color: #000;
+      font-weight: 500;
+      font-size: 16px;
+      font-style: normal;
+      line-height: 24px;
+    }
+
+    .right {
+      margin-right: 10px;
+      border: none;
+    }
+  }
+}
diff --git a/src/pages/UIRequest/components/Header/index.tsx b/src/pages/UIRequest/components/Header/index.tsx
new file mode 100644
index 0000000..8b12146
--- /dev/null
+++ b/src/pages/UIRequest/components/Header/index.tsx
@@ -0,0 +1,83 @@
+import { Button } from 'antd'
+import { useMemo } from 'react'
+
+import { ReactComponent as ArrowLeftIcon } from '@/assets/icon-arrow-left-light.svg'
+import { ReactComponent as ArrowRightIcon } from '@/assets/icon-arrow-right-light.svg'
+
+import styles from './index.module.less'
+
+interface HeaderProp {
+  index: number
+  total: number
+  address?: string
+  name?: string
+  onLeftClick: () => void
+  onRightClick: () => void
+}
+
+export function shortHash(hash: string, prefix = 5, suffix = -5) {
+  if (prefix - suffix >= hash.length) {
+    return hash
+  }
+  return `${hash.slice(0, prefix)}...${hash.slice(suffix)}`
+}
+
+export function formatWalletAddressToShort(address: string) {
+  return shortHash(address, 8, -4)
+}
+
+const HeaderQueue: React.FC<HeaderProp> = ({
+  index,
+  total,
+  onLeftClick,
+  onRightClick,
+}) => {
+  if (total <= 1) {
+    return null
+  }
+  const disableLeft = index === 0
+  const disableRight = index === total - 1
+  return (
+    <div className={styles.queue}>
+      <Button
+        type="text"
+        className={`${styles.left} ${disableLeft ? styles.disable : ''}`}
+        icon={<ArrowLeftIcon />}
+        disabled={disableLeft}
+        onClick={onLeftClick}
+      />
+      <div className={styles.center}>
+        {index + 1} of {total} Confirmation
+      </div>
+      <Button
+        type="text"
+        className={`${styles.right} ${disableRight ? styles.disable : ''}`}
+        icon={<ArrowRightIcon />}
+        disabled={disableRight}
+        onClick={onRightClick}
+      />
+    </div>
+  )
+}
+
+const Header: React.FC<HeaderProp> = (props) => {
+  const { shortAddress } = useMemo(() => {
+    return {
+      shortAddress: formatWalletAddressToShort(props.address ?? ''),
+    }
+  }, [props.address])
+
+  return (
+    <div className={styles.container}>
+      {props.name && props.name && (
+        <div className={styles.wallet}>
+          <div className={styles.name}>{props.name}</div>
+          <div className={styles.address}>({shortAddress})</div>
+        </div>
+      )}
+      <HeaderQueue {...props} />
+    </div>
+  )
+}
+
+export default Header
diff --git a/src/pages/UIRequest/components/Transaction/index.module.less b/src/pages/UIRequest/components/Transaction/index.module.less
new file mode 100644
index 0000000..e624b13
--- /dev/null
+++ b/src/pages/UIRequest/components/Transaction/index.module.less
@@ -0,0 +1,3 @@
+.container {
+  padding: 24px;
+}
diff --git a/src/pages/UIRequest/components/Transaction/index.tsx b/src/pages/UIRequest/components/Transaction/index.tsx
new file mode 100644
index 0000000..6972fc1
--- /dev/null
+++ b/src/pages/UIRequest/components/Transaction/index.tsx
@@ -0,0 +1,166 @@
+import { ProDescriptions } from '@ant-design/pro-components'
+import { IJsonRpcRequest } from '@deficonnect/types'
+import { formatNumber, hexToNumber } from '@polkadot/util'
+import { Button, Col, Form, Input, message, Row } from 'antd'
+import { useState } from 'react'
+
+import { rpcClient } from '@/services/rpc-client'
+
+import type { KoaReqMessage } from '@/extension/background/koa-ts'
+import { IRouters } from '@/extension/background/router'
+
+import styles from './index.module.less'
+
+interface FormFields {
+  password: string
+}
+
+export const rejectDappRequest = async (params: {
+  originReq: KoaReqMessage
+}) => {
+  return rpcClient.sendRequest({
+    method: 'dc_rejectDappRequest',
+    params: [params],
+  })
+}
+
+export const approveDappRequest = (params: {
+  originRpc: IJsonRpcRequest
+  params?: Record<string, any>
+}) => {
+  return rpcClient.sendRequest({
+    id: params.originRpc.id,
+    method: params.originRpc.method as IRouters,
+    params: [...params.originRpc.params, params.params],
+  })
+}
+
+const Transaction: React.FC<{ request: KoaReqMessage; sender?: string }> = ({
+  request,
+  sender,
+}) => {
+  const [btnLoading, setBtnLoading] = useState<boolean>(false)
+  const [form] = Form.useForm<FormFields>()
+
+  const handleCancel = async () => {
+    await rejectDappRequest({ originReq: request })
+  }
+
+  const onConfirm = async (values: FormFields) => {
+    setBtnLoading(true)
+    const { password } = values
+    try {
+      if (!request) {
+        throw new Error('request can not be null')
+      }
+      const txId = await approveDappRequest({
+        originRpc: request.payload,
+        params: {
+          password: password,
+          sender: sender,
+        },
+      })
+      console.log('test txId', txId)
+    } catch (error: any) {
+      if (error?.message) {
+        message.error(error?.message)
+      }
+    } finally {
+      setBtnLoading(false)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <ProDescriptions>
+        <ProDescriptions.Item span={2} valueType="text" label="from">
+          {request.from}
+        </ProDescriptions.Item>
+        <ProDescriptions.Item
+          span={2}
+          valueType="text"
+          contentStyle={{
+            maxWidth: '70%',
+          }}
+          ellipsis
+          label="genesis"
+        >
+          {request.payload.params?.[0]?.genesisHash}
+        </ProDescriptions.Item>
+        <ProDescriptions.Item span={2} valueType="text" label="version">
+          {hexToNumber(request.payload.params?.[0]?.specVersion)}
+        </ProDescriptions.Item>
+        <ProDescriptions.Item span={2} valueType="text" label="nonce">
+          {hexToNumber(request.payload.params?.[0]?.nonce)}
+        </ProDescriptions.Item>
+        <ProDescriptions.Item
+          span={2}
+          valueType="text"
+          contentStyle={{
+            maxWidth: '60%',
+          }}
+          ellipsis
+          label="method data"
+        >
+          {request.payload.params?.[0]?.method}
+        </ProDescriptions.Item>
+        <ProDescriptions.Item
+          span={2}
+          valueType="text"
+          contentStyle={{
+            maxWidth: '60%',
+          }}
+          ellipsis
+          label="lifetime"
+        >
+          mortal, valid from{' '}
+          {formatNumber(hexToNumber(request.payload.params?.[0]?.blockNumber))}
+        </ProDescriptions.Item>
+      </ProDescriptions>
+
+      <Form
+        form={form}
+        name="basic"
+        labelCol={{ span: 24 }}
+        wrapperCol={{ span: 24 }}
+        style={{ width: '100%' }}
+        onFinish={onConfirm}
+        autoCorrect="off"
+        autoComplete="off"
+        layout="vertical"
+      >
+        <Form.Item
+          label="PASSWORD FOR THIS ACCOUNT"
+          name="password"
+          rules={[
+            { required: true, message: 'Please input your password!' },
+            { min: 6, message: 'At least 6 characters' },
+          ]}
+        >
+          <Input.Password placeholder="A new password for this account" />
+        </Form.Item>
+        <Row>
+          <Col>
+            <Button type="link" onClick={handleCancel} danger>
+              Cancel
+            </Button>
+          </Col>
+          <Col flex="auto">
+            <Form.Item>
+              <Button
+                htmlType="submit"
+                loading={btnLoading}
+                type="primary"
+                style={{ width: '100%' }}
+              >
+                Confirm
+              </Button>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </div>
+  )
+}
+
+export default Transaction
diff --git a/src/pages/UIRequest/index.module.less b/src/pages/UIRequest/index.module.less
new file mode 100644
index 0000000..e99a397
--- /dev/null
+++ b/src/pages/UIRequest/index.module.less
@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.spin-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/pages/UIRequest/index.tsx b/src/pages/UIRequest/index.tsx
new file mode 100644
index 0000000..6ab45f7
--- /dev/null
+++ b/src/pages/UIRequest/index.tsx
@@ -0,0 +1,93 @@
+import { useLocation } from '@umijs/max'
+import { useDebounceEffect } from 'ahooks'
+import { Spin } from 'antd'
+import { useCallback, useEffect, useMemo } from 'react'
+import { useParams, history, useModel } from 'umi'
+
+import { closePopupOrRedirectToHome } from '@/utils/tools/popup-redirect'
+
+import { useDappRequestById } from '@/hooks/dapp.request'
+
+import Header from './components/Header'
+import Transaction from './components/Transaction'
+import styles from './index.module.less'
+
+const UIRequest: React.FC = () => {
+  const location = useLocation()
+  const { reqId } = useParams<{ reqId: string }>()
+  const { index = 0, total = 0, request } = useDappRequestById(reqId) ?? {}
+  const { dappRequests = [], preDappRequests = [] } = useModel(
+    'popup-request-queue',
+  )
+  const { wallets = [] } = useModel('wallets')
+
+  useDebounceEffect(
+    () => {
+      if (request) {
+        return
+      }
+      const latestReq = dappRequests.slice(-1).pop()
+      if (latestReq) {
+        history.replace(`/ui-request/${latestReq.payload.id}`)
+      } else {
+        closePopupOrRedirectToHome(location.state as any)
+      }
+    },
+    [request, dappRequests],
+    {
+      wait: 200,
+    },
+  )
+  useEffect(() => {
+    if (
+      dappRequests.length > preDappRequests.length &&
+      preDappRequests.length > 0
+    ) {
+      const latestReq = dappRequests.slice(-1).pop()
+      if (latestReq) {
+        history.replace(`/ui-request/${latestReq.payload.id}`)
+      }
+    }
+  }, [preDappRequests, dappRequests])
+  const onLeftClick = useCallback(() => {
+    const newRequest = dappRequests[index - 1]
+    if (newRequest) {
+      history.replace(`/ui-request/${newRequest.payload.id}`)
+    }
+  }, [index, dappRequests])
+  const onRightClick = useCallback(() => {
+    const newRequest = dappRequests[index + 1]
+    if (newRequest) {
+      history.replace(`/ui-request/${newRequest.payload.id}`)
+    }
+  }, [index, dappRequests])
+
+  const currentWallet = useMemo(() => {
+    if (wallets && request) {
+      const w = wallets.find(
+        (w) => w.address === request.payload.params[0]?.address,
+      )
+      return w
+    }
+  }, [wallets, request])
+
+  if (!request) {
+    return <Spin className={styles['spin-center']} />
+  }
+
+  return (
+    <div className={styles.container}>
+      <Header
+        index={index}
+        total={total}
+        onLeftClick={onLeftClick}
+        onRightClick={onRightClick}
+        address={currentWallet?.address}
+        name={currentWallet?.name}
+      />
+      <Transaction request={request} sender={currentWallet?.address} />
+    </div>
+  )
+}
+
+export default UIRequest
diff --git a/src/pages/Wrappers/ui-request.tsx b/src/pages/Wrappers/ui-request.tsx
new file mode 100644
index 0000000..605502c
--- /dev/null
+++ b/src/pages/Wrappers/ui-request.tsx
@@ -0,0 +1,19 @@
+import { Navigate, Outlet, useModel, useLocation } from '@umijs/max'
+
+export default () => {
+  const { dappRequests = [] } = useModel('popup-request-queue')
+  const location = useLocation()
+
+  const latestReq = dappRequests?.slice(-1).pop()
+  let toPath = undefined
+  if (latestReq) {
+    toPath = `/ui-request/${latestReq.payload.id}`
+  }
+
+  const localPath = location.pathname ?? ''
+  const isCurrentInUIRequest = localPath.startsWith('/ui-request')
+  if (toPath && !isCurrentInUIRequest) {
+    return <Navigate to={{ pathname: toPath }} state={{ referrer: location }} />
+  }
+  return <Outlet />
+}
diff --git a/src/utils/tools/popup-redirect.ts b/src/utils/tools/popup-redirect.ts
new file mode 100644
index 0000000..a8c3bfe
--- /dev/null
+++ b/src/utils/tools/popup-redirect.ts
@@ -0,0 +1,19 @@
+import { history } from 'umi'
+
+import { ChromeExtension } from '@/extension/background/utils/extension-tools/chrome-extension'
+
+export const closePopupOrRedirectToHome = async (state?: {
+  referrer: string
+}) => {
+  const isPopup = await ChromeExtension.checkIsPopup()
+
+  if (isPopup) {
+    window.close()
+  } else {
+    if (state?.referrer) {
+      history.replace(state.referrer)
+    } else {
+      history.push('/home')
+    }
+  }
+}

From 1b86e25d79770aec0e776f90f3bc483b8fc0caae Mon Sep 17 00:00:00 2001
From: tkvern <verncake@gmail.com>
Date: Tue, 14 Feb 2023 18:28:20 +0800
Subject: [PATCH 20/24] feat: finished sign transaction logic

---
 .../background/controller/pub.controller.ts   | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
index d3c9005..ea54829 100644
--- a/src/extension/background/controller/pub.controller.ts
+++ b/src/extension/background/controller/pub.controller.ts
@@ -1,10 +1,15 @@
+import { ApiPromise } from '@polkadot/api'
 import { SignerResult } from '@polkadot/api/types'
 import { InjectedAccount, MetadataDef } from '@polkadot/extension-inject/types'
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
+import keyring from '@polkadot/ui-keyring'
+import { u8aToHex } from '@polkadot/util'
 import assert from 'assert'
 
+import { wsProvider } from '../bootstrap'
 import { KoaContext } from '../koa-ts'
 import KeyringService from '../service/keyring.service'
+import PopupRequestService from '../service/popup.request.service'
 import WalletService from '../service/wallet.service'
 
 const PubController = {
@@ -42,9 +47,7 @@ const PubController = {
   async 'pub(extrinsic.sign)'(
     ctx: KoaContext<[SignerPayloadJSON, { password: string; sender: string }]>,
   ) {
-    console.log('test sign', ctx.params[0], ctx.params[1])
     const payload = ctx.params[0]
-    console.log('test payload', payload)
     const { sender, password } = ctx.params[1]
 
     const account = await WalletService.getWalletByAddress(sender)
@@ -53,10 +56,25 @@ const PubController = {
     const seed = await KeyringService.getMnemonic(password, account.keyringId)
     assert(seed, 'Password not correct!')
 
+    const api = await ApiPromise.create({ provider: wsProvider })
+
+    const txPayload = api.createType('ExtrinsicPayload', payload, {
+      version: payload.version,
+    })
+
+    const txU8a = txPayload.toU8a()
+
+    const pair = keyring.createFromUri(seed)
+    const signature = pair.sign(txU8a, { withType: true })
+    const sigHex = u8aToHex(signature)
+
     const result: SignerResult = {
-      id: 0,
-      signature: '0x23',
+      id: ctx.id,
+      signature: sigHex,
     }
+
+    await PopupRequestService.tryAddResponseToDapp(ctx, { result })
+
     return ctx.pushResponse(result)
   },
   async 'pub(bytes.sign)'(ctx: KoaContext<[SignerPayloadRaw]>) {

From 26f1aa4dea79853685cbc7a66130d26dc5550fa9 Mon Sep 17 00:00:00 2001
From: tkvern <verncake@gmail.com>
Date: Tue, 14 Feb 2023 18:38:22 +0800
Subject: [PATCH 21/24] chore: remove DS_Store

---
 src/extension/.DS_Store            | Bin 6148 -> 0 bytes
 src/extension/background/.DS_Store | Bin 6148 -> 0 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/extension/.DS_Store
 delete mode 100644 src/extension/background/.DS_Store

diff --git a/src/extension/.DS_Store b/src/extension/.DS_Store
deleted file mode 100644
index 4ec11c6f32572c74df9170c091cd6ef4d07be7c4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK%}T>S5T0$TO)NqW3OxqA7Hq5dgO^b23mDOZN=;0up)p(9#vDo^XMG``#OHBl
zcPp0a!HbBUf!S|%ezNSBu#*J<(N4oAKotNiRKkLd!xutv(j_Sv51~-c=)(vkq>w<k
zl+BL6$N;^&4G6%8dl<l{_ZMX2VGzpz<FCOmj>eNl<4qKbrM304RkkYDt@j`^Z{knV
zaoZnV)9gaZIGEdha2fToZguNaCKEqOdLva3g*{BUxr&ldW^I`!;aJsrI$+tB-L2N9
z)8<j5?z9e@v$``qZlS%ucQBjT*7nZs$$57WKPK{76DsiAQ?hAr4lihYxwj{8l*BUW
zV|-pauVG{cm;q*B6&NsQpH*3f&GH_Z0cPMw4AA-Dpc1+UbB*fgz=3`rDPAHZL7VOp
zgpNViV6G7(C_<Ma>QZ5@7($n$-!XZv!Ca#*2ccHR=a`j+xuFQPI{F=z4#L&QBQwAZ
zEHY5k(<=4<v+wW!i$y$R2AF|=#egVvyiOapWP0n;=BU>?sCTF&l$UG#C_zKDV$7vh
dTtiiYeuoT1*I=#@Jt+JmplINM8TeHO-T{^<O~e2I

diff --git a/src/extension/background/.DS_Store b/src/extension/background/.DS_Store
deleted file mode 100644
index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I


From ff6b14a496ec0fd72d72ade0276f8bd13fc91d48 Mon Sep 17 00:00:00 2001
From: tkvern <verncake@gmail.com>
Date: Wed, 15 Feb 2023 15:12:20 +0800
Subject: [PATCH 22/24] feat: finished sign transaction

---
 src/extension/background/bootstrap.ts         |  2 +-
 .../background/controller/pub.controller.ts   | 25 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/extension/background/bootstrap.ts b/src/extension/background/bootstrap.ts
index 877719d..b48a3f6 100644
--- a/src/extension/background/bootstrap.ts
+++ b/src/extension/background/bootstrap.ts
@@ -42,7 +42,7 @@ export const server = createServer({
         console.log('crypto initialized')
 
         // load all the keyring data// load all the keyring data
-        keyring.loadAll({ ss58Format: 78, type: 'sr25519' })
+        keyring.loadAll({ type: 'sr25519', ss58Format: 78 })
 
         console.log('initialization completed')
       })
diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
index ea54829..4941417 100644
--- a/src/extension/background/controller/pub.controller.ts
+++ b/src/extension/background/controller/pub.controller.ts
@@ -1,9 +1,8 @@
 import { ApiPromise } from '@polkadot/api'
+import { Keyring } from '@polkadot/api'
 import { SignerResult } from '@polkadot/api/types'
 import { InjectedAccount, MetadataDef } from '@polkadot/extension-inject/types'
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
-import keyring from '@polkadot/ui-keyring'
-import { u8aToHex } from '@polkadot/util'
 import assert from 'assert'
 
 import { wsProvider } from '../bootstrap'
@@ -48,29 +47,27 @@ const PubController = {
     ctx: KoaContext<[SignerPayloadJSON, { password: string; sender: string }]>,
   ) {
     const payload = ctx.params[0]
-    const { sender, password } = ctx.params[1]
+    const { password } = ctx.params[1]
 
-    const account = await WalletService.getWalletByAddress(sender)
+    const account = await WalletService.getWalletByAddress(payload.address)
     assert(account, 'Account not found')
 
     const seed = await KeyringService.getMnemonic(password, account.keyringId)
     assert(seed, 'Password not correct!')
 
-    const api = await ApiPromise.create({ provider: wsProvider })
-
-    const txPayload = api.createType('ExtrinsicPayload', payload, {
-      version: payload.version,
-    })
-
-    const txU8a = txPayload.toU8a()
+    const api = await ApiPromise.create({ provider: wsProvider }) // const txU8a = txPayload.toU8a()
 
+    const keyring = new Keyring({ type: 'sr25519' })
     const pair = keyring.createFromUri(seed)
-    const signature = pair.sign(txU8a, { withType: true })
-    const sigHex = u8aToHex(signature)
+    const signed = await api.registry
+      .createType('ExtrinsicPayload', payload, {
+        version: payload.version,
+      })
+      .sign(pair)
 
     const result: SignerResult = {
       id: ctx.id,
-      signature: sigHex,
+      signature: signed.signature,
     }
 
     await PopupRequestService.tryAddResponseToDapp(ctx, { result })

From 40d41d714ae83cf3c960f148c5c20606b32710fb Mon Sep 17 00:00:00 2001
From: tkvern <verncake@gmail.com>
Date: Wed, 15 Feb 2023 15:58:13 +0800
Subject: [PATCH 23/24] chore: prettier code style

---
 .../background/controller/pub.controller.ts   | 14 ++-----------
 .../background/service/polkadot.service.ts    | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 src/extension/background/service/polkadot.service.ts

diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
index 4941417..9d40d7e 100644
--- a/src/extension/background/controller/pub.controller.ts
+++ b/src/extension/background/controller/pub.controller.ts
@@ -1,13 +1,11 @@
-import { ApiPromise } from '@polkadot/api'
-import { Keyring } from '@polkadot/api'
 import { SignerResult } from '@polkadot/api/types'
 import { InjectedAccount, MetadataDef } from '@polkadot/extension-inject/types'
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types'
 import assert from 'assert'
 
-import { wsProvider } from '../bootstrap'
 import { KoaContext } from '../koa-ts'
 import KeyringService from '../service/keyring.service'
+import PolkadotService from '../service/polkadot.service'
 import PopupRequestService from '../service/popup.request.service'
 import WalletService from '../service/wallet.service'
 
@@ -55,15 +53,7 @@ const PubController = {
     const seed = await KeyringService.getMnemonic(password, account.keyringId)
     assert(seed, 'Password not correct!')
 
-    const api = await ApiPromise.create({ provider: wsProvider }) // const txU8a = txPayload.toU8a()
-
-    const keyring = new Keyring({ type: 'sr25519' })
-    const pair = keyring.createFromUri(seed)
-    const signed = await api.registry
-      .createType('ExtrinsicPayload', payload, {
-        version: payload.version,
-      })
-      .sign(pair)
+    const signed = await PolkadotService.signPayload(payload, seed)
 
     const result: SignerResult = {
       id: ctx.id,
diff --git a/src/extension/background/service/polkadot.service.ts b/src/extension/background/service/polkadot.service.ts
new file mode 100644
index 0000000..c72405c
--- /dev/null
+++ b/src/extension/background/service/polkadot.service.ts
@@ -0,0 +1,20 @@
+import { ApiPromise } from '@polkadot/api'
+import { Keyring } from '@polkadot/api'
+import type { SignerPayloadJSON } from '@polkadot/types/types'
+
+import { wsProvider } from '../bootstrap'
+
+const PolkadotService = {
+  async signPayload(payload: SignerPayloadJSON, seed: string) {
+    const api = await ApiPromise.create({ provider: wsProvider }) // const txU8a = txPayload.toU8a()
+    const keyring = new Keyring({ type: 'sr25519' })
+    const pair = keyring.createFromUri(seed)
+    return api.registry
+      .createType('ExtrinsicPayload', payload, {
+        version: payload.version,
+      })
+      .sign(pair)
+  },
+}
+
+export default PolkadotService

From 160dec30206928eb05eea56403e68c7ad0b7ecdb Mon Sep 17 00:00:00 2001
From: Vern Zhang <verncake@gmail.com>
Date: Fri, 24 Feb 2023 09:19:38 +0800
Subject: [PATCH 24/24] feat: subscrip for dApp

---
 .../background/app/subscription.manager.ts    | 16 ++++++++
 .../background/controller/pub.controller.ts   | 17 ++++++++-
 .../controller/subscribe.controller.ts        |  4 --
 src/extension/common/constants.ts             |  2 +
 src/extension/content/inpage-content.ts       |  4 +-
 .../content/polkadot-provider/accounts.ts     | 37 ++++++++++++++-----
 6 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/extension/background/app/subscription.manager.ts b/src/extension/background/app/subscription.manager.ts
index a45c8e7..277fa9c 100644
--- a/src/extension/background/app/subscription.manager.ts
+++ b/src/extension/background/app/subscription.manager.ts
@@ -1,3 +1,4 @@
+import { InjectedAccount } from '@polkadot/extension-inject/types'
 import assert from 'assert'
 
 import type { KoaContext, Session } from '../koa-ts'
@@ -22,6 +23,21 @@ const Subscriptions: Record<string, ISubscription<unknown>> = {
       return WalletService.queryAllAccount()
     },
   },
+  'pub(accounts.subscribe)': {
+    data: async function () {
+      const accounts = await WalletService.queryAllAccount()
+      const result: InjectedAccount[] = accounts.map((account) => {
+        return {
+          address: account.address,
+          name: account.name,
+          genesisHash:
+            '0x2ae061f08422b6503b8aa5f401242a209999669c3b8945f814dc096fb1a977bd',
+          type: 'sr25519',
+        }
+      })
+      return result
+    },
+  },
 }
 
 export type ISubscriptions = keyof typeof Subscriptions
diff --git a/src/extension/background/controller/pub.controller.ts b/src/extension/background/controller/pub.controller.ts
index 9d40d7e..6304a55 100644
--- a/src/extension/background/controller/pub.controller.ts
+++ b/src/extension/background/controller/pub.controller.ts
@@ -73,12 +73,27 @@ const PubController = {
     return ctx.pushResponse(result)
   },
   async 'pub(authorize.tab)'(ctx: KoaContext<[{ origin: string }]>) {
-    console.log('test', ctx.params[0])
     return ctx.pushResponse({
       authorizedAccounts: [],
       result: false,
     })
   },
+
+  async 'pub(accounts.subscribe)'(ctx: KoaContext) {
+    const accounts = await WalletService.queryAllAccount()
+
+    const result: InjectedAccount[] = accounts.map((account) => {
+      return {
+        address: account.address,
+        name: account.name,
+        genesisHash:
+          '0x2ae061f08422b6503b8aa5f401242a209999669c3b8945f814dc096fb1a977bd',
+        type: 'sr25519',
+      }
+    })
+
+    return ctx.pushResponse(result)
+  },
 }
 
 export default PubController
diff --git a/src/extension/background/controller/subscribe.controller.ts b/src/extension/background/controller/subscribe.controller.ts
index 3fe6204..b085142 100644
--- a/src/extension/background/controller/subscribe.controller.ts
+++ b/src/extension/background/controller/subscribe.controller.ts
@@ -1,16 +1,12 @@
-import assert from 'assert'
-
 import SubscriptionManager from '../app/subscription.manager'
 import type { KoaContext } from '../koa-ts'
 
 const SubscribeController = {
   async subscribe_register(ctx: KoaContext) {
-    assert.equal(ctx.req.sess.role, 'popup', 'Not as expected role')
     await SubscriptionManager.register(ctx)
     return ctx.pushResponse('success')
   },
   async subscribe_remove(ctx: KoaContext) {
-    assert.equal(ctx.req.sess.role, 'popup', 'Not as expected role')
     const { path } = ctx.req.rpcReq?.params[0]
     const session = ctx.req.sess
     SubscriptionManager.removeSub({ path, session })
diff --git a/src/extension/common/constants.ts b/src/extension/common/constants.ts
index 6359cc3..1ec1ee1 100644
--- a/src/extension/common/constants.ts
+++ b/src/extension/common/constants.ts
@@ -39,6 +39,8 @@ export const dappAutoPopupMethods = [
 export const dappAllowMethods = [
   ...dappAutoPopupMethods,
   ...aptosAutoPopupMethos,
+  'subscribe_register',
+  'subscribe_remove',
   'dapp_ping',
   'dc_sessionRequest',
   'dc_sessionUpdate',
diff --git a/src/extension/content/inpage-content.ts b/src/extension/content/inpage-content.ts
index 89de64f..c08b65f 100644
--- a/src/extension/content/inpage-content.ts
+++ b/src/extension/content/inpage-content.ts
@@ -9,7 +9,7 @@ declare global {
     deficonnectProvider?: Provider
     deficonnect: { ethereum?: Provider }
     injectedWeb3: {
-      'crypto-js': {
+      'polkadot-js': {
         version: string
         enable: (originName: string) => Promise<Injected>
       }
@@ -39,7 +39,7 @@ export async function enable(origin: string): Promise<Injected> {
 window.injectedWeb3 = {
   // this is the name for this extension, there could be multiples injected,
   // each with their own keys, here `polkadot-js` is for this extension
-  'crypto-js': {
+  'polkadot-js': {
     // semver for the package
     version: '0.1.0',
 
diff --git a/src/extension/content/polkadot-provider/accounts.ts b/src/extension/content/polkadot-provider/accounts.ts
index e8805af..32e7df5 100644
--- a/src/extension/content/polkadot-provider/accounts.ts
+++ b/src/extension/content/polkadot-provider/accounts.ts
@@ -1,5 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
+import { IJsonRpcRequest } from '@deficonnect/types'
 import type {
   InjectedAccount,
   InjectedAccounts,
@@ -23,15 +24,33 @@ export default class Accounts implements InjectedAccounts {
     })
   }
 
-  public subscribe(): Unsubcall {
-    // let id: string | null = null
+  public subscribe(cb: (accounts: InjectedAccount[]) => unknown): Unsubcall {
+    // let id: string | null = null;
+    console.log('test bb')
+    const callback = (request: IJsonRpcRequest) => {
+      console.log('test aa')
+      if (request.params[0].path !== 'pub(accounts.subscribe)') {
+        return
+      }
+      cb(request.params[0].data)
+    }
+    rpcClient.on('subscribe_update', callback)
+    rpcClient
+      .sendRequest({
+        method: 'subscribe_register',
+        params: [
+          {
+            path: 'pub(accounts.subscribe)',
+          },
+        ],
+      })
+      .catch(() => {
+        // ignore
+        return undefined
+      })
 
-    // sendRequest('pub(accounts.subscribe)', null, cb)
-    //   .then((subId): void => {
-    //     id = subId
-    //   })
-    //   .catch(console.error)
-
-    return (): void => {}
+    return (): void => {
+      rpcClient.removeListener('subscribe_update', cb)
+    }
   }
 }