feat: making call arguments collapsible (#688)

aeternity · Mar 25, 2024 · e6f837e · e6f837e
1 parent 48beaa4
commit e6f837e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
@@ -124,6 +124,7 @@ defineProps({
     color: var(--color-blue);
     text-decoration: none;
     font-weight: 400;
+    border: 0;
 
     background: transparent;
     padding: 0;

diff --git a/src/components/TransactionTypeTableContractCallTx.vue b/src/components/TransactionTypeTableContractCallTx.vue
@@ -70,7 +70,23 @@
           </hint-tooltip>
         </th>
         <td class="transaction-type-panel-contract-call-tx__data">
-          {{ formatNullable(transactionData.arguments) }}
+          <template v-if="isArgumentsLong">
+            <div v-show="isCollapsed">
+              {{ shortArguments }}
+            </div>
+            <div v-show="!isCollapsed">
+              {{ formatNullable(transactionData.arguments) }}
+            </div>
+            <app-button
+              v-show="isArgumentsLong"
+              variant="link"
+              @click="toggleCollapse">
+              {{ isCollapsed ? 'Show more' : 'Show less' }}
+            </app-button>
+          </template>
+          <template v-else>
+            {{ formatNullable(transactionData.arguments) }}
+          </template>
         </td>
       </tr>
       <tr class="transaction-type-panel-contract-call-tx__row">
@@ -133,6 +149,14 @@ import TransactionTypeStatusLabel from '@/components/TransactionTypeStatusLabel'
 import { formatAePrice, formatAettosToAe, formatNullable } from '@/utils/format'
 import AppChip from '@/components/AppChip'
 
+const isCollapsed = ref(true)
+const isArgumentsLong = computed(() => JSON.stringify(props.transactionData.arguments).length > 300)
+const shortArguments = computed(() => isArgumentsLong.value ? JSON.stringify(props.transactionData.arguments).substr(0, 300) + '...' : props.transactionData.arguments)
+
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+
 const props = defineProps({
   transactionData: {
     required: true,