diff --git a/package.json b/package.json
index e5e195e..d185302 100644
--- a/package.json
+++ b/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": {
diff --git a/src/App.vue b/src/App.vue
index 94949e0..4e5a7bc 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/LoadingPage.vue b/src/LoadingPage.vue
index aa05362..37471e5 100644
--- a/src/LoadingPage.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/alchemy.ts b/src/alchemy.ts
index f30ef51..673b067 100644
--- a/src/alchemy.ts
+++ b/src/alchemy.ts
@@ -1,105 +1,106 @@
-import type { AlchemyConfig } from "alchemy-sdk";
-import { Network, Alchemy, Utils } from "alchemy-sdk";
-import { BigNumber } from 'bignumber.js';
+import type { AlchemyConfig } from 'alchemy-sdk'
+import { Network, Alchemy, Utils } from 'alchemy-sdk'
+import { BigNumber } from 'bignumber.js'
 import { getBalance } from './getBalance'
 import { chain } from './multichain'
 
 interface Config {
-  apiKey: string;
-  network: Network;
+  apiKey: string
+  network: Network
 }
 
 const config: Config = {
   apiKey: import.meta.env.VITE_ALCHEMY_API_KEY,
-  network: chain.value.alchemyNetwork,
-};
+  network: chain.value.alchemyNetwork
+}
 
 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;
+  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[];
-  };
+    price: number[]
+  }
 }
 
 type Token = {
-  id: string;
-  symbol: string;
-  name: string;
-};
+  id: string
+  symbol: string
+  name: string
+}
 
 type BalanceToken = {
-  name: string;
-  logo: string;
-  balance: string;
-  symbol: string;
-  decimals: number;
-  balanceValue: string | null;
+  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_)
 
-  const balanceTokens: BalanceToken[] = await getBalances2(address_, network_);
+  await updateCoinGeckoTokensValue()
+  const map = new Map<string, string>()
 
-  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}`);
+  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);
+      map.set(symbol, value)
     }
-  });
-  await setEth(address_, map, balanceTokens);
-  await getTokensValue(map, balanceTokens);
+  })
+  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;
-  });
+    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[]) {
+async function setEth(
+  address_: `0x${string}`,
+  map: Map<string, string>,
+  balanceTokens: BalanceToken[]
+) {
   const weiValue = await getBalance(address_ as string)
-  if (weiValue <= 0)
-    return;
+  if (weiValue <= 0) return
 
-  map.set('eth', 'ethereum');
+  map.set('eth', 'ethereum')
 
-  const balanceEth: string = Utils.formatEther(weiValue);
+  const balanceEth: string = Utils.formatEther(weiValue)
 
   balanceTokens.push({
     name: 'Etherum',
@@ -108,34 +109,36 @@ async function setEth(address_: `0x${string}`, map: Map<string, string>, balance
     symbol: 'eth',
     decimals: 18,
     balanceValue: null
-  });
+  })
 }
 
 async function getBalances2(address_: `0x${string}`, network: Network): Promise<BalanceToken[]> {
   try {
-    config.network = network;
-    console.log("network is ",network);
-    const alchemy = new Alchemy(config as AlchemyConfig);
-    const balances = await alchemy.core.getTokenBalances(address_);
+    config.network = network
+    console.log('network is ', 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";
-    });
+      return (
+        token.tokenBalance !== '0x0000000000000000000000000000000000000000000000000000000000000000'
+      )
+    })
 
-    const balanceResults: BalanceToken[] = [];
+    const balanceResults: BalanceToken[] = []
 
     for (const token of nonZeroBalances) {
-      let balance: BigNumber = new BigNumber(0);
+      let balance: BigNumber = new BigNumber(0)
       if (token.tokenBalance != null) {
-        balance = new BigNumber(token.tokenBalance);
+        balance = new BigNumber(token.tokenBalance)
       }
 
-      const metadata = await alchemy.core.getTokenMetadata(token.contractAddress);
-      if (metadata.name == null || metadata.symbol == null) continue;
+      const metadata = await alchemy.core.getTokenMetadata(token.contractAddress)
+      if (metadata.name == null || metadata.symbol == null) continue
 
-      const decimals = metadata.decimals ?? 18;
+      const decimals = metadata.decimals ?? 18
 
-      const factor = new BigNumber(10).pow(decimals);
-      const formattedBalance = balance.div(factor).toFixed(2);
+      const factor = new BigNumber(10).pow(decimals)
+      const formattedBalance = balance.div(factor).toFixed(2)
 
       balanceResults.push({
         name: metadata.name,
@@ -144,49 +147,50 @@ async function getBalances2(address_: `0x${string}`, network: Network): Promise<
         symbol: metadata.symbol,
         decimals: decimals,
         balanceValue: null
-      });
+      })
     }
     return balanceResults
-
   } catch (error) {
     console.log(`${address_}`)
-    console.error(`Failed to fetch token balances:`, error);
-    return [];
+    console.error(`Failed to fetch token balances:`, error)
+    return []
   }
-};
+}
 
 /**
  * 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 
+ * 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;
+    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);
+      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>);
+    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(symbol, id)
     }
-    localStorage.setItem("TimeOfLastUpdate", Date.now().toString());
-    return;
+    localStorage.setItem('TimeOfLastUpdate', Date.now().toString())
+    return
   } catch (err) {
-    console.error('Error fetching tokens:', err);
-    return {};
+    console.error('Error fetching tokens:', err)
+    return {}
   }
 }
 
@@ -194,73 +198,72 @@ async function updateCoinGeckoTokensValue() {
  * 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[]) {
+async function getTokensValue(id: Map<string, string>, balanceTokens: BalanceToken[]) {
   try {
     if (id == null) {
-      return;
+      return
     }
 
-    const valueString = Array.from(id.values()).join(",");
-    console.log(`valueString is ${valueString}`);
+    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 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);
+    const response = await fetch(apiUrl, options)
 
     if (!response.ok) {
-      throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+      throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`)
     }
-    
-    const tokens: CoinGeckoToken[] = await response.json();
+
+    const tokens: CoinGeckoToken[] = await response.json()
 
     if (!Array.isArray(tokens)) {
-      throw new Error(`Expected an array but received: ${typeof 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());
+    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);
+        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}$`);
+            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;
+            console.warn(`Current price is invalid for token ID: ${tokenId}`)
+            token.balanceValue = null
           }
         } else {
-          console.log(`There is not correspondence for ${tokenId}`);
+          console.log(`There is not correspondence for ${tokenId}`)
         }
       }
-    });
-    
+    })
   } catch (err) {
-    console.error('Error fetching tokens:', err);
-    return;
+    console.error('Error fetching tokens:', err)
+    return
   }
 }
 
 function formatBalanceValue(price: number, quantity: number): string {
-  const result: number = price * quantity;
+  const result: number = price * quantity
 
-  if (result > 10000)
-    return result.toExponential(3);
-  else
-    return result.toPrecision(2);
+  if (result > 10000) return result.toExponential(3)
+  else return result.toPrecision(2)
 }
 
 function isMoreThanWeek(): boolean {
-  const storedTime = localStorage.getItem('TimeOfLastUpdate');
+  const storedTime = localStorage.getItem('TimeOfLastUpdate')
 
-  if (!storedTime)
-    return false;
+  if (!storedTime) return false
 
-  const storedTimestamp = parseInt(storedTime, 10);
-  const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;
-  const currentTime = Date.now();
+  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
+  return currentTime < storedTimestamp + oneWeekInMilliseconds
+}
diff --git a/src/assets/base.css b/src/assets/base.css
index 8e934af..e78494b 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -66,9 +66,7 @@ body {
     color 0.5s,
     background-color 0.5s;
   line-height: 1.6;
-  font-family:
-    -apple-system,
-    sans-serif;
+  font-family: -apple-system, sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/main.css b/src/assets/main.css
index eed4879..7ff4b32 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,7 +3,9 @@
 #app {
   margin: 0 0;
   font-weight: normal;
-  font-family: DM Sans, sans-serif;
+  font-family:
+    DM Sans,
+    sans-serif;
   background-color: rgba(3, 3, 3, 1);
 }
 
@@ -34,4 +36,4 @@ a,
   font-style: normal;
   font-display: auto;
   src: url('fonts/DMSans.ttf') format('truetype');
-}
\ No newline at end of file
+}
diff --git a/src/client.ts b/src/client.ts
new file mode 100644
index 0000000..6f3584d
--- /dev/null
+++ b/src/client.ts
@@ -0,0 +1,7 @@
+import { createPublicClient, http } from 'viem'
+import { mainnet } from 'viem/chains'
+
+export const client = createPublicClient({
+  chain: mainnet,
+  transport: http()
+})
diff --git a/src/components/chainSwitcher.vue b/src/components/chainSwitcher.vue
index 837180e..29a9ac3 100644
--- a/src/components/chainSwitcher.vue
+++ b/src/components/chainSwitcher.vue
@@ -1,12 +1,14 @@
 <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 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" :key="i" @click="switchChain(i)">
+          <a>{{ c.name }}</a>
+        </li>
+      </ul>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -17,29 +19,28 @@ import { useStore } from 'vuex'
 const store = useStore()
 
 const switchChain = (index: number) => {
-    SwitchChain(store, index)
-    console.log(chain.value.name)
+  SwitchChain(store, index)
+  console.log(chain.value.name)
 }
-
 </script>
 
 <style scoped>
 .btn {
-    background-color: #1E6BDE;
-    border: #1E6BDE;
-    color: white;
-    font-size: 1.2rem;
+  background-color: #1e6bde;
+  border: #1e6bde;
+  color: white;
+  font-size: 1.2rem;
 }
 
 .btn:hover {
-    background-color: #144a9c;
+  background-color: #144a9c;
 }
 .chain {
-    cursor: pointer;
-    color: white;
-    font-size: 1rem;
+  cursor: pointer;
+  color: white;
+  font-size: 1rem;
 }
 .dropdown-content {
-    background-color: #1E6BDE;
+  background-color: #1e6bde;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/main/ERC/ERC.vue b/src/components/main/ERC/ERC.vue
index 2dd8f35..bbd0340 100644
--- a/src/components/main/ERC/ERC.vue
+++ b/src/components/main/ERC/ERC.vue
@@ -1,17 +1,17 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'ERC',
-});
+  name: 'ERC'
+})
 </script>
 
 <script setup lang="ts">
-import TabsERC from '@/components/main/ERC/tab/Tabs.vue';
-import Token from './token/Token.vue';
-import NFT from './NFT/NFT.vue';
-import { ref } from 'vue';
-import Actions from '@/components/main/action/UserActionsButton.vue';
+import TabsERC from '@/components/main/ERC/tab/Tabs.vue'
+import Token from './token/Token.vue'
+import NFT from './NFT/NFT.vue'
+import { ref } from 'vue'
+import Actions from '@/components/main/action/UserActionsButton.vue'
 import UserProfile from '../user-info/UserProfile.vue'
 import UserInfos from '@/components/main/user-info/UserInfos.vue'
 
@@ -26,7 +26,7 @@ const currentTab = ref('Token')
     </Suspense>
     <Actions />
     <div id="ERC">
-    <TabsERC @tab-change="currentTab = $event" />
+      <TabsERC @tab-change="currentTab = $event" />
       <Token v-if="currentTab === 'Token'" />
       <NFT v-else />
     </div>
@@ -34,11 +34,11 @@ const currentTab = ref('Token')
 </template>
 
 <style>
-  #middle {
-    width: 45.347vw;
-    height: 80vh;
-    background-color: rgb(25, 25, 25);
-    border-radius: 20px;
-    overflow: hidden;
-  }
-</style>
\ No newline at end of file
+#middle {
+  width: 45.347vw;
+  height: 80vh;
+  background-color: rgb(25, 25, 25);
+  border-radius: 20px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/main/ERC/NFT/NFT.vue b/src/components/main/ERC/NFT/NFT.vue
index 0f0b09b..e47cbac 100644
--- a/src/components/main/ERC/NFT/NFT.vue
+++ b/src/components/main/ERC/NFT/NFT.vue
@@ -1,59 +1,59 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
-import { useStore } from 'vuex';
-import AddDialog from '@/components/main/ERC/NFT/add/AddDialog.vue';
-import AddBtn from '@/components/main/ERC/NFT/add/AddBtn.vue';
-import NFTCard from '@/components/main/ERC/NFT/NFTCard.vue';
-import { getNFTsForOwner } from '@/getNFTsForOwner';
+import { onMounted, ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import AddDialog from '@/components/main/ERC/NFT/add/AddDialog.vue'
+import AddBtn from '@/components/main/ERC/NFT/add/AddBtn.vue'
+import NFTCard from '@/components/main/ERC/NFT/NFTCard.vue'
+import { getNFTsForOwner } from '@/getNFTsForOwner'
 
-const store = useStore();
-const account = computed(() => store.getters.selectedAccount);
-const chain = computed(() => store.getters.chain);
+const store = useStore()
+const account = computed(() => store.getters.selectedAccount)
+const chain = computed(() => store.getters.chain)
 
-const dialogVisible = ref(false);
-const NFTsList = ref([]);
-let importedNFTs = window.localStorage.getItem('ImportedNFTs');
+const dialogVisible = ref(false)
+const NFTsList = ref([])
+let importedNFTs = window.localStorage.getItem('ImportedNFTs')
 
 onMounted(async () => {
   if (account.value) {
-    NFTsList.value = await getNFTsForOwner(account.value, chain.value.alchemyURLNFT);
+    NFTsList.value = await getNFTsForOwner(account.value, chain.value.alchemyURLNFT)
   }
 
   if (importedNFTs) {
-    importedNFTs = JSON.parse(importedNFTs);
+    importedNFTs = JSON.parse(importedNFTs)
   }
-});
+})
 </script>
 
 <template>
   <div id="container">
     <div v-for="NFT in NFTsList" :key="NFT.id">
-      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT"/>
+      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT" />
     </div>
     <div v-for="NFT in importedNFTs" :key="NFT.id">
-      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT"/>
+      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT" />
     </div>
-    <AddBtn :label="'NFT'" @click="dialogVisible = true" id="add-btn"/>
+    <AddBtn :label="'NFT'" @click="dialogVisible = true" id="add-btn" />
   </div>
-  <AddDialog v-if="dialogVisible" @close-dialog="dialogVisible = false"/>
+  <AddDialog v-if="dialogVisible" @close-dialog="dialogVisible = false" />
 </template>
 
 <style scoped>
