Merge pull request #4 from ranchimall/master

Pulling master changes

css/main.css

@@ -1066,13 +1066,22 @@ theme-toggle {
 #participant_container,
 #deposits_container {
   display: grid;
-  gap: 2.5rem;
+  gap: 0.5rem;
+  background-color: transparent;
+  padding: 0;
 }
 
 .participant,
 .deposit-card {
   flex-wrap: wrap;
   gap: 2rem;
+  background-color: rgba(var(--foreground-color), 1);
+  padding: max(1rem, 1.5vw);
+  border-radius: 0.5rem;
+}
+.participant .address,
+.deposit-card .address {
+  min-width: 12rem;
 }
 
 @media only screen and (min-width: 640px) {

css/main.scss

@@ -969,12 +969,20 @@ theme-toggle {
 #participant_container,
 #deposits_container {
   display: grid;
-  gap: 2.5rem;
+  gap: 0.5rem;
+  background-color: transparent;
+  padding: 0;
 }
 .participant,
 .deposit-card {
   flex-wrap: wrap;
   gap: 2rem;
+  background-color: rgba(var(--foreground-color), 1);
+  padding: max(1rem, 1.5vw);
+  border-radius: 0.5rem;
+  .address {
+    min-width: 12rem;
+  }
 }
 @media only screen and (min-width: 640px) {
   .margin,

index.html

@@ -144,7 +144,7 @@
 		function formatAmount(amount = 0, currency = 'inr') {
 			if (!amount)
 				return '0';
-			return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', { currency, maximumFractionDigits: currency === 'inr' ? 2 : 8 })
+			return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', { currency, maximumFractionDigits: 8 })
 		}
 		// fetch data and return json
 		async function fetchJson(url, options = {}) {
@@ -429,8 +429,8 @@
 										document.getElementById('participant_container'),
 										html`${Object.keys(contractParticipants)
 											.map(participant => render.participantCard({
-												acceptingToken: acceptingToken,
+												acceptingToken,
-												sellingToken: sellingToken,
+												sellingToken,
 												...contractParticipants[participant]
 											}))
 											}`
@@ -445,7 +445,7 @@
 										document.getElementById('deposits_container'),
 										html`${contractDeposits.map(deposit => render.depositCard({
 											...deposit,
-											acceptingToken: acceptingToken,
+											acceptingToken,
 										}))}`
 									)
 								else
@@ -771,12 +771,16 @@
 							</div>
 							<div class="flex flex-direction-column">
 								<h5 class="label">Sender</h5>
-								<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a>
+								<sm-copy value=${sender}>
+									<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a>
+								</sm-copy>
 							</div>
 							${receiver ? html`
 									<div class="flex flex-direction-column">
 										<h5 class="label">Receiver</h5>
-										<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
+										<sm-copy value=${receiver}>
+											<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a>
+										</sm-copy>
 									</div>
 								`: ''
 					}
@@ -833,7 +837,11 @@
 					<h5 class="label">Supply</h5>
 					<h4> ${supply ? formatAmount(supply, token.toLowerCase() === 'rupee' ? 'inr' : 'usd') : 'Infinite'} </h4>
 					<h5 class="label">Incorporation address</h5>
-					<h4 class="wrap-around">${incAddress}</h4>
+					<sm-copy value=${incAddress}>
+						<h4 class="wrap-around">
+							<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a> 	
+						</h4>
+					</sm-copy>
 					</div>
 					<sm-chips data-target="token_views" onchange="changeView(event)">
 						<sm-chip value="0" selected>Transactions</sm-chip>
@@ -880,7 +888,7 @@
 						<div id="contract_info" class="card">
 							<div class="flex info-row">
 								<h5 class="label">Contract Type</h5>
-								<h4>${replaceDash(contractType)}</h4>
+								<h4>${replaceDash(contractType) === 'continuos event' ? 'continuous event' : replaceDash(contractType)}</h4>
 							</div>
 							${contractSubtype ? html`
 								<div class="flex info-row">
@@ -934,11 +942,11 @@
 							`: ''}
 							${contractType === 'continuos-event' && contractSubtype === 'tokenswap' ? html`
 								<div class="flex info-row">
-									<h5 class="label">Input token</h5>
+									<h5 class="label">deposit token</h5>
 									<h4>${acceptingToken}</h4>
 								</div>
 								<div class="flex info-row">
-									<h5 class="label">Output token</h5>
+									<h5 class="label">participation token</h5>
 									<h4>${sellingToken}</h4>	
 								</div>
 								<div class="flex info-row">
@@ -1029,7 +1037,9 @@
 				`;
 			},
 			depositCard(details) {
-				const { currentBalance, depositorAddress, originalBalance, status, time, transactionHash, acceptingToken } = details
+				const { currentBalance, depositorAddress, originalBalance, status, time, transactionHash, acceptingToken, sellingToken } = details
+				console.log("I'm at the debug point")
+				debugger
 				return html`
 				<li class="flex deposit-card">
 					<div class="grid gap-0-5 flex-1">
@@ -1039,11 +1049,11 @@
 					<div class="grid align-center gap-1 flex-1" style="grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr))">
 						<div>
 							<h5 class="label">Deposited</h5>
-							<b>${formatAmount(originalBalance, 'usd')} ${acceptingToken}</b>
+							<b>${formatAmount(originalBalance, 'usd')} ${sellingToken}</b>
 						</div>
 						<div>
 							<h5 class="label">Current balance</h5>
-							<b>${formatAmount(currentBalance, 'usd')} ${acceptingToken}</b>
+							<b>${formatAmount(currentBalance, 'usd')} ${sellingToken}</b>
 						</div>
 						<div>
 							<h5 class="label">Status</h5>
@@ -1069,6 +1079,51 @@
 					</li>
 				`;
 			},
+			contractDepositCard(obj) {
+				const { hash, blockHeight, token, sender, receiver, amount, type, time, contractAddress, contractName } = obj;
+				let title = 'Contract deposit';
+				return html`
+					<li id=${hash} class="transaction token-transfer">
+						<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">
+							<h5 class="label">${title}</h5>
+							<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>
+									<sm-copy value=${sender}>
+										<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a> 
+									</sm-copy>
+								</div>
+								<div class="flex flex-direction-column">
+									<h5 class="label">Receiver</h5>
+									<sm-copy value=${receiver}>
+										<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a> 
+									</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>
+							</div>
+							<div class="flex align-center space-between flex-wrap gap-1">
+								<div class="flex flex-direction-column">
+									<h5 class="label">Transaction ID</h5>
+									<sm-copy value=${hash} clip-text></sm-copy>
+								</div>
+								<a href=${`#/transaction/${hash}`} class="button button--small button--colored">View details</a>
+							</div>
+						</div>
+					</li>
+				`;
+			},
 			contractTransferCard(obj) {
 				const { hash, token, sender, receiver, amount, contractName, userChoice, time } = obj;
 				return html`
@@ -1115,11 +1170,15 @@
 							<div class="flex flex-wrap gap-1">	
 								<div class="flex flex-direction-column">
 									<h5 class="label">Sender</h5>
-									<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a> 
+									<sm-copy value=${sender}>
+										<a href=${`#/address/${sender}`} class="address wrap-around">${sender}</a> 
+									</sm-copy>
 								</div>
 								<div class="flex flex-direction-column">
 									<h5 class="label">Receiver</h5>
-									<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a> 
+									<sm-copy value=${receiver}>
+										<a href=${`#/address/${receiver}`} class="address wrap-around">${receiver}</a> 
+									</sm-copy>
 								</div>
 							</div>
 							<div class="flex flex-direction-column">
@@ -1153,7 +1212,9 @@
 							<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>
+								<sm-copy value=${incAddress}>
+									<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a>
+								</sm-copy>
 							</div>
 							<div class="flex flex-direction-column">
 								<h5 class="label">token name</h5>
@@ -1217,8 +1278,8 @@
 				`;
 			},
 			contractCreationCard(obj) {
-				const { hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices, time } = obj;
+				const { hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices, time, acceptingToken, sellingToken, price } = obj;
-				console.log(obj);
+				console.log(obj)
 				return html`
 					<li 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>
@@ -1234,25 +1295,51 @@
 							</div>
 							<div class="flex flex-direction-column">
 								<h5 class="label">Contract address</h5>
-								<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a>
+								<sm-copy value=${incAddress}>
-							</div>
+									<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a>
-							<div class="flex flex-direction-column">
+								</sm-copy>
-								<h5 class="label">token used</h5>
-								<h4>${token}</h4>
 							</div>
 							<div class="flex flex-direction-column">
 								<h5 class="label">contract type</h5>
-								<h4>${replaceDash(contractType)}</h4>
+								<h4>
+									${replaceDash(contractType) === 'continuos event' ? 'continuous event' : replaceDash(contractType)}
+								</h4>
 							</div>
+							${token ? html`
+								<div class="flex flex-direction-column">
+									<h5 class="label">token used</h5>
+									<h4>${token}</h4>
+								</div>
+							`: ''}
+							${acceptingToken ? html`
+								<div class="flex flex-direction-column">
+									<h5 class="label">deposit token</h5>
+									<h4>${acceptingToken}</h4>
+								</div>
+							`: ''}
+							${sellingToken ? html`
+								<div class="flex flex-direction-column">
+									<h5 class="label">participation token</h5>
+									<h4>${sellingToken}</h4>
+								</div>
+							`: ''}
 							${expiration ? html`
 								<div class="flex flex-direction-column">
 									<h5 class="label">expiration</h5>
 									<h4 class="capitalise">${getFormattedTime(new Date(expiration).getTime())}</h4>
 								</div>`: ''}
-							<div class="flex flex-direction-column">
+							${participationFees ? html`
-								<h5 class="label">participation amount</h5>
+								<div class="flex flex-direction-column">
-								<h4>${participationFees} ${token}</h4>
+									<h5 class="label">participation amount</h5>
-							</div>
+									<h4>${participationFees} ${token}</h4>
+								</div>
+							`: ''}
+							${price ? html`
+								<div class="flex flex-direction-column">
+									<h5 class="label">price</h5>
+									<h4>1 ${sellingToken} = ${formatAmount(price, 'usd')} ${acceptingToken}</h4>
+								</div>
+							`: ''}
 							<div class="flex align-center space-between flex-wrap gap-1">
 								<div class="flex flex-direction-column">
 									<h5 class="label">Transaction ID</h5>
@@ -1292,6 +1379,9 @@
 					case 'nfttransfer':
 						return render.tokenTransferCard(tx)
 						break;
+					case 'contractdeposit':
+						return render.contractDepositCard(tx)
+						break;
 					case 'contracttransfer':
 						return render.contractTransferCard(tx);
 						break;
@@ -1475,6 +1565,9 @@
 			const deposits = await fetchJson(`${floGlobals.tokenApiUrl}/api/v2/smartContractDeposits?contractName=${contract.name}&contractAddress=${contract.address}`)
 			return deposits.depositInfo
 		}
+		function getReceiver(vin, vout) {
+			return vout.find(output => output.scriptPubKey.addresses.find(address => address !== vin[0].addr))?.scriptPubKey.addresses[0] || vin[0].addr
+		}
 
 		function parseTransactions(txList) {
 			if (!Array.isArray(txList))
@@ -1483,11 +1576,14 @@
 			txList.forEach(tx => {
 				const {
 					transactionDetails: {
-						txid, blockHeight, vin, vout, time },
+						txid, blockHeight, vin, vout, time,
+						receiverAddress,
+						senderAddress,
+					},
 					parsedFloData: {
 						contractAddress,
 						contractType,
-						contractConditions: { expiryTime } = {},
+						contractConditions: { expiryTime, accepting_token, selling_token, subtype, price } = {},
 						contractAmount,
 						type,
 						tokenAmount,
@@ -1496,7 +1592,8 @@
 						contractName,
 						triggerCondition,
 						userChoice,
-						nftHash
+						nftHash,
+						depositAmount,
 					}
 				} = tx;
 				let obj = {
@@ -1510,16 +1607,8 @@
 					switch (type) {
 						case 'transfer':
 							if (transferType == "token" || transferType == 'nft') {
-								let receiverAddress = "";
-								for (const output of vout) {
-									if (output["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
-										receiverAddress = output["scriptPubKey"]["addresses"][0];
-										break;
-									}
-								}
-
 								obj = Object.assign({}, obj, {
-									sender: vin[0]["addr"],
+									sender: senderAddress,
 									receiver: receiverAddress,
 									amount: tokenAmount,
 									type: transferType == "token" ? "tokentransfer" : "nfttransfer",
@@ -1528,16 +1617,8 @@
 								break;
 							} else if (transferType == 'smartContract') {
 								// smart contract transfer
-								let receiverAddress = "";
-								for (const output of vout) {
-									if (output["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
-										receiverAddress = output["scriptPubKey"]["addresses"][0];
-										break;
-									}
-								}
-
 								obj = Object.assign({}, obj, {
-									sender: vin[0]["addr"],
+									sender: senderAddress,
 									receiver: receiverAddress,
 									amount: tokenAmount,
 									contractName,
@@ -1551,7 +1632,7 @@
 							// token incorporation
 							// smart contract incorporation
 							obj = Object.assign({}, obj, {
-								incAddress: vin[0]["addr"],
+								incAddress: senderAddress,
 								supply: tokenAmount,
 								type: "tokenincorp",
 							});
@@ -1560,47 +1641,68 @@
 						case 'smartContractIncorporation':
 							// smart contract incorporation
 							// todo : add checks to determine obj for different types of smart contract incorporation
-							obj = Object.assign({}, obj, {
+							switch (subtype) {
-								contractName,
+								case 'tokenswap':
-								incAddress: contractAddress,
+									obj = Object.assign({}, obj, {
-								contractType,
+										contractName,
-								expiration: expiryTime,
+										incAddress: contractAddress,
-								participationFees: contractAmount,
+										contractType,
-								availableChoices: "",
+										type: "contractincorp",
-								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: vin[0]["addr"],
+								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
 
-					let receiver = "", sender = vin[0]['addr'];
-					for (const output of vout) {
-						if (output["scriptPubKey"]["addresses"][0] !== vin[0]["addr"]) {
-							receiverAddress = output["scriptPubKey"]["addresses"][0];
-							break;
-						}
-					}
-
 					obj = Object.assign({}, obj, {
 						hash: txid,
 						blockHeight,
 						contractName,
-						contractAddress: receiver,
+						contractAddress: receiverAddress,
 						winningChoice: triggerCondition,
-						committeeAddress: sender,
+						committeeAddress: senderAddress,
 						type: 'contracttrigger'
 					});
 					latestTxArray.push(obj);
@@ -1650,7 +1752,6 @@
 							receiver = vout[i]["scriptPubKey"]["addresses"][0];
 						}
 					}
-					console.log(transaction)
 					// todo - temporary fixes below. Fix these on the Database and API level
 					let transactionType = ''
 					if (type == 'transfer') {
@@ -1682,7 +1783,6 @@
 		}
 
 
-		// THIS TAG CONTAINS CODE REQUIRED FOR THE NAVBAR TO FUNCTION
 		function returnHexNumber(s) {
 			var regExp = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/;
 			return (typeof s === 'string' && regExp.test(s));