Add some UX design to crypto UI
parent
c68aa1eacf
commit
7dfd76438d
@ -0,0 +1,144 @@
|
||||
<!-- 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 hapticbtn" href="/home">
|
||||
<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" data-popup="#sendCryptoPopup" id="sendCryptoOpenPopupBtn"><i class="fa-solid fa-paper-plane"></i> Send Crypto</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="card">
|
||||
<div class="card-header">Send Crypto</div>
|
||||
<div class="card-content card-content-padding">
|
||||
<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..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
|
||||
$('#walletToAddress').val(d);
|
||||
});"><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"/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue