From e5857b4a1a8e991691d69c906ef10f01809a9a26 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 11 May 2023 11:03:50 +0800
Subject: [PATCH] integrate tx dialog

---
 chains/mainnet/cosmos.json                  |  1 +
 src/App.vue                                 |  2 ++
 src/components/TxDialog.vue                 | 12 +++++++
 src/modules/[chain]/account/[address].vue   | 21 +++++++++--
 src/modules/[chain]/gov/[proposal_id].vue   |  9 +++--
 src/modules/[chain]/index.vue               |  3 +-
 src/modules/[chain]/staking/[validator].vue | 14 ++++----
 src/modules/[chain]/staking/index.vue       |  8 ++---
 src/stores/index.ts                         |  1 +
 src/stores/useDashboard.ts                  |  3 +-
 src/stores/useFormatter.ts                  |  1 -
 src/stores/useTxDialog.ts                   | 39 +++++++++++++++++++++
 12 files changed, 95 insertions(+), 19 deletions(-)
 create mode 100644 src/components/TxDialog.vue
 create mode 100644 src/stores/useTxDialog.ts

diff --git a/chains/mainnet/cosmos.json b/chains/mainnet/cosmos.json
index 338532b7..e92890f2 100644
--- a/chains/mainnet/cosmos.json
+++ b/chains/mainnet/cosmos.json
@@ -24,6 +24,7 @@
     "coin_type": "118",
     "min_tx_fee": "800",
     "addr_prefix": "cosmos",
