@mictonode/widget 0.3.16 → 0.3.17

package/lib/main.css

@@ -1,7 +1,132 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.input:focus {
-    outline: none;
-}
+/* ============================================================
+   S4 4.20 — Explorer DS Font Integration
+   @import must precede @tailwind directives
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6,
+.text-lg, .text-xl, .text-2xl {
+    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+}
+
+code, pre, .font-mono {
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* ============================================================
+   S4 4.20 — DaisyUI Glassmorphism Override (Dark Mode)
+   Aligns DaisyUI components with Explorer Design System
+   ============================================================ */
+
+/* Input focus reset */
+.input:focus {
+    outline: none;
+}
+
+/* Modal → Glass Panel */
+.dark .modal-box {
+    background: rgba(15, 20, 25, 0.85);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
+                0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* Buttons → Gradient */
+.dark .btn-primary,
+.dark .btn.btn-primary {
+    background: linear-gradient(135deg, lch(52% 70% 250deg), lch(55% 65% 245deg));
+    border: 1px solid rgba(0, 102, 255, 0.2);
+    color: #ffffff;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .btn-primary:hover,
+.dark .btn.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 25px -5px rgba(0, 102, 255, 0.4),
+                0 0 0 1px rgba(0, 102, 255, 0.1);
+}
+
+.dark .btn-primary:active,
+.dark .btn.btn-primary:active {
+    transform: scale(0.97);
+}
+
+/* Close button (circle btn) */
+.dark .btn.btn-sm.btn-circle {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #9ca3af;
+    transition: all 0.15s ease;
+}
+
+.dark .btn.btn-sm.btn-circle:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: #e5e7eb;
+}
+
+/* Inputs → Glass Input */
+.dark .input,
+.dark .select,
+.dark .textarea {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dark .input:focus,
+.dark .select:focus,
+.dark .textarea:focus {
+    border-color: #0066ff;
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
+    outline: none;
+}
+
+.dark .input::placeholder,
+.dark .textarea::placeholder {
+    color: #6b7280;
+}
+
+/* Dropdown → Glass Dropdown */
+.dark .dropdown-content {
+    background: rgba(15, 20, 25, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5);
+}
+
+/* Alert → Glass Alert */
+.dark .alert {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+}
+
+/* Toast → Glass Toast */
+.dark .toast {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+/* Card (used in TokenConvert dropdown) */
+.dark .card.dropdown-content {
+    background: rgba(15, 20, 25, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}

package/lib/main.ts

@@ -1,23 +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',
-};
+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

@@ -1,45 +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
-        }
-    }
+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

@@ -1,16 +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)) : ''
-}
-
+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

@@ -1,155 +1,155 @@
-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
-}
-
-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
-}
-
-// /cosmos/base/tendermint/v1beta1/blocks/latest
-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 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,
-        delegation: {
-            delegator_address: string,
-            shares: string,
-            validator_address: string
-        }
-    }
-}> {
-    const url = `${endpoint}/cosmos/staking/v1beta1/validators/${validator_addr}/delegations/${address}`
-    return get(url)
-}
-
-export async function getActiveValidators(endpoint: string) {
-    const url = `${endpoint}/cosmos/staking/v1beta1/validators?pagination.limit=300&status=BOND_STATUS_BONDED`
-    return get(url)
-}
-
-export async function getInactiveValidators(endpoint: string) {
-    const url = `${endpoint}/cosmos/staking/v1beta1/validators?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/v1/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
-export async function getStakingParam(endpoint: string) : Promise<{
-    params: {
-        unbonding_time: string;
-        max_validators: number;
-        max_entries: number;
-        historical_entries: number;
-        bond_denom: string;
-    };
-}> {
-    const url = `${endpoint}/cosmos/staking/v1beta1/params`
-    return get(url)
-}
-
-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)
+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
+}
+
+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
+}
+
+// /cosmos/base/tendermint/v1beta1/blocks/latest
+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 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,
+        delegation: {
+            delegator_address: string,
+            shares: string,
+            validator_address: string
+        }
+    }
+}> {
+    const url = `${endpoint}/cosmos/staking/v1beta1/validators/${validator_addr}/delegations/${address}`
+    return get(url)
+}
+
+export async function getActiveValidators(endpoint: string) {
+    const url = `${endpoint}/cosmos/staking/v1beta1/validators?pagination.limit=300&status=BOND_STATUS_BONDED`
+    return get(url)
+}
+
+export async function getInactiveValidators(endpoint: string) {
+    const url = `${endpoint}/cosmos/staking/v1beta1/validators?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/v1/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
+export async function getStakingParam(endpoint: string) : Promise<{
+    params: {
+        unbonding_time: string;
+        max_validators: number;
+        max_entries: number;
+        historical_entries: number;
+        bond_denom: string;
+    };
+}> {
+    const url = `${endpoint}/cosmos/staking/v1beta1/params`
+    return get(url)
+}
+
+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)
 }