add widget of imtbl
This commit is contained in:
CounterFire2023
parent
9d36ba06ca
commit
fd1233f042
@ -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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
90
src/components/chain/Widgets.js
Normal file
90
src/components/chain/Widgets.js
Normal file
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user