91 lines
3.0 KiB
JavaScript
91 lines
3.0 KiB
JavaScript
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();
|
|
}
|
|
}
|
|
}
|