diff --git a/examples/react/src/App.js b/examples/react/src/App.js
index 373ea81..d0310d5 100644
--- a/examples/react/src/App.js
+++ b/examples/react/src/App.js
@@ -4,7 +4,6 @@ import upbondServices from "lib/UpbondEmbed";
import { useEffect, useState } from "react";
import { toast, Toaster } from "react-hot-toast";
import Web3 from "web3";
-import asobiAbi from './asobiMint.json';
/*
Read this:
@@ -13,9 +12,6 @@ import asobiAbi from './asobiMint.json';
We're using this example because we're usually using this method for implementing the @upbond/upbond-embed lib
*/
-const erc20FactoryContract = '0xc80101fA4E473F47Fea06288FbF0D2ff8C9fF9e7'
-const mintContract = '0x9008347b7b15C99cA963A750e03cAb4801620188'
-
const App = () => {
const [loading, setLoading] = useState(false);
const [account, setAccount] = useState(null);
@@ -31,6 +27,7 @@ const App = () => {
balance: 0
})
const _upbond = upbondServices.upbond.provider;
+ const _upbondInstance = upbondServices.upbond;
useEffect(() => {
const initUpbond = async () => {
@@ -160,6 +157,22 @@ const App = () => {
}
}
+ const showButtonBeforeLoggedIn = () => {
+ _upbondInstance.showWidget()
+ }
+
+ const hideButtonBeforeLoggedIn = () => {
+ _upbondInstance.hideWidget()
+ }
+
+ const openHomeWallet = () => {
+ _upbondInstance.showWallet("home")
+ }
+
+ const openMenu = () => {
+ _upbondInstance.showMenu()
+ }
+
useEffect(() => {
const init = async () => {
if (upbondServices.upbond) {
@@ -284,6 +297,34 @@ const App = () => {
>
Send Transaction
+
+
+
+
Output:
@@ -330,6 +371,20 @@ const App = () => {
>
Login 3.0
+
+
)}
diff --git a/examples/react/src/lib/UpbondEmbed.js b/examples/react/src/lib/UpbondEmbed.js
index f236113..5be9dc7 100644
--- a/examples/react/src/lib/UpbondEmbed.js
+++ b/examples/react/src/lib/UpbondEmbed.js
@@ -14,7 +14,7 @@ class UpbondEmbed {
web3 = null
// you can also using another envs.
- env = "v2_local"
+ env = "local"
provider
@@ -35,28 +35,26 @@ class UpbondEmbed {
// isUsingDirect: false,
skipDialog: false,
dappRedirectUri: `${window.location.origin}/sapi`,
+ showUpbondButton: true,
+ widgetConfig: {
+ showAfterLoggedIn: true,
+ showBeforeLoggedIn: false,
+ },
network: {
- host: "https://matic-testnet-archive-rpc.bwarelabs.com",
+ host: "mumbai",
chainId: 80001,
networkName: "Mumbai",
blockExplorer: "",
ticker: "MUMBAI",
tickerName: "MUMBAI",
+ rpcUrl: "https://rpc.ankr.com/polygon_mumbai"
},
- // selectedVerifier: 'upbond-wallet-tesnet-line',
loginConfig: {
- "upbond-wallet-tesnet-line": {
- name: "Upbond",
- description: "LINE with UPBOND Identity",
+ "upbond-line": {
+ name: "Login With LINE",
+ description: "LINE",
typeOfLogin: "line",
- jwtParams: {
- domain: "https://lzg2dndj.auth.dev.upbond.io",
- connection: "line",
- client_id: "FoQ_Ri8rKSXkHf82GRzZK",
- clientId: 'FoQ_Ri8rKSXkHf82GRzZK',
- scope: "openid email profile offline_access",
- // redirect_uri: "http://localhost:3000/auth",
- },
+ loginProvider: "upbond-line",
jwtParameters: {
domain: "https://lzg2dndj.auth.dev.upbond.io",
connection: "line",
@@ -71,8 +69,8 @@ class UpbondEmbed {
showOnMobile: true,
mainOption: true,
priority: 1,
- buttonBgColor: '#faf',
- buttonTextColor: '#FFF'
+ buttonBgColor: "#289B2A",
+ buttonTextColor: "#f3f3f3",
}
},
whiteLabel: {
diff --git a/src/PopupHandler.ts b/src/PopupHandler.ts
index 939c521..83dff02 100644
--- a/src/PopupHandler.ts
+++ b/src/PopupHandler.ts
@@ -15,11 +15,10 @@ class PopupHandler extends EventEmitter {
iClosedWindow: boolean;
- constructor({ url, target, features }: { url: URL; target?: string; features?: string }) {
+ constructor({ url, features }: { url: URL; target?: string; features?: string }) {
super();
this.url = url;
- this.target = target || "_blank";
- // eslint-disable-next-line no-console
+ this.target = "_blank";
this.features = features || getPopupFeatures();
this.window = undefined;
this.windowTimer = undefined;
@@ -44,7 +43,7 @@ class PopupHandler extends EventEmitter {
}
open(): Promise {
- this.window = window.open(this.url.href, this.target, this.features);
+ this.window = window.open(this.url.href, "_blank");
if (this.window?.focus) this.window.focus();
return Promise.resolve();
}
diff --git a/src/embed.ts b/src/embed.ts
index e086861..b890247 100644
--- a/src/embed.ts
+++ b/src/embed.ts
@@ -108,8 +108,6 @@ class Upbond {
isInitialized: boolean;
- torusWidgetVisibility: boolean;
-
torusAlert: HTMLDivElement;
apiKey: string;
@@ -154,13 +152,14 @@ class Upbond {
buildEnv: typeof UPBOND_BUILD_ENV[keyof typeof UPBOND_BUILD_ENV];
+ widgetConfig: { showAfterLoggedIn: boolean; showBeforeLoggedIn: boolean };
+
constructor({ buttonPosition = BUTTON_POSITION.BOTTOM_LEFT, buttonSize = 56, modalZIndex = 99999, apiKey = "torus-default" }: TorusCtorArgs = {}) {
this.buttonPosition = buttonPosition;
this.buttonSize = buttonSize;
this.torusUrl = "";
this.isLoggedIn = false; // ethereum.enable working
this.isInitialized = false; // init done
- this.torusWidgetVisibility = true;
this.requestedVerifier = "";
this.currentVerifier = "";
this.apiKey = apiKey;
@@ -170,6 +169,10 @@ class Upbond {
this.isIframeFullScreen = false;
this.isUsingDirect = false;
this.buildEnv = "production";
+ this.widgetConfig = {
+ showAfterLoggedIn: true,
+ showBeforeLoggedIn: false,
+ };
}
async init({
@@ -186,7 +189,7 @@ class Upbond {
tickerName: "",
},
loginConfig = defaultLoginParam,
- showUpbondButton = true,
+ widgetConfig,
integrity = {
check: false,
hash: iframeIntegrity,
@@ -206,21 +209,21 @@ class Upbond {
let buildTempEnv = buildEnv;
if (buildEnv === "v2_development") {
log.warn(
- `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+ `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.DEVELOPMENT' instead to point wallet on DEVELOPMENT environment.`
);
log.warn(`More information, please visit https://github.com/upbond/embed`);
buildTempEnv = "development";
}
if (buildEnv === "v2_production") {
log.warn(
- `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+ `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.PRODUCTION' instead to point wallet on PRODUCTION environment.`
);
log.warn(`More information, please visit https://github.com/upbond/embed`);
buildTempEnv = "production";
}
if (buildEnv === "v2_new-dev-local") {
log.warn(
- `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+ `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on LOCAL environment.`
);
log.warn(`More information, please visit https://github.com/upbond/embed`);
buildTempEnv = "new-dev-local";
@@ -229,13 +232,19 @@ class Upbond {
if (buildEnv.includes("v1")) {
log.warn(
- `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}`
+ `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL|DEVELOPMENT|STAGING|PRODUCTION' instead to point wallet on each environment`
);
log.warn(`More information, please visit https://github.com/upbond/embed`);
}
log.info(`Url Loaded: ${torusUrl} with log: ${logLevel}`);
+ if (!widgetConfig) {
+ log.info(`widgetConfig is not configured. Now using default widget configuration`);
+ } else {
+ this.widgetConfig = widgetConfig;
+ }
+
if (selectedVerifier) {
try {
const isAvailableOnLoginConfig = loginConfig[selectedVerifier];
@@ -261,7 +270,6 @@ class Upbond {
if (enableLogging) log.enableAll();
else log.disableAll();
- this.torusWidgetVisibility = showUpbondButton;
const upbondIframeUrl = new URL(torusUrl);
if (upbondIframeUrl.pathname.endsWith("/")) upbondIframeUrl.pathname += "popup";
else upbondIframeUrl.pathname += "/popup";
@@ -317,10 +325,10 @@ class Upbond {
whiteLabel: this.whiteLabel,
buttonPosition: this.buttonPosition,
buttonSize: this.buttonSize,
- torusWidgetVisibility: this.torusWidgetVisibility,
apiKey: this.apiKey,
skipTKey,
network,
+ widgetConfig: this.widgetConfig,
mfaLevel,
skipDialog,
selectedVerifier,
@@ -422,18 +430,26 @@ class Upbond {
this.isInitialized = false;
}
- hideTorusButton(): void {
- this.torusWidgetVisibility = false;
+ hideWidget(): void {
this._sendWidgetVisibilityStatus(false);
this._displayIframe();
}
- showUpbondButton(): void {
- this.torusWidgetVisibility = true;
+ showWidget(): void {
this._sendWidgetVisibilityStatus(true);
this._displayIframe();
}
+ showMenu(): void {
+ this._sendWidgetMenuVisibilityStatus(true);
+ this._displayIframe(true);
+ }
+
+ hideMenu(): void {
+ this._sendWidgetMenuVisibilityStatus(false);
+ this._displayIframe(false);
+ }
+
setProvider({ host = "mainnet", chainId = null, networkName = "", ...rest }: NetworkInterface): Promise {
return new Promise((resolve, reject) => {
const providerChangeStream = this.communicationMux.getStream("provider_change") as Substream;
@@ -689,18 +705,26 @@ class Upbond {
}
protected _sendWidgetVisibilityStatus(status: boolean): void {
- const torusWidgetVisibilityStream = this.communicationMux.getStream("torus-widget-visibility") as Substream;
- torusWidgetVisibilityStream.write({
+ const upbondButtonVisibilityStream = this.communicationMux.getStream("widget-visibility") as Substream;
+ upbondButtonVisibilityStream.write({
+ data: status,
+ });
+ }
+
+ protected _sendWidgetMenuVisibilityStatus(status: boolean): void {
+ const upbondButtonVisibilityStream = this.communicationMux.getStream("menu-visibility") as Substream;
+ upbondButtonVisibilityStream.write({
data: status,
});
}
protected _displayIframe(isFull = false): void {
+ console.log("onDisplay: ", isFull);
const style: Partial = {};
const size = this.buttonSize + 14; // 15px padding
// set phase
if (!isFull) {
- style.display = this.torusWidgetVisibility ? "block" : "none";
+ style.display = this.isLoggedIn ? "block" : !this.isLoggedIn ? "block" : "none";
style.height = `${size}px`;
style.width = `${size}px`;
switch (this.buttonPosition) {
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 41935f3..58d20ba 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -146,7 +146,7 @@ export type EMBED_TRANSLATION_ITEM = {
export type BUTTON_POSITION_TYPE = typeof BUTTON_POSITION[keyof typeof BUTTON_POSITION];
-export type WALLET_PATH = "transfer" | "topup" | "home" | "settings" | "history" | "discover";
+export type WALLET_PATH = "home" | "account";
export type ETHEREUM_NETWORK_TYPE =
| "ropsten"
| "rinkeby"
@@ -756,8 +756,28 @@ export interface IUpbondEmbedParams {
*/
buildEnv?: BuildEnv;
+ /**
+ * If using direct upbond embed will not going to open the window
+ * @defaultValue true
+ * @type {boolean}
+ * @memberof IUpbondEmbedParams
+ */
isUsingDirect?: boolean;
+ /**
+ * Upbond button state, you can configure the button will be shown after or before loggedIn
+ *
+ * @type {{
+ * showAfterLoggedIn: boolean;
+ * showBeforeLoggedIn: boolean;
+ * }}
+ * @memberof IUpbondEmbedParams
+ */
+ widgetConfig?: {
+ showAfterLoggedIn: boolean;
+ showBeforeLoggedIn: boolean;
+ };
+
/**
* Enables or disables logging.
*