@tronweb3/tronwallet-adapter-react-hooks
provides a useWallet()
hook which will make it easy to "Connect Wallet" and listen to the state change for developers.
npm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
# or pnpm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
# or yarn install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
@tronweb3/tronwallet-adapter-react-hooks
uses Context
of React to maintain a shared data. So developers need to wrap App
content within the WalletProvider
.
You can provide a onError
callback to handle various errors such as WalletConnectionError
, WalletNotFoundError
.
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@tronweb3/tronwallet-abstract-adapter';
import toast, { Toaster } from 'react-hot-toast';
function App() {
// use `react-hot-toast` npm package to notify user what happened here
function onError(e: WalletError) {
if (e instanceof WalletNotFoundError) {
toast.error(e.message);
} else if (e instanceof WalletDisconnectedError) {
toast.error(e.message);
} else toast.error(e.message);
}
return (
<WalletProvider onError={onError}>
<ConnectComponent></ConnectComponent>
<Profile></Profile>
</WalletProvider>
);
}
function ConnectComponent() {
const { connect, disconnect, select, connected } = useWallet();
return (<div>
<button type="button" onClick={() => select('TronLink Adapter' as any)}> Select TronLink</button>
<button type="button" disabled={connected} onClick={connect}>Connect</button><br>
<button type="button" disabled={!connected} onClick={disconnect}>Disconnect</button>
</div>);
}
function Profile() {
const { address, connected, wallet } = useWallet();
return (<div>
<p> <span>Connection Status:</span> {connected ? 'Connected' : 'Disconnected'}</p>
<p> <span>Your selected Wallet:</span> {wallet?.adapter.name} </p>
<p> <span>Your Address:</span> {address} </p>
</div>);
}
WalletProvider
and useWallet
work together like Context.Provider
and useContext()
. There is a WalletProviderContext
underlying which maintains some state and can be obtained with useWallet
. So developers need to wrap application components with WalletProvider
.
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
function App() {
return <WalletProvider>/* here is application components */</WalletProvider>;
}
- Required:
false
- Type:
Adapter[]
- Default:
[ new TronLinkAdapter() ]
Used to specify what wallet adapters are supported. All wallet adapters can be imported from @tronweb3/tronwallet-adapters
package or their standalone package.
- Example
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks'; import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters'; function App() { const adapters = useMemo(() => [new TronLinkAdapter()]); return <WalletProvider adapters={adapters}>/* here is application components */</WalletProvider>; }
- Required:
false
- Type:
(error: WalletError): void
- Default:
function(error) { console.error(error); }
Used to handle errors occured when use wallet. Developers can use the callback to tell users what happened according to the error
type. All error types can be found here.
- Example
functon onError(e) { if (e instanceof WalletNotFoundError) { console.error(e.message); } else if (e instanceof WalletDisconnectedError) { console.error(e.message); } else console.error(e.message); }
- Required:
false
- Type:
boolean
- Default:
true
Whether connect to the specified wallet automatically when loading the page and selecting a wallet.
- Required:
false
- Type:
boolean
- Default:
false
When autoConnect
enabled, whether automatically connect to current selected wallet when loading the page.
If you don't want to connect the wallet when page is first loaded, set disableAutoConnectOnLoad: true
.
- Required:
false
- Type:
string
- Default:
tronAdapterName
Specified the key used to cache wallet name in localStorage
. When user select a wallet, applications will cache the wallet name to localStorage.
You can provide event handlers for listen adapter events, such as connect
,disconnect
,accountsChanged
. Available event handlers and their types are as follows:
-
readyStateChanged: (readyState: 'Found' | 'NotFound') => void
: Called when current adapter emitsreadyStateChanged
event. -
onConnect: (address: string) => void
: Called when current adapter emitsconnect
event. -
onDisconnect: () => void
: Called when current adapter emitsdisconnect
event. -
onAccountsChanged: (newAddress: string; preAddress?: string) => void
: Called when current adapter emitsaccountsChanged
event. -
onChainChanged: (chainData: unknow) => void
: Called when current adapter emitschainChanged
event.
An event handler named onAdapterChanged
is also avaliable to get noticed when selected adapter is changed.
-
onAdapterChanged: (adapter: Adapter | null) => void
: Called when current adapter is changed.
Here is an example:
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
function App() {
const adapters = useMemo(() => [new TronLinkAdapter()]);
const onAccountsChanged = useCallback((curAddr, preAddr) => {
console.log('new address is: ', curAddr, ' previous address is: ', preAddr);
}, []);
return (
<WalletProvider adapters={adapters} onAccountsChanged={onAccountsChanged}>
/* here is application components */
</WalletProvider>
);
}
useWallet
is a react hook providing a set of properties and methods which can be used to select and connect wallet, get wallet state and so on.
useWallet()
must be used in the descendant components ofWalletProvider
!
- Type:
boolean
Synchronous withautoConnect
property passed toWalletProvider
.
- Type:
boolean
Synchronous withdisableAutoConnectOnLoad
property passed toWalletProvider
.
- Type:
Wallet | null
The wallet current selected. If no wallet is selected, the value isnull
.
Wallet
is defined as follow:
interface Wallet {
adapter: Adapter; // wallet adapter
state: AdapterState;
}
enum AdapterState {
NotFound = 'NotFound',
Disconnect = 'Disconnected',
Connected = 'Connected',
}
- Type:
string | null
Address of current selected wallet. If no wallet is selected, the value isnull
.
- Type:
Wallet[]
Wallet list based on current used adapters when initialWalletProvider
.
- Type:
boolean
Indicate if is connecting to the wallet.
- Type:
boolean
Indicate if is connected with the wallet.
- Type:
boolean
Indicate if is connecting to the wallet.
- Type:
(walletAdapterName: AdapterName) => void
Select a wallet by walletAdapterName. Valid adapters can be found here
- Type:
() => Promise<void>
Connect to current selected wallet.
- Type:
() => Promise<void>
Disconnect from current selected wallet.
- Type:
(transaction: Transaction) => Promise<SignedTransaction>
Sign a unsigned transaction. This method is the same as TronWeb API.
- Type:
(message: string) => Promise<string>
Sign a message.
import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
import { AdapterName } from '@tronweb3/tronwallet-abstract-adapter';
function Content() {
const { connect, disconnect, select, connected } = useWallet();
return (
<div>
<button type="button" onClick={() => select('TronLink Adapter')}>
Select TronLink
</button>
<button type="button" disabled={connected} onClick={connect}>
Connect
</button>
<button type="button" disabled={!connected} onClick={disconnect}>
Disconnect
</button>
</div>
);
}