add suggest chain to keplr

src/modules/wallet/keplr.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDashboard, type ChainConfig, useBlockchain } from '@/stores';
+import { CosmosRestClient } from '@/libs/client';
+import { onMounted } from 'vue';
+
+const error = ref("")
+const conf = ref("")
+const dashboard = useDashboard()
+const selected = ref({} as ChainConfig)
+
+onMounted(() => {
+    const chainStore = useBlockchain()
+    selected.value = chainStore.current || Object.values(dashboard.chains)[0]
+    initParamsForKeplr()
+})
+async function initParamsForKeplr() {
+    const chain = selected.value
+    if(!chain.endpoints?.rest?.at(0)) throw new Error("Endpoint does not set");
+    const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || "")
+    const b = await client.getBaseBlockLatest()   
+    const chainid = b.block.header.chain_id
+
+    const gasPriceStep = chain.keplrPriceStep || {
+        low: 0.01,
+        average: 0.025,
+        high: 0.03,
+    }
+    const coinDecimals = chain.assets[0].denom_units.find(x => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6
+    conf.value = JSON.stringify({
+        chainId: chainid,
+        chainName: chain.chainName,
+        rpc: chain.endpoints?.rpc?.at(0)?.address,
+        rest: chain.endpoints?.rest?.at(0)?.address,
+        bip44: {
+            coinType: Number(chain.coinType),
+        },
+        coinType: Number(chain.coinType),
+        bech32Config: {
+            bech32PrefixAccAddr: chain.bech32Prefix,
+            bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
+            bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
+            bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
+            bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
+            bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+        },
+        currencies: [
+            {
+                coinDenom: chain.assets[0].symbol,
+                coinMinimalDenom: chain.assets[0].base,
+                coinDecimals,
+                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+            },
+        ],
+        feeCurrencies: [
+            {
+                coinDenom: chain.assets[0].symbol,
+                coinMinimalDenom: chain.assets[0].base,
+                coinDecimals,
+                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+                gasPriceStep,
+            },
+        ],
+        gasPriceStep,
+        stakeCurrency: {
+            coinDenom: chain.assets[0].symbol,
+            coinMinimalDenom: chain.assets[0].base,
+            coinDecimals,
+            coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+        },
+        features: chain.keplrFeatures || [],
+    }, null, '\t')
+}
+
+function suggest() {
+    // @ts-ignore
+    if (window.keplr) {
+        // @ts-ignore
+        window.keplr.experimentalSuggestChain(JSON.parse(conf.value)).catch(e => {
+            error.value = e
+        })
+    }
+}
+</script>
+
+<template>
+    <div class="bg-base-100 p-4 rounded text-center">
+        <div class="flex">
+            <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
+                <option v-for="c in dashboard.chains" :value="c">
+                    {{ c.chainName }}
+                </option>
+            </select>
+            <button class="btn !bg-yes !border-yes text-white px-10" @click="suggest">Add {{ selected.chainName }} TO Keplr Wallet</button>
+        </div>
+        <div class="text-main mt-5">
+            <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
+        </div>
+        <div class="mt-4 mb-4">
+            You can edit above params if you want.
+        </div>
+    </div>
+</template>

src/stores/useDashboard.ts

@@ -78,6 +78,13 @@ export interface ChainConfig {
   providerChain: {
     api: Endpoint[]
   };
+  // keplr config
+  keplrFeatures?: string[],
+  keplrPriceStep?: {
+    low: number,
+    average: number,
+    high: number,
+  },
 }
 
 export interface LocalConfig {
@@ -103,6 +110,12 @@ export interface LocalConfig {
   sdk_version: string;
   registry_name?: string;
   features?: string[];
+  keplr_price_step?: {
+    low: number,
+    average: number,
+    high: number,
+  },
+  keplr_features: string[],
 }
 
 function apiConverter(api: any[]) {
@@ -151,6 +164,8 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
   }
   conf.features = lc.features
   conf.logo = lc.logo;
+  conf.keplrFeatures = lc.keplr_features;
+  conf.keplrPriceStep = lc.keplr_price_step;
   return conf;
 }