+    "registry_name": "cosmoshub",
     "logo": "/logos/cosmos.svg",
     "assets": [{
         "base": "uatom",
diff --git a/src/App.vue b/src/App.vue
index 3460a20b..36fc09ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfi
 import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
 import { themeChange } from 'theme-change';
 import { onMounted } from 'vue';
+import TxDialog from './components/TxDialog.vue';
 const {
   syncInitialLoaderTheme,
   syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme,
@@ -30,6 +31,7 @@ onMounted(() => {
       )}`"
     >
       <RouterView />
+      <TxDialog/>
     </VApp>
   </VLocaleProvider>
 </template>
diff --git a/src/components/TxDialog.vue b/src/components/TxDialog.vue
new file mode 100644
index 00000000..e563afef
--- /dev/null
+++ b/src/components/TxDialog.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useTxDialog } from '@/stores'
+const store = useTxDialog()
+</script>
+<template>
+    <ping-tx-dialog
+      :type="store.type"
+      :sender="store.sender"
+      :endpoint="store.endpoint"
+      :params="store.params"
+    ></ping-tx-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index 07beb5ff..1bd81e36 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore, useTxDialog } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import DonutChart from '@/components/charts/DonutChart.vue';
 import { computed, ref } from '@vue/reactivity';
@@ -17,6 +17,7 @@ const props = defineProps(['address', 'chain']);
 
 const blockchain = useBlockchain();
 const stakingStore = useStakingStore();
+const dialog = useTxDialog();
 const format = useFormatter();
 const account = ref({} as AuthAccount);
 const txs = ref({} as TxResponse[]);
@@ -112,6 +113,10 @@ loadAccount(props.address);
           </VCol>
           <VCol cols="12" md="8">
             <VList class="card-list">
+              <VListItem>
+                <label for="transfer" class="btn btn-primary float-right btn-sm" @click="dialog.open('transfer', {chain_name: blockchain.current?.prettyName})">transfer</label>
+                <label for="send" class="btn btn-primary float-right btn-sm" @click="dialog.open('send', {})">Send</label>
+              </VListItem>
               <VListItem v-for="v in balances">
                 <template #prepend>
                   <VAvatar rounded variant="tonal" size="35" color="info">
@@ -203,7 +208,13 @@ loadAccount(props.address);
 
     <VCard class="my-5">
       <VCardItem>
-        <VCardTitle>Delegations</VCardTitle>
+        <VCardTitle>
+          Delegations
+          <div>
+            <label for="delegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('delegate', {})">Delegate</label>
+            <label for="withdraw" class="btn btn-primary float-right btn-sm" @click="dialog.open('withdraw', {})">Withdraw</label>
+          </div>
+        </VCardTitle>
         <VTable>
           <thead>
             <tr>
@@ -234,7 +245,11 @@ loadAccount(props.address);
                   )
                 }}
               </td>
-              <td>action</td>
+              <td>
+                <label for="delegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('delegate', {validator_address: v.delegation.validator_address})">delegate</label>
+                <label for="redelegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('redelegate', {validator_address: v.delegation.validator_address})">Redelegate</label>
+                <label for="unbond" class="btn btn-primary float-right btn-sm" @click="dialog.open('unbond', {validator_address: v.delegation.validator_address})">Unbond</label>
+              </td>
             </tr>
           </tbody>
         </VTable>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 39d0b75c..c8b829ac 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ObjectElement from '@/components/dynamic/ObjectElement.vue';
-import { useBaseStore, useFormatter, useGovStore, useStakingStore } from '@/stores';
+import { useBaseStore, useFormatter, useGovStore, useStakingStore, useTxDialog } from '@/stores';
 import type { GovProposal, GovVote, PaginabledAccounts, PaginatedProposalDeposit, PaginatedProposalVotes, Pagination } from '@/types';
 import { ref , reactive} from 'vue';
 import Countdown from '@/components/Countdown.vue';
@@ -10,6 +10,8 @@ const props = defineProps(["proposal_id", "chain"]);
 const proposal = ref({} as GovProposal)
 const format = useFormatter()
 const store = useGovStore()
+const dialog = useTxDialog()
+
 store.fetchProposal(props.proposal_id).then((res) => {
     const proposalDetail = reactive(res.proposal)
     // when status under the voting, final_tally_result are no data, should request fetchTally
@@ -181,6 +183,10 @@ const processList = computed(()=>{
                     <p class="absolute inset-x-0 inset-y-0 text-center text-sm text-[#666] dark:text-[#eee] flex items-center justify-center">{{ item.value }}</p>
                 </div>
             </div>
+            <div>
+                <label for="vote" class="btn btn-primary float-right btn-sm mx-1" @click="dialog.open('vote', {proposal_id})">Vote</label>
+                <label for="deposit" class="btn btn-primary float-right btn-sm mx-1" @click="dialog.open('deposit', {proposal_id})">Deposit</label>
+            </div>
         </div>
         <!-- lg:col-span-2 -->
         <!-- lg:flex-[2_2_0%] -->
@@ -284,7 +290,6 @@ const processList = computed(()=>{
                             </p>
                         </VTimelineItem>
                     </VTimeline>
-           
         </div>
     </div>
     
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 730f1ac0..afeb9680 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -3,7 +3,7 @@ import MdEditor from 'md-editor-v3';
 import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
 import { Icon } from '@iconify/vue';
-import { useBlockchain, useFormatter, useWalletStore } from '@/stores';
+import { useBlockchain, useFormatter, useTxDialog, useWalletStore } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
 import { computed } from '@vue/reactivity';
@@ -15,6 +15,7 @@ const blockchain = useBlockchain();
 const store = useIndexModule();
 const walletStore = useWalletStore()
 const format = useFormatter()
+const dialog = useTxDialog()
 
 const coinInfo = computed(() => {
   return store.coinInfo;
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 179ab2a4..4322d181 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -5,6 +5,7 @@ import {
   useFormatter,
   useMintStore,
   useStakingStore,
+  useTxDialog,
 } from '@/stores';
 import { onMounted, computed, ref } from 'vue';
 import { Icon } from '@iconify/vue';
@@ -22,6 +23,7 @@ const props = defineProps(['validator', 'chain']);
 const staking = useStakingStore();
 const blockchain = useBlockchain();
 const format = useFormatter();
+const dialog = useTxDialog();
 
 const validator: string = props.validator;
 
@@ -170,7 +172,7 @@ onMounted(() => {
               <div class="text-sm mb-2">
                 {{ v.description?.identity || '-' }}
               </div>
-              <button class="btn btn-primary btn-sm w-full">Delegate</button>
+              <label for="delegate" class="btn btn-primary btn-sm w-full" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
             </div>
           </div>
           <div class="m-4 text-sm">
@@ -307,12 +309,9 @@ onMounted(() => {
           <VCardTitle>Commissions & Rewards</VCardTitle>
           <VCardItem class="pt-0 pb-0">
             <div class="overflow-auto" style="max-height: 280px">
-              <VCardSubtitle
-                >Commissions
-                <VBtn size="small" class="float-right" variant="text"
-                  >Withdraw</VBtn
-                ></VCardSubtitle
-              >
+              <VCardSubtitle>
+                Commissions
+              </VCardSubtitle>
               <VDivider class="mb-2"></VDivider>
               <VChip
                 v-for="(i, k) in commission"
@@ -337,6 +336,7 @@ onMounted(() => {
                 {{ format.formatToken2(i) }}
               </VChip>
             </div>
+            <label for="withdraw_commission" class="btn btn-primary mt-2 w-full btn-sm" @click="dialog.open('withdraw_commission', {validator_address: v.operator_address})">Withdraw</label>
           </VCardItem>
         </VCard>
       </VCol>
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 5d5dc434..0c63c985 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { useBaseStore, useFormatter, useStakingStore } from '@/stores';
-import { toBase64, toHex } from '@cosmjs/encoding';
+import { useBaseStore, useFormatter, useStakingStore, useTxDialog } from '@/stores';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref, type DebuggerEvent } from 'vue';
 import { Icon } from '@iconify/vue';
 import type { Key, Validator } from '@/types';
+
 const staking = useStakingStore();
 const format = useFormatter();
+const dialog = useTxDialog()
 
 const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
 const avatars = ref(cache || {});
@@ -22,7 +23,6 @@ onMounted(() => {
 });
 
 async function fetchChange() {
-  console.log('fetch changes');
   let page = 0;
 
   let height = Number(base.latest?.block?.header?.height || 0);
@@ -309,7 +309,7 @@ const rank = function (position: number) {
               </td>
               <!-- 👉 Action -->
               <td>
-                {{ 2 }}
+                <label for="delegate" class="btn btn-xs bg-primary" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
               </td>
             </tr>
           </tbody>
diff --git a/src/stores/index.ts b/src/stores/index.ts
index b204e90e..94002b40 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -10,3 +10,4 @@ export * from './useStakingStore';
 export * from './useDistributionStore';
 export * from './useParamsStore';
 export * from './useWalletStore';
+export * from './useTxDialog';
diff --git a/src/stores/useDashboard.ts b/src/stores/useDashboard.ts
index e77c32eb..33c7e015 100644
--- a/src/stores/useDashboard.ts
+++ b/src/stores/useDashboard.ts
@@ -93,6 +93,7 @@ export interface LocalConfig {
   min_tx_fee: string;
   rpc: string[] | Endpoint[];
   sdk_version: string;
+  registry_name?: string;
 }
 
 function apiConverter(api: any[]) {
@@ -129,7 +130,7 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
   conf.bech32Prefix = lc.addr_prefix;
   conf.chainName = lc.chain_name;
   conf.coinType = lc.coin_type;
-  conf.prettyName = lc.chain_name;
+  conf.prettyName = lc.registry_name || lc.chain_name;
   conf.endpoints = {
     rest: apiConverter(lc.api),
     rpc: apiConverter(lc.rpc),
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index 065710ed..1083d89a 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -75,7 +75,6 @@ export const useFormatter = defineStore('formatter', {
     },
     price(denom: string, currency = "usd") {
       const info = this.priceInfo(denom);
-      console.log("info", info, denom)
       return info? info[currency]||0 : 0
     },
     priceChanges(denom: string, currency="usd"): number {
diff --git a/src/stores/useTxDialog.ts b/src/stores/useTxDialog.ts
new file mode 100644
index 00000000..08d413ec
--- /dev/null
+++ b/src/stores/useTxDialog.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia';
+import { useWalletStore } from './useWalletStore';
+import { useBlockchain } from './useBlockchain';
+
+export const useTxDialog = defineStore('txDialogStore', {
+  state: () => {
+    return {
+        sender: "",
+        type: "send",
+        endpoint: "",
+        params: "",
+    };
+  },
+  getters: {
+    walletAddress() {
+        return useWalletStore().currentAddress
+    },
+    currentEndpoint() {
+        return useBlockchain().endpoint?.address
+    }
+  },
+  actions: {
+    setParams(param: any) {
+        this.params = JSON.stringify(param)
+    },
+    openWithArgument(type: string, sender: string, endpoint: string, param: any) {
+        this.type = type;
+        this.sender = sender;
+        this.endpoint = endpoint;
+        this.params = JSON.stringify(param)
+    },
+    open(type: string, param: any) {
+        this.type = type;
+        this.sender = this.walletAddress;
+        this.endpoint = this.currentEndpoint || "";
+        this.params = JSON.stringify(param)
+    }
+  },
+});