feat(tool): bip39-generator

src/tools/bip39-generator/bip39-generator.vue

@@ -1,27 +1,45 @@
 <template>
     <div>
         <n-card>
-            <n-space item-style="flex: 1 1 0">
-                <n-form-item label="Language:">
-                    <n-select v-model:value="language" :options="languages" />
-                </n-form-item>
-                <n-form-item label="Entropy (seed):">
-                    <n-input v-model:value="entropy" placeholder="Your string..." />
-                </n-form-item>
-            </n-space>
-            <n-form-item label="Passphrase (mnemonic):">
-                <n-input
-                    style="text-align: center;"
-                    :value="passphrase"
-                    type="textarea"
-                    placeholder="Your string hash"
-                    :autosize="{ minRows: 1 }"
-                    readonly
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                />
+            <n-grid cols="3" x-gap="12">
+                <n-gi span="1">
+                    <n-form-item label="Language:">
+                        <n-select v-model:value="language"
+                            :options="Object.keys(languages).map(label => ({ label, value: label }))" />
+                    </n-form-item>
+                </n-gi>
+                <n-gi span="2">
+                    <n-form-item label="Entropy (seed):" :feedback="entropyValidation.message"
+                        :validation-status="entropyValidation.status">
+                        <n-input-group>
+                            <n-input v-model:value="entropy" placeholder="Your string..." />
+                            <n-button @click="refreshEntropy">
+                                <n-icon size="22">
+                                    <Refresh />
+                                </n-icon>
+                            </n-button>
+                            <n-button @click="copyEntropy">
+                                <n-icon size="22">
+                                    <Copy />
+                                </n-icon>
+                            </n-button>
+                        </n-input-group>
+
+                    </n-form-item>
+                </n-gi>
+            </n-grid>
+            <br>
+            <n-form-item label="Passphrase (mnemonic):" :feedback="mnemonicValidation.message"
+                :validation-status="mnemonicValidation.status">
+                <n-input-group>
+                    <n-input style="text-align: center; flex: 1;" v-model:value="passphrase"
+                        placeholder="Your mnemonic..." autocomplete="off" autocorrect="off" autocapitalize="off"
+                        spellcheck="false" />
+
+                    <n-button @click="copyPassphrase">
+                        <n-icon size="22" :component="Copy" />
+                    </n-button>
+                </n-input-group>
             </n-form-item>
         </n-card>
     </div>
@@ -30,16 +48,99 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, computed } from 'vue'
-import { entropyToMnemonic } from 'bip39'
+import {
+    entropyToMnemonic,
+    englishWordList,
+    chineseSimplifiedWordList,
+    chineseTraditionalWordList,
+    czechWordList,
+    frenchWordList,
+    italianWordList,
+    japaneseWordList,
+    koreanWordList,
+    portugueseWordList,
+    spanishWordList,
+    generateEntropy,
+    mnemonicToEntropy
+} from '@it-tools/bip39'
+import { Copy, Refresh } from '@vicons/tabler'
+import { useValidation } from '@/composable/validation';
 
-const entropy = ref('1d60683972011cb97322ed6ae96225f3')
-const language = ref('English')
-const languages = ref(['English'])
-const passphrase = computed(() => {
-    // setDefaultWordlist(language.value)
-    return entropyToMnemonic(Buffer.from(entropy.value, "utf-8"))
+
+const languages = {
+    'English': englishWordList,
+    'Chinese simplified': chineseSimplifiedWordList,
+    'Chinese traditional': chineseTraditionalWordList,
+    'Czech': czechWordList,
+    'French': frenchWordList,
+    'Italian': italianWordList,
+    'Japanese': japaneseWordList,
+    'Korean': koreanWordList,
+    'Portuguese': portugueseWordList,
+    'Spanish': spanishWordList
+}
+
+const entropy = ref(generateEntropy())
+const passphraseInput = ref('')
+
+const language = ref<keyof typeof languages>('English')
+const passphrase = computed({
+    get() {
+        try {
+            return entropyToMnemonic(entropy.value, languages[language.value])
+        } catch (_) {
+            return passphraseInput.value
+        }
+    },
+    set(value: string) {
+        passphraseInput.value = value
+
+        try {
+            entropy.value = mnemonicToEntropy(value, languages[language.value])
+        } catch (_) {
+            entropy.value = ''
+        }
+    }
 })
 
+const entropyValidation = useValidation({
+    source: entropy,
+    rules: [
+        {
+            validator: (value) => value === '' || (value.length <= 32 && value.length >= 16 && value.length % 4 === 0),
+            message: 'Entropy length should be >= 16, <= 32 and be a multiple of 4'
+        },
+        {
+            validator: (value) => /^[a-fA-f0-9]?$/.test(value),
+            message: 'Entropy should an hexadecimal number'
+        }
+    ]
+})
+
+const mnemonicValidation = useValidation({
+    source: passphrase,
+    rules: [
+        {
+            validator: (value) => {
+                try {
+                    mnemonicToEntropy(value)
+                    return true
+                } catch (_) {
+                    return false
+                }
+            },
+            message: 'Invalid mnemonic'
+        }
+    ]
+})
+
+
+function refreshEntropy() {
+    entropy.value = generateEntropy()
+}
+
+const { copy: copyEntropy } = useCopy({ source: entropy, text: 'Entropy copied to the clipboard' })
+const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase copied to the clipboard' })
 
 </script>