UX improvements and bug fixes
This commit is contained in:
sairaj mote
parent
b2f99bd2d9
commit
7c814cd698
48
css/main.css
48
css/main.css
@ -284,8 +284,6 @@ ol li::before {
|
|||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
-webkit-hyphens: auto;
|
|
||||||
hyphens: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-bleed {
|
.full-bleed {
|
||||||
@ -1273,10 +1271,12 @@ fieldset legend {
|
|||||||
.transaction {
|
.transaction {
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.transaction__amount {
|
.transaction .button {
|
||||||
white-space: nowrap;
|
min-width: auto;
|
||||||
|
white-space: normal;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
.transaction.sent .icon--tx-type {
|
.transaction.sent .icon--tx-type {
|
||||||
fill: var(--danger-color);
|
fill: var(--danger-color);
|
||||||
@ -1298,7 +1298,6 @@ fieldset legend {
|
|||||||
}
|
}
|
||||||
.transaction__icon {
|
.transaction__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-area: icon;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -1306,7 +1305,6 @@ fieldset legend {
|
|||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
background-color: rgba(var(--text-color), 0.03);
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
grid-area: 1/1/3/2;
|
|
||||||
}
|
}
|
||||||
.transaction__icon > * {
|
.transaction__icon > * {
|
||||||
grid-area: 1/1;
|
grid-area: 1/1;
|
||||||
@ -1323,6 +1321,7 @@ fieldset legend {
|
|||||||
border: solid medium rgba(var(--foreground-color), 1);
|
border: solid medium rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
.transaction__receiver {
|
.transaction__receiver {
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.transaction__time {
|
.transaction__time {
|
||||||
@ -1330,19 +1329,21 @@ fieldset legend {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.transaction__amount {
|
.transaction__amount {
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
grid-area: 1/3/3/4;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btc-tx {
|
.btc-tx {
|
||||||
grid-template-columns: auto 1fr auto;
|
display: grid;
|
||||||
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
|
|
||||||
}
|
}
|
||||||
.btc-tx__amount {
|
.btc-tx .button {
|
||||||
white-space: nowrap;
|
min-width: auto;
|
||||||
|
white-space: normal;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
.btc-tx.out .icon--tx-type {
|
.btc-tx.out .icon--tx-type {
|
||||||
fill: var(--danger-color);
|
fill: var(--danger-color);
|
||||||
@ -1362,15 +1363,11 @@ fieldset legend {
|
|||||||
.btc-tx.in .btc-tx__amount::before {
|
.btc-tx.in .btc-tx__amount::before {
|
||||||
content: "+ ";
|
content: "+ ";
|
||||||
}
|
}
|
||||||
.btc-tx.unconfirmed-tx {
|
|
||||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge";
|
|
||||||
}
|
|
||||||
.btc-tx.unconfirmed-tx .icon {
|
.btc-tx.unconfirmed-tx .icon {
|
||||||
fill: var(--yellow);
|
fill: var(--yellow);
|
||||||
}
|
}
|
||||||
.btc-tx__icon {
|
.btc-tx__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-area: icon;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -1394,37 +1391,30 @@ fieldset legend {
|
|||||||
border: solid medium rgba(var(--foreground-color), 1);
|
border: solid medium rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
.btc-tx__receiver {
|
.btc-tx__receiver {
|
||||||
grid-area: receiver;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.btc-tx__time {
|
.btc-tx__time {
|
||||||
grid-area: time;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.btc-tx__amount {
|
.btc-tx__amount {
|
||||||
grid-area: amount;
|
font-size: 0.9rem;
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.btc-tx__id {
|
.btc-tx__id {
|
||||||
grid-area: txid;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.btc-tx .unconfirmed-wrapper {
|
|
||||||
grid-area: unconfirmed;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
.btc-tx .pending-badge {
|
.btc-tx .pending-badge {
|
||||||
grid-area: badge;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
background-color: var(--yellow);
|
background-color: var(--yellow);
|
||||||
color: rgba(var(--foreground-color), 1);
|
color: rgba(var(--foreground-color), 1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
justify-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab {
|
.fab {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -263,7 +263,6 @@ ol {
|
|||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
hyphens: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-bleed {
|
.full-bleed {
|
||||||
@ -1170,9 +1169,11 @@ fieldset {
|
|||||||
.transaction {
|
.transaction {
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
&__amount {
|
.button {
|
||||||
white-space: nowrap;
|
min-width: auto;
|
||||||
|
white-space: normal;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
&.sent {
|
&.sent {
|
||||||
.icon--tx-type {
|
.icon--tx-type {
|
||||||
@ -1198,7 +1199,6 @@ fieldset {
|
|||||||
}
|
}
|
||||||
&__icon {
|
&__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-area: icon;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -1206,7 +1206,6 @@ fieldset {
|
|||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
background-color: rgba(var(--text-color), 0.03);
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
grid-area: 1/1/3/2;
|
|
||||||
& > * {
|
& > * {
|
||||||
grid-area: 1/1;
|
grid-area: 1/1;
|
||||||
}
|
}
|
||||||
@ -1223,6 +1222,7 @@ fieldset {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__receiver {
|
&__receiver {
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
&__time {
|
&__time {
|
||||||
@ -1230,18 +1230,20 @@ fieldset {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
&__amount {
|
&__amount {
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
grid-area: 1/3/3/4;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btc-tx {
|
.btc-tx {
|
||||||
grid-template-columns: auto 1fr auto;
|
display: grid;
|
||||||
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
|
.button {
|
||||||
&__amount {
|
min-width: auto;
|
||||||
white-space: nowrap;
|
white-space: normal;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
&.out {
|
&.out {
|
||||||
.icon--tx-type {
|
.icon--tx-type {
|
||||||
@ -1266,14 +1268,12 @@ fieldset {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.unconfirmed-tx {
|
&.unconfirmed-tx {
|
||||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge";
|
|
||||||
.icon {
|
.icon {
|
||||||
fill: var(--yellow);
|
fill: var(--yellow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__icon {
|
&__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
grid-area: icon;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -1297,37 +1297,30 @@ fieldset {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__receiver {
|
&__receiver {
|
||||||
grid-area: receiver;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
&__time {
|
&__time {
|
||||||
grid-area: time;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
&__amount {
|
&__amount {
|
||||||
grid-area: amount;
|
font-size: 0.9rem;
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
&__id {
|
&__id {
|
||||||
grid-area: txid;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.unconfirmed-wrapper {
|
|
||||||
grid-area: unconfirmed;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
.pending-badge {
|
.pending-badge {
|
||||||
grid-area: badge;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
background-color: var(--yellow);
|
background-color: var(--yellow);
|
||||||
color: rgba(var(--foreground-color), 1);
|
color: rgba(var(--foreground-color), 1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
justify-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fab {
|
.fab {
|
||||||
|
|||||||
227
index.html
227
index.html
@ -406,7 +406,18 @@
|
|||||||
<div class="grid hide-on-mobile user-element">
|
<div class="grid hide-on-mobile user-element">
|
||||||
<div class="flex align-center space-between">
|
<div class="flex align-center space-between">
|
||||||
<h4>Recent transactions</h4>
|
<h4>Recent transactions</h4>
|
||||||
<a class="button button--small" href="#/history">See all</a>
|
<div class="flex gap-0-3">
|
||||||
|
<button class="button button--small icon-only" title="Refresh recent transactions"
|
||||||
|
onclick="render.recentTransactions()">
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||||
|
width="24px" fill="#000000">
|
||||||
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||||
|
<path
|
||||||
|
d="M17.65 6.35c-1.63-1.63-3.94-2.57-6.48-2.31-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20c3.19 0 5.93-1.87 7.21-4.56.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53-1.13 2.43-3.84 3.97-6.8 3.31-2.22-.49-4.01-2.3-4.48-4.52C5.31 9.44 8.26 6 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71l-.64.65z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a class="button button--small" href="#/history">See all</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="recent_transactions" class="observe-empty-state grid gap-2 margin-top-1-5"></div>
|
<div id="recent_transactions" class="observe-empty-state grid gap-2 margin-top-1-5"></div>
|
||||||
<div class="empty-state">
|
<div class="empty-state">
|
||||||
@ -1967,6 +1978,105 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const tempTransactions = [
|
||||||
|
{
|
||||||
|
"txid": "d4569bdfda5da0f8470d82d2fd56c135930dc78a88182bde439592f5596a11ef",
|
||||||
|
"time": 1676839514000,
|
||||||
|
"block": 777391,
|
||||||
|
"tx_senders": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00039959
|
||||||
|
},
|
||||||
|
"tx_input_value": 0.00039959,
|
||||||
|
"tx_receivers": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00038687
|
||||||
|
},
|
||||||
|
"tx_output_value": 0.00038687,
|
||||||
|
"tx_fee": 0.00001272,
|
||||||
|
"type": "self",
|
||||||
|
"amount": 0.00038687,
|
||||||
|
"address": "bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh",
|
||||||
|
"asset": "btc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"txid": "19aeaa2e19ec38a2d253dbfd4897911ad05098ea026ee8acf9fd42dc699700d3",
|
||||||
|
"time": 1676747036000,
|
||||||
|
"block": 777219,
|
||||||
|
"tx_senders": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00040595
|
||||||
|
},
|
||||||
|
"tx_input_value": 0.00040595,
|
||||||
|
"tx_receivers": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00039959
|
||||||
|
},
|
||||||
|
"tx_output_value": 0.00039959,
|
||||||
|
"tx_fee": 0.00000636,
|
||||||
|
"type": "self",
|
||||||
|
"amount": 0.00039959,
|
||||||
|
"address": "bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh",
|
||||||
|
"asset": "btc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"txid": "be4df5e551d5483792e2f14d0fa6a928a3b2d61cc3f506fee6fd51413c5374ee",
|
||||||
|
"time": 1676746166000,
|
||||||
|
"block": 777212,
|
||||||
|
"tx_senders": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00041027
|
||||||
|
},
|
||||||
|
"tx_input_value": 0.00041027,
|
||||||
|
"tx_receivers": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00040595
|
||||||
|
},
|
||||||
|
"tx_output_value": 0.00040595,
|
||||||
|
"tx_fee": 0.00000432,
|
||||||
|
"type": "self",
|
||||||
|
"amount": 0.00040595,
|
||||||
|
"address": "bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh",
|
||||||
|
"asset": "btc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"txid": "53186ff4e865a5fd87e1dc83c764fe51bb3501bd18e7785893778af3c8ab8f09",
|
||||||
|
"time": 1676726891000,
|
||||||
|
"block": 777175,
|
||||||
|
"tx_senders": {
|
||||||
|
"bc1qkvcp7tfvu9r55ummjs4hrpqtnnq8rzyxr0yf94": 0.26179078
|
||||||
|
},
|
||||||
|
"tx_input_value": 0.26179078,
|
||||||
|
"tx_receivers": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00041027,
|
||||||
|
"bc1qkvcp7tfvu9r55ummjs4hrpqtnnq8rzyxr0yf94": 0.26137619
|
||||||
|
},
|
||||||
|
"tx_output_value": 0.26178646,
|
||||||
|
"tx_fee": 0.00000432,
|
||||||
|
"type": "in",
|
||||||
|
"amount": 0.00041027,
|
||||||
|
"sender": [
|
||||||
|
"bc1qkvcp7tfvu9r55ummjs4hrpqtnnq8rzyxr0yf94"
|
||||||
|
],
|
||||||
|
"asset": "btc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"txid": "0c43a20d019e638527d2809d353d8d1283bed410682f64e5abbc7c1dac8d1f51",
|
||||||
|
"time": 1672163218000,
|
||||||
|
"block": 769137,
|
||||||
|
"tx_senders": {
|
||||||
|
"bc1q2pwy0j92wsaxzfe2qwpq9sts9a049wr77kclkx": 0.00718428
|
||||||
|
},
|
||||||
|
"tx_input_value": 0.00718428,
|
||||||
|
"tx_receivers": {
|
||||||
|
"bc1qgpxay3v490u5artsdvz46jfvc9e8e3cxpgcwgh": 0.00014637,
|
||||||
|
"bc1q2pwy0j92wsaxzfe2qwpq9sts9a049wr77kclkx": 0.00701487
|
||||||
|
},
|
||||||
|
"tx_output_value": 0.00716124,
|
||||||
|
"tx_fee": 0.00002304,
|
||||||
|
"type": "in",
|
||||||
|
"amount": 0.00014637,
|
||||||
|
"sender": [
|
||||||
|
"bc1q2pwy0j92wsaxzfe2qwpq9sts9a049wr77kclkx"
|
||||||
|
],
|
||||||
|
"asset": "btc"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
const appState = {
|
const appState = {
|
||||||
params: {},
|
params: {},
|
||||||
openedPages: new Set(),
|
openedPages: new Set(),
|
||||||
@ -2019,19 +2129,7 @@
|
|||||||
break;
|
break;
|
||||||
case 'home':
|
case 'home':
|
||||||
if (!floGlobals.isMobileView && !floGlobals.isSubAdmin) {
|
if (!floGlobals.isMobileView && !floGlobals.isSubAdmin) {
|
||||||
renderElem(getRef('recent_transactions'), html`<sm-spinner></sm-spinner>`)
|
render.recentTransactions()
|
||||||
getTransactionsHistory({ limit: 5 }).then(transactions => {
|
|
||||||
renderElem(getRef('recent_transactions'), html`${transactions.map(transaction => render.transactionCard(transaction))}`)
|
|
||||||
}).catch(e => {
|
|
||||||
console.error(e)
|
|
||||||
getRef('recent_transactions').parentNode.querySelector('a').classList.add('hidden')
|
|
||||||
renderElem(getRef('recent_transactions'), html`
|
|
||||||
<div class="grid gap-0-5">
|
|
||||||
<h4>Oops!</h4>
|
|
||||||
<p>Looks like we couldn't fetch your transactions at this time. Please try again later.</p>
|
|
||||||
</div>
|
|
||||||
`)
|
|
||||||
})
|
|
||||||
render.savedIds()
|
render.savedIds()
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
@ -3341,15 +3439,24 @@
|
|||||||
if (!amount)
|
if (!amount)
|
||||||
return '0';
|
return '0';
|
||||||
const formattingOptions = {
|
const formattingOptions = {
|
||||||
currency
|
currency,
|
||||||
|
style: 'currency'
|
||||||
}
|
}
|
||||||
if (currency === 'inr') {
|
if (currency === 'btc') {
|
||||||
formattingOptions.style = 'currency';
|
|
||||||
} else if (currency === 'btc') {
|
|
||||||
formattingOptions.maximumFractionDigits = 8;
|
formattingOptions.maximumFractionDigits = 8;
|
||||||
}
|
}
|
||||||
return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', formattingOptions)
|
return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', formattingOptions)
|
||||||
}
|
}
|
||||||
|
function copyToClipboard(textToCopy) {
|
||||||
|
navigator.clipboard.writeText(textToCopy)
|
||||||
|
.then(res => {
|
||||||
|
notify('Copied to clipboard', 'success');
|
||||||
|
})
|
||||||
|
.catch(err => console.error(err));
|
||||||
|
}
|
||||||
|
function copyTxId(e) {
|
||||||
|
copyToClipboard(e.target.closest('li').dataset.txid);
|
||||||
|
}
|
||||||
|
|
||||||
const cashierRejectionErrors = {
|
const cashierRejectionErrors = {
|
||||||
1001: `Your request was reject because of wrong transaction ID. If you have sent money, it'll be returned within 24 hrs.`,
|
1001: `Your request was reject because of wrong transaction ID. If you have sent money, it'll be returned within 24 hrs.`,
|
||||||
@ -3401,9 +3508,17 @@
|
|||||||
<svg class="icon icon--rupee" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"/></g></g></svg>
|
<svg class="icon icon--rupee" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"/></g></g></svg>
|
||||||
${icon}
|
${icon}
|
||||||
</div>
|
</div>
|
||||||
<div class="transaction__receiver wrap-around">${transactionReceiver}</div>
|
<div class="grid gap-0-5">
|
||||||
<time class="transaction__time">${getFormattedTime(time * 1000)}</time>
|
<div class="flex space-between gap-1">
|
||||||
<div class="transaction__amount">${formatAmount(tokenAmount)}</div>
|
<div class="transaction__receiver wrap-around">${transactionReceiver}</div>
|
||||||
|
<div class="transaction__amount">${formatAmount(tokenAmount)}</div>
|
||||||
|
</div>
|
||||||
|
<time class="transaction__time">${getFormattedTime(time * 1000)}</time>
|
||||||
|
<div class="flex align-center gap-0-5">
|
||||||
|
<a class="button button--small" target="_blank" href=${`https://flosight.duckdns.org/tx/${txid}`}>View details</a>
|
||||||
|
<button class="button button--small" onclick=${copyTxId}>Copy ID</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
},
|
},
|
||||||
@ -3516,34 +3631,35 @@
|
|||||||
let { amount, time, txid, sender, receiver, type, block } = transactionDetails;
|
let { amount, time, txid, sender, receiver, type, block } = transactionDetails;
|
||||||
let transactionReceiver
|
let transactionReceiver
|
||||||
let icon
|
let icon
|
||||||
// block = null
|
if (type === 'out') {
|
||||||
if (block) {
|
transactionReceiver = `Sent to ${receiver}`;
|
||||||
if (type === 'out') {
|
icon = svg`<svg class="icon icon--tx-type sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
|
||||||
transactionReceiver = `Sent to ${receiver}`;
|
} else if (type === 'in') {
|
||||||
icon = svg`<svg class="icon icon--tx-type sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
|
transactionReceiver = `Received from ${sender}`;
|
||||||
} else if (type === 'in') {
|
icon = svg`<svg class="icon icon--tx-type" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
|
||||||
transactionReceiver = `Received from ${sender}`;
|
} else if (type === 'self') {
|
||||||
icon = svg`<svg class="icon icon--tx-type" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
|
transactionReceiver = `Sent to self`;
|
||||||
} else if (type === 'self') {
|
icon = svg`<svg class="icon icon--tx-type" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.65 8.35l-2.79 2.79c-.32.32-.1.86.35.86H18c0 3.31-2.69 6-6 6-.79 0-1.56-.15-2.25-.44-.36-.15-.77-.04-1.04.23-.51.51-.33 1.37.34 1.64.91.37 1.91.57 2.95.57 4.42 0 8-3.58 8-8h1.79c.45 0 .67-.54.35-.85l-2.79-2.79c-.19-.2-.51-.2-.7-.01zM6 12c0-3.31 2.69-6 6-6 .79 0 1.56.15 2.25.44.36.15.77.04 1.04-.23.51-.51.33-1.37-.34-1.64C14.04 4.2 13.04 4 12 4c-4.42 0-8 3.58-8 8H2.21c-.45 0-.67.54-.35.85l2.79 2.79c.2.2.51.2.71 0l2.79-2.79c.31-.31.09-.85-.36-.85H6z"/></svg>`;
|
||||||
transactionReceiver = `Sent to self`;
|
|
||||||
icon = svg`<svg class="icon icon--tx-type" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.65 8.35l-2.79 2.79c-.32.32-.1.86.35.86H18c0 3.31-2.69 6-6 6-.79 0-1.56-.15-2.25-.44-.36-.15-.77-.04-1.04.23-.51.51-.33 1.37.34 1.64.91.37 1.91.57 2.95.57 4.42 0 8-3.58 8-8h1.79c.45 0 .67-.54.35-.85l-2.79-2.79c-.19-.2-.51-.2-.7-.01zM6 12c0-3.31 2.69-6 6-6 .79 0 1.56.15 2.25.44.36.15.77.04 1.04-.23.51-.51.33-1.37-.34-1.64C14.04 4.2 13.04 4 12 4c-4.42 0-8 3.58-8 8H2.21c-.45 0-.67.54-.35.85l2.79 2.79c.2.2.51.2.71 0l2.79-2.79c.31-.31.09-.85-.36-.85H6z"/></svg>`;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
transactionReceiver = (type === 'out' ? `Sent to ${receiver}` : `Received from ${sender}`);
|
|
||||||
icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M6,2l0.01,6L10,12l-3.99,4.01L6,22h12v-6l-4-4l4-3.99V2H6z M16,16.5V20H8v-3.5l4-4L16,16.5z"/></g></svg>`;
|
|
||||||
}
|
}
|
||||||
const className = `btc-tx grid ${type} ${block === null ? 'unconfirmed-tx' : ''}`
|
const className = `btc-tx ${type} ${block === null ? 'unconfirmed-tx' : ''}`
|
||||||
return html.node`
|
return html.node`
|
||||||
<li class="${className}" data-txid="${txid}">
|
<li class="${className}" data-txid="${txid}">
|
||||||
<div class="btc-tx__icon">
|
<div class="btc-tx__icon">
|
||||||
<svg class="icon icon--btc" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"/></g></svg>
|
<svg class="icon icon--btc" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"/></g></svg>
|
||||||
${icon}
|
${icon}
|
||||||
</div>
|
</div>
|
||||||
<time class="btc-tx__time">${getFormattedTime(time)}</time>
|
<div class="flex flex-direction-column gap-0-5 flex-1">
|
||||||
<div class="btc-tx__amount amount-shown" data-btc-amount="${amount}">${formatAmount(amount, 'btc')}</div>
|
<div class="flex space-between gap-1">
|
||||||
<div class="btc-tx__receiver wrap-around">${transactionReceiver}</div>
|
<div class="btc-tx__receiver wrap-around">${transactionReceiver}</div>
|
||||||
<div class="btc-tx__id wrap-around">TXID: ${txid}</div>
|
<div class="btc-tx__amount amount-shown" data-btc-amount="${amount}">${formatAmount(amount, 'btc')}</div>
|
||||||
${!block ? html`<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>` : ''}
|
</div>
|
||||||
|
<time class="btc-tx__time">${getFormattedTime(time)}</time>
|
||||||
|
<div class="flex align-center gap-0-5">
|
||||||
|
<a class="button button--small" target="_blank" href=${`https://ranchimall.github.io/btcwallet/#/check_details?query=${txid}`}>View details</a>
|
||||||
|
<button class="button button--small" onclick=${copyTxId}>Copy ID</button>
|
||||||
|
</div>
|
||||||
|
${!block ? html`<p class="pending-badge">Confirmation pending</p>` : ''}
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
},
|
},
|
||||||
@ -3567,6 +3683,21 @@
|
|||||||
console.error(error)
|
console.error(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
recentTransactions() {
|
||||||
|
renderElem(getRef('recent_transactions'), html`<sm-spinner></sm-spinner>`)
|
||||||
|
getTransactionsHistory({ limit: 5 }).then(transactions => {
|
||||||
|
renderElem(getRef('recent_transactions'), html`${transactions.map(transaction => render.transactionCard(transaction))}`)
|
||||||
|
}).catch(e => {
|
||||||
|
console.error(e)
|
||||||
|
getRef('recent_transactions').parentNode.querySelector('a').classList.add('hidden')
|
||||||
|
renderElem(getRef('recent_transactions'), html`
|
||||||
|
<div class="grid gap-0-5">
|
||||||
|
<h4>Oops!</h4>
|
||||||
|
<p>Looks like we couldn't fetch your transactions at this time. Please try again later.</p>
|
||||||
|
</div>
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
},
|
||||||
async savedIds() {
|
async savedIds() {
|
||||||
let target = 'saved_ids_list';
|
let target = 'saved_ids_list';
|
||||||
let savedIds = getArrayOfSavedIds();
|
let savedIds = getArrayOfSavedIds();
|
||||||
@ -3734,14 +3865,17 @@
|
|||||||
propToCheck = 'out';
|
propToCheck = 'out';
|
||||||
else if (type === 'received')
|
else if (type === 'received')
|
||||||
propToCheck = 'in';
|
propToCheck = 'in';
|
||||||
let allTransactions = txs.filter(tx => {
|
const allTransactions = txs.filter(tx => {
|
||||||
tx.asset = 'btc';
|
tx.asset = 'btc';
|
||||||
if (propToCheck)
|
if (propToCheck)
|
||||||
return (tx.type === propToCheck)
|
return (tx.type === propToCheck)
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
resolve(allTransactions)
|
resolve(allTransactions)
|
||||||
}).catch(error => reject(error))
|
}).catch(error => {
|
||||||
|
// reject(tempTransactions)
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4235,7 +4369,6 @@
|
|||||||
case 'custom':
|
case 'custom':
|
||||||
getRef('send_fee').readOnly = false;
|
getRef('send_fee').readOnly = false;
|
||||||
getRef('send_fee').placeholder = 'Fee';
|
getRef('send_fee').placeholder = 'Fee';
|
||||||
getRef('send_fee').focusIn();
|
|
||||||
renderElem(getRef('selected_fee_tip'), html`Set custom fee`)
|
renderElem(getRef('selected_fee_tip'), html`Set custom fee`)
|
||||||
break;
|
break;
|
||||||
case 'suggested':
|
case 'suggested':
|
||||||
@ -4338,6 +4471,10 @@
|
|||||||
getRef('txid').value = txid;
|
getRef('txid').value = txid;
|
||||||
openPopup('txid_popup');
|
openPopup('txid_popup');
|
||||||
getRef('send_tx').reset()
|
getRef('send_tx').reset()
|
||||||
|
if (!floGlobals.isMobileView && !floGlobals.isSubAdmin && appState.currentPage === 'home')
|
||||||
|
render.recentTransactions();
|
||||||
|
else if (!floGlobals.isSubAdmin && appState.currentPage === 'history')
|
||||||
|
render.transactionsHistory();
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
notify(`Error sending transaction \n ${error}`, 'error');
|
notify(`Error sending transaction \n ${error}`, 'error');
|
||||||
}).finally(_ => {
|
}).finally(_ => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user