工具介紹
Web3Tools - 助記詞生成
完整代碼
- 代碼路徑
import React, { useState } from 'react';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import * as bip39 from '@scure/bip39';
import { wordlist as english } from '@scure/bip39/wordlists/english';
import { wordlist as japanese } from '@scure/bip39/wordlists/japanese';
import { wordlist as korean } from '@scure/bip39/wordlists/korean';
import { wordlist as simplifiedChinese } from '@scure/bip39/wordlists/simplified-chinese';
import { wordlist as traditionalChinese } from '@scure/bip39/wordlists/traditional-chinese';const MnemonicGenerator = () => {const [language, setLanguage] = useState('english');const [wordCount, setWordCount] = useState(128);// 可以進行UI上的優化const [mnemonicChunks, setMnemonicChunks] = useState([]);const [mnemonic, setMnemonic] = useState('');const generateMnemonic = () => {// 根據選擇的語言和助記詞長度生成助記詞的邏輯let wl = english;if (language === 'chinese_simplified') {wl = simplifiedChinese;} else if (language === 'chinese_traditional') {wl = traditionalChinese;} else if (language === 'japanese') {wl = japanese} else if (language === 'korean') {wl = korean}// 這里你需要編寫生成助記詞的代碼const mnemonic = bip39.generateMnemonic(wl, wordCount);// 生成的助記詞存儲在mnemonic變量中setMnemonic(mnemonic);};const copyToClipboard = () => {navigator.clipboard.writeText(mnemonic);};const clearClipboard = () => {navigator.clipboard.writeText('');};return (<Grid container spacing={4} style={{ padding: '20px' }}>{/* 標題 */}<Grid item xs={12} style={{ height: '80px', padding: '20px' }}><Paper elevation={3} style={{ height: '90%', padding: '20px' }}><Typography variant="h4" gutterBottom>助記詞生成工具</Typography></Paper></Grid>{/* 摘要 */}<Grid item xs={12} style={{ height: '120px', padding: '20px', paddingTop: '30px' }}><Paper elevation={3} style={{ height: '100%', padding: '20px' }}><Typography variant="body1">該工具用于生成助記詞。請選擇語言和助記詞長度，然后點擊生成按鈕生成一組助記詞。</Typography><br /><Typography variant="body1">助記詞（mnemonic phrase）是從一個固定的單詞列表中選出的12、15、18、21或24個單詞，這些單詞按照順序排列，可用于備份和恢復加密貨幣錢包。</Typography></Paper></Grid>{/* 選項區域 */}<Grid item xs={12} sm={6} style={{ height: '30px', padding: '20px', paddingTop: '60px' }}><FormControl fullWidth><InputLabel id="language-select-label">選擇語言</InputLabel><SelectlabelId="language-select-label"id="language-select"value={language}label="選擇語言"onChange={(e) => setLanguage(e.target.value)}><MenuItem value="english">英文</MenuItem><MenuItem value="chinese_simplified">簡體中文</MenuItem><MenuItem value="chinese_traditional">繁體中文</MenuItem><MenuItem value="japanese">日文</MenuItem><MenuItem value="korean">韓文</MenuItem></Select></FormControl></Grid><Grid item xs={12} sm={6} style={{ padding: '20px', paddingTop: '60px' }}><FormControl fullWidth><InputLabel id="word-count-select-label">選擇助記詞長度</InputLabel><SelectlabelId="word-count-select-label"id="word-count-select"value={wordCount}label="選擇助記詞長度"onChange={(e) => setWordCount(e.target.value)}><MenuItem value={128}>12個</MenuItem><MenuItem value={160}>15個</MenuItem><MenuItem value={192}>18個</MenuItem><MenuItem value={224}>21個</MenuItem><MenuItem value={256}>24個</MenuItem></Select></FormControl></Grid>{/* 生成按鈕 */}<Grid item xs={6} sm={6} style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}><Button variant="contained" color="primary" onClick={generateMnemonic} fullWidth>隨機生成</Button></Grid>{/* 復制按鈕 */}<Grid item xs={3} sm={3} style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}><Button variant="contained" color="primary" onClick={copyToClipboard} disabled={!mnemonic} fullWidth>復制助記詞到剪貼板</Button></Grid><Grid item xs={3} sm={3} style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}><Button variant="contained" color="primary" onClick={clearClipboard}>清除剪貼板</Button></Grid>{/* 助記詞展示區域 */}<Grid item xs={12} style={{ height: '30vh', padding: '20px', textAlign: 'center', fontFamily: '"PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"' }}><Paper elevation={3} style={{ height: '100%', padding: '20px', lineHeight: '1.8', }}>{mnemonic.split(' ').map((word, index) => (word && (<span key={index} style={{ marginRight: '10px', marginBottom: '10px', padding: '5px', border: '1px solid #ccc', borderRadius: '5px', display: 'inline-block', width: 'calc(100% / 6)', boxSizing: 'border-box' }}>{index + 1}. {word}</span>)))}</Paper></Grid></Grid>);
};export default MnemonicGenerator;
工具推薦
- AllWeb3Tools
