Added time of transaction in UI

This commit is contained in:
sairaj mote 2023-04-08 20:10:12 +05:30
parent 4d75fa1d0c
commit c58be9ef02
4 changed files with 46 additions and 37 deletions

View File

@ -981,6 +981,9 @@ p {
border-radius: 1rem;
background: rgba(var(--text-color), 0.1);
}
.transaction time {
font-size: 0.9rem;
}
#loading {
position: fixed;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -894,6 +894,9 @@ p {
border-radius: 1rem;
background: rgba(var(--text-color), 0.1);
}
time {
font-size: 0.9rem;
}
}
#loading {
position: fixed;

View File

@ -668,15 +668,15 @@
`;
},
transactionPage(obj) {
let { type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations,nftHash} = obj;
let { type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations, nftHash } = obj;
// todo : This is a temporary fix. Fix this on the Database and API level
if (type == 'smartContractPays' || type == ' smartContractPays') {
name = ''
}
if(type.trim() === 'nftIncorporation')
if (type.trim() === 'nftIncorporation')
type = 'NFT Incorporation'
else if(type.trim() === 'nft transfer')
else if (type.trim() === 'nft transfer')
type = 'NFT Transfer'
return html`
@ -712,12 +712,11 @@
<p>${floData}</p>
<h5 class="label">Block Confirmations</h5>
<h4>${confirmations}</h4>
${
nftHash?html`
${nftHash ? html`
<h5 class="label">NFT hash</h5>
<sm-copy value=${nftHash} clip-text></sm-copy>
`:''
}
`: ''
}
</div>
</div>
`;
@ -839,7 +838,7 @@
return card;
},
contractTransferCard(obj) {
const { hash, blockHeight, token, sender, receiver, amount, contractName, userChoice } = obj;
const { hash, blockHeight, token, sender, receiver, amount, contractName, userChoice, time } = obj;
return html`
<div id=${hash} class="transaction token-transfer">
<svg class="icon" viewBox="0 0 64 64"> <title>contract</title> <path d="M4.75,49.27A8,8,0,0,0,4.2,61.14a7.82,7.82,0,0,0,4.34,2.24,7.42,7.42,0,0,0,1.34.12H47.41a8.06,8.06,0,0,0,8.05-8V7.87"/> <path d="M8.54,56.13V8.54a8.06,8.06,0,0,1,8.05-8H54.12a7.42,7.42,0,0,1,1.34.12A7.82,7.82,0,0,1,59.8,2.86a8,8,0,0,1-.55,11.87"/> <line x1="17.93" y1="22.62" x2="46.07" y2="22.62"/> <line x1="17.93" y1="32" x2="46.07" y2="32"/> <line x1="17.93" y1="41.38" x2="38.03" y2="41.38"/> </svg>
@ -848,6 +847,7 @@
<a href=${`#/token/${token}`} class="">${token}</a>
</div>
<div class="contract-info">
<time>${getFormattedTime(time)}</time>
<div class="flex flex-direction-column">
<h5 class="label">Amount</h5>
<h4>${formatAmount(amount, token.toLowerCase() === 'rupee' ? 'inr' : 'usd')} ${token}</h4>
@ -867,10 +867,10 @@
</div>`;
},
tokenTransferCard(obj) {
const { hash, blockHeight, token, sender, receiver, amount,type } = obj;
const { hash, blockHeight, token, sender, receiver, amount, type, time } = obj;
let title = 'Token transfer';
console.log(type)
if(type === 'nfttransfer')
if (type === 'nfttransfer')
title = 'NFT transfer';
return html`
<div id=${hash} class="transaction token-transfer">
@ -880,6 +880,7 @@
<a href=${`#/token/${token}`} class="">${token}</a>
</div>
<div class="contract-info">
<time>${getFormattedTime(time)}</time>
<div class="flex flex-wrap gap-1">
<div class="flex flex-direction-column">
<h5 class="label">Sender</h5>
@ -906,9 +907,9 @@
`;
},
tokenCreationCard(obj) {
const { hash, blockHeight, token, incAddress, supply,type,nftHash } = obj;
const { hash, blockHeight, token, incAddress, supply, type, nftHash, time } = obj;
let title = 'Token creation';
if(type === 'nftincorp')
if (type === 'nftincorp')
title = 'NFT creation';
return html`
<div id=${hash} class="transaction token-creation">
@ -918,6 +919,7 @@
<a href=${`#/token/${token}`} class="token uppercase">${token}</a>
</div>
<div class="contract-info">
<time>${getFormattedTime(time)}</time>
<div class="flex flex-direction-column">
<h5 class="label">Incorporation address</h5>
<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a>
@ -930,12 +932,11 @@
<h5 class="label">supply</h5>
<h4>${supply}</h4>
</div>
${
type === 'nftincorp'? html`<div class="flex flex-direction-column">
${type === 'nftincorp' ? html`<div class="flex flex-direction-column">
<h5 class="label">NFT hash</h5>
<sm-copy value="${nftHash}"></sm-copy>
</div>`:''
}
</div>`: ''
}
<div class="flex align-center space-between flex-wrap gap-1">
<div class="flex flex-direction-column">
<h5 class="label">Transaction ID</h5>
@ -947,7 +948,7 @@
</div>`;
},
contractTriggerCard(obj) {
const { hash, blockHeight, contractName, contractAddress, winningChoice, committeeAddress } = obj;
const { hash, blockHeight, contractName, contractAddress, winningChoice, committeeAddress, time } = obj;
return html`
<div id=${hash} class="transaction contract-trigger">
<svg class="icon" viewBox="0 0 64 64"> <circle cx="32" cy="32" r="31"/> <polyline points="32 13.47 32 32 43.4 43.4"/> </svg>
@ -956,6 +957,7 @@
<h4 class="uppercase">trigger</h4>
</div>
<div class="contract-info">
<time>${getFormattedTime(time)}</time>
<div class="flex flex-direction-column">
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>
@ -984,7 +986,7 @@
`;
},
contractCreationCard(obj) {
const { hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices } = obj;
const { hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices, time } = obj;
return html`
<div id=${hash} class="transaction contract-creation">
<svg class="icon" viewBox="0 0 64 64"> <title>contract creation</title> <path d="M47.07,23.85V11"/> <path d="M3,47A7,7,0,0,0,.48,52.39a6.89,6.89,0,0,0,2.05,4.93,6.78,6.78,0,0,0,3.78,2,6.34,6.34,0,0,0,1.16.1H40.09a7,7,0,0,0,7-7V44"/> <path d="M6.31,53V11.61a7,7,0,0,1,7-7H45.91a6.26,6.26,0,0,1,1.16.1,6.74,6.74,0,0,1,3.78,1.95A7,7,0,0,1,50.37,17"/> <line x1="14.46" y1="23.85" x2="38.92" y2="23.85"/> <line x1="14.46" y1="32" x2="38.92" y2="32"/> <line x1="14.46" y1="40.15" x2="31.93" y2="40.15"/> <path d="M57.79,24.44l-2.88-2.9,3.79-3.79a1,1,0,0,1,1.39,0l3.11,3.11a1,1,0,0,1,0,1.39L40.34,45.1a1,1,0,0,1-.52.28L36,46A1,1,0,0,1,34.9,44.9l.67-3.77a1,1,0,0,1,.27-.52L52.65,23.8"/> </svg>
@ -993,6 +995,7 @@
<a href=${`#/token/${token}`} class="">${token}</a>
</div>
<div class="contract-info">
<time>${getFormattedTime(time)}</time>
<div class="flex flex-direction-column">
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>
@ -1109,14 +1112,14 @@
}
function getLatestTxs() {
return new Promise((resolve,reject) => {
return new Promise((resolve, reject) => {
fetchJson(`${tokenApiUrl}/api/v2/latestTransactionDetails?limit=4`)
.then(function (latestTxs) {
resolve(latestTxs.latestTransactions)
}).catch((err) => {
reject(err)
});
})
})
}
function getTokenInfo(thisToken) {
@ -1202,25 +1205,25 @@
}
function parseTransactions(txList) {
console.log(txList)
if(!Array.isArray(txList))
txList = Object.values(txList)
if (!Array.isArray(txList))
txList = Object.values(txList)
let latestTxArray = [];
txList.forEach(tx => {
// console.log(transactionKey)
// if(transactionKey == '11571ce7e5eed0bce30e24de89bb1ba6cc432df7b5b40bbc9f0225b98968cb47'){
// //debugger
// }
const {
transactionDetails: {
txid, blockHeight, vin, vout },
const {
transactionDetails: {
txid, blockHeight, vin, vout, time },
parsedFloData: {
contractAddress, contractType, expiryTime, contractAmount, type, tokenAmount, tokenIdentification, transferType, contractName, triggerCondition, userChoice,nftHash
}
} = tx;
contractAddress, contractType, expiryTime, contractAmount, type, tokenAmount, tokenIdentification, transferType, contractName, triggerCondition, userChoice, nftHash
}
} = tx;
let obj = {
hash: txid,
blockHeight,
time
};
if (type != "smartContractPays") {
// determine token
@ -1235,7 +1238,7 @@
break;
}
}
obj = Object.assign({}, obj, {
sender: vin[0]["addr"],
receiver: receiverAddress,
@ -1253,7 +1256,7 @@
break;
}
}
obj = Object.assign({}, obj, {
sender: vin[0]["addr"],
receiver: receiverAddress,
@ -1299,11 +1302,11 @@
});
latestTxArray.push(obj);
break;
}
}
} else {
// transaction is a FLO Smart Contract Committee trigger
let receiver = "", sender = vin[0]['addr'];
for (const output of vout) {
if (output["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
@ -1311,7 +1314,7 @@
break;
}
}
obj = Object.assign({}, obj, {
hash: txid,
blockHeight,
@ -1359,7 +1362,7 @@
return [false, transaction.description]
} else {
let transactionHash = transaction.transactionHash,
{ flodata, tokenAmount, tokenIdentification, type,nftHash } = transaction.parsedFloData,
{ flodata, tokenAmount, tokenIdentification, type, nftHash } = transaction.parsedFloData,
{ blockheight, vin, vout, confirmations } = transaction.transactionDetails;
let receiver = "",
sender = vin[0].addr;