From a16f9e779b1545f013f8a7f7321530127f479212 Mon Sep 17 00:00:00 2001
From: tornadocontrib <tornadocontrib@proton.me>
Date: Fri, 15 Nov 2024 07:15:39 +0000
Subject: [PATCH] 1.0.5

* fixed deposit statistics to match with classic ui
* added view-only wallet support
* added unsigned transaction support
* support bulk deposits using multicall3
* better page view with nav urls
---
 index.html   | 765 ++++++++++++++++++++++++++++++++++++++++++++++++---
 package.json |   2 +-
 2 files changed, 723 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index b2d0d57..4298f38 100644
--- a/index.html
+++ b/index.html
@@ -82,10 +82,11 @@
         
         <script>
             /*global $, jQuery, bootstrap, ethers, Tornado, TornadoContracts, moment*/
-            const VERSION = '1.0.4';
+            const VERSION = '1.0.5';
 
             const DONATION_ADDRESS = '0x40c3d1656a26C9266f4A10fed0D87EFf79F54E64';
             const DEFAULT_GAS_LIMIT = 600_000;
+            
             // Used for DAO
             const GOVERNANCE_NETWORK = Tornado.NetId.MAINNET;
             // Used for relayers
@@ -338,7 +339,10 @@
                             <a href="#" class="nav-link bar-link active" data-page="home">Home</a>
                         </li>
                         <li class="nav-item d-none d-md-block">
-                            <a href="#voting" class="nav-link bar-link" data-page="voting" onclick="navVoting()">Voting</a>
+                            <a href="#voting" class="nav-link bar-link" data-page="voting">Voting</a>
+                        </li>
+                        <li class="nav-item d-none d-md-block">
+                            <a href="#bulk" class="nav-link bar-link" data-page="bulk">Bulk</a>
                         </li>
                         <li class="nav-item d-none d-md-block">
                             <a href="#encrypt" class="nav-link bar-link" data-page="encrypt">Encrypt</a>
@@ -375,6 +379,9 @@
                             <li class="nav-item d-md-none">
                                 <a href="#voting" class="nav-link bar-link" data-page="voting">Voting</a>
                             </li>
+                            <li class="nav-item d-md-none">
+                                <a href="#bulk" class="nav-link bar-link" data-page="bulk">Bulk</a>
+                            </li>
                             <li class="nav-item d-md-none">
                                 <a href="#encrypt" class="nav-link bar-link" data-page="encrypt">Encrypt</a>
                             </li>
@@ -602,6 +609,9 @@
                                     <li class="nav-item">
                                         <a class="nav-link card-link" href="#" data-card-group="voting-card" data-card="delegations-card">Get Delegations</a>
                                     </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link card-link" href="#" data-card-group="voting-card" data-card="apy-card" onclick="navApy()">APY</a>
+                                    </li>
                                 </ul>
                             </div>
                             <div class="card-body ms-2 me-2">
@@ -689,6 +699,9 @@
                                         <table id="delegatee-table" class="table table-bordered mt-4"></table>
                                     </div>
                                 </div>
+
+                                <!-- APY -->
+                                <div id="apy-content" class="voting-card apy-card d-none"></div>
                             </div>
                             <div class="card-footer" style="border-top: none;">
                                 <div class="voting-card proposals-card">
@@ -706,6 +719,62 @@
                                     <button type="button" class="btn btn-primary w-50 mb-2" onclick="delegate()">Delegate</button>
                                     <button type="button" class="btn btn-primary mb-2" style="width: 49%" onclick="undelegate()">Undelegate</button>
                                 </div>
+                                <div class="voting-card apy-card d-none">
+                                    <button type="button" class="btn btn-primary w-100 mb-2" onclick="loadApy()">Refresh APY</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-5">
+                        <div class="form-text">Information of notes, deposits, withdrawals, or private keys is never shared among any other third parties including us, relayers, and RPC providers. You can download and audit the source code of this website by simply saving it to index.html</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Bulk Deposit -->
+            <div id="bulk" class="page d-none">
+                <div class="col-md-12">
+                    <h2 class="mb-5-super">Bulk Deposit Notes \ Invoices</h2>
+                    <p>
+                        Make a bulk deposit of Tornado Notes \ Invoices using <a href="https://www.multicall3.com/" target="_blank" rel="noreferrer nofollow">Multicall3</a> contract.
+                        Only Instance with native assets (ETH, BNB, MATIC) are supported.
+                    </p>
+                    <!-- Cards -->
+                    <div class="row">
+                        <!-- Bulk Card -->
+                        <div class="card mt-2 col-md-12 g-0" style="min-height: 410px;">
+                            <div class="card-header">
+                                <ul class="nav nav-tabs card-header-tabs bulk-card-tabs">
+                                    <li class="nav-item">
+                                        <a class="nav-link card-link active" href="#" data-card-group="bulk-card" data-card="deposit-card">Deposit</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="card-body ms-2 me-2">
+                                <!-- Deposit -->
+                                <div class="bulk-card deposit-card">
+                                    <div class="mb-3">
+                                        <label class="form-label">Network</label>
+                                        <select id="bulk-deposit-network" class="form-control form-select network-list"></select>
+                                    </div>
+
+                                    <div class="mb-3">
+                                        <label class="form-label">Notes / Texts to deposit (Splitted by line break!)</label>
+                                        <textarea id="bulk-deposit" type="text" class="form-control" rows="7"></textarea>
+                                    </div>
+
+                                    <div class="input-group">
+                                        <input type="text" class="form-control" value="Backup encrypted notes on-chain?" disabled="">
+                                        <div class="input-group-text">
+                                            <input id="bulk-onchain" class="form-check-input mt-0" type="checkbox" value="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-footer" style="border-top: none;">
+                                <div class="bulk-card deposit-card">
+                                    <button type="button" class="btn btn-primary w-100 mb-2" onclick="bulkDeposit()">Deposit</button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -915,6 +984,12 @@
                                     <li class="nav-item">
                                         <a class="nav-link card-link" href="#" data-card-group="wallet-card" data-card="gas-zip" onclick="displayGasZipMax()">Gas.zip</a>
                                     </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link card-link" href="#" data-card-group="wallet-card" data-card="sign-transaction">Sign Transaction</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link card-link" href="#" data-card-group="wallet-card" data-card="broadcast-transaction">Broadcast Transaction</a>
