@mictonode/widget 0.3.9

package/lib/components/TxDialog/messages/Deposit.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { PropType, computed, onMounted, ref } from 'vue';
+import { Coin, CoinMetadata } from '../../../utils/type';
+import { getStakingParam } from '../../../utils/http';
+import { TokenUnitConverter } from '../../../utils/TokenUnitConverter';
+
+const props = defineProps({
+    endpoint: {type: String, required: true },
+    sender: {type: String, required: true},
+    balances: Object as PropType<Coin[]>,
+    metadata: Object as PropType<Record<string, CoinMetadata>>,
+    params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+const denom = ref("")
+const amount = ref("")
+const amountDenom = ref("")
+
+const available = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata)
+    const base = props.balances?.find(x => x.denom === denom.value) || { amount: "0", denom: denom.value }
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value)
+    }
+})
+
+const msgs = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata)
+    return [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgDeposit',
+        value: {
+          depositor: props.sender,
+          proposalId: params.value.proposal_id,
+          amount: [convert.displayToBase(denom.value, {
+            amount: String(amount.value),
+            denom: amountDenom.value
+          })],
+        },
+      }]
+})
+
+const units = computed(() => {
+    if(!props.metadata || !props.metadata[denom.value]) {
+        amountDenom.value = denom.value
+        return [{denom: denom.value, exponent: 0, aliases: []}]
+    }
+    const list = props.metadata[denom.value].denom_units.sort((a, b) => b.exponent - a.exponent)
+    if(list.length > 0) amountDenom.value = list[0].denom
+    return list
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if(!params.value.proposal_id) {
+        ok = false
+        error = "Proposal id is empty"
+    }
+    if(!(Number(amount.value) > 0)) {
+        ok = false
+        error = "Amount should be great than 0"
+    }
+    return { ok, error }
+})
+
+function initial() {
+    getStakingParam(props.endpoint).then(x => {
+        denom.value = x.params.bond_denom
+    })
+}
+
+defineExpose({msgs, isValid, initial})
+</script>
+<template>
+    <div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Sender</span>
+            </label>
+            <input :value="sender" type="text" class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Amount</span>
+                <span>{{ available?.display.amount }}{{ available?.display.denom }}</span>
+            </label>
+            <label class="input-group">
+                <input v-model="amount" type="number" :placeholder="`Available: ${available?.display.amount}`" class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white" />
+                <select v-model="amountDenom" class="select select-bordered dark:text-white">
+                    <option v-for="u in units">{{ u.denom }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/messages/Redelegate.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
+import { getActiveValidators, getDelegations, getInactiveValidators, getStakingParam } from '../../../utils/http'
+import { decimal2percent } from '../../../utils/format'
+import { Coin, CoinMetadata } from '../../../utils/type';
+import { TokenUnitConverter } from '../../../utils/TokenUnitConverter';
+import { MsgBeginRedelegate } from "@initia/initia.proto/initia/mstaking/v1/tx"
+const props = defineProps({
+    endpoint: {type: String, required: true },
+    sender: {type: String, required: true},
+    balances: Object as PropType<Coin[]>,
+    metadata: Object as PropType<Record<string, CoinMetadata>>,
+    params: String,
+});
+const params = computed(() => JSON.parse(props.params || "{}"))
+
+const validator = ref('')
+
+const activeValidators = ref([])
+const inactiveValidators = ref([])
+const stakingDenom = ref("")
+const amount = ref("")
+const amountDenom = ref("")
+const delegation = ref({} as Coin)
+const error = ref("")
+
+const sourceValidator = computed(() => {
+    // @ts-ignore
+    const v = activeValidators.value.find(v => v.operator_address === params.validator_address)
+    if(v) {
+        // @ts-ignore
+        return `${v.description.moniker} (${decimal2percent(v.commission.commission_rates.rate)}%)`
+    }
+    return params.value.validator_address
+})
+
+function isInitiaChain(endpoint: string): boolean {
+    return props.endpoint.indexOf("init") !== -1;
+}
+
+const msgs = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata);
+    const baseAmount = convert.displayToBase(stakingDenom.value, {
+        amount: String(amount.value),
+        denom: amountDenom.value,
+    });
+
+    if (isInitiaChain(props.endpoint)) {
+        return [
+            {
+                typeUrl: '/initia.mstaking.v1.MsgBeginRedelegate',
+                value: MsgBeginRedelegate.fromPartial({
+                    delegatorAddress: props.sender,
+                    validatorSrcAddress: params.value.validator_address,
+                    validatorDstAddress: validator.value,
+                    amount: [baseAmount],
+                }),
+            },
+        ];
+    } else {
+        return [
+            {
+                typeUrl: '/cosmos.staking.v1beta1.MsgBeginRedelegate',
+                value: {
+                    delegatorAddress: props.sender,
+                    validatorSrcAddress: params.value.validator_address,
+                    validatorDstAddress: validator.value,
+                    amount: baseAmount,
+                },
+            },
+        ];
+    }
+});
+
+const list: ComputedRef<{
+    operator_address: string, 
+    description: {moniker: string}
+    commission: { commission_rates: {rate: string}}
+    status: string
+}[]> = computed(() => {
+    return [...activeValidators.value, ...inactiveValidators.value]
+})
+
+const available = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata)
+    const base = delegation.value || { amount: "0", denom: stakingDenom.value }
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value)
+    }
+})
+
+const units = computed(() => {
+    if(!props.metadata || !props.metadata[stakingDenom.value]) {
+        amountDenom.value = stakingDenom.value
+        return [{denom: stakingDenom.value, exponent: 0, aliases: []}]
+    }
+    const list = props.metadata[stakingDenom.value].denom_units.sort((a, b) => b.exponent - a.exponent)
+    if(list.length > 0) amountDenom.value = list[0].denom
+    return list
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if(!validator.value) {
+        ok = false
+        error = "Validator is empty"
+    }
+    if(!validator.value) {
+        ok = false
+        error = "Validator is empty"
+    }
+    if(!(Number(amount.value) > 0)) {
+        ok = false
+        error = "Amount should be great than 0"
+    }
+    return { ok, error }
+})
+
+
+function initial() {
+    getDelegations(props.endpoint, params.value.validator_address, props.sender).then(x => {
+        const balance = x.delegation_response.balance;
+        if (isInitiaChain(props.endpoint)) {
+            delegation.value = Array.isArray(balance) ? balance.find(b => b.denom === 'uinit') || { amount: "0", denom: "uinit" } : balance;
+        } else {
+            delegation.value = Array.isArray(balance) ? balance[0] || { amount: "0", denom: stakingDenom.value } : balance;
+        }
+    }).catch(err => {
+        error.value = err
+    })
+
+    getStakingParam(props.endpoint).then((x) => {
+        stakingDenom.value = x.params.bond_denom || "";
+        // unbondingTime.value = x.params.unbonding_time;
+    });
+
+    getActiveValidators(props.endpoint).then(x => {
+        activeValidators.value = x.validators
+        validator.value = x.validators.find(v => v.description.identity === '6783E9F948541962')?.operator_address
+    })   
+}
+
+defineExpose({msgs, isValid, initial})
+</script>
+<template>
+    <div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Sender</span>
+            </label>
+            <input :value="sender" type="text" class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Source Validator</span>
+            </label>
+            <input :value="sourceValidator" type="text" class="input border border-gray-300 dark:border-gray-600 dark:text-white" readonly/>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Destination Validator</span>
+            </label>
+            <select v-model="validator" class="select select-bordered dark:text-white">
+                <option value="">Select a validator</option>
+                <option v-for="v in list" :value="v.operator_address">
+                    {{ v.description.moniker }} ({{ decimal2percent(v.commission.commission_rates.rate) }}%)
+                    <span v-if="v.status !== 'BOND_STATUS_BONDED'">x</span>
+                </option>
+            </select>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Amount</span>
+                <span>{{ available?.display.amount }}{{ available?.display.denom }}</span>
+            </label>
+            <label class="input-group">
+                <input v-model="amount" type="number" :placeholder="`Available: ${available?.display.amount}${available?.display.denom}`" class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white" />
+                <select v-model="amountDenom" class="select select-bordered dark:text-white">
+                    <option v-for="u in units">{{ u.denom }}</option>
+                </select>
+            </label>
+        </div>
+        <div class="text-error">
+            {{ error }}
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/messages/Send.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { PropType, computed, onMounted, ref } from 'vue';
+import {
+    getBalance,
+} from '../../../utils/http';
+import { Coin, CoinMetadata } from '../../../utils/type';
+import { TokenUnitConverter } from '../../../utils/TokenUnitConverter';
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    balances: Object as PropType<Coin[]>,
+    metadata: Object as PropType<Record<string, CoinMetadata>>,
+    params: String,
+});
+
+const amount = ref('');
+const recipient = ref('');
+const denom = ref('');
+const amountDenom = ref('')
+
+const msgs = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata)
+    return [
+        {
+            typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+            value: {
+                fromAddress: props.sender,
+                toAddress: recipient.value,
+                amount: [
+                    convert.displayToBase(denom.value, {
+                        amount: String(amount.value),
+                        denom: amountDenom.value
+                    })
+                ],
+            },
+        },
+    ];
+});
+
+const available = computed(() => {
+    const base  = (
+        props.balances?.find((x) => x.denom === denom.value) || {
+            amount: '0',
+            denom: '-',
+        }
+    )
+    const convert = new TokenUnitConverter(props.metadata)
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value)
+    };
+});
+
+const showBalances = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata)
+    return props.balances?.map(b => ({
+        base: b,
+        display: convert.baseToDisplay(b)
+    })) || []
+})
+
+const units = computed(() => {
+    if(!props.metadata || !props.metadata[denom.value]) {
+        amountDenom.value = denom.value
+        return [{denom: denom.value, exponent: 0, aliases: []}]
+    }
+    const list = props.metadata[denom.value].denom_units.sort((a, b) => b.exponent - a.exponent)
+    if(list.length > 0) amountDenom.value = list[0].denom
+    return list
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if(!recipient.value) {
+        ok = false
+        error = "Recipient is empty"
+    }
+    if(!(Number(amount.value) > 0)) {
+        ok = false
+        error = "Amount should be great than 0"
+    }
+    return { ok, error }
+})
+
+
+function initial() {
+    denom.value = props.params?.fees?.denom || '';
+    // getStakingParam(props.endpoint).then((x) => {
+    //     denom.value = x.params?.bond_denom;
+    // });
+}
+
+function formatDenom(v: any) {
+    return String(v).substring(0, 10)
+}
+
+defineExpose({msgs, isValid, initial})
+</script>
+<template>
+    <div class="dark:text-gray-400">
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Sender</span>
+            </label>
+            <input :value="sender" type="text" class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Balances</span>
+            </label>
+            <select v-model="denom" class="select select-bordered dark:text-white">
+                <option value="">Select a token</option>
+                <option v-for="{base, display} in showBalances" :value="base.denom">
+                    {{ display.amount }} {{ display.denom }}
+                </option>
+            </select>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Recipient</span>
+            </label>
+            <input
+                v-model="recipient"
+                type="text"
+                class="input border border-gray-300 dark:border-gray-600 dark:text-white"
+            />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Amount</span>
+                <span>{{ available.display.amount }} {{ formatDenom(available.display.denom) }}</span>
+            </label>
+            <label class="input-group">
+                <input v-model="amount" type="number" :placeholder="`Available: ${available?.display.amount}`" class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white" />
+                <select v-model="amountDenom" class="select select-bordered dark:text-white">
+                    <option v-for="u in units" :value="u.denom">{{ formatDenom(u.denom) }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/messages/Transfer.vue

@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
+import { getBalance, getDenomTraces } from '../../../utils/http';
+import { Coin, CoinMetadata } from '../../../utils/type';
+import ChainRegistryClient from '@ping-pub/chain-registry-client';
+import { IBCPath } from '@ping-pub/chain-registry-client/dist/types';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import { TokenUnitConverter } from '../../../utils/TokenUnitConverter';
+dayjs.extend(utc);
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    balances: Object as PropType<Coin[]>,
+    metadata: Object as PropType<Record<string, CoinMetadata>>,
+    params: String,
+});
+const params = computed(() => JSON.parse(props.params || "{}"))
+const chainName = params.value.chain_name;
+
+const amount = ref('');
+const amountDenom = ref('');
+const recipient = ref('');
+const denom = ref('');
+const dest = ref('');
+const chains = ref([] as IBCPath[]);
+const sourceChain = ref(
+    {} as { channel_id: string; port_id: string } | undefined
+);
+const ibcDenomTraces = ref(
+    {} as Record<string, { path: string; base_denom: string }>
+);
+
+const client = new ChainRegistryClient();
+
+const msgs = computed(() => {
+    const timeout = dayjs().add(1, 'hour');
+    const convert = new TokenUnitConverter(props.metadata);
+    return [
+        {
+            typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
+            value: {
+                sourcePort: sourceChain.value?.port_id || '',
+                sourceChannel: sourceChain.value?.channel_id || '',
+                token: convert.displayToBase(denom.value, {
+                    amount: String(amount.value),
+                    denom: amountDenom.value,
+                }),
+                sender: props.sender,
+                receiver: recipient.value,
+                timeoutTimestamp: String(timeout.utc().valueOf() * 1000000),
+            },
+        },
+    ];
+});
+const destDisabled = computed(() => {
+    const disable = denom.value.startsWith('ibc/');
+    if (disable) dest.value = '';
+    return disable;
+});
+
+function selectDest() {
+    client.fetchIBCPathInfo(dest.value).then((info) => {
+        if (info.chain_1.chain_name === chainName) {
+            sourceChain.value = info.channels.find(
+                (x) => x.chain_1.port_id === 'transfer'
+            )?.chain_1;
+        } else {
+            sourceChain.value = info.channels.find(
+                (x) => x.chain_2.port_id === 'transfer'
+            )?.chain_2;
+        }
+    });
+}
+
+function updateIBCToken() {
+    const hash = String(denom.value).replace('ibc/', '');
+    if (!denom.value.startsWith('ibc/')) return;
+    if (ibcDenomTraces.value[denom.value]) {
+        const trace = ibcDenomTraces.value[denom.value];
+        const split = trace.path.split('/');
+        sourceChain.value = {
+            channel_id: split[1],
+            port_id: split[0],
+        };
+    } else {
+        getDenomTraces(props.endpoint, hash).then((trace) => {
+            ibcDenomTraces.value[denom.value] = trace.denom_trace;
+            const split = trace.denom_trace.path.split('/');
+            sourceChain.value = {
+                channel_id: split[1],
+                port_id: split[0],
+            };
+        });
+    }
+}
+
+const available = computed(() => {
+    const base = props.balances?.find((x) => x.denom === denom.value) || {
+        amount: '0',
+        denom: '-',
+    };
+    const convert = new TokenUnitConverter(props.metadata);
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value),
+    };
+});
+
+const showBalances = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata);
+    return (
+        props.balances?.map((b) => ({
+            base: b,
+            display: convert.baseToDisplay(b),
+        })) || []
+    );
+});
+
+const units = computed(() => {
+    if (!props.metadata || !props.metadata[denom.value]) {
+        amountDenom.value = denom.value;
+        return [{ denom: denom.value, exponent: 0, aliases: [] }];
+    }
+    const list = props.metadata[denom.value].denom_units.sort(
+        (a, b) => b.exponent - a.exponent
+    );
+    if (list.length > 0) amountDenom.value = list[0].denom;
+    return list;
+});
+
+const isValid = computed(() => {
+    let ok = true;
+    let error = '';
+    if (!sourceChain.value?.channel_id || !sourceChain.value.port_id) {
+        ok = false;
+        error = 'Destination chain is empty';
+    }
+    if (!recipient.value) {
+        ok = false;
+        error = 'Recipient is empty';
+    }
+    if (!(Number(amount.value) > 0)) {
+        ok = false;
+        error = 'Amount should be great than 0';
+    }
+    return { ok, error };
+});
+
+function initial() {
+    client.fetchIBCPaths().then((paths) => {
+        chains.value = paths.filter((x) => x.path.indexOf(chainName) > -1);
+    });
+
+    getStakingParam(props.endpoint).then((x) => {
+        denom.value = x.params.bond_denom;
+    });
+}
+
+function formatDenom(v: any) {
+    return String(v).substring(0, 10)
+}
+
+defineExpose({ msgs, isValid, initial });
+</script>
+<template>
+    <div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Sender</span>
+            </label>
+            <input
+                :value="sender"
+                type="text"
+                class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600"
+            />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Balances</span>
+            </label>
+            <select
+                v-model="denom"
+                class="select select-bordered dark:text-white"
+                @change="updateIBCToken"
+            >
+                <option value="">Select a token</option>
+                <option
+                    v-for="{ base, display } in showBalances"
+                    :value="base.denom"
+                >
+                    {{ display.amount }} {{ formatDenom(display.denom) }}
+                </option>
+            </select>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Destination</span>
+                <span v-if="sourceChain" class="text-xs"
+                    >{{ sourceChain.channel_id }}/{{
+                        sourceChain.port_id
+                    }}</span
+                >
+            </label>
+            <select
+                v-model="dest"
+                class="select select-bordered capitalize dark:text-white"
+                @change="selectDest"
+                :disabled="destDisabled"
+            >
+                <option value="">Select Destination</option>
+                <option v-for="v in chains" :value="v.path">
+                    {{ v.from === params.chain_name ? v.to : v.from }}
+                </option>
+            </select>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Recipient</span>
+            </label>
+            <input
+                v-model="recipient"
+                type="text"
+                class="input border border-gray-300 dark:border-gray-600 dark:text-white"
+            />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Amount</span>
+                <span>
+                    {{ available?.display.amount}} {{ formatDenom(available?.display.denom) }}
+                </span>
+            </label>
+            <label class="input-group">
+                <input
+                    v-model="amount"
+                    type="number"
+                    :placeholder="`Available: ${available?.display.amount}`"
+                    class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white"
+                />
+                <select v-model="amountDenom" class="select select-bordered dark:text-white">
+                    <option v-for="u in units" :value="u.denom">{{ formatDenom(u.denom) }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>