Merge pull request #21 from hippo-protocol/feature/denom

Add hp denom metadata

Author: ChrisCho-H

lib/components/TxDialog/index.vue

@@ -171,8 +171,23 @@ async function initData() {
                     if (coin.denom.length < 12)
                         getBalanceMetadata(props.endpoint, coin.denom)
                             .then((meta) => {
-                                if (meta.metadata)
+                                if (meta.metadata) {
+                                    if (meta.metadata.base === 'ahp' && meta.metadata.denom_units.length === 1 && meta.metadata.denom_units[0].denom === 'ahp') {
+                                        meta.metadata = {
+                                            ...meta.metadata,
+                                            denom_units: [
+                                                ...meta.metadata.denom_units,
+                                                {
+                                                    denom: 'hp',
+                                                    exponent: 18,
+                                                    aliases: [],
+                                                }
+                                            ],
+                                            display: 'hp'
+                                        }
+                                    }
                                     metadatas.value[coin.denom] = meta.metadata;
+                                }
                             })
                             .catch(() => { });
                     if (coin.denom.startsWith('ibc/')) {
@@ -195,6 +210,19 @@ async function initData() {
                     .fetchAssetsList(props.registryName.includes('testnet') && !props.registryName.startsWith('testnets/') ? `testnets/${props.registryName}` : props.registryName)
                     .then((x) => {
                         x.assets.forEach((a) => {
+                            if (a.base === 'ahp' && a.denom_units.length === 1 && a.denom_units[0].denom === 'ahp') {
+                                a = {
+                                    ...a,
+                                    denom_units: [
+                                        ...a.denom_units,
+                                        {
+                                            denom: 'hp',
+                                            exponent: 18,
+                                        }
+                                    ],
+                                    display: 'hp',
+                                }
+                            }
                             metadatas.value[a.base] = a as CoinMetadata;
                         });
                     })

lib/components/TxDialog/messages/Send.vue

@@ -17,30 +17,7 @@ const amount = ref('');
 const recipient = ref('');
 const denom = ref('');
 const amountDenom = ref('hp')
-const convert = new TokenUnitConverter(
-        // below can be simplied to props.metadata if metadata api works.
-        {
-            ahp: {
-                name: 'hp',
-                description: 'The native staking token of the Hippo Protocol.',
-                denom_units: [
-                    {
-                        denom: 'ahp',
-                        exponent: 0,
-                        aliases: [],
-                    },
-                    {
-                        denom: 'hp',
-                        exponent: 18,
-                        aliases: [],
-                    },
-                ],
-                base: 'ahp',
-                display: 'hp',
-                symbol: 'hp',
-            },
-        }
-    );
+const convert = new TokenUnitConverter(props.metadata);
 
 const msgs = computed(() => {
     return [
@@ -61,37 +38,47 @@ const msgs = computed(() => {
 });
 
 const available = computed(() => {
-    const base  = (
-        props.balances?.find((x) => x.denom === denom.value) || {
-            amount: '0',
-            denom: '-',
-        }
-    )
+    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)
+        display: convert.baseToUnit(base, amountDenom.value),
     };
 });
 
 const showBalances = computed(() => {
-    return props.balances?.map(b => ({
-        base: b,
-        display: convert.baseToDisplay(b)
-    })) || []
-})
+    const convert = new TokenUnitConverter(props.metadata);
+    return (
+        props.balances?.map((b) => ({
+            base: b,
+            display: convert.baseToDisplay(b),
+        })) || []
+    );
+});
 
 const units = computed(() => {
-    return [{ denom: 'hp', exponent: 18, aliases: [] }];
-})
+    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) {
+    if (!recipient.value) {
         ok = false
         error = "Recipient is empty"
     }
-    if(!(Number(amount.value) > 0)) {
+    if (!(Number(amount.value) > 0)) {
         ok = false
         error = "Amount should be great than 0"
     }
@@ -107,23 +94,24 @@ function formatDenom(v: any) {
     return String(v).substring(0, 10)
 }
 
-defineExpose({msgs, isValid, initial})
+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" />
+            <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">
+                <option v-for="{ base, display } in showBalances" :value="base.denom">
                     {{ display.amount }} {{ display.denom }}
                 </option>
             </select>
@@ -132,19 +120,17 @@ defineExpose({msgs, isValid, initial})
             <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"
-            />
+            <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" />
+                <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>