Upbond Embed

with npm

npm install @upbond/upbond-embed

with yarn

yarn add @upbond/upbond-embed 

Initialization

This is the main class of anything related to Upbond Embed

constUpbond=require("@upbond/upbond-embed");

Using ES6

importUpbondfrom"@upbond/upbond-embed";

Then, create a new instance of Upbond

constupbond=newUpbond(options);

Parameters

• options (optional) : The options of the constructor
  • buttonPosition (optional) : string, default is BOTTOM_LEFT
    The position of the Upbond button. Supported values are top-leftbottom-lefttop-rightbottom-right. Or you can following this code:

  BOTTOM_LEFT: "bottom-left",TOP_LEFT: "top-left",BOTTOM_RIGHT: "bottom-right",TOP_RIGHT: "top-right",

  • buttonSize (optional) : number, default is 56
  • modalZIndex (optional): number, default is 99999

Then, initialize Upbond embed

awaitupbond.init({buildEnv: UPBOND_BUILD_ENV.PRODUCTION});

Initializing with idToken from Login 3.0

In addition to the standard initialization method, UPBOND Embed can be initialized using an idToken from Login 3.0 to the state variable This allows developers to bypass the upbond.login() function, directly creating a login session. Please refer to the Login 3.0 sample codes for the implementation.

awaitthis.upbond.init({state: idToken});

Parameters

• buildEnv (required): UPBOND_BUILD_ENV build environment settings: Build environments are divided into 3 types of environment usages: production and staging. Below is the definition or UPBOND_BUILD_ENV in the embed library.

 PRODUCTION: "production",
STAGING: "staging",
.
.
.

UPBOND_BUILD_ENV.PRODUCTION, UPBOND_BUILD_ENV.STAGING always point to the newest environment.

• widgetConfig (optional): Configuration to show embed button before or after logins.

 widgetConfig: {showAfterLoggedIn: true,showBeforeLoggedIn: false,}

• network (optional): Blockchain network configuration to connect. Default to matic network.

network: {host: "mumbai",chainId: 80001,networkName: "Mumbai",blockExplorer: "",ticker: "MUMBAI",tickerName: "MUMBAI",rpcUrl: "https://polygon-testnet.public.blastapi.io/",}

• dappRedirectUri (optional): Redirect URI after successful login from Embed. Default to the dApps URI. ${window.location.origin}/

 dappRedirectUri: "https://demo-dapps.com"

Examples

