Upgrade UI

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint pretty-metamask --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src"
   },
   "dependencies": {

src/App.vue

@@ -1,58 +1,57 @@
 <script setup lang="ts">
-  import VerticalNavbar from "./components/wallet/verticalNavbar.vue";
-  import transactions_container from "./components/transaction/transactions_container.vue";
-  import ERC from "./components/main/ERC/ERC.vue";
-  import { onMounted, ref, onUnmounted } from "vue";
-  import passwordPage from "./components/passwordPage.vue";
-  import HeaderMenu from "./components/wallet/headerMenu.vue"
-  import chainSwitcher from "./components/chainSwitcher.vue";
-  import { SwitchChain } from "./multichain";
-  import { useStore } from "vuex";
+import VerticalNavbar from './components/wallet/verticalNavbar.vue'
+import transactions_container from './components/transaction/transactions_container.vue'
+import ERC from './components/main/ERC/ERC.vue'
+import { onMounted, ref, onUnmounted } from 'vue'
+import passwordPage from './components/passwordPage.vue'
+import HeaderMenu from './components/wallet/headerMenu.vue'
+import chainSwitcher from './components/chainSwitcher.vue'
+import { useStore } from 'vuex'
 
-  const open = ref(false)
-  const store = useStore()
+const open = ref(false)
+const store = useStore()
 
-  onMounted(() => {
-    let isOpen: string | null;
-    if (sessionStorage.getItem('lock-wallet') && store.state.password) {
-      isOpen = localStorage.getItem('open-wallet')
-      if (isOpen === 'true') {
-        open.value = true
-      }
-    } else {
-      isOpen = "false";
-      open.value = false
+onMounted(() => {
+  let isOpen: string | null
+  if (sessionStorage.getItem('lock-wallet') && store.state.password) {
+    isOpen = localStorage.getItem('open-wallet')
+    if (isOpen === 'true') {
+      open.value = true
     }
-    // const store = useStore()
-    // SwitchChain(store)
+  } else {
+    isOpen = 'false'
+    open.value = false
+  }
+  // const store = useStore()
+  // SwitchChain(store)
 
-    setInterval(checkOpen, 5000);
+  setInterval(checkOpen, 5000)
 
-    const handleVisibilityChange = () => {
-      if (document.hidden) {
-        if (sessionStorage.getItem('lock-wallet') === 'true') {
-          open.value = false;
-          localStorage.setItem('open-wallet', 'false');
-          store.dispatch('clearPassword')
-        }
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      if (sessionStorage.getItem('lock-wallet') === 'true') {
+        open.value = false
+        localStorage.setItem('open-wallet', 'false')
+        store.dispatch('clearPassword')
       }
-    };
+    }
+  }
 
-    document.addEventListener('visibilitychange', handleVisibilityChange);
+  document.addEventListener('visibilitychange', handleVisibilityChange)
 
-    onUnmounted(() => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    });
+  onUnmounted(() => {
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
   })
+})
 
-  function checkOpen() {
-    const isOpen = localStorage.getItem('open-wallet')
-    if (isOpen === 'true') {
-      open.value = true
-    } else {
-      open.value = false
-    }
+function checkOpen() {
+  const isOpen = localStorage.getItem('open-wallet')
+  if (isOpen === 'true') {
+    open.value = true
+  } else {
+    open.value = false
   }
+}
 </script>
 
 <template>
@@ -77,51 +76,51 @@
     </main>
   </div>
   <div v-else>
-    <passwordPage @isOpen="checkOpen()"/>
+    <passwordPage @isOpen="checkOpen()" />
   </div>
 </template>
 
 <style scoped>
-  #container {
-    height: 100vh;
-    background-color: rgb(3, 3, 3);
-  }
-  header {
-    height:10vh;
-    background-color: rgb(25, 25, 25);
-    color: white;
-    width: 100vw;
-    border-bottom: 1px solid rgb(3, 3, 3);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 5vw;
-  }
+#container {
+  height: 100vh;
+  background-color: rgb(3, 3, 3);
+}
+header {
+  height: 10vh;
+  background-color: rgb(25, 25, 25);
+  color: white;
+  width: 100vw;
+  border-bottom: 1px solid rgb(3, 3, 3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5vw;
+}
 
-  .headerBox {
-    display: flex;
-  }
+.headerBox {
+  display: flex;
+}
 
-  .logo {
-    font-size: 2.4rem;
-  }
-  main {
-    display: flex;
-    flex-direction: row;
-    width: 100vw;
-    height: 90vh;
-  }
-  #info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-  #transactions {
-    width: 27.91vw;
-    height: 80vh;
-    background-color: rgb(25, 25, 25);
-    border-radius: 20px;
-  }
+.logo {
+  font-size: 2.4rem;
+}
+main {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: 90vh;
+}
+#info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+#transactions {
+  width: 27.91vw;
+  height: 80vh;
+  background-color: rgb(25, 25, 25);
+  border-radius: 20px;
+}
 </style>

src/LoadingPage.vue

@@ -4,12 +4,11 @@ import VerticalNavbar from '@/components/main/VerticalNavbar.vue'
 
 <template>
   <div id="container">
-    <header>
-    </header>
+    <header></header>
     <main>
       <VerticalNavbar />
       <div id="info">
-        <div id="ERC" >Please connect your wallet</div>
+        <div id="ERC">Please connect your wallet</div>
         <div id="transactions" />
       </div>
     </main>
@@ -33,7 +32,7 @@ import VerticalNavbar from '@/components/main/VerticalNavbar.vue'
   background-color: rgb(3, 3, 3);
 }
 header {
-  height:10vh;
+  height: 10vh;
   background-color: rgb(25, 25, 25);
   color: white;
   width: 100vw;
@@ -58,4 +57,4 @@ main {
   background-color: rgb(25, 25, 25);
   border-radius: 20px;
 }
-</style>
+</style>