ZencashOfficial/arizen

View on GitHub
app/zwallet.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arizen</title>
    <link rel="stylesheet" href="resources/zstyle.css">
    <link rel="stylesheet" href="resources/page.css">
    <link rel="stylesheet" href="resources/zwallet.css">
    <script src="tabs.js"></script>
    <link rel=import href="webcomponents/arizen-dialog.html">
</head>
<body>

<template id=txDialogTemplate>
    <arizen-dialog class=txDialog>
        <h2 slot=headerText data-tr=wallet.transactionDetail.label>Transaction Detail</h2>
        <div class=form slot=content>
            <div data-tr=wallet.transactionDetail.txid>Transaction ID</div>
            <div>
                <div class='txDetailTxId monospace'></div>
                <a class=txInfoLink href=# data-tr=wallet.showExplorer>Show in ZEN Explorer</a>
            </div>
            <div data-tr=wallet.date>Date</div>
            <div class=txDetailDate></div>
            <div data-tr=wallet.transactionDetail.blockHeight>Block Height</div>
            <div class=txDetailBlock></div>
            <div data-tr=wallet.amount>Amount</div>
            <div class=txDetailAmount><span></span> ZEN</div>
            <div data-tr=wallet.from>From</div>
            <div class='txDetailFrom monospace'></div>
            <div data-tr=wallet.to>To</div>
            <div class='txDetailTo monospace'></div>
        </div>
    </arizen-dialog>
</template>

<template id=mempoolTxDialogTemplate>
    <arizen-dialog class=txDialog>
        <h2 slot=headerText data-tr=wallet.transactionDetail.label>Transaction Detail</h2>
        <div slot=content>
            <div class=form>
                <div data-tr=wallet.transactionDetail.txid>Transaction ID</div>
                <div>
                    <div class='txDetailTxId monospace'></div>
                    <div class=warning data-tr=wallet.transactionDetail.unconfirmedTx>UNCONFIRMED TRANSACTION</div>
                    <a class=txInfoLink href=# data-tr=wallet.showExplorer>Show in ZEN Explorer</a>
                </div>
                <div data-tr=wallet.amount>Amount</div>
                <div class=txDetailAmount><span></span> ZEN</div>
                <div data-tr=wallet.from>From</div>
                <div class='txDetailFrom monospace'></div>
                <div data-tr=wallet.to>To</div>
                <div class='txDetailTo monospace'></div>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=addrDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.addressDetail.label>Address Detail</h2>
        <div slot=content>
            <div class=form>
                <div data-tr=wallet.addressDetail.name>Name</div>
                <input type=text class=addrDetailName />
                <div data-tr=wallet.addressDetail.address>Address</div>
                <div>
                    <div class="addrDetailAddr monospace"></div>
                    <a class=addrInfoLink href=# data-tr=wallet.showExplorer>Show in ZEN Explorer</a>
                </div>
                <div data-tr=wallet.balance>Balance</div>
                <div class=addrDetailBalance><span></span> ZEN</div>
            </div>
            <div class=formButtons>
                <button class=addrDetailSave data-tr=wallet.addressDetail.saveButton>Save changes</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=newAddrDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.newAddress.label>Create a New Address</h2>
        <div slot=content>
            <div class=form>
                <div data-tr=wallet.newAddress.name>Name (optional)</div>
                 <div>
                <input type=text class=newAddrDialogName />

                <input type=radio id=choiceT name=TorZ class=TorZgetT value=0 checked>
                <label for=choiceT>T (Transparent)</label>

                <a class=TorZgetZframe>
                <input type=radio id=choiceZ name=TorZ class=TorZgetZ value=1>
                <label for=choiceZ class=TorZgetZLabel>Z (Private Zero Knowledge)</label>
                </a>


              </div>
            </div>
            <div class=formButtons>
                <button class=newAddrDialogCreate data-tr=wallet.newAddress.createButton>Create</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=importSinglePrivateKeyDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.importSinglePrivateKey.titleLabel>Import Single Private Key</h2>
        <div slot=content>
            <div class=form>
                <div data-tr=wallet.newAddress.name>Name (optional)</div>
                <input type=text class=newPrivateKeyDialogName />
                <div data-tr=wallet.importSinglePrivateKey.privateKeyLabel>Private Key</div>
                <input type=text class=newPrivateKeyDialogKey />

                <input type=radio id=choiceT name=TorZimport class=importTorZgetT value=0 checked>
                <label for=choiceT>T (Transparent)</label>

                <input type=radio id=choiceZ name=TorZimport class=importTorZgetZ value=1>
                <label for=choiceZ>Z (Private Zero Knowledge)</label>
            </div>
            <div class=formButtons>
                <button class=newPrivateKeyImportButton data-tr=wallet.importSinglePrivateKey.importButtonLabel>Import</button>
            </div>
        </div>
    </arizen-dialog>
