From 8e686df8a6539f149b9d0be91e90e7a3023e8b14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 00:59:19 +0200
Subject: [PATCH 01/13] feat: adding the base of the component for the import
 pop up

---
 src/components/wallet/importPopUp.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/components/wallet/importPopUp.vue

diff --git a/src/components/wallet/importPopUp.vue b/src/components/wallet/importPopUp.vue
new file mode 100644
index 0000000..8e0e23d
--- /dev/null
+++ b/src/components/wallet/importPopUp.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+export default {
+  name: "importPopUp",
+  mounted() {
+    this.$el.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    class="w-2/3 h-2/3 relative bg-background-gray rounded-lg flex flex-col z-10"
+    @keydown.esc="$emit('close')"
+    tabindex="0"
+  >
+  </div>
+</template>
\ No newline at end of file

From 39d14f8b9a320bbb906119e628a733f2cb7bba88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 01:00:03 +0200
Subject: [PATCH 02/13] feat: adding new mutations and getters to manage
 password

gp
---
 src/store.ts | 73 +++++++++++++++++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/store.ts b/src/store.ts
index 73f7b78..31a7c0f 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,50 +1,69 @@
-import { createStore } from 'vuex';
-import type { WalletClient } from 'viem';
+import { createStore } from 'vuex'
+import type { WalletClient } from 'viem'
 
 interface Account {
-  name: string;
-  address: string;
-  reducedAddress: string;
-  mnemonic: string;
-  wallet: WalletClient;
+  name: string
+  address: string
+  reducedAddress: string
+  wallet: WalletClient
+  id: number
 }
 
 interface State {
-  accounts: Account[];
-  selectedAccount: string | null;
+  accounts: Account[]
+  selectedAccount: string | null
+  password: string | null
+  walletCounter: number
 }
 
 const state: State = {
   accounts: [],
   selectedAccount: null,
-};
+  password: null,
+  walletCounter: 0
+}
 
 const mutations = {
   addAccount(state: State, account: Account) {
-    account.reducedAddress = `${account.address.slice(0, 7)}...${account.address.slice(-5)}`;
-    state.accounts.push(account);
-    state.selectedAccount = account.address;
+    account.reducedAddress = `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
+    account.id = state.walletCounter
+    state.accounts.push(account)
+    state.selectedAccount = account.address
+    state.walletCounter++
   },
   selectAccount(state: State, address: string) {
-    state.selectedAccount = address;
+    state.selectedAccount = address
   },
   clearAccounts(state: State) {
-    state.accounts = [];
-    state.selectedAccount = null;
+    state.accounts = []
+    state.selectedAccount = null
+    state.walletCounter = 0
+  },
+  addPassword(state: State, password: string) {
+    state.password = password
+  },
+  clearPassword(state: State) {
+    state.password = null
   }
-};
+}
 
 const actions = {
   addAccount({ commit }: { commit: Function }, account: Account) {
-    commit('addAccount', account);
+    commit('addAccount', account)
   },
   selectAccount({ commit }: { commit: Function }, address: string) {
-    commit('selectAccount', address);
+    commit('selectAccount', address)
   },
   clearAccounts({ commit }: { commit: Function }) {
-    commit('clearAccounts');
+    commit('clearAccounts')
+  },
+  addPassword({ commit }: { commit: Function }, password: string) {
+    commit('addPassword', password)
+  },
+  clearPassword({ commit }: { commit: Function }) {
+    commit('clearPassword')
   }
-};
+}
 
 const getters = {
   accounts: (state: State) => state.accounts,
@@ -53,15 +72,17 @@ const getters = {
     return state.accounts.map(account => ({
       ...account,
       reducedAddress: `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
-    }));
-  }
-};
+    }))
+  },
+  password: (state: State) => state.password,
+  walletCounter: (state: State) => state.walletCounter
+}
 
 const store = createStore({
   state,
   mutations,
   actions,
   getters
-});
+})
 
-export default store;
+export default store

From c1ae3ff0e8ad86d71d3f13a1dea6b1f730dab459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 01:04:06 +0200
Subject: [PATCH 03/13] feat: store the password to the store

---
 src/components/passwordPage.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/passwordPage.vue b/src/components/passwordPage.vue
index 71d943a..9debc4a 100644
--- a/src/components/passwordPage.vue
+++ b/src/components/passwordPage.vue
@@ -14,15 +14,18 @@
 <script setup lang="ts">
 import { ref, defineEmits, onMounted } from 'vue'
 import CryptoJS from 'crypto-js'
