user6926: 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!

user5085: 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
};


6926: <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>
 5085: <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>
