SDK APIs
Modern SDK tools to help you access imToken's public APIs.
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.
All interfaces and methods have full type support.
In modern front-end projects, the
esm mode is used by default, but we also provide cjs umd and ways.Based on v1, all our asynchronous interfaces support promise by default.
We've added support for the community, where you can create a discussion for any questions about the API or tools.
If you are looking for a complete project example, please check out the sample applications we have prepared:
NPM: (recommended installation)
npm i @consenlabs-fe/webview
Yarn:
yarn add @consenlabs-fe/webview
CDN:
<script src="https://cdn.jsdelivr.net/npm/@consenlabs-fe/webview/dist/index.min.js" />
Before you can use it, you need to
import the module:import TokenWebView from '@consenlabs-fe/webview'
As a suggestion to maintain compatibility, we recommend that you always check the current environment first:
if (TokenWebView.isTokenEnv()) {
TokenWebView.apis.navigator.setTitle('hello world')
}
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.
This is the API that comes with the root module and is usually used to check the environment and the processing of generic scenarios.
Check if the current context is imToken WebView and return a boolean value.
Types
type isTokenEnv = () => boolean
Usage Example
console.log('Currently in imToken: ', TokenWebView.isTokenEnv())
Get the current version of the imToken App.
Types
type getVersion = () => string
Usage Example
console.log('Currently version: ', TokenWebView.getVersion())
// output -> 'Currently version: 2.4.0'
The current App version is greater than or equal to the specified value.
Types
type isGreaterThanOrEqualVersion = (version: string) => boolean
Usage Example
const state = TokenWebView.isGreaterThanOrEqualVersion('2.1.0')
console.log('Version greater than or equal to 2.1.0: ', state )
// output -> 'Version greater than or equal to 2.1.0: true'
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
type compareSemver = (versionA: string, versionB: string) => number
Usage Example
const state = TokenWebView.compareSemver('2.1.0', '2.2.0')
console.log(state)
// output -> '0'
Check if the current error was caused by a user cancellation.
Types
type isCancelError = (error: Error) => boolean
Usage Example
try {
// ...
} catch (err) {
if (TokenWebView.isCancelError(err)) {
console.log('User cancelled the operation')
}
}
Error constants. The source of the error message, most of the time you do not need to compare this constant.
Types
type ERRORS = Record<string, string>
API for communicating with the host environment, please see below for details.
Get the current language environment, which usually comes from the user's settings within the imToken application.
Types
type getCurrentLanguage = () => Promise<string>
Usage Example
const language = await TokenWebView.apis.device.getCurrentLanguage()
console.log(language)
// output -> 'en-us'
Get the current currency, returns the currency string.
Types
type getCurrentCurrency = () => Promise<string>
Usage Example
const currency = await TokenWebView.apis.device.getCurrentCurrency()
console.log(currency)
// output -> 'CNY'
Provide native platform UI and interaction capabilities.
Display the string as an alert box.
Types
type alert = (content: string) => void
Usage Example
TokenWebView.apis.native.alert('hello world!')
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
type confirm = (content: {
title: string
message: string
cancelText: string
confirmText: string
}) => Promise<boolean>
Usage Example
const isConfirmDeletion = await TokenWebView.apis.native.confirm({
title: 'Second Confirmation',
message: 'Remove current connection?',
confirmText: 'ok',
cancelText: 'NO',
})
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
type setLoading = (visible: boolean) => void
Usage Example
if (myTaskLoading) {
TokenWebView.apis.native.setLoading(true)
}
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
type ShareParamsDefault = {
title: string
message: string
url: string
}
type ShareParamsImage = {
title: string
image: string
}
type share = (params: ShareParamsDefault & ShareParamsImage) => Promise<boolean>
Usage Example
const isSuccess = await TokenWebView.apis.native.share({
title: 'Share',
message: 'Share this page with others',
url: location.href,
})
Evoke the camera to scan the QR code, if the scan is successful, the parsed string will be returned.
Types
type scanQRCode = () => Promise<string>
Usage Example
try {
const text = await TokenWebView.apis.native.scanQRCode()
} catch (err) {
console.log('scan failed.')
}
Filling the user's clipboard with strings.
Types
type setClipboard = (text: string) => void
Usage Example
TokenWebView.apis.native.setClipboard('address')
Routing navigation and settings page.
Close the current DApp.
Types
type closeDapp = () => void
Usage Example
TokenWebView.apis.navigator.closeDapp()
Returns the previous level of routing, or closes the app if there is no routing stack.
Types
type goBack = () => void
Usage Example
TokenWebView.apis.navigator.goBack()
Navigate to a specific screen.
Types
type RouteToParams = {
screen: string
props: {
title: string
url: string
}
}
type routeTo = (params: RouteToParams) => void
Usage Example
// Jump to other DApps
TokenWebView.apis.navigator.routeTo({
screen: 'DappView',
props: {
title: 'DApp API Examples',
url: 'https://consenlabs.github.io/',
},
})
Get the direction of the current device.
Types
type Orientation = 'LANDSCAPE' | 'PORTRAIT'
type getOrientation = () => Promise<Orientation>
Usage Example
const orientation = await TokenWebView.apis.navigator.getOrientation()
console.log(orientation)
// output -> 'LANDSCAPE'
Set the orientation of the current device, which can be very helpful when playing multimedia messages.
Types
type Orientation = 'LANDSCAPE' | 'PORTRAIT'
type setOrientation = (orientation: Orientation) => void
Usage Example
TokenWebView.apis.navigator.setOrientation('LANDSCAPE')
Dynamically set DApp title. No effect to
document.title.Types
type setTitle = (title: string) => void
Usage Example
TokenWebView.apis.navigator.setTitle('MY DAPP')
Show switchable user wallets. If the switch is successful, the new address will be returned.
Types
type ChainType =
| 'ETHEREUM'
| 'BITCOIN'
| 'LITECOIN'
| 'EOS'
| 'COSMOS'
| 'TRON'
| 'BITCOINCASH'
| 'NERVOS'
| 'KUSAMA'
| 'POLKADOT'
| 'FILECOIN'
type showAccountSwitch = (chainType: ChainType | null) => Promise<string>
Usage Example
const address = await TokenWebView.apis.user.showAccountSwitch('ETHEREUM')
console.log(address)
// output -> '0x...'
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
type HexColor = `#${string}`
type StatusBarStyle = 0 | 1 | 2
type WebViewLayoutOptions = {
background?: HexColor | Array<HexColor>
foreground?: HexColor
isTitleLeft?: boolean
titleSize?: number
isTransparent?: boolean
transparentScrollY?: number
loadingBackground?: HexColor
loadingForeground?: HexColor
bodyBackground?: HexColor
bodyForeground?: HexColor
statusBarStyle?: StatusBarStyle
}
type setOptions = (options: WebViewLayoutOptions) => void
Usage Example
TokenWebView.apis.layout.setOptions({
background: '#000000',
titleSize: 20,
})
Unstable API, mainly for advanced user custom development and debugging.
Last modified 2yr ago