💻 How to show a list of available Terra wallets?

Starting from version 3.7.0 the terra wallet-provider provides a list of so-called "whitelisted" wallets that are recommended and can be suggested to users to install if they are not available in the browser.
Showing the list of available wallets is pretty easy, you just need to take the availableInstallations variable from useWallet() and iterate over it to show the list.
In addition, you can combine it with availableConnections to show the already installed wallets together with those that users can install.
Let's take a look at the example.
import { useWallet } from "@terra-money/wallet-provider";
​
export const InstallSample = () => {
  const { availableInstallations, availableConnections, connect } = useWallet();
​
  return (
    <div>
      <h1>Available Installations</h1>
​
      <div>
        {availableConnections
          .map(({ type, identifier, name, icon }) => (
            <button key={identifier} onClick={() => connect(type, identifier)}>
              <img
                src={icon}
                alt={name}
                style={{ width: "1em", height: "1em" }}
              />
              Connect {name} [{identifier}]
            </button>
          ))}
        {availableInstallations.map(({ type, identifier, name, icon, url }) => (
          <button key={identifier} onClick={() => (window.location.href = url)}>
            <img
              src={icon}
              alt={name}
              style={{ width: "1em", height: "1em" }}
            />
            Install {name} [{identifier}]
          </button>
        ))}
      </div>
    </div>
  );
};
Last modified 8mo ago