add widget

src/modules/[chain]/widget/index.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
+import type { Connection } from '@/types';
+import { computed } from 'vue';
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+
+const props = defineProps(['chain']);
+const chainStore = useBlockchain();
+const baseStore = useBaseStore()
+const endpoint = ref(chainStore.current?.endpoints?.rest?.at(0)?.address)
+
+const chainId = computed(() => baseStore.latest?.block?.header?.chain_id || "")
+const chainName = computed(() => chainStore?.chainName || "")
+const hdPath = computed(() => {
+    return `m/44'/${ chainStore.current?.coinType }/0'/0/0`
+})
+</script>
+<template>
+  <div>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title">Initial Setting</h2>
+      <div class="my-4 grid grid-flow-col auto-cols-max ">
+        <div class="form-control">
+            <div class="input-group">
+                <span>Endpoint</span>
+                <select v-model="endpoint" class="select select-bordered w-fit">
+                <option disabled selected>Select Endpoint</option>
+                <option v-for="v in chainStore.current?.endpoints.rest" :value="v.address">{{ v.address }}</option>
+                </select>
+            </div>
+        </div>
+      </div>
+      <span class="text-base">Import global script </span>
+        <div class="mockup-code my-2">
+            <pre data-prefix="1"><code>&lt;script src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js"&gt;</code></pre>
+        </div>
+    </div>
+    <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title">Widgets</h2>
+      <div class="mt-4">
+        <span class="text-base"> 1. Connect Wallet </span>
+        <div class="mockup-code my-2">
+            <pre data-prefix=">"><code>&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
+        </div>
+
+        <span class="text-base"> 2. Osmosis Convert </span>
+        <div class="mockup-code my-2">
+            <pre data-prefix=">"><code>&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="hdPath"/&gt;</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<route>
+    {
+      meta: {
+        i18n: 'widget',
+        order: 9
+      }
+    }
+</route>

src/plugins/i18n/locales/en.json

@@ -8,6 +8,7 @@
     "uptime": "Uptime",
     "state-sync": "State Sync",
     "cosmwasm": "Cosmwasm",
+    "widget": "Widgets",
     "ibc": "IBC"
   },
   "index": {