diff --git a/package-lock.json b/package-lock.json
index f8377cd..d168fc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@scure/bip39": "^1.3.0",
         "alchemy-sdk": "^3.3.1",
         "axios": "^1.7.2",
+        "bignumber.js": "^9.1.2",
         "crypto-js": "^4.2.0",
         "crypto-ts": "^1.0.2",
         "viem": "^2.14.2",
@@ -38,6 +39,7 @@
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.4",
+        "tsx": "^4.17.0",
         "typescript": "~5.4.0",
         "vite": "^5.2.8",
         "vue-tsc": "^2.0.11"
@@ -457,6 +459,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/openbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
@@ -2581,6 +2600,15 @@
       "integrity": "sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==",
       "license": "MIT"
     },
+    "node_modules/bignumber.js": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3702,6 +3730,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.6.tgz",
+      "integrity": "sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4962,6 +5003,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -5471,6 +5522,457 @@
       "license": "0BSD",
       "peer": true
     },
+    "node_modules/tsx": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.17.0.tgz",
+      "integrity": "sha512-eN4mnDA5UMKDt4YZixo9tBioibaMBpoxBkD+rIPAjVmYERSG0/dWEY1CEFuV89CgASlKL499q8AhmkMnnjtOJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.23.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
+      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
+      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
+      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
+      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
+      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
+      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
+      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
+      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
+      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
+      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
+      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
+      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
+      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
+      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
+      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
+      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
+      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
+      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
+      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
+      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
+      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.23.1",
+        "@esbuild/android-arm": "0.23.1",
+        "@esbuild/android-arm64": "0.23.1",
+        "@esbuild/android-x64": "0.23.1",
+        "@esbuild/darwin-arm64": "0.23.1",
+        "@esbuild/darwin-x64": "0.23.1",
+        "@esbuild/freebsd-arm64": "0.23.1",
+        "@esbuild/freebsd-x64": "0.23.1",
+        "@esbuild/linux-arm": "0.23.1",
+        "@esbuild/linux-arm64": "0.23.1",
+        "@esbuild/linux-ia32": "0.23.1",
+        "@esbuild/linux-loong64": "0.23.1",
+        "@esbuild/linux-mips64el": "0.23.1",
+        "@esbuild/linux-ppc64": "0.23.1",
+        "@esbuild/linux-riscv64": "0.23.1",
+        "@esbuild/linux-s390x": "0.23.1",
+        "@esbuild/linux-x64": "0.23.1",
+        "@esbuild/netbsd-x64": "0.23.1",
+        "@esbuild/openbsd-arm64": "0.23.1",
+        "@esbuild/openbsd-x64": "0.23.1",
+        "@esbuild/sunos-x64": "0.23.1",
+        "@esbuild/win32-arm64": "0.23.1",
+        "@esbuild/win32-ia32": "0.23.1",
+        "@esbuild/win32-x64": "0.23.1"
+      }
+    },
     "node_modules/type": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
diff --git a/package.json b/package.json
index 8179afc..1e7d21d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@scure/bip39": "^1.3.0",
     "alchemy-sdk": "^3.3.1",
     "axios": "^1.7.2",
+    "bignumber.js": "^9.1.2",
     "crypto-js": "^4.2.0",
     "crypto-ts": "^1.0.2",
     "viem": "^2.14.2",
@@ -43,6 +44,7 @@
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.4",
+    "tsx": "^4.17.0",
     "typescript": "~5.4.0",
     "vite": "^5.2.8",
     "vue-tsc": "^2.0.11"
diff --git a/public/img/PrettyMetaMask.png b/public/img/PrettyMetaMask.png
new file mode 100644
index 0000000..842d9a7
Binary files /dev/null and b/public/img/PrettyMetaMask.png differ
diff --git a/public/img/eth_logo.png b/public/img/eth_logo.png
new file mode 100644
index 0000000..c8ac5ec
Binary files /dev/null and b/public/img/eth_logo.png differ
diff --git a/src/App.vue b/src/App.vue
index 4c86198..157c545 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,14 +4,20 @@
   import ERC from "./components/main/ERC/ERC.vue";
   import { onMounted, ref, onUnmounted } from "vue";
   import passwordPage from "./components/passwordPage.vue";
+  import chainSwitcher from "./components/chainSwitcher.vue";
+  import { SwitchChain } from "./multichain";
+  import { useStore } from "vuex";
 
   const open = ref(false)
