feat: add keplr button, use variables on whole page

.vitepress/components/AddNetworkKeplr.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="center">
+    <button class="keplrButton" @click="add">{{ `Add/switch to ${params.chainName}` }}</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['params'],
+  methods: {
+    async add() {
+      if (!window.keplr) {
+        alert("Please install keplr extension");
+      } else {
+        if (window.keplr.experimentalSuggestChain){
+          try {
+            await window.keplr.experimentalSuggestChain({
+              chainId: this.params.chainId, 
+              chainName: this.params.chainName,
+              rpc: this.params.rpc,
+              rest: this.params.rest,
+              bip44: {
+                coinType: 118,
+              },
+              bech32Config: {
+                bech32PrefixAccAddr: "celestia",
+                bech32PrefixAccPub: "celestia" + "pub",
+                bech32PrefixValAddr: "celestia" + "valoper",
+                bech32PrefixValPub: "celestia" + "valoperpub",
+                bech32PrefixConsAddr: "celestia" + "valcons",
+                bech32PrefixConsPub: "celestia" + "valconspub",
+              },
+              currencies: [ 
+                { 
+                  coinDenom: "TIA", 
+                  coinMinimalDenom: "utia", 
+                  coinDecimals: 6, 
+                  coinGeckoId: "celestia", 
+                }, 
+              ],
+              feeCurrencies: [
+                {
+                  coinDenom: "TIA",
+                  coinMinimalDenom: "utia",
+                  coinDecimals: 6,
+                  coinGeckoId: "celestia",
+                  gasPriceStep: {
+                    low: 0.1,
+                    average: 0.2,
+                    high: 0.4,
+                  },
+                },
+              ],
+              stakeCurrency: {
+                coinDenom: "TIA",
+                coinMinimalDenom: "utia",
+                coinDecimals: 6,
+                coinGeckoId: "celestia",
+              },   
+            }) 
+          } catch {
+            alert("Failed to suggest the chain");
+          }
+        }
+        const chainId = this.params.chainId;
+        await window.keplr.enable(chainId);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 9vh;
+}
+
+.keplrButton {
+  padding: 10px 20px;
+  background-color: #7B2BF9;
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition-duration: 0.4s;
+}
+
+.keplrButton:hover {
+  background-color: #FFFFC5; 
+  color: black; 
+  border: 2px solid #7B2BF9;
+}
+
+</style>

.vitepress/constants/constants.js

@@ -14,5 +14,9 @@ const constants = Object.freeze({
   localCelestiaDevnetVersion: "v0.8.2",
   golangBlobstream: "1.20.2",
   orchrelayVersion: "v0.2.0-app-v0.13.2-beta",
+  mochaRpcUrl: "https://rpc-mocha.pops.one/",
+  mochaRestUrl: "https://api-mocha.pops.one/",
+  arabicaRpcUrl: "https://consensus-full.celestia-arabica-10.com/",
+  arabicaRestUrl: "https://api.consensus.celestia-arabica-10.com/",
 });
 export default constants;

developers/keplr.md

@@ -5,8 +5,32 @@ description: How you can add Celestia network parameters to Keplr.
 # Keplr integration with Celestia
 
 <!-- markdownlint-disable MD033 -->
-<script setup>
+<script>
 import constants from '/.vitepress/constants/constants.js'
+import AddNetworkKeplr from '/.vitepress/components/AddNetworkKeplr.vue'
+
+export default {
+  components: {
+    AddNetworkKeplr,
+  },
+  data() {
+    return {
+      constants,
+      ARABICA_PARAMS: {
+        chainId: `${constants.arabicaChainId}`,
+        chainName: 'Arabica devnet',
+        rpc: `${constants.arabicaRpcUrl}`,
+        rest: `${constants.arabicaRestUrl}`
+      },
+      MOCHA_PARAMS: {
+        chainId: `${constants.mochaChainId}`,
+        chainName: 'Mocha testnet',
+        rpc: `${constants.mochaRpcUrl}`,
+        rest: `${constants.mochaRestUrl}`
+      }
+    }
+  }
+}
 </script>
 
 Keplr is a popular Cosmos-based wallet that allows anyone
@@ -101,7 +125,7 @@ export default function AddNetworkKeplr({ params }) {
   return (
     <div className={styles.center}>
       <button className={styles.keplrButton} onClick={add}>
-        Add/Switch To {params.chainName}
+        Add/switch To {params.chainName}
       </button>
     </div>
   );
@@ -112,16 +136,20 @@ export default function AddNetworkKeplr({ params }) {
 
 This example is just for using Celestia configs.
 
-We still need to pass the Celestia network params for it.
-
-We can do it for both testnets in the following section.
+We still need to pass the Celestia network params for it and
+we will for both testnets in the following section.
 
 You can also test out the `Connect` button to add those
 params to your Keplr wallet. NOTE: You must have Keplr installed
 first.
 
+Try it out yourself:
+
+<AddNetworkKeplr :params="ARABICA_PARAMS"></AddNetworkKeplr>
+<AddNetworkKeplr :params="MOCHA_PARAMS"></AddNetworkKeplr>
+
 Behind the scenes, here are the parameters
-you will pass to the `AddNetworkKeplr`
+we are passing to the `AddNetworkKeplr`
 function:
 
 ::: code-group
@@ -132,8 +160,8 @@ import '@site/src/components/AddNetworkKeplr'
 export const MOCHA_PARAMS = {`{
   chainId: '{{constants.mochaChainId}}',
   chainName: 'Mocha testnet',
-  rpc: 'https://rpc-mocha.pops.one',
-  rest: 'https://api-mocha.pops.one/'
+  rpc: '{{constants.mochaRpcUrl}}',
+  rest: '{{constants.mochaRestUrl}}'
 }`}
 
 {<AddNetworkKeplr params={MOCHA_PARAMS}/>}
@@ -145,8 +173,8 @@ import '@site/src/components/AddNetworkKeplr'
 export const ARABICA_PARAMS = {`{
   chainId: '{{constants.arabicaChainId}}',
   chainName: 'Arabica devnet',
-  rpc: 'https://consensus-full.celestia-arabica-10.com/',
-  rest: 'https://api.consensus.celestia-arabica-10.com/'
+  rpc: '{{constants.arabicaRpcUrl}}',
+  rest: '{{constants.arabicaRestUrl}}'
 }`}
 
 {<AddNetworkKeplr params={ARABICA_PARAMS}/>}