</template>


<!-- FIXME: Delete me  -->
<template id=tempRpcTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.rpcConsole.title>RPC</h2>
        <div slot=content>
            <div class=form>
                <div data-tr=wallet.rpcConsole.command>Command</div>
                <input type=text class=giveCommandRPC value="getinfo" />
            </div>
            <div class=formButtons>
                <button class=testRPCButton data-tr=wallet.rpcConsole.test>Test Me</button>
            </div>
            <textarea id=resultRPC class=resultRPC slot=headerText rows=20 cols=100 data-tr=wallet.rpcConsole.results>RPC Results ...</textarea>
            <div data-tr=wallet.rpcConsole.status>Status: </div><div class=statusRPC></div>
            <button class=testFunction data-tr=wallet.rpcConsole.testFunctionButton>Test Function</button>
        </div>
    </arizen-dialog>
</template>
<!-- Delete me  -->

<template id=addrSelectRowTemplate>
    <tr class=addrSelectRow>
        <td class=addrSelectRowName></td>
        <td class="addrSelectRowAddr monospace"></td>
        <td class=addrSelectRowBalance><span></span> ZEN</td>
    </tr>
</template>

<template id=addrMultiselectRowTemplate>
    <tr class=addrSelectRow>
        <td>
          <label class=container>
              <input class=addrSelectCheckbox type=checkbox />
              <span class=checkmark></span>
          </label>
        </td>
        <td class=addrSelectRowName></td>
        <td class="addrSelectRowAddr monospace"></td>
        <td class=addrSelectRowBalance><span></span> ZEN</td>
    </tr>
</template>

<template id=addrSelectDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.listOfAddresses>List of Addresses</h2>
        <table slot=content class=addrSelectList>
        </table>
    </arizen-dialog>
</template>

