feat: add teleport

src/layouts/components/NavBarWallet.vue

@@ -5,6 +5,9 @@ const walletStore = useWalletStore();
 walletStore.$subscribe((m, s) => {
   console.log(m, s);
 });
+function walletStateChange(res: any) {
+  walletStore.setConnectedWallet(res.detail?.value);
+}
 let showCopyToast = ref(0);
 async function copyAdress(address: string) {
   try {
@@ -89,6 +92,7 @@ const addressChange = computed(() => {
         </div>
       </div>
     </div>
+    
   </div>
   <label
     v-if="!walletStore?.currentAddress"
@@ -96,4 +100,20 @@ const addressChange = computed(() => {
     class="btn btn-sm ml-4 ping-connect-btn"
     >Connect Wallet</label
   >
+  <div class="footer-modal">
+    <Teleport to="body">
+      <ping-connect-wallet
+        :chain-id="'juno-1'"
+        :hd-path="`m/44'/118/0'/0/0`"
+        @change="walletStateChange"
+      />
+    </Teleport>
+  </div>
 </template>
+
+<style>
+.footer-modal .ping-connect-btn,
+.footer-modal .ping-connect-dropdown {
+  display: none;
+}
+</style>

src/layouts/components/NavFooter.vue

@@ -1,11 +1,3 @@
-<script setup lang="ts">
-import { useWalletStore } from '@/stores';
-const walletStore = useWalletStore();
-function walletStateChange(res:any){
-  console.log(res.detail?.value, 8888888)
-  walletStore.setConnectedWallet(res.detail?.value)
-}
-</script>
 <template>
   <footer class="footer items-center p-4 text-sm mb-4">
     <div class="items-center grid-flow-col">
@@ -39,14 +31,6 @@ function walletStateChange(res:any){
       >
     </div>
   </footer>
-  <div class="footer-modal">
-    <ping-connect-wallet :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" @change="walletStateChange"/>
-  </div>
+  
 </template>
 
-<style>
-.footer-modal .ping-connect-btn,
-.footer-modal .ping-connect-dropdown {
-  display: none;
-}
-</style>

src/modules/[chain]/index.vue

@@ -89,6 +89,12 @@ const color = computed(() => {
       return 'text-red-600';
   }
 });
+const endpoint = 'https://juno-api.polkachu.com';
+const params = JSON.stringify({
+  proposal_id: '1',
+  validator_address: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
+  chain_name: 'juno',
+});
 </script>
 
 <template>
@@ -350,8 +356,17 @@ const color = computed(() => {
         <RouterLink to="/wallet/receive" class="btn btn-info text-white"
           >Receive</RouterLink
         >
-        <button class="btn btn-primary text-white">Convert</button>
+        <label for="PingTokenConvert" class="btn btn-primary text-white"
+          >Convert</label
+        >
       </div>
+      <Teleport to="body">
+        <ping-token-convert
+          chain-name="juno"
+          :endpoint="endpoint"
+          :params="params"
+        ></ping-token-convert>
+      </Teleport>
     </div>
   </div>
 </template>