add contract detail and query

src/modules/[chain]/cosmwasm/WasmStore.ts

@@ -2,7 +2,7 @@ import { BaseRestClient } from "@/libs/client";
 import { adapter, type AbstractRegistry, type Request } from "@/libs/registry";
 import type { PaginabledAccounts } from "@/types";
 import { defineStore } from "pinia";
-import type { CodeInfo, PaginabledCodeInfos, PaginabledContractHistory, PaginabledContracts, PaginabledStates, WasmParam } from "./types";
+import type { CodeInfo, ContractInfo, PaginabledCodeInfos, PaginabledContractHistory, PaginabledContracts, PaginabledContractStates, WasmParam } from "./types";
 import { toBase64 } from "@cosmjs/encoding";
 import { useBlockchain } from "@/stores";
 
@@ -11,11 +11,11 @@ export interface WasmRequestRegistry extends AbstractRegistry {
     cosmwasm_code_id: Request<CodeInfo>;
     cosmwasm_code_id_contracts: Request<PaginabledContracts>;
     cosmwasm_param: Request<WasmParam>;
-    cosmwasm_contract_address: Request<any>;
+    cosmwasm_contract_address: Request<{address: string, contract_info: ContractInfo}>;
     cosmwasm_contract_address_history: Request<PaginabledContractHistory>;
     cosmwasm_contract_address_raw_query_data: Request<any>;
     cosmwasm_contract_address_smart_query_data: Request<any>;
-    cosmwasm_contract_address_state: Request<PaginabledStates>;
+    cosmwasm_contract_address_state: Request<PaginabledContractStates>;
 }
 
 export const DEFAULT: WasmRequestRegistry = {

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

@@ -2,7 +2,10 @@
 import { useBlockchain, useFormatter } from '@/stores';
 import { useWasmStore } from '../WasmStore';
 import { ref } from 'vue';
-import type { PaginabledCodeInfos, PaginabledContracts } from '../types';
+import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types';
+import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
+import type CustomRadiosVue from '@/plugins/vuetify/@core/components/CustomRadios.vue';
+import type { CustomInputContent } from '@/plugins/vuetify/@core/types';
 
 const props = defineProps(['code_id', 'chain', ])
 
@@ -12,6 +15,71 @@ const wasmStore = useWasmStore()
 wasmStore.wasmClient.getWasmCodeContracts(props.code_id).then(x =>{ 
     response.value = x
 })
+const infoDialog = ref(false)
+const stateDialog = ref(false)
+const queryDialog = ref(false)
+const info = ref({} as ContractInfo)
+const state = ref( {} as PaginabledContractStates)
+const selected = ref("")
+
+function showInfo(address: string) {
+    wasmStore.wasmClient.getWasmContracts(address).then(x => {
+        info.value = x.contract_info
+        infoDialog.value = true
+    })
+}
+function showState(address: string) {
+    wasmStore.wasmClient.getWasmContractStates(address).then(x => {
+        state.value = x
+        stateDialog.value = true
+    })
+}
+function showQuery(address: string) {
+    queryDialog.value = true
+    selected.value = address
+    query.value = ""
+    result.value = ""
+}
+
+function queryContract() {
+    try{
+            
+        if(selectedRadio.value === 'raw') {
+            wasmStore.wasmClient.getWasmContractRawQuery(selected.value, query.value).then(x => {
+                result.value = JSON.stringify(x)
+            }).catch(err => {
+                result.value = JSON.stringify(err)
+            })
+        } else {
+            wasmStore.wasmClient.getWasmContractSmartQuery(selected.value, query.value).then(x => {
+                result.value = JSON.stringify(x)
+            }).catch(err => {
+                result.value = JSON.stringify(err)
+            })
+        }
+
+    } catch(err) {
+        result.value = JSON.stringify(err) // not works for now
+    }
+    // TODO, show error in the result.
+}
+
+const radioContent: CustomInputContent[] = [
+  {
+    title: 'Raw Query',
+    desc: 'Return raw result',
+    value: 'raw',
+  },
+  {
+    title: 'Smart Query',
+    desc: 'Return structure result if possible',
+    value: 'smart',
+  },
+]
+
+const selectedRadio = ref('raw')
+const query = ref("")
+const result = ref("")
 </script>
 <template>
     <div>
@@ -23,10 +91,61 @@ wasmStore.wasmClient.getWasmCodeContracts(props.code_id).then(x =>{
                 </thead>
                 <tbody>
                     <tr v-for="v in response.contracts">
-                        <td>{{ v }}</td><td></td>
+                        <td>{{ v }}</td><td>
+                            <VBtn size="small" @click="showInfo(v)">contract</VBtn> 
+                            <VBtn size="small" @click="showState(v)" class="ml-2">States</VBtn>
+                            <VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn></td>
                     </tr>
                 </tbody>
             </VTable>
         </VCard> 
+        <v-dialog v-model="infoDialog" width="auto">
+            <v-card>
+                <VCardTitle>Contract Detail</VCardTitle>
+                <v-card-text>
+                <DynamicComponent :value="info"/>
+                </v-card-text>
+                <v-card-actions>
+                <v-btn color="primary" block @click="infoDialog = false">Close Dialog</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <v-dialog v-model="stateDialog" width="auto">
+            <v-card>
+                <VCardTitle>Contract States</VCardTitle>
+                <VList>
+                    <VListItem v-for="v in state.models">
+                        <VListItemTitle>
+                            {{ v.value }}
+                        </VListItemTitle>
+                        <VListItemSubtitle>
+                            {{ v.key }}
+                        </VListItemSubtitle>
+                    </VListItem>
+                </VList>
+                <v-card-actions>
+                <v-btn color="primary" block @click="stateDialog = false">Close Dialog</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <v-dialog v-model="queryDialog" width="auto">
+            <v-card>
+                <VCardTitle>Query Contract</VCardTitle>
+                <v-card-text>
+                    <CustomRadios
+                        v-model:selected-radio="selectedRadio"
+                        :radio-content="radioContent"
+                        :grid-column="{ sm: '6', cols: '12' }"
+                    />
+                
+                <VTextarea v-model="query" label="Query String" class="my-2"/>
+                <VTextarea v-model="result" label="Result"/>
+                </v-card-text>
+                <v-card-actions>
+                <v-btn color="primary" @click="queryDialog = false">Close Dialog</v-btn>
+                <v-btn color="success" @click="queryContract()">Query Contract</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
     </div>
 </template>

src/modules/[chain]/cosmwasm/types.ts

@@ -11,6 +11,22 @@ export interface CodeInfo {
     }
 }
 
+export interface ContractInfo {
+    code_id: string,
+    creator: string,
+    admin: string,
+    label: string,
+    created: {
+      block_height: string,
+      tx_index: string
+    },
+    ibc_port_id: string,
+    extension: {
+      type_url: string,
+      value: string
+    }
+  }
+
 export interface WasmParam {
     params: {
         code_upload_access: {
@@ -41,7 +57,7 @@ export interface PaginabledContractHistory extends PaginatedResponse {
     entries: HistoryEntry[]
 }
 
-export interface PaginabledStates extends PaginatedResponse {
+export interface PaginabledContractStates extends PaginatedResponse {
     models: Models[]
 }