<template id=batchWithdrawDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.batchWithdraw.label>Batch Withdraw</h2>
        <div slot=content class=batchWithdrawContent>
            <div class='hToolbar batchWithdrawToolbar'>
                <button id=batchWithdrawSelectAll data-tr=common.selectAll>Select all</button>
                <button id=batchWithdrawClearAll data-tr=common.clearAll>Clear all</button>
            </div>
            <table class=addrSelectList></table>
            <div class=form>
                <button id=batchWithdrawToAddrSelect data-tr=wallet.to>To</button>
                <input type=text id=batchWithdrawToAddr name=batchWithdrawToAddr class=monospace />

                <label for=batchWithdrawKeepAmount data-tr=wallet.batchWithdraw.keepAmount>Amount to keep</label>
                <input type=number id=batchWithdrawKeepAmount name=batchWithdrawKeepAmount class=amountInput value=42.00000000 min=0 step=0.1 />

                <label for=batchWithdrawFee data-tr=wallet.tabWithdraw.fee>Transaction fee</label>
                <input type=number id=batchWithdrawFee name=batchWithdrawFee class=amountInput value=0.00000000 min=0 step=0.1 />
            </div>
            <div class=formButtons>
                <button id=batchWithdrawButton data-tr=wallet.tabWithdraw.label>Withdraw</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=batchSplitDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.batchSplit.label>Batch Split</h2>
        <div slot=content class=batchSplitContent>
            <div class=form>
                <div data-tr=wallet.tabWithdraw.availableBalance>Available balance</div>
                <div id=splitAvailBalance><span></span> ZEN</div>

                <button id=batchSplitFromAddrSelect data-tr=wallet.from>From</button>
                <input type=text id=batchSplitFromAddr name=batchSplitFromAddr class=monospace />

                <label for=batchSplitToAmount data-tr=wallet.batchSplit.splitToAmounts>Split to amounts</label>
                <input type=number id=batchSplitToAmount name=batchSplitToAmount class=amountInput value=42.00000000 min=0 step=0.1 />

                <label for=batchSplitFee data-tr=wallet.tabWithdraw.fee>Transaction fee</label>
                <input type=number id=batchSplitFee name=batchSplitFee class=amountInput value=0.00000000 min=0 step=0.1 />
            </div>
            <br>
            <label data-tr=wallet.batchSplit.toAddresses>To addresses:</label>
            <table class=addrSelectList></table>
            <div class='hToolbar batchSplitToolbar'>
                <button id=batchSplitClearAll data-tr=common.clearAll>Clear all</button>
            </div>

            <div class=formButtons>
                <button id=batchSplitButton data-tr=wallet.batchSplit.splitButtonLabel>Split</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=txSendStatusDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.tabWithdraw.txStatus>Transaction Status</h2>
        <div slot=content id=txStatusText>
            Sending transaction. Please wait...
        </div>
    </arizen-dialog>
</template>

<template id=paperWalletDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.paperWallet.generateNewWallet>Generate New Wallet</h2>
        <div slot=content>
            <div class=form>
                <label for=paperWalletName data-tr=wallet.paperWallet.name>Name (optional)</label>
                <input type=text class=paperWalletName name=paperWalletName />
                <label for=paperWalletAdd data-tr=wallet.paperWallet.addWalletToArizen>Also add to Arizen</label>
                <label class=container>
                    <input type=checkbox class=paperWalletAdd name=paperWalletAdd />
                    <span class=checkmark></span>
                </label>
            </div>
            <div class=formButtons>
                <button class=paperWalletCreateButton data-tr=wallet.paperWallet.exportPDFLabel>Export PDF</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<!-- TODO this doesn't belong here -->
<template id=aboutDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.about.label>About Arizen</h2>
        <div slot=content class=aboutDialogContent>
            <div class=form>
                <div data-tr=wallet.about.homepage>Homepage</div>
                <div class=aboutHomepage></div>
                <div data-tr=wallet.about.version>Version</div>
                <div class=aboutVersion></div>
                <div data-tr=wallet.about.license>License</div>
                <div class=aboutLicense></div>
                <!-- <div data-tr=wallet.about.authors>Authors</div>
                <div class=aboutAuthors></div> -->
            </div>
            <a class=zenLogo><img src='resources/zen_icon.png' /></a>
        </div>
    </arizen-dialog>
</template>

