feat: adding the importation feature

Author: Grégor Sternat

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>

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"
   >

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')
     }
   }
 })

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 }
+    }
 }