The Tomo Connect SDK Lite aims to define an easy-to-integrate and highly compatible Blockchain Provider API for dApps. This API allows dApps to easily connect to all kinds of wallets (including extension wallets, hardware wallets, and mobile wallets), retrieve account asset data, and sign messages and transactions (especially Babylon staking related transactions).
Integration
First, you need to add Tomo Connect SDK in to your project dependency:
Using the above code in your dApp, you can easily open Tomo BTC connect modal and interact with the supported BTC wallet.
Using the Provider API
Once you connect the wallet, you can use the following way to interact with the connect wallet:
import { useTomoProviders, useTomoModalControl, useTomoWalletConnect, useTomoWalletState} from'@tomo-inc/wallet-connect-sdk'// Open BTC connect modalconsttomoModal=useTomoModalControl();tomoModal.open("connect");// Check wallet connection statusconsttomowalletState=useTomoWalletState();constconnected=tomowalletState.isConnected;// Get providerconstproviders=useTomoProviders();constprovider=providers.bitcoinProvider;// DisconnectconsttomoWalletConnect=useTomoWalletConnect();tomoWalletConnect.disconnect();
All the provider APIs are as follows:
exporttypeFees= {// fee for inclusion in the next block fastestFee:number// fee for inclusion in a block in 30 mins halfHourFee:number// fee for inclusion in a block in 1 hour hourFee:number// economy fee: inclusion not guaranteed economyFee:number// minimum fee: the minimum fee of the network minimumFee:number}// UTXO is a structure defining attributes for a UTXOexportinterfaceUTXO {// hash of transaction that holds the UTXO txid:string// index of the output in the transaction vout:number// amount of satoshis the UTXO holds value:number// the script that the UTXO contains scriptPubKey:string}// supported networksexportenumNetwork { MAINNET ='mainnet', TESTNET ='testnet', SIGNET ='signet'}exportinterfaceInscriptionResult { list:Inscription[] total:number}exportinterfaceInscription { output:string inscriptionId:string address:string offset:number outputValue:number location:string contentType:string contentLength:number inscriptionNumber:number timestamp:number genesisTransaction:string}exportabstractclassWalletProvider {abstractconnectWallet():Promise<this>abstractgetWalletProviderName():Promise<string>abstractgetAddress():Promise<string>abstractgetPublicKeyHex():Promise<string>abstractsignPsbt(psbtHex:string):Promise<string>abstractsignPsbts(psbtsHexes:string[]):Promise<string[]>abstractgetNetwork():Promise<Network>abstractsignMessageBIP322(message:string):Promise<string>abstracton(eventName:string,callBack: () =>void):voidabstractoff(eventName:string,callBack: () =>void):voidabstractswitchNetwork(network:Network):Promise<void>abstractsendBitcoin(to:string, satAmount:number):Promise<string>abstractgetNetworkFees():Promise<Fees>abstractpushTx(txHex:string):Promise<string>abstractgetUtxos(address:string, amount?:number):Promise<UTXO[]>abstractgetBTCTipHeight():Promise<number>abstractgetBalance():Promise<number>abstractgetInscriptions(cursor?:number, size?:number):Promise<InscriptionResult>}
Wallet Customization
Currently Tomo Connect SDK supports the following BTC wallet:
OKX Bitcoin
Unisat
Tomo Bitcoin
OneKey Bitcoin
Bitget Bitcoin
Keystone Bitcoin
imToken Mobile Wallet
Binance Web3 Wallet
It is very easy to sort the wallets supported, and you can sort the wallet list, enable or disable it by the following config, customized wallet could be added to the list as well:
When wallet is selected, connection hints will pop up, and the content of the hints could be customized by option 'connectionHints', it could be used as below:
<TomoContextProviderconnectionHints={[ { text:'Subject to Developer’s compliance with the terms and conditions of this Agreement',logo: ( <imgclassName={'tm-size-5'} src={'https://tomo.inc/favicon.ico'} /> ) }, { text:'I certify that there are no Bitcoin inscriptions tokens in my wallet.' }, { isRequired:true,text: ( <span> I certify that I have read and accept the updated{' '} <aclassName={'tm-text-primary'}>Terms of Use</a> and{' '} <aclassName={'tm-text-primary'}>Privacy Policy</a>. </span> ) } ]}> {children}</TomoContextProvider>
If you want to support your own Bitcoin wallet into the wallet list, there are two ways:
Besides, users can also customize their own wallet provider in an easier way. The WalletProvider class provides default implementations for most interfaces. What users need to do is compare the interfaces of the target wallet with the default implementations of WalletProvider. In an ideal scenario, a customized wallet only needs to implement the constructor and two abstract methods (getWalletProviderName and connectWallet).
import { Network, WalletInfo, WalletProvider} from'@tomo-inc/tomo-wallet-provider'import { parseUnits } from'@tomo-inc/tomo-wallet-provider'exportconstxyzProvider='xyz'exportclassXYZWalletextendsWalletProvider {private xyzWalletInfo:WalletInfo|undefinedprivate bitcoinNetworkProvider:anyconstructor() {super()if (!window[xyzProvider]) {thrownewError('XYZ Wallet extension not found') }this.bitcoinNetworkProvider = window[xyzProvider] }connectWallet=async ():Promise<this> => {constworkingVersion='1.0.0'if (!this.bitcoinNetworkProvider) {thrownewError('XYZ Wallet extension not found') }if (this.bitcoinNetworkProvider.getVersion) {constversion=awaitthis.bitcoinNetworkProvider.getVersion()if (version < workingVersion) {thrownewError('Please update XYZ Wallet to the latest version') } }let addresses =nulllet pubKey =nulltry { addresses =awaitthis.bitcoinNetworkProvider.connectWallet() pubKey =awaitthis.bitcoinNetworkProvider.getPublicKey()if (!addresses ||addresses.length===0||!pubKey) {thrownewError('BTC is not enabled in XYZ Wallet') } } catch (error) {thrownewError('BTC is not enabled in XYZ Wallet') }returnthis }getWalletProviderName=async ():Promise<string> => {return'XYZ' }}
Multiple Connection Mode
Activating the 'multiNetworkConnection' feature switches to multi-network mode. In this mode, wallets from various networks are accessible through separate tabs, allowing you to select and establish connections with them. Once connected, providers facilitate interactions with these wallets across different networks. Currently, support is extended to both Bitcoin and Cosmos networks.
<TomoContextProvidermultiNetworkConnection={true}cosmosChains={[ { id:2, name:'Cosmos', type:'cosmos', network:'cosmoshub-4' } ]} ...> <ChildComponent /></TomoContextProvider>// after connected, providers could be usedexportfunctionChildComponent(props:ChildProps) {constproviders=useTomoProviders()constsignCosmos=async (address:string, amount:string) => {constcurChainId=providers.cosmosProvider.getChainId()constkey=awaitproviders.cosmosProvider.provider.getKey(curChainId) // construct your signDoc...const { signed,signature } =awaitproviders.cosmosProvider.signAmino(key.bech32Address, signDoc ) }return ( <div> <TomoSocial /> </div> )}