imToken For Developers
Search…
SDK APIs
Modern SDK tools to help you access imToken's public APIs.
Introduction
With the
@consenlabs-fe/webview, you can easily access and use the various interfaces built into the imToken WebView environment. Whether you're migrating a DApp to imToken or adapting a Web application, you can quickly solve it with minimal code and minimal invasiveness.The SDK includes functions to obtain the language environment, common native UI, route navigation, scan QR codes, etc. The SDK itself does not contain dependencies and is only used as a tool to bond the host environment and will not cause any invasive damage to your project.
Features
Complete TypeScript support
All interfaces and methods have full type support.
Multi-module support
In modern front-end projects, the
esm mode is used by default, but we also provide cjs umd and ways.Promise
Based on v1, all our asynchronous interfaces support promise by default.
Community
We've added support for the community, where you can create a discussion for any questions about the API or tools.
Getting started
If you are looking for a complete project example, please check out the sample applications we have prepared:
Install
NPM: (recommended installation)
1
npm i @consenlabs-fe/webview
Copied!
Yarn:
1
yarn add @consenlabs-fe/webview
Copied!
CDN:
1
<script src="https://cdn.jsdelivr.net/npm/@consenlabs-fe/webview/dist/index.min.js" />
Copied!
Import and usage
Before you can use it, you need to
import the module:1
import TokenWebView from '@consenlabs-fe/webview'
Copied!
As a suggestion to maintain compatibility, we recommend that you always check the current environment first:
1
if (TokenWebView.isTokenEnv()) {
2
TokenWebView.apis.navigator.setTitle('hello world')
3
}
Copied!
​
API References
All API interfaces, types, and examples are listed here. In fact, if you are using TypeScript, you can already get good type hints in your project.
General
This is the API that comes with the root module and is usually used to check the environment and the processing of generic scenarios.
isTokenEnv
Check if the current context is imToken WebView and return a boolean value.
Types
1
type isTokenEnv = () => boolean
Copied!
Usage Example
1
console.log('Currently in imToken: ', TokenWebView.isTokenEnv())
Copied!
​
getVersion
Get the current version of the imToken App.
Types
1
type getVersion = () => string
Copied!
Usage Example
1
console.log('Currently version: ', TokenWebView.getVersion())
2
​
3
// output -> 'Currently version: 2.4.0'
Copied!
​
isGreaterThanOrEqualVersion
The current App version is greater than or equal to the specified value.
Types
1
type isGreaterThanOrEqualVersion = (version: string) => boolean
Copied!
Usage Example
1
const state = TokenWebView.isGreaterThanOrEqualVersion('2.1.0')
2
console.log('Version greater than or equal to 2.1.0: ', state )
3
​
4
// output -> 'Version greater than or equal to 2.1.0: true'
Copied!
​
compareSemver
Compare the two versions of the value and return the number.
Requires that the comparison value must be a semantic version of the string. The return value rules are the same as for the JavaScript sort function.
Types
1
type compareSemver = (versionA: string, versionB: string) => number
Copied!
Usage Example
1
const state = TokenWebView.compareSemver('2.1.0', '2.2.0')
2
console.log(state)
3
​
4
// output -> '0'
Copied!
​
isCancelError
Check if the current error was caused by a user cancellation.
Types
1
type isCancelError = (error: Error) => boolean
Copied!
Usage Example
1
try {
2
// ...
3
} catch (err) {
4
if (TokenWebView.isCancelError(err)) {
5
console.log('User cancelled the operation')
6
}
7
}
Copied!
​
ERRORS
Error constants. The source of the error message, most of the time you do not need to compare this constant.
Types
1
type ERRORS = Record<string, string>
Copied!
​
apis
API for communicating with the host environment, please see below for details.
​
device API
getCurrentLanguage
Get the current language environment, which usually comes from the user's settings within the imToken application.
Types
1
type getCurrentLanguage = () => Promise<string>
Copied!
Usage Example
1
const language = await TokenWebView.apis.device.getCurrentLanguage()
2
console.log(language)
3
​
4
// output -> 'en-us'
Copied!
​
getCurrentCurrency
Get the current currency, returns the currency string.
Types
1
type getCurrentCurrency = () => Promise<string>
Copied!
Usage Example
1
const currency = await TokenWebView.apis.device.getCurrentCurrency()
2
console.log(currency)
3
​
4
// output -> 'CNY'
Copied!
​
native API
Provide native platform UI and interaction capabilities.
alert
Display the string as an alert box.
Types
1
type alert = (content: string) => void
Copied!
Usage Example
1
TokenWebView.apis.native.alert('hello world!')
Copied!
​
confirm
Display the string as a confirm box.
A user clicks on the confirm or cancel button action will be returned as a Boolean value.
Types
1
type confirm = (content: {
2
title: string
3
message: string
4
cancelText: string
5
confirmText: string
6
}) => Promise<boolean>
Copied!
Usage Example
1
const isConfirmDeletion = await TokenWebView.apis.native.confirm({
2
title: 'Second Confirmation',
3
message: 'Remove current connection?',
4
confirmText: 'ok',
5
cancelText: 'NO',
6
})
Copied!
​
setLoading
Set the entire WebView to the loading state.
If you do not actively cancel this status, users will not be able to operate. The loaded state will block all interactive events.
Types
1
type setLoading = (visible: boolean) => void
Copied!
Usage Example
1
if (myTaskLoading) {
2
TokenWebView.apis.native.setLoading(true)
3
}
Copied!
​
share
Share a link or picture.
If the shared content is an image, it needs to be pre-converted to
base64 format.The success of the sharing depends on the user's confirmation and whether the user allows permissions.
Types
1
type ShareParamsDefault = {
2
title: string
3
message: string
4
url: string
5
}
6
​
7
type ShareParamsImage = {
8
title: string
9
image: string
10
}
11
​
12
type share = (params: ShareParamsDefault & ShareParamsImage) => Promise<boolean>
Copied!
Usage Example
1
const isSuccess = await TokenWebView.apis.native.share({
2
title: 'Share',
3
message: 'Share this page with others',
4
url: location.href,
5
})
Copied!
​
scanQRCode
Evoke the camera to scan the QR code, if the scan is successful, the parsed string will be returned.
Types
1
type scanQRCode = () => Promise<string>
Copied!
Usage Example
1
try {
2
const text = await TokenWebView.apis.native.scanQRCode()
3
} catch (err) {
4
console.log('scan failed.')
5
}
6
​
Copied!
​
setClipboard
Filling the user's clipboard with strings.
Types
1
type setClipboard = (text: string) => void
Copied!
Usage Example
1
TokenWebView.apis.native.setClipboard('address')
2
​
Copied!
​
navigator API
Routing navigation and settings page.
closeDapp
Close the current DApp.
Types
1
type closeDapp = () => void
Copied!
Usage Example
1
TokenWebView.apis.navigator.closeDapp()
Copied!
​
goBack
Returns the previous level of routing, or closes the app if there is no routing stack.
Types
1
type goBack = () => void
Copied!
Usage Example
1
TokenWebView.apis.navigator.goBack()
Copied!
​
routeTo
Navigate to a specific screen.
Types
1
type RouteToParams = {
2
screen: string
3
props: {
4
title: string
5
url: string
6
}
7
}
8
​
9
type routeTo = (params: RouteToParams) => void
Copied!
Usage Example
1
// Jump to other DApps
2
​
3
TokenWebView.apis.navigator.routeTo({
4
screen: 'DappView',
5
props: {
6
title: 'DApp API Examples',
7
url: 'https://consenlabs.github.io/',
8
},
9
})
Copied!
​
getOrientation
Get the direction of the current device.
Types
1
type Orientation = 'LANDSCAPE' | 'PORTRAIT'
2
​
3
type getOrientation = () => Promise<Orientation>
Copied!
Usage Example
1
const orientation = await TokenWebView.apis.navigator.getOrientation()
2
console.log(orientation)
3
​
4
// output -> 'LANDSCAPE'
Copied!
​
setOrientation
Set the orientation of the current device, which can be very helpful when playing multimedia messages.
Types
1
type Orientation = 'LANDSCAPE' | 'PORTRAIT'
2
​
3
type setOrientation = (orientation: Orientation) => void
Copied!
Usage Example
1
TokenWebView.apis.navigator.setOrientation('LANDSCAPE')
Copied!
​
setTitle
Dynamically set DApp title. No effect to
document.title.Types
1
type setTitle = (title: string) => void
Copied!
Usage Example
1
TokenWebView.apis.navigator.setTitle('MY DAPP')
Copied!
​
user API
showAccountSwitch
Show switchable user wallets. If the switch is successful, the new address will be returned.
Types
1
type ChainType =
2
| 'ETHEREUM'
3
| 'BITCOIN'
4
| 'LITECOIN'
5
| 'EOS'
6
| 'COSMOS'
7
| 'TRON'
8
| 'BITCOINCASH'
9
| 'NERVOS'
10
| 'KUSAMA'
11
| 'POLKADOT'
12
| 'FILECOIN'
13
14
type showAccountSwitch = (chainType: ChainType | null) => Promise<string>
Copied!
Usage Example
1
const address = await TokenWebView.apis.user.showAccountSwitch('ETHEREUM')
2
console.log(address)
3
​
4
// output -> '0x...'
Copied!
​
layout API
setOptions
Set the frame layout style of the WebView.
This updates the layout of the current WebView synchronously and can only be applied after the page has been loaded and parsed. If you want to make changes to the layout while the page is loading, please refer to our preload configuration documentation.
Types
1
type HexColor = `#${string}`
2
type StatusBarStyle = 0 | 1 | 2
3
​
4
type WebViewLayoutOptions = {
5
background?: HexColor | Array<HexColor>
6
foreground?: HexColor
7
isTitleLeft?: boolean
8
titleSize?: number
9
isTransparent?: boolean
10
transparentScrollY?: number
11
loadingBackground?: HexColor
12
loadingForeground?: HexColor
13
bodyBackground?: HexColor
14
bodyForeground?: HexColor
15
statusBarStyle?: StatusBarStyle
16
}
17
​
18
type setOptions = (options: WebViewLayoutOptions) => void
Copied!
Usage Example
1
TokenWebView.apis.layout.setOptions({
2
background: '#000000',
3
titleSize: 20,
4
})
Copied!
​
internal API
Unstable API, mainly for advanced user custom development and debugging.
Last modified 7mo ago