<!-- TODO this doesn't belong here -->
<template id=settingsDialogTemplate>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.settings.label>Settings</h2>
        <div slot=content class=settingsDialogContent>
            <div class=form>
                <label for=settingsLanguage data-tr=wallet.settings.language>Language</label>
                <select name=settingsLanguage class=settingsLanguage size=1>
                </select>

                <label for=settingsFiatCurrency title="Select the desired fiat to display your balance."  data-tr=wallet.settings.fiat>Fiat Equivalent</label>
                <select name=settingsFiatCurrency class=settingsFiatCurrency >
                    <option value="USD">(USD) US Dollar</option>
                    <option value="EUR">(EUR) Euro</option>
                    <option value="RUB">(RUB) Russian Ruble</option>
                    <option value="JPY">(JPY) Japan Yen</option>
                    <option value="GBP">(GBP) British Pound</option>
                    <option value="AUD">(AUD) Australian Dollar</option>
                    <option value="USD">-------------------</option>
                    <option value="BRL">(BRL) Brazilian Real</option>
                    <option value="CAD">(CAD) Canadian Dollar</option>
                    <option value="CHF">(CHF) Swiss Franc</option>
                    <option value="CLP">(CLP) Chili Peso</option>
                    <option value="CNY">(CNY) China Yuan/Renminbi</option>
                    <option value="CZK">(CZK) Czech Koruna</option>
                    <option value="DKK">(DKK) Denmark Krone</option>
                    <option value="HKD">(HKD) Hong Kong Dollar</option>
                    <option value="IDR">(IDR) Indonesia Rupiah</option>
                    <option value="ILS">(ILS) Israel New Shekel</option>
                    <option value="INR">(INR) India Rupee</option>
                    <option value="KRW">(KRW) South Korea Won</option>
                    <option value="MXN">(MXN) Mexico Peso</option>
                    <option value="MYR">(MYR) Malaysia Ringgit</option>
                    <option value="NOK">(NOK) Norway Kroner</option>
                    <option value="NZD">(NZD) New Zealand Dollar</option>
                    <option value="PHP">(PHP) Philippines Peso</option>
                    <option value="PKR">(PKR) Pakistan Rupee</option>
                    <option value="PLN">(PLN) Poland Zloty</option>
                    <option value="SEK">(SEK) Sweden Krona</option>
                    <option value="SGD">(SGD) Singapore Dollar</option>
                    <option value="THB">(THB) Thailand Baht</option>
                    <option value="TRY">(TRY) Turkish New Lira</option>
                    <option value="TWD">(TWD) Taiwan Dollar</option>
                    <option value="ZAR">(ZAR) South Africa Rand</option>
                </select>

                <label for=enableNotifications data-tr=wallet.settings.enableNotifications>Desktop notifications</label>
                <label class=container>
                    <input type=checkbox class=enableNotifications name=enableNotifications />
                    <span class=checkmark></span>
                </label>

                <label for=settingsTxHistory data-tr=wallet.settings.limit>Transaction history display limit</label>
                <span class=formInput><input type=number name=settingsTxHistory class=settingsTxHistory min=0 /><span data-tr=wallet.settings.items>items</span></span>

                <hr class=formDivider />

                <label for=settingAutoLogOffEnable data-tr=wallet.settings.autoLogOffEnable>Enable automatic log off</label>
                <label class=container>
                    <input type=checkbox class=settingAutoLogOffEnable name=settingAutoLogOffEnable />
                    <span class=checkmark></span>
                </label>

                <label for=settingAutoLogOffTimeout data-tr=wallet.settings.autoLogOffTimeout>Auto log off timeout in seconds</label>
                <span class=formInput>
                    <input type=number name=settingAutoLogOffTimeout class=settingAutoLogOffTimeout min=60 step=1/>
                    <span>s</span>
                </span>

                <hr class=formDivider />

                <label for=settingsExplorerUrl data-tr=wallet.settings.explorerUrl>ZEN Explorer URL</label>
                <input type=text name=settingsExplorerUrl class=settingsExplorerUrl />

                <label for=settingsApiUrls title="Place one URL per line" data-tr=wallet.settings.apiUrl>API URLs</label>
                <textarea type=text name=settingsApiUrls class=settingsApiUrls rows=5></textarea>

                <label for=refreshIntervalAPI data-tr=wallet.settings.refreshIntervalAPI>API Refresh Interval (ms)</label>
                <input type=text name=settingsRefreshIntervalAPI class=settingsRefreshIntervalAPI />

                <hr class=formDivider />

                <label for=secureNodeFQDN data-tr=wallet.settings.secureNodeFQDN>Secure Node FQDN</label>
                <input type=text name=settingsSecureNodeFQDN class=settingsSecureNodeFQDN />
                <label for=sshUsername data-tr=wallet.settings.sshUsername>SSH username</label>
                <input type=text name=settingsSshUsername class=settingsSshUsername />
                <label for=sshPassword data-tr=wallet.settings.sshPassword>SSH password</label>
                <input type=password name=settingsSshPassword class=settingsSshPassword />
                <label for=sshPrivateKey data-tr=wallet.settings.sshPrivateKey>Path to SSH private key file</label>
                <div style="align-self: stretch;">
                    <input type=text id=settingsSshPrivateKey name=settingsSshPrivateKey class=settingsSshPrivateKey />
                    <button id=chooseKeyPath class=chooseKeyPath data-tr=wallet.settings.chooseKeyPath >Browse</button>
                </div>
                <label for=sshPassphrase data-tr=wallet.settings.sshPassphrase>Passphrase for SSH private key file (if necessary)</label>
                <input type=password name=settingsSshPassphrase class=settingsSshPassphrase />
                <label for=sshPort data-tr=wallet.settings.sshPort>SSH port</label>
                <input type=text name=settingsSshPort class=settingsSshPort />
                <label for=secureNodePort data-tr=wallet.settings.secureNodePort>Secure Node Port (see zen.conf)</label>
                <input type=text name=settingsSecureNodePort class=settingsSecureNodePort />
                <label for=secureNodeUsername data-tr=wallet.settings.secureNodeUsername>Secure Node Username (see zen.conf)</label>
                <input type=text name=settingsSecureNodeUsername class=settingsSecureNodeUsername />
                <label for=secureNodePassword data-tr=wallet.settings.secureNodePassword>Secure Node Password (see zen.conf)</label>
                <input type=password name=settingsSecureNodePassword class=settingsSecureNodePassword />
                <label for=readyTimeout data-tr=wallet.settings.readyTimeout>Ready Timeout (default: 10000)</label>
                <input type=text name=settingsReadyTimeout class=settingsReadyTimeout />
                <label for=forwardTimeout data-tr=wallet.settings.forwardTimeout>Forward Timeout (default: 10000)</label>
                <input type=text name=settingsForwardTimeout class=settingsForwardTimeout />

                <hr class=formDivider />
                <label for=enableDomainFronting data-tr=wallet.settings.enableDomainFronting style="visibility:hidden;display: none">Enable domain fronting</label>
                <label class=container style="visibility:hidden;display: none">
                    <input type=checkbox class=enableDomainFronting name=enableDomainFronting />
                    <span class=checkmark></span>
                </label>
                <label for=settingDomainFrontingUrl data-tr=wallet.settings.domainFrontingUrl style="visibility:hidden;display: none">Domain fronting public base URL</label>
                <input type=text name=settingDomainFrontingUrl class=settingDomainFrontingUrl style="visibility:hidden;display: none" />
                <label for=settingDomainFrontingHost data-tr=wallet.settings.domainFrontingHost style="visibility:hidden;display: none">Domain fronting private host</label>
                <input type=text name=settingDomainFrontingHost class=settingDomainFrontingHost style="visibility:hidden;display: none" />
                <hr class=formDivider style="visibility:hidden;display: none"/>
            </div>
            <div class=formButtons>
                <button class=settingsSave data-tr=wallet.settings.save>Save</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<template id=changeWalletPasswordDialog>
    <arizen-dialog>
        <h2 slot=headerText data-tr=wallet.changePassword.title>Change Wallet Password</h2>
        <div slot=content class=changeWalletPasswordDialogContent>
            <div class=changeWalletPasswordWarning data-tr="wallet.changePassword.warningText">
                WARNING: Wallet backups won't be re-encrypted! If you need to
                use them, you will have to use current password.
            </div>
            <div class=form>
                <label for=currentPassword data-tr=wallet.changePassword.currentPassword>Current Password</label>
                <input type=password name=currentPasswordText class=currentPasswordText />
                <label for=newPassword1 data-tr=wallet.changePassword.newPassword1>New Password</label>
                <input type=password name=newPasswordText1 class=newPasswordText1 />
                <label for=newPassword2 data-tr=wallet.changePassword.newPassword2>New Password (Retype)</label>
                <input type=password name=newPasswordText2 class=newPasswordText2 />
            </div>
            <div class=changeWalletPasswordErrors>
            </div>
            <div class=formButtons>
                <button class=changePasswordOK data-tr=common.okButtonText>OK</button>
                &nbsp;
                <button class=changePasswordCancel data-tr=common.cancelButtonText>Cancel</button>
            </div>
        </div>
    </arizen-dialog>
