window.cardano undefined

Question

I would to use window.cardano when a user just "enter" to website. Sometimes window.cardano is still undefined

How can i solve this problem? I try to use await window.cardano but is not a Promise.

I try to use this code in a react useEffect:

let cardanoExist = await window.cardano 
    if (cardanoExist) { 
       let namiExist = await window.cardano.nami 
           if (namiExist) { \\ do some stuff } else {return}
    } else {
           return
    }
}

But sometimes window.cardano is undefined, also if i have installed, for example, nami wallet

Thanks!

Answer 1

I am using this code in react:

const isBrowser = () => typeof window !== "undefined";

export const getCardano = (): Cardano | undefined => {
  const cardano = isBrowser() && window.cardano;
  return cardano;
};

export type Cardano = {
  [key: string]: {
    name: string;
    icon: string;
    version: string;
    api?: WalletApi,
    enable: () => Promise<WalletApi>;
    isEnabled: () => Promise<boolean>;
  };
};

export interface WalletApi {
  getNetworkId: () => Promise<number>;
  getUtxos: () => Promise<string[] | undefined>;
  getBalance: () => Promise<string>;
  getUsedAddresses: () => Promise<string[]>;
  getUnusedAddresses: () => Promise<string[]>;
  getChangeAddress: () => Promise<string>;
  getRewardAddresses: () => Promise<string[]>;
  signTx: (tx: string, partialSign: boolean) => Promise<string>;
  signData: (
    address: string,
    payload: string
  ) => Promise<{ signature: string; key: string }>;
  submitTx: (tx: string) => Promise<string>;
  getCollateral: () => Promise<string[]>;
  experimental: {
    getCollateral: () => Promise<string[]>;
    on: (eventName: string, callback: Function) => void;
    off: (eventName: string, callback: Function) => void;
  };
};

and when the user selects his/her wallet of choice in the app, I set the wallet name and run the following code:

const existingWallets = cardano
    ? Object.keys(cardano).filter(
      (walletName) =>
        walletName === "nami" ||
        walletName === "eternl" ||
        walletName === "gerowallet" ||
        walletName === "flint"
    )
    : [];

{...setting walletName...}

const cardano = getCardano()!;
const api = await cardano[walletName]!.enable();
const usedAddresses = await api.getUsedAddresses();
{...}

// copies wallet api into cardano object which allows to use cardano.selectedWallet anywhere in the app
cardano.selectedWallet = {
    ...cardano[walletName], 
    api
};

Answer 2

First of all, window.cardano can be undefined if the user doesn't have a Cardano wallet installed on their browser.

Secondly, you don't need to use await with window.cardano as it's not an async function. Also, you should avoid nested hell and instead try something like this:-

const isCardano = window && window.cardano
const isNamiInstalled = isCardano && window.cardano.nami
const isNamiEnabled = isNamiInstalled ? await window.cardano.nami.isEnabled() : false

Edit: sometimes window.cardano or window.cardano.nami can be undefined even if you have nami installed. That happens mostly when you try to access these parameters before the extension is even injected to the site. To prevent such scenarios, you can try wrapping your code with a setTimeout delay.

setTimeout(()=> {
    const isCardano = window && window.cardano
    const isNamiInstalled = isCardano && window.cardano.nami
    const isNamiEnabled = isNamiInstalled ? await window.cardano.nami.isEnabled() : false
}, 1500)

Answer 3

Had same issue. I found that both nami and eternl are just to slow with their injections into website. This solved problem :

if (cardanoExist) {
await new Promise(resolve => setTimeout(resolve, 100));
let namiExist = window.cardano.nami;