From 45a7d0474838e1dc0bee57f6c3e22a02cc347009 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Wed, 17 May 2023 00:02:59 +0800
Subject: [PATCH] feat: add teleport

---
 src/layouts/components/NavBarWallet.vue | 20 ++++++++++++++++++++
 src/layouts/components/NavFooter.vue    | 18 +-----------------
 src/modules/[chain]/index.vue           | 17 ++++++++++++++++-
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 558ab460..8e1d331e 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index c88fecc6..13c5fc33 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/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>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index d7ae3484..d49bd627 100644
--- a/src/modules/[chain]/index.vue
+++ b/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>