importUpbond,{UPBOND_BUILD_ENV,BUTTON_POSITION_TYPE}from"@upbond/upbond-embed";constupbond=newUpbond({buttonPosition: BUTTON_POSITION_TYPE.BOTTOM_LEFT,// default: 'bottom-left'buttonSize: 56,// optionalmodalZIndex: 150,// optional});awaitupbond.init({buildEnv: UPBOND_BUILD_ENV.PRODUCTION,widgetConfig: {showAfterLoggedIn: true,showBeforeLoggedIn: false,},network: {host: "mumbai",chainId: 80001,networkName: "Mumbai",blockExplorer: "",ticker: "MUMBAI",tickerName: "MUMBAI",rpcUrl: "https://polygon-testnet.public.blastapi.io/",},dappRedirectUri: "https://demo-dapps.com"});

Cleanup

This cleans up the iframe and buttons created by upbond package. If the user is logged in, it logs him out first and then cleans up. This will be return Promise<void>: Returns a promise which resolves to void. Examples:

awaitupbond.cleanUp();

ACCOUNT

user account management

Login

Prompts the user to login if they are not logged in. If an OAuth verifier is not provided, a modal selector will be shown.

Examples:

importUpbond,{UPBOND_BUILD_ENV,BUTTON_POSITION_TYPE}from"@upbond/upbond-embed";// Your code ...constupbond=newUpbond({buttonPosition: BUTTON_POSITION_TYPE.BOTTOM_LEFT,buttonSize: 56,modalZIndex: 150});const[initialized,setInitialized]=useState(false)useEffect(()=>{constinit=async()=>{awaitupbond.init({buildEnv: UPBOND_BUILD_ENV.PRODUCTION});setInitialized(true)}if(!initialized){init()}},[])constloginEmbed=async()=>{try{awaitupbond.login();}catch(err){thrownewError(err)}}return(// render yours)

Logout

Logs the user out of Upbond. Requires that a user is logged in already.

Examples:

importUpbond,{UPBOND_BUILD_ENV,BUTTON_POSITION_TYPE}from"@upbond/upbond-embed";// Your code ...constupbond=newUpbond({buttonPosition: BUTTON_POSITION_TYPE.BOTTOM_LEFT,buttonSize: 56,modalZIndex: 150});const[initialized,setInitialized]=useState(false)useEffect(()=>{constinit=async()=>{awaitupbond.init({buildEnv: UPBOND_BUILD_ENV.PRODUCTION});setInitialized(true)}if(!initialized){init()}},[])constlogout=async()=>{try{awaitupbond.logout();}catch(err){thrownewError(err)}}return(// render yours)

GetUserInfo

Returns the logged-in user's info including name, email, and imageUrl. Only works if the user is logged in. In every session, only the first call opens the popup for the user's consent to access this information. All subsequent requests within the session don't trigger the popup.

Examples:

constuserInfo=awaitupbond.getUserInfo();

Returns

• Promise<UserInfo> : Returns a promise which resolves to UserInfo object.

interfaceUserInfo{email: string;name: string;profileImage: string;verifier: string;verifierId: string;}

Web3 Provider

assign upbond provider to use in Web3

Use Upbond Provider

Examples

importweb3from'web3'constupbond=newUpbond({buttonPosition: BUTTON_POSITION_TYPE.BOTTOM_LEFT,buttonSize: 56,modalZIndex: 150});/* ... Your upbond embed code ...  You need to login to upbond embed first for get the ethereum  provider returned from upbond embed*/constweb3=newWeb3(upbond.provider);constaccount=awaitweb3.eth.getAccounts()//[0x000] - your account

EIP-1193

handling some function eip-1193 function EIP-1193

Examples:

importweb3from'web3'importUpbond,{UPBOND_BUILD_ENV,BUTTON_POSITION_TYPE}from"@upbond/upbond-embed";constupbond=newUpbond();constupbond=newUpbond({buttonPosition: BUTTON_POSITION_TYPE.BOTTOM_LEFT,buttonSize: 56,modalZIndex: 150});/* ... Your upbond embed code ...  You need to login to upbond embed first for get the ethereum  provider returned from upbond embed*/upbond.provider.on("chainChanged",(resp)=>{console.log(resp,"chainchanged");});upbond.provider.on("accountsChanged",(accounts)=>{console.log(accounts,"accountsChanged");});

If you want to use the upbond provider, sure you can use on a react lifecycles like this:

useEffect(()=>{if(upbond.provider){if(upbond.provider.on){upbond.provider.on("chainChanged",(resp)=>{console.log(resp,"chainchanged");});upbond.provider.on("accountsChanged",(accounts)=>{console.log(accounts,"accountsChanged");});}}},[upbond.provider])

Dapps Example

React

You can check this out here

Demo Dapps

You can also check our example in action here

Whitelabel Example

Use whiteLabel option inside the init configuration.

Example in React:

importUpbondfrom"@upbond/upbond-embed";constExample=()=>{constupbond=newUpbond({})constinit=async()=>{awaitupbond.init({whiteLabel: {walletTheme: {name: "Sample App",lang: "ja",logo: "https://miro.medium.com/max/1200/1*jfdwtvU6V6g99q3G7gq7dQ.png",buttonLogo: "https://cdn.freebiesupply.com/images/large/2x/medium-icon-white-on-black.png",modalColor: "#f3f3f3",bgColor: "#214999",bgColorHover: "#f3f3f3",textColor: "#f3f3f3",textColorHover: "#214999",upbondLogin: {globalBgColor: "#f3f3f3",globalTextColor: "#214999"}}},})}useEffect(()=>init(),[])return(// ...)}

Example in Vue:

<script>
import Upbond from "@upbond/upbond-embed";
const upbond = new Upbond();
const init = async () =>{awaitupbond.init({whiteLabel: {walletTheme: {name: "Sample App",lang: "ja",logo: "https://miro.medium.com/max/1200/1*jfdwtvU6V6g99q3G7gq7dQ.png",buttonLogo: "https://cdn.freebiesupply.com/images/large/2x/medium-icon-white-on-black.png",modalColor: "#f3f3f3",bgColor: "#214999",bgColorHover: "#f3f3f3",textColor: "#f3f3f3",textColorHover: "#214999",upbondLogin: {globalBgColor: "#ffffff",globalTextColor: "#214999"}}},})}
export default {mounted(){init()}}</script><template>// ...</template>

Whitelabel wallet theme option

Setting up the color theme and logo.

whiteLabel: {/* wallet theme */walletTheme: {// othername: "Sample App",lang: "ja",// Logo setuplogo: "path or url",buttonLogo: "path or url",// Color theme setupmodalColor: "color hex",bgColor: "color hex",bgColorHover: "color hex",textColor: "color hex",textColorHover: "color hex",// Upbond login theme setupupbondLogin: {globalBgColor: "color hex",globalTextColor: "color hex"}}}

• name let you setup the application’s name.
• lang let you setup the wallet's language. Current options include en for English and ja for Japanese. Default is English.
• logo let you setup logo that will be displayed the login popup.
• buttonLogo let you setup the logo for the flying wallet button.
• modalColor let you setup the background color for the login popup.
• bgColor let you setup the buttons background color.
• bgColorHover let you setup the hovered buttons background color.
• textColor let you setup the color of the buttons text and some text on the notification popup.
• textColorHover let you setup the color of the hovered text inside buttons and some text on the notification popup.
• upbondLogin.globalBgColor let you setup the color of the background on Upbond login site.
• upbondLogin.globalTextColor let you setup the color of the text on Upbond login site.

Example white-labelled UI

Current version

version: v2.x