From 66470d81b016b71addf68a24a0279909ba8da193 Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Tue, 27 Aug 2024 22:43:20 -0600
Subject: [PATCH 1/9] feat: adding styles - Block: extra data section

---
 src/components/Paginator.vue         |  2 ++
 src/store/modules/backend/actions.js |  1 +
 src/store/modules/backend/getters.js |  1 +
 src/styles/_page.scss                | 15 +++++++++++++++
 4 files changed, 19 insertions(+)

diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
index caa9ee31..7557d088 100644
--- a/src/components/Paginator.vue
+++ b/src/components/Paginator.vue
@@ -104,10 +104,12 @@ export default {
       const prevKey = this.prevKey()(key)
       const pageKey = this.pageKey()(key)
       const query = { [nextKey]: next, [prevKey]: prev, [pageKey]: page }
+      console.log('query: ', query)
       this.updateRouterQuery({ query, key })
     },
     findPage (page) {
       const { pages } = this
+      console.log('pages: ', pages)
       const index = pages.findIndex(p => p.page === page)
       return (index > -1) ? pages[index] : null
     }
diff --git a/src/store/modules/backend/actions.js b/src/store/modules/backend/actions.js
index 9c50b100..1e432cc3 100644
--- a/src/store/modules/backend/actions.js
+++ b/src/store/modules/backend/actions.js
@@ -48,6 +48,7 @@ export const socketNewBlocks = ({ state, commit, getters, dispatch, rootState },
 
 export const socketData = ({ state, commit, getters, dispatch }, res) => {
   const { req, pages, error, next, prev, delayed } = res
+  console.log('pages: ', pages)
   const key = req.key
   const total = (pages) ? pages.total : null
   const sort = (pages) ? pages.sort : null
diff --git a/src/store/modules/backend/getters.js b/src/store/modules/backend/getters.js
index 5c61430c..2aeef80c 100644
--- a/src/store/modules/backend/getters.js
+++ b/src/store/modules/backend/getters.js
@@ -38,6 +38,7 @@ export const lastBlocksTime = state => {
 export const getPageTotal = (state, getters) => key => {
   const data = state.responses[key]
   const total = (data?.pages && data?.pages.total) ? data?.pages.total : state.totals[key] || null
+  console.log('total: ', total)
   return total
 }
 
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index d8156294..92634174 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -242,9 +242,24 @@
       flex: 1 1 100%;
       padding: 12px;
       gap: 20px;
+      box-shadow: 0px -1px 0px 0px #3A3A3A inset;
       .field-title.big-field, .field-title.BigField, .field-title.event-call {
         flex: 1;
       }
+      .big-field:nth-child(2) {
+        flex-direction: column-reverse;
+        .decode {
+          margin-left: unset;
+          margin-bottom: 10px;
+        }
+        textarea {
+          background-color: #1d1d1d;
+          padding: 12px;
+          border-radius: 12px;
+          height: min-content;
+          margin: unset;
+        }
+      }
       .big-field, .event-call {
         flex: 5;
         textarea {

From 4379a0fc3d9104c18ab83bb79b02ea552f94436c Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Fri, 20 Sep 2024 09:37:47 -0600
Subject: [PATCH 2/9] fix: textarea scroll deleted

---
 src/styles/_page.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index 92634174..5246810b 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -256,6 +256,8 @@
           background-color: #1d1d1d;
           padding: 12px;
           border-radius: 12px;
+          overflow: hidden;
+          min-height: 40px;
           height: min-content;
           margin: unset;
         }

From e5611230485b8e5cd6453ff9a4ad63d018a0d191 Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Fri, 20 Sep 2024 09:52:10 -0600
Subject: [PATCH 3/9] fix: Showing scroll when field is too small

---
 src/styles/_page.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index 5246810b..ab55bba1 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -256,7 +256,6 @@
           background-color: #1d1d1d;
           padding: 12px;
           border-radius: 12px;
-          overflow: hidden;
           min-height: 40px;
           height: min-content;
           margin: unset;

From 9efd9734cbdcd9f4feb9a7b3e3b0376a72bcf48e Mon Sep 17 00:00:00 2001
From: Nicolas Vargas <nicolas.vargas@iovlabs.org>
Date: Wed, 2 Oct 2024 19:07:04 -0300
Subject: [PATCH 4/9] fix: update event signature display UI

---
 src/components/EventCall.vue           | 137 ++++++++++++++-----------
 src/components/controls/CopyButton.vue |  13 ++-
 2 files changed, 91 insertions(+), 59 deletions(-)

diff --git a/src/components/EventCall.vue b/src/components/EventCall.vue
index c53a0a11..8e845ace 100644
--- a/src/components/EventCall.vue
+++ b/src/components/EventCall.vue
@@ -1,23 +1,31 @@
 <template>
-  <div class="event-call" v-if="data">
-    <ul class="event">
-      <li class="event-name">{{ name }}
-        <template v-if="inputs">
-          <ul class="args" v-for="(arg, i) in inputs" :key="i">
-            <li class="type" :key="`1-${i}`" :style="{ color: PAGE_COLORS[$route.name].cl }">{{ arg.type }}</li>
-            <li class="index" v-if="arg.indexed">indexed</li>
-            <li class="name">{{ arg.name }}</li>
-          </ul>
-        </template>
-      </li>
-    </ul>
+  <div class="event-details-container">
+    <div class="event-details white-100" v-if="data">
+      <span>{{ name }}{{ space }}</span>
+      <span class="event-args">
+        <span>{{ openingParen }}</span>
+        <span class="event-arg" v-for="(arg, i) in inputs" :key="i">
+          <span class="orange-900">{{ arg.type }}{{ space }}</span>
+          <span class="white-400" v-if="arg.indexed">{{ indexed }}{{ space }}</span>
+          <span>{{ arg.name }}</span>
+          <span class="white-400" v-if="addComma(i, inputs)">{{ comma }}{{ space }}</span>
+        </span>
+        <span>{{ closingParen }}</span>
+      </span>
+    </div>
+    <copy-button :value="eventSignature" title="Copy event signature" css=""/>
   </div>
 </template>
 <script>
 import { PAGE_COLORS } from '../config/pageColors'
+import CopyButton from './controls/CopyButton'
+
 export default {
   name: 'event-call',
   props: ['data'],
+  components: {
+    CopyButton
+  },
   data () {
     return {
       PAGE_COLORS
@@ -29,62 +37,75 @@ export default {
     },
     inputs () {
       return this.data.inputs
+    },
+    eventSignature () {
+      const { name, inputs } = this
+      const eventName = `${name}`
+
+      const eventParams = inputs.map(input => {
+        const inputDetails = `${input.type} ${input.name}`
+        return input.indexed ? `${inputDetails} indexed` : inputDetails
+      })
+
+      return `${eventName} (${eventParams.join(', ').trim()})`
+    },
+    openingParen () {
+      return '\u0028'
+    },
+    closingParen () {
+      return '\u0029'
+    },
+    comma () {
+      return '\u002C'
+    },
+    space () {
+      return ' '
+    },
+    indexed () {
+      return 'indexed'
+    }
+  },
+  methods: {
+    addComma (index, list) {
+      return index < list.length - 1
     }
   }
 }
 </script>
-<style lang="stylus">
-
-  .event-call
-    margin 0
-    display flex
-    .index
-      font-size .8em
-
-    li.event-name
-      font-weight bold
-      color $info
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
 
-    ul
-      raw()
-      font-size .9em
-      list-style none
-      align-items flex-end
-      font-style italic
-      font-weight normal
-      margin 0
-      padding 0
-      flex-flow row wrap
-      li
-        color white
-
-    ul,li
-      margin 0 0.25em 0 0
-      display flex
+.event-details-container {
+  flex: 5;
+  text-transform: none;
+  display: flex;
+  gap: 20px;
+  justify-content: start;
+  align-items: center;
+}
 
-      &:last-child:after
-        font-weight bold
+.event-details {
+  display: inline;
 
-    .args
-      &::before
-        content '('
+}
 
-      &::after
-        content ')'
+.event-args {
+  display: inline;
+}
 
-      .type
-        color white
-        &:after
-          content ''
+.event-arg {
+  display: inline;
+}
 
-      .name
-        font-size 0.9em
-        // color green
+.white-400 {
+  color: $white_400;
+}
 
-        &:after
-          content ','
-          font-size 1em
+.white-100 {
+  color: $white_100;
+}
 
-        &:last-child:after
-          content none
+.orange-900 {
+  color: $orange_900;
+}
 </style>
diff --git a/src/components/controls/CopyButton.vue b/src/components/controls/CopyButton.vue
index a3d41042..f2f98c93 100644
--- a/src/components/controls/CopyButton.vue
+++ b/src/components/controls/CopyButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="copy-button">
     <textarea v-if="value" :ref="refName" class="hidden-ctrl" v-model="value"></textarea>
-    <burp-button :icon="iconName" :message="message || 'copied!'" :title="title" :text="text" @click="copy" :class="css">
+    <burp-button :icon="iconName" :message="message || 'copied!'" :title="title" :text="text" @click="copy" :class="css || defaultStyle">
       <slot></slot>
     </burp-button>
   </div>
@@ -29,6 +29,9 @@ export default {
     targetNode () {
       const { refName, target } = this
       return (target) || this.$refs[refName]
+    },
+    defaultStyle () {
+      return 'white-400'
     }
   },
   methods: {
@@ -39,3 +42,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+
+.white-400 {
+  color: $white_400;
+}
+</style>

From 77d48c78ba991e5f6f20a309ed0a62d667f32fb4 Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Wed, 2 Oct 2024 19:23:02 -0600
Subject: [PATCH 5/9] fix: adding auto scroll

---
 src/styles/_page.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index ab55bba1..def667f4 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -256,7 +256,8 @@
           background-color: #1d1d1d;
           padding: 12px;
           border-radius: 12px;
-          min-height: 40px;
+          overflow-x: auto;
+          min-height: 45px;
           height: min-content;
           margin: unset;
         }

From b7d533600bc8e1b48c001be7c6b9498fc57fdd3c Mon Sep 17 00:00:00 2001
From: Nicolas Vargas <nicolas.vargas@iovlabs.org>
Date: Thu, 3 Oct 2024 14:20:22 -0300
Subject: [PATCH 6/9] fix: event signature generation logic

---
 src/components/EventCall.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/EventCall.vue b/src/components/EventCall.vue
index 8e845ace..7c30a918 100644
--- a/src/components/EventCall.vue
+++ b/src/components/EventCall.vue
@@ -39,12 +39,20 @@ export default {
       return this.data.inputs
     },
     eventSignature () {
-      const { name, inputs } = this
+      const { name, inputs, space, indexed } = this
       const eventName = `${name}`
 
       const eventParams = inputs.map(input => {
-        const inputDetails = `${input.type} ${input.name}`
-        return input.indexed ? `${inputDetails} indexed` : inputDetails
+        const inputType = input.type
+        const inputName = input.name
+
+        let formattedInputLine
+        if (input.indexed) {
+          formattedInputLine = `${inputType}${space}${indexed}${space}${inputName}`
+        } else {
+          formattedInputLine = `${inputType}${space}${inputName}`
+        }
+        return formattedInputLine
       })
 
       return `${eventName} (${eventParams.join(', ').trim()})`

From e1ea2392f5e9d01a31abe9a8c8f6ace952d84329 Mon Sep 17 00:00:00 2001
From: Carlos Rosado <carlos.rosado@ext.iovlabs.org>
Date: Mon, 7 Oct 2024 08:37:50 -0600
Subject: [PATCH 7/9] fix: avoid textarea resize

---
 src/styles/_page.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index 92634174..3fe196f9 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -256,8 +256,11 @@
           background-color: #1d1d1d;
           padding: 12px;
           border-radius: 12px;
+          overflow-x: auto;
+          min-height: 45px;
           height: min-content;
           margin: unset;
+          resize: none;
         }
       }
       .big-field, .event-call {

From 5a5c4066046314188c2476f463cbd8ac9d382246 Mon Sep 17 00:00:00 2001
From: Nicolas Vargas <nicolas.vargas@iovlabs.org>
Date: Mon, 7 Oct 2024 11:58:04 -0300
Subject: [PATCH 8/9] chore: Dump to version 2.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f4aa7c4e..eb95eb48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rsk-explorer",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "description": "Rsk explorer client",
   "author": "emi <emiliorizzo@gmail.com>",

From 91896587ee7dcd225bbfe48b82d60e4c6324512e Mon Sep 17 00:00:00 2001
From: Nicolas Vargas <nicolas.vargas@iovlabs.org>
Date: Mon, 7 Oct 2024 12:12:01 -0300
Subject: [PATCH 9/9] fix: remove console.logs

---
 src/components/Paginator.vue         | 2 --
 src/store/modules/backend/actions.js | 1 -
 src/store/modules/backend/getters.js | 1 -
 3 files changed, 4 deletions(-)

diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
index 7557d088..caa9ee31 100644
--- a/src/components/Paginator.vue
+++ b/src/components/Paginator.vue
@@ -104,12 +104,10 @@ export default {
       const prevKey = this.prevKey()(key)
       const pageKey = this.pageKey()(key)
       const query = { [nextKey]: next, [prevKey]: prev, [pageKey]: page }
-      console.log('query: ', query)
       this.updateRouterQuery({ query, key })
     },
     findPage (page) {
       const { pages } = this
-      console.log('pages: ', pages)
       const index = pages.findIndex(p => p.page === page)
       return (index > -1) ? pages[index] : null
     }
diff --git a/src/store/modules/backend/actions.js b/src/store/modules/backend/actions.js
index 1e432cc3..9c50b100 100644
--- a/src/store/modules/backend/actions.js
+++ b/src/store/modules/backend/actions.js
@@ -48,7 +48,6 @@ export const socketNewBlocks = ({ state, commit, getters, dispatch, rootState },
 
 export const socketData = ({ state, commit, getters, dispatch }, res) => {
   const { req, pages, error, next, prev, delayed } = res
-  console.log('pages: ', pages)
   const key = req.key
   const total = (pages) ? pages.total : null
   const sort = (pages) ? pages.sort : null
diff --git a/src/store/modules/backend/getters.js b/src/store/modules/backend/getters.js
index 2aeef80c..5c61430c 100644
--- a/src/store/modules/backend/getters.js
+++ b/src/store/modules/backend/getters.js
@@ -38,7 +38,6 @@ export const lastBlocksTime = state => {
 export const getPageTotal = (state, getters) => key => {
   const data = state.responses[key]
   const total = (data?.pages && data?.pages.total) ? data?.pages.total : state.totals[key] || null
-  console.log('total: ', total)
   return total
 }