-  #add-btn {
-    display: flex;
-    justify-content: center;
-    position: sticky;
-    bottom: 1vh;
-  }
-  #container {
-    margin-top: 3.9vh;
-    margin-inline: 15px;
-    height: 36vh;
-    overflow: scroll;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  #container::-webkit-scrollbar {
-    display: none;
-  }
-</style>
\ No newline at end of file
+#add-btn {
+  display: flex;
+  justify-content: center;
+  position: sticky;
+  bottom: 1vh;
+}
+#container {
+  margin-top: 3.9vh;
+  margin-inline: 15px;
+  height: 36vh;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+#container::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/src/components/main/ERC/NFT/NFTCard.vue b/src/components/main/ERC/NFT/NFTCard.vue
index 61f85d9..49b34ff 100644
--- a/src/components/main/ERC/NFT/NFTCard.vue
+++ b/src/components/main/ERC/NFT/NFTCard.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
-  import popUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
-  import { ref } from 'vue'
+import popUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
+import { ref } from 'vue'
 
-  const props = defineProps(['metadata'])
-  const popUp = ref(false)
-  const imgSrc = ref(props.metadata.image.originalUrl)
-  const truncate = (str: string, n: number) => str.length > n ? str.slice(0, n - 1) + '...' : str;
+const props = defineProps(['metadata'])
+const popUp = ref(false)
+const imgSrc = ref(props.metadata.image.originalUrl)
+const truncate = (str: string, n: number) => (str.length > n ? str.slice(0, n - 1) + '...' : str)
 </script>
 
 <template>
   <div id="card">
-    <img v-if="!metadata.contentType || metadata.contentType.substring(0, 5) === 'image'" :src="imgSrc" @error="imgSrc = '/src/assets/default.png'" alt="image" @click="popUp = true">
+    <img
+      v-if="!metadata.contentType || metadata.contentType.substring(0, 5) === 'image'"
+      :src="imgSrc"
+      @error="imgSrc = '/src/assets/default.png'"
+      alt="image"
+      @click="popUp = true"
+    />
     <video v-else id="video" loop autoplay muted @click="popUp = true">
-      <source :src="metadata.image.orginialUrl"/>
+      <source :src="metadata.image.orginialUrl" />
     </video>
     <div>
       <p id="title">{{ metadata.name }}</p>
@@ -20,48 +26,49 @@
     </div>
   </div>
   <Transition>
-    <popUpNFT v-if="popUp" :metadata="metadata" @close-popUp="popUp = false"/>
+    <popUpNFT v-if="popUp" :metadata="metadata" @close-popUp="popUp = false" />
   </Transition>
 </template>
 
 <style scoped>
-  .v-enter-active,
-  .v-leave-active {
-    transition: opacity 0.2s ease;
-  }
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease;
+}
 
-  .v-enter-from,
-  .v-leave-to {
-    opacity: 0;
-  }
-  #video {
-    width: 80px;
-    height: 100%;
-    object-fit: cover;
-    margin-right: 26px;
-    border-radius: 20px;
-  }
-  #card {
-    display:flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 2vh;
-  }
-  #title {
-    color: white;
-    font-size: 18px;
-  }
-  #desc {
-    font-size: 16px;
-    color: #A3A3A3;
-  }
-  img {
-    width: 80px;
-    height: 100%;
-    border-radius: 20px;
-    margin-right: 26px;
-  }
-  img:hover, #video:hover{
-    cursor: pointer;
-  }
-</style>
\ No newline at end of file
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+#video {
+  width: 80px;
+  height: 100%;
+  object-fit: cover;
+  margin-right: 26px;
+  border-radius: 20px;
+}
+#card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 2vh;
+}
+#title {
+  color: white;
+  font-size: 18px;
+}
+#desc {
+  font-size: 16px;
+  color: #a3a3a3;
+}
+img {
+  width: 80px;
+  height: 100%;
+  border-radius: 20px;
+  margin-right: 26px;
+}
+img:hover,
+#video:hover {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/main/ERC/NFT/PopUpNFT.vue b/src/components/main/ERC/NFT/PopUpNFT.vue
index 1f19c9d..84713b9 100644
--- a/src/components/main/ERC/NFT/PopUpNFT.vue
+++ b/src/components/main/ERC/NFT/PopUpNFT.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
+import { ref } from 'vue'
 
-  const props = defineProps(['visible', 'metadata'])
-  console.log(props.metadata)
-  const video = ref(false)
+const props = defineProps(['visible', 'metadata'])
+console.log(props.metadata)
+const video = ref(false)
 </script>
 
 <template>
   <div id="background">
     <div id="pop-up" @click="$emit('close-popUp')">
-      <img v-if="!video" :src="props.metadata.collection.bannerImageUrl" alt="image" id="banner-img" @error="video = true">
+      <img
+        v-if="!video"
+        :src="props.metadata.collection.bannerImageUrl"
+        alt="image"
+        id="banner-img"
+        @error="video = true"
+      />
       <video v-else id="banner-img" loop autoplay muted>
-        <source :src="props.metadata.collection.bannerImageUrl"/>
+        <source :src="props.metadata.collection.bannerImageUrl" />
       </video>
       <div id="metadata">
         <div id="text">
@@ -20,65 +26,65 @@
           <p id="description">{{ metadata.description }}</p>
           <p id="contract">{{ metadata.contract.address }}</p>
         </div>
-        <img :src="props.metadata.image.originalUrl" alt="image" id="NFT-img">
+        <img :src="props.metadata.image.originalUrl" alt="image" id="NFT-img" />
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-  #contract {
-    margin-top: 2vh;
-    color: white;
-    font-size: 1rem;
-  }
-  #text {
-    padding-right: 20px;
-  }
-  #NFT-img {
-    width: 15vw;
-    height: auto;
-    border-radius: 5px;
-  }
-  #collection-title {
-    color: darkgrey;
-    font-size: 1rem;
-    font-weight: bold;
-  }
-  #description {
-    color: grey;
-    font-size: 1rem;
-  }
-  #title {
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
-  }
-  #metadata {
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #banner-img {
-    width: 100%;
-  }
-  #background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-  }
-  #pop-up {
-    width: 50vw;
-    background-color: rgb(25, 25, 25);
-    border-radius: 20px;
-    overflow: hidden;
-  }
-</style>
\ No newline at end of file
+#contract {
+  margin-top: 2vh;
+  color: white;
+  font-size: 1rem;
+}
+#text {
+  padding-right: 20px;
+}
+#NFT-img {
+  width: 15vw;
+  height: auto;
+  border-radius: 5px;
+}
+#collection-title {
+  color: darkgrey;
+  font-size: 1rem;
+  font-weight: bold;
+}
+#description {
+  color: grey;
+  font-size: 1rem;
+}
+#title {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+}
+#metadata {
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#banner-img {
+  width: 100%;
+}
+#background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+#pop-up {
+  width: 50vw;
+  background-color: rgb(25, 25, 25);
+  border-radius: 20px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/main/ERC/NFT/add/AddBtn.vue b/src/components/main/ERC/NFT/add/AddBtn.vue
index 99bc374..3b905a1 100644
--- a/src/components/main/ERC/NFT/add/AddBtn.vue
+++ b/src/components/main/ERC/NFT/add/AddBtn.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'AddBtn',
@@ -9,37 +9,35 @@ export default defineComponent({
       required: true
     }
   }
-});
+})
 </script>
 
 <template>
   <div id="center">
-    <button id="btn">
-      Add {{ label }}
-    </button>
+    <button id="btn">Add {{ label }}</button>
   </div>
 </template>
 
 <style scoped>
-  #btn {
-    background-color: rgb(25, 25, 25);
-    color: white;
-    font-size: 16px;
-    border: 2px solid #1E6BDE;
-    width: 15.5vw;
-    height: 5vh;
-    border-radius: 25px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  #btn:hover {
-    background-color: #1E6BDE;
-  }
-  #btn:active {
-    background-color: #1a5cbd;
-    border: 2px solid #1a5cbd;
-  }
-</style>
\ No newline at end of file
+#btn {
+  background-color: rgb(25, 25, 25);
+  color: white;
+  font-size: 16px;
+  border: 2px solid #1e6bde;
+  width: 15.5vw;
+  height: 5vh;
+  border-radius: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+#btn:hover {
+  background-color: #1e6bde;
+}
+#btn:active {
+  background-color: #1a5cbd;
+  border: 2px solid #1a5cbd;
+}
+</style>
diff --git a/src/components/main/ERC/NFT/add/AddDialog.vue b/src/components/main/ERC/NFT/add/AddDialog.vue
index 8854402..ec7840e 100644
--- a/src/components/main/ERC/NFT/add/AddDialog.vue
+++ b/src/components/main/ERC/NFT/add/AddDialog.vue
@@ -1,38 +1,38 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { getNFTMetadata } from '@/getNFTMetadata'
-  import { addImportedNFTs} from '@/updateWallet'
-  import PopUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
+import { ref } from 'vue'
+import { getNFTMetadata } from '@/getNFTMetadata'
+import { addImportedNFTs } from '@/updateWallet'
+import PopUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
 
-  const emit = defineEmits(['close-dialog'])
-  const smartContract = ref('0x0af85e2dee602b0a14d50f4fc1096c2f7fbe60f2')
-  const tokenID = ref(102)
-  const metadata = ref(null)
-  const error = ref(false)
-  const displayImported = ref(false)
-  const addNFT = async () => {
-    metadata.value = await getNFTMetadata(smartContract.value, tokenID.value, "eth-mainnet")
-    error.value = addImportedNFTs(metadata.value)
-    if (!error.value) {
-      displayImported.value = true
-    }
-  }
-  const closeDialog = () => {
-    displayImported.value = false;
-    emit('close-dialog')
+const emit = defineEmits(['close-dialog'])
+const smartContract = ref('0x0af85e2dee602b0a14d50f4fc1096c2f7fbe60f2')
+const tokenID = ref(102)
+const metadata = ref(null)
+const error = ref(false)
+const displayImported = ref(false)
+const addNFT = async () => {
+  metadata.value = await getNFTMetadata(smartContract.value, tokenID.value, 'eth-mainnet')
+  error.value = addImportedNFTs(metadata.value)
+  if (!error.value) {
+    displayImported.value = true
   }
+}
+const closeDialog = () => {
+  displayImported.value = false
+  emit('close-dialog')
+}
 </script>
 
 <template>
   <div id="transparent">
     <div id="dialog">
-      <div :style="{marginBottom:'2vh'}">
+      <div :style="{ marginBottom: '2vh' }">
         <label>Smart contract</label>
-        <input v-model="smartContract"/>
+        <input v-model="smartContract" />
       </div>
-      <div :style="{marginBottom:'2vh', display:'flex', flexDirection:'column'}">
+      <div :style="{ marginBottom: '2vh', display: 'flex', flexDirection: 'column' }">
         <label>Token Id</label>
-        <input v-model="tokenID" :style="{width:'50%'}"/>
+        <input v-model="tokenID" :style="{ width: '50%' }" />
       </div>
       <div id="btn">
         <button @click="addNFT">Import</button>
@@ -40,72 +40,72 @@
       </div>
       <p v-if="error">This NFT is already imported.</p>
       <Transition>
-        <PopUpNFT v-if="displayImported" :metadata="metadata" @close-popUp="closeDialog"/>
+        <PopUpNFT v-if="displayImported" :metadata="metadata" @close-popUp="closeDialog" />
       </Transition>
     </div>
   </div>
 </template>
 
 <style scoped>
-  .v-enter-active,
-  .v-leave-active {
-    transition: opacity 0.2s ease;
-  }
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease;
+}
 
-  .v-enter-from,
-  .v-leave-to {
-    opacity: 0;
-  }
-  button {
-    padding: 10px;
-    border-radius: 5px;
-    outline: none;
-    border: none;
-    font-weight: bold;
-    font-size: 0.9rem;
-    background: #1E6BDE;
-    color: white;
-    cursor: pointer;
-  }
-  button:hover {
-    background-color: #1E6BDE;
-  }
-  #btn {
-    display: flex;
-    justify-content: space-between;
-  }
-  label {
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
-  }
-  input {
-    width: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    outline: none;
-    border: 1px solid #535353;
-    background: none;
-    color: white;
-  }
-  #transparent {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 100;
-  }
-  #dialog {
-    width: 30vw;
-    background-color: rgb(25, 25, 25);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    padding: 30px;
-  }
-</style>
\ No newline at end of file
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+button {
+  padding: 10px;
+  border-radius: 5px;
+  outline: none;
+  border: none;
+  font-weight: bold;
+  font-size: 0.9rem;
+  background: #1e6bde;
+  color: white;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #1e6bde;
+}
+#btn {
+  display: flex;
+  justify-content: space-between;
+}
+label {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+}
+input {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  outline: none;
+  border: 1px solid #535353;
+  background: none;
+  color: white;
+}
+#transparent {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+#dialog {
+  width: 30vw;
+  background-color: rgb(25, 25, 25);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+}
+</style>
diff --git a/src/components/main/ERC/tab/Tab.vue b/src/components/main/ERC/tab/Tab.vue
index 7606a44..ea16c3b 100644
--- a/src/components/main/ERC/tab/Tab.vue
+++ b/src/components/main/ERC/tab/Tab.vue
@@ -1,13 +1,13 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'TabERC',
   props: {
     name: String,
-    selected: Boolean,
+    selected: Boolean
   }
-});
+})
 </script>
 
 <template>
@@ -33,9 +33,9 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1E6BDE;
+  background-color: #1e6bde;
   border-radius: 6px;
   height: 100%;
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/main/ERC/tab/Tabs.vue b/src/components/main/ERC/tab/Tabs.vue
index 531e6c6..aab575e 100644
--- a/src/components/main/ERC/tab/Tabs.vue
+++ b/src/components/main/ERC/tab/Tabs.vue
@@ -1,24 +1,24 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import TabERC from './Tab.vue';
+import { defineComponent } from 'vue'
+import TabERC from './Tab.vue'
 
 export default defineComponent({
   name: 'TabsERC',
   components: {
-    TabERC,
+    TabERC
   },
   data() {
     return {
       tabs: ['Token', 'NFT'],
-      selectedTab: 'Token',
-    };
+      selectedTab: 'Token'
+    }
   },
   watch: {
     selectedTab(newTab) {
-      this.$emit('tab-change', newTab);
-    },
-  },
-});
+      this.$emit('tab-change', newTab)
+    }
+  }
+})
 </script>
 
 <template>