</template>

<div class=body>

<header class='panel'>
    <div class=headerLeft>
        <span><button onclick="showBatchWithdrawDialog()" data-tr=wallet.showBatchWithdrawDialog>Batch Withdraw</button></span>
        <span><button onclick="showBatchSplitDialog()" data-tr=wallet.showBatchSplitDialog>Batch Split</button></span>
        <span><button onclick="showPaperWalletDialog()" data-tr=wallet.paperWallet.label>Paper Wallet</button></span>
        <span><button onclick="showImportSinglePKDialog()" data-tr=wallet.importSinglePrivateKey.openButtonLabel>Import Private Key</button></span>
    </div>
    <div class=headerCenter>
        <a class=arizenTitle href='https://github.com/HorizenOfficial/arizen'>Arizen</a>
        <a class=zenLogo><img id=zenImg src='resources/zen_icon.png' /></a>
    </div>
    <div class=headerRight>
        <span><button onclick="showSettingsDialog()" data-tr=wallet.showSettingsDialogButton>Settings</button></span>
        <span><button onclick="showAboutDialog()" data-tr=wallet.showAboutDialogButton>About</button></span>
        <span><button id=refreshButton data-tr=wallet.refreshWallet>Refresh</button></span>
        <span><button onclick='logout()' data-tr=wallet.logout>Logout</button></span>
        <span><button onclick='exitApp()' data-tr=wallet.exit>Exit</button></span>
    </div>