+                                    </li>
                                     <li class="nav-item">
                                         <a class="nav-link card-link" href="#" data-card-group="wallet-card" data-card="create-wallet">Create Wallet</a>
                                     </li>
@@ -995,7 +1070,6 @@
                                             <div class="input-group">
                                                 <input type="text" class="form-control" value="Ethereum Mainnet" disabled="">
                                                 <div class="input-group-text">
-                                                    <!-- $('#deposit-onchain').is(':checked') -->
                                                     <input id="deposit-gas" class="form-check-input mt-0" type="checkbox" value="">
                                                 </div>
                                             </div>
@@ -1031,6 +1105,30 @@
                                     <p>Max Input: <span id="gas-zip-max"></span></p>
                                 </div>
 
+                                <!-- Sign Transaction -->
+                                <div class="wallet-card sign-transaction d-none">
+                                    <div class="mb-3">
+                                        <label class="form-label">Network (Will be used when tx doesn't have chainId)</label>
+                                        <select id="unsigned-tx-network" class="form-control form-select network-list"></select>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label class="form-label">Unsigned Transaction</label>
+                                        <textarea id="unsigned-tx" type="text" class="form-control" rows="3"></textarea>
+                                    </div>
+                                </div>
+
+                                <!-- Broadcast Transaction -->
+                                <div class="wallet-card broadcast-transaction d-none">
+                                    <div class="mb-3">
+                                        <label class="form-label">Network (Will be used when tx doesn't have chainId)</label>
+                                        <select id="raw-tx-network" class="form-control form-select network-list"></select>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label class="form-label">Raw Transaction</label>
+                                        <textarea id="raw-tx" type="text" class="form-control" rows="3"></textarea>
+                                    </div>
+                                </div>
+
                                 <!-- Create Wallet -->
                                 <div class="wallet-card create-wallet d-none">
                                     <div class="mb-3">
@@ -1062,6 +1160,12 @@
                                 <div class="wallet-card gas-zip d-none">
                                     <button type="button" class="btn btn-primary w-100 mb-2" onclick="sendGasZip()">Send</button>
                                 </div>
+                                <div class="wallet-card sign-transaction d-none">
+                                    <button type="button" class="btn btn-primary w-100 mb-2" onclick="signTransaction()">Sign</button>
+                                </div>
+                                <div class="wallet-card broadcast-transaction d-none">
+                                    <button type="button" class="btn btn-primary w-100 mb-2" onclick="broadcastTransaction()">Broadcast</button>
+                                </div>
                                 <div class="wallet-card create-wallet d-none">
                                     <button type="button" class="btn btn-primary w-100 mb-2" onclick="createWallet()">Create</button>
                                 </div>
@@ -1112,6 +1216,10 @@
                                     <option value="wallet" data-tovarish="true">Browser Wallet / Private Key</option>
                                 </select>
                             </div>
+                            <div class="mb-3">
+                                <label class="form-label">View-only Address</label>
+                                <input id="view-only" type="text" class="form-control" placeholder="View-only wallet address (to generate unsigned transactions)">
+                            </div>
                             <div class="mb-3">
                                 <label class="form-label">Mnemonic ( Optional, not saved )</label>
                                 <input id="mnemonic" type="text" class="form-control" placeholder="Mnemonic (12 / 24 words) to use for Direct Wallet Withdrawal">
@@ -1161,6 +1269,7 @@
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        <button id="unsigned-button" type="button" class="btn btn-secondary d-none" onclick=""></button>
                         <a id="backup-button" download="" href="" class="btn btn-primary d-none">Save</a>
                         <button id="send-button" type="button" class="btn btn-primary d-none" onclick="confirmDeposit()"></button>
                     </div>
@@ -1192,6 +1301,7 @@
             
             const providers = new Map();
 
+            let viewOnly;
             let mnemonic;
             let mnemonicIndex = 0;
             let privateKey;
@@ -1210,6 +1320,26 @@
 
             const abiCoder = ethers.AbiCoder.defaultAbiCoder();
 
+            class VoidSigner extends Tornado.TornadoVoidSigner {
+                async sendTransaction(tx) {
+                    const pop = await this.populateTransaction(tx);
+                    delete pop.from;
+                    const txObj = ethers.Transaction.from(pop);
+
+                    setTimeout(() => {
+                        showConfirmation(
+                            'Unsigned Transaction',
+                            '',
+                            `<textarea type="text" class="form-control" rows="3" disabled>${txObj.unsignedSerialized}</textarea>`
+                        );
+                    }, 50);
+
+                    return {
+                        hash: `Unsigned: ${txObj.unsignedSerialized}`
+                    };
+                }
+            }
+
             // eslint-disable-next-line no-unused-vars
             function settings() {
                 new bootstrap.Modal('#settings', {}).toggle();
@@ -1295,8 +1425,9 @@
 
             function showConfirmation(title, context, table) {
                 $('#send-title').text(title);
-                
-                $('#send-confirmation').text(context);
+
+                $('#send-confirmation').empty();
+                $('#send-confirmation').append(context);
                 $('#send-table').empty();
                 if (table) {
                     $('#send-table').append(table);
@@ -1307,8 +1438,11 @@
 
                 hide('#backup-button');
                 hide('#send-button');
+                hide('#unsigned-button');
                 $('#send-button').attr('onclick', '');
                 $('#send-button').text('');
+                $('#unsigned-button').attr('onclick', '');
+                $('#unsigned-button').text('');
             }
 
             function showDeposit(title, context, table, createOnly = false) {
@@ -1317,8 +1451,11 @@
 
                 if (!createOnly) {
                     show('#send-button');
+                    show('#unsigned-button');
                     $('#send-button').attr('onclick', 'confirmDeposit()');
                     $('#send-button').text('Deposit');
+                    $('#unsigned-button').attr('onclick', 'getUnsignedDeposit()');
+                    $('#unsigned-button').text('Unsigned');
                 }
             }
 
@@ -1354,8 +1491,11 @@
             function showSendCoins(title, context, table) {
                 showConfirmation(title, context, table);
                 show('#send-button');
+                show('#unsigned-button');
                 $('#send-button').attr('onclick', 'confirmSendCoins()');
                 $('#send-button').text('Send');
+                $('#unsigned-button').attr('onclick', 'getUnsigned()');
+                $('#unsigned-button').text('Unsigned');
             }
             
             function showStatus(title, context, status) {
@@ -1367,6 +1507,7 @@
                 hide('#confirm-screen');
                 hide('#backup-button');
                 hide('#send-button');
+                hide('#unsigned-button');
                 show('#status-screen');
 
                 if (!status) {
@@ -1460,6 +1601,9 @@
 
             // eslint-disable-next-line no-unused-vars
             async function resetSettings() {
+                viewOnly = '';
+                $('#view-only').val('');
+
                 mnemonic = '';
                 mnemonicIndex = 0;
                 $('#mnemonic').val('');
@@ -1513,6 +1657,19 @@
                     }
                 }
 
+                const newViewOnly = $('#view-only').val();
+
+                if (ethers.isAddress(newViewOnly)) {
+                    viewOnly = ethers.getAddress(newViewOnly);
+
+                    notifyMsg(`Will use ${viewOnly} for view-only wallet (not saved, will be cleared once refresh)`);
+
+                } else {
+                    viewOnly = '';
+
+                    $('#view-only').val('');
+                }
+
                 const newMnemonic = $('#mnemonic').val();
 
                 if (newMnemonic) {
@@ -1787,6 +1944,16 @@
             }
 
             async function getSigner(netId) {
+                if (viewOnly) {
+                    const provider = await getProvider(netId);
+
+                    const signer = new VoidSigner(viewOnly, provider);
+
+                    notifyMsg(`View-only signer (${signer.address}) connected`);
+
+                    return signer;
+                }
+
                 if (mnemonic) {
                     const provider = await getProvider(netId);
 
@@ -2035,8 +2202,8 @@
 
                             statsTable += `
                             <tr>
-                                <td class="col-md-5">${firstElement ? `${firstElement.leafIndex}. ${moment.unix(firstElement.timestamp).fromNow()}` : '.'}</td>
-                                <td class="col-md-5">${secondElement ? `${secondElement.leafIndex}. ${moment.unix(secondElement.timestamp).fromNow()}` : '.'}</td>
+                                <td class="col-md-5">${firstElement ? `${firstElement.leafIndex + 1}. ${moment.unix(firstElement.timestamp).fromNow()}` : '.'}</td>
+                                <td class="col-md-5">${secondElement ? `${secondElement.leafIndex + 1}. ${moment.unix(secondElement.timestamp).fromNow()}` : '.'}</td>
                             </tr>
                             `;
                         }
@@ -2175,7 +2342,6 @@
                         // Store encrypted note on Router contract as event
                         if (encryptNote && encryptKey) {
                             const noteAccount = new Tornado.NoteAccount({
-                                netId,
                                 recoveryKey: encryptKey,
                             });
 
@@ -2230,7 +2396,7 @@
                     const txFeeInToken = !isEth
                         ? tornadoFeeOracle.calculateTokenAmount(txFee, tokenPriceInWei, decimals)
                         : BigInt(0);
-                    const txFeeString = !isEth
+                    const txFeePercent = !isEth
                         ? `( ${Number(ethers.formatUnits(txFeeInToken, decimals)).toFixed(5)} ${currency.toUpperCase()} worth ) ` +
                             `( ${((Number(ethers.formatUnits(txFeeInToken, decimals)) / Number(amount)) * 100).toFixed(5)}% )`
                         : `( ${((Number(ethers.formatUnits(txFee, decimals)) / Number(amount)) * 100).toFixed(5)}% )`;
@@ -2287,7 +2453,7 @@
                                 </tr>
                                 <tr>
                                     <td>Transaction Fee</td>
-                                    <td>${Number(ethers.formatEther(txFee)).toFixed(8)} ${nativeCurrency.toUpperCase()} ${txFeeString}</td>
+                                    <td>${Number(ethers.formatEther(txFee)).toFixed(8)} ${nativeCurrency.toUpperCase()} ${txFeePercent}</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -2309,6 +2475,7 @@
                     );
 
                     if (!createOnly) {
+
                         job = {
                             netId,
                             currency,
@@ -2322,9 +2489,9 @@
                             requiresApproval,
                             TornadoProxy: TornadoProxy.connect(signer),
                             Token: Token ? Token.connect(signer) : undefined,
+                            signer,
                         };
-                    } else {
-                        hide('#send-deposit');
+
                     }
 
                 } catch (err) {
@@ -2387,6 +2554,72 @@
                 job = {};
             }
 
+            // eslint-disable-next-line no-unused-vars
+            async function getUnsignedDeposit() {
+                const {
+                    currency,
+                    amount,
+                    networkName,
+                    instanceAddress,
+                    commitmentHex,
+                    encryptedNote,
+                    value,
+                    requiresApproval,
+                    TornadoProxy,
+                    Token,
+                    signer,
+                } = job;
+
+                try {
+                    let approvalSerialized;
+
+                    if (requiresApproval) {
+                        const populated = await signer.populateTransaction(
+                            await Token.approve.populateTransaction(TornadoProxy.target, ethers.MaxUint256)
+                        );
+                        delete populated.from;
+
+                        approvalSerialized = ethers.Transaction.from(populated).unsignedSerialized;
+                    }
+
+                    const populated = await signer.populateTransaction(
+                        await TornadoProxy.deposit.populateTransaction(
+                            instanceAddress,
+                            commitmentHex,
+                            encryptedNote,
+                            {
+                                value
+                            }
+                        )
+                    );
+                    delete populated.from;
+
+                    const serialized = ethers.Transaction.from(populated).unsignedSerialized;
+
+                    showConfirmation(
+                        'Unsigned Transaction',
+                        '',
+                        `
+                        ${approvalSerialized ? `
+                        <p class="mb-2">Approval TX</p>
+
+                        <textarea type="text" class="form-control" rows="2" disabled>${approvalSerialized}</textarea>
+                        ` : ''}
+
+                        <p class="mt-2 mb-2">Deposit TX</p>
+
+                        <textarea type="text" class="form-control" rows="3" disabled>${serialized}</textarea>
+                        `
+                    );
+
+                } catch (err) {
+                    showStatus('Error from populating Deposit transaction', `Error from ${networkName} ${amount} ${currency.toUpperCase()} deposit: ${err.message}`, 'error');
+                    console.log(err);
+                }
+
+                job = {};
+            }
+
             // eslint-disable-next-line no-unused-vars
             function deposit(createOnly = false) {
                 const netId = parseInt($('#deposit-network').find(':selected').val());
@@ -2471,7 +2704,7 @@
 
                 const provider = await getProvider(netId);
 
-                const tovarishClient = $('#relayers').find(':selected').data('tovarish') ? getTovarishClient(netId) : undefined;
+                const tovarishClient = getTovarishClient(netId);
 
                 const Instance = TornadoContracts.Tornado__factory.connect(instanceAddress, provider);
 
@@ -3228,7 +3461,11 @@
                     const withdrawalEvent = withdrawalEvents.find(({ nullifierHash }) => nullifierHash === nullifierHex);
 
                     if (!depositEvent) {
-                        showStatus('Deposit not found', 'Can not find a deposit for your note, try again in a few minutes if you have recently made the deposi', 'error');
+                        showStatus(
+                            'Deposit not found',
+                            'Can not find a deposit for your note, try again in a few minutes if you have recently made the deposit',
+                            'error'
+                        );
                         return;
                     }
 
@@ -3295,6 +3532,200 @@
                 }
             }
 
+            // eslint-disable-next-line no-unused-vars
+            async function bulkDeposit() {
+                try {
+                    job = {};
+
+                    // Toggle Modal
+                    new bootstrap.Modal('#send', { backdrop: 'static', keyboard: false }).toggle();
+
+                    showStatus('Preparing Bulk Deposit', 'Preparing Bulk Deposit');
+
+                    const netId = parseInt($('#bulk-deposit-network').val());
+
+                    const encryptNote = $('#bulk-onchain').is(':checked');
+
+                    const config = Tornado.getConfig(netId);
+
+                    const {
+                        explorerUrl,
+                        currencyName,
+                        nativeCurrency,
+                        routerContract,
+                        multicallContract,
+                    } = config;
+
+                    const provider = await getProvider(netId);
+                    
+                    const signer = await getSigner(netId);
+
+                    const Multicall = TornadoContracts.Multicall__factory.connect(multicallContract, provider);
+
+                    const TornadoProxy = TornadoContracts.TornadoRouter__factory.connect(routerContract, provider);
+
+                    const tornadoFeeOracle = new Tornado.TornadoFeeOracle(provider);
+
+                    const noteAccount = new Tornado.NoteAccount({
+                        recoveryKey: encryptKey,
+                    });
+
+                    const gasPrice = await tornadoFeeOracle.gasPrice();
+
+                    const inputTexts = $('#bulk-deposit').val().match(/[^\r\n]+/g)?.filter((r) => r);
+
+                    const deposits = (await Promise.all(inputTexts.map(async (text) => {
+                        try {
+                            text = text.replace(/ /g,'');
+
+                            // Parse Note
+                            if (text.includes('tornado-')) {
+                                const deposit = await Tornado.Deposit.parseNote(text);
+
+                                if (deposit.netId !== netId || deposit.currency !== nativeCurrency) {
+                                    return;
+                                }
+
+                                deposit.instanceAddress = config.tokens[deposit.currency]?.instanceAddress?.[deposit.amount];
+
+                                if (!deposit.instanceAddress) {
+                                    return;
+                                }
+
+                                if (encryptNote && encryptKey) {
+                                    deposit.encryptedNote = noteAccount.encryptNote({
+                                        address: deposit.instanceAddress,
+                                        noteHex: deposit.noteHex,
+                                    });
+                                }
+
+                                return deposit;
+
+                            // Parse Invoice
+                            } else {
+                                const deposit = new Tornado.Invoice(text);
+
+                                if (deposit.netId !== netId || deposit.currency !== nativeCurrency) {
+                                    return;
+                                }
+
+                                deposit.instanceAddress = config.tokens[deposit.currency]?.instanceAddress?.[deposit.amount];
+
+                                if (!deposit.instanceAddress) {
+                                    return;
+                                }
+
+                                return deposit;
+                            }
+                        } catch {
+                            return;
+                        }
+                    }))).filter(r => r);
+
+                    if (!deposits.length) {
+                        showStatus(
+                            'No valid notes / invoices found',
+                            'No valid notes / invoices found, make sure to check your input again',
+                            'error'
+                        );
+                        return;
+                    }
+
+                    const calls = deposits.map(({ instanceAddress, amount, commitmentHex, encryptedNote }) => {
+                        return {
+                            target: TornadoProxy.target,
+                            allowFailure: false,
+                            callData: TornadoProxy.interface.encodeFunctionData(
+                                'deposit',
+                                [instanceAddress, commitmentHex, encryptedNote || '0x']
+                            ),
+                            value: ethers.parseEther(amount),
+                        };
+                    });
+
+                    const tx = {
+                        from: signer.address,
+                        to: Multicall.target,
+                        chainId: (await provider.getNetwork()).chainId,
+                        value: calls.reduce((acc, c) => c.value + acc, 0n),
+                        data: (await Multicall.aggregate3Value.populateTransaction(calls)).data,
+                    };
+
+                    tx.gasLimit = (await provider.estimateGas(tx)) * 11n / 10n;
+
+                    const txFee = gasPrice * tx.gasLimit;
+                    const txFeePercent = `( ${((Number(txFee) / Number(tx.value)) * 100).toFixed(5)}% )`;
+
+                    showSendCoins(
+                        `Bulk Deposit ${ethers.formatEther(tx.value)} ${currencyName}?`,
+                        `Confirm Depositing ${ethers.formatEther(tx.value)} ${currencyName} to <a href="${explorerUrl}/address/${tx.to}" target="_blank" rel="noreferrer nofollow">${tx.to}</a> `
+                        + `(Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
+                        `
+                        <h5 class="mb-3">Notes / Invoices</h5>
+
+                        <table class="table table-bordered">
+                            <tbody>
+                                ${deposits.map(({ note, invoice }) => `
+                                <tr>
+                                    <td class="table-column">${note || invoice}</td>
+                                </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+
+                        <h5 class="mb-3">Transaction Request</h5>
+
+                        <table class="table table-bordered">
+                            <tbody>
+                                <tr>
+                                    <td>ChainID</td>
+                                    <td>${tx.chainId}</td>
+                                </tr>
+                                <tr>
+                                    <td>From (Signer)</td>
+                                    <td><a href="${explorerUrl}/address/${tx.from}" target="_blank" rel="noreferrer nofollow">${tx.from}</a></td>
+                                </tr>
+                                <tr>
+                                    <td>To</td>
+                                    <td><a href="${explorerUrl}/address/${tx.to}" target="_blank" rel="noreferrer nofollow">${tx.to}</a></td>
+                                </tr>
+                                <tr>
+                                    <td>Gas Price</td>
+                                    <td>${ethers.formatUnits(gasPrice, 'gwei')} gwei</td>
+                                </tr>
+                                <tr>
+                                    <td>Gas Limit</td>
+                                    <td>${tx.gasLimit}</td>
+                                </tr>
+                                <tr>
+                                    <td>Transaction Fee</td>
+                                    <td>${ethers.formatEther(txFee)} ${currencyName} ${txFeePercent}</td>
+                                </tr>
+                                <tr>
+                                    <td>Value</td>
+                                    <td>${ethers.formatEther(tx.value)} ${currencyName}</td>
+                                </tr>
+                                <tr>
+                                    <td>Input Data</td>
+                                    <td class="table-column">${tx.data}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        `
+                    );
+
+                    job = {
+                        explorerUrl,
+                        tx,
+                        signer,
+                    };
+
+                } catch (err) {
+                    showStatus('Error while preparing bulk deposit', `Error while preparing bulk deposit: ${err.message}`, 'error');
+                    console.log(err);
+                }
+            }
+
             /**
              * TORN Governance
              */
@@ -3374,13 +3805,12 @@
                         proposalTable.rows.add(proposalTableColumn);
                         proposalTable.draw();
                     
-                        loadingProposals = false;
-                    
                     } catch (err) {
                         errorMsg(`Failed to load governance proposals: ${err.message}`);
                         console.log(err);
-                        loadingProposals = false;
                     }
+
+                    loadingProposals = false;
                 }, 500);
             }
 
@@ -4218,6 +4648,154 @@
                 }
             }
 
