纯前端创建以太坊钱包

基于web3.js创建以太坊钱包，并且我进行了一些优化，写了个靓号钱包生成的功能，部署到服务器上就可以使用，本地无法运行web3
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <title>以太坊钱包生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
</head>

<body>
    <div class="container py-5">
        <h2 class="mb-4 text-center">以太坊钱包生成器</h2>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="input-group mb-3">
                    <input type="text" id="matchContent" class="form-control" placeholder="匹配内容">
                    <select id="matchPosition" class="form-select">
                        <option value="any">任意</option>
                        <option value="start">开头</option>
                        <option value="end">结尾</option>
                    </select>
                    <input type="number" id="threadCount" class="form-control" placeholder="线程数"
                        aria-describedby="threadCountHelp" value="">
                    <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="请根据自身设备进行设置，越大占用设备CPU越多">
                        <i class="bi bi-info-circle"></i>
                    </button>
                </div>
                <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                    <button class="btn btn-primary" onclick="generateWallets()">生成钱包</button>
                    <button class="btn btn-secondary" onclick="stopGenerating()">停止生成</button>
                    <button class="btn btn-danger" onclick="clearInfo()">清空信息</button>
                </div>
                <div id="generatedCount" class="alert alert-info mt-3" role="alert">已生成: 0</div>
                <div id="matchedCount" class="alert alert-success" role="alert">匹配成功: 0</div>
                <div id="walletsInfo"></div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JavaScript 库 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 你的 JavaScript 代码，比如初始化工具提示
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>

    <script>
        let globalGeneratedCount = 0;
        let globalMatchedCount = 0;
        let shouldContinue = true;

        async function generateWallet(web3, matchPattern, position) {
            while (shouldContinue) {
                let account = web3.eth.accounts.create();
                globalGeneratedCount++;
                document.getElementById("generatedCount").innerText = `已生成: ${globalGeneratedCount}`;

                let matchFound = false;

                switch (position) {
                    case 'start':
                        matchFound = account.address.toLowerCase().startsWith(matchPattern);
                        break;
                    case 'end':
                        matchFound = account.address.toLowerCase().endsWith(matchPattern);
                        break;
                    case 'any':
                        matchFound = account.address.toLowerCase().includes(matchPattern);
                        break;
                }

                if (matchFound) {
                    globalMatchedCount++;
                    document.getElementById("matchedCount").innerText = `匹配成功: ${globalMatchedCount}`;
                    let walletInfoDiv = document.createElement("div");
                    walletInfoDiv.innerHTML = `
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title wallet-info" onclick="toggleKeyVisibility(event, '${account.privateKey}')">
                                Address: ${account.address} <span class="text-muted" style="font-size: smaller; cursor: pointer;">(点击查看私钥)</span>
                            </h5>
                            <p class="card-text d-none wallet-info">Private Key: ${account.privateKey}</p>
                        </div>
                    </div>
                    `;

                    document.getElementById("walletsInfo").appendChild(walletInfoDiv);
                }

                // 引入延时以避免卡死
                await new Promise(resolve => setTimeout(resolve, 100));
            }
        }

        function toggleKeyVisibility(event, privateKey) {
            let keyElement = event.target.nextElementSibling;
            keyElement.classList.toggle('d-none');
        }

        function generateWallets() {
            shouldContinue = true;
            const web3 = new Web3();
            const matchContent = document.getElementById("matchContent").value.toLowerCase();
            const matchPosition = document.getElementById("matchPosition").value;
            const threadCount = parseInt(document.getElementById("threadCount").value, 10) || 1;

            for (let i = 0; i < threadCount; i++) {
                generateWallet(web3, matchContent, matchPosition).catch(error => console.error(error));
            }
        }

        function stopGenerating() {
            shouldContinue = false;
        }

        function clearInfo() {
            document.getElementById("walletsInfo").innerHTML = "";
            document.getElementById("generatedCount").innerText = "已生成: 0";
            document.getElementById("matchedCount").innerText = "匹配成功: 0";
            globalGeneratedCount = 0;
            globalMatchedCount = 0;
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>