forked from cerc-io/cosmos-explorer
integrate tx dialog
This commit is contained in:
parent
009ae1c5e6
commit
e5857b4a1a
@ -24,6 +24,7 @@
|
||||
"coin_type": "118",
|
||||
"min_tx_fee": "800",
|
||||
"addr_prefix": "cosmos",
|
||||
"registry_name": "cosmoshub",
|
||||
"logo": "/logos/cosmos.svg",
|
||||
"assets": [{
|
||||
"base": "uatom",
|
||||
|
@ -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
12
src/components/TxDialog.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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,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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -10,3 +10,4 @@ export * from './useStakingStore';
|
||||
export * from './useDistributionStore';
|
||||
export * from './useParamsStore';
|
||||
export * from './useWalletStore';
|
||||
export * from './useTxDialog';
|
||||
|
@ -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),
|
||||
|
@ -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
39
src/stores/useTxDialog.ts
Normal 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)
|
||||
}
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue
Block a user