@@ -29,18 +29,18 @@ export default defineComponent({
       :name="tab"
       :selected="tab === selectedTab"
       @select="selectedTab = $event"
-      />
+    />
   </div>
 </template>
 
 <style scoped>
-  #tabs {
-    border: 1px solid #4E4E4E;
-    height: 4vh;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: row;
-    margin-inline: 15px;
-    padding: 4px;
-  }
-</style>
\ No newline at end of file
+#tabs {
+  border: 1px solid #4e4e4e;
+  height: 4vh;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  margin-inline: 15px;
+  padding: 4px;
+}
+</style>
diff --git a/src/components/main/ERC/token/ButtonBalance.vue b/src/components/main/ERC/token/ButtonBalance.vue
index 5c78fd7..a52858b 100644
--- a/src/components/main/ERC/token/ButtonBalance.vue
+++ b/src/components/main/ERC/token/ButtonBalance.vue
@@ -3,8 +3,8 @@
     <div class="input-container">
       <input type="text" v-model="userAddress" placeholder="Get balance for another address..." />
     </div>
-    <p style="margin-left: 15px;" v-if="loading">Loading...</p>
-    <div v-if="balances.length > 0" class="scroll-container scrollbar"  id="tokens">
+    <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">
@@ -23,72 +23,81 @@
         </li>
       </ul>
     </div>
-    <p v-if="error" style="margin: 5px 14px;">{{ error }}</p>
+    <p v-if="error" style="margin: 5px 14px">{{ error }}</p>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watchEffect, watch } from 'vue';
-import { processAll } from '../../../../alchemy';
+import { defineComponent, computed, ref, watchEffect, watch } from 'vue'
+import { processAll } from '../../../../alchemy'
 import { chain } from '../../../../multichain'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'TokenBalances',
   setup() {
-    const store = useStore();
-    const myChain = computed(() => store.getters.chain);
-    const currentMode = ref(chain.value.alchemyNetwork);
-
-    const userAddress = ref('');
-    const balances = ref<Array<{ name: string; logo: string; balance: string; symbol: string; decimals: number; balanceValue: string | null }>>([]);
-    const error = ref('');
-    const loading = ref(false);
-
-    const account = computed(() => store?.getters?.selectedAccount || '');
+    const store = useStore()
+    const myChain = computed(() => store.getters.chain)
+    const currentMode = ref(chain.value.alchemyNetwork)
+
+    const userAddress = ref('')
+    const balances = ref<
+      Array<{
+        name: string
+        logo: string
+        balance: string
+        symbol: string
+        decimals: number
+        balanceValue: string | null
+      }>
+    >([])
+    const error = ref('')
+    const loading = ref(false)
+
+    const account = computed(() => store?.getters?.selectedAccount || '')
 
     const addressToDisplay = computed(() => {
-      return userAddress.value.trim() || account.value;
-    });
+      return userAddress.value.trim() || account.value
+    })
 
     const handleButtonClick = async () => {
-      loading.value = true;
-      error.value = '';
-      balances.value = [];
+      loading.value = true
+      error.value = ''
+      balances.value = []
       try {
-        const addressToUse = addressToDisplay.value;
+        const addressToUse = addressToDisplay.value
         if (!addressToUse) {
-          error.value = 'No address provided.';
-          return;
+          error.value = 'No address provided.'
+          return
         }
-        balances.value = await processAll(addressToUse, currentMode.value);
+        balances.value = await processAll(addressToUse, currentMode.value)
         if (balances.value.length === 0) {
-          error.value = `No balances found for the address: ${addressToUse}.`;
+          error.value = `No balances found for the address: ${addressToUse}.`
         }
       } catch (err) {
-        error.value = 'An error occurred while fetching balances.';
+        error.value = 'An error occurred while fetching balances.'
       } finally {
-        loading.value = false;
+        loading.value = false
       }
-    };
+    }
 
     watch(
       () => chain.value,
       (newChain) => {
-        currentMode.value = newChain.alchemyNetwork; // Update currentMode when chain changes
-        handleButtonClick(); // Optionally refetch balances on chain change
+        currentMode.value = newChain.alchemyNetwork // Update currentMode when chain changes
+        handleButtonClick() // Optionally refetch balances on chain change
       }
-    );
+    )
 
     watchEffect(() => {
-      handleButtonClick();
-    });
+      handleButtonClick()
+    })
 
     watchEffect(() => {
       if (myChain.value) {
-        handleButtonClick();
+        handleButtonClick()
       }
-    });
+    })
 
     return {
       currentMode,
@@ -98,9 +107,9 @@ export default defineComponent({
       loading,
       addressToDisplay,
       handleButtonClick
-    };
+    }
   }
-});
+})
 </script>
 
 <style scoped>
@@ -157,7 +166,7 @@ export default defineComponent({
   flex: 1;
   text-align: center;
   font-size: 16px;
-  max-width: 35%; 
+  max-width: 35%;
 }
 
 .SymbolPrice {
@@ -180,7 +189,6 @@ export default defineComponent({
   white-space: nowrap;
 }
 
-
 .input-container {
   display: flex;
   align-items: center;
@@ -188,7 +196,7 @@ export default defineComponent({
   margin: 0 14px;
 }
 
-input[type="text"] {
+input[type='text'] {
   background-color: #333;
   color: white;
   border: 1px solid #555;
@@ -200,17 +208,17 @@ input[type="text"] {
   transition: border-color 0.3s ease;
 }
 
-input[type="text"]::placeholder {
+input[type='text']::placeholder {
   color: #aaa;
 }
 
-input[type="text"]:focus {
+input[type='text']:focus {
   border-color: #777; /* Lighter border color on focus */
   outline: none; /* Remove default outline */
 }
 
 button {
-  background-color: #007BFF; /* Primary button color */
+  background-color: #007bff; /* Primary button color */
   color: white; /* Text color of the button */
   border: none; /* Remove default border */
   border-radius: 10px; /* Rounded corners */
@@ -224,30 +232,25 @@ button:hover {
   background-color: #0056b3; /* Darker button color on hover */
 }
 
-.scrollbar
-{
-	margin-bottom: 25px;
+.scrollbar {
+  margin-bottom: 25px;
   scrollbar-width: none;
 }
 
-#tokens::-webkit-scrollbar-track
-{
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	border-radius: 10px;
-	background-color: #191919;
+#tokens::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #191919;
 }
 
-#tokens::-webkit-scrollbar
-{
-	width: 12px;
-	background-color: #191919;
+#tokens::-webkit-scrollbar {
+  width: 12px;
+  background-color: #191919;
 }
 
-#tokens::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: #2c3e50;
+#tokens::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #2c3e50;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/main/ERC/token/Token.vue b/src/components/main/ERC/token/Token.vue
index c23120b..279e0be 100644
--- a/src/components/main/ERC/token/Token.vue
+++ b/src/components/main/ERC/token/Token.vue
@@ -1,13 +1,13 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import DisplayTokens from './ButtonBalance.vue';
+import { defineComponent } from 'vue'
+import DisplayTokens from './ButtonBalance.vue'
 
 export default defineComponent({
   name: 'TOKEN',
   components: {
-    DisplayTokens,
-  },
-});
+    DisplayTokens
+  }
+})
 </script>
 
 <template>
@@ -17,9 +17,9 @@ export default defineComponent({
 </template>
 
 <style scoped>
-  #container {
-    margin-top: 3.9vh;
-    margin-bottom: 2.63vh;
-    height: 27vh;
-  }
-</style>
\ No newline at end of file
+#container {
+  margin-top: 3.9vh;
+  margin-bottom: 2.63vh;
+  height: 27vh;
+}
+</style>
diff --git a/src/components/main/VerticalNavbar.vue b/src/components/main/VerticalNavbar.vue
index 84409ff..4778b84 100644
--- a/src/components/main/VerticalNavbar.vue
+++ b/src/components/main/VerticalNavbar.vue
@@ -1,20 +1,19 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'VerticalNavbar',
-});
+  name: 'VerticalNavbar'
+})
 </script>
 
 <template>
-  <div id="vertical-navbar">
-  </div>
+  <div id="vertical-navbar"></div>
 </template>
 
 <style scoped>
-  #vertical-navbar {
-    width: 20.9vw;
-    height: 90vh;
-    background-color: rgb(25, 25, 25);
-  }
-</style>
\ No newline at end of file
+#vertical-navbar {
+  width: 20.9vw;
+  height: 90vh;
+  background-color: rgb(25, 25, 25);
+}
+</style>
diff --git a/src/components/main/action/UserActionsButton.vue b/src/components/main/action/UserActionsButton.vue
index c6d75b4..80c68e0 100644
--- a/src/components/main/action/UserActionsButton.vue
+++ b/src/components/main/action/UserActionsButton.vue
@@ -2,12 +2,12 @@
 import UserActionsDialog from './UserActionsDialog.vue'
 import { ref } from 'vue'
 
-const isAction = ref(false);
-const typeOfAction = ref('');
+const isAction = ref(false)
+const typeOfAction = ref('')
 
 const manageDialog = (type: string) => {
-  isAction.value = !isAction.value;
-  typeOfAction.value = type;
+  isAction.value = !isAction.value
+  typeOfAction.value = type
 }
 </script>
 
@@ -18,33 +18,33 @@ const manageDialog = (type: string) => {
       <button>Swap</button>
       <button>Bridge</button>
     </div>
-    <UserActionsDialog v-if="isAction" :type="typeOfAction" @close-dialog="manageDialog"/>
+    <UserActionsDialog v-if="isAction" :type="typeOfAction" @close-dialog="manageDialog" />
   </div>
 </template>
 
 <style scoped>
-  #btn {
-    display: flex;
-    justify-content: center;
-    padding-inline: 44px;
-  }
-  button {
-    width: 100%;
-    height: 3.9vh;
-    border-radius: 10px;
-    border: none;
-    background-color: #1E6BDE;
-    color: white;
-    font-size: 20px;
-    margin-inline: 10px;
-  }
-  button:hover {
-    cursor: pointer;
-  }
-  button:active {
-    background-color: #1a5cbd;
-  }
-  #container {
-    height: 7.8vh;
-  }
-</style>
\ No newline at end of file
+#btn {
+  display: flex;
+  justify-content: center;
+  padding-inline: 44px;
+}
+button {
+  width: 100%;
+  height: 3.9vh;
+  border-radius: 10px;
+  border: none;
+  background-color: #1e6bde;
+  color: white;
+  font-size: 20px;
+  margin-inline: 10px;
+}
+button:hover {
+  cursor: pointer;
+}
+button:active {
+  background-color: #1a5cbd;
+}
+#container {
+  height: 7.8vh;
+}
+</style>
diff --git a/src/components/main/action/UserActionsDialog.vue b/src/components/main/action/UserActionsDialog.vue
index afefda7..5a893b7 100644
--- a/src/components/main/action/UserActionsDialog.vue
+++ b/src/components/main/action/UserActionsDialog.vue
@@ -6,7 +6,7 @@ defineProps(['type'])
 
 <template>
   <div id="background">
-    <SendAction v-if="type === 'send'" @close-dialog="$emit('close-dialog')"/>
+    <SendAction v-if="type === 'send'" @close-dialog="$emit('close-dialog')" />
   </div>
 </template>
 
@@ -16,4 +16,4 @@ defineProps(['type'])
   justify-content: center;
   padding-inline: 44px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/main/action/actions/SendAction.vue b/src/components/main/action/actions/SendAction.vue
index 600d191..bbfb509 100644
--- a/src/components/main/action/actions/SendAction.vue
+++ b/src/components/main/action/actions/SendAction.vue
@@ -15,9 +15,9 @@ const send = async () => {
 </script>
 
 <template>
-  <input v-model="address" placeholder="address"/>
-  <input v-model="amount" placeholder="amount"/>
-  <button v-if="address.startsWith('0x') && amount > 0"  @click="send()">Send</button>
+  <input v-model="address" placeholder="address" />
+  <input v-model="amount" placeholder="amount" />
+  <button v-if="address.startsWith('0x') && amount > 0" @click="send()">Send</button>
   <button v-else @click="$emit('close-dialog')" id="cancelBtn">Cancel</button>
 </template>
 
@@ -35,7 +35,7 @@ input {
 button {
   width: 10vw;
   margin-inline: 10px;
-  background-color: #1E6BDE;
+  background-color: #1e6bde;
 }
 
 button:hover {
@@ -46,11 +46,12 @@ button:active {
   background-color: #1a5cbd;
 }
 
-input, button {
+input,
+button {
   outline: none;
   border: none;
   border-radius: 10px;
   color: white;
   font-size: 15px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/main/user-info/TooltipCopy.vue b/src/components/main/user-info/TooltipCopy.vue
index 471a776..9cb0e40 100644
--- a/src/components/main/user-info/TooltipCopy.vue
+++ b/src/components/main/user-info/TooltipCopy.vue
@@ -1,57 +1,63 @@
 <script setup lang="ts">
-  import Square2StackIcon from '@/assets/Square2StackIcon.svg'
-  import { ref } from 'vue'
+import Square2StackIcon from '@/assets/Square2StackIcon.svg'
+import { ref } from 'vue'
 
-  const props = defineProps(['address'])
-  const copyAddress = () => {
-    navigator.clipboard.writeText(props.address)
-    tooltipText.value = 'Copied!'
-    setTimeout(resetTooltipText, 1000)
-  }
-  const showTooltip = ref(false)
-  const tooltipText = ref('Copy address')
-  const resetTooltipText = () => {
-    tooltipText.value = 'Copy address'
-  }
+const props = defineProps(['address'])
+const copyAddress = () => {
+  navigator.clipboard.writeText(props.address)
+  tooltipText.value = 'Copied!'
+  setTimeout(resetTooltipText, 1000)
+}
+const showTooltip = ref(false)
+const tooltipText = ref('Copy address')
+const resetTooltipText = () => {
+  tooltipText.value = 'Copy address'
+}
 </script>
 
 <template>
   <div class="tooltip-container">
-    <img :src="Square2StackIcon" alt="icon" @click="copyAddress()" @mouseover="showTooltip = true" @mouseout="showTooltip = false"/>
+    <img
+      :src="Square2StackIcon"
+      alt="icon"
+      @click="copyAddress()"
+      @mouseover="showTooltip = true"
+      @mouseout="showTooltip = false"
+    />
     <span v-if="showTooltip" class="tooltip-text">{{ tooltipText }}</span>
   </div>
 </template>
 
 <style scoped>
-  .tooltip-container {
-    position: relative;
-    display: inline-block;
-  }
-  img {
-    width: 24px;
-    height: 24px;
-  }
-  img:hover {
-    cursor: pointer;
-  }
-  .tooltip-text {
-    visibility: hidden;
-    width: 120px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
-  .tooltip-container:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-  }
-</style>
\ No newline at end of file
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+img {
+  width: 24px;
+  height: 24px;
+}
+img:hover {
+  cursor: pointer;
+}
+.tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.tooltip-container:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+</style>
diff --git a/src/components/main/user-info/UserInfos.vue b/src/components/main/user-info/UserInfos.vue
index 3a37eeb..6658a5c 100644
--- a/src/components/main/user-info/UserInfos.vue
+++ b/src/components/main/user-info/UserInfos.vue
@@ -1,85 +1,91 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue';
-import { useStore } from 'vuex';
-import { getBalance } from '@/getBalance';
-import { exchangeRates } from '@/exchangeRates';
+import { ref, computed, watchEffect } from 'vue'
+import { useStore } from 'vuex'
+import { getBalance } from '@/getBalance'
+import { exchangeRates } from '@/exchangeRates'
 
-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);
+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);
+ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD)
 watchEffect(async () => {
   if (account.value) {
-    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+    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)));
+    balance.value = await getBalance(account.value).then(
+      (res: number) => Number(res) / Number(BigInt(1000000000000000000))
+    )
   }
-});
+})
 </script>
 
 <template>
   <div id="container">
     <div id="token">