+  const store = useStore()
 
   onMounted(() => {
     const isOpen = localStorage.getItem('open-wallet')
     if (isOpen === 'true') {
       open.value = true
     }
+    // const store = useStore()
+    // SwitchChain(store)
 
     setInterval(checkOpen, 5000);
 
@@ -19,6 +25,7 @@
       if (document.hidden) {
         open.value = false;
         localStorage.setItem('open-wallet', 'false');
+        store.dispatch('clearPassword')
       }
     };
 
@@ -42,6 +49,8 @@
 <template>
   <div v-if="open" id="container">
     <header>
+      <div class="logo"><h1>✨Pretty-Metamask✨</h1></div>
+      <chainSwitcher />
     </header>
     <main>
       <VerticalNavbar />
@@ -71,6 +80,13 @@
     color: white;
     width: 100vw;
     border-bottom: 1px solid rgb(3, 3, 3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5vw;
+  }
+  .logo {
+    font-size: 2.4rem;
   }
   main {
     display: flex;
diff --git a/src/alchemy.ts b/src/alchemy.ts
index 8051253..e6a1fbf 100644
--- a/src/alchemy.ts
+++ b/src/alchemy.ts
@@ -1,5 +1,7 @@
 import type { AlchemyConfig } from "alchemy-sdk";
-import { Network, Alchemy } from "alchemy-sdk";
+import { Network, Alchemy, Utils } from "alchemy-sdk";
+import { BigNumber } from 'bignumber.js';
+import { getBalance } from './getBalance'
 
 interface Config {
   apiKey: string;
@@ -8,45 +10,253 @@ interface Config {
 
 const config: Config = {
   apiKey: 'aKVhzlNCwLMUs1hm_m7G3g00_vcuBkKh',
-  network: Network.ETH_SEPOLIA,
+  network: Network.ETH_MAINNET,
 };
 
-const alchemy = new Alchemy(config as AlchemyConfig);
+interface CoinGeckoToken {
+  id: string;
+  symbol: string;
+  name: string;
+  image: string;
+  current_price: number;
+  market_cap: number;
+  market_cap_rank: number;
+  fully_diluted_valuation: number;
+  total_volume: number;
+  high_24h: number;
+  low_24h: number;
+  price_change_24h: number;
+  price_change_percentage_24h: number;
+  market_cap_change_24h: number;
+  market_cap_change_percentage_24h: number;
+  circulating_supply: number;
+  total_supply: number;
+  max_supply: number;
+  ath: number;
+  ath_change_percentage: number;
+  ath_date: string;
+  atl: number;
+  atl_change_percentage: number;
+  atl_date: string;
+  roi?: string;
+  last_updated: string;
+  price_change_percentage_1h?: number;
+  sparkline_in_7d?: {
+    price: number[];
+  };
+}
+
+type Token = {
+  id: string;
+  symbol: string;
+  name: string;
+};
+
+type BalanceToken = {
+  name: string;
+  logo: string;
+  balance: string;
+  symbol: string;
+  decimals: number;
+  balanceValue: string | null;
+}
+
+const options = {
+  method: 'GET',
+  headers: { accept: 'application/json' }
+};
+
+
+export const processAll = async (address_: `0x${string}`, network_: Network) => {
+
+  const balanceTokens: BalanceToken[] = await getBalances2(address_, network_);
+
+  await updateCoinGeckoTokensValue();
+  const map = new Map<string, string>();
+
+  balanceTokens.forEach(result => {
+    const symbol = result.symbol.toLowerCase();
+    const value = localStorage.getItem(symbol);
+    console.log(`symbol is ${symbol}, value ${value}`);
+    if (value !== null) {
+        map.set(symbol, value);
+    }
+  });
+  await setEth(address_, map, balanceTokens);
+  await getTokensValue(map, balanceTokens);
+  return balanceTokens.sort((a, b) => {
+    const aValue = a.balanceValue ? parseFloat(a.balanceValue) : 0;
+    const bValue = b.balanceValue ? parseFloat(b.balanceValue) : 0;
+    return bValue - aValue;
+  });
+}
 
+async function setEth(address_: `0x${string}`, map: Map<string, string>, balanceTokens: BalanceToken[]) {
+  const weiValue = await getBalance(address_ as string)
 
+  map.set('eth', 'ethereum');
 
-export const getBalances = async (address: string) => {
+  const balanceEth: string = Utils.formatEther(weiValue);
+
+  balanceTokens.push({
+    name: 'Etherum',
+    logo: '/img/eth_logo.png',
+    balance: balanceEth,
+    symbol: 'eth',
+    decimals: 18,
+    balanceValue: null
+  });
+}
+
+async function getBalances2(address_: `0x${string}`, network: Network): Promise<BalanceToken[]> {
   try {
-    const balances = await alchemy.core.getTokenBalances(address);
+    config.network = network;
+    const alchemy = new Alchemy(config as AlchemyConfig);
+    const balances = await alchemy.core.getTokenBalances(address_);
     const nonZeroBalances = balances.tokenBalances.filter((token) => {
         return token.tokenBalance !== "0x0000000000000000000000000000000000000000000000000000000000000000";
     });
 
-    let i = 1;
-    const balanceResults = [];
+    const balanceResults: BalanceToken[] = [];
 
     for (const token of nonZeroBalances) {
-      let balance: number = 0;
-      if (token.tokenBalance != null)
-        balance = parseInt(token.tokenBalance, 16);
+      let balance: BigNumber = new BigNumber(0);
+      if (token.tokenBalance != null) {
+        balance = new BigNumber(token.tokenBalance);
+      }
+
       const metadata = await alchemy.core.getTokenMetadata(token.contractAddress);
-      console.log(`The logo is ${metadata.logo}`);
-      balance = balance / Math.pow(10, metadata.decimals ?? 1);
-      const balanceStr: string = balance.toFixed(2);
+      if (metadata.name == null || metadata.symbol == null) continue;
+
+      const decimals = metadata.decimals ?? 18;
+
+      const factor = new BigNumber(10).pow(decimals);
+      const formattedBalance = balance.div(factor).toFixed(2);
+
       balanceResults.push({
         name: metadata.name,
-        logo: metadata.logo,
-        balance: balanceStr,
+        logo: metadata.logo ? metadata.logo : 'img/question.png',
+        balance: formattedBalance,
         symbol: metadata.symbol,
-        decimals: metadata.decimals
+        decimals: decimals,
+        balanceValue: null
       });
-      console.log(`${i++}. ${metadata.name}: ${balanceStr} ${metadata.symbol} decimals is ${metadata.decimals}`);
     }
-    
-    return balanceResults;
+    return balanceResults
+
   } catch (error) {
-    console.log(`${address}`)
+    console.log(`${address_}`)
     console.error(`Failed to fetch token balances:`, error);
     return [];
   }
-};
\ No newline at end of file
+};
+
+/**
+ * Set all CoinGecko tokens in localStorage with the format <symbol, id>.
+ * Also updates the 'Time' variable in localStorage to reflect the last update time.
+ *
+ * This function fetches the latest token data from CoinGecko and stores it 
+ * in localStorage as a map of token symbols to their corresponding IDs.
+ */
+async function updateCoinGeckoTokensValue() {
+  try {
+    const apiUrl = 'https://api.coingecko.com/api/v3/coins/list';
+    const response = await fetch(apiUrl, options);
+    const tokens = await response.json();
+    if (localStorage.getItem("btc") || isMoreThanWeek())
+      return;
+
+    if (!Array.isArray(tokens)) {
+      throw new Error('Expected an array but received: ' + typeof tokens);
+    }
+    const tokenMap: Record<string, string> = tokens.reduce((map: Record<string, string>, token: Token) => {
+      map[token.symbol] = token.id;
+      console.log(`token symbol : ${token.symbol}, token id : ${token.id}`)
+      return map;
+    }, {} as Record<string, string>);
+    // console.log(tokenMap);
+    for (const [symbol, id] of Object.entries(tokenMap)) {
+      localStorage.setItem(symbol, id);
+    }
+    localStorage.setItem("TimeOfLastUpdate", Date.now().toString());
+    return;
+  } catch (err) {
+    console.error('Error fetching tokens:', err);
+    return {};
+  }
+}
+
+/**
+ * Get a string array of all wallets tokens symbol.
+ * fetch all data from the coingecko api and return a Map with sym.
+ */
+async function getTokensValue(id: Map<string, string> , balanceTokens: BalanceToken[]) {
+  try {
+    if (id == null) {
+      return;
+    }
+
+    const valueString = Array.from(id.values()).join(",");
+    console.log(`valueString is ${valueString}`);
+
+    const apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${valueString}&x_cg_demo_api_key=CG-X2ove9UTHLYyzyJYeYiQgY9T`;
+
+    const response = await fetch(apiUrl, options);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+    }
+    
+    const tokens: CoinGeckoToken[] = await response.json();
+
+    if (!Array.isArray(tokens)) {
+      throw new Error(`Expected an array but received: ${typeof tokens}`);
+    }
+
+    console.log("Data from coingecko is ready")
+    balanceTokens.forEach(token => {
+      const tokenId = id.get(token.symbol.toLowerCase());
+      if (tokenId) {
+        const matchingToken = tokens.find(t => t.id === tokenId);
+        if (matchingToken) {
+          if (typeof matchingToken.current_price === 'number') {
+            console.log(`Token ID: ${tokenId}, Current Price: ${matchingToken.current_price}`);
+            token.balanceValue = formatBalanceValue(matchingToken.current_price, parseInt(token.balance));
+            console.log(`The user have: ${token.balanceValue}$`);
+          } else {
+            console.warn(`Current price is invalid for token ID: ${tokenId}`);
+            token.balanceValue = null;
+          }
+        } else {
+          console.log(`There is not correspondence for ${tokenId}`);
+        }
+      }
+    });
+    
+  } catch (err) {
+    console.error('Error fetching tokens:', err);
+    return;
+  }
+}
+
+function formatBalanceValue(price: number, quantity: number): string {
+  const result: number = price * quantity;
+
+  if (result > 10000)
+    return result.toExponential(3);
+  else
+    return result.toPrecision(2);
+}
+
+function isMoreThanWeek(): boolean {
+  const storedTime = localStorage.getItem('TimeOfLastUpdate');
+
+  if (!storedTime)
+    return false;
+
+  const storedTimestamp = parseInt(storedTime, 10);
+  const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;
+  const currentTime = Date.now();
+
+  return currentTime < (storedTimestamp + oneWeekInMilliseconds);
+}
\ No newline at end of file
diff --git a/src/assets/eth_logo.png b/src/assets/eth_logo.png
deleted file mode 100644
index 8ca5351..0000000
Binary files a/src/assets/eth_logo.png and /dev/null differ
diff --git a/src/client.ts b/src/client.ts
deleted file mode 100644
index be221fe..0000000
--- a/src/client.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createPublicClient, http } from 'viem'
-import { mainnet } from 'viem/chains'
-
-export const client = createPublicClient({
-  chain: mainnet,
-  transport: http()
-});
\ No newline at end of file
diff --git a/src/components/chainSwitcher.vue b/src/components/chainSwitcher.vue
new file mode 100644
index 0000000..837180e
--- /dev/null
+++ b/src/components/chainSwitcher.vue
@@ -0,0 +1,45 @@
+<template>
+    <div id="chain-switcher">
+        <div class="dropdown">
+            <div tabindex="0" role="button" class="btn m-1">chain : {{ chain.name }}</div>
+            <ul tabindex="0" class="dropdown-content menu rounded-box z-[1] w-52 p-2 shadow">
+                <li class="chain" v-for="(c, i) in chainLs" @click="switchChain(i)"><a>{{ c.name }}</a></li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { SwitchChain } from '../multichain'
+import { chain, chainLs } from '../multichain'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const switchChain = (index: number) => {
+    SwitchChain(store, index)
+    console.log(chain.value.name)
+}
+
+</script>
+
+<style scoped>
+.btn {
+    background-color: #1E6BDE;
+    border: #1E6BDE;
+    color: white;
+    font-size: 1.2rem;
+}
+
+.btn:hover {
+    background-color: #144a9c;
+}
+.chain {
+    cursor: pointer;
+    color: white;
+    font-size: 1rem;
+}
+.dropdown-content {
+    background-color: #1E6BDE;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/main/ERC/NFT/NFT.vue b/src/components/main/ERC/NFT/NFT.vue
index 1b092e6..0f0b09b 100644
--- a/src/components/main/ERC/NFT/NFT.vue
+++ b/src/components/main/ERC/NFT/NFT.vue
@@ -8,6 +8,7 @@ import { getNFTsForOwner } from '@/getNFTsForOwner';
 
 const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
+const chain = computed(() => store.getters.chain);
 
 const dialogVisible = ref(false);
 const NFTsList = ref([]);
@@ -15,7 +16,7 @@ let importedNFTs = window.localStorage.getItem('ImportedNFTs');
 
 onMounted(async () => {
   if (account.value) {
-    NFTsList.value = await getNFTsForOwner(account.value, "eth-mainnet");
+    NFTsList.value = await getNFTsForOwner(account.value, chain.value.alchemyURLNFT);
   }
 
   if (importedNFTs) {
diff --git a/src/components/main/ERC/token/ButtonBalance.vue b/src/components/main/ERC/token/ButtonBalance.vue
index 22e7c3a..7b9e8b1 100644
--- a/src/components/main/ERC/token/ButtonBalance.vue
+++ b/src/components/main/ERC/token/ButtonBalance.vue
@@ -2,20 +2,25 @@
   <div id="container">
     <div class="input-container">
       <input type="text" v-model="userAddress" placeholder="Get balance for another address..." />
+      <button @click="toggleMode">{{ currentMode }}</button>
       <button @click="handleButtonClick">Submit</button>
+      
     </div>
-    <p v-if="loading">Loading...</p>
+    <p style="margin-left: 15px;" v-if="loading">Loading...</p>
     <div v-if="balances.length > 0" class="scroll-container scrollbar"  id="tokens">
       <ul>
         <li v-for="(balance, index) in balances" :key="index">
           <div v-if="balance.name != null" class="TokenBox">
-            <div class="TokenLeft">
-              <img :src="balance.logo ? balance.logo : 'img/question.png'" :alt="balance.name" />
+            <div class="LogoName">
+              <img :src="balance.logo" :alt="balance.name" />
               <span class="TitleToken">{{ balance.name }}</span>
             </div>
-            <div class="TokenRight">
+            <div class="Quantity">
               <span>{{ balance.balance }}</span>
+            </div>
+            <div class="SymbolPrice">
               <span>{{ balance.symbol }}</span>
+              <span v-if="balance.balanceValue != null">{{ balance.balanceValue }}$</span>
             </div>
           </div>
         </li>
@@ -27,16 +32,20 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref, watchEffect } from 'vue';
-import { getBalances } from '../../../../alchemy';
+import { processAll } from '../../../../alchemy';
 import { useStore } from 'vuex';
+import { Network } from 'alchemy-sdk';
 
 export default defineComponent({
   name: 'TokenBalances',
   setup() {
     const store = useStore();
+    const myChain = computed(() => store.getters.chain);
+    const modes = [Network.ETH_SEPOLIA, Network.ETH_MAINNET];
+    const currentMode = ref(modes[0]);
 
     const userAddress = ref('');
-    const balances = ref<Array<{ name: string | null; logo: string | null; balance: string; symbol: string | null; decimals: number | null }>>([]);
+    const balances = ref<Array<{ name: string; logo: string; balance: string; symbol: string; decimals: number; balanceValue: string | null }>>([]);
     const error = ref('');
     const loading = ref(false);
 
@@ -46,6 +55,10 @@ export default defineComponent({
       return userAddress.value.trim() || account.value;
     });
 
+    function toggleMode() {
+      currentMode.value = currentMode.value === modes[0] ? modes[1] : modes[0];
+    }
+
     const handleButtonClick = async () => {
       loading.value = true;
       error.value = '';
@@ -56,7 +69,7 @@ export default defineComponent({
           error.value = 'No address provided.';
           return;
         }
-        balances.value = await getBalances(addressToUse);
+        balances.value = await processAll(addressToUse, currentMode.value);
         console.log(account.value);
         if (balances.value.length === 0) {
           error.value = `No balances found for the address: ${addressToUse}.`;
@@ -73,12 +86,21 @@ export default defineComponent({
       handleButtonClick();
     });
 
+    watchEffect(() => {
+      if (myChain.value) {
+        handleButtonClick();
+      }
+    });
+
     return {
+      modes,
+      currentMode,
       userAddress,
       balances,
       error,
       loading,
-      account,
+      addressToDisplay,
+      toggleMode,
       handleButtonClick
     };
   }
@@ -102,6 +124,7 @@ export default defineComponent({
 .TokenBox {
   display: flex;
   justify-content: space-between;
+  width: 100%;
   align-items: center;
   padding: 10px 36px;
   margin-top: 1vh;
@@ -114,60 +137,75 @@ export default defineComponent({
   background-color: rgb(16, 19, 19); /* Darker background on hover */
 }
 
-.TokenBox img {
+.LogoName {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  max-width: 25%;
+  overflow: hidden;
+}
+
+.LogoName span {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.LogoName img {
   max-width: 50px;
   width: 2vw;
-  height: auto; /* Maintain aspect ratio */
-  margin-right: 10px; /* Spacing between image and text */
+  height: auto;
+  margin-right: 10px;
 }
 
-.TokenLeft {
-  display: flex;
-  align-items: center;
+.Quantity {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  max-width: 35%; 
 }
 
-.TokenRight {
+.SymbolPrice {
   display: flex;
   align-items: center;
-  margin-left: auto; /* Push the right section to the right */
+  flex: 1;
+  justify-content: flex-end;
+  max-width: 30%;
 }
 
-.TokenRight span {
+.SymbolPrice span {
   margin-left: 5px;
-  text-align: right; /* Align text to the right */
+  text-align: right;
+  overflow: hidden;
 }
 
 .TokenBox span {
   margin: 0 5px;
   color: aliceblue;
-  white-space: nowrap; /* Prevent line break for better alignment */
+  white-space: nowrap;
 }
 
-.TitleToken {
-  font-weight: bold; /* Highlight the token name */
-}
 
 .input-container {
   display: flex;
-  align-items: center; /* Vertically center the items */
-  gap: 10px; /* Space between the input and button */
+  align-items: center;
+  gap: 10px;
   margin: 0 14px;
 }
 
 input[type="text"] {
-  background-color: #333; /* Dark background color */
-  color: white; /* White text color */
-  border: 1px solid #555; /* Subtle border color */
-  border-radius: 10px; /* Rounded corners */
-  padding: 10px; /* Padding inside the input */
-  width: 300px; /* Fixed width for the input */
-  font-size: 16px; /* Font size for better readability */
-  box-sizing: border-box; /* Include padding and border in the element's total width and height */
-  transition: border-color 0.3s ease; /* Smooth transition for focus effect */
+  background-color: #333;
+  color: white;
+  border: 1px solid #555;
+  border-radius: 10px;
+  padding: 10px;
+  width: 300px;
+  font-size: 16px;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease;
 }
 
 input[type="text"]::placeholder {
-  color: #aaa; /* Light grey placeholder text color */
+  color: #aaa;
 }
 
 input[type="text"]:focus {
@@ -192,8 +230,8 @@ button:hover {
 
 .scrollbar
 {
-	overflow-y: scroll;
 	margin-bottom: 25px;
+  scrollbar-width: none;
 }
 
 #tokens::-webkit-scrollbar-track
diff --git a/src/components/main/user-info/UserInfos.vue b/src/components/main/user-info/UserInfos.vue
index f53832c..5f33e67 100644
--- a/src/components/main/user-info/UserInfos.vue
+++ b/src/components/main/user-info/UserInfos.vue
@@ -8,6 +8,7 @@ const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
 const balance = ref<number | null>(null);
 const ETH = ref<number | null>(null);
+const myChain = computed(() => store.getters.chain);
 
 ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD);
 watchEffect(async () => {
@@ -15,12 +16,18 @@ watchEffect(async () => {
     balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
   }
 });
+
+watchEffect(async () => {
+  if (myChain.value) {
+    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+  }
+});
 </script>
 
 <template>
   <div id="container">
     <div id="token">
-      <img src="../../../assets/eth_logo.png" alt="ETH" id="eth-logo"/>
+      <img src="/img/eth_logo.png" alt="ETH" id="eth-logo"/>
       <div id="balance">
         <h1 v-if="balance !== null">{{ balance.toFixed(4) }} ETH</h1>
         <p v-if="balance !== null && ETH !== null">${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>
diff --git a/src/components/passwordPage.vue b/src/components/passwordPage.vue
index 71d943a..8db6c17 100644
--- a/src/components/passwordPage.vue
+++ b/src/components/passwordPage.vue
@@ -1,20 +1,25 @@
 <template>
-    <div id="password-page" v-if="havePassword">
-	    <h1 class="title">Enter your Password</h1>
-	    <input type="password" v-model="password" placeholder="Password" />
-	    <button class="btn" @click="submitPassword">Enter</button>
-    </div>
-    <div id="password-page" v-else>
-        <h1 class="title">Create your Password</h1>
-	    <input type="password" v-model="password" placeholder="Password" />
-	    <button class="btn" @click="createPassword">Create</button>
+    <div id="password-page">
+        <img src="/img/PrettyMetaMask.png" alt="PrettyMetaMask Logo" class="logo">
+        <div v-if="havePassword">
+            <h1 class="title">Enter your Password</h1>
+            <input type="password" v-model="password" placeholder="Password" />
+            <button class="btn" @click="submitPassword">Enter</button>
+        </div>
+        <div v-else>
+            <h1 class="title">Create your Password</h1>
+            <input type="password" v-model="password" placeholder="Password" />
+            <button class="btn" @click="createPassword">Create</button>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref, defineEmits, onMounted } from 'vue'
 import CryptoJS from 'crypto-js'
+import { useStore } from 'vuex'
 
+const store = useStore()
 const password = ref('')
 const havePassword = ref(false)
 const emit = defineEmits(['isOpen'])
@@ -23,6 +28,8 @@ const createPassword = () => {
     const hashedPassword = CryptoJS.SHA256(password.value).toString()
     localStorage.setItem('password', hashedPassword)
     localStorage.setItem('open-wallet', 'true')
+
+    store.dispatch('addPassword', password.value)
     emit('isOpen')
 }
 
@@ -36,6 +43,7 @@ const submitPassword = () => {
     if (hashedInputPassword === storedPassword) {
         localStorage.setItem('open-wallet', 'true')
         emit('isOpen')
+        store.dispatch('addPassword', password.value)
     } else {
         alert('Incorrect password')
         password.value = ''
@@ -51,41 +59,91 @@ onMounted(() => {
 </script>
 
 <style scoped>
+#password-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #1E1E1E;
+  padding: 20px;
+}
+
+.logo {
+  width: 150px;
+  margin-bottom: 20px;
+}
+
 .title {
+  color: #FFFFFF;
+  font-size: 30px;
+  margin-bottom: 20px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+
+input[type="password"] {
+  width: 300px;
+  padding: 15px;
+  font-size: 16px;
+  border: 2px solid #4CAF50;
+  border-radius: 8px;
+  outline: none;
+  margin-bottom: 20px;
+  background-color: #2C2C2C;
   color: white;
-  font-size: 25px;
-  margin: 5px;
+  transition: border-color 0.3s;
+}
+
+input[type="password"]:focus {
+  border-color: #6FFF78;
 }
 
 .btn {
   background-color: #4CAF50;
-  border: none;
   color: white;
-  padding: 5px 10px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
+  border: none;
+  padding: 15px 30px;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: 30px;
+  margin-left: 10px;
   cursor: pointer;
-  border-radius: 20px;
+  transition: background-color 0.3s, transform 0.2s;
 }
 
-input {
-    color: black;
+.btn:hover {
+  background-color: #45A049;
+  transform: translateY(-2px);
 }
 
-#password-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  background-color: rgb(25, 25, 25);
+.btn:active {
+  background-color: #3e8e41;
+  transform: translateY(0);
+}
+
+input::placeholder {
+  color: #B0B0B0;
 }
 
-input {
-  margin-bottom: 10px;
+@media (max-width: 768px) {
+  input[type="password"] {
+    width: 80%;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .btn {
+    font-size: 16px;
+    padding: 12px 25px;
+  }
+
+  .logo {
+    width: 100px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/transaction/transaction.vue b/src/components/transaction/transaction.vue
index a0c0628..4672c90 100644
--- a/src/components/transaction/transaction.vue
+++ b/src/components/transaction/transaction.vue
@@ -33,11 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
-import { formatEther, getContract } from 'viem';
+import { formatEther, getContract, type PublicClient } from 'viem';
 import ERC20 from '@openzeppelin/contracts/build/contracts/ERC20.json';
 import transactionInfos from './transactionInfos.vue';
+import { x } from '../../main';
+import { fromHex } from 'viem'
+import { defineProps, computed } from 'vue';
 
 const props = defineProps({
   hash: String,
@@ -45,6 +48,8 @@ const props = defineProps({
   from: Boolean
 });
 
+var pubClient: PublicClient;
+
 const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
 const popUp = ref(false);
@@ -103,6 +108,8 @@ const getDateFormated = (timestamp: number) => {
 };
 
 const getInfos = () => {
+  const store = useStore();
+  pubClient = store.getters.pubClient;
   if (account.value) {
     getTransactionInfos(props.hash as `0x${string}`);
   }
@@ -133,37 +140,51 @@ const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, tra
 };
 
 const getTransactionInfos = async (transactionHash: `0x${string}`) => {
-  const transactionInfos = await pubClient.getTransaction({
-    hash: transactionHash
-  });
-  const data = {
-    "id": 1,
-    "jsonrpc": "2.0",
-    "method": "eth_getBlockByHash",
-    "params": [
-      transactionInfos.blockHash,
-      false
-    ]
-  };
-  const transactionReceipt = await pubClient.getTransactionReceipt({
-    hash: transactionHash
-  });
+  var transactionInfos: any;
+  var transactionReceipt: any;
   try {
-    transInfos.value.timestamp = (await x.post('/', data)).data.result.timestamp;
-  } catch (error) {
+    var transactionInfos = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getTransactionByHash",
+      "params": [
+        transactionHash
+      ]
+    })).data.result;
+    var transactionReceipt = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getTransactionReceipt",
+      "params": [
+        transactionHash
+      ]
+    })).data.result;
+    transInfos.value.timestamp = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getBlockByHash",
+      "params": [
+        transactionInfos.blockHash,
+        false
+      ]
+    })).data.result.timestamp;
+  }  catch (error) {
     console.log(error);
+    console.log("transactionInfos: ", transactionInfos);
+    console.log("transactionReceipt: ", transactionReceipt);
+    console.log("transInfos: ", transInfos);
   }
   transInfos.value.hash = transactionInfos.hash;
-  transInfos.value.to = String(transactionInfos.to);
+  transInfos.value.to = transactionInfos.to;
   transInfos.value.from = transactionInfos.from;
   transInfos.value.blockHash = transactionInfos.blockHash;
-  transInfos.value.blockNumber = Number(transactionInfos.blockNumber);
-  transInfos.value.value = formatEther(transactionInfos.value);
-  transInfos.value.status = transactionReceipt.status;
+  transInfos.value.blockNumber = fromHex(transactionInfos.blockNumber, "number");
+  transInfos.value.value = formatEther(fromHex(transactionInfos.value, "bigint"));
+  transInfos.value.status = parseInt(transactionReceipt.status, 16).toString() == "1" ? "success" : "failed";
   transInfos.value.date = getDateFormated(transInfos.value.timestamp);
   transInfos.value.logs.receipt = transactionReceipt;
   transInfos.value.logs.transaction = transactionInfos;
-  if (transInfos.value.devise == undefined)
+  if (!transInfos.value.devise)
     await getErc20Infos(transactionInfos, transactionReceipt, transInfos);
   return transactionInfos;
 };
diff --git a/src/components/transaction/transactionInfos.vue b/src/components/transaction/transactionInfos.vue
index 5d65ea0..e820e90 100644
--- a/src/components/transaction/transactionInfos.vue
+++ b/src/components/transaction/transactionInfos.vue
@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { pubClient } from '../../main';
 import btn from './btn.vue';
+import { useStore } from 'vuex'
 
 const props = defineProps({
     open: Boolean,
@@ -38,6 +38,7 @@ if (props.data?.logs.receipt.logs.length > 0) {
 }
 
 const isContract = async (address: `0x${string}`) => {
+    const pubClient = useStore().getter.pubClient
     const contract = await pubClient.getBytecode({ address: address })
     return contract != undefined
 }
diff --git a/src/components/transaction/transactions_container.vue b/src/components/transaction/transactions_container.vue
index 85a2be9..db92422 100644
--- a/src/components/transaction/transactions_container.vue
+++ b/src/components/transaction/transactions_container.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="link">
       <div class="clickable">
-        <h3 @click="walletLink()">View full history on etherscan</h3>
+        <h3 @click="walletLink()">View full history on block explorer</h3>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
       </div>
     </div>
@@ -16,9 +16,10 @@
 
 <script setup lang="ts">
 import transaction from './transaction.vue'
-import { ref, computed, onMounted, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { useStore } from 'vuex'
 import { fromHex } from 'viem'
+import { x } from '../../main'
 
 interface Transaction {
   hash: string,
@@ -29,18 +30,13 @@ interface Transaction {
 
 const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
-const transactionshash = ref<Transaction[]>([])
+const transactionshash = ref<Transaction[]>([]);
 const msg = ref("No account");
-
-watchEffect(async () => {
-  if (account.value) {
-    await btn();
-  }
-});
+const myChain = computed(() => store.getters.chain);
 
 const walletLink = () => {
   if (account.value) {
-    window.open(`https://sepolia.etherscan.io/address/${account.value}`);
+    window.open(`${myChain.value.chain.chain.blockExplorers.default.url}/address/${account.value}`);
   }
 }
 
@@ -70,7 +66,6 @@ const getLastTransactions = (transactions: Transaction[]): Transaction[] => {
 
 const btn = async () => {
   if (!account.value) return;
-  console.log("account: ", account.value);
   msg.value = "Loading transactions...";
 
   let transactions = await getTransactionsFrom();
@@ -119,7 +114,7 @@ const getTransactionsFrom = async () => {
   });
 
   try {
-    const transactions = (await store.getters.axiosInstance.post('/', data)).data.result.transfers;
+    const transactions = (await x.post('/', data)).data.result.transfers;
     return transactions;
   } catch (error) {
     return [];
@@ -145,16 +140,27 @@ const getTransactionsTo = async () => {
   });
 
   try {
-    const transactions = (await store.getters.axiosInstance.post('/', data)).data.result.transfers;
+    const transactions = (await x.post('/', data)).data.result.transfers;
     return transactions;
   } catch (error) {
+    console.log(error);
     return [];
   }
 }
 
-onMounted(async () => {
-  await btn();
+watchEffect(async () => {
+  if (myChain.value) {
+    transactionshash.value = [];
+    await btn();
+  }
+});
+
+watchEffect(async () => {
+  if (account.value) {
+    await btn();
+  }
 });
+
 </script>
 
 <style scoped>
diff --git a/src/components/wallet/importCard.vue b/src/components/wallet/importCard.vue
new file mode 100644
index 0000000..ca950bc
--- /dev/null
+++ b/src/components/wallet/importCard.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+export default {
+  name: 'importCard',
+  props: {
+    mnemonicNumber: {
+      type: Number,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    updateValue(event: Event) {
+      const value = (event.target as HTMLInputElement).value
+      this.$emit('update:modelValue', value)
+    }
+  }
+}
+</script>
+
+<template>
+  <input
+    type="text"
+    :placeholder="`Word ` + mnemonicNumber"
+    class="input input-bordered w-full max-w-xs"
+    :value="modelValue"
+    @input="updateValue"
+  />
+</template>
diff --git a/src/components/wallet/importPopUp.vue b/src/components/wallet/importPopUp.vue
new file mode 100644
index 0000000..734389a
--- /dev/null
+++ b/src/components/wallet/importPopUp.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+import importCard from './importCard.vue'
+
+export default {
+  name: "importPopUp",
+  components: {
+    importCard
+  },
+  data() {
+    return {
+      mnemonicWords: Array(12).fill('')
+    }
+  },
+  mounted() {
+    this.$el.focus()
+  },
+  methods: {
+    closeWithoutMnemonic() {
+      this.$emit('close')
+    },
+    closeWithMnemonic() {
+      this.$emit('close', this.mnemonicWords)
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-5000"
+    @keydown.esc="closeWithoutMnemonic"
+    tabindex="0"
+  >
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 flex-1">
+      <importCard
+        v-for="index in 12"
+        :key="index"
+        :mnemonic-number="index"
+        v-model="mnemonicWords[index - 1]"
+      />
+    </div>
+    <button @click="closeWithMnemonic" class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg w-auto self-end bg-blue-500 hover:bg-blue-700">Import</button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/wallet/mnemonicPopUp.vue b/src/components/wallet/mnemonicPopUp.vue
index a6d1be5..29efcfe 100644
--- a/src/components/wallet/mnemonicPopUp.vue
+++ b/src/components/wallet/mnemonicPopUp.vue
@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div
-    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-10"
+    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-5000"
     @keydown.esc="$emit('close')"
     tabindex="0"
   >
diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index c041bf0..37c231e 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -1,16 +1,17 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters, mapActions } from 'vuex';
-import walletCard from '@/components/wallet/walletCard.vue';
-import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue';
-import { generateWallet } from '@/utils/wallet';
-import type { WalletClient } from 'viem';
+import { defineComponent } from 'vue'
+import { mapGetters, mapActions } from 'vuex'
+import walletCard from '@/components/wallet/walletCard.vue'
+import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
+import { generateWallet, generateWalletFromMnemonic } from '@/utils/wallet'
+import type { WalletClient } from 'viem'
+import importPopUp from './importPopUp.vue'
+import { encryption } from '@/utils/crypto'
 
 interface Account {
-  name: string;
-  address: string;
-  mnemonic: string;
-  wallet: WalletClient;
+  name: string
+  address: string
+  wallet: WalletClient
 }
 
 export default defineComponent({
@@ -18,41 +19,88 @@ export default defineComponent({
   components: {
     walletCard,
     mnemonicPopUp,
+    importPopUp
   },
   computed: {
-    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses']),
+    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses', 'password', 'walletCounter']),
     visibleMnemonicAccounts(): Account[] {
       return this.accounts.filter(
         (account: Account) => this.selectedAccount === account.address && this.isMnemonicVisible
-      );
+      )
     },
   },
   data() {
     return {
+      mnemonic: '',
       isMnemonicVisible: false,
-    };
+      isImportVisible: false
+    }
   },
   methods: {
-    ...mapActions(['addAccount', 'selectAccount']),
+    ...mapActions(['addAccount', 'selectAccount', 'initializeAccountsFromLocalStorage']),
     addAccountToStore() {
-      const { newWallet, mnemonic } = generateWallet();
+      const { newWallet, mnemonic, privateKey } = generateWallet(this.walletCounter)
       const newAccount: Account = {
-        name: `Account ${this.accounts.length + 1}`,
+        name: `Account ${this.walletCounter + 1}`,
         address: newWallet.account.address,
-        mnemonic: mnemonic,
         wallet: newWallet
-      };
-      this.addAccount(newAccount);
-      this.isMnemonicVisible = true;
+      }
+      const accountExist = this.accounts.some(
+        (account: Account) => account.address === newWallet.account.address
+      )
+      if (accountExist) {
+        console.warn("Account already exists")
+        this.isMnemonicVisible = false
+        return
+      }
+      this.mnemonic = mnemonic
+      this.addAccount(newAccount)
+      this.isMnemonicVisible = true
+      localStorage.setItem(`privateKeyAccount${this.walletCounter}`, encryption(privateKey, this.password))
     },
     selectAccountInStore(address: string) {
-      this.selectAccount(address);
+      this.selectAccount(address)
     },
-    closePopUp() {
-      this.isMnemonicVisible = false;
+    closeMnemonicPopUp() {
+      this.isMnemonicVisible = false
+      this.mnemonic = ''
     },
+    showImportPopUp() {
+      this.isImportVisible = true
+    },
+    closeImportPopUp(mnemonicWords: string[]) {
+      if (mnemonicWords && mnemonicWords.every((word) => word !== '')) {
+        console.log("Importing wallet...")
+        const { newWallet, privateKey }= generateWalletFromMnemonic(mnemonicWords)
+        if (newWallet === null) {
+          this.isImportVisible = false
+          return
+        }
+        const accountExist = this.accounts.some(
+          (account: Account) => account.address === newWallet.account.address
+        )
+        if (accountExist) {
+          console.warn("Account already exists")
+          this.isImportVisible = false
+          return
+        }
+        const newAccount: Account = {
+          name: `Account ${this.walletCounter + 1}`,
+          address: newWallet.account.address,
+          wallet: newWallet
+        }
+        this.addAccount(newAccount)
+        localStorage.setItem(`privateKeyAccount${this.walletCounter}`, encryption(privateKey, this.password))
+      }
+      this.isImportVisible = false
+    }
   },
-});
+  mounted() {
+    if (this.password && this.accounts.length === 0) {
+      this.initializeAccountsFromLocalStorage()
+    }
+  }
+})
 </script>
 
 <template>
@@ -76,6 +124,12 @@ export default defineComponent({
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
         </div>
+        <div @click="showImportPopUp" class="bg-background-gray rounded-2xl p-3 flex items-center justify-center border-gray-600 border hover:bg-gray-600">
+          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2a1 1 0 011 1v10.586l3.293-3.293a1 1 0 011.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L11 13.586V3a1 1 0 011-1z"/>
+            <path d="M5 18a1 1 0 011-1h12a1 1 0 110 2H6a1 1 0 01-1-1z"/>
+          </svg>
+        </div>
       </div>
     </div>
     <div class="flex items-center cursor-pointer p-4 w-full">
@@ -83,12 +137,17 @@ export default defineComponent({
       <span class="text-2xl">Settings</span>
     </div>
   </div>
+  <div v-if="isImportVisible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+    <importPopUp
+      @close="closeImportPopUp"
+    />
+  </div>
   <div v-if="isMnemonicVisible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
     <mnemonicPopUp
       v-for="account in visibleMnemonicAccounts"
       :key="account.address"
-      :mnemonic="account.mnemonic"
-      @close="closePopUp"
+      :mnemonic="mnemonic"
+      @close="closeMnemonicPopUp"
     />
   </div>
 </template>
diff --git a/src/fetchTokenMetadata.ts b/src/fetchTokenMetadata.ts
index 083d282..31bfe22 100644
--- a/src/fetchTokenMetadata.ts
+++ b/src/fetchTokenMetadata.ts
@@ -1,26 +1,26 @@
-export const fetchTokenMetadata = async (tokenAddress: string) => {
-
-  const fetchURL = `https://eth-mainnet.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_API_KEY}`;
+import { x } from './main';
 
-  const raw = JSON.stringify({
+export const fetchTokenMetadata = async (tokenAddress: string) => {
+  const raw = {
     "jsonrpc": "2.0",
     "method": "alchemy_getTokenMetadata",
-    "headers": {
-      "Content-Type": "application/json"
-    },
     "params": [
       `${tokenAddress}`
     ],
     "id": 42
-  });
-  const requestOptions : any = {
-    method: 'POST',
-    body: raw,
-    redirect: 'follow'
   };
-  fetch(fetchURL, requestOptions)
-    .then(response => response.json())
-    .then(response => JSON.stringify(response["result"], null, 2))
-    .then(result => console.log(result))
-    .catch(error => console.log('error', error));
-}
\ No newline at end of file
+
+  try {
+    const response = await x.post("/", raw, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    const result = JSON.stringify(response.data.result, null, 2);
+    console.log(result);
+    return result;
+  } catch (error) {
+    console.log('error', error);
+    throw error;
+  }
+};
\ No newline at end of file
diff --git a/src/getBalance.ts b/src/getBalance.ts
index 2d0952b..0208bc9 100644
--- a/src/getBalance.ts
+++ b/src/getBalance.ts
@@ -1,5 +1,24 @@
-import { client } from './client';
+import { x } from "./main";
 
-export const getBalance = async (address: any): Promise<bigint> => {
-  return await client.getBalance({ address: address });
+export const getBalance = async (address: string): Promise<bigint> => {
+  if (address === '' || address == undefined) {
+    return BigInt(0);
+  }
+  try {
+    const response = await x.post('/', {
+      jsonrpc: '2.0',
+      method: 'eth_getBalance',
+      params: [address, 'latest'],
+      id: 1
+    });
+
+    if (response.data.result) {
+      return BigInt(response.data.result);
+    } else {
+      throw new Error('Failed to get balance');
+    }
+  } catch (error) {
+    console.error('Error fetching balance:', error);
+    throw error;
+  }
 }
\ No newline at end of file
diff --git a/src/getNFTsForOwner.ts b/src/getNFTsForOwner.ts
index 2c38639..a57180b 100644
--- a/src/getNFTsForOwner.ts
+++ b/src/getNFTsForOwner.ts
@@ -1,12 +1,11 @@
 const PAGE_SIZE: number = 100
 
-export const getNFTsForOwner = async (address: string, network: string)  => {
+export const getNFTsForOwner = async (address: string, baseURL: string)  => {
   const requestOptions : RequestInit = {
     method: 'GET',
     redirect: 'follow'
   }
   const apiKey : string = import.meta.env.VITE_ALCHEMY_API_KEY as string;
-  const baseURL : string = `https://${network}.g.alchemy.com/nft/v3/${apiKey}/getNFTsForOwner/`
 
   try {
     const response : Response = await fetch(`${baseURL}?owner=${address}&pageSize=${PAGE_SIZE}`, requestOptions)
diff --git a/src/main.ts b/src/main.ts
index 82541ea..86d5c04 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,27 +7,17 @@ loading.mount('#loading')
 
 import { createApp, nextTick } from 'vue'
 import App from './App.vue'
-import { createPublicClient, createWalletClient, http, custom } from 'viem'
-import { sepolia } from 'viem/chains'
 import axios from 'axios'
 import store from './store'
-
-const pub_client = createPublicClient({
-    chain: sepolia,
-    transport: http(),
-})
-
-const apiKey = import.meta.env.VITE_ALCHEMY_API_KEY
-const baseURL = `https://eth-sepolia.g.alchemy.com/v2/${apiKey}`;
+import { chain } from './multichain'
 
 const ax = axios.create({
-    baseURL: baseURL,
+    baseURL: chain.value.alchemyURL,
     headers: {
         'Content-Type': 'application/json',
     },
 });
 
-export const pubClient = pub_client;
 export const x = ax;
 
 const app = createApp(App)
@@ -37,18 +27,3 @@ app.mount('#app')
 nextTick().then(() => {
     loading.unmount()
 })
-
-export async function connectWallet() {
-    const wal_client = createWalletClient({
-        chain: sepolia,
-        transport: custom(window.ethereum!),
-    })
-
-    const accounts = await wal_client.requestAddresses()
-    console.log(accounts)
-
-    store.dispatch('addAccount', {
-        address: accounts[0],
-        walletClient: wal_client,
-    })
-}
diff --git a/src/multichain.ts b/src/multichain.ts
new file mode 100644
index 0000000..09b66b4
--- /dev/null
+++ b/src/multichain.ts
@@ -0,0 +1,52 @@
+import { sepolia, mainnet } from 'viem/chains'
+import { ref } from 'vue'
+import { x } from './main'
+import { Network } from 'alchemy-sdk';
+
+const apiKey = import.meta.env.VITE_ALCHEMY_API_KEY
+
+const chainLs = [
+    {
+        name: "sepolia",
+        chain: sepolia,
+        alchemyURL: `https://eth-sepolia.g.alchemy.com/v2/${apiKey}`,
+        alchemyURLNFT: `https://eth-sepolia.g.alchemy.com/nft/v3/${apiKey}/getNFTsForOwner/`,
+        alchemyNetwork: Network.ETH_SEPOLIA
+    },
+    {
+        name: "ethereum",
+        chain: mainnet,
+        alchemyURL: `https://eth-mainnet.g.alchemy.com/v2/${apiKey}`,
+        alchemyURLNFT: `https://eth-mainnet.g.alchemy.com/nft/v3/${apiKey}/getNFTsForOwner/`,
+        alchemyNetwork: Network.ETH_MAINNET
+    },
+]
+
+const chain = ref(chainLs[1])
+
+const SwitchChain = (store: any, chainID?: number) => {
+    if (chainID != undefined && chainID < chainLs.length) {
+        localStorage.setItem('chainIdx', chainID.toString())
+    }
+    var chainIdx: number = parseInt(localStorage.getItem('chainIdx') || '-1');
+    if (chainIdx < 0) {
+        chainIdx = 0
+        localStorage.setItem('chainIdx', '0')
+    }
+    if (chainIdx >= chainLs.length) {
+        console.log("Invalid chain index")
+        return
+    }
+    chain.value = chainLs[chainIdx]
+    x.defaults.baseURL = chainLs[chainIdx].alchemyURL
+    console.log("Switched to chain: ", chain.value)
+
+    if (store) {
+        store.dispatch('saveChain', { chain: chain.value })
+        store.dispatch('switchWalletChain')
+    } else {
+        console.error('Vuex store is not initialized')
+    }
+}
+
+export { SwitchChain, chain, chainLs }
\ No newline at end of file
diff --git a/src/store.ts b/src/store.ts
index 73f7b78..ccbc920 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,48 +1,129 @@
-import { createStore } from 'vuex';
-import type { WalletClient } from 'viem';
+import { createStore } from 'vuex'
+import type { PublicClient, WalletClient } from 'viem'
+import { decryption } from '@/utils/crypto'
+import { generateWalletFromPrivateKey } from '@/utils/wallet'
+import { createPublicClient, http } from 'viem'
+import { switchChain } from 'viem/actions';
+import { chain } from './multichain';
+
+const pub_client = createPublicClient({
+  chain: chain.value.chain,
+  transport: http(),
+})
 
 interface Account {
-  name: string;
-  address: string;
-  reducedAddress: string;
-  mnemonic: string;
-  wallet: WalletClient;
+  name: string
+  address: string
+  reducedAddress: string
+  wallet: WalletClient
+  id: number
 }
 
 interface State {
-  accounts: Account[];
-  selectedAccount: string | null;
+  accounts: Account[]
+  selectedAccount: string | null
+  password: string | null
+  walletCounter: number
+  chain: any | null;
+  pubClient: PublicClient;
 }
 
 const state: State = {
   accounts: [],
   selectedAccount: null,
-};
+  chain: chain.value.chain,
+  pubClient: pub_client,
+  password: null,
+  walletCounter: 0
+}
 
 const mutations = {
   addAccount(state: State, account: Account) {
-    account.reducedAddress = `${account.address.slice(0, 7)}...${account.address.slice(-5)}`;
-    state.accounts.push(account);
-    state.selectedAccount = account.address;
+    account.reducedAddress = `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
+    account.id = state.walletCounter
+    state.accounts.push(account)
+    state.selectedAccount = account.address
+    state.walletCounter++
   },
   selectAccount(state: State, address: string) {
-    state.selectedAccount = address;
+    state.selectedAccount = address
   },
   clearAccounts(state: State) {
-    state.accounts = [];
-    state.selectedAccount = null;
+    state.accounts = []
+    state.selectedAccount = null
+    state.walletCounter = 0
+  },
+  addPassword(state: State, password: string) {
+    state.password = password
+  },
+  clearPassword(state: State) {
+    state.password = null
+  },
+  initializeAccountsFromLocalStorage( state: State) {
+    let walletCounter = 0
+    while (localStorage.getItem(`privateKeyAccount${walletCounter + 1}`)) {
+      walletCounter++
+    }
+    state.walletCounter = walletCounter
+
+    for (let i = 1; i <= walletCounter; i++) {
+      const encryptedPrivateKey = localStorage.getItem(`privateKeyAccount${i}`)
+      if (encryptedPrivateKey && state.password) {
+        const privateKey = decryption(encryptedPrivateKey, state.password)
+        const wallet = generateWalletFromPrivateKey(privateKey)
+
+        const account: Account = {
+          name: `Account ${i}`,
+          address: wallet.account.address,
+          wallet: wallet,
+          reducedAddress: '',
+          id: i
+        }
+        state.accounts.push(account)
+      }
+    }
+  },
+  switchWalletChain(state: State) {
+    state.accounts.forEach(account => {
+      switchChain(account.wallet, state.chain as typeof pub_client.chain);
+    });
+    state.pubClient.chain = state.chain.chain.chain;
+  },
+  saveChain(state: State, chain: any) {
+    state.chain = chain;
+  },
+  savePubClient(state: State, pubClient: any) {
+    state.pubClient = pubClient;
   }
-};
+}
 
 const actions = {
   addAccount({ commit }: { commit: Function }, account: Account) {
-    commit('addAccount', account);
+    commit('addAccount', account)
   },
   selectAccount({ commit }: { commit: Function }, address: string) {
-    commit('selectAccount', address);
+    commit('selectAccount', address)
   },
   clearAccounts({ commit }: { commit: Function }) {
     commit('clearAccounts');
+  },
+  addPassword({ commit }: { commit: Function }, password: string) {
+    commit('addPassword', password)
+  },
+  clearPassword({ commit }: { commit: Function }) {
+    commit('clearPassword')
+  },
+  initializeAccountsFromLocalStorage({ commit }: { commit: Function }) {
+    commit('initializeAccountsFromLocalStorage')
+  },
+  switchWalletChain({ commit }: { commit: Function }) {
+    commit('switchWalletChain');
+  },
+  saveChain({ commit }: { commit: Function }, chain: any) {
+    commit('saveChain', chain);
+  },
+  savePubClient({ commit }: { commit: Function }, pubClient: any) {
+    commit('savePubClient', pubClient);
   }
 };
 
@@ -53,15 +134,19 @@ const getters = {
     return state.accounts.map(account => ({
       ...account,
       reducedAddress: `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
-    }));
-  }
-};
+    }))
+  },
+  password: (state: State) => state.password,
+  walletCounter: (state: State) => state.walletCounter,
+  chain: (state: State) => state.chain,
+  pubClient: (state: State) => state.pubClient,
+}
 
 const store = createStore({
   state,
   mutations,
   actions,
   getters
-});
+})
 
-export default store;
+export default store
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index ea4f27b..df95189 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -13,11 +13,11 @@ function uint8ToHexString(uint8Array: Uint8Array | null): `0x${string}` {
     return `0x${hexString}` as `0x${string}`;
 }
 
-export function generateWallet(): { newWallet:WalletClient, mnemonic:string } {
+export function generateWallet(walletNumber: number): { newWallet:WalletClient, mnemonic:string, privateKey:string } {
     const mnemonic = generateMnemonic(english)
     const seed = mnemonicToSeedSync(mnemonic)
     const masterKey = HDKey.fromMasterSeed(seed)
-    const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/0`).privateKey
+    const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/${walletNumber}`).privateKey
     const privateKey = uint8ToHexString(privateKeyUint8)
     const account = privateKeyToAccount(privateKey)
 
@@ -26,5 +26,33 @@ export function generateWallet(): { newWallet:WalletClient, mnemonic:string } {
         chain: mainnet,
         transport: http()
     })
-    return { newWallet, mnemonic }
+    return { newWallet, mnemonic, privateKey }
 }
+
+export function generateWalletFromPrivateKey(privateKey: `0x${string}`): WalletClient {
+    const account = privateKeyToAccount(privateKey)
+    return createWalletClient({
+        account,
+        chain: mainnet,
+        transport: http()
+    })
+}
+
+export function generateWalletFromMnemonic(mnemonic: string[]): { newWallet: WalletClient | null, privateKey: string | null} {
+    try {
+        const seed = mnemonicToSeedSync(mnemonic.join(' '))
+        const masterKey = HDKey.fromMasterSeed(seed)
+        const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/0`).privateKey
+        const privateKey = uint8ToHexString(privateKeyUint8)
+        const account = privateKeyToAccount(privateKey)
+        const newWallet = createWalletClient({
+            account,
+            chain: mainnet,
+            transport: http()
+        })
+        return { newWallet, privateKey }
+    } catch (error) {
+        console.error("The mnemonic format is invalid")
+        return { newWallet: null, privateKey: null }
+    }
+}
\ No newline at end of file