+            let loadingApy = false;
+            let loadedApy = false;
+
+            // eslint-disable-next-line no-unused-vars
+            function navApy() {
+                if (!loadedApy) {
+                    loadApy();
+                }
+            }
+            
+            function loadApy() {
+                if (loadingApy) {
+                    return;
+                }
+
+                setTimeout(async () => {
+                    loadingApy = true;
+
+                    try {
+                        $('#apy-content').empty();
+                        $('#apy-content').append(`
+                        <p class="mt-2">Loading recent TORN APY</p>
+                        
+                        <img id="send-loading" src="https://cdn.jsdelivr.net/npm/tornado-cdn@1.0.4/torn2.png" class="loader status">
+                        `);
+
+                        const netId = GOVERNANCE_NETWORK;
+
+                        const config = Tornado.getConfig(netId);
+
+                        const {
+                            explorerUrl,
+                            governanceContract,
+                            registryContract,
+                            tornContract,
+                            constants: { REGISTRY_BLOCK },
+                        } = config;
+
+                        const provider = await getProvider(netId);
+
+                        const tovarishClient = getTovarishClient(netId);
+
+                        const { staticRoot } = getStaticRoot();
+
+                        const idb = await getIndexedDB(netId);
+
+                        const Governance = TornadoContracts.GovernanceVaultUpgrade__factory.connect(governanceContract, provider);
+
+                        const TORN = TornadoContracts.TORN__factory.connect(tornContract, provider);
+
+                        const revenueService = new Tornado.DBRevenueService({
+                            netId,
+                            provider,
+                            RelayerRegistry: TornadoContracts.RelayerRegistry__factory.connect(registryContract, provider),
+                            deployedBlock: REGISTRY_BLOCK,
+                            tovarishClient,
+                            staticUrl: `${staticRoot}/events`,
+                            idb,
+                        });
+
+                        revenueService.zipDigest = getEventHash(revenueService.getInstanceName());
+
+                        const [stakedBalance, { events }] = await Promise.all([
+                            Governance.userVault().then(vault => TORN.balanceOf(vault)),
+                            revenueService.updateEvents(),
+                        ]);
+
+                        // Recent 30 days events
+                        const recentEvents = events
+                            .filter(({ timestamp }) => timestamp > (Math.floor(Date.now() / 1000) - 30 * 86400))
+                            .reverse();
+                        
+                        const weeklyRevenue = recentEvents
+                            .filter(({ timestamp }) => timestamp > (Math.floor(Date.now() / 1000) - 7 * 86400))
+                            .reduce((acc, { amountBurned }) => acc + BigInt(amountBurned), 0n);
+                            
+                        const monthlyRevenue = recentEvents.reduce((acc, { amountBurned }) => acc + BigInt(amountBurned), 0n);
+                        
+                        const weeklyYield = (Number(weeklyRevenue * 52n) / Number(stakedBalance)) * 100;
+                        
+                        const monthlyYield = (Number(monthlyRevenue * 12n) / Number(stakedBalance)) * 100;
+
+                        const revenueTableColumn = recentEvents.map(({ blockNumber, transactionHash, relayerAddress, amountBurned, instanceAddress, relayerFee, timestamp }) => {
+                            const { amount, currency } = Tornado.getInstanceByAddress(config, instanceAddress) || {};
+
+                            const { decimals } = config.tokens[currency];
+
+                            return {
+                                blockNumber,
+                                instance: `${amount} ${currency.toUpperCase()}`,
+                                relayer: `<a href="${explorerUrl}/address/${relayerAddress}" target="_blank" rel="noreferrer nofollow">`
+                                + allRelayers.find(r => r.relayerAddress === relayerAddress)?.ensName || relayerAddress.substring(0, 10) + '</a>',
+                                relayerFees: `${Number(ethers.formatUnits(relayerFee, decimals)).toFixed(5)} ${currency.toUpperCase()}`,
+                                amountBurned: `${Number(ethers.formatEther(amountBurned)).toFixed(3)} TORN`,
+                                timestamp: `<a href="${explorerUrl}/tx/${transactionHash}" target="_blank" rel="noreferrer nofollow">${moment.unix(timestamp).fromNow()}</a>`,
+                            };
+                        });
+
+                        $('#apy-content').empty();
+                        $('#apy-content').append(`
+                        <p class="mt-2">Yield (from 7d income): ${weeklyYield.toFixed(3)}% (${Number(ethers.formatEther(weeklyRevenue)).toFixed(3)} TORN)</p>
+
+                        <p>Yield (from 30d income): ${monthlyYield.toFixed(3)}% (${Number(ethers.formatEther(monthlyRevenue)).toFixed(3)} TORN)</p>
+
+                        <p>Total Staked: ${Number(ethers.formatEther(stakedBalance)).toFixed(3)} TORN</p>
+                        
+                        <table id="revenue-table" class="table table-bordered">
+                            <thead>
+                                <tr>
+                                    <th>Block</th>
+                                    <th>Instance</th>
+                                    <th>Relayer</th>
+                                    <th>Relayer Fees</th>
+                                    <th>TORN Distributed</th>
+                                    <th>Timestamp</th>
+                                </tr>
+                            </thead>
+                        </table>
+                        `);
+
+                        const revenueTable = $('#revenue-table').DataTable({
+                            autoWidth: false,
+                            columns: [
+                                { data: 'blockNumber' },
+                                { data: 'instance' },
+                                { data: 'relayer' },
+                                { data: 'relayerFees' },
+                                { data: 'amountBurned' },
+                                { data: 'timestamp' },
+                            ],
+                            order: [[0, 'desc']],
+                        });
+
+                        revenueTable.clear();
+                        revenueTable.rows.add(revenueTableColumn);
+                        revenueTable.draw();
+
+                        loadedApy = true;
+                        
+                    } catch (err) {
+                        errorMsg(`Failed to load apy: ${err.message}`);
+                        console.log(err);
+                    }
+
+                    loadingApy = false;
+                });
+            }
+
             /**
              * Note Encryption
              */