-      <img src="/img/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>
+        <p v-if="balance !== null && ETH !== null">
+          ${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD
+        </p>
       </div>
     </div>
     <div id="exchange">
       <h2>1 ETH</h2>
-      <img src="../../../assets/arrow.svg" alt="arrow" id="arrow"/>
+      <img src="../../../assets/arrow.svg" alt="arrow" id="arrow" />
       <h2 v-if="ETH !== null">{{ ETH }} USD</h2>
     </div>
   </div>
 </template>
 
 <style scoped>
-  #container {
-    padding-block:30px;
-    padding-inline: 36px;
-    height: 17.2vh;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  #exchange {
-    display: flex;
-    flex-direction: row;
-  }
-  h1 {
-    color: white;
-    font-size: 30px;
-  }
-  h2 {
-    color: white;
-    font-size: 18px;
-  }
-  p {
-    color: #808080;
-    font-size: 18px;
-  }
-  #arrow {
-    padding-inline: 20px;
-  }
-  #eth-logo {
-    height: 57px;
-    width: 57px;
-    background-color: white;
-    border-radius: 50px;
-    margin-right: 26px;
-    padding: 5px;
-  }
-  #token {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-</style>
\ No newline at end of file
+#container {
+  padding-block: 30px;
+  padding-inline: 36px;
+  height: 17.2vh;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+#exchange {
+  display: flex;
+  flex-direction: row;
+}
+h1 {
+  color: white;
+  font-size: 30px;
+}
+h2 {
+  color: white;
+  font-size: 18px;
+}
+p {
+  color: #808080;
+  font-size: 18px;
+}
+#arrow {
+  padding-inline: 20px;
+}
+#eth-logo {
+  height: 57px;
+  width: 57px;
+  background-color: white;
+  border-radius: 50px;
+  margin-right: 26px;
+  padding: 5px;
+}
+#token {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>
diff --git a/src/components/main/user-info/UserProfile.vue b/src/components/main/user-info/UserProfile.vue
index 2b944a1..b168fca 100644
--- a/src/components/main/user-info/UserProfile.vue
+++ b/src/components/main/user-info/UserProfile.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Dots3Icon from "../../../assets/3DotsIcon.svg"
+import Dots3Icon from '../../../assets/3DotsIcon.svg'
 import TooltipCopy from './TooltipCopy.vue'
 import { computed } from 'vue'
 import { useStore } from 'vuex'
@@ -7,8 +7,10 @@ import { useStore } from 'vuex'
 const store = useStore()
 const selectedAccount = computed(() => store.getters.selectedAccount)
 const reducedAddress = computed(() => {
-  return selectedAccount.value ? `${selectedAccount.value.slice(0, 7)}...${selectedAccount.value.slice(-5)}` : null;
-});
+  return selectedAccount.value
+    ? `${selectedAccount.value.slice(0, 7)}...${selectedAccount.value.slice(-5)}`
+    : null
+})
 </script>
 
 <template>
