@mictonode/widget 0.3.16 → 0.3.17

package/lib/components/TokenConvert/tokens.ts

@@ -1,37 +1,37 @@
-export interface TokenConfig {
-    denom: string;
-    symbol: string;
-    ibcDenom: string;
-    decimals: number;
-    coinImageUrl: string;
-    sourceChannelId?: string;
-    destChannelId?: string;
-}
-
-export const tokens : TokenConfig[]= [
-    {
-        denom: "uosmo",
-        symbol: "OSMO",
-        ibcDenom: "uosmo", // use base denom for native token 
-        decimals: 6,
-        coinImageUrl: "https://app.osmosis.zone/tokens/osmo.svg",
-    },
-    {
-        denom: "uatom",
-        symbol: "ATOM",
-        ibcDenom: "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
-        sourceChannelId: "channel-0",
-        destChannelId: "channel-141",
-        decimals: 6,
-        coinImageUrl: "https://app.osmosis.zone/tokens/atom.svg",
-    },
-    {
-        denom: "uusdc",
-        symbol: "USDC",
-        ibcDenom: "ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858",
-        sourceChannelId: "channel-208",
-        destChannelId: "",
-        decimals: 6,
-        coinImageUrl: "https://app.osmosis.zone/tokens/usdc.svg",
-    },
+export interface TokenConfig {
+    denom: string;
+    symbol: string;
+    ibcDenom: string;
+    decimals: number;
+    coinImageUrl: string;
+    sourceChannelId?: string;
+    destChannelId?: string;
+}
+
+export const tokens : TokenConfig[]= [
+    {
+        denom: "uosmo",
+        symbol: "OSMO",
+        ibcDenom: "uosmo", // use base denom for native token 
+        decimals: 6,
+        coinImageUrl: "https://app.osmosis.zone/tokens/osmo.svg",
+    },
+    {
+        denom: "uatom",
+        symbol: "ATOM",
+        ibcDenom: "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
+        sourceChannelId: "channel-0",
+        destChannelId: "channel-141",
+        decimals: 6,
+        coinImageUrl: "https://app.osmosis.zone/tokens/atom.svg",
+    },
+    {
+        denom: "uusdc",
+        symbol: "USDC",
+        ibcDenom: "ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858",
+        sourceChannelId: "channel-208",
+        destChannelId: "",
+        decimals: 6,
+        coinImageUrl: "https://app.osmosis.zone/tokens/usdc.svg",
+    },
 ]

package/lib/components/TxDialog/index.vue

@@ -293,8 +293,8 @@ function fetchTx(tx: string) {
         <!-- Put this part before </body> tag -->
         <input v-model="open" type="checkbox" :id="type" class="modal-toggle" @change="initData()" />
         <label :for="type" class="modal cursor-pointer">
-            <label class="modal-box relative p-5 dark:bg-[#1c1f2e]" :class="{ '!w-11/12 !max-w-5xl': String(type).startsWith('wasm') }" for="">
-                <label :for="type" class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] btn-sm btn-circle absolute right-4 top-4">✕</label>
+            <label class="modal-box relative p-5 dark:bg-[#0f1419]" :class="{ '!w-11/12 !max-w-5xl': String(type).startsWith('wasm') }" for="">
+                <label :for="type" class="btn dark:bg-primary-500 dark:hover:bg-neutral-800 btn-sm btn-circle absolute right-4 top-4">✕</label>
                 <h3 class="text-lg font-bold capitalize dark:text-gray-300">
                     {{ showTitle() }}
                 </h3>
@@ -315,9 +315,9 @@ function fetchTx(tx: string) {
                                     </label>
                                     <label class="input-group flex items-center">
                                         <input v-model="feeAmount" type="text" placeholder="0.001"
-                                            class="input border border-gray-300 dark:border-[#aac7fc] flex-1 w-0 dark:text-gray-300" />
+                                            class="input border border-gray-300 dark:border-neutral-700 flex-1 w-0 dark:text-gray-300" />
                                         <select v-model="feeDenom"
-                                            class="select input border border-gray-300 dark:border-[#aac7fc] w-[200px]">
+                                            class="select input border border-gray-300 dark:border-neutral-700 w-[200px]">
                                             <option disabled selected>
                                                 Select Fee Token
                                             </option>
@@ -332,21 +332,21 @@ function fetchTx(tx: string) {
                                         <span class="label-text">Gas</span>
                                     </label>
                                     <input v-model="gasInfo" type="number" placeholder="2000000"
-                                        class="input border border-gray-300 dark:border-[#aac7fc] dark:text-gray-300" />
+                                        class="input border border-gray-300 dark:border-neutral-700 dark:text-gray-300" />
                                 </div>
                                 <div class="form-control">
                                     <label class="label">
                                         <span class="label-text">Memo</span>
                                     </label>
                                     <input v-model="memo" type="text" placeholder="Memo"
-                                        class="input border border-gray-300 dark:border-[#aac7fc] dark:text-gray-300" />
+                                        class="input border border-gray-300 dark:border-neutral-700 dark:text-gray-300" />
                                 </div>
                                 <div class="form-control">
                                     <label class="label">
                                         <span class="label-text">Broadcast Mode</span>
                                     </label>
                                     <select v-model="broadcast"
-                                        class="select input border border-gray-300 dark:border-[#aac7fc] w-[200px]">
+                                        class="select input border border-gray-300 dark:border-neutral-700 w-[200px]">
                                         <option :value="BroadcastMode.SYNC">Sync</option>
                                         <option :value="BroadcastMode.ASYNC">Async</option>
                                         <option :value="BroadcastMode.BLOCK">Block</option>
@@ -372,7 +372,7 @@ function fetchTx(tx: string) {
                                     class="checkbox checkbox-sm checkbox-primary mr-2" /><label :for="`${type}-advance`"
                                     class="cursor-pointer dark:text-gray-400">Advance</label>
                             </div>
-                            <button class="btn btn-primary dark:bg-[#1f67f5]" @click="sendTx()" :disabled="sending">
+                            <button class="btn btn-primary dark:bg-primary-500" @click="sendTx()" :disabled="sending">
                                 <span v-if="sending" class="loading loading-spinner"></span>
                                 Send
                             </button>

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

@@ -1,174 +1,174 @@
-<script lang="ts" setup>
-import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
-import {
-    getActiveValidators,
-    getInactiveValidators,
-    getStakingParam,
-} from '../../../utils/http';
-import { decimal2percent } from '../../../utils/format';
-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 params = computed(() => JSON.parse(props.params || '{}'));
-
-const validator = ref('');
-
-const activeValidators = ref([]);
-const inactiveValidators = ref([]);
-const stakingDenom = ref('');
-const unbondingTime = ref('');
-const amount = ref('');
-const amountDenom = ref('');
-
-const msgs = computed(() => {
-    const convert = new TokenUnitConverter(props.metadata);
-    return [
-        {
-            typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
-            value: {
-                delegatorAddress: props.sender,
-                validatorAddress: validator.value,
-                amount: convert.displayToBase(stakingDenom.value, {
-                    amount: String(amount.value),
-                    denom: amountDenom.value,
-                }),
-            },
-        },
-    ];
-});
-
-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 = props.balances?.find(
-        (x) => x.denom === stakingDenom.value
-    ) || { amount: '0', denom: stakingDenom.value };
-    return {
-        base,
-        display: convert.baseToUnit(base, amountDenom.value),
-    };
-});
-
-function loadInactiveValidators() {
-    getInactiveValidators(props.endpoint).then((x) => {
-        inactiveValidators.value = x.validators;
-    });
-}
-
-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 (!(Number(amount.value) > 0)) {
-        ok = false;
-        error = 'Amount should be great than 0';
-    }
-    if (!amountDenom.value) {
-        ok = false;
-        error = 'Amount Denom is empty';
-    }
-    return { ok, error };
-});
-
-function initial() {
-    activeValidators.value = [];
-    validator.value = params.value.validator_address;
-    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;
-        if (!params.value.validator_address) {
-            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-[#aac7fc]"
-            />
-        </div>
-        <div class="form-control">
-            <label class="label">
-                <span class="label-text">Validator</span>
-                <a class="label-text" @click="loadInactiveValidators()"
-                    >Show Inactive</a
-                >
-            </label>
-            <select v-model="validator" class="select select-bordered dark:border-[#aac7fc] 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="join">
-                <input
-                    v-model="amount"
-                    type="number"
-                    :placeholder="`Available: ${available?.display.amount}`"
-                    class="input border border-gray-300 dark:border-[#aac7fc] w-full join-item dark:text-white"
-                />
-                <select v-model="amountDenom" class="select select-bordered join-item dark:border-[#aac7fc] dark:text-white">
-                    <option v-for="u in units">{{ u.denom }}</option>
-                </select>
-            </label>
-        </div>
-    </div>
-</template>
+<script lang="ts" setup>
+import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
+import {
+    getActiveValidators,
+    getInactiveValidators,
+    getStakingParam,
+} from '../../../utils/http';
+import { decimal2percent } from '../../../utils/format';
+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 params = computed(() => JSON.parse(props.params || '{}'));
+
+const validator = ref('');
+
+const activeValidators = ref([]);
+const inactiveValidators = ref([]);
+const stakingDenom = ref('');
+const unbondingTime = ref('');
+const amount = ref('');
+const amountDenom = ref('');
+
+const msgs = computed(() => {
+    const convert = new TokenUnitConverter(props.metadata);
+    return [
+        {
+            typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
+            value: {
+                delegatorAddress: props.sender,
+                validatorAddress: validator.value,
+                amount: convert.displayToBase(stakingDenom.value, {
+                    amount: String(amount.value),
+                    denom: amountDenom.value,
+                }),
+            },
+        },
+    ];
+});
+
+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 = props.balances?.find(
+        (x) => x.denom === stakingDenom.value
+    ) || { amount: '0', denom: stakingDenom.value };
+    return {
+        base,
+        display: convert.baseToUnit(base, amountDenom.value),
+    };
+});
+
+function loadInactiveValidators() {
+    getInactiveValidators(props.endpoint).then((x) => {
+        inactiveValidators.value = x.validators;
+    });
+}
+
+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 (!(Number(amount.value) > 0)) {
+        ok = false;
+        error = 'Amount should be great than 0';
+    }
+    if (!amountDenom.value) {
+        ok = false;
+        error = 'Amount Denom is empty';
+    }
+    return { ok, error };
+});
+
+function initial() {
+    activeValidators.value = [];
+    validator.value = params.value.validator_address;
+    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;
+        if (!params.value.validator_address) {
+            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-neutral-700"
+            />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Validator</span>
+                <a class="label-text" @click="loadInactiveValidators()"
+                    >Show Inactive</a
+                >
+            </label>
+            <select v-model="validator" class="select select-bordered dark:border-neutral-700 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="join">
+                <input
+                    v-model="amount"
+                    type="number"
+                    :placeholder="`Available: ${available?.display.amount}`"
+                    class="input border border-gray-300 dark:border-neutral-700 w-full join-item dark:text-white"
+                />
+                <select v-model="amountDenom" class="select select-bordered join-item dark:border-neutral-700 dark:text-white">
+                    <option v-for="u in units">{{ u.denom }}</option>
+                </select>
+            </label>
+        </div>
+    </div>
+</template>