Merge pull request #18 from Emurgo/denis/displaying-certs-in-tx

Denis/displaying certs in tx

src/components/expandabablePanel.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import {useCollapse} from 'react-collapsed'
+
+const ExpandablePanel = (props) => {
+  const {getCollapseProps, getToggleProps, isExpanded} = useCollapse()
+  const {title, innerInfo} = props
+  return (
+    <div className="border rounded-md bg-gray-700 border-gray-700 py-2 w-full" key={`expandablePanel`}>
+      <div {...getToggleProps()}>
+        <div>
+          <span className="text-m">
+            {title}&nbsp;
+            {isExpanded ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="inline align-text-bottom feather feather-arrow-down"
+              >
+                <line x1="8" y1="3" x2="8" y2="12"></line>
+                <polyline points="13 8 8 12 3 8"></polyline>
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="inline align-text-bottom feather feather-arrow-up"
+              >
+                <line x1="8" y1="3" x2="8" y2="13"></line>
+                <polyline points="3 8 8 3 13 8"></polyline>
+              </svg>
+            )}
+          </span>
+        </div>
+      </div>
+      <div {...getCollapseProps()}>
+        <div className="pt-1">
+          <textarea
+            className="w-full h-64 rounded bg-gray-900 text-white px-2 readonly"
+            readOnly
+            value={innerInfo}
+          ></textarea>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ExpandablePanel

src/components/tabs/subtabs/certificatesInTxPart.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import {useCollapse} from 'react-collapsed'
+import ExpandablePanel from '../../expandabablePanel'
+
+const CertificatesInTxPart = ({getters}) => {
+  const {getCollapseProps, getToggleProps, isExpanded} = useCollapse()
+  const {certsInTx, votesInTx} = getters
+  const amountOfCertsAndVotesInTx = () => certsInTx.length + votesInTx.length
+  const getAllInOne = () => {
+    const resultArray = []
+    for (const certInTx of certsInTx) {
+      const certPartWithName = certInTx.split('\n')[1]
+      const cleanCertName = certPartWithName.split('"')[1]
+      const certJsonObject = JSON.parse(certInTx)
+      resultArray.push([cleanCertName, certJsonObject])
+    }
+    for (const voteInTx of votesInTx) {
+      const votePartWithName = voteInTx.split('\n')[1]
+      const cleanVoteName = votePartWithName.split('"')[1]
+      const voteJsonObject = JSON.parse(voteInTx)
+      resultArray.push([cleanVoteName, voteJsonObject])
+    }
+    return resultArray
+  }
+
+  return (
+    <div className="border rounded-md bg-gray-700 border-gray-700 px-5 py-2 mt-5">
+      <div {...getToggleProps()}>
+        <div>
+          <span className="text-m">
+            Certtificates in Tx {`(${amountOfCertsAndVotesInTx()})`}&nbsp;
+            {isExpanded ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="inline align-text-bottom feather feather-arrow-down"
+              >
+                <line x1="8" y1="3" x2="8" y2="12"></line>
+                <polyline points="13 8 8 12 3 8"></polyline>
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="inline align-text-bottom feather feather-arrow-up"
+              >
+                <line x1="8" y1="3" x2="8" y2="13"></line>
+                <polyline points="3 8 8 3 13 8"></polyline>
+              </svg>
+            )}
+          </span>
+        </div>
+      </div>
+      <div {...getCollapseProps()}>
+        <div>
+          {getAllInOne().map((certInfo) => (
+            <ExpandablePanel
+              title={'-> ' + certInfo[0]}
+              innerInfo={JSON.stringify(certInfo[1], null, 4)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CertificatesInTxPart

src/components/tabs/subtabs/cip95AdditionalPart.js

@@ -5,6 +5,7 @@ import GovBasicFunctionsTab from './govBasicFunctionsTab'
 import GovActionsTab from './govActionsTab'
 import ConstitCommCertsTab from './constitCommCertsTab'
 import Cip95BuildSignSubmitCard from '../../cards/cip95BuildSignSubmitCard'
+import CertificatesInTxPart from './certificatesInTxPart'
 
 const Cip95AdditionalPart = ({api, wasm, onWaiting, onError, getters, setters}) => {
   const [certsInTx, setCertsInTx] = useState([])
@@ -94,6 +95,10 @@ const Cip95AdditionalPart = ({api, wasm, onWaiting, onError, getters, setters})
         getters={newGetters}
         setters={newSetters}
       />
+      {/* Here the expandable panel with tx certificates should be */}
+      <div>
+        <CertificatesInTxPart getters={getters}/>
+      </div>
       <div className="block rounded-lg border mt-5 bg-gray-900 border-gray-700">
         <TabsComponent tabsData={data} />
       </div>

src/components/tabs/subtabs/infoPanel.js

@@ -19,7 +19,7 @@ const InfoPanel = ({getters}) => {
   const spanProperties = 'w-full break-words ' + textColor
 
   return (
-    <div className="block p-5 min-w-full rounded-lg border shadow-md bg-gray-900 border-gray-700">
+    <div className="block p-5 min-w-full text-sm rounded-lg border shadow-md bg-gray-900 border-gray-700">
       <div className="grid justify-items-stretch grid-cols-1 lg:grid-cols-2 gap-2">
         <div>
           <span>Balance: </span>