@wepin/widget-sdk v0.5.6

@wepin/widget-sdk

.

Wepin Widget Javascript SDK for Web. This package is only available in the web environment. It cannot be used in Android and iOS apps (Webview).

:fast_forward: Get App ID and Key

Contact to wepin.contact@iotrust.kr

:fast_forward: Install

npm install @wepin/widget-sdk

or

yarn add @wepin/widget-sdk

:fast_forward: Import SDK

import '@wepin/widget-sdk'

var Wepin = window.Wepin

or

<script src="https://cdn.jsdelivr.net/npm/@wepin/widget-sdk@0.0.2-alpha/dist/wepin-widget-sdk.js" defer async></script>

⏩ Initialize

Methods about initializing Wepin SDK

init

await Wepin.init(appId, appKey[, attributes])

Parameters

• appId \
• appKey \
• attributes \ optional
  • Type of attributes is assigned at @wepin/types as IAttributes
    • type: The type of display of widget as wepin is initiated (defalut: 'hide)
      • 'hide' | 'show'
    • defaultLanguage: The language to be displayed on the widget (default: 'ko')
      • Currently, only 'ko' and 'en' are supported.
    • defaultCurrency: The currency to be displayed on the widget (default: 'KRW')
    • loginProviders: An array of login providers to configure the widget. (If not provided, all available login providers will be displayed on the widget.)
      • The loginProviders parameter accepts values defined in the LoginProviders of @wepin/types, starting from version v0.0.11.

Example

await Wepin.init('APPID', 'APPKEY', {
  type: 'hide',
  defaultLanguage: 'en',
  defaultCurrency: 'USD',
  loginProviders: ['google', 'apple'],
})

isInitialized

Wepin.isInitialized()

The isInitialized() method checks Wepin SDK is initialized.

Return value

• \
  • true if Wepin SDK is already initialized.

⏩ Methods

Methods can be used after initialization of Wepin SDK.

openWidget

await Wepin.openWidget()

The openWidget() method shows Wepin widget. If a user is not logged in, Wepin widget will show login page.

Return value

• Promise \

closeWidget

Wepin.closeWidget()

The closeWidget() method closes Wepin widget.

Return value

• undefined

getAccounts

await Wepin.getAccounts()
await Wepin.getAccounts(networks)

The getAccounts() method returns user accounts. If user is not logged in, Wepin widget will be opened and show login page. It is recommended to use getAccounts() method without argument to get all user accounts.

Parameters

• networks \ optional
  • network \ optional

Example

var accounts = await Wepin.getAccounts(['Ethereum'])

Return value

• Promise \
  • If user is logged in, it returns a Promise object resolved with array of account of networks.
    • Type of account is assigned at @wepin/types as IAccount
    • account \
      • address \
      • network \
      • contract \ optional token contract address. It is assigned at @wepin/types(Support from version 0.0.12) as IAccount
  • If networks aren't passed, it returns a Promise object resolved with array of account of all networks.
  • Example

    ;[
      {
        address: '0x0000001111112222223333334444445555556666',
        network: 'Ethereum',
      },
      {
        address: '0x0000001111112222223333334444445555556666',
        network: 'Ethereum',
        contract: '0x777777888888999999000000111111222222333333',
      },
    ]

• Promise \
  • If user is not logged in, it returns Promise \.

getStatus (Support from version 0.3.1)

Wepin.getStatus()

The getStatus() method returns lifecycle of wepin.

Example

var status = Wepin.getStatus()

Return value

• \
  • The WepinLifeCycle is defined at @wepin/types as (Support from version 0.0.7)
    • not_initialized: if wepin is not initialized
    • initializing: if wepin is initializing
    • initialized: if wepin is initialized
    • before_login: if wepin is initialized but the user is not logged in
    • login: if the user is logged in

login(Support from version 0.3.1)

await Wepin.login()

The login() method returns information of the logged-in user. If a user is not logged in, Wepin widget will show login page.

Parameters(Support from version 0.3.2)

• email \ optional
  • The email parameter allows users to log in using the specified email address, providing access to the login service.

Example

var userInfo = await Wepin.login()

// Use specified Email
var userInfo = await Wepin.login('wepin@wepin.io')

Return value

• Promise \

  • Type of IWepinUser is defined in @wepin/types (Support from version 0.0.7)

    • status \<'success'|'fail'>
    • userInfo \ optional
      • userId \
      • email \
      • provider \<'google'|'apple'|'naver'|'discord'|'email'|'external_token'>

  • Example

    {
    	status: 'success',
    	userInfo: {
    		userID: '123455',
    		email: 'abc@test.com',
    		provider: 'google'
            }
    }

logout (Support from version 0.3.1)

await Wepin.logout()

The logout() method performs a wepin logout .

Return value

• Promise \

Example

await Wepin.logout()

finalize (Support from version 0.3.1)

Wepin.finalize()

The finalize() methodfinalizes the Wepin SDK

Return value

• void

Example

Wepin.finalize()

loginWithExternalToken(Support from version 0.5.1)

await Wepin.loginWithExternalToken(token, sign, withUI?)

It logs in to the Wepin with external token(e.g., idToken). The loginWithExternalToken() method returns information of the logged-in user.

If the user is not registered on Wepin, and the withUI value is set to true, the registration page will be displayed in the widget. However, if the withUI value is set to false or not defined, a require/wepin-register exception will be triggered.

Parameters

• token \

  • External token value to be used for login (e.g., idToken).

• sign \

  • Signature value for the token provided as the first parameter.(Signature Generation Methods)

• withUI \ optional

  • Indicates whether to display the Wepin widget screen if registration is required.

Example

var userInfo = await Wepin.loginWithExternalToken(idToken, sign)

// Use register UI
var userInfo = await Wepin.loginWithExternalToken(idToken, sign, true)

Return value

• Promise \

  • Type of IWepinUser is defined in @wepin/types (Support from version 0.0.7)

    • status \<'success'|'fail'>
    • userInfo \ optional
      • userId \
      • email \
      • provider \<'external_token'>

  • Example

    {
    	status: 'success',
    	userInfo: {
    		userID: '123455',
    		email: 'abc@test.com',
    		provider: 'external_token'
            }
    }

Exception message

• Admin Error Message
  • require/wepin-register : If this error occurs, you have to perform the wepin.register(pin) method.

signUpWithEmailAndPassword (Support from version 0.5.1)

It signs up on the wepin with your email and password.

Wepin.signUpWithEmailAndPassword(email, password)

Parameters

• email \ - User email
• password \ - User password

Return value

• Promise \

  • Returns true if the signup is successful.

Exception message

• Admin Error Message

Example

const result = await Wepin.signUpWithEmailAndPassword(
  'test@test.com',
  'abcd12345'
)

loginWithEmailAndPassword(Support from version 0.5.1)

It logs in to the Wepin with your email and password.

await Wepin.loginWithEmailAndPassword(email, password)

Parameters

• email \ - User email
• password \ - User password

Return value

• Promise \

  • Type of IWepinUser is defined in @wepin/types (Support from version 0.0.8)

    • status \<'success'|'fail'>
    • userInfo \ optional
      • userId \
      • email \
      • provider \<'email'>

  • Example

    {
    	status: 'success',
    	userInfo: {
    		userID: '123455',
    		email: 'test@test.com',
    		provider: 'email'
            }
    }

Exception message

• Admin Error Message
  • require/wepin-register : If this error occurs, you have to perform the wepin.register(pin) method.

Example

const result = await Wepin.loginWithEmailAndPassword(
  'test@test.com',
  'abcd12345'
)

register(Support from version 0.5.1)

It registers in the Wepin with a wallet pin.

After the signup and login are completed, the Wepin service registration (wallet and account creation) will proceed.

await Wepin.register(pin)

Parameters

• pin \ - Wallet PIN

Return value

• Promise \

  • Returns true if the registeration is successful.
  • After register success, the wepin.login(email, password) method have to be performed again.

Exception message

• Admin Error Message

Example

const result = await Wepin.register('123456')

getBalance(Support from version 0.5.1)

It returns the account's balance information. It can be only usable after widget login.

await Wepin.getBalance(account)

Parameters

• account \<IAccount> -
  • Type of IAccount is defined in @wepin/types

Return value

• Promise \<IAccountBalance>

  • Type of IAccountBalance and ITokenBalance is defined in @wepin/types (Support from version 0.0.8)

    • symbol \ - symbol of account
    • balance \ - balance of account
    • tokens \<Array<ITokenBalance>> - token balance information for account
      • contract \ - token contract address
      • symbol \ - token symbol
      • balance \ - token balance

  • Example

    {
    	symbol: 'ETH',
            balance: '1.1',
    	tokens:[
    		{
    			contract: '0x123...213',
    			symbol: 'TEST',
    			balance: '10'
    		},
    	]
    }

Exception message

• Admin Error Message

Example

const result = Wepin.getBalance({
  address: '0x0000001111112222223333334444445555556666',
  network: 'Ethereum',
})

send(Support from version 0.5.3)

It returns the sent transaction id information. It can be only usable after widget login.

awit Wepin.send(account, options?)

Parameters

• account \<IAccount> - account value
  • Type of IAccount is defined in @wepin/types
• options \<ISendOptions> -
  • Type of ISendOptions is defined in @wepin/types (Support from version 0.0.12)

Return value

• Promise \<string>

  • Returns tx id if the send transaction is successful.

  • Example

    '0x0000001111112222223333334444445555556666.............aaaaaabbbbbbccccccddddddeeeeeeffffff'

Exception message

• Admin Error Message

Example

// without options
const result = Wepin.send({
  address: '0x0000001111112222223333334444445555556666',
  network: 'Ethereum',
})

// with options
const result = Wepin.send(
  {
    address: '0x0000001111112222223333334444445555556666',
    network: 'Ethereum',
  },
  { amount: '0.1', toAddress: '0x777777888888999999000000111111222222333333' }
)

Admin Error Message

The error message types of the admin method are as follows.

⏩Provider(Support from version 0.3.2)

Wepin Provider Widget SDK for Web.

This package is only available in the web environment. It cannot be used in Android and iOS apps(Webview).

Wipin supports providers that return JSON-RPC request responses to connect with blockchain networks in webs. With Wipin Provider, you can easily connect to various networks supported by Wipin.

The providers supported by Wipin are as follows.

• EVM compatible Networks
• Klaytn Network (Comming soon)

EVM compatible Networks

Ethers.js or Web3.js can be used with Wepin Provider to interoperate with EVM compatible blockchains.

Support Networks

getProvider

It returns a Provider by given network.

Wepin.getProvider({ network })

Parameter

• network \ - Available chains Wepin helps provide.(Network variables)

Return vlaue

• EIP-1193 provider.

Example

const provider = Wepin.getProvider({ network: 'ethereum' })

‼️ Caution ‼️

If you intend to use the provider, make sure to log in to Wepin and call the Wepin.getAccounts() method to verify the supported networks. If the logged-in account changes , the supported networks might change as well, requiring you to set the provider again after calling the new Wepin.getAccounts() method.

Method

• Get Accounts
  • You can receive account information through the initialized web3.

const accounts = await web3.eth.getAccounts()

• Get Balance
  • You can check the account balance using the account information.

const balance = await web3.eth.getBalance(accounts[0])

Please refer to the document below for instructions on how to check the balance, fee details, block numbers, etc.

• web3.js: web3.js 1.0.0 documentation
• ethers.js: ethers.js 5.7 documentaion

• Send Transaction Transaction can be sent.

const accounts = await web3.eth.getAccounts()
const tx = {
  from: accounts[0],
  gasPrice: '2000000000',
  gas: '21000',
  to: '0x11f4d0A3c1......13F7E19D048276DAe',
  value: '10000000000000000',
}
const response = await web3.eth.sendTransaction(tx)

• Contract Call A contract call can be performed.

const callObject = {
  to: '0x11f4d0A3c12e86B4b5F39B213F7E19D048276DAe', //contract address
  data: '0xc6888fa10000000000000000000000000000000000000000000000000000000000000003',
}
const response = await web3.eth.call(callObject)

For details of Ethereum compatible network providers, please refer to the link below.

EIP-1193: Ethereum Provider Javascript API