From 1c91e3af4d7427e2f5449e077a22bd3cc2c37530 Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Wed, 14 Aug 2024 15:16:58 +0300
Subject: [PATCH 1/4] make text size smaller

---
 src/components/tabs/subtabs/infoPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tabs/subtabs/infoPanel.js b/src/components/tabs/subtabs/infoPanel.js
index e41bf7a..bbb2213 100644
--- a/src/components/tabs/subtabs/infoPanel.js
+++ b/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>

From 9107c0da6f57a54714f5bdd27eb2e520810a376a Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Wed, 14 Aug 2024 18:31:10 +0300
Subject: [PATCH 2/4] added expandable panel

---
 src/components/expandabablePanel.js | 62 +++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/expandabablePanel.js

diff --git a/src/components/expandabablePanel.js b/src/components/expandabablePanel.js
new file mode 100644
index 0000000..71b3319
--- /dev/null
+++ b/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

From ef408d8b7fed74f7f6037fb4a3a458c3f3fda67a Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Wed, 14 Aug 2024 18:31:33 +0300
Subject: [PATCH 3/4] added component for displaying added certs

---
 .../tabs/subtabs/certificatesInTxPart.js      | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/components/tabs/subtabs/certificatesInTxPart.js

diff --git a/src/components/tabs/subtabs/certificatesInTxPart.js b/src/components/tabs/subtabs/certificatesInTxPart.js
new file mode 100644
index 0000000..162bfd7
--- /dev/null
+++ b/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

From be769bfda3422a983be16987573eb91f4966454c Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Wed, 14 Aug 2024 18:31:48 +0300
Subject: [PATCH 4/4] using the new component

---
 src/components/tabs/subtabs/cip95AdditionalPart.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/tabs/subtabs/cip95AdditionalPart.js b/src/components/tabs/subtabs/cip95AdditionalPart.js
index 3db5c7c..3c98775 100644
--- a/src/components/tabs/subtabs/cip95AdditionalPart.js
+++ b/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>