<p>I am using this code in react:</p>
<pre><code>const isBrowser = () =&gt; typeof window !== &quot;undefined&quot;;

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

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

export interface WalletApi {
  getNetworkId: () =&gt; Promise&lt;number&gt;;
  getUtxos: () =&gt; Promise&lt;string[] | undefined&gt;;
  getBalance: () =&gt; Promise&lt;string&gt;;
  getUsedAddresses: () =&gt; Promise&lt;string[]&gt;;
  getUnusedAddresses: () =&gt; Promise&lt;string[]&gt;;
  getChangeAddress: () =&gt; Promise&lt;string&gt;;
  getRewardAddresses: () =&gt; Promise&lt;string[]&gt;;
  signTx: (tx: string, partialSign: boolean) =&gt; Promise&lt;string&gt;;
  signData: (
    address: string,
    payload: string
  ) =&gt; Promise&lt;{ signature: string; key: string }&gt;;
  submitTx: (tx: string) =&gt; Promise&lt;string&gt;;
  getCollateral: () =&gt; Promise&lt;string[]&gt;;
  experimental: {
    getCollateral: () =&gt; Promise&lt;string[]&gt;;
    on: (eventName: string, callback: Function) =&gt; void;
    off: (eventName: string, callback: Function) =&gt; void;
  };
};
</code></pre>
<p>and when the user selects his/her wallet of choice in the app, I set the wallet name and run the following code:</p>
<pre><code>const existingWallets = cardano
    ? Object.keys(cardano).filter(
      (walletName) =&gt;
        walletName === &quot;nami&quot; ||
        walletName === &quot;eternl&quot; ||
        walletName === &quot;gerowallet&quot; ||
        walletName === &quot;flint&quot;
    )
    : [];

{...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
};
</code></pre>

CC BY-SA 4.0
2022-04-30T13:50:02.067Z
2022-04-30T13:50:02.067Z
Will
<p>First of all, <code>window.cardano</code> can be undefined if the user doesn't have a Cardano wallet installed on their browser.</p>
<p>Secondly, you don't need to use <code>await</code> with <code>window.cardano</code> as it's not an async function. Also, you should avoid nested hell and instead try something like this:-</p>
<pre><code>const isCardano = window &amp;&amp; window.cardano
const isNamiInstalled = isCardano &amp;&amp; window.cardano.nami
const isNamiEnabled = isNamiInstalled ? await window.cardano.nami.isEnabled() : false
</code></pre>
<p>Edit: sometimes <code>window.cardano</code> or <code>window.cardano.nami</code> 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.</p>
<pre><code>setTimeout(()=&gt; {
    const isCardano = window &amp;&amp; window.cardano
    const isNamiInstalled = isCardano &amp;&amp; window.cardano.nami
    const isNamiEnabled = isNamiInstalled ? await window.cardano.nami.isEnabled() : false
}, 1500)
</code></pre>

CC BY-SA 4.0
2023-03-20T16:25:16.950Z
2023-03-20T16:28:25.293Z
2023-03-20T16:28:25.293Z
Alexis
<p>Had same issue. I found that both nami and eternl are just to slow with their injections into website. This solved problem :</p>
<pre><code>if (cardanoExist) {
await new Promise(resolve =&gt; setTimeout(resolve, 100));
let namiExist = window.cardano.nami;
</code></pre>

CC BY-SA 4.0
2023-04-01T15:02:13.510Z
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](/help/how-to-answer).
Community
CC BY-SA 4.0
2023-03-20T16:02:59.450Z
2023-03-20T16:02:59.450Z
Sliffer
<p>I would to use <code>window.cardano</code> when a user just &quot;enter&quot; to website. Sometimes window.cardano is still <code>undefined</code></p>
<p>How can i solve this problem? I try to use <code>await window.cardano</code> but is not a Promise.</p>
<p>I try to use this code in a react useEffect:</p>
<pre><code>let cardanoExist = await window.cardano 
    if (cardanoExist) { 
       let namiExist = await window.cardano.nami 
           if (namiExist) { \\ do some stuff } else {return}
    } else {
           return
    }
}

</code></pre>
<p>But sometimes <code>window.cardano</code> is <code>undefined</code>, also if i have installed, for example, nami wallet</p>
<p>Thanks!</p>

CC BY-SA 4.0
2022-04-22T18:05:58.177Z
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.
Matt Halloran
CC BY-SA 4.0
2022-04-28T04:33:56.373Z
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
CC BY-SA 4.0
2022-04-30T12:34:05.087Z
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
<cardano-serialization-lib><nami-wallet><nami>
window.cardano undefined
# window.cardano undefined

(Asked by: username_0 on 2022-04-22)

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!

**Tags:** cardano-serialization-lib, nami-wallet, nami
> **Comments:**
> **username_1**: 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.  
> **username_2**: 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.  
> **username_0**: 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  

---

## 3 answers

### Answer by username_3 on 2022-04-30. Score: 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;
    isEnabled: () => Promise;
  };
};

export interface WalletApi {
  getNetworkId: () => Promise;
  getUtxos: () => Promise;
  getBalance: () => Promise;
  getUsedAddresses: () => Promise;
  getUnusedAddresses: () => Promise;
  getChangeAddress: () => Promise;
  getRewardAddresses: () => Promise;
  signTx: (tx: string, partialSign: boolean) => Promise;
  signData: (
    address: string,
    payload: string
  ) => Promise<{ signature: string; key: string }>;
  submitTx: (tx: string) => Promise;
  getCollateral: () => Promise;
  experimental: {
    getCollateral: () => Promise;
    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 by username_4 on 2023-03-20. Score: 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)


---

### Answer by username_5 on 2023-03-20. Score: 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;

> **Comments:**
> **username_2**: 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](/help/how-to-answer).  

---

