Added blockchain links related to accounts
This commit is contained in:
sairaj mote
parent
820684fd0a
commit
0ef6904a96
29
css/main.css
29
css/main.css
@ -1073,6 +1073,11 @@ strip-option:last-of-type {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
#account_process__steps {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.account-step {
|
||||
opacity: 0;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
@ -1098,7 +1103,7 @@ strip-option:last-of-type {
|
||||
}
|
||||
.account-step:not(:last-of-type) .step__line {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
height: 100%;
|
||||
width: 0.1rem;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
justify-self: center;
|
||||
@ -1116,6 +1121,16 @@ strip-option:last-of-type {
|
||||
.account-step .step__description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.account-step.row-3:not(:last-of-type) .step__line {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.account-step.row-3 .button {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
.account-step .button {
|
||||
margin-top: 0.5rem;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-down {
|
||||
from {
|
||||
@ -1441,6 +1456,18 @@ strip-option:last-of-type {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account-step.row-3 {
|
||||
grid-template-areas: ". . b-link" ". . b-link";
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
.account-step.row-3 .step__line {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
.account-step.row-3 .button {
|
||||
grid-area: b-link;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
#user_section {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -925,6 +925,10 @@ strip-option {
|
||||
align-content: flex-start;
|
||||
gap: 2rem;
|
||||
}
|
||||
#account_process__steps {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.account-step {
|
||||
opacity: 0;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
@ -945,7 +949,7 @@ strip-option {
|
||||
}
|
||||
&:not(:last-of-type) .step__line {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
height: 100%;
|
||||
width: 0.1rem;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
justify-self: center;
|
||||
@ -965,6 +969,18 @@ strip-option {
|
||||
.step__description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
&.row-3 {
|
||||
&:not(:last-of-type) .step__line {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.button {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
margin-top: 0.5rem;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
}
|
||||
@keyframes slide-down {
|
||||
from {
|
||||
@ -1197,6 +1213,19 @@ strip-option {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.account-step {
|
||||
&.row-3 {
|
||||
grid-template-areas: ". . b-link" ". . b-link";
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
.step__line {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
.button {
|
||||
grid-area: b-link;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
#user_section {
|
||||
|
||||
21
index.html
21
index.html
@ -559,7 +559,7 @@
|
||||
<div id="account_detail__status"></div>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<div id="account_detail__type"></div>
|
||||
<div id="account_detail__type" class="capitalize"></div>
|
||||
<h3 id="account_detail__amount"></h3>
|
||||
</div>
|
||||
<sm-button id="account_action_button" onclick="processAccount()" variant="primary"></sm-button>
|
||||
@ -1274,12 +1274,21 @@
|
||||
card.querySelector('.activity-card__amount').textContent = netAmt.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
return card
|
||||
},
|
||||
accountProgressStep(type, title, description = '') {
|
||||
accountProgressStep(type, title, description = '', options = {}) {
|
||||
const { openTx, closeTx } = options
|
||||
const elem = getRef('account_step_template').content.cloneNode(true).firstElementChild
|
||||
elem.classList.add(type)
|
||||
elem.querySelector('.step__icon').innerHTML = type === 'loading' ? '<sm-spinner></sm-spinner>' : utils.getRelatedIcon(type)
|
||||
elem.querySelector('.step__title').textContent = title
|
||||
elem.querySelector('.step__description').innerHTML = description
|
||||
if (openTx || closeTx) {
|
||||
elem.classList.add('row-3')
|
||||
elem.append(createElement('a', {
|
||||
className: 'button',
|
||||
textContent: 'See record on blockchain',
|
||||
attributes: { href: `https://flosight.duckdns.org/tx/${openTx || closeTx}`, target: '_blank' }
|
||||
}))
|
||||
}
|
||||
return elem
|
||||
}
|
||||
}
|
||||
@ -1484,23 +1493,23 @@
|
||||
}
|
||||
|
||||
function renderAccountProgress(index) {
|
||||
const { type, status, openTime, closeTime = undefined, amount, netAmt } = bank_app.getUserDetails(myFloID).accounts[index]
|
||||
const { type, status, openTime, closeTime = undefined, amount, netAmt, openTx = undefined, closeTx = undefined } = bank_app.getUserDetails(myFloID).accounts[index]
|
||||
getRef('account_process__steps').innerHTML = ''
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime)))
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime), { openTx }))
|
||||
const { isPending, pendingRequest } = getAccountStatus(index)
|
||||
if (type === 'deposit') {
|
||||
if (isPending) {
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent withdrawal request', getFormattedTime(pendingRequest.split('_')[0])))
|
||||
getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for withdrawal confirmation', `Once your request is processed, your withdrawn amount will reflect in your balance.<br>meanwhile you can go back and continue using the app.`))
|
||||
} else if (closeTime) {
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime)))
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime), { closeTx }))
|
||||
}
|
||||
} else {
|
||||
if (isPending) {
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent repay request', getFormattedTime(pendingRequest.split('_')[0])))
|
||||
getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for repayment confirmation', `Once your request is processed, your loan will be closed,`))
|
||||
} else if (closeTime) {
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime)))
|
||||
getRef('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime), { closeTx }))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user