@@ -17,7 +19,8 @@ const reducedAddress = computed(() => {
       <h1 id="name">Main Account</h1>
       <div id="address" v-if="selectedAccount">
         <p>{{ reducedAddress }}</p>
-        <TooltipCopy :address="selectedAccount"/> <!-- Adresse complète passée pour la copie -->
+        <TooltipCopy :address="selectedAccount" />
+        <!-- Adresse complète passée pour la copie -->
       </div>
       <div v-else>
         <p>No account selected</p>
@@ -63,6 +66,6 @@ img:hover {
 #bottomLine {
   width: 100%;
   height: 1px;
-  background-color: #4E4E4E;
+  background-color: #4e4e4e;
 }
 </style>
diff --git a/src/components/passwordPage.vue b/src/components/passwordPage.vue
index a177b05..5d7015f 100644
--- a/src/components/passwordPage.vue
+++ b/src/components/passwordPage.vue
@@ -1,21 +1,26 @@
 <template>
-    <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" @keyup.enter="submitPassword" 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 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"
+        @keyup.enter="submitPassword"
+        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 { ref, onMounted } from 'vue'
 import CryptoJS from 'crypto-js'
 import { useStore } from 'vuex'
 
@@ -25,36 +30,36 @@ const havePassword = ref(false)
 const emit = defineEmits(['isOpen'])
 
 const createPassword = () => {
-    const hashedPassword = CryptoJS.SHA256(password.value).toString()
-    localStorage.setItem('password', hashedPassword)
-    localStorage.setItem('open-wallet', 'true')
+  const hashedPassword = CryptoJS.SHA256(password.value).toString()
+  localStorage.setItem('password', hashedPassword)
+  localStorage.setItem('open-wallet', 'true')
 
-    store.dispatch('addPassword', password.value)
-    emit('isOpen')
+  store.dispatch('addPassword', password.value)
+  emit('isOpen')
 }
 
 const submitPassword = () => {
-    const storedPassword = localStorage.getItem('password')
-    if (!storedPassword) {
-        alert('No password set')
-        return
-    }
-    const hashedInputPassword = CryptoJS.SHA256(password.value).toString()
-    if (hashedInputPassword === storedPassword) {
-        localStorage.setItem('open-wallet', 'true')
-        emit('isOpen')
-        store.dispatch('addPassword', password.value)
-    } else {
-        alert('Incorrect password')
-        password.value = ''
-    }
+  const storedPassword = localStorage.getItem('password')
+  if (!storedPassword) {
+    alert('No password set')
+    return
+  }
+  const hashedInputPassword = CryptoJS.SHA256(password.value).toString()
+  if (hashedInputPassword === storedPassword) {
+    localStorage.setItem('open-wallet', 'true')
+    emit('isOpen')
+    store.dispatch('addPassword', password.value)
+  } else {
+    alert('Incorrect password')
+    password.value = ''
+  }
 }
 
 onMounted(() => {
-    const storedPassword = localStorage.getItem('password')
-    if (storedPassword) {
-        havePassword.value = true
-    }
+  const storedPassword = localStorage.getItem('password')
+  if (storedPassword) {
+    havePassword.value = true
+  }
 })
 </script>
 
@@ -66,7 +71,7 @@ onMounted(() => {
   justify-content: center;
   height: 100vh;
   width: 100vw;
-  background-color: #1E1E1E;
+  background-color: #1e1e1e;
   padding: 20px;
 }
 
@@ -76,7 +81,7 @@ onMounted(() => {
 }
 
 .title {
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 30px;
   margin-bottom: 20px;
   font-weight: bold;
@@ -84,25 +89,25 @@ onMounted(() => {
   letter-spacing: 1.5px;
 }
 
-input[type="password"] {
+input[type='password'] {
   width: 300px;
   padding: 15px;
   font-size: 16px;
-  border: 2px solid #4CAF50;
+  border: 2px solid #4caf50;
   border-radius: 8px;
   outline: none;
   margin-bottom: 20px;
-  background-color: #2C2C2C;
+  background-color: #2c2c2c;
   color: white;
   transition: border-color 0.3s;
 }
 
-input[type="password"]:focus {
-  border-color: #6FFF78;
+input[type='password']:focus {
+  border-color: #6fff78;
 }
 
 .btn {
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   border: none;
   padding: 15px 30px;
@@ -111,11 +116,13 @@ input[type="password"]:focus {
   border-radius: 30px;
   margin-left: 10px;
   cursor: pointer;
-  transition: background-color 0.3s, transform 0.2s;
+  transition:
+    background-color 0.3s,
+    transform 0.2s;
 }
 
 .btn:hover {
-  background-color: #45A049;
+  background-color: #45a049;
   transform: translateY(-2px);
 }
 
@@ -125,11 +132,11 @@ input[type="password"]:focus {
 }
 
 input::placeholder {
-  color: #B0B0B0;
+  color: #b0b0b0;
 }
 
 @media (max-width: 768px) {
-  input[type="password"] {
+  input[type='password'] {
     width: 80%;
   }
 
diff --git a/src/components/transaction/btn.vue b/src/components/transaction/btn.vue
deleted file mode 100644
index 5a8a5d0..0000000
--- a/src/components/transaction/btn.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <div class="btn">
-        <h2>{{  props.txt }}</h2>
-    </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    txt: String
-})
-</script>
-
-<style scoped>
-.btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    height: 60px;
-    width: 200px;
-    border-radius: 40px;
-    background-color: #1E6BDE;
-    cursor: pointer;
-}
-
-h2 {
-    color: white;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/transaction/btnTransaction.vue b/src/components/transaction/btnTransaction.vue
new file mode 100644
index 0000000..1e2da7d
--- /dev/null
+++ b/src/components/transaction/btnTransaction.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="btn">
+    <h2>{{ props.txt }}</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  txt: String
+})
+</script>
+
+<style scoped>
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 60px;
+  width: 200px;
+  border-radius: 40px;
+  background-color: #1e6bde;
+  cursor: pointer;
+}
+
+h2 {
+  color: white;
+}
+</style>
diff --git a/src/components/transaction/transaction.vue b/src/components/transaction/transaction.vue
deleted file mode 100644
index 4672c90..0000000
--- a/src/components/transaction/transaction.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-  <div class="box" @click="openPopup()">
-    <div class="icone">
-      <svg style="fill: #D72F2F" v-if="fromMe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z"/></svg>
-      <svg style="fill: #33BF41" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 352c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v82.7L342.6 137.4c-12.5-12.5-32.8-12.5-45.3 0L192 242.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0L320 205.3 466.7 352H384z"/></svg>
-    </div>
-    <div class="info">
-      <h4 v-if="fromMe">
-        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
-          Sent > 0.0000000001 {{ transInfos.devise }}
-        </template>
-        <template v-else>
-          Sent {{ transInfos.value }} {{ transInfos.devise }}
-        </template></h4>
-      <h4 v-else>
-        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
-          Received > 0.0000000001 {{ transInfos.devise }}
-        </template>
-        <template v-else>
-          Received {{ transInfos.value }} {{ transInfos.devise }}
-        </template>
-      </h4>
-      <h5 v-if="fromMe">{{ transInfos.date }} to {{ reduceHashSize(transInfos.to) }}</h5>
-      <h5 v-else>{{ transInfos.date }} from {{ reduceHashSize(transInfos.from) }}</h5>
-    </div>
-    <div class="status">
-      <h5>Status</h5>
-      <svg style="fill: #33BF41" v-if="transInfos.status == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-      <svg style="fill: #D72F2F" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
-    </div>
-  </div>
-  <transactionInfos v-if="popUp == true" :data="transInfos" @close-popUp="popUp = false" />
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useStore } from 'vuex';
-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,
-  devise: String,
-  from: Boolean
-});
-
-var pubClient: PublicClient;
-
-const store = useStore();
-const account = computed(() => store.getters.selectedAccount);
-const popUp = ref(false);
-const fromMe = ref(props.from);
-
-interface Transaction {
-  hash: string,
-  to: string,
-  from: string,
-  blockHash: string,
-  blockNumber: number,
-  value: string,
-  status: string,
-  timestamp: number,
-  date: string,
-  devise: string,
-  logs: {
-    transaction: any,
-    receipt: any,
-    erc20: any,
-  }
-}
-
-const transInfos = ref(<Transaction>{
-  hash: "",
-  to: "",
-  from: "",
-  blockHash: "",
-  blockNumber: 0,
-  value: "",
-  status: "",
-  timestamp: 0,
-  date: "",
-  devise: props.devise,
-  logs: {
-    transaction: {},
-    receipt: {},
-    erc20: {},
-  }
-});
-
-const reduceHashSize = (hash: string) => {
-  if (hash == account.value?.toLowerCase())
-    return "Me";
-  return `${hash.slice(0, 6)}...${hash.slice(-4)}`;
-};
-
-const openPopup = () => {
-  popUp.value = true;
-};
-
-const getDateFormated = (timestamp: number) => {
-  const date = new Date(timestamp * 1000);
-  const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
-};
-
-const getInfos = () => {
-  const store = useStore();
-  pubClient = store.getters.pubClient;
-  if (account.value) {
-    getTransactionInfos(props.hash as `0x${string}`);
-  }
-};
-
-const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, transInfos: any) => {
-  try {
-    const token = getContract({
-      address: transactionReceipt.logs[0].address,
-      abi: ERC20,
-      client: pubClient
-    });
-    transInfos.value.devise = await token.read.symbol();
-    const logs = await pubClient.getContractEvents({
-      abi: ERC20,
-      address: transactionReceipt.logs[0].address,
-      fromBlock: transactionInfos.blockNumber,
-      toBlock: transactionInfos.blockNumber,
-      eventName: "Transfer"
-    });
-    transInfos.value.from = logs[0].args.from;
-    transInfos.value.to = logs[0].args.to;
-    transInfos.value.value = formatEther(logs[0].args.value as bigint);
-    transInfos.value.logs.erc20 = logs;
-  } catch (error) {
-    console.log(error);
-  }
-};
-
-const getTransactionInfos = async (transactionHash: `0x${string}`) => {
-  var transactionInfos: any;
-  var transactionReceipt: any;
-  try {
-    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 = transactionInfos.to;
-  transInfos.value.from = transactionInfos.from;
-  transInfos.value.blockHash = transactionInfos.blockHash;
-  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)
-    await getErc20Infos(transactionInfos, transactionReceipt, transInfos);
-  return transactionInfos;
-};
-
-onMounted(() => {
-  getInfos();
-});
-</script>
-
-<style scoped>
-.box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: transparent;
-    height: 75px;
-    width: 100%;
-    margin: 10px 0;
-    cursor: pointer;
-}
-
-.icone {
-    height: 100%;
-    width: 15%;
-    padding: 15px;
-}
-
-.icone svg {
-    fill: #1E6BDE;
-}
-
-.info {
-    display: flex;
-    padding: 0 10px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    height: 100%;
-    width: 70%;
-}
-
-.status {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 15%;
-}
-
-.info h4 {
-    font-size: 20px;
-    color: white;
-}
-
-.info h5 {
-    font-size: 14px;
-    color: #A3A3A3;
-
-}
-
-.status {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.status svg {
-    height: 30px;
-    width: 30px;
-}
-
-.status h5 {
-    font-size: 14px;
-    color: #A3A3A3;
-}
-
-h4 {
-    font-size: 12px;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/transaction/transactionDetails.vue b/src/components/transaction/transactionDetails.vue
new file mode 100644
index 0000000..7ea8f0b
--- /dev/null
+++ b/src/components/transaction/transactionDetails.vue
@@ -0,0 +1,289 @@
+trouv<template>
+  <div class="box" @click="openPopup()">
+    <div class="icone">
+      <svg
+        style="fill: #d72f2f"
+        v-if="fromMe"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 576 512"
+      >
+        <path
+          d="M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z"
+        />
+      </svg>
+      <svg style="fill: #33bf41" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+        <path
+          d="M384 352c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v82.7L342.6 137.4c-12.5-12.5-32.8-12.5-45.3 0L192 242.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0L320 205.3 466.7 352H384z"
+        />
+      </svg>
+    </div>
+    <div class="info">
+      <h4 v-if="fromMe">
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Sent > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else> Sent {{ transInfos.value }} {{ transInfos.devise }} </template>
+      </h4>
+      <h4 v-else>
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Received > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else> Received {{ transInfos.value }} {{ transInfos.devise }} </template>
+      </h4>
+      <h5 v-if="fromMe">{{ transInfos.date }} to {{ reduceHashSize(transInfos.to) }}</h5>
+      <h5 v-else>{{ transInfos.date }} from {{ reduceHashSize(transInfos.from) }}</h5>
+    </div>
+    <div class="status">
+      <h5>Status</h5>
+      <svg
+        style="fill: #33bf41"
+        v-if="transInfos.status == 'success'"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+      >
+        <path
+          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+        />
+      </svg>
+      <svg style="fill: #d72f2f" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+        <path
+          d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+        />
+      </svg>
+    </div>
+  </div>
+  <transactionInfos v-if="popUp == true" :data="transInfos" @close-popUp="popUp = false" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useStore } from 'vuex'
+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,
+  devise: String,
+  from: Boolean
+})
+
+var pubClient: PublicClient
+
+const store = useStore()
+const account = computed(() => store.getters.selectedAccount)
+const popUp = ref(false)
+const fromMe = ref(props.from)
+
+interface Transaction {
+  hash: string
+  to: string
+  from: string
+  blockHash: string
+  blockNumber: number
+  value: string
+  status: string
+  timestamp: number
+  date: string
+  devise: string
+  logs: {
+    transaction: any
+    receipt: any
+    erc20: any
+  }
+}
+
+const transInfos = ref<Transaction>({
+  hash: '',
+  to: '',
+  from: '',
+  blockHash: '',
+  blockNumber: 0,
+  value: '',
+  status: '',
+  timestamp: 0,
+  date: '',
+  devise: props.devise,
+  logs: {
+    transaction: {},
+    receipt: {},
+    erc20: {}
+  }
+})
+
+const reduceHashSize = (hash: string) => {
+  if (hash == account.value?.toLowerCase()) return 'Me'
+  return `${hash.slice(0, 6)}...${hash.slice(-4)}`
+}
+
+const openPopup = () => {
+  popUp.value = true
+}
+
+const getDateFormated = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }
+  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions)
+}
+
+const getInfos = () => {
+  const store = useStore()
+  pubClient = store.getters.pubClient
+  if (account.value) {
+    getTransactionInfos(props.hash as `0x${string}`)
+  }
+}
+
+const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, transInfos: any) => {
+  try {
+    const token = getContract({
+      address: transactionReceipt.logs[0].address,
+      abi: ERC20,
+      client: pubClient
+    })
+    transInfos.value.devise = await token.read.symbol()
+    const logs = await pubClient.getContractEvents({
+      abi: ERC20,
+      address: transactionReceipt.logs[0].address,
+      fromBlock: transactionInfos.blockNumber,
+      toBlock: transactionInfos.blockNumber,
+      eventName: 'Transfer'
+    })
+    transInfos.value.from = logs[0].args.from
+    transInfos.value.to = logs[0].args.to
+    transInfos.value.value = formatEther(logs[0].args.value as bigint)
+    transInfos.value.logs.erc20 = logs
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const getTransactionInfos = async (transactionHash: `0x${string}`) => {
+  var transactionInfos: any
+  var transactionReceipt: any
+  try {
+    transactionInfos = (
+      await x.post('/', {
+        id: 1,
+        jsonrpc: '2.0',
+        method: 'eth_getTransactionByHash',
+        params: [transactionHash]
+      })
+    ).data.result
+    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 = transactionInfos.to
+  transInfos.value.from = transactionInfos.from
+  transInfos.value.blockHash = transactionInfos.blockHash
+  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)
+    await getErc20Infos(transactionInfos, transactionReceipt, transInfos)
+  return transactionInfos
+}
+
+onMounted(() => {
+  getInfos()
+})
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: transparent;
+  height: 75px;
+  width: 100%;
+  margin: 10px 0;
+  cursor: pointer;
+}
+
+.icone {
+  height: 100%;
+  width: 15%;
+  padding: 15px;
+}
+
+.icone svg {
+  fill: #1e6bde;
+}
+
+.info {
+  display: flex;
+  padding: 0 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  width: 70%;
+}
+
+.status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 15%;
+}
+
+.info h4 {
+  font-size: 20px;
+  color: white;
+}
+
+.info h5 {
+  font-size: 14px;
+  color: #a3a3a3;
+}
+
+.status {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.status svg {
+  height: 30px;
+  width: 30px;
+}
+
+.status h5 {
+  font-size: 14px;
+  color: #a3a3a3;
+}
+
+h4 {
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/transaction/transactionInfos.vue b/src/components/transaction/transactionInfos.vue
index e820e90..278f8d2 100644
--- a/src/components/transaction/transactionInfos.vue
+++ b/src/components/transaction/transactionInfos.vue
@@ -1,55 +1,52 @@
 <template>
-    <div class="bg">
-        <main>
-            <head>
-                <h2>Transaction Infos</h2>
-            </head>
-            <div class="infos">
-                <h4 v-if="call">Action: Call</h4>
-                <h4 v-else>Action: Transaction</h4>
-                <h4>Transaction hash: {{ props.data?.hash }}</h4>
-                <h4>From: {{ fromAddr }}</h4>
-                <h4>To: {{ toAddr }}</h4>
-                <h4>Block number: {{ props.data?.blockNumber }}</h4>
-                <h4>Time: {{ props.data?.date }}</h4>
-                <h4>Value: {{ props.data?.value }} {{ props.data?.devise }}</h4>
-            </div>
-            <footer>
-                <btn @click="$emit('close-popUp')" :txt="'Close'"></btn>
-            </footer>
-        </main>
-    </div>
+  <div class="bg">
+    <main>
+      <head>
+        <h2>Transaction Infos</h2>
+      </head>
+      <div class="infos">
+        <h4 v-if="call">Action: Call</h4>
+        <h4 v-else>Action: Transaction</h4>
+        <h4>Transaction hash: {{ props.data?.hash }}</h4>
+        <h4>From: {{ fromAddr }}</h4>
+        <h4>To: {{ toAddr }}</h4>
+        <h4>Block number: {{ props.data?.blockNumber }}</h4>
+        <h4>Time: {{ props.data?.date }}</h4>
+        <h4>Value: {{ props.data?.value }} {{ props.data?.devise }}</h4>
+      </div>
+      <footer>
+        <btn-transaction @click="$emit('close-popUp')" :txt="'Close'"></btn-transaction>
+      </footer>
+    </main>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import btn from './btn.vue';
+import { ref } from 'vue'
 import { useStore } from 'vuex'
 
 const props = defineProps({
-    open: Boolean,
-    data: Object
+  open: Boolean,
+  data: Object
 })
 const fromAddr = ref(props.data?.from)
 const toAddr = ref(props.data?.to)
 const call = ref(false)
 if (props.data?.logs.receipt.logs.length > 0) {
-    call.value = true
+  call.value = true
 }
 
 const isContract = async (address: `0x${string}`) => {
-    const pubClient = useStore().getter.pubClient
-    const contract = await pubClient.getBytecode({ address: address })
-    return contract != undefined
+  const pubClient = useStore().getter.pubClient
+  const contract = await pubClient.getBytecode({ address: address })
+  return contract != undefined
 }
 
 const checkAddress = async (from: any, to: any) => {
-    let tmp = await isContract(from)
-    if (tmp)
-        fromAddr.value += " (Contract)"
-    tmp = await isContract(to)
-    if (tmp)
-        toAddr.value = " (Contract)"
+  let tmp = await isContract(from)
+  if (tmp) fromAddr.value += ' (Contract)'
+  tmp = await isContract(to)
+  if (tmp) toAddr.value = ' (Contract)'
 }
 checkAddress(fromAddr.value, toAddr.value)
 
@@ -58,70 +55,70 @@ console.log(props.data)
 
 <style scoped>
 .bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
 }
 
 main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #191919;
-    height: 70vh;
-    width: 70vw;
-    padding: 0 20px;
-    border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #191919;
+  height: 70vh;
+  width: 70vw;
+  padding: 0 20px;
+  border-radius: 20px;
 }
 
 head {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 20%;
-    padding-top: 20px;
-    width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20%;
+  padding-top: 20px;
+  width: 100%;
 }
 
 head h2 {
-    color: #fff;
-    font-size: 34px;
-    font-weight: bold;
-    text-decoration: underline;
+  color: #fff;
+  font-size: 34px;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 20%;
-    width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20%;
+  width: 100%;
 }
 
 .infos {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: left;
-    background-color: #191919;
-    height: 60%;
-    width: 100%;
-    margin: 20px 0;
-    padding: 0 20px;
-    border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: left;
+  background-color: #191919;
+  height: 60%;
+  width: 100%;
+  margin: 20px 0;
+  padding: 0 20px;
+  border-radius: 20px;
 }
 
 .infos h4 {
-    color: #fff;
-    font-size: 20px;
-    margin-top: 10px;
+  color: #fff;
+  font-size: 20px;
+  margin-top: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/transaction/transactionList.vue b/src/components/transaction/transactionList.vue
new file mode 100644
index 0000000..b961178
--- /dev/null
+++ b/src/components/transaction/transactionList.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="box" @click="openPopup()">
+    <div class="icone">
+      <svg
+        style="fill: #d72f2f"
+        v-if="fromMe"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 576 512"
+      >
+        <path
+          d="M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z"
+        />
+      </svg>
+      <svg style="fill: #33bf41" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+        <path
+          d="M384 352c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v82.7L342.6 137.4c-12.5-12.5-32.8-12.5-45.3 0L192 242.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0L320 205.3 466.7 352H384z"
+        />
+      </svg>
+    </div>
+    <div class="info">
+      <h4 v-if="fromMe">
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Sent > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else> Sent {{ transInfos.value }} {{ transInfos.devise }} </template>
+      </h4>
+      <h4 v-else>
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Received > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else> Received {{ transInfos.value }} {{ transInfos.devise }} </template>
+      </h4>
+      <h5 v-if="fromMe">{{ transInfos.date }} to {{ reduceHashSize(transInfos.to) }}</h5>
+      <h5 v-else>{{ transInfos.date }} from {{ reduceHashSize(transInfos.from) }}</h5>
+    </div>
+    <div class="status">
+      <h5>Status</h5>
+      <svg
+        style="fill: #33bf41"
+        v-if="transInfos.status == 'success'"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+      >
+        <path
+          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+        />
+      </svg>
+      <svg style="fill: #d72f2f" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+        <path
+          d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+        />
+      </svg>
+    </div>
+  </div>
+  <transactionInfos v-if="popUp == true" :data="transInfos" @close-popUp="popUp = false" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useStore } from 'vuex'
+import { formatEther, getContract } from 'viem'
+import ERC20 from '@openzeppelin/contracts/build/contracts/ERC20.json'
+import transactionInfos from './transactionInfos.vue'
+
+const props = defineProps({
+  hash: String,
+  devise: String,
+  from: Boolean
+})
+
+const store = useStore()
+const account = computed(() => store.getters.selectedAccount)
+const popUp = ref(false)
+const fromMe = ref(props.from)
+
+interface Transaction {
+  hash: string
+  to: string
+  from: string
+  blockHash: string
+  blockNumber: number
+  value: string
+  status: string
+  timestamp: number
+  date: string
+  devise: string
+  logs: {
+    transaction: any
+    receipt: any
+    erc20: any
+  }
+}
+
+const transInfos = ref<Transaction>({
+  hash: '',
+  to: '',
+  from: '',
+  blockHash: '',
+  blockNumber: 0,
+  value: '',
+  status: '',
+  timestamp: 0,
+  date: '',
+  devise: props.devise,
+  logs: {
+    transaction: {},
+    receipt: {},
+    erc20: {}
+  }
+})
+
+const reduceHashSize = (hash: string) => {
+  if (hash == account.value?.toLowerCase()) return 'Me'
+  return `${hash.slice(0, 6)}...${hash.slice(-4)}`
+}
+
+const openPopup = () => {
+  popUp.value = true
+}
+
+const getDateFormated = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }
+  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions)
+}
+
+const getInfos = () => {
+  if (account.value) {
+    getTransactionInfos(props.hash as `0x${string}`)
+  }
+}
+
+const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, transInfos: any) => {
+  try {
+    const token = getContract({
+      address: transactionReceipt.logs[0].address,
+      abi: ERC20,
+      client: pubClient
+    })
+    transInfos.value.devise = await token.read.symbol()
+    const logs = await pubClient.getContractEvents({
+      abi: ERC20,
+      address: transactionReceipt.logs[0].address,
+      fromBlock: transactionInfos.blockNumber,
+      toBlock: transactionInfos.blockNumber,
+      eventName: 'Transfer'
+    })
+    transInfos.value.from = logs[0].args.from
+    transInfos.value.to = logs[0].args.to
+    transInfos.value.value = formatEther(logs[0].args.value as bigint)
+    transInfos.value.logs.erc20 = logs
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+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
+  })
+  try {
+    transInfos.value.timestamp = (await x.post('/', data)).data.result.timestamp
+  } catch (error) {
+    console.log(error)
+  }
+  transInfos.value.hash = transactionInfos.hash
+  transInfos.value.to = String(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.date = getDateFormated(transInfos.value.timestamp)
+  transInfos.value.logs.receipt = transactionReceipt
+  transInfos.value.logs.transaction = transactionInfos
+  if (transInfos.value.devise == undefined)
+    await getErc20Infos(transactionInfos, transactionReceipt, transInfos)
+  return transactionInfos
+}
+
+onMounted(() => {
+  getInfos()
+})
+</script>
+
+<style scoped>
+.box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: transparent;
+  height: 75px;
+  width: 100%;
+  margin: 10px 0;
+  cursor: pointer;
+}
+
+.icone {
+  height: 100%;
+  width: 15%;
+  padding: 15px;
+}
+
+.icone svg {
+  fill: #1e6bde;
+}
+
+.info {
+  display: flex;
+  padding: 0 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  width: 70%;
+}
+
+.status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 15%;
+}
+
+.info h4 {
+  font-size: 20px;
+  color: white;
+}
+
+.info h5 {
+  font-size: 14px;
+  color: #a3a3a3;
+}
+
+.status {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.status svg {
+  height: 30px;
+  width: 30px;
+}
+
+.status h5 {
+  font-size: 14px;
+  color: #a3a3a3;
+}
+
+h4 {
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/transaction/transactions_container.vue b/src/components/transaction/transactions_container.vue
index db92422..81cf925 100644
--- a/src/components/transaction/transactions_container.vue
+++ b/src/components/transaction/transactions_container.vue
@@ -2,74 +2,87 @@
   <main class="transactions">
     <div class="title">Transactions</div>
     <div class="list">
-      <transaction v-for="t in transactionshash" :hash="t.hash" :devise="t.devise" :from="t.from.valueOf()" :key="t.hash"/>
-      <h1 v-if="transactionshash.length == 0" style="text-align: center; font-size: 30px; margin-top: 30%; color: #a1a1a1">{{ msg }}</h1>
+      <transaction-list
+        v-for="t in transactionshash"
+        :hash="t.hash"
+        :devise="t.devise"
+        :from="t.from.valueOf()"
+        :key="t.hash"
+      />
+      <h1
+        v-if="transactionshash.length == 0"
+        style="text-align: center; font-size: 30px; margin-top: 30%; color: #a1a1a1"
+      >
+        {{ msg }}
+      </h1>
     </div>
     <div class="link">
       <div class="clickable">
         <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>
+        <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>
   </main>
 </template>
 
 <script setup lang="ts">
-import transaction from './transaction.vue'
 import { ref, computed, watchEffect } from 'vue'
 import { useStore } from 'vuex'
 import { fromHex } from 'viem'
 import { x } from '../../main'
 
 interface Transaction {
-  hash: string,
-  devise: string,
-  from: Boolean,
+  hash: string
+  devise: string
+  from: Boolean
   blockNb: number
 }
 
-const store = useStore();
-const account = computed(() => store.getters.selectedAccount);
-const transactionshash = ref<Transaction[]>([]);
-const msg = ref("No account");
-const myChain = computed(() => store.getters.chain);
+const store = useStore()
+const account = computed(() => store.getters.selectedAccount)
+const transactionshash = ref<Transaction[]>([])
+const msg = ref('No account')
+const myChain = computed(() => store.getters.chain)
 
 const walletLink = () => {
   if (account.value) {
-    window.open(`${myChain.value.chain.chain.blockExplorers.default.url}/address/${account.value}`);
+    window.open(`${myChain.value.chain.chain.blockExplorers.default.url}/address/${account.value}`)
   }
 }
 
 const getUniqueTransactions = (transactions: any): Transaction[] => {
-  let trans: Transaction[] = [];
-  let unique = true;
+  let trans: Transaction[] = []
+  let unique = true
   for (const t of transactions) {
-    unique = true;
+    unique = true
     for (const tr of trans) {
       if (t.hash == tr.hash) {
-        unique = false;
-        break;
+        unique = false
+        break
       }
     }
-    if (unique)
-      trans.push(t);
+    if (unique) trans.push(t)
   }
-  return trans;
+  return trans
 }
 
 const getLastTransactions = (transactions: Transaction[]): Transaction[] => {
-  const sortedTransactions = transactions.sort((a, b) => b.blockNb - a.blockNb);
-  const uniqueSortedTransactions = getUniqueTransactions(sortedTransactions);
-  const last10Transactions = uniqueSortedTransactions.slice(0, 8);
-  return last10Transactions;
+  const sortedTransactions = transactions.sort((a, b) => b.blockNb - a.blockNb)
+  const uniqueSortedTransactions = getUniqueTransactions(sortedTransactions)
+  const last10Transactions = uniqueSortedTransactions.slice(0, 8)
+  return last10Transactions
 }
 
 const btn = async () => {
-  if (!account.value) return;
-  msg.value = "Loading transactions...";
+  if (!account.value) return
+  msg.value = 'Loading transactions...'
 
-  let transactions = await getTransactionsFrom();
-  let ls: Transaction[] = [];
+  let transactions = await getTransactionsFrom()
+  let ls: Transaction[] = []
 
   for (const transaction of transactions) {
     ls.push({
@@ -77,147 +90,146 @@ const btn = async () => {
       devise: transaction.asset,
       from: false,
       blockNb: fromHex(transaction.blockNum, 'number')
-    });
+    })
   }
 
-  transactions = await getTransactionsTo();
+  transactions = await getTransactionsTo()
   for (const transaction of transactions) {
     ls.push({
       hash: transaction.hash,
       devise: transaction.asset,
       from: true,
       blockNb: fromHex(transaction.blockNum, 'number')
-    });
+    })
   }
 
