Automatically connect to wallet if website is whitelisted

Question

I am currently connecting to a cardano wallet like this.

  const [walletApiKey, setWalletApiKey] = useState(null);

  const connectCardanoWallets = async (selectedWallet) => {
    const walletFound = !!window?.cardano?.[selectedWallet];
    if (walletFound) {
      try {
        let walletApi;
        walletApi = await window.cardano[selectedWallet].enable();
        setWalletApiKey(walletApi);
      } catch (err) {
        console.log(err);
      }
    } else {
      toast('Wallet not found');
    }
  };

If they have previously connected to our website before , when I envoke the method .enable() we get the API key automatically without the user putting in their password to whitelist us again. Right now I am using a useEffect hook like this to connect to their wallet.

  useEffect(() => {
    connectCardanoWallets('nami');
  }, []);

How do I check if our website is whitelisted so i can automatically connect to their wallet and don't automatically envoke the .enable() method if my website is not whitelisted?

Answer 1

The simplest solution I had is to use a cookie which you set once you grants you permission. Then, as a user visits your page, you just read the cookie and get the selected wallet.

Answer 2

Above simple solution will work, but you could expand it more like:

• check if the window.cardano API is available
• loop through all wallets to check if they are installed
• check if they are enabled, there is a isEnabled() function which can be used.

With this feedback you can give the end-user a dropdown where you list all wallets and enable/highlight the ones that are available.