+import { useStore} from 'vuex'
 
+const store = useStore()
 const password = ref('')
 const havePassword = ref(false)
 const emit = defineEmits(['isOpen'])
-
 const createPassword = () => {
     const hashedPassword = CryptoJS.SHA256(password.value).toString()
     localStorage.setItem('password', hashedPassword)
     localStorage.setItem('open-wallet', 'true')
+
+    store.dispatch('addPassword', password.value)
     emit('isOpen')
 }
 
@@ -36,6 +39,7 @@ const submitPassword = () => {
     if (hashedInputPassword === storedPassword) {
         localStorage.setItem('open-wallet', 'true')
         emit('isOpen')
+        store.dispatch('addPassword', password.value)
     } else {
         alert('Incorrect password')
         password.value = ''

From aa0e40f6d409dee5d591618abd1866adfdab1b69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 01:04:53 +0200
Subject: [PATCH 04/13] fix: remove the storage of the mnemonic

---
 src/components/wallet/verticalNavbar.vue | 71 +++++++++++++++---------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index c041bf0..22ce51b 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -1,16 +1,16 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters, mapActions } from 'vuex';
-import walletCard from '@/components/wallet/walletCard.vue';
-import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue';
-import { generateWallet } from '@/utils/wallet';
-import type { WalletClient } from 'viem';
+import { defineComponent } from 'vue'
+import { mapGetters, mapActions } from 'vuex'
+import walletCard from '@/components/wallet/walletCard.vue'
+import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
+import { generateWallet } from '@/utils/wallet'
+import type { WalletClient } from 'viem'
+import importPopUp from './importPopUp.vue'
 
 interface Account {
-  name: string;
-  address: string;
-  mnemonic: string;
-  wallet: WalletClient;
+  name: string
+  address: string
+  wallet: WalletClient
 }
 
 export default defineComponent({
@@ -18,41 +18,51 @@ export default defineComponent({
   components: {
     walletCard,
     mnemonicPopUp,
+    importPopUp
   },
   computed: {
-    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses']),
+    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses', 'password', 'walletCounter']),
     visibleMnemonicAccounts(): Account[] {
       return this.accounts.filter(
         (account: Account) => this.selectedAccount === account.address && this.isMnemonicVisible
-      );
+      )
     },
   },
   data() {
     return {
+      mnemonic: '',
       isMnemonicVisible: false,
-    };
+      isImportVisible: false
+    }
   },
   methods: {
     ...mapActions(['addAccount', 'selectAccount']),
     addAccountToStore() {
-      const { newWallet, mnemonic } = generateWallet();
+      const { newWallet, mnemonic } = generateWallet()
       const newAccount: Account = {
-        name: `Account ${this.accounts.length + 1}`,
+        name: `Account ${this.walletCounter + 1}`,
         address: newWallet.account.address,
-        mnemonic: mnemonic,
         wallet: newWallet
-      };
-      this.addAccount(newAccount);
-      this.isMnemonicVisible = true;
+      }
+      this.mnemonic = mnemonic
+      this.addAccount(newAccount)
+      this.isMnemonicVisible = true
     },
     selectAccountInStore(address: string) {
-      this.selectAccount(address);
+      this.selectAccount(address)
     },
-    closePopUp() {
-      this.isMnemonicVisible = false;
+    closeMnemonicPopUp() {
+      this.isMnemonicVisible = false
+      this.mnemonic = ''
     },
+    showImportPopUp() {
+      this.isImportVisible = true
+    },
+    closeImportPopUp() {
+      this.isImportVisible = false
+    }
   },
-});
+})
 </script>
 
 <template>