-  transactionshash.value = getLastTransactions(ls);
-  console.log("transactions: ", transactionshash.value);
-  msg.value = "No transactions found";
+  transactionshash.value = getLastTransactions(ls)
+  console.log('transactions: ', transactionshash.value)
+  msg.value = 'No transactions found'
 }
 
 const getTransactionsFrom = async () => {
-  if (!account.value) return [];
+  if (!account.value) return []
 
   const data = JSON.stringify({
-    "jsonrpc": "2.0",
-    "id": 0,
-    "method": "alchemy_getAssetTransfers",
-    "params": [
+    jsonrpc: '2.0',
+    id: 0,
+    method: 'alchemy_getAssetTransfers',
+    params: [
       {
-        "fromBlock": "0x0",
-        "toBlock": "latest",
-        "toAddress": account.value,
-        "category": ["external", "internal", "erc20"],
-        "excludeZeroValue": false
+        fromBlock: '0x0',
+        toBlock: 'latest',
+        toAddress: account.value,
+        category: ['external', 'internal', 'erc20'],
+        excludeZeroValue: false
       }
     ]
-  });
+  })
 
   try {
-    const transactions = (await x.post('/', data)).data.result.transfers;
-    return transactions;
+    const transactions = (await x.post('/', data)).data.result.transfers
+    return transactions
   } catch (error) {
-    return [];
+    return []
   }
 }
 
 const getTransactionsTo = async () => {
-  if (!account.value) return [];
+  if (!account.value) return []
 
   const data = JSON.stringify({
-    "jsonrpc": "2.0",
-    "id": 0,
-    "method": "alchemy_getAssetTransfers",
-    "params": [
+    jsonrpc: '2.0',
+    id: 0,
+    method: 'alchemy_getAssetTransfers',
+    params: [
       {
-        "fromBlock": "0x0",
-        "toBlock": "latest",
-        "fromAddress": account.value,
-        "category": ["external", "internal", "erc20"],
-        "excludeZeroValue": false
+        fromBlock: '0x0',
+        toBlock: 'latest',
+        fromAddress: account.value,
+        category: ['external', 'internal', 'erc20'],
+        excludeZeroValue: false
       }
     ]
-  });
+  })
 
   try {
-    const transactions = (await x.post('/', data)).data.result.transfers;
-    return transactions;
+    const transactions = (await x.post('/', data)).data.result.transfers
+    return transactions
   } catch (error) {
-    console.log(error);
-    return [];
+    console.log(error)
+    return []
   }
 }
 
 watchEffect(async () => {
   if (myChain.value) {
-    transactionshash.value = [];
-    await btn();
+    transactionshash.value = []
+    await btn()
   }
-});
+})
 
 watchEffect(async () => {
   if (account.value) {
-    await btn();
+    await btn()
   }
-});
-
+})
 </script>
 
 <style scoped>
 main.transactions {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    background-color: transparent;
-    height: 100%;
-    width: 100%;
-    padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: transparent;
+  height: 100%;
+  width: 100%;
+  padding: 0 20px;
 }
 
 .list {
-    width: 100%;
-    height: calc(100% - 120px);
+  width: 100%;
+  height: calc(100% - 120px);
 }
 
 .title {
-    width: 100%;
-    height: 70px;
-    color: white;
-    font-size: 30px;
-    margin-bottom: 10px;
-    margin-left: 25px;
-    padding: 20px 0 20px 10px;
+  width: 100%;
+  height: 70px;
+  color: white;
+  font-size: 30px;
+  margin-bottom: 10px;
+  margin-left: 25px;
+  padding: 20px 0 20px 10px;
 }
 
 .link {
-    height: 50px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .clickable {
-    cursor: pointer;
-    width: max-content;
-    height: max-content;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  cursor: pointer;
+  width: max-content;
+  height: max-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .link svg {
-    fill: #1E6BDE;
-    height: 15px;
-    width: 15px;
-    margin-left: 10px;
+  fill: #1e6bde;
+  height: 15px;
+  width: 15px;
+  margin-left: 10px;
 }
 
 .link h3 {
-    color: #1E6BDE;
-    font-size: 16px;
-    text-decoration: underline;
-    cursor: pointer;
+  color: #1e6bde;
+  font-size: 16px;
+  text-decoration: underline;
+  cursor: pointer;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/wallet/headerMenu.vue b/src/components/wallet/headerMenu.vue
index 2a15810..d07fd81 100644
--- a/src/components/wallet/headerMenu.vue
+++ b/src/components/wallet/headerMenu.vue
@@ -1,60 +1,64 @@
 <template>
   <div class="iconeBox">
-    <img class="iconeBoxImage" style="cursor: zoom-in;" src="/img/gas-station.png" alt="Ether gas price">
-    <p style="margin-right: 1.5rem;">{{gasValue}}</p>
+    <img
+      class="iconeBoxImage"
+      style="cursor: zoom-in"
+      src="/img/gas-station.png"
+      alt="Ether gas price"
+    />
+    <p style="margin-right: 1.5rem">{{ gasValue }}</p>
     <button @click="toggleLock">
-      <img :src="!isLocked ? '/img/unlock_padlock.png' : '/img/padlock.png'" 
-           class="iconeBoxImage" 
-           alt="toggle lock">
+      <img
+        :src="!isLocked ? '/img/unlock_padlock.png' : '/img/padlock.png'"
+        class="iconeBoxImage"
+        alt="toggle lock"
+      />
     </button>
   </div>
-</template> 
+</template>
 
 <script lang="ts">
 import { chain } from '../../multichain'
-import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
+import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
 import { getGas } from '../../getGas'
-import { Network } from 'alchemy-sdk';
 
 export default defineComponent({
   name: 'HeaderMenu',
   setup() {
-
     if (!sessionStorage.getItem('lock-wallet')) {
-      sessionStorage.setItem('lock-wallet', 'true');
+      sessionStorage.setItem('lock-wallet', 'true')
     }
-    
-    const isLocked = ref(sessionStorage.getItem('lock-wallet') === "true");
 
-    const gasValue = ref<string | null>(null);
-    let intervalId: NodeJS.Timeout | undefined;
+    const isLocked = ref(sessionStorage.getItem('lock-wallet') === 'true')
+
+    const gasValue = ref<string | null>(null)
+    let intervalId: NodeJS.Timeout | undefined
 
     const toggleLock = () => {
-      isLocked.value = !isLocked.value;
+      isLocked.value = !isLocked.value
       sessionStorage.setItem('lock-wallet', String(isLocked.value))
-    };
+    }
 
     const fetchGasPrice = async () => {
-      gasValue.value = await getGas(chain.value.alchemyNetwork);
-    };
+      gasValue.value = await getGas(chain.value.alchemyNetwork)
+    }
 
     onMounted(() => {
-      fetchGasPrice();
-      intervalId = setInterval(fetchGasPrice, 5000);
-    });
+      fetchGasPrice()
+      intervalId = setInterval(fetchGasPrice, 5000)
+    })
 
     onBeforeUnmount(() => {
-      if (intervalId)
-        clearInterval(intervalId);
-    });
+      if (intervalId) clearInterval(intervalId)
+    })
 
     return {
       gasValue,
       isLocked,
       toggleLock
-    };
+    }
   }
-});
+})
 </script>
 
 <style scoped>