</header>

<x-tabs class='walletOps panel'>
    <div class=walletOpsTabs>
        <button data-tab-button="overview" data-tr=wallet.tabOverview.label selected>Overview</button>
        <button id="depositTabButton" data-tab-button="deposit" data-tr=wallet.tabDeposit.label>Deposit</button>
        <button id="withdrawTabButton" data-tab-button="withdraw" data-tr=wallet.tabWithdraw.label>Withdraw</button>
    </div>
    <div data-tab-content=overview class='walletOverview tabContent'>
        <div class='tabContentHeader walletOverviewControl'>
            <span class=tabContentHeaderLabel data-tr=wallet.listOfAddresses>List of Addresses</span>
            <label class=container>
                <input type=checkbox id=actionShowZeroBalances name=actionShowZeroBalances checked=checked>
                <label for=actionShowZeroBalances data-tr=wallet.tabOverview.showZeroBalances>Show zero balances</label>
                <span class=checkmark></span>
            </label>
            <button id=createNewAddrButton class=smallButton data-tr=wallet.tabOverview.newAddress>Get a new address</button>
        </div>
        <template id=addrItemTemplate>
            <div class=addrItem>
                <div class=addrInfo>
                    <div class=addrBalance><span class=addrBalanceAmount></span> ZEN</div>
                    <div class=addrNameLine>
                        <img class=addrDetailButton src="resources/About_icon_(The_Noun_Project).svg" />
                        <span class=addrName></span>
                    </div>
                    <span class="addrText monospace"></span>
                </div>
                <div class=addrControl>
                    <button class='button addrControlButton addrDepositButton'
                        title='Deposit to this address'>⬇</button>
                    <button class='button addrControlButton addrWithdrawButton'
                        title='Withdraw from this address'>⬆</button>
                </div>
            </div>
        </template>
        <div id=addrList class=tabContentBody>
        </div>
    </div>
    <div data-tab-content=deposit class='walletDeposit tabContent'>
        <div class='tabContentHeader tabContentHeaderLabel' data-tr=wallet.tabDeposit.label>
            Deposit
        </div>
        <div class='tabContentBody depositBody'>
            <div class=form id=depositForm>
                <button id=depositToButton data-tr=wallet.to>To</button>
                <input id=depositToAddr name=depositToAddr class=monospace type=text />
                <div data-tr=wallet.amount>Amount</div>
                <input class=amountInput id=depositAmount name=depositAmount type=number value=0.00000000 min=0 step=0.1 />
            </div>
            <span id=depositMsg>&nbsp;</span>
            <div>
                <img id=depositQrcodeImg  class=hidden src=""/>
            </div>
            <button id=depositSaveQrcodeButton data-tr=wallet.tabDeposit.saveQrcode disabled>Save QR code</button>
        </div>
    </div>
    <div data-tab-content=withdraw class='walletWithdraw tabContent'>
        <div class='tabContentHeader tabContentHeaderLabel' data-tr=wallet.tabWithdraw.label>
            Withdraw
        </div>
        <div class='tabContentBody withdrawBody'>
            <div class=form id=withdrawForm>
                <div data-tr=wallet.tabWithdraw.availableBalance>Available balance</div>
                <div id=withdrawAvailBalance><span></span> ZEN</div>
                <button id=withdrawFromButton data-tr=wallet.from>From</button>
                <input id=withdrawFromAddr name=withdrawFromAddr class=monospace type=text />
                <button id=withdrawToButton data-tr=wallet.to>To</button>
                <input id=withdrawToAddr name=withdrawToAddr class=monospace type=text />
                <div data-tr=wallet.amount>Amount</div>
                <div>
                    <input class=amountInput id=withdrawAmount name=withdrawAmount type=number value=0.00000000 min=0 step=0.1 />
                    <button id=withdrawMaxButton data-tr=wallet.max>Max</button>
                </div>
                <div data-tr=wallet.tabWithdraw.fee>Transaction fee</div>
                <input class=amountInput id=withdrawFee name=withdrawFee type=number value=0.00010000 min=0 step=0.00010000 />
            </div>
            <span id=withdrawMsg>&nbsp;</span>
            <button id=withdrawButton data-tr=wallet.tabWithdraw.label>Withdraw</button>
            <div class='withdrawStatusMessage'>
                <div id=withdrawStatusTitle class=withdrawStatusBad></div>
                <div id=withdrawStatusBody></div>
            </div>
        </div>
    </div>
