Added blockchain links related to accounts

css/main.css

@@ -1073,6 +1073,11 @@ strip-option:last-of-type {
   gap: 2rem;
 }
 
+#account_process__steps {
+  display: grid;
+  gap: 1.5rem;
+}
+
 .account-step {
   opacity: 0;
   grid-template-columns: auto minmax(0, 1fr);
@@ -1098,7 +1103,7 @@ strip-option:last-of-type {
 }
 .account-step:not(:last-of-type) .step__line {
   position: relative;
-  height: 3rem;
+  height: 100%;
   width: 0.1rem;
   margin: 0.5rem 0 1rem 0;
   justify-self: center;
@@ -1116,6 +1121,16 @@ strip-option:last-of-type {
 .account-step .step__description {
   font-size: 0.8rem;
 }
+.account-step.row-3:not(:last-of-type) .step__line {
+  grid-row: span 2;
+}
+.account-step.row-3 .button {
+  grid-column: 2/3;
+}
+.account-step .button {
+  margin-top: 0.5rem;
+  justify-self: flex-start;
+}
 
 @-webkit-keyframes slide-down {
   from {
@@ -1441,6 +1456,18 @@ strip-option:last-of-type {
         -ms-flex-align: center;
             align-items: center;
   }
+
+  .account-step.row-3 {
+    grid-template-areas: ". . b-link" ". . b-link";
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  .account-step.row-3 .step__line {
+    grid-column: 1/2;
+  }
+  .account-step.row-3 .button {
+    grid-area: b-link;
+    align-self: flex-start;
+  }
 }
 @media screen and (max-width: 1024px) {
   #user_section {

css/main.scss

@@ -925,6 +925,10 @@ strip-option {
   align-content: flex-start;
   gap: 2rem;
 }
+#account_process__steps {
+  display: grid;
+  gap: 1.5rem;
+}
 .account-step {
   opacity: 0;
   grid-template-columns: auto minmax(0, 1fr);
@@ -945,7 +949,7 @@ strip-option {
   }
   &:not(:last-of-type) .step__line {
     position: relative;
-    height: 3rem;
+    height: 100%;
     width: 0.1rem;
     margin: 0.5rem 0 1rem 0;
     justify-self: center;
@@ -965,6 +969,18 @@ strip-option {
   .step__description {
     font-size: 0.8rem;
   }
+  &.row-3 {
+    &:not(:last-of-type) .step__line {
+      grid-row: span 2;
+    }
+    .button {
+      grid-column: 2/3;
+    }
+  }
+  .button {
+    margin-top: 0.5rem;
+    justify-self: flex-start;
+  }
 }
 @keyframes slide-down {
   from {
@@ -1197,6 +1213,19 @@ strip-option {
     justify-content: space-between;
     align-items: center;
   }
+  .account-step {
+    &.row-3 {
+      grid-template-areas: ". . b-link" ". . b-link";
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      .step__line {
+        grid-column: 1/2;
+      }
+      .button {
+        grid-area: b-link;
+        align-self: flex-start;
+      }
+    }
+  }
 }
 @media screen and (max-width: 1024px) {
   #user_section {

index.html

@@ -559,7 +559,7 @@
                     <div id="account_detail__status"></div>
                 </div>
                 <div class="grid gap-0-5">
-                    <div id="account_detail__type"></div>
+                    <div id="account_detail__type" class="capitalize"></div>
                     <h3 id="account_detail__amount"></h3>
                 </div>
                 <sm-button id="account_action_button" onclick="processAccount()" variant="primary"></sm-button>
@@ -1274,12 +1274,21 @@
                 card.querySelector('.activity-card__amount').textContent = netAmt.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
                 return card
             },
-            accountProgressStep(type, title, description = '') {
+            accountProgressStep(type, title, description = '', options = {}) {
+                const { openTx, closeTx } = options
                 const elem = getRef('account_step_template').content.cloneNode(true).firstElementChild
                 elem.classList.add(type)
                 elem.querySelector('.step__icon').innerHTML = type === 'loading' ? '<sm-spinner></sm-spinner>' : utils.getRelatedIcon(type)
                 elem.querySelector('.step__title').textContent = title
                 elem.querySelector('.step__description').innerHTML = description
+                if (openTx || closeTx) {
+                    elem.classList.add('row-3')
+                    elem.append(createElement('a', {
+                        className: 'button',
+                        textContent: 'See record on blockchain',
+                        attributes: { href: `https://flosight.duckdns.org/tx/${openTx || closeTx}`, target: '_blank' }
+                    }))
+                }
                 return elem
             }
         }
@@ -1484,23 +1493,23 @@
         }
 
         function renderAccountProgress(index) {
-            const { type, status, openTime, closeTime = undefined, amount, netAmt } = bank_app.getUserDetails(myFloID).accounts[index]
+            const { type, status, openTime, closeTime = undefined, amount, netAmt, openTx = undefined, closeTx = undefined } = bank_app.getUserDetails(myFloID).accounts[index]
             getRef('account_process__steps').innerHTML = ''
-            getRef('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime)))
+            getRef('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime), { openTx }))
             const { isPending, pendingRequest } = getAccountStatus(index)
             if (type === 'deposit') {
                 if (isPending) {
                     getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent withdrawal request', getFormattedTime(pendingRequest.split('_')[0])))
                     getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for withdrawal confirmation', `Once your request is processed, your withdrawn amount will reflect in your balance.<br>meanwhile you can go back and continue using the app.`))
                 } else if (closeTime) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime)))
+                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime), { closeTx }))
                 }
             } else {
                 if (isPending) {
                     getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent repay request', getFormattedTime(pendingRequest.split('_')[0])))
                     getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for repayment confirmation', `Once your request is processed, your loan will be closed,`))
                 } else if (closeTime) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime)))
+                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime), { closeTx }))
                 }
             }
         }