@@ -76,6 +86,12 @@ export default defineComponent({
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
         </div>
+        <div @click="showImportPopUp" class="bg-background-gray rounded-2xl p-3 flex items-center justify-center border-gray-600 border hover:bg-gray-600">
+          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2a1 1 0 011 1v10.586l3.293-3.293a1 1 0 011.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L11 13.586V3a1 1 0 011-1z"/>
+            <path d="M5 18a1 1 0 011-1h12a1 1 0 110 2H6a1 1 0 01-1-1z"/>
+          </svg>
+        </div>
       </div>
     </div>
     <div class="flex items-center cursor-pointer p-4 w-full">
@@ -83,12 +99,17 @@ export default defineComponent({
       <span class="text-2xl">Settings</span>
     </div>
   </div>
+  <div v-if="isImportVisible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+    <importPopUp
+      @close="closeImportPopUp"
+    />
+  </div>
   <div v-if="isMnemonicVisible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
     <mnemonicPopUp
       v-for="account in visibleMnemonicAccounts"
       :key="account.address"
-      :mnemonic="account.mnemonic"
-      @close="closePopUp"
+      :mnemonic="mnemonic"
+      @close="closeMnemonicPopUp"
     />
   </div>
 </template>

From 60d55f7b3e7936257ff9d97386b1a86b7dea743b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 01:32:38 +0200
Subject: [PATCH 05/13] feat: return the private key

---
 src/utils/wallet.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index ea4f27b..3b4ee7e 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -13,11 +13,11 @@ function uint8ToHexString(uint8Array: Uint8Array | null): `0x${string}` {
     return `0x${hexString}` as `0x${string}`;
 }
 
-export function generateWallet(): { newWallet:WalletClient, mnemonic:string } {
+export function generateWallet(walletNumber: number): { newWallet:WalletClient, mnemonic:string, privateKey:string } {
     const mnemonic = generateMnemonic(english)
     const seed = mnemonicToSeedSync(mnemonic)
     const masterKey = HDKey.fromMasterSeed(seed)
-    const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/0`).privateKey
+    const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/${walletNumber}`).privateKey
     const privateKey = uint8ToHexString(privateKeyUint8)
     const account = privateKeyToAccount(privateKey)
 
@@ -26,5 +26,5 @@ export function generateWallet(): { newWallet:WalletClient, mnemonic:string } {
         chain: mainnet,
         transport: http()
     })
-    return { newWallet, mnemonic }
+    return { newWallet, mnemonic, privateKey }
 }

From bbbf4ed67b7a5ee774256a9e2806de47d43e7563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 01:33:10 +0200
Subject: [PATCH 06/13] feat: set the encrypted private key to the local
 storage

---
 src/components/wallet/verticalNavbar.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 22ce51b..1e2c1f7 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -6,6 +6,7 @@ import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
 import { generateWallet } from '@/utils/wallet'
 import type { WalletClient } from 'viem'
 import importPopUp from './importPopUp.vue'
+import { encryption } from '../../utils/crypto'
 
 interface Account {
   name: string
@@ -38,7 +39,7 @@ export default defineComponent({
   methods: {
     ...mapActions(['addAccount', 'selectAccount']),
     addAccountToStore() {
-      const { newWallet, mnemonic } = generateWallet()
+      const { newWallet, mnemonic, privateKey } = generateWallet(this.walletCounter)
       const newAccount: Account = {
         name: `Account ${this.walletCounter + 1}`,
         address: newWallet.account.address,
@@ -47,6 +48,7 @@ export default defineComponent({
       this.mnemonic = mnemonic
       this.addAccount(newAccount)
       this.isMnemonicVisible = true
+      localStorage.setItem(`privateKeyAccount${this.walletCounter + 1}`, encryption(privateKey, this.password))
     },
     selectAccountInStore(address: string) {
       this.selectAccount(address)

From 0ecda318e4143c2c8fb488f36f78aee1be2e630f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 21:53:37 +0200
Subject: [PATCH 07/13] feat: adding importation feature

---
 src/components/wallet/verticalNavbar.vue | 14 ++++++++---
 src/store.ts                             | 30 ++++++++++++++++++++++++
 src/utils/wallet.ts                      |  9 +++++++
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 1e2c1f7..1efaccb 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -6,7 +6,7 @@ import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
 import { generateWallet } from '@/utils/wallet'
 import type { WalletClient } from 'viem'
 import importPopUp from './importPopUp.vue'
-import { encryption } from '../../utils/crypto'
+import { encryption } from '@/utils/crypto'
 
 interface Account {
   name: string
@@ -37,7 +37,7 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions(['addAccount', 'selectAccount']),
+    ...mapActions(['addAccount', 'selectAccount', 'initializeAccountsFromLocalStorage']),
     addAccountToStore() {
       const { newWallet, mnemonic, privateKey } = generateWallet(this.walletCounter)
       const newAccount: Account = {
@@ -48,7 +48,7 @@ export default defineComponent({
       this.mnemonic = mnemonic
       this.addAccount(newAccount)
       this.isMnemonicVisible = true
-      localStorage.setItem(`privateKeyAccount${this.walletCounter + 1}`, encryption(privateKey, this.password))
+      localStorage.setItem(`privateKeyAccount${this.walletCounter}`, encryption(privateKey, this.password))
     },
     selectAccountInStore(address: string) {
       this.selectAccount(address)
@@ -64,6 +64,14 @@ export default defineComponent({
       this.isImportVisible = false
     }
   },
+  mounted() {
+    if (this.password) {
+      console.log('mounted')
+      this.initializeAccountsFromLocalStorage()
+    } else {
+      console.log('No password set')
+    }
+  }
 })
 </script>
 
diff --git a/src/store.ts b/src/store.ts
index 31a7c0f..b14cece 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,5 +1,7 @@
 import { createStore } from 'vuex'
 import type { WalletClient } from 'viem'
+import { decryption } from '@/utils/crypto'
+import { generateWalletFromPrivateKey } from '@/utils/wallet'
 
 interface Account {
   name: string
@@ -44,6 +46,31 @@ const mutations = {
   },
   clearPassword(state: State) {
     state.password = null
+  },
+  initializeAccountsFromLocalStorage( state: State) {
+    let walletCounter = 0
+    while (localStorage.getItem(`privateKeyAccount${walletCounter + 1}`)) {
+      walletCounter++
+    }
+    state.walletCounter = walletCounter
+
+    console.log(walletCounter)
+    for (let i = 1; i <= walletCounter; i++) {
+      const encryptedPrivateKey = localStorage.getItem(`privateKeyAccount${i}`)
+      if (encryptedPrivateKey && state.password) {
+        const privateKey = decryption(encryptedPrivateKey, state.password)
+        const wallet = generateWalletFromPrivateKey(privateKey)
+
+        const account: Account = {
+          name: `Account ${i}`,
+          address: wallet.account.address,
+          wallet: wallet,
+          reducedAddress: '',
+          id: i
+        }
+        state.accounts.push(account)
+      }
+    }
   }
 }
 
@@ -62,6 +89,9 @@ const actions = {
   },
   clearPassword({ commit }: { commit: Function }) {
     commit('clearPassword')
+  },
+  initializeAccountsFromLocalStorage({ commit }: { commit: Function }) {
+    commit('initializeAccountsFromLocalStorage')
   }
 }
 
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index 3b4ee7e..6f0cf0e 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -28,3 +28,12 @@ export function generateWallet(walletNumber: number): { newWallet:WalletClient,
     })
     return { newWallet, mnemonic, privateKey }
 }
+
+export function generateWalletFromPrivateKey(privateKey: `0x${string}`): WalletClient {
+    const account = privateKeyToAccount(privateKey)
+    return createWalletClient({
+        account,
+        chain: mainnet,
+        transport: http()
+    })
+}
\ No newline at end of file

From 78001465658fd4c8c41a07546a384ff2614ac63d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 21:59:58 +0200
Subject: [PATCH 08/13] fix: bug who multiply acc when they was imported

---
 src/components/wallet/verticalNavbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 1efaccb..9bffcea 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -65,7 +65,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    if (this.password) {
+    if (this.password && this.accounts.length === 0) {
       console.log('mounted')
       this.initializeAccountsFromLocalStorage()
     } else {

From 659b46632efc897c5bc7f861c97e2cfe838132d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 22:03:21 +0200
Subject: [PATCH 09/13] style: remove useless console.loog

---
 src/components/wallet/verticalNavbar.vue | 1 -
 src/store.ts                             | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 9bffcea..85b3c40 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -66,7 +66,6 @@ export default defineComponent({
   },
   mounted() {
     if (this.password && this.accounts.length === 0) {
-      console.log('mounted')
       this.initializeAccountsFromLocalStorage()
     } else {
       console.log('No password set')
diff --git a/src/store.ts b/src/store.ts
index b14cece..6c40106 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -54,7 +54,6 @@ const mutations = {
     }
     state.walletCounter = walletCounter
 
-    console.log(walletCounter)
     for (let i = 1; i <= walletCounter; i++) {
       const encryptedPrivateKey = localStorage.getItem(`privateKeyAccount${i}`)
       if (encryptedPrivateKey && state.password) {

From 026706fcddb2cc3f97774df02ddb5c804652d344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Mon, 16 Sep 2024 22:08:44 +0200
Subject: [PATCH 10/13] fix: remove password from store when document is hidden

---
 src/App.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 4c86198..abc16ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,10 @@
   import ERC from "./components/main/ERC/ERC.vue";
   import { onMounted, ref, onUnmounted } from "vue";
   import passwordPage from "./components/passwordPage.vue";
+  import { useStore } from 'vuex'
 
   const open = ref(false)
+  const store = useStore()
 
   onMounted(() => {
     const isOpen = localStorage.getItem('open-wallet')
@@ -19,6 +21,7 @@
       if (document.hidden) {
         open.value = false;
         localStorage.setItem('open-wallet', 'false');
+        store.dispatch('clearPassword')
       }
     };
 

From 83c8395de1828051e77dd9a0bbc6d4d60fae2cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Tue, 17 Sep 2024 01:21:44 +0200
Subject: [PATCH 11/13] feat: adding a new component for the import cards

---
 src/components/wallet/importCard.vue | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/wallet/importCard.vue

diff --git a/src/components/wallet/importCard.vue b/src/components/wallet/importCard.vue
new file mode 100644
index 0000000..ca950bc
--- /dev/null
+++ b/src/components/wallet/importCard.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+export default {
+  name: 'importCard',
+  props: {
+    mnemonicNumber: {
+      type: Number,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: true,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    updateValue(event: Event) {
+      const value = (event.target as HTMLInputElement).value
+      this.$emit('update:modelValue', value)
+    }
+  }
+}
+</script>
+
+<template>
+  <input
+    type="text"
+    :placeholder="`Word ` + mnemonicNumber"
+    class="input input-bordered w-full max-w-xs"
+    :value="modelValue"
+    @input="updateValue"
+  />
+</template>

From d947bd04f8484504e837805168db41838ad5d223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Tue, 17 Sep 2024 01:22:12 +0200
Subject: [PATCH 12/13] feat: adding the importation feature

---
 src/components/wallet/importPopUp.vue    | 31 ++++++++++++++++++--
 src/components/wallet/mnemonicPopUp.vue  |  2 +-
 src/components/wallet/verticalNavbar.vue | 37 +++++++++++++++++++++---
 src/utils/wallet.ts                      | 21 +++++++++++++-
 4 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/src/components/wallet/importPopUp.vue b/src/components/wallet/importPopUp.vue
index 8e0e23d..734389a 100644
--- a/src/components/wallet/importPopUp.vue
+++ b/src/components/wallet/importPopUp.vue
@@ -1,17 +1,44 @@
 <script lang="ts">
+import importCard from './importCard.vue'
+
 export default {
   name: "importPopUp",
+  components: {
+    importCard
+  },
+  data() {
+    return {
+      mnemonicWords: Array(12).fill('')
+    }
+  },
   mounted() {
     this.$el.focus()
+  },
+  methods: {
+    closeWithoutMnemonic() {
+      this.$emit('close')
+    },
+    closeWithMnemonic() {
+      this.$emit('close', this.mnemonicWords)
+    }
   }
 }
 </script>
 
 <template>
   <div
-    class="w-2/3 h-2/3 relative bg-background-gray rounded-lg flex flex-col z-10"
-    @keydown.esc="$emit('close')"
+    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-5000"
+    @keydown.esc="closeWithoutMnemonic"
     tabindex="0"
   >
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 flex-1">
+      <importCard
+        v-for="index in 12"
+        :key="index"
+        :mnemonic-number="index"
+        v-model="mnemonicWords[index - 1]"
+      />
+    </div>
+    <button @click="closeWithMnemonic" class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg w-auto self-end bg-blue-500 hover:bg-blue-700">Import</button>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/wallet/mnemonicPopUp.vue b/src/components/wallet/mnemonicPopUp.vue
index a6d1be5..29efcfe 100644
--- a/src/components/wallet/mnemonicPopUp.vue
+++ b/src/components/wallet/mnemonicPopUp.vue
@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div
-    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-10"
+    class="relative bg-background-gray rounded-lg w-2/3 h-2/3 p-6 md:p-8 lg:p-10 flex flex-col z-5000"
     @keydown.esc="$emit('close')"
     tabindex="0"
   >
diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 85b3c40..37c231e 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
 import { mapGetters, mapActions } from 'vuex'
 import walletCard from '@/components/wallet/walletCard.vue'
 import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
-import { generateWallet } from '@/utils/wallet'
+import { generateWallet, generateWalletFromMnemonic } from '@/utils/wallet'
 import type { WalletClient } from 'viem'
 import importPopUp from './importPopUp.vue'
 import { encryption } from '@/utils/crypto'
@@ -45,6 +45,14 @@ export default defineComponent({
         address: newWallet.account.address,
         wallet: newWallet
       }
+      const accountExist = this.accounts.some(
+        (account: Account) => account.address === newWallet.account.address
+      )
+      if (accountExist) {
+        console.warn("Account already exists")
+        this.isMnemonicVisible = false
+        return
+      }
       this.mnemonic = mnemonic
       this.addAccount(newAccount)
       this.isMnemonicVisible = true
@@ -60,15 +68,36 @@ export default defineComponent({
     showImportPopUp() {
       this.isImportVisible = true
     },
-    closeImportPopUp() {
+    closeImportPopUp(mnemonicWords: string[]) {
+      if (mnemonicWords && mnemonicWords.every((word) => word !== '')) {
+        console.log("Importing wallet...")
+        const { newWallet, privateKey }= generateWalletFromMnemonic(mnemonicWords)
+        if (newWallet === null) {
+          this.isImportVisible = false
+          return
+        }
+        const accountExist = this.accounts.some(
+          (account: Account) => account.address === newWallet.account.address
+        )
+        if (accountExist) {
+          console.warn("Account already exists")
+          this.isImportVisible = false
+          return
+        }
+        const newAccount: Account = {
+          name: `Account ${this.walletCounter + 1}`,
+          address: newWallet.account.address,
+          wallet: newWallet
+        }
+        this.addAccount(newAccount)
+        localStorage.setItem(`privateKeyAccount${this.walletCounter}`, encryption(privateKey, this.password))
+      }
       this.isImportVisible = false
     }
   },
   mounted() {
     if (this.password && this.accounts.length === 0) {
       this.initializeAccountsFromLocalStorage()
-    } else {
-      console.log('No password set')
     }
   }
 })
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index 6f0cf0e..e7436e2 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -1,7 +1,7 @@
 import { HDKey } from '@scure/bip32'
 import { mnemonicToSeedSync } from '@scure/bip39'
 import { createWalletClient, http, type WalletClient } from 'viem'
-import { privateKeyToAccount, generateMnemonic, english } from 'viem/accounts'
+import { privateKeyToAccount, generateMnemonic, english, mnemonicToAccount } from 'viem/accounts'
 import { mainnet } from 'viem/chains'
 
 function uint8ToHexString(uint8Array: Uint8Array | null): `0x${string}` {
@@ -36,4 +36,23 @@ export function generateWalletFromPrivateKey(privateKey: `0x${string}`): WalletC
         chain: mainnet,
         transport: http()
     })
+}
+
+export function generateWalletFromMnemonic(mnemonic: string[]): { newWallet: WalletClient | null, privateKey: string | null} {
+    try {
+        const seed = mnemonicToSeedSync(mnemonic.join(' '))
+        const masterKey = HDKey.fromMasterSeed(seed)
+        const privateKeyUint8 = masterKey.derive(`m/44'/60'/0'/0/0`).privateKey
+        const privateKey = uint8ToHexString(privateKeyUint8)
+        const account = privateKeyToAccount(privateKey)
+        const newWallet = createWalletClient({
+            account,
+            chain: mainnet,
+            transport: http()
+        })
+        return { newWallet, privateKey }
+    } catch (error) {
+        console.error("The mnemonic format is invalid")
+        return { newWallet: null, privateKey: null }
+    }
 }
\ No newline at end of file

From b819513dc941248b742cef8d971f355af3fe252d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gor=20Sternat?= <gregor.sternat@kiln.fi>
Date: Wed, 18 Sep 2024 13:38:35 +0200
Subject: [PATCH 13/13] style: remove unused function

---
 src/utils/wallet.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
index e7436e2..df95189 100644
--- a/src/utils/wallet.ts
+++ b/src/utils/wallet.ts
@@ -1,7 +1,7 @@
 import { HDKey } from '@scure/bip32'
 import { mnemonicToSeedSync } from '@scure/bip39'
 import { createWalletClient, http, type WalletClient } from 'viem'
-import { privateKeyToAccount, generateMnemonic, english, mnemonicToAccount } from 'viem/accounts'
+import { privateKeyToAccount, generateMnemonic, english } from 'viem/accounts'
 import { mainnet } from 'viem/chains'
 
 function uint8ToHexString(uint8Array: Uint8Array | null): `0x${string}` {