Added token transfer option to UI

This commit is contained in:
sairaj mote 2022-04-07 19:29:25 +05:30
parent 6c09d65f28
commit 86e29b6d52
4 changed files with 57 additions and 32 deletions

View File

@ -845,11 +845,11 @@ sm-checkbox {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.balance-card.is-locked { .balance-card.is-locked {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr auto;
gap: 1rem; gap: 1rem;
} }
.balance-card:not(.is-locked) { .balance-card:not(.is-locked) {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto auto;
} }
.balance-card__icon { .balance-card__icon {
display: flex; display: flex;

File diff suppressed because one or more lines are too long

View File

@ -807,11 +807,11 @@ sm-checkbox {
gap: 0.3rem 0.5rem; gap: 0.3rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
&.is-locked { &.is-locked {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr auto;
gap: 1rem; gap: 1rem;
} }
&:not(.is-locked) { &:not(.is-locked) {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto auto;
} }
&__icon { &__icon {
display: flex; display: flex;

View File

@ -255,6 +255,9 @@
<button class="button" value="withdraw"> <button class="button" value="withdraw">
Withdraw Withdraw
</button> </button>
<button class="button" value="transfer">
Transfer
</button>
</div> </div>
</div> </div>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
@ -457,6 +460,8 @@
</header> </header>
<sm-form id="wallet_form"> <sm-form id="wallet_form">
<input type="text" id="sink_id" style="display: none;" hidden /> <input type="text" id="sink_id" style="display: none;" hidden />
<sm-input id="get_receiver_id" placeholder="Receiver FLO ID" error-text="Invalid FLO ID" data-flo-id
required animate></sm-input>
<sm-input id="get_user_amount" placeholder="Quantity" type="number" min="0.01" step="0.00001" required <sm-input id="get_user_amount" placeholder="Quantity" type="number" min="0.01" step="0.00001" required
animate> animate>
</sm-input> </sm-input>
@ -1562,27 +1567,36 @@
getRef('wallet_actions').addEventListener('click', e => { getRef('wallet_actions').addEventListener('click', e => {
if (e.target.closest('.button')) { if (e.target.closest('.button')) {
const target = e.target.closest('.button') const target = e.target.closest('.button')
showPopup('wallet_popup')
const type = target.value const type = target.value
const asset = getRef('wallet_asset_selector').value const asset = getRef('wallet_asset_selector').value
getRef('wallet_quantity_type').textContent = asset
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[asset].net.toFixed(4))} ${asset}`
getRef('wallet_popup__cta').textContent = `${type} ${asset}` getRef('wallet_popup__cta').textContent = `${type} ${asset}`
getRef('wallet_popup__cta').setAttribute('value', type) getRef('wallet_popup__cta').setAttribute('value', type)
getRef('wallet_popup__title').textContent = `${type} ${asset}` getRef('wallet_popup__title').textContent = `${type} ${asset}`
getRef('get_user_amount').setAttribute('step', asset === 'rupee' ? '0.01' : '0.00001') getRef('get_user_amount').setAttribute('step', asset === 'rupee' ? '0.01' : '0.00001')
getRef('get_user_amount').setAttribute('min', asset === 'rupee' ? '0.01' : '0.00001') getRef('get_user_amount').setAttribute('min', asset === 'rupee' ? '0.01' : '0.00001')
// default form element state
if (type === 'withdraw') { getRef('get_receiver_id').removeAttribute('required')
getRef('get_private_key').classList.add('hide') getRef('get_receiver_id').classList.add('hide')
getRef('wallet_quantity_selector').classList.remove('hide') getRef('get_private_key').removeAttribute('required')
getRef('get_private_key').removeAttribute('required') getRef('get_private_key').classList.add('hide')
getRef('wallet_quantity_selector').classList.remove('hide')
} else { switch (type) {
getRef('get_private_key').setAttribute('required', '') case 'withdraw':
getRef('wallet_quantity_selector').classList.add('hide') break;
getRef('get_private_key').classList.remove('hide') case 'deposit':
getRef('get_private_key').setAttribute('required', '')
getRef('get_private_key').classList.remove('hide')
getRef('wallet_quantity_selector').classList.add('hide')
break;
case 'transfer':
getRef('get_receiver_id').setAttribute('required', '')
getRef('get_receiver_id').classList.remove('hide')
break;
} }
getRef('wallet_form').elementsChanged() getRef('wallet_form').elementsChanged()
showPopup('wallet_popup')
} }
}) })
function showWalletResult(status, title, description) { function showWalletResult(status, title, description) {
@ -1644,21 +1658,32 @@
try { try {
showProcess('wallet_popup__cta_wrapper') showProcess('wallet_popup__cta_wrapper')
const proxySecret = await proxy.secret; const proxySecret = await proxy.secret;
if (type === 'deposit') { switch (type) {
const privKey = getRef('get_private_key').value; case 'deposit':
if (asset === 'FLO') { const privKey = getRef('get_private_key').value;
await floExchangeAPI.depositFLO(quantity, proxy.userID, proxy.sinkID, privKey, proxySecret) if (asset === 'FLO') {
} else { await floExchangeAPI.depositFLO(quantity, proxy.userID, proxy.sinkID, privKey, proxySecret)
await floExchangeAPI.depositToken(asset, quantity, proxy.userID, proxy.sinkID, privKey, proxySecret) } else {
} await floExchangeAPI.depositToken(asset, quantity, proxy.userID, proxy.sinkID, privKey, proxySecret)
showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your wallet.') }
} else { showWalletResult('success', `Sent ${asset} deposit request`, 'This may take upto 30 mins to reflect in your wallet.')
if (asset === 'FLO') { break;
await floExchangeAPI.withdrawFLO(quantity, proxy.userID, proxySecret) case 'withdraw':
} else { if (asset === 'FLO') {
await floExchangeAPI.withdrawToken(asset, quantity, proxy.userID, proxySecret) await floExchangeAPI.withdrawFLO(quantity, proxy.userID, proxySecret)
} } else {
showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your wallet.') await floExchangeAPI.withdrawToken(asset, quantity, proxy.userID, proxySecret)
}
showWalletResult('success', `Sent ${asset} withdraw request`, 'This may take upto 30 mins to reflect in your wallet.')
break;
case 'transfer':
const receiverID = getRef('get_receiver_id').value.trim();
const receiver = {
[receiverID]: quantity
}
await floExchangeAPI.transferToken(receiver, asset, proxy.userID, proxySecret)
showWalletResult('success', `Sent ${quantity} ${asset} to ${receiverID}`, `This may take upto 30 mins to reflect in receiver's wallet.`)
break;
} }
} }
catch (err) { catch (err) {