From fd1233f042e2cd1b6199b18b9a9fc4806abbee9c Mon Sep 17 00:00:00 2001 From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com> Date: Wed, 17 Jul 2024 19:00:35 +0800 Subject: [PATCH] add widget of imtbl --- src/components/chain/BlockChain.js | 34 +++-------- src/components/chain/Widgets.js | 90 ++++++++++++++++++++++++++++++ src/components/layout/NavBar.vue | 56 ++++++++++++++++++- 3 files changed, 151 insertions(+), 29 deletions(-) create mode 100644 src/components/chain/Widgets.js diff --git a/src/components/chain/BlockChain.js b/src/components/chain/BlockChain.js index 844dcda..d33a192 100644 --- a/src/components/chain/BlockChain.js +++ b/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'); - } + } diff --git a/src/components/chain/Widgets.js b/src/components/chain/Widgets.js new file mode 100644 index 0000000..c512463 --- /dev/null +++ b/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(); + } + } +} diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index 9f46b4c..e5891eb 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -54,6 +54,21 @@
@@ -65,7 +80,7 @@