Enhanced customization for our React Native components

Mike Shin

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>;