Cypher On-Boarding SDK

Cypher On-Boarding SDK was created to solve the Cold Start Problem in dApp User Onboarding where users have to rely on 3rd party sources for on-ramp, bridging and go through a steep learning curve.

Immediately after the user connects the wallet, Cypher On-Boarding SDK with just a line of code intelligently understands the context of the user on multiple-chains and suggests different options in which they can bridge or on-ramp the necessary token before using the dApp.

Example Code Snippet

<script src="https://public.cypherd.io/sdk/cypher-sdk.js"></script>

// For Testnet

window.Cypher({ 
  address: '0xdEc1bc71bf91431D60eF2742f412DCd1c5A204B8',
  targetChainIdHex: '0x5', // Eth - Goerli
  requiredTokenBalance: 65,
  isTestnet: true,
  theme:'light',
  callBack: () => { console.log('callBack called'); }
});


// For Mainnet 

window.Cypher({
  appId: '<<app id for your account>>' 
  address: '0xdEc1bc71bf91431D60eF2742f412DCd1c5A204B8',
  targetChainIdHex: '0x1', // Ethereum
  requiredTokenBalance: 0.1,
  callBack: () => { console.log('callBack called'); }
});

Args Value Description

Args	Value	Description
appId	STRING : UUID	Optional (but required for production development) to unlock partner benefits. Reachout to us on support(at)cypherwallet(dot)io get the key
*address	STRING	User wallet address
*targetChainIdHex	STRING	Chain ID in hex
*requiredTokenBalance	Number	Token value
requiredTokenContractAddress	STRING: Optional	Native Currency by default or ERC-20 contract address
isTestnet	Boolean: Optional	Default: False, When enabled only testnets will be included.
callBack (boolean)	Function: Optional	Callback function will be triggered at the end of the onboarding workflow with boolean value
theme	Enum : 'light' \| 'dark'	UI theme. Dark mode by default
connector	walletconnect's connector instance	applicable only for walletconnect
provider	walletconnect's provider instance	applicable only for walletconnect
showInfoScreen	Boolean	Defaults to `false.` To show users an intro page to set context on this operation.
parentComponentId	STRING: Optional	Default: '' ( empty string ) ONLY NEEDED IN CASE OF WIDGET.

appId

STRING : UUID

Optional (but required for production development) to unlock partner benefits. Reachout to us on support(at)cypherwallet(dot)io get the key

*address

STRING

User wallet address

*targetChainIdHex

STRING

Chain ID in hex

*requiredTokenBalance

Number

Token value

requiredTokenContractAddress

STRING: Optional

Native Currency by default or ERC-20 contract address

isTestnet

Boolean: Optional

Default: False, When enabled only testnets will be included.

callBack (boolean)

Function: Optional

Callback function will be triggered at the end of the onboarding workflow with boolean value

theme

Enum : 'light' | 'dark'

UI theme. Dark mode by default

connector

walletconnect's connector instance

applicable only for walletconnect

provider

walletconnect's provider instance

applicable only for walletconnect

showInfoScreen

Boolean

Defaults to false. To show users an intro page to set context on this operation.

parentComponentId

STRING: Optional

Default: '' ( empty string )

ONLY NEEDED IN CASE OF WIDGET.

Add the above snippet of <script> tag to import the necessary SDK into your dApp's <head> tag. Then as soon as the user Connects wallet and the dApp has access to the user's wallet address listen to the necessary event and trigger the window.Cypher() with the user's wallet address and the necessary token required to use the dApp.

There are two ways to integrate the SDK into your dApp. You can choose the mode based on your preference and use case:

Pop-up Modal:
The SDK will be added as a pop-up modal that will only be triggered if the user has a balance in the requiredToken less than the requiredTokenBalance. This mode allows for a more dynamic and on-demand interaction with the SDK.
Widget:
The SDK will be added as a widget that is always present inside a designated <div> tag of your dApp. In this mode, the SDK will be permanently visible and accessible to users, regardless of their token balance. This mode provides a consistent and readily available user experience, allowing users to interact with the SDK at any time.

POP-UP MODE:

In this mode, the On-Boarding SDK appears only if the user does not have the necessary token to use the dApp.

If the user does not have the necessary token to use the dApp, a modal similar to the one shown below will appear, displaying a list of tokens that the user has on other chains and providing various options for converting that token to the necessary token in the target chain that the dApp supports.

WIDGET MODE:

In this mode, the On-Boarding SDK will be always present inside the designated <div> tag of your dApp. Pass the id of the <div> in which you want to embed the widget as value to the parentComponentId parameter in the window.Cypher() call. The to chain and to token will be locked to the chain and token contract address that you provide. The from chain and from token can be chosen from a list of tokens in which the user has balance.

DEMO

The SDK automatically detects the window.etherum object for injected web3 and generates a transaction and routes it to the connected wallet. The routing is currently being powered by Cypher's proprietary bridge technology that sources liquidity through DEXs on different chains. Will add more options in the future. Cypher's bridge technology has been powering the Cypher Wallet Users for the last 1 year to seamlessly bridge across multiple EVM and Cosmos chains (coming soon). Support for other bridges, DEX, Exchanges and On-Ramp Providers coming soon. https://cypherwallet.io

ChainId List

0x1 - Ethereum
0x89 - Polygon
0x38 - Binance Smart Chain
0xa86a - Avalanche C-Chain
0xfa - Fantom
0x2329 - EVMOS
0xa4b1 - Arbitrum
0xa - Optimism
0x5 - Ethereum Goerli (Testnet)
0x13881 - Polygon Mumbai (Testnet)

PreviousWebhook Alerts for Cypher Business NextCypher Push Notification SDK

Last updated 2 months ago