Enhanced customization for our React Native components
We have just introduced a feature that allows you to add your personal touch to our components, namely, our ConnectWallet button title, Modal title and the Details Button that you see after a wallet is connected.
We have just introduced a feature that allows you to add your personal touch to our components, namely, our ConnectWallet button title, Modal title and the Details Button that you see after a wallet is connected.
buttonTitle prop
The title of the ConnectWallet button which defaults to: "Connect Wallet":
<ConnectWallet buttonTitle="Connect to claim" />
modalTitle prop
The title of the ConnectWallet modal which defaults to: "Choose your wallet":
<ConnectWallet modalTitle="Select a wallet" />
detailsButton prop
The button that shows the details of the connected wallet. By default it shows the chain icon, wallet balance, account address and wallet icon:
const customDetailsButton = (
<View>
<Text>Connected button details</Text>
<Text>{shortenWalletAddress(address)}</Text>
</View>
);
<ConnectWallet detailsButton={customDetailsButton} />;
Web3Button
The buttonTitle
and modalTitle
props are also available in the Web3Button
config since we show a ConnectWallet
button
if you don't have a connected wallet:
<Web3Button
connectWalletProps={{
buttonTitle: "Connect to claim",
modalTitle: "Pick a wallet",
}}
contractAddress="contract-address"
action={(contract) => contract?.erc1155.claim(0, 1)}
>
Claim
</Web3Button>