diff --git a/src/components/wallet/importPopUp.vue b/src/components/wallet/importPopUp.vue
index 734389a..aecfe97 100644
--- a/src/components/wallet/importPopUp.vue
+++ b/src/components/wallet/importPopUp.vue
@@ -2,7 +2,7 @@
 import importCard from './importCard.vue'
 
 export default {
-  name: "importPopUp",
+  name: 'importPopUp',
   components: {
     importCard
   },
@@ -39,6 +39,11 @@ export default {
         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>
+    <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 text-white"
+    >
+      Import
+    </button>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/wallet/mnemonicPopUp.vue b/src/components/wallet/mnemonicPopUp.vue
index 29efcfe..595410e 100644
--- a/src/components/wallet/mnemonicPopUp.vue
+++ b/src/components/wallet/mnemonicPopUp.vue
@@ -40,7 +40,7 @@ export default {
     <div class="flex justify-end mt-4">
       <button
         @click="$emit('close')"
-        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg w-auto self-end bg-blue-500 hover:bg-blue-700 text-white"
       >
         Skip
       </button>
diff --git a/src/components/wallet/mnemonicWord.vue b/src/components/wallet/mnemonicWord.vue
index 9e9fb38..e3606ad 100644
--- a/src/components/wallet/mnemonicWord.vue
+++ b/src/components/wallet/mnemonicWord.vue
@@ -14,25 +14,28 @@ export default {
   data() {
     return {
       copied: false,
-      showInfo: false
+      showCopiable: false
     }
   },
   methods: {
     copyWord() {
-      navigator.clipboard.writeText(this.word).then(() => {
-        this.copied = true;
-        setTimeout(() => {
-          this.copied = false;
-        }, 2000);
-      }).catch(err => {
-        console.error('Failed to copy text: ', err);
-      });
+      navigator.clipboard
+        .writeText(this.word)
+        .then(() => {
+          this.copied = true
+          setTimeout(() => {
+            this.copied = false
+          }, 2000)
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err)
+        })
     },
     showInfo() {
-      this.showInfo = true;
+      this.showCopiable = true
     },
     hideInfo() {
-      this.showInfo = false;
+      this.showCopiable = false
     }
   }
 }
@@ -47,10 +50,18 @@ export default {
       @mouseover="showInfo"
       @mouseleave="hideInfo"
     >
-      <div :class="['bg-gray-800 items-center justify-center border border-gray-700 rounded-lg flex py-4 px-12 transition-all', { 'bg-green-500': copied }]">
+      <div
+        :class="[
+          'bg-gray-800 items-center justify-center border border-gray-700 rounded-lg flex py-4 px-12 transition-all',
+          { 'bg-green-500': copied }
+        ]"
+      >
         <span class="text-white text-lg">{{ word }}</span>
       </div>
-      <div v-if="showInfo && !copied" class="absolute bottom-full mb-2 px-2 py-1 bg-black rounded-lg">
+      <div
+        v-if="showCopiable && !copied"
+        class="absolute bottom-full mb-2 px-2 py-1 bg-black rounded-lg"
+      >
         <span class="text-xs text-white">Click to copy</span>
       </div>
       <div v-if="copied" class="absolute bottom-full mb-2 px-2 py-1 bg-green-500 rounded-lg">
diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 37c231e..9f5eab9 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -22,12 +22,18 @@ export default defineComponent({
     importPopUp
   },
   computed: {
-    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses', 'password', 'walletCounter']),
+    ...mapGetters([
+      'accounts',
+      'selectedAccount',
+      'accountReducedAddresses',
+      'password',
+      'walletCounter'
+    ]),
     visibleMnemonicAccounts(): Account[] {
       return this.accounts.filter(
         (account: Account) => this.selectedAccount === account.address && this.isMnemonicVisible
       )
-    },
+    }
   },
   data() {
     return {
@@ -49,14 +55,17 @@ export default defineComponent({
         (account: Account) => account.address === newWallet.account.address
       )
       if (accountExist) {
-        console.warn("Account already exists")
+        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))
+      localStorage.setItem(
+        `privateKeyAccount${this.walletCounter}`,
+        encryption(privateKey, this.password)
+      )
     },
     selectAccountInStore(address: string) {
       this.selectAccount(address)
@@ -70,8 +79,8 @@ export default defineComponent({
     },
     closeImportPopUp(mnemonicWords: string[]) {
       if (mnemonicWords && mnemonicWords.every((word) => word !== '')) {
-        console.log("Importing wallet...")
-        const { newWallet, privateKey }= generateWalletFromMnemonic(mnemonicWords)
+        console.log('Importing wallet...')
+        const { newWallet, privateKey } = generateWalletFromMnemonic(mnemonicWords)
         if (newWallet === null) {
           this.isImportVisible = false
           return
@@ -80,7 +89,7 @@ export default defineComponent({
           (account: Account) => account.address === newWallet.account.address
         )
         if (accountExist) {
-          console.warn("Account already exists")
+          console.warn('Account already exists')
           this.isImportVisible = false
           return
         }
@@ -90,7 +99,10 @@ export default defineComponent({
           wallet: newWallet
         }
         this.addAccount(newAccount)
-        localStorage.setItem(`privateKeyAccount${this.walletCounter}`, encryption(privateKey, this.password))
+        localStorage.setItem(
+          `privateKeyAccount${this.walletCounter}`,
+          encryption(privateKey, this.password)
+        )
       }
       this.isImportVisible = false
     }
@@ -119,15 +131,28 @@ export default defineComponent({
           :isSelected="selectedAccount === account.address"
           @select="selectAccountInStore(account.address)"
         />
-        <div @click="addAccountToStore" class="bg-background-gray rounded-2xl p-3 flex items-center justify-center border-gray-600 border hover:bg-gray-600">
+        <div
+          @click="addAccountToStore"
+          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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            <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">
+        <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"/>
+            <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>
@@ -137,12 +162,16 @@ 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
+    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">
+  <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"
diff --git a/src/components/wallet/walletCard.vue b/src/components/wallet/walletCard.vue
index 3d02f50..df9f665 100644
--- a/src/components/wallet/walletCard.vue
+++ b/src/components/wallet/walletCard.vue
@@ -20,7 +20,15 @@ export default {
 </script>
 
 <template>
-  <div :class="['rounded-2xl p-2 pl-4 text-xl', isSelected ? 'bg-selected-blue hover:bg-blue-800' : 'border border-gray-600 bg-background-gray hover:bg-gray-600']" @click="$emit('select')">
+  <div
+    :class="[
+      'rounded-2xl p-2 pl-4 text-xl',
+      isSelected
+        ? 'bg-selected-blue hover:bg-blue-800'
+        : 'border border-gray-600 bg-background-gray hover:bg-gray-600'
+    ]"
+    @click="$emit('select')"
+  >
     <div>{{ accountName }}</div>
     <div class="text-[#dbdbdb] text-sm">{{ accountAddress }}</div>
   </div>
diff --git a/src/contract.ts b/src/contract.ts
index 46de7e9..abcc05e 100644
--- a/src/contract.ts
+++ b/src/contract.ts
@@ -1,202 +1,203 @@
-export const wagmiContract = (address : string) => ({
-  address,
-  abi: [
-    { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
-    {
-      anonymous: false,
-      inputs: [
-        {
-          indexed: true,
-          name: 'owner',
-          type: 'address',
-        },
-        {
-          indexed: true,
-          name: 'approved',
-          type: 'address',
-        },
-        {
-          indexed: true,
-          name: 'tokenId',
-          type: 'uint256',
-        },
-      ],
-      name: 'Approval',
-      type: 'event',
-    },
-    {
-      anonymous: false,
-      inputs: [
-        {
-          indexed: true,
-          name: 'owner',
-          type: 'address',
-        },
-        {
-          indexed: true,
-          name: 'operator',
-          type: 'address',
-        },
-        {
-          indexed: false,
-          name: 'approved',
-          type: 'bool',
-        },
-      ],
-      name: 'ApprovalForAll',
-      type: 'event',
-    },
-    {
-      anonymous: false,
-      inputs: [
-        {
-          indexed: true,
-          name: 'from',
-          type: 'address',
-        },
-        { indexed: true, name: 'to', type: 'address' },
-        {
-          indexed: true,
-          name: 'tokenId',
-          type: 'uint256',
-        },
-      ],
-      name: 'Transfer',
-      type: 'event',
-    },
-    {
-      inputs: [
-        { name: 'to', type: 'address' },
-        { name: 'tokenId', type: 'uint256' },
-      ],
-      name: 'approve',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [{ name: 'owner', type: 'address' }],
-      name: 'balanceOf',
-      outputs: [{ name: '', type: 'uint256' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [{ name: 'tokenId', type: 'uint256' }],
-      name: 'getApproved',
-      outputs: [{ name: '', type: 'address' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [
-        { name: 'owner', type: 'address' },
-        { name: 'operator', type: 'address' },
-      ],
-      name: 'isApprovedForAll',
-      outputs: [{ name: '', type: 'bool' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [],
-      name: 'mint',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
-      name: 'mint',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [],
-      name: 'name',
-      outputs: [{ name: '', type: 'string' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [{ name: 'tokenId', type: 'uint256' }],
-      name: 'ownerOf',
-      outputs: [{ name: '', type: 'address' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [
-        { name: 'from', type: 'address' },
-        { name: 'to', type: 'address' },
-        { name: 'tokenId', type: 'uint256' },
-      ],
-      name: 'safeTransferFrom',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [
-        { name: 'from', type: 'address' },
-        { name: 'to', type: 'address' },
-        { name: 'tokenId', type: 'uint256' },
-        { name: '_data', type: 'bytes' },
-      ],
-      name: 'safeTransferFrom',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [
-        { name: 'operator', type: 'address' },
-        { name: 'approved', type: 'bool' },
-      ],
-      name: 'setApprovalForAll',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-    {
-      inputs: [{ name: 'interfaceId', type: 'bytes4' }],
-      name: 'supportsInterface',
-      outputs: [{ name: '', type: 'bool' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [],
-      name: 'symbol',
-      outputs: [{ name: '', type: 'string' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [{ name: 'tokenId', type: 'uint256' }],
-      name: 'tokenURI',
-      outputs: [{ name: '', type: 'string' }],
-      stateMutability: 'pure',
-      type: 'function',
-    },
-    {
-      inputs: [],
-      name: 'totalSupply',
-      outputs: [{ name: '', type: 'uint256' }],
-      stateMutability: 'view',
-      type: 'function',
-    },
-    {
-      inputs: [
-        { name: 'from', type: 'address' },
-        { name: 'to', type: 'address' },
-        { name: 'tokenId', type: 'uint256' },
-      ],
-      name: 'transferFrom',
-      outputs: [],
-      stateMutability: 'nonpayable',
-      type: 'function',
-    },
-  ],
-} as const)
+export const wagmiContract = (address: string) =>
+  ({
+    address,
+    abi: [
+      { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: true,
+            name: 'owner',
+            type: 'address'
+          },
+          {
+            indexed: true,
+            name: 'approved',
+            type: 'address'
+          },
+          {
+            indexed: true,
+            name: 'tokenId',
+            type: 'uint256'
+          }
+        ],
+        name: 'Approval',
+        type: 'event'
+      },
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: true,
+            name: 'owner',
+            type: 'address'
+          },
+          {
+            indexed: true,
+            name: 'operator',
+            type: 'address'
+          },
+          {
+            indexed: false,
+            name: 'approved',
+            type: 'bool'
+          }
+        ],
+        name: 'ApprovalForAll',
+        type: 'event'
+      },
+      {
+        anonymous: false,
+        inputs: [
+          {
+            indexed: true,
+            name: 'from',
+            type: 'address'
+          },
+          { indexed: true, name: 'to', type: 'address' },
+          {
+            indexed: true,
+            name: 'tokenId',
+            type: 'uint256'
+          }
+        ],
+        name: 'Transfer',
+        type: 'event'
+      },
+      {
+        inputs: [
+          { name: 'to', type: 'address' },
+          { name: 'tokenId', type: 'uint256' }
+        ],
+        name: 'approve',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [{ name: 'owner', type: 'address' }],
+        name: 'balanceOf',
+        outputs: [{ name: '', type: 'uint256' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [{ name: 'tokenId', type: 'uint256' }],
+        name: 'getApproved',
+        outputs: [{ name: '', type: 'address' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [
+          { name: 'owner', type: 'address' },
+          { name: 'operator', type: 'address' }
+        ],
+        name: 'isApprovedForAll',
+        outputs: [{ name: '', type: 'bool' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [],
+        name: 'mint',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+        name: 'mint',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [],
+        name: 'name',
+        outputs: [{ name: '', type: 'string' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [{ name: 'tokenId', type: 'uint256' }],
+        name: 'ownerOf',
+        outputs: [{ name: '', type: 'address' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [
+          { name: 'from', type: 'address' },
+          { name: 'to', type: 'address' },
+          { name: 'tokenId', type: 'uint256' }
+        ],
+        name: 'safeTransferFrom',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [
+          { name: 'from', type: 'address' },
+          { name: 'to', type: 'address' },
+          { name: 'tokenId', type: 'uint256' },
+          { name: '_data', type: 'bytes' }
+        ],
+        name: 'safeTransferFrom',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [
+          { name: 'operator', type: 'address' },
+          { name: 'approved', type: 'bool' }
+        ],
+        name: 'setApprovalForAll',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      },
+      {
+        inputs: [{ name: 'interfaceId', type: 'bytes4' }],
+        name: 'supportsInterface',
+        outputs: [{ name: '', type: 'bool' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [],
+        name: 'symbol',
+        outputs: [{ name: '', type: 'string' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [{ name: 'tokenId', type: 'uint256' }],
+        name: 'tokenURI',
+        outputs: [{ name: '', type: 'string' }],
+        stateMutability: 'pure',
+        type: 'function'
+      },
+      {
+        inputs: [],
+        name: 'totalSupply',
+        outputs: [{ name: '', type: 'uint256' }],
+        stateMutability: 'view',
+        type: 'function'
+      },
+      {
+        inputs: [
+          { name: 'from', type: 'address' },
+          { name: 'to', type: 'address' },
+          { name: 'tokenId', type: 'uint256' }
+        ],
+        name: 'transferFrom',
+        outputs: [],
+        stateMutability: 'nonpayable',
+        type: 'function'
+      }
+    ]
+  }) as const
diff --git a/src/exchangeRates.ts b/src/exchangeRates.ts
index 5b54d60..816b592 100644
--- a/src/exchangeRates.ts
+++ b/src/exchangeRates.ts
@@ -4,4 +4,4 @@ export const exchangeRates = async (currency: string) => {
   } catch (error) {
     console.error(error)
   }
-}
\ No newline at end of file
+}
diff --git a/src/fetchTokenMetadata.ts b/src/fetchTokenMetadata.ts
index 31bfe22..18477ba 100644
--- a/src/fetchTokenMetadata.ts
+++ b/src/fetchTokenMetadata.ts
@@ -1,26 +1,24 @@
-import { x } from './main';
+import { x } from './main'
 
 export const fetchTokenMetadata = async (tokenAddress: string) => {
   const raw = {
-    "jsonrpc": "2.0",
-    "method": "alchemy_getTokenMetadata",
-    "params": [
-      `${tokenAddress}`
-    ],
-    "id": 42
-  };
+    jsonrpc: '2.0',
+    method: 'alchemy_getTokenMetadata',
+    params: [`${tokenAddress}`],
+    id: 42
+  }
 
   try {
-    const response = await x.post("/", raw, {
+    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;
+    })
+    const result = JSON.stringify(response.data.result, null, 2)
+    console.log(result)
+    return result
   } catch (error) {
-    console.log('error', error);
-    throw error;
+    console.log('error', error)
+    throw error
   }
-};
\ No newline at end of file
+}
diff --git a/src/getBalance.ts b/src/getBalance.ts
index 0f1e0f7..1e98ab9 100644
--- a/src/getBalance.ts
+++ b/src/getBalance.ts
@@ -1,8 +1,8 @@
-import { x } from "./main";
+import { x } from './main'
 
 export const getBalance = async (address: string): Promise<bigint> => {
   if (address === '' || address == undefined) {
-    return BigInt(0);
+    return BigInt(0)
   }
   try {
     console.log(`adress : ${address}, resquest : ${x}`)
@@ -11,15 +11,15 @@ export const getBalance = async (address: string): Promise<bigint> => {
       method: 'eth_getBalance',
       params: [address, 'latest'],
       id: 1
-    });
+    })
 
     if (response.data.result) {
-      return BigInt(response.data.result);
+      return BigInt(response.data.result)
     } else {
-      throw new Error('Failed to get balance');
+      throw new Error('Failed to get balance')
     }
   } catch (error) {
-    console.error('Error fetching balance:', error);
-    throw error;
+    console.error('Error fetching balance:', error)
+    throw error
   }
-}
\ No newline at end of file
+}
diff --git a/src/getGas.ts b/src/getGas.ts
index d923f7e..7ef09e8 100644
--- a/src/getGas.ts
+++ b/src/getGas.ts
@@ -1,22 +1,21 @@
-import { Network, Alchemy } from "alchemy-sdk";
-import type { AlchemyConfig } from "alchemy-sdk";
-import { BigNumber} from "@ethersproject/bignumber";
-import { formatUnits } from "@ethersproject/units";
-
+import { Network, Alchemy } from 'alchemy-sdk'
+import type { AlchemyConfig } from 'alchemy-sdk'
+import { BigNumber } from '@ethersproject/bignumber'
+import { formatUnits } from '@ethersproject/units'
 
 interface Config {
-    apiKey: string;
-    network: Network;
-  }
-  
+  apiKey: string
+  network: Network
+}
+
 const config: Config = {
   apiKey: 'aKVhzlNCwLMUs1hm_m7G3g00_vcuBkKh',
-  network: Network.ETH_MAINNET,
-};
+  network: Network.ETH_MAINNET
+}
 
 export async function getGas(network: Network): Promise<string> {
-    config.network = network;
-    const alchemy = new Alchemy(config as AlchemyConfig);
-    const gasPrice: BigNumber = await alchemy.core.getGasPrice();
-    return Number(formatUnits(gasPrice, "gwei")).toFixed(2);
-}
\ No newline at end of file
+  config.network = network
+  const alchemy = new Alchemy(config as AlchemyConfig)
+  const gasPrice: BigNumber = await alchemy.core.getGasPrice()
+  return Number(formatUnits(gasPrice, 'gwei')).toFixed(2)
+}
diff --git a/src/getNFTMetadata.ts b/src/getNFTMetadata.ts
index 427755e..f6c6078 100644
--- a/src/getNFTMetadata.ts
+++ b/src/getNFTMetadata.ts
@@ -1,16 +1,19 @@
 export const getNFTMetadata = async (contractAddress: string, tokenId: number, network: string) => {
   const requestOptions = {
     method: 'GET',
-    headers: {accept: 'application/json'}
+    headers: { accept: 'application/json' }
   }
-  const apiKey : string = import.meta.env.VITE_ALCHEMY_API_KEY as string;
-  const baseURL : string = `https://${network}.g.alchemy.com/nft/v3/${apiKey}/getNFTMetadata/`
+  const apiKey: string = import.meta.env.VITE_ALCHEMY_API_KEY as string
+  const baseURL: string = `https://${network}.g.alchemy.com/nft/v3/${apiKey}/getNFTMetadata/`
 
   try {
-    const response = await fetch(`${baseURL}?contractAddress=${contractAddress}&tokenId=${tokenId}`, requestOptions)
+    const response = await fetch(
+      `${baseURL}?contractAddress=${contractAddress}&tokenId=${tokenId}`,
+      requestOptions
+    )
     return await response.json()
   } catch (error) {
     console.log('An error occurred:', error)
     throw error
   }
-}
\ No newline at end of file
+}
diff --git a/src/getNFTsForOwner.ts b/src/getNFTsForOwner.ts
index a57180b..25d2bd9 100644
--- a/src/getNFTsForOwner.ts
+++ b/src/getNFTsForOwner.ts
@@ -1,17 +1,19 @@
 const PAGE_SIZE: number = 100
 
-export const getNFTsForOwner = async (address: string, baseURL: string)  => {
-  const requestOptions : RequestInit = {
+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;
 
   try {
-    const response : Response = await fetch(`${baseURL}?owner=${address}&pageSize=${PAGE_SIZE}`, requestOptions)
+    const response: Response = await fetch(
+      `${baseURL}?owner=${address}&pageSize=${PAGE_SIZE}`,
+      requestOptions
+    )
     return (await response.json()).ownedNfts
   } catch (error) {
     console.log('An error occurred:', error)
     throw error
   }
-}
\ No newline at end of file
+}
diff --git a/src/main.ts b/src/main.ts
index 38fd678..cc8bbb9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,29 +11,28 @@ import axios from 'axios'
 import store from './store'
 import { chain } from './multichain'
 
-console.log(`baseURL is: ${chain.value.alchemyURL}`);
+console.log(`baseURL is: ${chain.value.alchemyURL}`)
 const ax = axios.create({
-    baseURL: chain.value.alchemyURL,
-    headers: {
-        'Content-Type': 'application/json',
-    },
-});
+  baseURL: chain.value.alchemyURL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
 
-export const x = ax;
+export const x = ax
 
 watch(
-    () => chain.value.alchemyURL,
-    (newURL: string) => {
-      ax.defaults.baseURL = newURL;
-      console.log(`Axios baseURL updated to: ${newURL}`);
-    }
-  );
-  
+  () => chain.value.alchemyURL,
+  (newURL: string) => {
+    ax.defaults.baseURL = newURL
+    console.log(`Axios baseURL updated to: ${newURL}`)
+  }
+)
 
 const app = createApp(App)
 app.use(store)
 app.mount('#app')
 
 nextTick().then(() => {
-    loading.unmount()
+  loading.unmount()
 })
diff --git a/src/multichain.ts b/src/multichain.ts
index 09b66b4..f9fb581 100644
--- a/src/multichain.ts
+++ b/src/multichain.ts
@@ -1,52 +1,52 @@
 import { sepolia, mainnet } from 'viem/chains'
 import { ref } from 'vue'
 import { x } from './main'
-import { Network } from 'alchemy-sdk';
+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
-    },
+  {
+    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 (chainID != undefined && chainID < chainLs.length) {
+    localStorage.setItem('chainIdx', chainID.toString())
+  }
+  let 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')
-    }
+  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
+export { SwitchChain, chain, chainLs }
diff --git a/src/sendTransaction.ts b/src/sendTransaction.ts
index 51f0eb1..1b543d7 100644
--- a/src/sendTransaction.ts
+++ b/src/sendTransaction.ts
@@ -1,19 +1,19 @@
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
 
 export const sendTransaction = async (to: `0x${string}`, value: bigint): Promise<`0x${string}`> => {
-  const store = useStore();
+  const store = useStore()
 
-  const account = store.getters.selectedAccount;
-  const walClient = store.getters.walletClient;
+  const account = store.getters.selectedAccount
+  const walClient = store.getters.walletClient
 
   if (!account || !walClient) {
-    throw new Error("Account or Wallet Client not available");
+    throw new Error('Account or Wallet Client not available')
   }
 
-  console.log("amount", value);
+  console.log('amount', value)
   return await walClient.sendTransaction({
     account,
     to: to,
-    value: value,
-  });
-};
+    value: value
+  })
+}
diff --git a/src/store.ts b/src/store.ts
index ccbc920..8e4307d 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -3,12 +3,12 @@ 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';
+import { switchChain } from 'viem/actions'
+import { chain } from './multichain'
 
 const pub_client = createPublicClient({
   chain: chain.value.chain,
-  transport: http(),
+  transport: http()
 })
 
 interface Account {
@@ -24,8 +24,8 @@ interface State {
   selectedAccount: string | null
   password: string | null
   walletCounter: number
-  chain: any | null;
-  pubClient: PublicClient;
+  chain: any | null
+  pubClient: PublicClient
 }
 
 const state: State = {
@@ -59,7 +59,7 @@ const mutations = {
   clearPassword(state: State) {
     state.password = null
   },
-  initializeAccountsFromLocalStorage( state: State) {
+  initializeAccountsFromLocalStorage(state: State) {
     let walletCounter = 0
     while (localStorage.getItem(`privateKeyAccount${walletCounter + 1}`)) {
       walletCounter++
@@ -84,16 +84,16 @@ const mutations = {
     }
   },
   switchWalletChain(state: State) {
-    state.accounts.forEach(account => {
-      switchChain(account.wallet, state.chain as typeof pub_client.chain);
-    });
-    state.pubClient.chain = state.chain.chain.chain;
+    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;
+    state.chain = chain
   },
   savePubClient(state: State, pubClient: any) {
-    state.pubClient = pubClient;
+    state.pubClient = pubClient
   }
 }
 
@@ -105,7 +105,7 @@ const actions = {
     commit('selectAccount', address)
   },
   clearAccounts({ commit }: { commit: Function }) {
-    commit('clearAccounts');
+    commit('clearAccounts')
   },
   addPassword({ commit }: { commit: Function }, password: string) {
     commit('addPassword', password)
@@ -117,21 +117,21 @@ const actions = {
     commit('initializeAccountsFromLocalStorage')
   },
   switchWalletChain({ commit }: { commit: Function }) {
-    commit('switchWalletChain');
+    commit('switchWalletChain')
   },
   saveChain({ commit }: { commit: Function }, chain: any) {
-    commit('saveChain', chain);
+    commit('saveChain', chain)
   },
   savePubClient({ commit }: { commit: Function }, pubClient: any) {
-    commit('savePubClient', pubClient);
+    commit('savePubClient', pubClient)
   }
-};
+}
 
 const getters = {
   accounts: (state: State) => state.accounts,
   selectedAccount: (state: State) => state.selectedAccount,
   accountReducedAddresses: (state: State) => {
-    return state.accounts.map(account => ({
+    return state.accounts.map((account) => ({
       ...account,
       reducedAddress: `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
     }))
@@ -139,7 +139,7 @@ const getters = {
   password: (state: State) => state.password,
   walletCounter: (state: State) => state.walletCounter,
   chain: (state: State) => state.chain,
-  pubClient: (state: State) => state.pubClient,
+  pubClient: (state: State) => state.pubClient
 }
 
 const store = createStore({
diff --git a/src/updateWallet.ts b/src/updateWallet.ts
index af50a93..34e21d9 100644
--- a/src/updateWallet.ts
+++ b/src/updateWallet.ts
@@ -19,4 +19,4 @@ const errorHandling = (NFTsList: any, NFT: any): boolean => {
     return true
   }
   return false
-}
\ No newline at end of file
+}
diff --git a/src/utils/crypto.ts b/src/utils/crypto.ts
index c8ef349..09550c7 100644
--- a/src/utils/crypto.ts
+++ b/src/utils/crypto.ts
@@ -1,10 +1,10 @@
 import { AES, enc } from 'crypto-ts'
 
 export function encryption(privateKey: string, password: string): string {
-    return AES.encrypt(privateKey, password).toString()
+  return AES.encrypt(privateKey, password).toString()
 }
 
 export function decryption(cipherText: string, password: string): string {
-    const bytes = AES.decrypt(cipherText, password)
-    return bytes.toString(enc.Utf8)
+  const bytes = AES.decrypt(cipherText, password)
+  return bytes.toString(enc.Utf8)
 }
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index df95189..08ce17a 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -5,54 +5,60 @@ import { privateKeyToAccount, generateMnemonic, english } from 'viem/accounts'
 import { mainnet } from 'viem/chains'
 
 function uint8ToHexString(uint8Array: Uint8Array | null): `0x${string}` {
-    if (uint8Array === null)
-        return `0x` as `0x${string}`;
-    const hexString = Array.from(uint8Array)
-        .map(byte => byte.toString(16).padStart(2, '0'))
-        .join('');
-    return `0x${hexString}` as `0x${string}`;
+  if (uint8Array === null) return `0x` as `0x${string}`
+  const hexString = Array.from(uint8Array)
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('')
+  return `0x${hexString}` as `0x${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/${walletNumber}`).privateKey
-    const privateKey = uint8ToHexString(privateKeyUint8)
-    const account = privateKeyToAccount(privateKey)
+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/${walletNumber}`).privateKey
+  const privateKey = uint8ToHexString(privateKeyUint8)
+  const account = privateKeyToAccount(privateKey)
 
-    const newWallet = createWalletClient({
-        account,
-        chain: mainnet,
-        transport: http()
-    })
-    return { newWallet, mnemonic, privateKey }
+  const newWallet = createWalletClient({
+    account,
+    chain: mainnet,
+    transport: http()
+  })
+  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)
-    return createWalletClient({
-        account,
-        chain: mainnet,
-        transport: http()
+    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 }
+  }
 }
-
-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