RanchiMall/flowallet-testnet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX improvement and code refactoring

Browse Source
This commit is contained in:
sairaj mote 2023-07-18 19:49:58 +05:30
parent 63599dec2d
commit 35f22f9e4d
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css
View File

@ -797,6 +797,9 @@ h3 {
color: rgba(var(--text-color), 0.9);
font-weight: 500;
}
.transaction__receiver:hover {
color: var(--accent-color);
}
.transaction__amount {
font-weight: 700;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
css/main.scss
View File

@ -762,6 +762,9 @@ h3 {
margin-left: 0.5rem;
color: rgba(var(--text-color), 0.9);
font-weight: 500;
&:hover {
color: var(--accent-color);
}
}
&__amount {
font-weight: 700;

15
index.html
View File

@ -828,8 +828,8 @@
<template id="transaction_template">
<li class="transaction grid">
<div class="flex align-center">
<div class="transaction__icon"></div>
<div class="transaction__receiver breakable"></div>
<div class="transaction__icon flex"></div>
<a href="" class="transaction__receiver breakable"></a>
</div>
<div class="grid gap-0-3">
<div class="label">Amount</div>
@ -1887,24 +1887,27 @@
transactionCard(details) {
const { sender, receiver, floData, time, txid, netValue, mine } = details
const { query: queriedFloId } = pagesData.params
let displayAddress
const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
if (mine) {
clone.classList.add('mined')
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0861 14.6534C22.3924 14.3472 22.7898 14.1486 23.2186 14.0876L44.6946 11.0319C45.2676 10.9504 45.8455 11.1432 46.2547 11.5524C47.2381 12.5358 46.8168 14.2128 45.4853 14.6146L28.6869 19.6843C28.3711 19.7796 28.0838 19.9515 27.8505 20.1848L27.0092 21.0261L28.3236 22.3404C29.0306 23.0475 29.0976 24.1522 28.5245 24.9346L52.2562 48.6662C53.0372 49.4473 53.0372 50.7136 52.2562 51.4946L51.4947 52.2561C50.7137 53.0372 49.4473 53.0372 48.6663 52.2561L24.9346 28.5245C24.1522 29.0976 23.0475 29.0306 22.3404 28.3236L21.0261 27.0092L20.1848 27.8505C19.9515 28.0838 19.7796 28.3711 19.6843 28.6869L14.6146 45.4853C14.2128 46.8168 12.5358 47.2381 11.5524 46.2547C11.1432 45.8455 10.9504 45.2675 11.0319 44.6946L14.0876 23.2186C14.1486 22.7898 14.3472 22.3924 14.6534 22.0861L15.3949 21.3447C14.8777 20.6386 14.8818 19.67 15.4072 18.9681C14.8209 18.1848 14.8837 17.0693 15.5958 16.3572L16.3573 15.5958C17.0694 14.8837 18.1848 14.8208 18.9681 15.4072C19.6701 14.8818 20.6386 14.8777 21.3447 15.3949L22.0861 14.6534Z"/> </svg>`;
clone.querySelector('.transaction__receiver').textContent = 'Coinbase'
displayAddress = 'Coinbase'
} else if (sender === receiver) {
clone.classList.add('self')
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><title>sender and receiver is same</title><path d="M.01 0h24v24h-24V0z" fill="none"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>`;
clone.querySelector('.transaction__receiver').textContent = receiver
displayAddress = receiver
} else if (queriedFloId === sender) {
clone.classList.add('sent')
clone.querySelector('.transaction__icon').innerHTML = `<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="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
clone.querySelector('.transaction__receiver').textContent = receiver
displayAddress = receiver
} else {
clone.classList.add('received')
clone.querySelector('.transaction__icon').innerHTML = `<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="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
clone.querySelector('.transaction__receiver').textContent = sender
displayAddress = sender
}
clone.querySelector('.transaction__receiver').textContent = displayAddress
clone.querySelector('.transaction__receiver').href = `https://ranchimall.github.io/flowallet/#/search?type=address&query=${displayAddress}&page=1`
if (netValue) {
clone.querySelector('.transaction__amount').textContent = `${netValue} FLO`
} else {