Merge pull request #6 from vivekteega/test-branch

New API format changes

css/main.css

@@ -998,6 +998,14 @@ theme-toggle {
   font-size: 0.9rem;
 }
 
+.badge {
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--text-color), 0.1);
+  color: rgba(var(--text-color), 0.8);
+}
+
 #loading {
   position: fixed;
   display: grid;

css/main.scss

@@ -908,6 +908,13 @@ theme-toggle {
     font-size: 0.9rem;
   }
 }
+.badge {
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--text-color), 0.1);
+  color: rgba(var(--text-color), 0.8);
+}
 #loading {
   position: fixed;
   display: grid;

index.html

@@ -63,7 +63,7 @@
 	<script>
 		let floGlobals = {
 			blockchain: "FLO",
-			tokenApiUrl: 'https://ranchimallflov2.ranchimall.net',
+			tokenApiUrl: 'https://ranchimallflo-test.ranchimall.net',
 			floApiUrl: 'https://flosight.ranchimall.net',
 		}
 	</script>
@@ -641,8 +641,7 @@
 		let frag = document.createDocumentFragment();
 		const render = {
 			homepage(obj) {
-				let { topToken, totalTransactions, walletAddresses, latestBlock } = obj;
+				let { topToken, totalTransactions, walletAddresses, latestBlock: { height, time } } = obj;
-				const { height, time } = latestBlock
 				return html`
 					<div id="homepage" class="page">
 						<section id="first_section">
@@ -744,12 +743,11 @@
 				`;
 			},
 			transactionPage(obj) {
+				console.log(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')
 					type = 'NFT Incorporation'
 				else if (type.trim() === 'nft transfer')
@@ -799,10 +797,9 @@
 							<h5 class="label">Block Confirmations</h5>
 							<h4>${confirmations}</h4>
 							${nftHash ? html`
-									<h5 class="label">NFT hash</h5>
+								<h5 class="label">NFT hash</h5>
-									<sm-copy value=${nftHash} clip-text></sm-copy>
+								<sm-copy value=${nftHash} clip-text></sm-copy>
-								`: ''
+							`: ''}
-					}
 						</div>
 					</div>
               `;
@@ -1100,10 +1097,8 @@
 							<time>${getFormattedTime(time)}</time>
 							<div class="flex flex-wrap gap-1">	
 								<div class="flex flex-direction-column">
-									<h5 class="label">Sender</h5>
+									<h5 class="label">Sender (Smart contract)</h5>
-									<sm-copy value=${sender}>
+									<a href=${`#/address/${sender}`} class="address wrap-around">${contractName}-${sender}</a> 
-										<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a> 
-									</sm-copy>
 								</div>
 								<div class="flex flex-direction-column">
 									<h5 class="label">Receiver</h5>
@@ -1112,10 +1107,6 @@
 									</sm-copy>
 								</div>
 							</div>
-							<div class="flex flex-direction-column">
-								<h5 class="label">Contract name</h5>
-								<h4>${contractName}</h4>
-							</div>
 							<div class="flex flex-direction-column">
 								<h5 class="label">Amount</h5>
 								<h4>${formatAmount(amount, token.toLowerCase() === 'rupee' ? 'inr' : 'usd')} ${token}</h4>
@@ -1373,6 +1364,50 @@
 						<time>${getFormattedTime(time, 'relative')}</time>
 					</div>
 				`;
+			},
+			offChainTransferCard(transferDetails) {
+				const { tokenAmount, transactionTrigger, tokenIdentification, contractName, senderAddress, receiverAddress, time, type } = transferDetails;
+				return html`
+					<li class="transaction">
+						<svg class="icon" viewBox="0 0 64 64"> <title>transfer</title> <polyline points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03"/> </svg>
+						<div class="contract-type">
+							<div class="flex align-center gap-1">
+								<h5 class="label">Token transfer</h5>
+								<div class="badge">Off-chain</div>
+							</div>
+							<a href=${`#/token/${tokenIdentification}`} class="">${tokenIdentification}</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>
+							</div>
+							<div class="flex flex-direction-column">
+								<h5 class="label">Sender address</h5>
+								<sm-copy value=${senderAddress}>
+									<a href=${`#/address/${senderAddress}`} class="address wrap-around">${senderAddress}</a>
+								</sm-copy>
+							</div>
+							<div class="flex flex-direction-column">
+								<h5 class="label">Receiver address</h5>
+								<sm-copy value=${receiverAddress}>
+									<a href=${`#/address/${receiverAddress}`} class="address wrap-around">${receiverAddress}</a>
+								</sm-copy>
+							</div>
+							<div class="flex flex-direction-column">
+								<h5 class="label">Amount</h5>
+								<h4>${tokenAmount} ${tokenIdentification}</h4>
+							</div>
+							<div class="flex align-center space-between flex-wrap gap-1">
+								<div class="flex flex-direction-column">
+									<h5 class="label">Transfer trigger ID</h5>
+									<sm-copy value=${transactionTrigger} clip-text></sm-copy>
+								</div>
+								<a href=${`#/transaction/${transactionTrigger}`} class="button button--small button--colored">View details</a>
+							</div>
+						</div>
+					</li>`;
 			}
 		};
 
@@ -1408,6 +1443,9 @@
 					case 'contracttrigger':
 						return render.contractTriggerCard(tx);
 						break;
+					case 'offChainTransfer':
+						return render.offChainTransferCard(tx);
+						break;
 				}
 			})
 			renderElem(document.getElementById(container), html`${renderedTransactions.length ? renderedTransactions : html`<div class="no-results">No transactions found</div>`}`)
@@ -1590,135 +1628,153 @@
 			let latestTxArray = [];
 			txList.forEach(tx => {
 				const {
-					transactionDetails: {
+					txid,
-						txid, blockHeight, vin, vout, time,
+					blockHeight,
-						receiverAddress,
+					vin,
-						senderAddress,
+					vout,
-					},
+					time,
-					parsedFloData: {
+					receiverAddress,
-						contractAddress,
+					senderAddress,
-						contractType,
+					contractAddress,
-						contractConditions: { expiryTime, accepting_token, selling_token, subtype, price } = {},
+					contractType,
-						contractAmount,
+					contractConditions: { expiryTime, accepting_token, selling_token, subtype, price } = {},
-						type,
+					contractAmount,
-						tokenAmount,
+					type,
-						tokenIdentification,
+					tokenAmount,
-						transferType,
+					transferType,
-						contractName,
+					triggerCondition,
-						triggerCondition,
+					userChoice,
-						userChoice,
+					nftHash,
-						nftHash,
+					depositAmount,
-						depositAmount,
+					contractName,
-					}
+					tokenIdentification,
+					transactionTrigger,
+					onChain
 				} = tx;
 				let obj = {
 					hash: txid,
 					blockHeight,
 					time
 				};
-				if (type != "smartContractPays") {
+				if (onChain) {
-					// determine token
+					if (type != "smartContractPays") {
-					obj["token"] = tokenIdentification;
+						// determine token
-					switch (type) {
+						obj["token"] = tokenIdentification;
-						case 'transfer':
+						switch (type) {
-							if (transferType == "token" || transferType == 'nft') {
+							case 'transfer':
+								if (transferType == "token" || transferType == 'nft') {
+									obj = Object.assign({}, obj, {
+										sender: senderAddress,
+										receiver: receiverAddress,
+										amount: tokenAmount,
+										type: transferType == "token" ? "tokentransfer" : "nfttransfer",
+									});
+									latestTxArray.push(obj);
+									break;
+								} else if (transferType == 'smartContract') {
+									// smart contract transfer
+									obj = Object.assign({}, obj, {
+										sender: senderAddress,
+										receiver: receiverAddress,
+										amount: tokenAmount,
+										contractName,
+										userChoice,
+										type: "contracttransfer",
+									});
+									latestTxArray.push(obj);
+									break;
+								}
+							case 'tokenIncorporation':
+								// token incorporation
+								// smart contract incorporation
 								obj = Object.assign({}, obj, {
-									sender: senderAddress,
+									incAddress: senderAddress,
-									receiver: receiverAddress,
+									supply: tokenAmount,
-									amount: tokenAmount,
+									type: "tokenincorp",
-									type: transferType == "token" ? "tokentransfer" : "nfttransfer",
 								});
 								latestTxArray.push(obj);
 								break;
-							} else if (transferType == 'smartContract') {
+							case 'smartContractIncorporation':
-								// smart contract transfer
+								// smart contract incorporation
+								// todo : add checks to determine obj for different types of smart contract incorporation
+								switch (subtype) {
+									case 'tokenswap':
+										obj = Object.assign({}, obj, {
+											contractName,
+											incAddress: contractAddress,
+											contractType,
+											type: "contractincorp",
+											sellingToken: selling_token,
+											acceptingToken: accepting_token,
+											price,
+										});
+										delete obj["token"];
+										break;
+									default:
+										obj = Object.assign({}, obj, {
+											contractName,
+											incAddress: contractAddress,
+											contractType,
+											expiration: expiryTime,
+											participationFees: contractAmount,
+											availableChoices: "",
+											type: "contractincorp",
+										});
+										break;
+								}
+								latestTxArray.push(obj);
+								break;
+							case 'nftIncorporation':
+								// nft incorporation
+								obj = Object.assign({}, obj, {
+									incAddress: senderAddress,
+									supply: tokenAmount,
+									type: "nftincorp",
+									nftHash
+								});
+								latestTxArray.push(obj);
+								break;
+							case 'smartContractDeposit':
+								// smart contract deposit
 								obj = Object.assign({}, obj, {
-									sender: senderAddress,
-									receiver: receiverAddress,
-									amount: tokenAmount,
 									contractName,
-									userChoice,
+									contractAddress,
-									type: "contracttransfer",
+									contractType,
+									amount: depositAmount,
+									type: "contractdeposit",
+									sender: senderAddress,
+									receiver: receiverAddress,
 								});
 								latestTxArray.push(obj);
 								break;
-							}
+						}
-						case 'tokenIncorporation':
+
-							// token incorporation
+					} else {
-							// smart contract incorporation
+						// transaction is a FLO Smart Contract Committee trigger
-							obj = Object.assign({}, obj, {
+
-								incAddress: senderAddress,
+						obj = Object.assign({}, obj, {
-								supply: tokenAmount,
+							hash: txid,
-								type: "tokenincorp",
+							blockHeight,
-							});
+							contractName,
-							latestTxArray.push(obj);
+							contractAddress: receiverAddress,
-							break;
+							winningChoice: triggerCondition,
-						case 'smartContractIncorporation':
+							committeeAddress: senderAddress,
-							// smart contract incorporation
+							type: 'contracttrigger'
-							// todo : add checks to determine obj for different types of smart contract incorporation
+						});
-							switch (subtype) {
+						latestTxArray.push(obj);
-								case 'tokenswap':
-									obj = Object.assign({}, obj, {
-										contractName,
-										incAddress: contractAddress,
-										contractType,
-										type: "contractincorp",
-										sellingToken: selling_token,
-										acceptingToken: accepting_token,
-										price,
-									});
-									delete obj["token"];
-									break;
-								default:
-									obj = Object.assign({}, obj, {
-										contractName,
-										incAddress: contractAddress,
-										contractType,
-										expiration: expiryTime,
-										participationFees: contractAmount,
-										availableChoices: "",
-										type: "contractincorp",
-									});
-									break;
-							}
-							latestTxArray.push(obj);
-							break;
-						case 'nftIncorporation':
-							// nft incorporation
-							obj = Object.assign({}, obj, {
-								incAddress: senderAddress,
-								supply: tokenAmount,
-								type: "nftincorp",
-								nftHash
-							});
-							latestTxArray.push(obj);
-							break;
-						case 'smartContractDeposit':
-							// smart contract deposit
-							obj = Object.assign({}, obj, {
-								contractName,
-								contractAddress,
-								contractType,
-								amount: depositAmount,
-								type: "contractdeposit",
-								sender: senderAddress,
-								receiver: receiverAddress,
-							});
-							latestTxArray.push(obj);
-							break;
 					}
-
 				} else {
-					// transaction is a FLO Smart Contract Committee trigger
-
 					obj = Object.assign({}, obj, {
-						hash: txid,
+						transactionTrigger,
-						blockHeight,
 						contractName,
-						contractAddress: receiverAddress,
+						contractAddress,
-						winningChoice: triggerCondition,
+						onChain: false,
-						committeeAddress: senderAddress,
+						type: 'offChainTransfer',
-						type: 'contracttrigger'
+						senderAddress,
+						receiverAddress,
+						tokenAmount,
+						tokenIdentification,
+						time
 					});
 					latestTxArray.push(obj);
 				}
@@ -1754,38 +1810,38 @@
 		async function getTxInfo(thisTx) {
 			try {
 				const transaction = await fetchJson(`${floGlobals.tokenApiUrl}/api/v2/transactionDetails/${thisTx}`)
+				console.log(transaction)
 				if (transaction.result === 'error') {
 					return [false, transaction.description]
 				} else {
-					let transactionHash = transaction.transactionHash,
+					let {
-						{ flodata, tokenAmount, tokenIdentification, type, nftHash } = transaction.parsedFloData,
+						floData,
-						{ blockheight, vin, vout, confirmations } = transaction.transactionDetails;
+						tokenAmount,
-					let sender = vin[0].addr;
+						tokenIdentification,
-					let receiver = sender
+						type,
-					for (let i = 0; i < vout.length; i++) {
+						nftHash,
-						if (vout[i]["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
+						blockheight,
-							receiver = vout[i]["scriptPubKey"]["addresses"][0];
+						vin,
-						}
+						vout,
-					}
+						confirmations,
-					// todo - temporary fixes below. Fix these on the Database and API level
+						transferType,
-					let transactionType = ''
+						senderAddress,
-					if (type == 'transfer') {
+						receiverAddress,
-						transactionType = transaction.parsedFloData?.transferType
+						txid
-					}
+					} = transaction;
 					if (type == 'smartContractPays') {
 						tokenAmount = '-'
-						flodata = transaction.transactionDetails.floData
 					}
 					return [
 						true, {
-							type: `${transactionType} ${type}`,
+							type: `${transferType || ''} ${type}`,
 							name: tokenIdentification,
 							blockHeight: blockheight,
 							amount: tokenAmount,
-							sender,
+							sender: senderAddress,
-							receiver,
+							receiver: receiverAddress,
-							floData: flodata,
+							floData,
-							hash: transactionHash,
+							hash: txid,
 							confirmations,
 							nftHash
 						}