add widget of imtbl

src/components/chain/BlockChain.js

@@ -1,7 +1,7 @@
-import {PassportWallet, baseConfig} from "@/components/chain/wallet/PassportWallet";
+import { PassportWallet } from "@/components/chain/wallet/PassportWallet";
 import { MetaMaskWallet } from '@/components/chain/wallet/MetaMaskWallet';
 import { OkxWallet } from '@/components/chain/wallet/OkxWallet'; 
-import {walletStore} from "@/store/wallet";
+import { walletStore } from "@/store/wallet";
 import WalletSelectModel from "@/components/chain/WalletSelectModel.vue";
 import {createModal} from "@/utils/model.util";
 import {isTokenExpired, genRefreshToken, cfgChainId, switchEthereumChain} from "@/components/chain/utils"
@@ -9,7 +9,7 @@ import {ImtblMarket} from "@/components/chain/Market";
 import { ALL_PROVIDERS } from "@/configs/configchain";
 import {Locker} from "@/components/chain/contract/Locker";
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
-import { checkout } from '@imtbl/sdk';
+import { Widgets } from "./Widgets";
 
 
 export const allProviders = {
@@ -28,6 +28,7 @@ export class BlockChain {
     this.initWallet();
     this.market = new ImtblMarket(this)
     this.locker = new Locker(this)
+    this.widgets = new Widgets(this)
     BlockChain.instance = this;
     
   }
@@ -73,7 +74,7 @@ export class BlockChain {
     }
     this.store.$persist();
     this.market.updateProvider(provider);
-    // this.initWidget(provider);
+    this.widgets.initWidget();
     return provider;
   }
 
@@ -156,6 +157,7 @@ export class BlockChain {
     this.store.reset();
     this.store.$persist();
     await this.wallet.logout();
+    this.widgets.removeAll();
   }
 
   async getChainId() {
@@ -215,27 +217,5 @@ export class BlockChain {
     return { provider, address: accounts[0] };
   }
 
-  async initWidget(provider) {
-    const checkoutSDK = new checkout.Checkout({
-      baseConfig,
-      passport: this.passportInstance,
-      bridge: { enable: true },
-      swap: { enable: true },
-      onRamp: { enable: true }
-    });
   
-    const widgets = await checkoutSDK.widgets({
-      config: { theme: checkout.WidgetTheme.DARK },
-    });
-
-    // RECOMMENDED - create all of the widgets once at the start of your application
-    // use the created widgets throughout your application to mount and unmount in specific parts of your application
-    const connect = widgets.create(checkout.WidgetType.CONNECT);
-    const wallet = widgets.create(checkout.WidgetType.WALLET, {provider}); // you can optionally pass in additional config per widget
-    const swap = widgets.create(checkout.WidgetType.SWAP);
-    const bridge = widgets.create(checkout.WidgetType.BRIDGE);
-    const onramp = widgets.create(checkout.WidgetType.ONRAMP);
-    // Mount the wallet widget passing the element id of where to mount the widget
-    wallet.mount('wallet');
-  }
 }

src/components/chain/Widgets.js

@@ -0,0 +1,90 @@
+import { baseConfig } from "@/components/chain/wallet/PassportWallet";
+import { checkout } from '@imtbl/sdk';
+
+export class Widgets {
+  constructor(_chainInstance) {
+    this.bc = _chainInstance
+  }
+
+  async initWidget(provider) {
+    provider = provider || this.bc.web3Provider;
+    const checkoutSDK = new checkout.Checkout({
+      baseConfig,
+      passport: this.passportInstance,
+      bridge: { enable: true },
+      swap: { enable: true },
+      onRamp: { enable: true }
+    });
+    
+    const widgets = await checkoutSDK.widgets({
+      config: { theme: checkout.WidgetTheme.DARK},
+    });
+
+    // RECOMMENDED - create all of the widgets once at the start of your application
+    // use the created widgets throughout your application to mount and unmount in specific parts of your application
+    // const connect = widgets.create(checkout.WidgetType.CONNECT);
+    this.wallet = widgets.create(checkout.WidgetType.WALLET, {provider}); // you can optionally pass in additional config per widget
+    this.swap = widgets.create(checkout.WidgetType.SWAP, {provider});
+    this.bridge = widgets.create(checkout.WidgetType.BRIDGE, {provider});
+    this.onramp = widgets.create(checkout.WidgetType.ONRAMP, {provider});
+    this.comps = [this.wallet, this.swap, this.bridge, this.onramp]
+    
+    this.wallet.addListener(checkout.WalletEventType.CLOSE_WIDGET, () => {
+      this.wallet.unmount();
+    });
+    this.swap.addListener(checkout.SwapEventType.CLOSE_WIDGET, () => {
+      this.swap.unmount();
+    });
+
+    this.bridge.addListener(checkout.BridgeEventType.CLOSE_WIDGET, () => {
+      this.bridge.unmount();
+    });
+
+    this.onramp.addListener(checkout.OnRampEventType.CLOSE_WIDGET, () => {
+      this.onramp.unmount();
+    });
+
+    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_SWAP, (data) => {
+      this.wallet.unmount();
+      this.swap.mount('wallet', { fromTokenAddress: data.fromTokenAddress })
+    })
+    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_BRIDGE, (data) => {
+      this.wallet.unmount();
+      this.bridge.mount('wallet')
+    })
+
+    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_ONRAMP, (data) => {
+      this.wallet.unmount();
+      this.onramp.mount('wallet')
+    })
+  }
+
+  showWallet() {
+    this.wallet.mount('wallet');
+  }
+
+  showSwap() {
+    this.swap.mount('wallet');
+  }
+
+  showOnramp() {
+    this.onramp.mount('wallet');
+  }
+
+  showBridge() {
+    this.bridge.mount('wallet');
+  }
+
+  removeAll() {
+    this.wallet.removeListener(checkout.WalletEventType.CLOSE_WIDGET);
+    this.swap.removeListener(checkout.SwapEventType.CLOSE_WIDGET);
+    this.bridge.removeListener(checkout.BridgeEventType.CLOSE_WIDGET);
+    this.onramp.removeListener(checkout.OnRampEventType.CLOSE_WIDGET);
+    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_SWAP);
+    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_BRIDGE);
+    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_ONRAMP);
+    for (let comp of this.comps) {
+      comp.unmount();
+    }
+  }
+}

