Text changes and bug fixes

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

@@ -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
@@ -888,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">
@@ -942,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">
@@ -1231,7 +1231,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)
 				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>
@@ -1251,23 +1252,47 @@
 									<a href=${`#/address/${incAddress}`} class="address wrap-around">${incAddress}</a>
 								</sm-copy>
 							</div>
-							<div class="flex flex-direction-column">
-								<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>
@@ -1505,7 +1530,7 @@
 					parsedFloData: {
 						contractAddress,
 						contractType,
-						contractConditions: { expiryTime } = {},
+						contractConditions: { expiryTime, accepting_token, selling_token, subtype, price } = {},
 						contractAmount,
 						type,
 						tokenAmount,
@@ -1562,15 +1587,31 @@
 						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':