feat: add txs view for wasm contracts

src/components/PaginationBar.vue

@@ -14,8 +14,8 @@ const pages = computed(() => {
     if (total > 0 && props.limit && total > props.limit) {
         let page = 0
         while (true) {
-            if (page * props.limit > total) break
             page += 1
+            if (page * props.limit > total) break
             if (total / props.limit > 10 && page > showSize && page < (total / props.limit - showSize + 1)) {
                 if (!(page >= current.value - 1 && page <= current.value + 1)) {
                     continue

src/modules/[chain]/cosmwasm/[code_id]/contracts.vue

@@ -7,7 +7,7 @@ import type {
   PaginabledContracts,
 } from '../types';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
-import { useBankStore, useBlockchain, useFormatter, useTxDialog } from '@/stores';
+import { useBlockchain, useFormatter, useTxDialog } from '@/stores';
 import PaginationBar from '@/components/PaginationBar.vue';
 import { PageRequest, type PaginatedBalances } from '@/types';
 
@@ -159,11 +159,17 @@ const result = ref('');
                 </label>
                 <label
                   for="wasm_execute_contract"
-                  class="btn btn-primary btn-xs text-xs"
+                  class="btn btn-primary btn-xs text-xs mr-2"
                   @click="dialog.open('wasm_execute_contract', { contract: v })"
                 >
                 {{ $t('cosmwasm.btn_execute') }}
                 </label>
+                <RouterLink
+                  :to="`transactions?contract=${v}`"
+                  class="btn btn-primary btn-xs text-xs"
+                >
+                {{ $t('cosmwasm.btn_transactions') }}
+                </RouterLink>
               </td>
             </tr>
           </tbody>

src/modules/[chain]/cosmwasm/[code_id]/transactions.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import PaginationBar from '@/components/PaginationBar.vue';
+import { useBlockchain, useFormatter } from '@/stores';
+import { PageRequest, type PaginatedTxs } from '@/types';
+import { Icon } from '@iconify/vue';
+import { onMounted, ref } from 'vue';
+import { useWasmStore } from '../WasmStore';
+import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
+
+const chainStore = useBlockchain();
+const format = useFormatter();
+const wasmStore = useWasmStore();
+const address = "osmo1yg8930mj8pk288lmkjex0qz85mj8wgtns5uzwyn2hs25pwdnw42sf745wc"
+const page = ref(new PageRequest())
+
+const txs = ref<PaginatedTxs>({ txs: [], tx_responses: [], pagination: { total: "0" } });
+const info = ref<any>(null);
+
+onMounted(() => {
+    wasmStore.wasmClient.getWasmContracts(address).then((x) => {
+        info.value = x.contract_info;
+    });
+    chainStore.rpc.getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value).then(res => {
+        txs.value = res
+    })
+})
+
+function pageload(pageNum: number) {
+    page.value.setPage(pageNum)
+    chainStore.rpc.getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value).then(res => {
+        txs.value = res
+    })
+}
+</script>
+<template>
+    <div>
+        <h2 class="card-title truncate w-full">
+            <RouterLink to="contracts"><span class="btn btn-sm"> &lt; </span> </RouterLink>{{ $t('cosmwasm.contract_detail') }} 
+        </h2>
+        <DynamicComponent :value="info" />
+        
+        <h2 class="card-title truncate w-full mt-4">Transactions</h2>
+        <table class="table">
+            <thead>
+                <tr>
+                    <td> {{ $t('ibc.height') }}</td>
+                    <td>{{ $t('ibc.txhash') }}</td>
+                    <td> {{ $t('ibc.messages') }}</td>
+                    <td>{{ $t('ibc.time') }}</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="resp in txs?.tx_responses">
+                    <td>{{ resp.height }}</td>
+                    <td>
+                        <div class="text-xs truncate text-primary dark:invert">
+                            <RouterLink :to="`/${chainStore.chainName}/tx/${resp.txhash}`">{{ resp.txhash }}</RouterLink>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex">
+                            {{ format.messages(resp.tx.body.messages) }}
+                            <Icon v-if="resp.code === 0" icon="mdi-check" class="text-success text-lg" />
+                            <Icon v-else icon="mdi-multiply" class="text-error text-lg" />
+                        </div>
+                    </td>
+                    <td>{{ format.toLocaleDate(resp.timestamp) }}</td>
+                </tr>
+            </tbody>
+        </table>
+        <PaginationBar :limit="page.limit" :total="txs.pagination?.total" :callback="pageload" />
+    </div>
+</template>

src/plugins/i18n/locales/en.json

@@ -113,6 +113,7 @@
     "btn_fees": "Fees",
     "btn_query": "Query",
     "btn_execute": "Execute",
+    "btn_transactions": "Txs",
     "instantiate_contract": "Instantiate Contract",
     "contract_detail": "Contract Detail",
     "contract_balances": "Contract Balances",