src/components/layout/NavBar.vue

@@ -54,6 +54,21 @@
             </svg>
           </div>
           <div class="menu" v-show="showMenu">
+            <div class="menu-item-icon" >
+              <div class="circle-btn" @click="showWalletWidget">
+                <svg viewBox="0 0 20 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M16.25 5.831a3.544 3.544 0 013.537 3.328l.007.216v6.25a3.544 3.544 0 01-3.328 3.537l-.216.007H3.75A3.544 3.544 0 01.213 15.84l-.007-.216V4.6c.002-.074 0-.15 0-.225A3.544 3.544 0 013.534.838L3.75.83h12.5a1.044 1.044 0 01.13 2.08l-.13.008H3.75a1.456 1.456 0 00-.159 2.904l.159.008h12.5z"></path></svg>
+              </div>
+              <div class="circle-btn" @click="showSwapWidget">
+                <svg viewBox="0 0 18 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1L1 5l4 4M1 5h16m-4 14l4-4-4-4m4 4H1"></path></svg>
+              </div>
+              <div class="circle-btn" @click="showBridgeWidget">
+                <svg viewBox="0 0 20 18" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 13l4 4 4-4m-4 4V1m14 4l-4-4-4 4m4-4v16"></path></svg>
+              </div>
+              <div class="circle-btn" @click="showOnrampWidget">
+                <svg viewBox="0 0 12 12" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.907.365c.48 0 .87.39.87.87l-.001 3.99 3.992.001a.87.87 0 010 1.74H6.776v3.991a.87.87 0 01-1.74 0V6.965h-3.99a.87.87 0 010-1.739h3.99V1.235c0-.48.39-.87.87-.87z" clip-rule="evenodd"></path></svg>
+              </div>
+              
+            </div>
             <div class="menu-item" @click="immuTableLogout">Logout</div>
           </div>
         </div>
@@ -65,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed, watchEffect, getCurrentInstance, watch, inject } from "vue";
+import { ref, reactive, onMounted, computed, onUnmounted, watchEffect, getCurrentInstance, watch, inject } from "vue";
 const message = inject('$message')
 const { proxy } = getCurrentInstance();
 import { useAppStore } from "@/store/app";
@@ -211,6 +226,22 @@ watchEffect(() => {
   activeIndex.value = index !== -1 ? index : "";
 });
 
+const showWalletWidget = () => {
+  new BlockChain().widgets.showWallet();
+};
+const showSwapWidget = () => {
+  new BlockChain().widgets.showSwap();
+};
+const showOnrampWidget = () => {
+  new BlockChain().widgets.showOnramp();
+};
+const showBridgeWidget = () => {
+  new BlockChain().widgets.showBridge();
+};
+onUnmounted(() => {
+  new BlockChain().widgets.removeAll();
+});
+
 //  --------------------------------
 const immuTableLogin = async () => {
   await new BlockChain().connect()
@@ -583,7 +614,26 @@ onMounted( async () => {
       margin: 5px 0;
      
     }
-
+    .menu-item-icon {
+      height: 60px;
+      border-bottom: #bb7fff 1px solid;
+      margin: 5px 20px;
+      display: flex;
+      justify-content: space-between;
+      .circle-btn{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 2px solid #bb7fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
     .menu-item {
       padding: 5px 15px;
       color: #f5f5f5;
@@ -592,6 +642,8 @@ onMounted( async () => {
       font-weight: 400;
       // padding-top: 10px;
       justify-content: center;
+      height: 40px;
+      margin: 10px auto;
       .title {
         margin-right: 10px;
       }