6

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!

3
  • What website are you calling window.cardano from? If you call it from a new tab or a localhost port that's not running a frontend, then it will be undefined. Apr 22, 2022 at 18:05
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Apr 28, 2022 at 4:33
  • 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 ` But sometimes window.cardano is undefined, also if i have installed, for example, nami wallet
    – Lorenzo
    Apr 30, 2022 at 12:34

3 Answers 3

6

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

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)
0

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;
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 1, 2023 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.