cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

integrate tx dialog

Browse Source
This commit is contained in:
liangping 2023-05-11 11:03:50 +08:00
parent 009ae1c5e6
commit e5857b4a1a
12 changed files with 95 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
chains/mainnet/cosmos.json
View File

@ -24,6 +24,7 @@
"coin_type": "118",
"min_tx_fee": "800",
"addr_prefix": "cosmos",
"registry_name": "cosmoshub",
"logo": "/logos/cosmos.svg",
"assets": [{
"base": "uatom",

2
src/App.vue
View File

@ -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>

12
src/components/TxDialog.vue Normal file
View File

@ -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>

21
src/modules/[chain]/account/[address].vue
View File

@ -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>

9
src/modules/[chain]/gov/[proposal_id].vue
View File

@ -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>

3
src/modules/[chain]/index.vue
View File

@ -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;

14
src/modules/[chain]/staking/[validator].vue
View File

@ -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>

8
src/modules/[chain]/staking/index.vue
View File

@ -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>

1
src/stores/index.ts
View File

@ -10,3 +10,4 @@ export * from './useStakingStore';
export * from './useDistributionStore';
export * from './useParamsStore';
export * from './useWalletStore';
export * from './useTxDialog';

3
src/stores/useDashboard.ts
View File

@ -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),

1
src/stores/useFormatter.ts
View File

@ -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 {

39
src/stores/useTxDialog.ts Normal file
View File

@ -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)
}
},
});