Allowing users to select wallet to connect to website

Question

I am looking for guidance on how I integrate the opportunity for users to select their wallet from a list which is then connected to my page. I have Nami working but when I try call for other wallets they do not seem to function. the code I am working from is;

<button id="button" style="width: 200px; height: 30px;">
 connect wallet
</button>
<script>
    var button = document.getElementById("button");
    var status = document.getElementById("Status");

    async function connectWallet() {
      try {
        await cardano.enable();
        if (typeof window.cardano === "undefined" || typeof window.cardano.nami === "undefined") {
          throw new Error("Please install Nami Wallet");
        } else {
          const api = await window.cardano.nami.enable();
          const addresses = await api.getUsedAddresses();
          console.log(addresses);
        }
      } catch (error) {
        status.innerHTML = error.message;
      }
    }

    button.addEventListener("click", connectWallet);
</script>

Thanks in advance

Answer 1

If the wallet follows CIP-0030 the cardano object should be injected into global namespace and you can iterate through all objects that have an apiVersion, icon and name .

I tested this out with Nami, Eternl and Lace. All three were detected.

const isBrowser = () => typeof window !== 'undefined';
var cardano = window.cardano;
if (isBrowser() && window.cardano && window.cardano.enable) {
  for (const i in cardano) {
    const wallet = cardano[i];
    if (wallet.apiVersion !== null && wallet.icon != null && wallet.name !== null)   {
        // Do something with the 'name' variable here
        console.log(wallet.name);
    }
  }
}