chore: changes for version 1.4.7

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## Manifest Version 1.4.7
+
+- added network(Rootstock Network) template from @ahsan-javaiid
+- updated all deps
+- tweaked the local memory cache
+- switched to bun packet manager
+- added a small demo video of the latest version in repo
+- UI changes
+- Sign Tx And Sign message now show selected account in the header
+
 ## Manifest Version 1.4.6
 
 - added support for 24 words seed phrases besides 12 words

CI/index.ts

@@ -104,13 +104,14 @@ const main = async () => {
             const commiter = GithubEvent?.head_commit?.author.username || GithubEvent?.head_commit?.committer?.username || ''
             const message = `Github ClearWallet new repo commit!\n
 - ChromeStore: https://bit.ly/clw-evm \n
+- Docs: https://clear-wallet.flashsoft.eu \n
 - Commit: ${GithubEvent.head_commit.url} \n
 ${commiter ? `- Commiter: @${commiter}` : ''}
             `;
 
             await yupAPI.sendPost({
                 content: message,
-                platforms: ['twitter', 'threads', 'bsky', 'lens']
+                platforms: ['twitter', 'threads', 'bsky', 'lens', 'mastodon']
             })
 
             await fchubUtils.createFarcasterPost({

CI/package.json

@@ -6,11 +6,11 @@
     "@types/bun": "latest"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.5.3"
   },
   "dependencies": {
-    "farcaster-hub-utils": "^0.1.8",
+    "farcaster-hub-utils": "0.1.8",
-    "yup-api-interact": "^0.1.6"
+    "yup-api-interact": "0.1.7"
   },
   "license": "MIT"
 }

README.md

@@ -20,6 +20,10 @@ For more info you can check [docs website](https://clear-wallet.flashsoft.eu)
 
 [Article on Mirror](https://mirror.xyz/andrei0x309.eth/9nc8UXrGIGOvz694ZY2gouS1JM9L8-Z8ITLNtirqD6Q)
 
+### Latest Demo Clip
+
+https://github.com/user-attachments/assets/4f7d267a-7410-43cf-b3bd-0256f1ccc954
+
 ### FAQ
 
 Q: Why use Ionic?
@@ -42,7 +46,7 @@ A:  - It assumes that the user has some knowledge about the EVM ecosystem. It do
 
 Q: Is this ready to use?
 
-A: Should work on most modern websites as a Metamask replacement. Currently is pretty stable. It has a nice set of features that I needed. 
+A: Should work on most modern websites as a Metamask replacement. Currently is pretty stable. It has a nice set of features that I needed.
 I developed this pretty fast in my free time, and you should always back-up your keys( since I've seen even well-known wallets sometimes render keys inaccessible). This wallet only handles the keys and personal data locally for maximum privacy and trust.
 
 Q: Will this project be heavily maintained?

package.json

@@ -8,47 +8,47 @@
     "dev": "vite",
     "inject": "tsc --downlevelIteration --outFile src/extension/inject.js src/extension/inject.ts",
     "content": "tsc --outFile src/extension/content.js src/extension/content.ts",
-    "post-build": "yarn tsx ./release-scripts/post-build.ts",
+    "post-build": "bun run ./release-scripts/post-build.ts",
-    "build": "yarn inject && yarn content && vue-tsc --noEmit && vite build && yarn post-build",
+    "build": "bun run inject && bun run content && vue-tsc --noEmit && vite build && bun run post-build",
-    "rebuild": "yarn build && yarn tsx ./release-scripts/create-release.ts rebuild",
+    "rebuild": "bun run build && bun run ./release-scripts/create-release.ts rebuild",
     "preview": "vite preview",
-    "release": "yarn config set version-tag-prefix clear-wallet@v &&  yarn config set version-git-message 'clear-wallet@v%s' && yarn version --patch && yarn postversion",
+    "release": "bun run ./release-scripts/version-release.ts",
     "postversion": "git push",
-    "pub": "yarn build && yarn release && yarn tsx ./release-scripts/create-release.ts"
+    "pub": "bun run build && yarn bun run release && bun run ./release-scripts/create-release.ts"
   },
   "dependencies": {
-    "@ionic/vue": "^8.2.6",
+    "@ionic/vue": "^8.3.2",
-    "@ionic/vue-router": "^8.2.6",
+    "@ionic/vue-router": "^8.3.2",
-    "core-js": "^3.38.0",
+    "core-js": "^3.38.1",
-    "ethers": "^6.13.2",
+    "ethers": "^6.13.4",
     "qr-scanner": "^1.4.2",
-    "vue": "^3.4.37",
+    "vue": "^3.5.12",
-    "vue-router": "^4.4.3"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@types/archiver": "^6.0.2",
     "@types/chrome": "^0.0.269",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.7.5",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/parser": "^8.8.1",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-typescript": "^13.0.0",
     "archiver": "^7.0.1",
-    "eslint": "^9.9.0",
+    "eslint": "^9.12.0",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.29.0",
     "http-browserify": "^1.7.0",
     "https-browserify": "^1.0.0",
     "jest": "^29.7.0",
-    "sass": "^1.77.8",
+    "sass": "^1.79.5",
     "stream-browserify": "^3.0.0",
-    "ts-jest": "^29.2.4",
+    "ts-jest": "^29.2.5",
-    "tsx": "^4.17.0",
+    "tsx": "^4.19.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.3",
     "util": "^0.12.5",
-    "vite": "^5.4.0",
+    "vite": "^5.4.8",
-    "vue-tsc": "^2.0.29",
+    "vue-tsc": "^2.1.6",
     "yarn-upgrade-all": "^0.7.4"
   },
   "disabledNativeDependencies": {

release-scripts/version-release.ts

@@ -0,0 +1,30 @@
+import { execSync } from 'child_process';
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+
+async function main() {
+  // 1. Bump version in package.json
+  const packageJsonPath = resolve('./package.json');
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+  const currentVersion = packageJson.version;
+  const newVersion = bumpVersion(currentVersion);
+  packageJson.version = newVersion;
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+  // 3. Commit changes
+  execSync(`git add .`);
+  execSync(`git commit -m "Release v${newVersion}"`);
+
+  // 4. Create and push tag
+  execSync(`git tag v${newVersion}`);
+  execSync(`git push --follow-tags`);
+
+}
+
+function bumpVersion(version: string): string {
+  const parts = version.split('.');
+  parts[2] = String(parseInt(parts[2]) + 1);
+  return parts.join('.');
+}
+
+main();

src/extension/inject.ts

@@ -15,7 +15,7 @@ const ProviderInfo: EIP6963ProviderInfo = {
     uuid: '1fa914a1-f8c9-4c74-8d84-4aa93dc90eec',
     name: 'Clear Wallet',
     icon: 'data:image/png;base64,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',
-    rdns: 'clear-wallet.flashsoft.eu/',
+    rdns: 'eu.flashsoft.clear-wallet',
 }
 
 const MAX_PROMISES = 50

src/extension/manifest.json

@@ -3,8 +3,8 @@
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "1.4.6",
+    "version": "1.4.7",
-    "version_name": "1.4.6",
+    "version_name": "1.4.7",
     "icons": {
       "16": "assets/extension-icon/wallet_16.png",
       "32": "assets/extension-icon/wallet_32.png",

src/extension/serviceWorker.ts

@@ -376,7 +376,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                     try {
                         const hash = cyrb64Hash('eth_getBalance' + JSON.stringify(message?.params))
                         const cacheItem = cache.get(hash)
-                        if (cacheItem &&  cacheItem?.time > Date.now() - 5e3) {
+                        if (cacheItem &&  cacheItem?.time > Date.now() - 5e2) {
                             sendResponse(cacheItem?.data);
                             break
                         }
@@ -419,7 +419,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                     try {
                         const hash = cyrb64Hash('eth_blockNumber' + JSON.stringify(message?.params))
                         const cacheItem = cache.get(hash)
-                        if (cacheItem &&  cacheItem?.time > Date.now() - 5e3) {
+                        if (cacheItem &&  cacheItem?.time > Date.now() - 3e3) {
                             sendResponse(cacheItem?.data);
                             break
                         }
@@ -449,7 +449,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                         }
                         const hash = cyrb64Hash('eth_estimateGas' + JSON.stringify(message?.params))
                         const cacheItem = cache.get(hash)
-                        if (cacheItem &&  cacheItem?.time > Date.now() - 3e3) {
+                        if (cacheItem &&  cacheItem?.time > Date.now() - 5e2) {
                             sendResponse(cacheItem?.data);
                             break
                         }
@@ -492,7 +492,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                     try {
                         const hash = cyrb64Hash('eth_accounts' + JSON.stringify(message?.params))
                         const cacheItem = cache.get(hash)
-                        if (cacheItem &&  cacheItem?.time > Date.now() - 3e3) {
+                        if (cacheItem &&  cacheItem?.time > Date.now() - 5e2) {
                             sendResponse(cacheItem?.data);
                             break
                         }
@@ -515,7 +515,7 @@ const mainListner = (message: RequestArguments, sender: any, sendResponse: (a: a
                         try {
                             const hash = cyrb64Hash('eth_chainId' + JSON.stringify(message?.params))
                             const cacheItem = cache.get(hash)
-                            if (cacheItem &&  cacheItem?.time > Date.now() - 5e3) {
+                            if (cacheItem &&  cacheItem?.time > Date.now() - 1e3) {
                                 sendResponse(cacheItem?.data);
                                 break
                             }

src/theme/variables.css

@@ -10,7 +10,7 @@ http://ionicframework.com/docs/theming/ */
    */
 
    body:not(.light) {
-    --ion-color-primary: #6a64ff;
+    --ion-color-primary: #645285;
     --ion-color-primary-rgb: 106, 100, 255;
     --ion-color-primary-contrast: #ffffff;
     --ion-color-primary-contrast-rgb: 255, 255, 255;
@@ -72,6 +72,8 @@ http://ionicframework.com/docs/theming/ */
     --ion-color-light-contrast-rgb: 255,255,255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
+
+    scrollbar-color: #161616 #383a3e;
   }
 
   /*
@@ -80,35 +82,34 @@ http://ionicframework.com/docs/theming/ */
    */
 
   .ios body:not(.light) {
-    --ion-background-color: #000000;
+    --ion-background-color: #161616;
-    --ion-background-color-rgb: 0,0,0;
+    --ion-background-color-rgb: 18, 18, 18;
-
     --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
+    --ion-text-color-rgb: 255, 255, 255;
-
+    --ion-border-color: #222222;
-    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #262626;
+    --ion-color-step-150: #363636;
-    --ion-color-step-200: #333333;
+    --ion-color-step-200: #414141;
-    --ion-color-step-250: #404040;
+    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-300: #595959;
-    --ion-color-step-350: #595959;
+    --ion-color-step-350: #656565;
-    --ion-color-step-400: #666666;
+    --ion-color-step-400: #717171;
-    --ion-color-step-450: #737373;
+    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #808080;
+    --ion-color-step-500: #898989;
-    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-550: #949494;
-    --ion-color-step-600: #999999;
+    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #cccccc;
+    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f2f2f2;
+    --ion-color-step-950: #f3f3f3;
-
+    --ion-item-background: #161616;
-    --ion-item-background: #000000;
+    --ion-toolbar-background: #161616;
-
+    --ion-tab-bar-background: #161616;
-    --ion-card-background: #1c1c1d;
+    --ion-card-background: #161616;
   }
 
   .ios ion-modal {
@@ -124,13 +125,13 @@ http://ionicframework.com/docs/theming/ */
    */
 
   .md body:not(.light) {
-    --ion-background-color: #121212;
+    --ion-background-color: #161616;
     --ion-background-color-rgb: 18,18,18;
 
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255,255,255;
 
-    --ion-border-color: #222222;
+    --ion-border-color: #161616;
 
     --ion-color-step-50: #1e1e1e;
     --ion-color-step-100: #2a2a2a;
@@ -152,19 +153,20 @@ http://ionicframework.com/docs/theming/ */
     --ion-color-step-900: #e7e7e7;
     --ion-color-step-950: #f3f3f3;
 
-    --ion-item-background: #1e1e1e;
+    --ion-item-background: #161616;
 
-    --ion-toolbar-background: #1f1f1f;
+    --ion-toolbar-background: #161616;
 
-    --ion-tab-bar-background: #1f1f1f;
+    --ion-tab-bar-background: #161616;
+
+    --ion-card-background: #161616;
 
-    --ion-card-background: #1e1e1e;
   }
 }
 
 :root, body.light {
   /** primary **/
-  --ion-color-primary: #5260ff;
+  --ion-color-primary: #645285;
   --ion-color-primary-rgb: 82, 96, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
@@ -234,11 +236,14 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  scrollbar-color: #9999999c #ffffff;
+
 }
 
 
 body.dark {
-  --ion-color-primary: #6a64ff;
+  --ion-color-primary: #645285;
   --ion-color-primary-rgb: 106, 100, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;

src/views/AccountsTab.vue

@@ -27,7 +27,7 @@
       </ion-item>
       <ion-list v-for="account of accounts" :key="account.address">
         <ion-item>
-          <ion-label>
+          <ion-label style="color: var(--primary-color)">
             {{ account.name }}
           </ion-label>
         </ion-item>

src/views/AppTabs.vue

@@ -3,54 +3,58 @@
     <ion-content>
       <ion-tabs @ionTabsWillChange="beforeTabChange" @ionTabsDidChange="afterTabChange">
         <ion-router-outlet />
-        <ion-tab-bar slot="bottom">
+        <ion-tab-bar
-          <ion-tab-button tab="home" href="/tabs/home">
+          slot="bottom"
-            <ion-icon :icon="walletOutline"></ion-icon>
+          style="display: flex; flex-direction: column; height: 116px"
-            <ion-label>Wallet</ion-label>
+        >
-          </ion-tab-button>
+          <div style="display: flex">
+            <ion-tab-button tab="home" href="/tabs/home">
+              <ion-icon :icon="walletOutline"></ion-icon>
+              <ion-label>Wallet</ion-label>
+            </ion-tab-button>
 
-          <ion-tab-button tab="accounts" href="/tabs/accounts">
+            <ion-tab-button tab="accounts" href="/tabs/accounts">
-            <ion-icon :icon="personCircle"></ion-icon>
+              <ion-icon :icon="personCircle"></ion-icon>
-            <ion-label>Accounts</ion-label>
+              <ion-label>Accounts</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
 
-          <ion-tab-button tab="networks" href="/tabs/networks">
+            <ion-tab-button tab="networks" href="/tabs/networks">
-            <ion-icon :icon="gitNetworkOutline"></ion-icon>
+              <ion-icon :icon="gitNetworkOutline"></ion-icon>
-            <ion-label>Networks</ion-label>
+              <ion-label>Networks</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
-        </ion-tab-bar>
-        <ion-tab-bar slot="bottom">
-          <ion-tab-button tab="history" href="/tabs/history">
-            <ion-icon :icon="receiptOutline"></ion-icon>
-            <ion-label>History</ion-label>
-          </ion-tab-button>
 
-          <ion-tab-button tab="assets" href="/tabs/assets">
+            <ion-tab-button tab="history" href="/tabs/history">
-            <ion-icon :icon="diamondOutline"></ion-icon>
+              <ion-icon :icon="receiptOutline"></ion-icon>
-            <ion-label>Assets</ion-label>
+              <ion-label>History</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
 
-          <ion-tab-button tab="settings" href="/tabs/settings">
+            <ion-tab-button tab="assets" href="/tabs/assets">
-            <ion-icon :icon="cogOutline"></ion-icon>
+              <ion-icon :icon="diamondOutline"></ion-icon>
-            <ion-label>Settings</ion-label>
+              <ion-label>Assets</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
-        </ion-tab-bar>
+          </div>
 
-        <ion-tab-bar slot="bottom">
+          <div style="display: flex">
-          <ion-tab-button tab="send-token" href="/tabs/send-token">
+            <ion-tab-button tab="settings" href="/tabs/settings">
-            <ion-icon :icon="sendOutline"></ion-icon>
+              <ion-icon :icon="cogOutline"></ion-icon>
-            <ion-label>Send Tokens</ion-label>
+              <ion-label>Settings</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
 
-          <ion-tab-button tab="read-contract" href="/tabs/read-contract">
+            <ion-tab-button tab="send-token" href="/tabs/send-token">
-            <ion-icon :icon="glassesOutline"></ion-icon>
+              <ion-icon :icon="sendOutline"></ion-icon>
-            <ion-label>Read Contract</ion-label>
+              <ion-label>Send Tokens</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
 
-          <ion-tab-button tab="write-contract" href="/tabs/write-contract">
+            <ion-tab-button tab="read-contract" href="/tabs/read-contract">
-            <ion-icon :icon="pushOutline"></ion-icon>
+              <ion-icon :icon="glassesOutline"></ion-icon>
-            <ion-label>Write Contracts</ion-label>
+              <ion-label>Read Contracts</ion-label>
-          </ion-tab-button>
+            </ion-tab-button>
+
+            <ion-tab-button tab="write-contract" href="/tabs/write-contract">
+              <ion-icon :icon="pushOutline"></ion-icon>
+              <ion-label>Write Contracts</ion-label>
+            </ion-tab-button>
+          </div>
         </ion-tab-bar>
       </ion-tabs>
     </ion-content>

src/views/HomeTab.vue

@@ -17,7 +17,7 @@
               position: absolute;
               right: 1.1rem;
               margin-left: 0.3rem;
-              color: coral;
+              color: #645285;
               font-weight: bold;
               font-size: 0.65rem;
             "
@@ -60,7 +60,7 @@
             )
           "
         >
-          <p style="font-size: 0.7rem; color: coral">{{ selectedAccount?.address }}</p>
+          <p style="font-size: 0.7rem; color: #645285">{{ selectedAccount?.address }}</p>
           <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
         </ion-item>
         <ion-item
@@ -107,7 +107,7 @@
           @click="copyText(String(selectedNetwork?.chainId), getToastRef())"
           style="cursor: pointer"
           >Selected Network ID:
-          <span style="color: coral; font-weight: bold">{{
+          <span style="color: #645285; font-weight: bold">{{
             selectedNetwork?.chainId
           }}</span>
           <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
@@ -122,21 +122,6 @@
           >Select</ion-button
         >
       </ion-item>
-      <ion-item style="margin-top: 0.3rem">
-        <div class="display: flex; flex-direction: column">
-          <img
-            alt="stealthex"
-            @click="openTab('https://stealthex.io')"
-            id="exchange-btn"
-            :src="getUrl('assets/exchange-btn-min.svg')"
-            class="exchange-btn"
-            style=""
-          />
-          <p style="font-size: 0.75rem; opacity: 0.8; padding: 0.2rem">
-            This button does not contain any referral to maximize privacy.
-          </p>
-        </div>
-      </ion-item>
       <ion-item style="margin-top: 0.3rem; margin-bottom: 0.3rem; text-align: center">
         <ion-button
           @click="goToFarcasterActions"
@@ -154,7 +139,21 @@
           >Personal Sign Messages</ion-button
         >
       </ion-item>
-
+      <ion-item style="margin-top: 0.3rem">
+        <div class="display: flex; flex-direction: column">
+          <img
+            alt="stealthex"
+            @click="openTab('https://stealthex.io')"
+            id="exchange-btn"
+            :src="getUrl('assets/exchange-btn-min.svg')"
+            class="exchange-btn"
+            style=""
+          />
+          <p style="font-size: 0.75rem; opacity: 0.8; padding: 0.2rem">
+            This button does not contain any referral to maximize privacy.
+          </p>
+        </div>
+      </ion-item>
       <ion-loading
         :is-open="loading"
         cssClass="my-custom-class"
@@ -189,6 +188,14 @@
               <ion-label>Accounts</ion-label>
               <ion-searchbar
                 placeholder="search..."
+                autocomplete="off"
+                autocorrect="off"
+                :autofocus="true"
+                :clear-input="false"
+                :clear-on-edit="false"
+                :debounce="300"
+                :spellcheck="false"
+                :tabindex="0"
                 @ionInput="searchAccount"
               ></ion-searchbar>
             </ion-list-header>
@@ -233,6 +240,14 @@
             <ion-list-header>
               <ion-label>Networks</ion-label>
               <ion-searchbar
+                autocomplete="off"
+                autocorrect="off"
+                :autofocus="true"
+                :clear-input="false"
+                :clear-on-edit="false"
+                :debounce="300"
+                :spellcheck="false"
+                :tabindex="0"
                 placeholder="search..."
                 @ionInput="searchNetwork"
               ></ion-searchbar>
@@ -530,7 +545,7 @@ export default defineComponent({
   top: 0.9rem;
   right: 2.4rem;
   margin-left: 0.3rem;
-  color: coral;
+  color: #645285;
   font-weight: bold;
   font-size: 0.65rem;
   cursor: pointer;

src/views/ReadContract.vue

@@ -106,7 +106,7 @@
           label-placement="stacked"
           style="overflow-y: scroll"
           :rows="10"
-          :cols="20"
+          :cols="40"
           :value="result"
           readonly
         ></ion-textarea>

src/views/SignMessage.vue

@@ -8,7 +8,16 @@
 
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-label>Message to Sign</ion-label>
+        <ion-label
+          >Message to Sign
+          {{
+            `${
+              intialSelectedAccount?.name
+                ? "- [ " + intialSelectedAccount?.name + " ]"
+                : ""
+            }`
+          }}
+        </ion-label>
       </ion-item>
       <ion-item>
         <div
@@ -67,6 +76,7 @@ import {
   hexTostr,
 } from "@/utils/platform";
 import UnlockModal from "@/views/UnlockModal.vue";
+import type { Account } from "@/extension/types";
 
 export default defineComponent({
   components: {
@@ -84,6 +94,7 @@ export default defineComponent({
   setup: () => {
     const route = useRoute();
     const loading = ref(false);
+    const intialSelectedAccount = ref(null as Account | null);
     const rid = (route?.params?.rid as string) ?? "";
 
     let sigmMsg: string = "";
@@ -117,6 +128,9 @@ export default defineComponent({
 
     onIonViewWillEnter(async () => {
       blockLockout();
+      getSelectedAccount().then((account) => {
+        intialSelectedAccount.value = account;
+      });
       interval = setInterval(async () => {
         if (timerReject.value <= 0) {
           onCancel();
@@ -172,6 +186,7 @@ export default defineComponent({
       onSign,
       loading,
       timerReject,
+      intialSelectedAccount,
     };
   },
 });

src/views/SignTx.vue

@@ -2,7 +2,16 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Send Transaction</ion-title>
+        <ion-title
+          >Send Transaction
+          {{
+            `${
+              intialSelectedAccount?.name
+                ? "- [ " + intialSelectedAccount?.name + " ]"
+                : ""
+            }`
+          }}</ion-title
+        >
       </ion-toolbar>
     </ion-header>
 
@@ -200,7 +209,7 @@ import {
   hexTostr,
 } from "@/utils/platform";
 import { getBalance, getGasPrice, estimateGas } from "@/utils/wallet";
-import type { Network } from "@/extension/types";
+import type { Network, Account } from "@/extension/types";
 import { allTemplateNets, chainIdToPriceId } from "@/utils/networks";
 import UnlockModal from "@/views/UnlockModal.vue";
 import router from "@/router";
@@ -245,6 +254,7 @@ export default defineComponent({
     const insuficientBalance = ref(false);
     const gasPriceReFetch = ref(true);
     const selectedNetwork = (ref(null) as unknown) as Ref<Network>;
+    const intialSelectedAccount = ref(null as unknown) as Ref<Account>;
     const dollarPrice = ref(0);
     const gasLimitModal = ref(false);
     const gasPriceModal = ref(false);
@@ -367,7 +377,9 @@ export default defineComponent({
       const pGasPrice = getGasPrice();
       const pBalance = getBalance();
       const pGetPrices = getPrices();
-      selectedNetwork.value = await getSelectedNetwork();
+      const data = await Promise.all([getSelectedNetwork(), getSelectedAccount()]);
+      selectedNetwork.value = data[0];
+      intialSelectedAccount.value = data[1];
       userBalance.value = Number(
         ethers.formatEther((await pBalance).toString() ?? "0x0")
       );
@@ -442,6 +454,7 @@ export default defineComponent({
       gasPriceModal,
       inGasPrice,
       inGasLimit,
+      intialSelectedAccount,
     };
   },
 });

src/views/UnlockModal.vue

@@ -33,14 +33,22 @@
         <ion-list>
           <ion-item>
             <ion-input
+              label-placement="floating"
               aria-label="password"
-              placeholder=""
-              class="password-input"
               type="password"
-              @ion-input="mpPass = String($event.target.value)"
+              v-model="mpPass"
-              fill="solid"
+              autocomplete="off"
+              autocorrect="off"
+              :autofocus="true"
+              :clear-input="false"
+              :clear-on-edit="false"
+              :debounce="300"
+              :spellcheck="false"
+              :tabindex="0"
               id="pass-input"
-            ></ion-input>
+            >
+              <div slot="label"><ion-text color="danger">(Password)</ion-text></div>
+            </ion-input>
 
             <!-- <ion-input
             label="Password"
@@ -48,7 +56,6 @@
             fill="outline"
             placeholder=""
             type="password"
-            ref="ionInput"
             @ion-input="mpPass = String($event.target.value)"
           ></ion-input> -->
           </ion-item>
@@ -156,7 +163,6 @@ export default defineComponent({
     onMounted(async () => {
       await new Promise((resolve) => setTimeout(resolve, 150));
       const passInput = document.querySelector("#pass-input input") as HTMLInputElement;
-      console.log("passInput", passInput);
       if (passInput) {
         passInput?.focus();
         passInput.addEventListener("keyup", (e: any) => {
@@ -164,9 +170,6 @@ export default defineComponent({
             unlock();
           }
         });
-        passInput.addEventListener("blur", () => {
-          passInput?.focus();
-        });
       }
     });