@mictonode/widget 0.3.9

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

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { PropType, computed, onMounted, ref } from 'vue';
+import { getDelegations } from '../../../utils/http'
+import { Coin, CoinMetadata } from '../../../utils/type';
+import { TokenUnitConverter } from '../../../utils/TokenUnitConverter';
+import { MsgUndelegate } from "@initia/initia.proto/initia/mstaking/v1/tx"
+
+const props = defineProps({
+    endpoint: {type: String, required: true },
+    sender: {type: String, required: true},
+    metadata: Object as PropType<Record<string, CoinMetadata>>,
+    params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+const delegation = ref({} as {balance: Coin, delegation: {delegator_address: string, shares: string, validator_address: string}})
+const amount = ref("")
+const amountDenom = ref("")
+const error = ref("")
+
+function isInitiaChain(endpoint: string): boolean {
+    return props.endpoint.indexOf("init") !== -1;
+}
+
+const msgs = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata);
+    const baseAmount = convert.displayToBase(delegation.value.balance?.denom, {
+        amount: String(amount.value),
+        denom: amountDenom.value,
+    });
+
+    if (isInitiaChain(props.endpoint)) {
+        return [
+            {
+                typeUrl: '/initia.mstaking.v1.MsgUndelegate',
+                value: MsgUndelegate.fromPartial({
+                    delegatorAddress: props.sender,
+                    validatorAddress: params.value.validator_address,
+                    amount: [baseAmount],
+                }),
+            },
+        ];
+    } else {
+        return [
+            {
+                typeUrl: '/cosmos.staking.v1beta1.MsgUndelegate',
+                value: {
+                    delegatorAddress: props.sender,
+                    validatorAddress: params.value.validator_address,
+                    amount: baseAmount,
+                },
+            },
+        ];
+    }
+});
+
+const units = computed(() => {
+    const denom = delegation.value.balance?.denom
+    if(!props.metadata || !props.metadata[denom]) {
+        amountDenom.value = denom
+        return [{denom: denom, exponent: 0, aliases: []}]
+    }
+    const list = props.metadata[denom].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(!props.sender) {
+        ok = false
+        error = "Sender is empty"
+    }
+    if(!params.value.validator_address) {
+        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 = {
+                balance: Array.isArray(balance) ? balance.find(b => b.denom === 'uinit') || { amount: "0", denom: "uinit" } : balance,
+                delegation: { delegator_address: props.sender, shares: "", validator_address: params.value.validator_address }
+            };
+        } else {
+            delegation.value = {
+                balance: Array.isArray(balance) ? balance[0] || { amount: "0", denom: amountDenom.value } : balance,
+                delegation: { delegator_address: props.sender, shares: "", validator_address: params.value.validator_address }
+            };
+        }
+    }).catch(err => {
+        error.value = err
+    })  
+}
+
+const available = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata);
+    const base = delegation.value?.balance || {amount: "", denom: ""}
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value),
+    };
+});
+
+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>
+            </label>
+            <label class="input-group">
+                <input v-model="amount" type="number" :placeholder="`Avaiable: ${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 class="text-error">{{ error }}</div>
+    </div>
+</template>

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

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { PropType, computed, ref } from 'vue';
+import { CoinMetadata } from '../../../utils/type';
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+const option = ref("1")
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmos.gov.v1beta1.MsgVote',
+        value: {
+            voter: props.sender,
+            proposalId: params.value.proposal_id,
+            option: Number(option.value),
+        },
+    }]
+})
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if(!params.value.proposal_id) {
+        ok = false
+        error = "Proposal id is empty"
+    }
+    if(!option.value) {
+        ok = false
+        error = "Vote is empty"
+    }
+    return { ok, error }
+})
+
+function initial() {
+}
+
+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">Option</span>
+            </label>
+            <div class="flex">
+                <input v-model="option" type="radio" id="yes" value="1" class="radio radio-success mx-2"/><label for="yes"> Yes</label> 
+                <input v-model="option" type="radio" id="no" value="3" class="radio radio-error mx-2" /><label for="no"> No</label> 
+                <input v-model="option" type="radio" id="veto" value="4" class="radio radio-error mx-2" /><label for="veto"> No With Veto</label> 
+                <input v-model="option" type="radio" id="abstain" value="2" class="radio radio-dark mx-2" /><label for="abstain"> Abstain</label> 
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { getDelegateRewards } from '../../../utils/http'
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    params: String,
+});
+
+const rewards = ref([] as { reward: { amount: string, denom: string }, validator_address: string }[])
+
+const msgs = computed(() => {
+    return rewards.value.map(x => {
+        return {
+            typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+            value: {
+                delegatorAddress: props.sender,
+                validatorAddress: x.validator_address,
+            },
+        }
+    })
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if (!props.sender) {
+        ok = false
+        error = "Sender is empty"
+    }
+    if (rewards.value.length === 0) {
+        ok = false
+        error = "No delegation found"
+    }
+    return { ok, error }
+})
+
+function initial() {
+    getDelegateRewards(props.endpoint, props.sender).then(x => {
+        rewards.value = x.rewards
+    })
+}
+
+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>
+</template>

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

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getDelegateRewards } from '../../../utils/http';
+
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  sender: { type: String, required: true },
+  params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+const rewards = ref([] as { reward: { amount: string, denom: string }, validator_address: string }[])
+
+const msgs = computed(() => {
+  const delegations = rewards.value?.map(x => {
+    return {
+      typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+      value: {
+        delegatorAddress: props.sender,
+        validatorAddress: x.validator_address,
+      },
+    }
+  })
+  return [
+    ...delegations,
+    {
+      typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission',
+      value: {
+        validatorAddress: params.value.validator_address,
+      },
+    },
+  ]
+})
+
+const isValid = computed(() => {
+  let ok = true
+  let error = ""
+  if (!props.sender) {
+    ok = false
+    error = "Sender is empty"
+  }
+  if (!params.value.validator_address) {
+    ok = false
+    error = "Validator is empty"
+  }
+  if (!rewards.value || rewards.value.length < 0) {
+    ok = false
+    error = "No delegation found"
+  }
+  if (rewards.value.findIndex(x => x.validator_address === params.value.validator_address) === -1) {
+    ok = false
+    error = "You are not the validator!"
+  }
+  return { ok, error }
+})
+
+
+function initial() {
+  getDelegateRewards(props.endpoint, props.sender).then(x => {
+    rewards.value = x.rewards
+  })
+}
+
+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>
+</template>

