forked from Qortal/qortal-ui
No more needed
This commit is contained in:
AlphaX-Projects
GitHub
parent
124f0084b4
commit
12d9adbcaf
@ -1,46 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/font/material-icons.css">
|
|
||||||
<link rel="stylesheet" href="/font/switch-theme.css">
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
--scrollbarBG: #a1a1a1;
|
|
||||||
--thumbBG: #6a6c75;
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar {
|
|
||||||
width: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-track {
|
|
||||||
background: var(--scrollbarBG);
|
|
||||||
}
|
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--thumbBG);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 3px solid var(--scrollbarBG);
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
background: var(--plugback);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<send-coin-page></send-coin-page>
|
|
||||||
<script src="send-coin.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,893 +0,0 @@
|
|||||||
import { LitElement, html, css } from 'lit'
|
|
||||||
import { render } from 'lit/html.js'
|
|
||||||
import { Epml } from '../../../epml'
|
|
||||||
|
|
||||||
import '@material/mwc-button'
|
|
||||||
import '@material/mwc-textfield'
|
|
||||||
import '@material/mwc-select'
|
|
||||||
import '@material/mwc-list/mwc-list-item.js'
|
|
||||||
import '@material/mwc-slider'
|
|
||||||
import '@polymer/paper-progress/paper-progress.js'
|
|
||||||
|
|
||||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
|
||||||
|
|
||||||
class SendMoneyPage extends LitElement {
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
addresses: { type: Array },
|
|
||||||
amount: { type: Number },
|
|
||||||
errorMessage: { type: String },
|
|
||||||
sendMoneyLoading: { type: Boolean },
|
|
||||||
btnDisable: { type: Boolean },
|
|
||||||
data: { type: Object },
|
|
||||||
selectedAddress: { type: Object },
|
|
||||||
recipient: { type: String },
|
|
||||||
isValidAmount: { type: Boolean },
|
|
||||||
balance: { type: Number },
|
|
||||||
qortBalance: { type: Number },
|
|
||||||
btcBalance: { type: Number },
|
|
||||||
ltcBalance: { type: Number },
|
|
||||||
dogeBalance: { type: Number },
|
|
||||||
selectedCoin: { type: String },
|
|
||||||
satFeePerByte: { type: Number },
|
|
||||||
theme: { type: String, reflect: true }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static get observers() {
|
|
||||||
return ['_kmxKeyUp(amount)']
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
|
||||||
return css`
|
|
||||||
* {
|
|
||||||
--mdc-theme-primary: rgb(3, 169, 244);
|
|
||||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
|
||||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
color: var(--black);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendMoneyWrapper {
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendMoneyWrapper paper-button {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sendMoneyWrapper .buttons {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-item {
|
|
||||||
--paper-item-focused: {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
--paper-item-focused-before: {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-balance {
|
|
||||||
font-size: 42px;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-transactions {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 5px solid;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.baltxt {
|
|
||||||
color: var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
mwc-textfield {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedBalance {
|
|
||||||
display: none;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedBalance .balance {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coinName::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
height: 25px;
|
|
||||||
width: 25px;
|
|
||||||
position: absolute;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
left: 10px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qort.coinName:before {
|
|
||||||
background-image: url('/img/qort.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.btc.coinName:before {
|
|
||||||
background-image: url('/img/btc.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.ltc.coinName:before {
|
|
||||||
background-image: url('/img/ltc.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.doge.coinName:before {
|
|
||||||
background-image: url('/img/doge.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.coinName {
|
|
||||||
display: inline-block;
|
|
||||||
height: 25px;
|
|
||||||
padding-left: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-progress {
|
|
||||||
--paper-progress-active-color: var(--mdc-theme-primary);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.recipient = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
this.selectedAddress = {}
|
|
||||||
this.amount = 0
|
|
||||||
this.satFeePerByte = 100000 // TODO: Set to 0.001 QORT (100000 in sats)
|
|
||||||
this.btcSatMinFee = 20
|
|
||||||
this.btcSatMaxFee = 150
|
|
||||||
this.btcDefaultFee = 100 // 0.000001 BTC per byte
|
|
||||||
this.ltcSatMinFee = 10
|
|
||||||
this.ltcSatMaxFee = 100
|
|
||||||
this.ltcDefaultFee = 30 // 0.0000003 LTC per byte
|
|
||||||
this.dogeSatMinFee = 100
|
|
||||||
this.dogeSatMaxFee = 10000
|
|
||||||
this.dogeDefaultFee = 1000 // 0.00001 DOGE per byte
|
|
||||||
this.isValidAmount = false
|
|
||||||
this.qortBalance = 0
|
|
||||||
this.btcBalance = 0
|
|
||||||
this.ltcBalance = 0
|
|
||||||
this.dogeBalance = 0
|
|
||||||
this.selectedCoin = 'invalid'
|
|
||||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light';
|
|
||||||
|
|
||||||
let configLoaded = false
|
|
||||||
parentEpml.ready().then(() => {
|
|
||||||
parentEpml.subscribe('selected_address', async (selectedAddress) => {
|
|
||||||
this.selectedAddress = {}
|
|
||||||
selectedAddress = JSON.parse(selectedAddress)
|
|
||||||
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
|
|
||||||
this.selectedAddress = selectedAddress
|
|
||||||
const addr = selectedAddress.address
|
|
||||||
|
|
||||||
this.updateAccountBalance()
|
|
||||||
})
|
|
||||||
parentEpml.subscribe('config', (c) => {
|
|
||||||
if (!configLoaded) {
|
|
||||||
configLoaded = true
|
|
||||||
}
|
|
||||||
this.config = JSON.parse(c)
|
|
||||||
})
|
|
||||||
parentEpml.subscribe('copy_menu_switch', async (value) => {
|
|
||||||
if (value === 'false' && window.getSelection().toString().length !== 0) {
|
|
||||||
this.clearSelection()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
parentEpml.subscribe('frame_paste_menu_switch', async (res) => {
|
|
||||||
res = JSON.parse(res)
|
|
||||||
if (res.isOpen === false && this.isPasteMenuOpen === true) {
|
|
||||||
this.pasteToTextBox(res.elementId)
|
|
||||||
this.isPasteMenuOpen = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div id="sendMoneyWrapper" style="width:auto; padding:10px; background: var(--white); height:100vh;">
|
|
||||||
<div class="layout horizontal center" style="padding:12px 15px;">
|
|
||||||
<paper-card style="width:100%; max-width:740px;">
|
|
||||||
<div style="background-color: ${this.selectedAddress.color}; margin:0; color: ${this.textColor(this.selectedAddress.textColor)};">
|
|
||||||
<h3 style="margin: 0; padding: 8px 0;">Send Coin</h3>
|
|
||||||
|
|
||||||
<div class="selectedBalance">
|
|
||||||
<span id="balance" class="baltxt"></span> <span class="baltxt">available for transfer from</span> <span id="address" class="baltxt"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</paper-card>
|
|
||||||
<p>
|
|
||||||
<mwc-select id="coinType" label="Select Coin" index="0" @selected="${(e) => this.selectCoin(e)}" style="min-width: 130px; max-width:100%; width:100%;">
|
|
||||||
<mwc-list-item value="qort"></span> <span class="coinName qort">QORT</span></mwc-list-item>
|
|
||||||
<mwc-list-item value="btc"> <span class="coinName btc">BTC</span></mwc-list-item>
|
|
||||||
<mwc-list-item value="ltc"> <span class="coinName ltc">LTC</span></mwc-list-item>
|
|
||||||
<mwc-list-item value="doge"> <span class="coinName doge">DOGE</span></mwc-list-item>
|
|
||||||
</mwc-select>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<mwc-textfield
|
|
||||||
style="width:100%;"
|
|
||||||
id="amountInput"
|
|
||||||
required
|
|
||||||
label="Amount (QORT)"
|
|
||||||
@input="${(e) => { this._checkAmount(e) }}"
|
|
||||||
type="number"
|
|
||||||
auto-validate="false"
|
|
||||||
value="${this.amount}"
|
|
||||||
>
|
|
||||||
</mwc-textfield>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<mwc-textfield style="width:100%;" label="To (address or name)" id="recipient" type="text" value="${this.recipient}"></mwc-textfield>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div style="${this.selectedCoin === 'invalid' || this.selectedCoin === 'qort' ? 'visibility: hidden; margin-bottom: -5em;' : 'visibility: visible; margin-bottom: 0;'}">
|
|
||||||
<p style="margin-bottom: 0; color: var(--black);">Fee per byte: ${(this.satFeePerByte / 1e8).toFixed(8)} ${this.selectedCoin === 'invalid' ? 'QORT' : this.selectedCoin.toLocaleUpperCase()}</p>
|
|
||||||
<mwc-slider
|
|
||||||
@change="${(e) => (this.satFeePerByte = e.target.value)}"
|
|
||||||
id="feeSlider"
|
|
||||||
style="width:100%;"
|
|
||||||
step="1"
|
|
||||||
min="10"
|
|
||||||
max="100"
|
|
||||||
?disabled="${this.selectedCoin === 'invalid' || this.selectedCoin === 'qort' ? true : false}"
|
|
||||||
value="${this.satFeePerByte}"
|
|
||||||
>
|
|
||||||
</mwc-slider>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p style="color: red;">${this.errorMessage}</p>
|
|
||||||
<p style="color: green; word-break: break-word;">${this.successMessage}</p>
|
|
||||||
|
|
||||||
${this.sendMoneyLoading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''}
|
|
||||||
|
|
||||||
<div class="buttons">
|
|
||||||
<div>
|
|
||||||
<mwc-button ?disabled="${this.btnDisable}" style="width:100%;" raised icon="send" @click="${(e) => this.doSend(e)}">Send </mwc-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
|
|
||||||
this.changeTheme()
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
this.changeTheme();
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
// Get BTC Balance
|
|
||||||
this.updateBTCAccountBalance()
|
|
||||||
|
|
||||||
// Get LTC Balance
|
|
||||||
this.updateLTCAccountBalance()
|
|
||||||
|
|
||||||
// Get DOGE Balance
|
|
||||||
this.updateDOGEAccountBalance()
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
this.errorMessage = '';
|
|
||||||
}, 5000)
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
this.successMessage = '';
|
|
||||||
}, 5000)
|
|
||||||
|
|
||||||
window.addEventListener('contextmenu', (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
this._textMenu(event)
|
|
||||||
})
|
|
||||||
|
|
||||||
window.addEventListener('click', () => {
|
|
||||||
parentEpml.request('closeCopyTextMenu', null)
|
|
||||||
})
|
|
||||||
|
|
||||||
window.onkeyup = (e) => {
|
|
||||||
if (e.keyCode === 27) {
|
|
||||||
parentEpml.request('closeCopyTextMenu', null)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Rewrite the context menu event listener to support more elements (for now, I'll do write everything out manually )
|
|
||||||
this.shadowRoot.getElementById('amountInput').addEventListener('contextmenu', (event) => {
|
|
||||||
const getSelectedText = () => {
|
|
||||||
var text = ''
|
|
||||||
if (typeof window.getSelection != 'undefined') {
|
|
||||||
text = window.getSelection().toString()
|
|
||||||
} else if (typeof this.shadowRoot.selection != 'undefined' && this.shadowRoot.selection.type == 'Text') {
|
|
||||||
text = this.shadowRoot.selection.createRange().text
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkSelectedTextAndShowMenu = () => {
|
|
||||||
let selectedText = getSelectedText()
|
|
||||||
if (selectedText && typeof selectedText === 'string') {
|
|
||||||
} else {
|
|
||||||
this.pasteMenu(event, 'amountInput')
|
|
||||||
this.isPasteMenuOpen = true
|
|
||||||
|
|
||||||
// Prevent Default and Stop Event Bubbling
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
checkSelectedTextAndShowMenu()
|
|
||||||
})
|
|
||||||
|
|
||||||
this.shadowRoot.getElementById('recipient').addEventListener('contextmenu', (event) => {
|
|
||||||
const getSelectedText = () => {
|
|
||||||
var text = ''
|
|
||||||
if (typeof window.getSelection != 'undefined') {
|
|
||||||
text = window.getSelection().toString()
|
|
||||||
} else if (typeof this.shadowRoot.selection != 'undefined' && this.shadowRoot.selection.type == 'Text') {
|
|
||||||
text = this.shadowRoot.selection.createRange().text
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkSelectedTextAndShowMenu = () => {
|
|
||||||
let selectedText = getSelectedText()
|
|
||||||
if (selectedText && typeof selectedText === 'string') {
|
|
||||||
} else {
|
|
||||||
this.pasteMenu(event, 'recipient')
|
|
||||||
this.isPasteMenuOpen = true
|
|
||||||
|
|
||||||
// Prevent Default and Stop Event Bubbling
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
checkSelectedTextAndShowMenu()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
changeTheme() {
|
|
||||||
const checkTheme = localStorage.getItem('qortalTheme')
|
|
||||||
if (checkTheme === 'dark') {
|
|
||||||
this.theme = 'dark';
|
|
||||||
} else {
|
|
||||||
this.theme = 'light';
|
|
||||||
}
|
|
||||||
document.querySelector('html').setAttribute('theme', this.theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
_floor(num) {
|
|
||||||
return Math.floor(num)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper Functions (Re-Used in Most part of the UI )
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check and Validate Amount Helper Function
|
|
||||||
* @param { Event } e
|
|
||||||
*
|
|
||||||
* @description Gets called oninput in an input element
|
|
||||||
*/
|
|
||||||
|
|
||||||
_checkAmount(e) {
|
|
||||||
const targetAmount = e.target.value
|
|
||||||
const target = e.target
|
|
||||||
|
|
||||||
if (targetAmount.length === 0) {
|
|
||||||
this.isValidAmount = false
|
|
||||||
this.btnDisable = true
|
|
||||||
|
|
||||||
// Quick Hack to lose and regain focus inorder to display error message without user having to click outside the input field
|
|
||||||
e.target.blur()
|
|
||||||
e.target.focus()
|
|
||||||
|
|
||||||
e.target.invalid = true
|
|
||||||
e.target.validationMessage = 'Invalid Amount!'
|
|
||||||
} else {
|
|
||||||
this.btnDisable = false
|
|
||||||
}
|
|
||||||
|
|
||||||
e.target.blur()
|
|
||||||
e.target.focus()
|
|
||||||
|
|
||||||
e.target.validityTransform = (newValue, nativeValidity) => {
|
|
||||||
if (newValue.includes('-') === true) {
|
|
||||||
this.btnDisable = true
|
|
||||||
target.validationMessage = 'Invalid Amount!'
|
|
||||||
|
|
||||||
return {
|
|
||||||
valid: false,
|
|
||||||
}
|
|
||||||
} else if (!nativeValidity.valid) {
|
|
||||||
if (newValue.includes('.') === true) {
|
|
||||||
let myAmount = newValue.split('.')
|
|
||||||
if (myAmount[1].length > 8) {
|
|
||||||
this.btnDisable = true
|
|
||||||
target.validationMessage = 'Invalid Amount!'
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
valid: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.btnDisable = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textColor(color) {
|
|
||||||
return color == 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.87)'
|
|
||||||
}
|
|
||||||
|
|
||||||
pasteToTextBox(elementId) {
|
|
||||||
// Return focus to the window
|
|
||||||
window.focus()
|
|
||||||
|
|
||||||
navigator.clipboard.readText().then((clipboardText) => {
|
|
||||||
let element = this.shadowRoot.getElementById(elementId)
|
|
||||||
element.value += clipboardText
|
|
||||||
element.focus()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
pasteMenu(event, elementId) {
|
|
||||||
let eventObject = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY, elementId }
|
|
||||||
parentEpml.request('openFramePasteMenu', eventObject)
|
|
||||||
}
|
|
||||||
|
|
||||||
doSend(e) {
|
|
||||||
if (this.selectedCoin === 'invalid') {
|
|
||||||
parentEpml.request('showSnackBar', 'Invalid Selection!')
|
|
||||||
} else if (this.selectedCoin === 'qort') {
|
|
||||||
this.sendQort()
|
|
||||||
} else if (this.selectedCoin === 'btc') {
|
|
||||||
this.sendBtc()
|
|
||||||
} else if (this.selectedCoin === 'ltc') {
|
|
||||||
this.sendLtc()
|
|
||||||
} else if (this.selectedCoin === 'doge') {
|
|
||||||
this.sendDoge()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendQort() {
|
|
||||||
const amount = this.shadowRoot.getElementById('amountInput').value
|
|
||||||
let recipient = this.shadowRoot.getElementById('recipient').value
|
|
||||||
|
|
||||||
this.sendMoneyLoading = true
|
|
||||||
this.btnDisable = true
|
|
||||||
|
|
||||||
if (parseFloat(amount) + parseFloat(0.001) > parseFloat(this.balance)) {
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
|
|
||||||
parentEpml.request('showSnackBar', 'Insufficient Funds!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parseFloat(amount) <= 0) {
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
|
|
||||||
parentEpml.request('showSnackBar', 'Invalid Amount!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (recipient.length === 0) {
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
|
|
||||||
parentEpml.request('showSnackBar', 'Receiver cannot be empty!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLastRef = async () => {
|
|
||||||
let myRef = await parentEpml.request('apiCall', {
|
|
||||||
type: 'api',
|
|
||||||
url: `/addresses/lastreference/${this.selectedAddress.address}`,
|
|
||||||
})
|
|
||||||
return myRef
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateName = async (receiverName) => {
|
|
||||||
let myRes
|
|
||||||
let myNameRes = await parentEpml.request('apiCall', {
|
|
||||||
type: 'api',
|
|
||||||
url: `/names/${receiverName}`,
|
|
||||||
})
|
|
||||||
|
|
||||||
if (myNameRes.error === 401) {
|
|
||||||
myRes = false
|
|
||||||
} else {
|
|
||||||
myRes = myNameRes
|
|
||||||
}
|
|
||||||
|
|
||||||
return myRes
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateAddress = async (receiverAddress) => {
|
|
||||||
let myAddress = await window.parent.validateAddress(receiverAddress)
|
|
||||||
return myAddress
|
|
||||||
}
|
|
||||||
|
|
||||||
const validateReceiver = async (recipient) => {
|
|
||||||
let lastRef = await getLastRef()
|
|
||||||
let isAddress
|
|
||||||
|
|
||||||
try {
|
|
||||||
isAddress = await validateAddress(recipient)
|
|
||||||
} catch (err) {
|
|
||||||
isAddress = false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isAddress) {
|
|
||||||
let myTransaction = await makeTransactionRequest(recipient, lastRef)
|
|
||||||
getTxnRequestResponse(myTransaction)
|
|
||||||
} else {
|
|
||||||
let myNameRes = await validateName(recipient)
|
|
||||||
if (myNameRes !== false) {
|
|
||||||
let myNameAddress = myNameRes.owner
|
|
||||||
let myTransaction = await makeTransactionRequest(myNameAddress, lastRef)
|
|
||||||
getTxnRequestResponse(myTransaction)
|
|
||||||
} else {
|
|
||||||
console.error('INVALID_RECEIVER')
|
|
||||||
this.errorMessage = 'INVALID_RECEIVER'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const makeTransactionRequest = async (receiver, lastRef) => {
|
|
||||||
let myReceiver = receiver
|
|
||||||
let mylastRef = lastRef
|
|
||||||
|
|
||||||
let myTxnrequest = await parentEpml.request('transaction', {
|
|
||||||
type: 2,
|
|
||||||
nonce: this.selectedAddress.nonce,
|
|
||||||
params: {
|
|
||||||
recipient: myReceiver,
|
|
||||||
amount: amount,
|
|
||||||
lastReference: mylastRef,
|
|
||||||
fee: 0.001,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
return myTxnrequest
|
|
||||||
}
|
|
||||||
|
|
||||||
const getTxnRequestResponse = (txnResponse) => {
|
|
||||||
if (txnResponse.success === false && txnResponse.message) {
|
|
||||||
this.errorMessage = txnResponse.message
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(txnResponse)
|
|
||||||
} else if (txnResponse.success === true && !txnResponse.data.error) {
|
|
||||||
this.shadowRoot.getElementById('amountInput').value = ''
|
|
||||||
this.shadowRoot.getElementById('recipient').value = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
this.recipient = ''
|
|
||||||
this.amount = 0
|
|
||||||
this.successMessage = 'Transaction Successful!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
} else {
|
|
||||||
this.errorMessage = txnResponse.data.message
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(txnResponse)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
validateReceiver(recipient)
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendBtc() {
|
|
||||||
const amount = this.shadowRoot.getElementById('amountInput').value
|
|
||||||
let recipient = this.shadowRoot.getElementById('recipient').value
|
|
||||||
const xprv58 = this.selectedAddress.btcWallet.derivedMasterPrivateKey
|
|
||||||
|
|
||||||
this.sendMoneyLoading = true
|
|
||||||
this.btnDisable = true
|
|
||||||
|
|
||||||
const makeRequest = async () => {
|
|
||||||
const opts = {
|
|
||||||
xprv58: xprv58,
|
|
||||||
receivingAddress: recipient,
|
|
||||||
bitcoinAmount: amount,
|
|
||||||
feePerByte: (this.satFeePerByte / 1e8).toFixed(8),
|
|
||||||
}
|
|
||||||
const response = await parentEpml.request('sendBtc', opts)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
const manageResponse = (response) => {
|
|
||||||
if (response.length === 64) {
|
|
||||||
this.shadowRoot.getElementById('amountInput').value = 0
|
|
||||||
this.shadowRoot.getElementById('recipient').value = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
this.recipient = ''
|
|
||||||
this.amount = 0
|
|
||||||
this.successMessage = 'Transaction Successful!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
} else if (response === false) {
|
|
||||||
this.errorMessage = 'Transaction Failed!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(txnResponse)
|
|
||||||
} else {
|
|
||||||
this.errorMessage = response.message
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call makeRequest
|
|
||||||
const res = await makeRequest()
|
|
||||||
manageResponse(res)
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendLtc() {
|
|
||||||
const amount = this.shadowRoot.getElementById('amountInput').value
|
|
||||||
let recipient = this.shadowRoot.getElementById('recipient').value
|
|
||||||
const xprv58 = this.selectedAddress.ltcWallet.derivedMasterPrivateKey
|
|
||||||
|
|
||||||
this.sendMoneyLoading = true
|
|
||||||
this.btnDisable = true
|
|
||||||
|
|
||||||
const makeRequest = async () => {
|
|
||||||
const opts = {
|
|
||||||
xprv58: xprv58,
|
|
||||||
receivingAddress: recipient,
|
|
||||||
litecoinAmount: amount,
|
|
||||||
feePerByte: (this.satFeePerByte / 1e8).toFixed(8),
|
|
||||||
}
|
|
||||||
const response = await parentEpml.request('sendLtc', opts)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
const manageResponse = (response) => {
|
|
||||||
if (response.length === 64) {
|
|
||||||
this.shadowRoot.getElementById('amountInput').value = 0
|
|
||||||
this.shadowRoot.getElementById('recipient').value = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
this.recipient = ''
|
|
||||||
this.amount = 0
|
|
||||||
this.successMessage = 'Transaction Successful!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
} else if (response === false) {
|
|
||||||
this.errorMessage = 'Transaction Failed!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(txnResponse)
|
|
||||||
} else {
|
|
||||||
this.errorMessage = response.message
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call makeRequest
|
|
||||||
const res = await makeRequest()
|
|
||||||
manageResponse(res)
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendDoge() {
|
|
||||||
const amount = this.shadowRoot.getElementById('amountInput').value
|
|
||||||
let recipient = this.shadowRoot.getElementById('recipient').value
|
|
||||||
const xprv58 = this.selectedAddress.dogeWallet.derivedMasterPrivateKey
|
|
||||||
|
|
||||||
this.sendMoneyLoading = true
|
|
||||||
this.btnDisable = true
|
|
||||||
|
|
||||||
const makeRequest = async () => {
|
|
||||||
const opts = {
|
|
||||||
xprv58: xprv58,
|
|
||||||
receivingAddress: recipient,
|
|
||||||
dogecoinAmount: amount,
|
|
||||||
feePerByte: (this.satFeePerByte / 1e8).toFixed(8),
|
|
||||||
}
|
|
||||||
const response = await parentEpml.request('sendDoge', opts)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
const manageResponse = (response) => {
|
|
||||||
if (response.length === 64) {
|
|
||||||
this.shadowRoot.getElementById('amountInput').value = 0
|
|
||||||
this.shadowRoot.getElementById('recipient').value = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
this.recipient = ''
|
|
||||||
this.amount = 0
|
|
||||||
this.successMessage = 'Transaction Successful!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
} else if (response === false) {
|
|
||||||
this.errorMessage = 'Transaction Failed!'
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(txnResponse)
|
|
||||||
} else {
|
|
||||||
this.errorMessage = response.message
|
|
||||||
this.sendMoneyLoading = false
|
|
||||||
this.btnDisable = false
|
|
||||||
throw new Error(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call makeRequest
|
|
||||||
const res = await makeRequest()
|
|
||||||
manageResponse(res)
|
|
||||||
}
|
|
||||||
|
|
||||||
_textMenu(event) {
|
|
||||||
const getSelectedText = () => {
|
|
||||||
var text = ''
|
|
||||||
if (typeof window.getSelection != 'undefined') {
|
|
||||||
text = window.getSelection().toString()
|
|
||||||
} else if (typeof this.shadowRoot.selection != 'undefined' && this.shadowRoot.selection.type == 'Text') {
|
|
||||||
text = this.shadowRoot.selection.createRange().text
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkSelectedTextAndShowMenu = () => {
|
|
||||||
let selectedText = getSelectedText()
|
|
||||||
if (selectedText && typeof selectedText === 'string') {
|
|
||||||
let _eve = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY }
|
|
||||||
|
|
||||||
let textMenuObject = { selectedText: selectedText, eventObject: _eve, isFrame: true }
|
|
||||||
|
|
||||||
parentEpml.request('openCopyTextMenu', textMenuObject)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
checkSelectedTextAndShowMenu()
|
|
||||||
}
|
|
||||||
|
|
||||||
updateAccountBalance() {
|
|
||||||
clearTimeout(this.updateAccountBalanceTimeout)
|
|
||||||
parentEpml
|
|
||||||
.request('apiCall', {
|
|
||||||
url: `/addresses/balance/${this.selectedAddress.address}?apiKey=${this.getApiKey()}`,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
this.qortBalance = res
|
|
||||||
this.updateAccountBalanceTimeout = setTimeout(() => this.updateAccountBalance(), 4000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
selectCoin(e) {
|
|
||||||
const coinType = this.shadowRoot.getElementById('coinType').value
|
|
||||||
this.selectedCoin = coinType
|
|
||||||
|
|
||||||
this.amount = 0
|
|
||||||
this.recipient = ''
|
|
||||||
this.shadowRoot.getElementById('amountInput').value = 0
|
|
||||||
this.shadowRoot.getElementById('recipient').value = ''
|
|
||||||
this.successMessage = ''
|
|
||||||
this.errorMessage = ''
|
|
||||||
|
|
||||||
if (coinType === 'qort') {
|
|
||||||
this.shadowRoot.getElementById('balance').textContent = `${this.qortBalance} QORT`
|
|
||||||
this.shadowRoot.getElementById('address').textContent = this.selectedAddress.address
|
|
||||||
this.shadowRoot.querySelector('.selectedBalance').style.display = 'block'
|
|
||||||
this.shadowRoot.getElementById('amountInput').label = 'Amount (QORT)'
|
|
||||||
this.shadowRoot.getElementById('recipient').label = 'To (address or name)'
|
|
||||||
this.satFeePerByte = 100000
|
|
||||||
} else if (coinType === 'btc') {
|
|
||||||
this.shadowRoot.getElementById('balance').textContent = `${this.btcBalance} BTC`
|
|
||||||
this.shadowRoot.getElementById('address').textContent = this.selectedAddress.btcWallet.address
|
|
||||||
this.shadowRoot.querySelector('.selectedBalance').style.display = 'block'
|
|
||||||
this.shadowRoot.getElementById('amountInput').label = 'Amount (BTC)'
|
|
||||||
this.shadowRoot.getElementById('recipient').label = 'To (BTC address)'
|
|
||||||
this.shadowRoot.getElementById('feeSlider').min = this.btcSatMinFee
|
|
||||||
this.shadowRoot.getElementById('feeSlider').max = this.btcSatMaxFee
|
|
||||||
this.satFeePerByte = this.btcDefaultFee
|
|
||||||
} else if (coinType === 'ltc') {
|
|
||||||
this.shadowRoot.getElementById('balance').textContent = `${this.ltcBalance} LTC`
|
|
||||||
this.shadowRoot.getElementById('address').textContent = this.selectedAddress.ltcWallet.address
|
|
||||||
this.shadowRoot.querySelector('.selectedBalance').style.display = 'block'
|
|
||||||
this.shadowRoot.getElementById('amountInput').label = 'Amount (LTC)'
|
|
||||||
this.shadowRoot.getElementById('recipient').label = 'To (LTC address)'
|
|
||||||
this.shadowRoot.getElementById('feeSlider').min = this.ltcSatMinFee
|
|
||||||
this.shadowRoot.getElementById('feeSlider').max = this.ltcSatMaxFee
|
|
||||||
this.satFeePerByte = this.ltcDefaultFee
|
|
||||||
} else if (coinType === 'doge') {
|
|
||||||
this.shadowRoot.getElementById('balance').textContent = `${this.dogeBalance} DOGE`
|
|
||||||
this.shadowRoot.getElementById('address').textContent = this.selectedAddress.dogeWallet.address
|
|
||||||
this.shadowRoot.querySelector('.selectedBalance').style.display = 'block'
|
|
||||||
this.shadowRoot.getElementById('amountInput').label = 'Amount (DOGE)'
|
|
||||||
this.shadowRoot.getElementById('recipient').label = 'To (DOGE address)'
|
|
||||||
this.shadowRoot.getElementById('feeSlider').min = this.dogeSatMinFee
|
|
||||||
this.shadowRoot.getElementById('feeSlider').max = this.dogeSatMaxFee
|
|
||||||
this.satFeePerByte = this.dogeDefaultFee
|
|
||||||
} else {
|
|
||||||
this.selectedCoin = 'invalid'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateBTCAccountBalance() {
|
|
||||||
parentEpml
|
|
||||||
.request('apiCall', {
|
|
||||||
url: `/crosschain/btc/walletbalance?apiKey=${this.getApiKey()}`,
|
|
||||||
method: 'POST',
|
|
||||||
body: window.parent.reduxStore.getState().app.selectedAddress.btcWallet.derivedMasterPublicKey,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (isNaN(Number(res))) {
|
|
||||||
parentEpml.request('showSnackBar', 'Failed to Fetch BTC Balance. Try again!')
|
|
||||||
} else {
|
|
||||||
this.btcBalance = (Number(res) / 1e8).toFixed(8)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
updateLTCAccountBalance() {
|
|
||||||
parentEpml
|
|
||||||
.request('apiCall', {
|
|
||||||
url: `/crosschain/ltc/walletbalance?apiKey=${this.getApiKey()}`,
|
|
||||||
method: 'POST',
|
|
||||||
body: window.parent.reduxStore.getState().app.selectedAddress.ltcWallet.derivedMasterPublicKey,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (isNaN(Number(res))) {
|
|
||||||
parentEpml.request('showSnackBar', 'Failed to Fetch LTC Balance. Try again!')
|
|
||||||
} else {
|
|
||||||
this.ltcBalance = (Number(res) / 1e8).toFixed(8)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
updateDOGEAccountBalance() {
|
|
||||||
parentEpml
|
|
||||||
.request('apiCall', {
|
|
||||||
url: `/crosschain/doge/walletbalance?apiKey=${this.getApiKey()}`,
|
|
||||||
method: 'POST',
|
|
||||||
body: window.parent.reduxStore.getState().app.selectedAddress.dogeWallet.derivedMasterPublicKey,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (isNaN(Number(res))) {
|
|
||||||
parentEpml.request('showSnackBar', 'Failed to Fetch DOGE Balance. Try again!')
|
|
||||||
} else {
|
|
||||||
this.dogeBalance = (Number(res) / 1e8).toFixed(8)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
getApiKey() {
|
|
||||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
|
||||||
let apiKey = myNode.apiKey;
|
|
||||||
return apiKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
clearSelection() {
|
|
||||||
window.getSelection().removeAllRanges()
|
|
||||||
window.parent.getSelection().removeAllRanges()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('send-coin-page', SendMoneyPage)
|
|
||||||
Loading…
x
Reference in New Issue
Block a user