HelenaExpressApp/www/pages/crypto_wallet.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="crypto_wallet">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link back" href="#">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Crypto Wallet</div>
        </div>
    </div>


    <div class="page-content">

        <div class="card-content-padding text-align-center">
            <img id="walletBalanceLogo" style="max-height: 25vh; max-width: 25vw; height: 5em;" src="{{logo}}" />
            <p>This <span id="walletCurrency">{{currencyname}}</span> wallet contains</p>
            <h2><span id="walletBalanceAmount">{{balance}} {{currencyunit}}</span></h2>
            <p>currently worth</p>
            <h2><span id="walletFiatAmount">{{fiatvalue}}</span></h2>
        </div>

        <div class="row justify-content-center">
            <div class="col-100 medium-50 large-30">
                <div class="block">
                    <div class="button hapticbtn button-fill popup-open" id="sendCryptoOpenPopupBtn"><i class="fa-solid fa-inbox-out"></i> Send</div>
                </div>
                <div class="block">
                    <div class="button hapticbtn button-fill popup-open" data-popup="#receiveCryptoPopup" id="receiveCryptoOpenPopupBtn"><i class="fa-solid fa-inbox-in"></i> Receive</div>
                </div>
            </div>
        </div>

        <div class="card-content-padding text-color-gray text-align-center" id="walletAddress">{{walletaddress}}</div>

        <div class="card-content-padding text-color-gray text-align-center" id="walletBalanceAttribution">
            {{attribution}}
        </div>
    </div>

    <div class="popup" id="sendCryptoPopup">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a class="link popup-close" href="#">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Close</span>
                    </a>
                </div>
                <div class="title">Send Crypto</div>
            </div>
        </div>

        <div class="list margin-bottom-half">
            <ul>
                <li class="item-divider">Step 1</li>
                <li class="item-content">
                    <div class="item-inner">
                        Scan your private key. The private key unlocks your wallet and authorizes the transfer.
                    </div>
                </li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-input-wrap">
                            <input type="text" id="walletPrivateKey" placeholder="6JJRxyW..." />
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="button hapticbtn button-fill" onclick="scanPrivateKeyQrCode(function (d) {
                                        $('#walletPrivateKey').val(d);
                                    });"><i class="fa-solid fa-key"></i> Scan Private Key
                    </div>
                </li>


                <li class="item-divider">Step 2</li>
                <li class="item-content">
                    <div class="item-inner">
                        Scan or paste the recipient's wallet address.
                        The money will be sent here. Important: the recipient must be expecting the
                        same cryptocurrency your wallet uses. Otherwise the money will
                        be lost forever.
                    </div>
                </li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-input-wrap">
                            <input type="text" id="walletToAddress" placeholder="1X68a3n1..." value="{{sendtoaddress}}" />
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
                                        var parsed = parsePaymentURI(d);
                                        if (parsed == null) {
                                            $('#walletToAddress').val(d);
                                        } else {
                                            $('#walletToAddress').val(parsed.address);
                                            if (typeof parsed['amount'] != 'undefined') {
                                                $('#transactionAmount').val(parsed.amount);
                                            }
                                        }
                                    });"><i class="fa-solid fa-inbox-in"></i> Scan Recipient's Wallet
                    </div>
                </li>

                <li class="item-divider">Step 3</li>
                <li class="item-content">
                    <div class="item-inner">
                        Enter the amount to send.
                    </div>
                </li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-title item-label" id="cryptoAmountSendCurrencyLabel"></div>
                        <div class="item-input-wrap">
                            <input type="number" id="transactionAmount" step="0.00000001" min="0.00000001" max="999999.99999999" value="{{sendtoamount}}"/>
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content item-input" id="cryptoFiatInputItem" style="display: none;">
                    <div class="item-inner">
                        <div class="item-title item-label" id="cryptoAmountSendFiatLabel"></div>
                        <div class="item-input-wrap">
                            <input type="number" id="transactionAmountFiat" step="0.01" min="0.01" max="9999.99"/>
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>

                <li class="item-divider">Step 4</li>
                <li class="item-content">
                    <div class="item-inner">
                        <div><span class="taptext">Tap</span><span class="clicktext">Click</span> the button to send the transaction.</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="button hapticbtn button-fill" onclick="walletGUISendCoins()">
                        <i class="fa-solid fa-paper-plane"></i> Send Transaction
                    </div>
                </li>
                <li class="item-content">
                    <div class="button hapticbtn popup-close" onclick="$('#walletPrivateKey').val('');" >
                        <i class="fa-solid fa-xmark"></i> Cancel
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="popup" id="receiveCryptoPopup">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a class="link popup-close" href="#">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Close</span>
                    </a>
                </div>
                <div class="title">Request Crypto</div>
            </div>
        </div>
        <div class="margin">
            Enter the amount to request.
        </div>
        <div class="list margin-bottom-half margin-top-half">
            <ul>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-title item-label" id="cryptoAmountReceiveCurrencyLabel">{{currencyunit}}</div>
                        <div class="item-input-wrap">
                            <input type="number" id="receiveAmount" step="0.00000001" min="0.00000001" max="999999.99999999" data-currency="{{currencyunit}}" />
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content item-input" id="cryptoAmountReceiveFiatLI" style="display: none;">
                    <div class="item-inner">
                        <div class="item-title item-label" id="cryptoAmountReceiveFiatLabel"></div>
                        <div class="item-input-wrap">
                            <input type="number" id="receiveAmountFiat" step="0.01" min="0.01" max="9999.99" data-exchangerate="{{exchangerate}}" data-currencylabel="$"/>
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="button hapticbtn button-fill" onclick="showPaymentRequestQRCode()">
                        <i class="fa-solid fa-qrcode"></i> Show Payment Request Code
                    </div>
                </li>
            </ul>
        </div>
        <div id="paymentRequestQRCodeContainer" class="block display-flex justify-content-center"></div>
    </div>
</div>