bugfix: add to metamask button is not visible (#1006)

Add to metamask button is not visible

Fixes #996

lib/web3/useProvider.tsx

@@ -9,11 +9,15 @@ export default function useProvider() {
   const [ provider, setProvider ] = React.useState<WindowProvider>();
 
   React.useEffect(() => {
-    if (!('ethereum' in window)) {
+    if (!('ethereum' in window && window.ethereum)) {
       return;
     }
 
-    window.ethereum?.providers?.forEach(async(provider) => {
+    // if user has multiple wallets installed, they all are injected in the window.ethereum.providers array
+    // if user has only one wallet, the provider is injected in the window.ethereum directly
+    const providers = Array.isArray(window.ethereum.providers) ? window.ethereum.providers : [ window.ethereum ];
+
+    providers.forEach(async(provider) => {
       if (appConfig.web3.defaultWallet === 'coinbase' && provider.isCoinbaseWallet) {
         return setProvider(provider);
       }

ui/snippets/footer/Footer.pw.tsx

@@ -75,7 +75,7 @@ base.describe('without custom links', () => {
   base('base view +@dark-mode +@mobile', async({ mount, page }) => {
     await page.evaluate(() => {
       window.ethereum = {
-        providers: [ { isMetaMask: true } ],
+        isMetaMask: true,
       } as WindowProvider;
     });