Enhanced customization for our React Native components

Jorge

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.

The title of the ConnectWallet button which defaults to: "Connect Wallet":

<ConnectWallet buttonTitle="Connect to claim" />;

The title of the ConnectWallet modal which defaults to: "Choose your wallet":

<ConnectWallet modalTitle="Select a wallet" />;

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

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