@tronweb3/tronwallet-adapter-react-ui
v1.1.10
Published
A set of out-of-the-box components to make it easy to interact with Tron wallets.
Downloads
2,941
Readme
@tronweb3/tronwallet-adapter-react-ui
@tronweb3/tronwallet-adapter-react-ui
provides a set of out-of-the-box components to make it easy to select, change, connect and disconnect wallet.
@tronweb3/tronwallet-adapter-react-ui
depends @tronweb3/tronwallet-adapter-react-hooks
to work. So developers must wrap App
content within the WalletProvider
.
Installation
npm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
# or pnpm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
# or yarn install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
Usage
@tronweb3/tronwallet-adapter-react-ui
provide a Select Wallet Modal
by Context.Provider
. So developers must wrap App
content within the WalletProvider
and WalletModalProvider
.
Note: A stylesheet must be imported to make components work fine.
import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { WalletModalProvider, WalletActionButton } from '@tronweb3/tronwallet-adapter-react-ui';
// This is necessary to keep style normal.
import '@tronweb3/tronwallet-adapter-react-ui/style.css';
import { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@tronweb3/tronwallet-abstract-adapter';
import toast, { Toaster } from 'react-hot-toast';
function App() {
// here use `react-hot-toast` npm package to notify user what happened
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}>
<WalletModalProvider>
<ConnectComponent></ConnectComponent>
<Profile></Profile>
</WalletModalProvider>
</WalletProvider>
);
}
function ConnectComponent() {
const { connect, disconnect, select, connected } = useWallet();
return <WalletActionButton></WalletActionButton>;
}
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>
);
}
WalletModalProvider
and useWalletModal
WalletModalProvider
provide a Select Wallet Modal
by Context.Provider
. The modal can be controled by useWalletModal
.
function App() {
const { visible, setVisible } = useWalletModal();
function toggle() {
setVisible((visible) => !visible);
}
return (
<div>
<button onClick={toggle}>{visible ? 'Close Modal' : 'Open Modal'}</button>
</div>
);
}
WalletConnectButton
Button to connect to the selected wallet. The button is disabled when:
- no wallet is selected
- is connecting to wallet
- is connected
- disabled by props
Props
type ButtonProps = PropsWithChildren<{
className?: string,
disabled?: boolean,
onClick?: (e: MouseEvent<HTMLButtonElement>) => void,
style?: CSSProperties,
tabIndex?: number,
icon?: string,
}>;
WalletDisconnectButton
Button to connect to the selected wallet. The button is disabled when:
- no wallet is selected
- is connecting to wallet
- disabled by props
Props
Same as WalletConnectButton
.
WalletSelectButton
Button to open Select Wallet Modal
.
Props
Same as WalletConnectButton
.
WalletActionButton
Button with multiple functions including:
- Select wallet
- Connect to wallet
- Disconnect from wallet
- Show current selected wallet and address
- Copy address
It's recommended to use this component to connect wallet easily.
Props
Same as WalletConnectButton
.