package/lib/components/TxDialog/wasm/ClearAdmin.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { toBase64 } from '@cosmjs/encoding'
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgClearAdmin',
+        value: {
+            /** Sender is the that actor that signed the messages */
+            sender: props.sender,
+            /** contract address that can execute migrations */
+            contract: params.value.contract,
+        },
+    }]
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if( !params.value.contract) {
+        ok = false
+        error = "Code Id is not selected"
+    }
+    return { ok, error }
+})
+
+function initial() {
+}
+
+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">Contract Address</span>
+            </label>
+            <input type="text" readonly class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" :value="params.contract" />
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/wasm/ExecuteContract.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { Coin } from '@cosmjs/amino';
+import { PropType, computed, ref } from 'vue';
+import type { CoinMetadata } from '../../../utils/type';
+
+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 parsed = computed(() => JSON.parse(props.params || "{}"))
+
+const contract = ref(parsed.value.contract)
+const funds = ref([] as Coin[])
+const msg = ref("")
+
+function addFunds() {
+    const denom = props.balances?.at(0)?.denom || ""
+    funds.value.push({ amount: "", denom })
+}
+function removeFunds() {
+    if(funds.value.length > 0)
+        funds.value.pop()
+}
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgExecuteContract',
+        value: {
+            /** Sender is the that actor that signed the messages */
+            sender: props.sender,
+            contract: contract.value,
+            /** Msg json encoded message to be passed to the contract on instantiation */
+            msg: (new TextEncoder()).encode(msg.value),
+            /** Funds coins that are transferred to the contract on instantiation */
+            funds: JSON.parse(JSON.stringify(funds.value)),
+        },
+    }]
+})
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if( contract.value.length <= 0 ) {
+        ok = false
+        error = "Contract is not selected"
+    }    
+    if( msg.value.length <= 0 ) {
+        ok = false
+        error = "Please input arguments"
+    }
+    return { ok, error }
+})
+
+function initial() {
+    msg.value = JSON.stringify(parsed.value.execution) || ""
+}
+
+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">Contract Address</span>
+            </label>
+            <input v-model="contract" 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">Messages</span>
+            </label>
+            <textarea v-model="msg" placeholder="{config: {}}" class="textarea text-gray-800 dark:text-white !border-gray-300 dark:!border-gray-600"></textarea>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Funds</span>
+                <span class="label-text">
+                    <a class="btn btn-xs" @click="addFunds">+</a>
+                    <a class="btn btn-xs" @click="removeFunds">-</a>
+                </span>
+            </label>
+            <label v-for="(coin, i) in funds" class="input-group" :key="i">
+                <input v-model="coin.amount" type="text" placeholder="0" class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white" />
+                <select v-model="coin.denom" class="select border border-gray-300 dark:border-gray-600 dark:text-white">
+                    <option v-for="b in balances" :value="b.denom">{{ b.denom.substring(0, 10) }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/wasm/InstantiateContract.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { Coin } from '@cosmjs/amino';
+import { PropType, computed, ref } from 'vue';
+import { toBase64 } from '@cosmjs/encoding'
+import { CoinMetadata } from '../../../utils/type';
+
+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 admin = ref("")
+const label = ref("")
+const funds = ref([] as Coin[])
+const msg = ref("")
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgInstantiateContract',
+        value: {
+            /** Sender is the that actor that signed the messages */
+            sender: props.sender,
+            /** Admin is an optional address that can execute migrations */
+            admin: admin.value,
+            /** CodeID is the reference to the stored WASM code */
+            codeId: params.value.codeId,
+            /** Label is optional metadata to be stored with a contract instance. */
+            label: label.value,
+            /** Msg json encoded message to be passed to the contract on instantiation */
+            msg: toBase64(new TextEncoder().encode(msg.value)),
+            /** Funds coins that are transferred to the contract on instantiation */
+            funds: JSON.parse(JSON.stringify(funds.value)),
+        },
+    }]
+})
+
+function addFunds() {
+    const denom = props.balances?.at(0)?.denom || ""
+    funds.value.push({ amount: "", denom })
+}
+function removeFunds() {
+    if(funds.value.length > 0)
+        funds.value.pop()
+}
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if( Number(params.value.codeId) < 1) {
+        ok = false
+        error = "Code Id is not selected"
+    }
+    return { ok, error }
+})
+
+function initial() {
+}
+
+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">Admin</span>
+            </label>
+            <input v-model="admin" 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">Label</span>
+            </label>
+            <input v-model="label" 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">Messages</span>
+            </label>
+            <textarea v-model="msg" placeholder="{config: {}}" class="text-gray-600 dark:text-white textarea border !border-gray-300 dark:!border-gray-600"></textarea>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Funds</span>
+                <span class="label-text">
+                    <a class="btn btn-xs" @click="addFunds">+</a>
+                    <a class="btn btn-xs" @click="removeFunds">-</a>
+                </span>
+            </label>
+            <label v-for="(coin, i) in funds" class="input-group" :key="i">
+                <input v-model="coin.amount" type="text" placeholder="0" class="input border border-gray-300 dark:border-gray-600 w-full dark:text-white" />
+                <select v-model="coin.denom" class="select border border-gray-300 dark:border-gray-600 dark:text-white">
+                    <option v-for="b in balances" :value="b.denom">{{ b.denom.substring(0, 10) }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>

package/lib/components/TxDialog/wasm/MigrateContract.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { toBase64 } from '@cosmjs/encoding'
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    params: String,
+});
+
+const params = computed(() => JSON.parse(props.params || "{}"))
+
+const codeId = ref("")
+const msg = ref("{}")
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgMigrateContract',
+        value: {
+            /** Sender is the that actor that signed the messages */
+            sender: props.sender,
+            /** contract address that can execute migrations */
+            contract: params.value.contract,
+            /** CodeID is the reference to the stored WASM code */
+            codeId: codeId.value,
+            /** Msg json encoded message to be passed to the contract on instantiation */
+            msg: toBase64(new TextEncoder().encode(msg.value)),
+        },
+    }]
+})
+
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if( Number(codeId.value) < 1) {
+        ok = false
+        error = "Code Id is not selected"
+    }
+    return { ok, error }
+})
+
+function initial() {
+}
+
+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">Contract Address</span>
+            </label>
+            <input type="text" readonly class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" :value="params.contract" />
+        </div>
+
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Code Id</span>
+            </label>
+            <input v-model="codeId" 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">Messages</span>
+            </label>
+            <textarea v-model="msg" placeholder="{config: {}}" class="text-gray-600 dark:text-white textarea border !border-gray-300 dark:!border-gray-600"></textarea>
+        </div>
+    </div>
+</template>