@@ -4980,7 +5558,7 @@
                     
                     const ensName = $('#register-hostname-name').val();
 
-                    const { relayerEnsSubdomain } = Tornado.getConfig(Number($('#register-hostname-network').val()));
+                    const { relayerEnsSubdomain } = Tornado.getConfig(parseInt($('#register-hostname-network').val()));
 
                     const { hostname } = new URL($('#register-hostname').val());
 
@@ -5315,11 +5893,11 @@
                     }
 
                     if (balance <= value) {
-                        tx.value = balance - ((gasPrice * 1000000n) + l1Fee);
+                        tx.value = balance - ((gasPrice * 500000n) + l1Fee);
                         
                         const gasLimit = await provider.estimateGas(tx);
 
-                        tx.value = balance - ((gasPrice * (gasLimit !== 21000n ? gasLimit * 11n / 10n : gasLimit)) + l1Fee);
+                        tx.value = balance - ((gasPrice * (gasLimit !== 21000n ? gasLimit * 12n / 10n : gasLimit)) + l1Fee);
 
                     }
 
@@ -5331,7 +5909,8 @@
 
                     showSendCoins(
                         `Send ${currencyName}?`,
-                        `Confirm Sending ${ethers.formatEther(tx.value)} ${currencyName} to ${tx.to} (Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
+                        `Confirm Sending ${ethers.formatEther(tx.value)} ${currencyName} to <a href="${explorerUrl}/address/${tx.to}" target="_blank" rel="noreferrer nofollow">${tx.to}</a> `
+                        + `(Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
                         `
                         <table class="table table-bordered">
                             <tbody>
@@ -5413,6 +5992,30 @@
                 job = {};
             }
 
+            // eslint-disable-next-line no-unused-vars
+            async function getUnsigned() {
+                try {
+                    const tx = {
+                        ...job.tx,
+                        from: undefined,
+                    };
+
+                    const serialized = ethers.Transaction.from(tx).unsignedSerialized;
+
+                    showConfirmation(
+                        'Unsigned Transaction',
+                        '',
+                        `<textarea type="text" class="form-control" rows="3" disabled>${serialized}</textarea>`
+                    );
+
+                } catch (err) {
+                    showStatus('Error while generating unsigned transaction', `Error while generating unsigned transaction: ${err.message}`, 'error');
+                    console.log(err);
+                }
+
+                job = {};
+            }
+
             // eslint-disable-next-line no-unused-vars
             async function maxSendAmount() {
                 try {
@@ -5553,7 +6156,8 @@
 
                     showSendCoins(
                         `Send ${symbol}?`,
-                        `Confirm Sending Token ${ethers.formatUnits(value, decimals)} ${symbol} to ${to} (Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
+                        `Confirm Sending Token ${ethers.formatUnits(value, decimals)} ${symbol} to <a href="${explorerUrl}/address/${to}" target="_blank" rel="noreferrer nofollow">${to}</a> `
+                        + `(Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
                         `
                         <table class="table table-bordered">
                             <tbody>
@@ -5656,6 +6260,69 @@
                 }
             }
 
+            // eslint-disable-next-line no-unused-vars
+            async function signTransaction() {
+                try {
+                    // Toggle Modal
+                    new bootstrap.Modal('#send', { backdrop: 'static', keyboard: false }).toggle();
+
+                    showStatus('Signing Transaction', 'Signing Transaction');
+
+                    const deserializedTx = ethers.Transaction.from($('#unsigned-tx').val()).toJSON();
+
+                    const signer = await getSigner(Number(deserializedTx.chainId) || parseInt($('#unsigned-tx-network').val()));
+
+                    const signedTx = await signer.signTransaction(deserializedTx);
+
+                    showConfirmation(
+                        'Signed Transaction',
+                        '',
+                        `
+                        <p class="mb-2">Transaction Request</p>
+                        <textarea type="text" class="form-control" rows="14" disabled>${JSON.stringify(deserializedTx, null, 2)}</textarea>
+
+                        <p class="mt-2 mb-2">Signed Transaction</p>
+                        <textarea type="text" class="form-control" rows="3" disabled>${signedTx}</textarea>
+                        `
+                    );
+
+
+                } catch (err) {
+                    showStatus('Error while signing transaction', `Error while signing transaction: ${err.message}`, 'error');
+                    console.log(err);
+                }
+            }
+
+            // eslint-disable-next-line no-unused-vars
+            async function broadcastTransaction() {
+                try {
+                    // Toggle Modal
+                    new bootstrap.Modal('#send', { backdrop: 'static', keyboard: false }).toggle();
+
+                    showStatus('Broadcasting Transaction', 'Broadcasting Transaction');
+
+                    const signedTransaction = ethers.Transaction.from($('#raw-tx').val());
+
+                    const netId = Number(signedTransaction.chainId) || parseInt($('#raw-tx-network').val());
+
+                    const { explorerUrl } = Tornado.getConfig(netId);
+                    
+                    const provider = await getProvider(netId);
+
+                    const { hash } = await provider.broadcastTransaction(signedTransaction.serialized);
+
+                    showConfirmation(
+                        'Broadcasted Transaction',
+                        '',
+                        `Broadcasted transaction <a href="${explorerUrl}/tx/${hash}" target="_blank" rel="noreferrer nofollow">${hash}</a>`
+                    );
+
+                } catch (err) {
+                    showStatus('Error while broadcasting transaction', `Error while broadcasting transaction: ${err.message}`, 'error');
+                    console.log(err);
+                }
+            }
+
             // eslint-disable-next-line no-unused-vars
             function createWallet() {
                 const { mnemonic: { phrase }, address, privateKey } = ethers.HDNodeWallet.createRandom();
@@ -5825,11 +6492,11 @@
                     }
 
                     if (balance <= value) {
-                        tx.value = balance - ((gasPrice * 1000000n) + l1Fee);
+                        tx.value = balance - ((gasPrice * 200000n) + l1Fee);
                         
                         const gasLimit = await provider.estimateGas(tx);
 
-                        tx.value = balance - ((gasPrice * (gasLimit !== 21000n ? gasLimit * 11n / 10n : gasLimit)) + l1Fee);
+                        tx.value = balance - ((gasPrice * (gasLimit !== 21000n ? gasLimit * 12n / 10n : gasLimit)) + l1Fee);
 
                     }
 
@@ -5841,7 +6508,8 @@
 
                     showSendCoins(
                         'Deposit Gas.zip?',
-                        `Confirm Gas.zip transaction ${ethers.formatEther(tx.value)} ${currencyName} to ${recipient || tx.from} (chains: ${outbounNetIds.join(', ')} (Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
+                        `Confirm Gas.zip transaction ${ethers.formatEther(tx.value)} ${currencyName} to <a href="${explorerUrl}/address/${recipient || tx.from}" target="_blank" rel="noreferrer nofollow">${recipient || tx.from}</a> `
+                        + `(chains: ${outbounNetIds.join(', ')} (Should also spend ${ethers.formatEther(txFee)} ${currencyName} for tx fee).`,
                         `
                         <table class="table table-bordered">
                             <tbody>
@@ -6050,16 +6718,38 @@
                     $('.bar-link[data-page="home"]').addClass('active');
                 });
 
+                function nav(page) {
+                    $('.page').addClass('d-none');
+                    $(`#${page}`).removeClass('d-none');
+
+                    $('.bar-link').removeClass('active');
+                    $(`.bar-link[data-page="${page}"]`).addClass('active');
+
+                    if (page === 'voting') {
+                        navVoting();
+                    }
+
+                    if (page === 'home') {
+                        window.location.hash = '';
+                    } else {
+                        window.location.hash = `#${page}`;
+                    }
+                }
+
+                function parseNav() {
+                    const page = window.location.hash.split('#')[1];
+
+                    if (page) {
+                        nav(page);
+                    }
+                }
+
+                parseNav();
+
                 $('.bar-link').click(function (e) {
                     e.preventDefault();
 
-                    const nav = $(this).data('page');
-
-                    $('.page').addClass('d-none');
-                    $(`#${nav}`).removeClass('d-none');
-
-                    $('.bar-link').removeClass('active');
-                    $(this).addClass('active');
+                    nav($(this).data('page'));
                 });
 
                 $('.card-link').click(function (e) {
@@ -6148,17 +6838,6 @@
                     changeDisplay({ netId, currency, amount });
                 });
 
-                $('#relayers').on('change', (e) => {
-                    e.preventDefault();
-
-                    const isWallet = $('#relayers').find(':selected').val() === 'wallet';
-                    const selectedRelayer = getSelectedRelayer();
-
-                    if (!isWallet && !selectedRelayer.tovarishHost) {
-                        alertMsg(`Selected Classic Relayer (${selectedRelayer.ensName}) doesn't support Events API thus withdrawal process will be slower than usual, Select Tovarish Relayer to fix this`);
-                    }
-                });
-
                 $('#gas-zip-inbound').on('change', (e) => {
                     e.preventDefault();
 
diff --git a/package.json b/package.json
index 3cfe392..2098590 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tornado-withdraw",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "main": "index.js",
   "scripts": {