ethers-opt/example.html at main · cpuchain/ethers-opt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ETH & Token UI with Equal Inputs</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-7">

            <!-- Balance Checker Card -->
            <div class="card shadow mb-4">
                <div class="card-body">
                    <h3 class="mb-3">ETH &amp; Token Balance Checker</h3>

                    <form id="balanceForm">
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="addressInput" class="form-label">User Address</label>
                                <input type="text" class="form-control" id="addressInput" placeholder="0x...">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="tokenInput" class="form-label">Token Contract Address</label>
                                <input type="text" class="form-control" id="tokenInput" placeholder="0x...">
                                <div class="form-text">Leave blank for ETH</div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Fetch Balance</button>
                    </form>

                    <div id="result" class="alert mt-4 d-none" role="alert"></div>
                </div>
            </div>

            <!-- Transaction Populator Card -->
            <div class="card shadow mb-4">
                <div class="card-body">
                    <h3 class="mb-3">Populate Transaction</h3>

                    <form id="txForm">
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="fromInput" class="form-label">From (Sender)</label>
                                <input type="text" class="form-control" id="fromInput" placeholder="0x...">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="toInput" class="form-label">To (Recipient)</label>
                                <input type="text" class="form-control" id="toInput" placeholder="0x...">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="amountInput" class="form-label">Amount</label>
                                <input type="text" class="form-control" id="amountInput" placeholder="e.g. 0.1">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="tokenTxInput" class="form-label">Token Contract Address</label>
                                <input type="text" class="form-control" id="tokenTxInput" placeholder="0x...">
                                <div class="form-text">Leave blank for ETH</div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-secondary w-100">Populate Transaction</button>
                    </form>

                    <div id="txTableContainer" class="mt-4 d-none">
                        <h5>Populated Transaction</h5>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle">
                                <tbody id="txTableBody"></tbody>
                            </table>
                        </div>
                    </div>

                    <div id="txError" class="alert alert-danger mt-2 d-none"></div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- JQuery, Bootstrap, Ethers v6 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ethers@6.16.0/dist/ethers.umd.min.js"></script>
<script src="./lib/ethersOpt.umd.js"></script>
<script>
const { Provider, ProxySigner } = ethersOpt;

const provider = new Provider('https://rpc.mevblocker.io');
const ERC20_ABI = [
    "function balanceOf(address) view returns (uint256)",
    "function decimals() view returns (uint8)",
    "function symbol() view returns (string)",
    "function transfer(address to, uint256 amount) returns (bool)"
];

// --- Balance Checker ---
$('#balanceForm').on('submit', async function (e) {
    e.preventDefault();
    const address = $('#addressInput').val().trim();
    const tokenAddr = $('#tokenInput').val().trim();
    const $result = $('#result').removeClass('d-none alert-success alert-danger').text('Fetching...').addClass('alert-info');

    if (!ethers.isAddress(address)) {
        return $result.removeClass('alert-info').addClass('alert-danger').text('Invalid user address.');
    }

    try {
        if (tokenAddr) {
            if (!ethers.isAddress(tokenAddr)) {
                return $result.removeClass('alert-info').addClass('alert-danger').text('Invalid token contract address.');
            }
            // Token balance
            const token = new ethers.Contract(tokenAddr, ERC20_ABI, provider);
            const [rawBalance, decimals, symbol] = await Promise.all([
                token.balanceOf(address),
                token.decimals(),
                token.symbol().catch(() => 'TOKEN')
            ]);
            const formatted = ethers.formatUnits(rawBalance, decimals);
            $result.removeClass('alert-info').addClass('alert-success').html(
                `<b>${symbol}</b> balance for <code>${address}</code>: <br><span class="text-primary">${formatted}</span>`
            );
        } else {
            // ETH balance
            const rawBalance = await provider.getBalance(address);
            const formatted = ethers.formatEther(rawBalance);
            $result.removeClass('alert-info').addClass('alert-success').html(
                `ETH balance for <code>${address}</code>: <br><span class="text-primary">${formatted} ETH</span>`
            );
        }
    } catch (err) {
        $result.removeClass('alert-info').addClass('alert-danger').text('Error fetching balance: ' + (err.message || err));
    }
});

// --- Populate Transaction UI ---
$('#txForm').on('submit', async function(e) {
    e.preventDefault();

    const from = $('#fromInput').val().trim();
    const to = $('#toInput').val().trim();
    const amount = $('#amountInput').val().trim();
    const tokenAddr = $('#tokenTxInput').val().trim();
    const $error = $('#txError');
    const $tableContainer = $('#txTableContainer').addClass('d-none');
    const $tbody = $('#txTableBody').empty();

    $error.addClass('d-none').text('');

    if (!ethers.isAddress(from)) {
        $error.removeClass('d-none').text('Invalid sender address.');
        return;
    }
    if (!ethers.isAddress(to)) {
        $error.removeClass('d-none').text('Invalid recipient address.');
        return;
    }
    if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
        $error.removeClass('d-none').text('Invalid amount.');
        return;
    }
    if (tokenAddr && !ethers.isAddress(tokenAddr)) {
        $error.removeClass('d-none').text('Invalid token contract address.');
        return;
    }

    try {
        let txPopulated;
        const voidSigner = ProxySigner.fromAddress(from, provider);

        if (tokenAddr) {
            const token = new ethers.Contract(tokenAddr, ERC20_ABI, provider);
            const [decimals, symbol] = await Promise.all([
                token.decimals(),
                token.symbol().catch(() => 'TOKEN')
            ]);
            const formattedAmount = ethers.parseUnits(amount, decimals);

            txPopulated = await token
                .connect(voidSigner)
                .populateTransaction.transfer(to, formattedAmount);

            if (!txPopulated.value) txPopulated.value = 0n;
            txPopulated['Symbol'] = symbol;
            txPopulated['DisplayAmount'] = amount;
        } else {
            const value = ethers.parseEther(amount);
            txPopulated = await voidSigner.populateTransaction({ to, value });
            txPopulated['Symbol'] = 'ETH';
            txPopulated['DisplayAmount'] = amount;
        }

        for (const [key, value] of Object.entries(txPopulated)) {
            let dispVal = value;
            if (typeof value === 'bigint') {
                dispVal = String(value);
                if (['value', 'gasLimit', 'gasPrice'].includes(key)) {
                    let formatted = "";
                    if (txPopulated.Symbol === 'ETH' && key === 'value') {
                        formatted = ethers.formatEther(value) + ' ETH';
                    } else if (key === 'value' && txPopulated.Symbol && txPopulated.Symbol !== 'ETH') {
                        formatted = ethers.formatUnits(value, txPopulated.decimals || 18) + ` ${txPopulated.Symbol}`;
                    }
                    if (formatted) dispVal += ` (${formatted})`;
                }
            } else if (typeof value === 'object') {
                dispVal = JSON.stringify(value);
            }
            $tbody.append(`<tr><th>${key}</th><td style="word-break: break-all">${dispVal}</td></tr>`);
        }

        $tableContainer.removeClass('d-none');
    } catch (err) {
        $error.removeClass('d-none').text('Error populating transaction: ' + (err.message || err));
        $tableContainer.addClass('d-none');
        $tbody.empty();
    }
});
</script>
</body>
</html>