Custom UI for connecting wallet
Connecting a wallet involves a few steps:
- Create a wallet instance
- Call the
connectmethod on the wallet instance
- Set the connected wallet instance as "connected wallet" in thidweb's React SDK
If you just want to connect a wallet as mentioned above - there's a simple way to do it using the useConnect hook which does all the above steps for you.
But if you need to create wallet instance and call some methods on the wallet instance before connecting the wallet, you can do these steps manually as shown below using the useCreateWalletInstance, useSetConnectionStatus and useSetConnectedWallet hooks.
There are 3 steps to connect your wallet manually:
- create an instance of your wallet using
- connect your wallet using the
connectmethod of the wallet
- once the wallet is connected, set the wallet instance as connected using
Make sure to update the
"connecting" before connecting your wallet and
"disconnected" if the connection fails.
We will use
localWallet as an example because it can not be connected using the
useConnect hook because it requires additional steps after creating the wallet instance - like generating a random wallet or importing a wallet. We will generate a random wallet in this example.
Useful hooks to build custom UI
Once the wallet is connected, you can use React SDK's 100+ hooks to show connected wallet's Details, send transactions, interact with smart contracts, sign messages and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more!
Here is a list of few hooks that will be useful when creating custom UI