@mictonode/widget 0.3.9

package/lib/components/TxDialog/wasm/MigrateContract2.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>

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

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { PropType, computed, ref } from 'vue';
+import * as fflate from 'fflate';
+
+const props = defineProps({
+    endpoint: { type: String, required: true },
+    sender: { type: String, required: true },
+    params: String,
+});
+
+const bytecode = ref(new Uint8Array())
+const addresses = ref("")
+const permission = ref('3')
+const zip = ref('gzip')
+
+function loadWasm(event) {
+    const file =  event.target.files[0]
+    if(file) {
+        var reader = new FileReader();    
+        reader.addEventListener('load', (e)=>{
+            if(e.target) {
+                if(zip.value === 'gzip') {
+                    bytecode.value = fflate.compressSync(new Uint8Array(e.target.result as ArrayBuffer))
+                }
+                bytecode.value = new Uint8Array(e.target.result as ArrayBuffer)
+            }
+        });        
+        reader.readAsArrayBuffer(file);
+    }
+}
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgStoreCode',
+        value: {
+            sender: props.sender,
+            wasmByteCode: bytecode.value,
+            instantiatePermission: {
+                permission: permission.value,
+                addresses: addresses.value.split(","),
+            },
+        },
+    }]
+})
+const isValid = computed(() => {
+    let ok = true
+    let error = ""
+    if( bytecode.value.length < 1) {
+        ok = false
+        error = "No contract is 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">Permission</span>
+            </label>
+            <div class="flex">
+                <input v-model="permission" type="radio" id="nobody" value="1" class="radio radio-error mx-2" /><label for="nobody">Nobody</label> 
+                <input v-model="permission" type="radio" id="everyone" value="3" class="radio radio-success mx-2" /><label for="everyone">Everybody</label> 
+                <input v-model="permission" type="radio" id="anyofaddress" value="4" class="radio radio-success mx-2" /><label for="anyofaddress">Any Of addresses</label>
+            </div>
+        </div>
+        <div v-if="permission === '4'" class="form-control">
+            <label class="label">
+                <span class="label-text">Addresses</span>
+            </label>
+            <input v-model="addresses" type="text" placeholder="use ',' for addresses" class="input border border-gray-300 dark:border-gray-600" />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Compressing</span>
+            </label>
+            <div class="flex">
+                <input v-model="zip" type="radio" id="raw" value="raw" class="radio mx-2" /><label for="raw">Raw</label> 
+                <input v-model="zip" type="radio" id="gzip" value="gzip" class="radio mx-2" /><label for="gzip">Gzip</label> 
+            </div>
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Contract</span>
+            </label>
+            <input type="file" class="file-input" @change="loadWasm"/>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,75 @@
+<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 newAdmin = ref("")
+const msg = ref("")
+
+const msgs = computed(() => {
+    return [{
+        typeUrl: '/cosmwasm.wasm.v1.MsgUpdateAdmin',
+        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 */
+            newAdmin: newAdmin.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( !params.value.contract) {
+        ok = false
+        error = "Contract is not selected!"
+    }
+    if( !newAdmin.value) {
+        ok = false
+        error = "Admin should not be 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">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">New Admin</span>
+            </label>
+            <input v-model="newAdmin" type="text" class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" />
+        </div>
+
+    </div>
+</template>

package/lib/main.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.input:focus {
+    outline: none;
+}

package/lib/main.ts

@@ -0,0 +1,23 @@
+import './main.css';
+import { createApp, h } from 'vue';
+// @ts-ignore
+import wrapper from 'vue3-webcomponent-wrapper';
+
+import TxDialog from './components/TxDialog/index.vue';
+import ConnectWallet from './components/ConnectWallet/index.vue';
+import TokenConvert from './components/TokenConvert/index.vue';
+
+function registry(name: string, module: any) {
+    if (!window.customElements.get(name)) {
+        const component = wrapper(module, createApp, h);
+        window.customElements.define(name, component);
+    }
+}
+
+registry('ping-tx-dialog', TxDialog)
+registry('ping-connect-wallet', ConnectWallet)
+registry('ping-token-convert', TokenConvert)
+
+export default {
+    version: '0.0.5',
+};

package/lib/utils/TokenUnitConverter.ts

@@ -0,0 +1,45 @@
+import { Coin, CoinMetadata } from "./type";
+import BigNumber from 'bignumber.js';
+
+export class TokenUnitConverter {
+    metadata: Record<string, CoinMetadata>
+    constructor(metas?: Record<string, CoinMetadata> ) {
+        this.metadata = metas? metas: {}
+    }
+    addMetadata(denom: string, meta: CoinMetadata) {
+        this.metadata[denom] = meta
+    }
+    baseToDisplay(token: Coin, decimal = 6) {
+        const meta = this.metadata[token.denom]
+        if(!meta) return token
+        const unit = meta.denom_units.find(unit => unit.denom === meta.display)
+        if(!unit) return token
+        const amount = BigNumber(Number(token.amount)).div(BigNumber(10).pow(unit.exponent))  
+        return {
+            amount: amount.toFixed(decimal),
+            denom: unit.denom.toUpperCase()
+        }
+    }
+    baseToUnit(token: Coin, unitName: string, decimal = 6) {
+        const meta = this.metadata[token.denom]
+        if(!meta) return token
+        const unit = meta.denom_units.find(unit => unit.denom === unitName)
+        if(!unit) return token
+        const amount = BigNumber(Number(token.amount)).div(BigNumber(10).pow(unit.exponent))  
+        return {
+            amount: parseFloat(amount.toFixed(decimal)).toString(),
+            denom: unit.denom
+        }
+    }
+    displayToBase(baseDenom: string, display: Coin) {
+        const meta = this.metadata[baseDenom]
+        if(!meta) return display
+        const unit = meta.denom_units.find(unit => unit.denom === display.denom)
+        if(!unit) return display
+        const amount = BigNumber(Number(display.amount)).times(BigNumber(10).pow(unit.exponent))
+        return {
+            amount: amount.toFixed(),
+            denom: baseDenom
+        }
+    }
+}

package/lib/utils/format.ts

@@ -0,0 +1,16 @@
+import { fromBech32, toBech32, fromHex, toHex } from '@cosmjs/encoding'
+
+export const ethToEthermint = (ethAddress: string, prefix: string) => {
+  const data = fromHex(ethAddress.replace("0x", ""))
+  return toBech32(prefix, data)
+}
+
+export const ethermintToEth = (ethermintAddress: string) => {
+  const { data } = fromBech32(ethermintAddress)
+  return `0x${toHex(data)}`
+}
+
+export function decimal2percent(v?: string) {
+    return v ? parseFloat((Number(v) * 100).toFixed(2)) : ''
+}
+

package/lib/utils/http.ts

@@ -0,0 +1,223 @@
+import fetch from 'cross-fetch'
+import { Coin, CoinMetadata, TxResponse } from './type'
+
+export async function get(url: string) {
+    return (await fetch(url)).json()
+}
+
+export async function post(url: string, data: any) {
+    const response = await fetch(url, {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        // mode: 'cors', // no-cors, *cors, same-origin
+        // credentials: 'same-origin', // redirect: 'follow', // manual, *follow, error
+        // referrerPolicy: 'origin', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+        headers: {
+          'Content-Type': 'text/plain',
+          Accept: '*/*',
+          // 'Accept-Encoding': 'gzip, deflate, br',
+        },
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      })
+      // const response = axios.post((config ? config.api : this.config.api) + url, data)
+      return response.json() // parses JSON response into native JavaScript objects
+}
+
+//let returnvalue = getLatestBlock(`$endpoint`);
+
+function isInitiaChain(endpoint: string): boolean {
+    return endpoint.indexOf("init") !== -1;
+}
+
+function findField(obj: any, name: string) {
+
+    if(!obj) return undefined
+
+    const list = Object.keys(obj).filter(x => x && !x.startsWith("@"))
+    if(list.includes(name)) {
+        return obj[name]
+    }
+    for(let i = 0; i < list.length; i++) {
+        const field = obj[list[i]]
+        if(typeof field === 'string') continue
+        if(Array.isArray(field)) continue
+
+        const sub = findField(field, name)
+        if(sub) return sub
+    }
+    return undefined
+}
+
+export async function getEndpoint(endpoint: string){
+    const url = `${endpoint}`
+    return get(url)
+}
+
+export async function getLatestBlock(endpoint: string){
+    const url = `${endpoint}/cosmos/base/tendermint/v1beta1/blocks/latest`
+    return get(url)
+}
+
+export async function getAccount(endpoint: string, address: string) {
+    const url = `${endpoint}/cosmos/auth/v1beta1/accounts/${address}`
+    try{
+        const res = await get(url)
+        return {
+            account: {
+                account_number: findField(res, "account_number"),
+                sequence: findField(res, "sequence")
+            }
+        }      
+    }catch(err) {
+        throw new Error(err)
+    }
+
+}
+
+export async function getBalance(endpoint: string, address: string): Promise<{balances: Coin[]}> {
+    const url = `${endpoint}/cosmos/bank/v1beta1/balances/${address}`
+    return get(url)
+}
+
+export async function getBalanceMetadata(endpoint: string, denom: string): Promise<{metadata: CoinMetadata }> {
+    const url = `${endpoint}/cosmos/bank/v1beta1/denoms_metadata/${denom}`
+    return get(url)
+}
+
+export async function getIBCDenomMetadata(denom: string): Promise<CoinMetadata> {
+    const url = `https://metadata.ping.pub/metadata/${denom.replace("ibc/", "")}`
+    return get(url)
+}
+
+export async function getCoinMetadata(endpoint: string, denom: string) {
+    const url = `${endpoint}/cosmos/bank/v1beta1/denoms_metadata/${denom}`
+    return get(url)
+}
+export async function getInitiaMetadata(endpoint: string, denom: string) {
+    const url = `${endpoint}/initia/move/v1/metadata?denom=${denom}`
+    return get(url)
+}
+
+export async function getDelegateRewards(endpoint: string, address: string) {
+    const url = `${endpoint}/cosmos/distribution/v1beta1/delegators/${address}/rewards`
+    return get(url)
+}
+
+export async function getDelegations(endpoint: string, validator_addr: string, address: string): Promise<{
+    delegation_response: {
+        balance: Coin | Coin[],
+        delegation: {
+            delegator_address: string,
+            shares: string,
+            validator_address: string
+        }
+    }
+}> {
+    const baseUrl = isInitiaChain(endpoint)
+        ? `${endpoint}/initia/mstaking/v1/validators`
+        : `${endpoint}/cosmos/staking/v1beta1/validators`;
+    
+    const url = `${baseUrl}/${validator_addr}/delegations/${address}`;
+    const response = await get(url);
+
+    // Adjust balance type based on initia condition
+    if (isInitiaChain(endpoint)) {
+        response.delegation_response.balance = Array.isArray(response.delegation_response.balance)
+            ? response.delegation_response.balance
+            : [response.delegation_response.balance];
+    }
+
+    return response;
+}
+
+
+export async function getActiveValidators(endpoint: string) {
+    const baseUrl = isInitiaChain(endpoint)
+        ? `${endpoint}/initia/mstaking/v1/validators`
+        : `${endpoint}/cosmos/staking/v1beta1/validators`;
+    
+    const url = `${baseUrl}?pagination.limit=300&status=BOND_STATUS_BONDED`;
+    return get(url);
+}
+
+
+export async function getInactiveValidators(endpoint: string) {
+    const baseUrl = isInitiaChain(endpoint)
+        ? `${endpoint}/initia/mstaking/v1/validators`
+        : `${endpoint}/cosmos/staking/v1beta1/validators`;
+    
+    const url = `${baseUrl}?pagination.limit=300&status=BOND_STATUS_UNBONDED`;
+    return get(url);
+}
+
+// /ibc/apps/transfer/v1/denom_traces/{hash}
+export async function getDenomTraces(endpoint: string, hash: string) : Promise<{
+    denom_trace: {
+        path: string;
+        base_denom: string;
+    };
+}> {
+    const url = `${endpoint}/ibc/apps/transfer/v1beta1/denom_traces/${hash}`
+    return get(url)
+}
+// /cosmos/tx/v1beta1/txs/{hash}
+export async function getTxByHash(endpoint: string, hash: string) : Promise<{
+    tx_response: TxResponse;
+}> {
+    const url = `${endpoint}/cosmos/tx/v1beta1/txs/${hash}`
+    return get(url)
+}
+// /cosmos/staking/v1beta1/params
+
+// /initia/mstaking/v1/params
+
+export async function getStakingParam(endpoint: string): Promise<{
+    params: {
+        unbonding_time: string;
+        max_validators: number;
+        max_entries: number;
+        historical_entries: number;
+        bond_denom?: string;
+        bond_denoms?: string[];
+        min_voting_power: string;
+        min_commission_rate: string;
+    }
+}> {
+    const initia = isInitiaChain(endpoint);
+    const url = initia 
+        ? `${endpoint}/initia/mstaking/v1/params`
+        : `${endpoint}/cosmos/staking/v1beta1/params`;
+    const response = await get(url);
+    
+    if (initia) {
+        const bondDenomsArray = Array.isArray(response.params.bond_denom) 
+            ? response.params.bond_denom 
+            : [response.params.bond_denom];
+        
+        // Ensure "uinit" is in the bond_denoms array
+        if (!bondDenomsArray.includes("uinit")) {
+            bondDenomsArray.unshift("uinit");
+        }
+        
+        response.params.bond_denoms = bondDenomsArray;
+        response.params.bond_denom = bondDenomsArray[0];
+    } else {
+        // Ensure bond_denom is a string
+        if (Array.isArray(response.params.bond_denom)) {
+            response.params.bond_denom = response.params.bond_denom[0];
+        }
+    }
+    
+    return response;
+}
+
+
+export async function getOsmosisPools(endpoint: string) {
+    const url = `${endpoint}/osmosis/gamm/v1beta1/pools?pagination.limit=1000`
+    return get(url)
+}
+// https://lcd.osmosis.zone
+// /osmosis/gamm/v1beta1/{pool_id}/estimate/swap_exact_amount_in
+export async function estimateSwapAmountIn(endpoint: string, poolId: string, token: Coin) {
+    const url = `${endpoint}/osmosis/gamm/v1beta1/${poolId}/estimate/swap_exact_amount_in?token_in=${token.amount}${token.denom}`
+    return get(url)
+}

package/lib/utils/type.ts

@@ -0,0 +1,77 @@
+//import { EncodeObject } from '@cosmjs/proto-signing';
+import { SignerData, StdFee } from '@cosmjs/stargate';
+import { EncodeObject } from '@initia/utils';
+import type { App, Plugin } from 'vue';
+export const withInstall = <T>(comp: T) => {
+  const c = comp as any;
+  c.install = function (app: App) {
+    app.component(c.displayName || c.name, comp as any);
+  };
+
+  return comp as T & Plugin;
+};
+
+
+export interface Coin {
+  amount: string,
+  denom: string,
+}
+export interface Configuration {
+
+}
+
+export interface CoinMetadata {
+  description: string,
+  denom_units: {
+    denom: string,
+    exponent: number,
+    aliases: string[]
+  }[],
+  base: string,
+  display: string,
+  name: string,
+  symbol: string
+}
+
+export interface TxResponse {
+  height: string,
+  txhash: string,
+  codespace: string,
+  code: 0,
+  data: string,
+  raw_log: string,
+}
+export interface DeliverTxResponse {
+  readonly height: number;
+  readonly txIndex: number;
+  readonly code: number;
+  readonly transactionHash: string;
+  readonly events: readonly Event[];
+  readonly rawLog?: string;
+  readonly msgResponses: Array<{
+      readonly typeUrl: string;
+      readonly value: Uint8Array;
+  }>;
+  readonly gasUsed: bigint;
+  readonly gasWanted: bigint;
+}
+
+export interface Transaction { 
+  chainId: string; 
+  signerAddress: string; 
+  messages: readonly EncodeObject[]; 
+  fee: StdFee; 
+  memo: string; 
+  signerData: SignerData;
+  gas?: string;
+  bodyBytes: Uint8Array;
+  authInfoBytes: Uint8Array;
+  signatures: Uint8Array[];
+  BroadcastMode: BroadcastMode;
+}
+
+export enum BroadcastMode {
+  SYNC = 'BROADCAST_MODE_SYNC', 
+  BLOCK = 'BROADCAST_MODE_BLOCK', 
+  ASYNC = 'BROADCAST_MODE_ASYNC',
+}