v1.1.6

css/main.css

@@ -745,6 +745,7 @@ p {
       -ms-flex-align: center;
           align-items: center;
   margin-bottom: 0.5rem;
+  text-transform: capitalize;
 }
 
 .choice-container {
@@ -767,21 +768,6 @@ p {
   font-size: 0.8rem;
 }
 
-.status.done {
-  background: #00C853;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
-  color: white;
-}
-
-.status.done .icon {
-  margin-right: 0.5rem;
-  height: 1em;
-  width: 1em;
-  stroke: white;
-}
-
 .status.closed {
   background: rgba(var(--foreground), 1);
   border: solid 1px rgba(var(--text), 0.2);

css/main.scss

@@ -501,6 +501,7 @@ p{
     display: inline-flex;
     align-items: center;
     margin-bottom: 0.5rem;
+    text-transform: capitalize;
 }
 .choice-container{
     display: flex;
@@ -514,17 +515,6 @@ p{
 }
 .status{
     font-size: 0.8rem;
-    &.done{
-        background: #00C853;
-        align-self: center;
-        color: white;
-        .icon{
-            margin-right: 0.5rem;
-            height: 1em;
-            width: 1em;
-            stroke: white;
-        }
-    }
     &.closed{
         background: rgba(var(--foreground), 1);
         border: solid 1px rgba(var(--text), 0.2);

index.html

@@ -47,6 +47,9 @@
 
   <script>
     let frag = document.createDocumentFragment();
+    function creation(str) {
+      return document.createRange().createContextualFragment(str)
+    };
     const create = {
       homepage(obj) {
         let { topToken, totalTransactions, walletAddresses, topContract, } = obj,
@@ -263,64 +266,73 @@
         return page;
       },
       contractPage(obj) {
-        let { status, contract, contractType, incAddress, expiration, token, participationFees } = obj,
+        let {status, contract, contractType, contractAddress, expiration, token, participationFees, userChoices, payeeAddress, minAmount, maxAmount} = obj,
           page = document.createElement("div");
         page.classList.add("page");
         page.id = "contract_page";
-        page.innerHTML = `
+        let userChoiceSection = document.createElement('ul'),
-              <div class="status closed">Closed</div>
+            infoCard = document.createElement('div');
-              <h3 class="uppercase">${contract}</h3>
+        infoCard.classList.add('card')
-              <div class="card">
+        userChoiceSection.classList.add('card')
+        userChoiceSection.type = 'circle'
+        if(userChoices){
+          for(choice in userChoices){
+            userChoiceSection.innerHTML += `<li>${userChoices[choice]}</li>`
+          }
+        }
+        page.append(creation( `
+              <div class="status closed">${status}</div>
+              <h3 class="uppercase">${contract}</h3>`))
+        infoCard.innerHTML =`
                   <h5 class="label">Contract Type</h5>
-                  <h4>${contractType}</h4>
+                  <h4>${replaceDash(contractType)}</h4>
-                  <h5 class="label">Incorporation Address</h5>
+                  <h5 class="label">Contract Address</h5>
-                  <h4 class="address">${incAddress}</h4>
+                  <h4 class="address">${contractAddress}</h4>`
-                  <h5 class="label">Expiration</h5>
+        if(expiration)
-                  <h4>${expiration}</h4>
+          infoCard.append(creation( `
-                  <h5 class="label">Token Used</h5>
+            <h5 class="label">Expiration</h5>
-                  <h4 class="uppercase">${token}</h4>
+            <h4>${expiration}</h4>`))
-                  <h5 class="label">Participation Amount</h5>
+        if(payeeAddress)
-                  <h4>${participationFees}</h4>
+          infoCard.append(creation( `
-              </div>
+            <h5 class="label">Payee Address</h5>
-              <h3 class="heading">User Choices</h3>
+            <h4>${payeeAddress}</h4>`))
-              <ul class="card" type='circle'>
+        if(minAmount)
-                  <li>Narendra Modi Wins</li>
+          infoCard.append(creation( `
-                  <li>Narendra Modi Loses</li>
+            <h5 class="label">Min. Subscription Amount</h5>
-              </ul>
+            <h4>${minAmount}</h4>`))
-              <div class="tabs">
+        if(maxAmount)
-                  <h4 class="tab active" data-rank="1" data-target="participant_container">Participants</h4>
+          infoCard.append(creation( `
-                  <h4 class="tab" data-rank="2" data-target="winners_container">Winners</h4>
+            <h5 class="label">Max. Subscription Amount</h5>
-                  <h4 class="tab" data-rank="3" data-target="losers_container">losers</h4>
+            <h4>${maxAmount}</h4>`))
-                  <div class="line"></div>
+        if(participationFees)
-              </div>
+          infoCard.append(creation( `
-              <ul id="participant_container" data-tab-group="token" class="card">
+            <h5 class="label">Participation Amount</h5>
-                  <li class="contract-choice" >
+            <h4>${participationFees}</h4>`))
-                      <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+        infoCard.append(creation( `<h5 class="label">Token Used</h5>
-                      <h3>narendra modi wins</h3>
+                  <h4 class="uppercase">${token}</h4>`))
-                      <h4>0.0000023333 RMT</h4>
+        page.append(infoCard)
-                  </li>
+        if(userChoices){
-                  <li class="balance">
+          page.append(creation( `
-                      <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+          <h3 class="heading">User Choices</h3>`))
-                      <h4>0.0000023333 RMT</h4>
+          page.append(userChoiceSection)
-                  </li>
+        }
-              </ul>
+        page.append(creation( `<div class="tabs">
-              <ul id="winners_container" data-tab-group="token" class="card hide-completely">
+            <h4 class="tab active" data-rank="1" data-target="participant_container">Participants</h4>
-                  <li class="contract-choice winner" >
+            <h4 class="tab" data-rank="2" data-target="winners_container">Winners</h4>
-                      <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+            <div class="line"></div>
-                      <h3>narendra modi wins</h3>
+        </div>
-                      <h4>0.0000023333 RMT</h4>
+        <ul id="participant_container" data-tab-group="token" class="card"></ul>
-                  </li>
+        <ul id="winners_container" data-tab-group="token" class="card hide-completely"></ul>`));
-              </ul>
-              <ul id="losers_container" data-tab-group="token" class="card hide-completely">
-                  <li class="contract-choice winner" >
-                      <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
-                      <h3>narendra modi wins</h3>
-                      <h4>0.0000023333 RMT</h4>
-                  </li>
-              </ul>
-              `;
         return page;
       },
+      contractChoiceCard(address, token, choice, amount, action){
+        let card = document.createElement('li')
+        card.innerHTML = `                      
+                      <h5 class="breakable label">${address}</h5>
+                      <h4>${choice}</h4>
+                      <h4>${amount} ${token} ${action}</h4>`
+        return card;
+      },
       contractTransferCard(obj) {
         let { hash, blockHeight, token, sender, receiver, amount, contractName, userChoice } = obj,
           card = document.createElement("div");
@@ -541,19 +553,10 @@
         };
 
         let [contractInfo, contractTransactions, contractParticipants] = await Promise.all([getContractInfo(contract), getContractTransactions(contract), getContractParticipants(contract)])
-
         // todo : check the type of contract & then further checks like fetching details of contractParticipant 
-        let obj = {
+        pageContainer.append(create.contractPage(contractInfo));
-          status: "closed",
-          contract: "india-elections-2019",
-          contractType: "one-time-event",
-          incAddress: "F7osBpjDDV1mSSnMNrLudEQQ3cwDJ2dPR1",
-          expiration: "wed may 22 2019 21:00:00 gmt+0530",
-          token: "rmt",
-          participationFees: "0.001 RMT",
-        };
-        pageContainer.append(create.contractPage(obj));
         pageTitle.textContent = "Contract";
+
         loading()
       }
 
@@ -1062,14 +1065,14 @@
     }
 
     async function getTokenBalances(tokenName) {
-      const responce = await fetch(`${tokenapiUrl}/api/v1.0/getTokenBalances?token=` + tokenName),
+      const response = await fetch(`${tokenapiUrl}/api/v1.0/getTokenBalances?token=` + tokenName),
-            messeges = await responce.json()
+            messeges = await response.json()
       return messeges.balances
     }
 
     async function getTokenTransactions(tokenName) {
-      const responce = await fetch(`${tokenapiUrl}/api/v1.0/getTokenTransactions?token=` + tokenName),
+      const response = await fetch(`${tokenapiUrl}/api/v1.0/getTokenTransactions?token=` + tokenName),
-            transactions = await responce.json()
+            transactions = await response.json()
       return transactions.transactions
 
     }
@@ -1097,76 +1100,40 @@
 
 
 
-    function getContractInfo(contract) {
+    async function getContractInfo(contract) {
-      return fetch(
+      try{
-        `${tokenapiUrl}/api/v1.0/getSmartContractInfo?contractName=${contract.name}&contractAddress=${contract.address}`
+        const response = await fetch(`${tokenapiUrl}/api/v1.0/getSmartContractInfo?contractName=${contract.name}&contractAddress=${contract.address}`),
-      )
+            info = await response.json(),
-        .then(function (response) {
+            {contractInfo, contractAddress, contractName} = info
-          return response.json();
+            return {
-        })
+              contract: contractName,
-        .then(function (contractInfo) {
+              contractAddress: contractAddress,
-
+              contractType: contractInfo.contractType,
-          /*let obj = {
+              status: contractInfo.status,
-            blockHeight: blockInfo["height"],
+              expiration: contractInfo?.expiryTime,
-            size: blockInfo["size"],
+              payeeAddress: contractInfo?.payeeAddress,
-            transactions: "",
+              userChoices: contractInfo?.userChoice,
-            reward: blockInfo["reward"],
+              token: contractInfo?.tokenIdentification,
-            hash: blockInfo["hash"],
+              participationFees: contractInfo?.contractAmount,
-            difficulty: blockInfo["difficulty"],
+              minAmount: contractInfo?.minimumsubscriptionamount,
-            nonce: blockInfo["nonce"],
+              maxAmount: contractInfo?.maximumsubscriptionamount
-          }; */
+            }
-
+      }
-          /* type 1
+      catch(error){
-          expirytime	payeeaddress	minimumsubscriptionamount	maximumsubscriptionamount	contractamount
+        console.log(error)
-
+      }
-          // type 2
-          expirytime	userchoices	contractamount	minimumsubscriptionamount	maximumsubscriptionamount
-          */
-
-          return obj = {};
-        });
     }
 
-    function getContractParticipants(contract) {
+    async function getContractParticipants(contract) {
-      return fetch(
+      const response = await fetch(`${tokenapiUrl}/api/v1.0/getSmartContractParticipants?contractName=${contract.name}&contractAddress=${contract.address}`),
-        `${tokenapiUrl}/api/v1.0/getSmartContractParticipants?contractName=${contract.name}&contractAddress=${contract.address}`
+            participants = await response.json()
-      )
+        return participants.participantInfo
-        .then(function (response) {
-          return response.json();
-        })
-        .then(function (contractParticipants) {
-          /*let obj = {
-            blockHeight: blockInfo["height"],
-            size: blockInfo["size"],
-            transactions: "",
-            reward: blockInfo["reward"],
-            hash: blockInfo["hash"],
-            difficulty: blockInfo["difficulty"],
-            nonce: blockInfo["nonce"],
-          };*/
-          return obj = {};
-        });
     }
 
-    function getContractTransactions(contract) {
+    async function getContractTransactions(contract) {
-      return fetch(
+      const response = await fetch(`${tokenapiUrl}/api/v1.0/getSmartContractTransactions?contractName=${contract.name}&contractAddress=${contract.address}`),
-        `${tokenapiUrl}/api/v1.0/getSmartContractTransactions?contractName=${contract.name}&contractAddress=${contract.address}`
+            transactions = await response.json()
-      )
+        return transactions.contractTransactions
-        .then(function (response) {
-          return response.json();
-        })
-        .then(function (contractTxs) {
-          /*let obj = {
-            blockHeight: blockInfo["height"],
-            size: blockInfo["size"],
-            transactions: "",
-            reward: blockInfo["reward"],
-            hash: blockInfo["hash"],
-            difficulty: blockInfo["difficulty"],
-            nonce: blockInfo["nonce"],
-          };*/
-          return obj = {};
-        });
     }
 
     function getViewallBlocks() {
@@ -1255,8 +1222,8 @@
     }
 
     async function getAddressBalance(floAddress) {
-      const responce =  await fetch(`${floapiUrl}/api/addr/${floAddress}/balance`),
+      const response =  await fetch(`${floapiUrl}/api/addr/${floAddress}/balance`),
-            balance = await responce.json()
+            balance = await response.json()
       return balance;
     }
 
@@ -1284,8 +1251,8 @@
     }
 //type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations 
     async function getTxInfo(thisTx) {
-      const responce = await fetch(`${tokenapiUrl}/api/v1.0/getTransactionDetails/${thisTx}`),
+      const response = await fetch(`${tokenapiUrl}/api/v1.0/getTransactionDetails/${thisTx}`),
-            transaction = await responce.json(),
+            transaction = await response.json(),
             transactionHash = transaction.transactionHash,
             {flodata, tokenAmount, tokenIdentification, transferType, type} = transaction.parsedFloData,
             {blockheight, vin, vout, confirmations} = transaction.transactionDetails;