</x-tabs>

<div class='txPanel panel'>
    <div class=txPanelHeader>
        <span data-tr=wallet.transactionHistory.label>Transaction History</span>
    </div>
    <template id=txItemTemplate>
        <div class=txItem>
            <span class=txDate></span>
            <div class=filler></div>
            <span class=txBalance><span class=txBalanceAmount></span> ZEN</span>
        </div>
    </template>
    <template id=txMempoolItemTemplate>
        <div class='txItem txMempoolItem'>
            <span class="warning txMempoolItemTitle" data-tr=wallet.transactionHistory.unconfirmed>UNCONFIRMED</span>
            <div class=filler></div>
            <span class=txBalance><span class=txBalanceAmount></span> ZEN</span>
        </div>
    </template>
    <div id=txList>
    </div>
</div>

<footer class='statusLine panel'>
    <span data-tr=wallet.totalBalance>Total balance</span>: <span id=totalBalance><span id=totalBalanceAmount>0.00000000</span> ZEN </span>
    <span> / </span>
    <span id=totalBalanceFiat><span id=totalFiatBalanceAmount>0.00</span></span>
    <span id=lastUpdateTimeText> / <span data-tr=wallet.lastUpdate>Last update</span>: <span id=lastUpdateTime></span></span>
    <span id=snStatusFrame class=snStatusFrame>
    </span>
    <span><a id=loadingImage class=loading></a></span>
    <span id=autoLogOffTimer class=hidden>
        <span> / </span>
        <span data-tr=wallet.autoLogOffLabel>Log off in </span>
        <span id=autoLogOffTimerTime></span>
        s
    </span>
</footer>

</div>

<script src='zcommon.js'></script>
<script src='zwallet.js'></script>

</body>
</html>