Fix (hideFromDefaults option not hiding wallets) (#275)

* fixes #274 (hide from defaults not hiding wallets) * return an array of which default providers are being used. rather than reuse all screens, which would have had extra and potentially gotten weird
celo-org · Jun 17, 2022 · a612be0 · a612be0
1 parent 5c2ff0d
commit a612be0
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 12 deletions.
diff --git a/packages/react-celo/__tests__/react-celo-provider.test.tsx b/packages/react-celo/__tests__/react-celo-provider.test.tsx
@@ -4,7 +4,7 @@ import { CeloContract } from '@celo/contractkit';
 import { act, fireEvent, render, renderHook } from '@testing-library/react';
 import React, { ReactElement } from 'react';
 
-import { Mainnet } from '../src/constants';
+import { Mainnet, SupportedProviders } from '../src/constants';
 import { CeloProvider, CeloProviderProps } from '../src/react-celo-provider';
 import { Maybe, Network, Theme } from '../src/types';
 import { UseCelo, useCelo, useCeloInternal } from '../src/use-celo';
@@ -54,9 +54,9 @@ describe('CeloProvider', () => {
       return <button onClick={connect}>Connect</button>;
     };
 
-    async function stepsToOpenModal() {
+    async function stepsToOpenModal(props: Partial<CeloProviderProps> = {}) {
       const dom = renderComponentInCKProvider(<ConnectButton />, {
-        providerProps: {},
+        providerProps: props,
       });
 
       const button = await dom.findByText('Connect');
@@ -75,6 +75,62 @@ describe('CeloProvider', () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         expect(modal).toBeVisible();
       });
+      it('shows default wallets', async () => {
+        const dom = await stepsToOpenModal();
+
+        Object.keys(SupportedProviders).map(async (key) => {
+          const walletName = { ...SupportedProviders }[
+            key
+          ] as SupportedProviders;
+
+          if (walletName === SupportedProviders.Injected) {
+            return;
+          }
+
+          const walletEntry = await dom.findByText(walletName);
+
+          expect(walletEntry).toBeVisible();
+        });
+      });
+    });
+
+    describe('when hideFromModal option is given array', () => {
+      it('does not show those wallets in the UI', async () => {
+        const dom = await stepsToOpenModal({
+          connectModal: {
+            providersOptions: {
+              hideFromDefaults: [
+                SupportedProviders.CeloDance,
+                SupportedProviders.Ledger,
+              ],
+            },
+          },
+        });
+        const valora = dom.queryByText('Valora');
+        const ledger = dom.queryByText(SupportedProviders.Ledger);
+        expect(valora).toBeVisible();
+
+        expect(ledger).toBe(null);
+      });
+    });
+    describe('when hideFromModal option is given true', () => {
+      it('does not show any wallets in the UI', async () => {
+        const dom = await stepsToOpenModal({
+          connectModal: {
+            providersOptions: {
+              hideFromDefaults: true,
+            },
+          },
+        });
+        const valora = dom.queryByText('Valora');
+        const ledger = dom.queryByText(SupportedProviders.Ledger);
+        const none = dom.queryByText('No matches');
+        expect(valora).toBe(null);
+
+        expect(ledger).toBe(null);
+
+        expect(none).toBeVisible();
+      });
     });
   });
 

diff --git a/packages/react-celo/src/modals/connect.tsx b/packages/react-celo/src/modals/connect.tsx
@@ -132,8 +132,8 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
     searchable = true,
   } = providersOptions;
 
-  const { wallets, allScreens } = useMemo(() => {
-    let _screens: Record<string, React.FC<ConnectorProps>>;
+  const { wallets, allScreens, includedDefaultProviders } = useMemo(() => {
+    let _screens: Partial<Record<SupportedProviders, React.FC<ConnectorProps>>>;
     const _wallets = additionalWCWallets || [];
 
     if (hideFromDefaults) {
@@ -155,15 +155,24 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
     }
 
     return {
+      includedDefaultProviders: Object.keys(_screens) as SupportedProviders[],
       wallets: _wallets,
-      allScreens: _wallets.reduce((acc, wallet) => {
-        acc[wallet.id] = walletToScreen(wallet);
-        return acc;
-      }, _screens),
+      allScreens: _wallets.reduce(
+        (acc: Record<string, React.FC<ConnectorProps>>, wallet) => {
+          acc[wallet.id] = walletToScreen(wallet);
+          return acc;
+        },
+        _screens
+      ),
     };
   }, [screens, hideFromDefaults, additionalWCWallets]);
 
-  const providers = useProviders(wallets, sort, search);
+  const providers = useProviders(
+    wallets,
+    includedDefaultProviders,
+    sort,
+    search
+  );
 
   const ProviderElement = adding && allScreens?.[adding];
   const content = ProviderElement ? (

diff --git a/packages/react-celo/src/utils/useProviders.ts b/packages/react-celo/src/utils/useProviders.ts
@@ -5,6 +5,7 @@ import {
   localStorageKeys,
   Priorities,
   PROVIDERS,
+  SupportedProviders,
   WalletTypes,
 } from '../constants';
 import { Maybe, Provider, WalletConnectProvider, WalletEntry } from '../types';
@@ -44,18 +45,22 @@ export function getRecent(): Maybe<Provider> {
 
 export default function useProviders(
   wallets: WalletEntry[] = [],
+  includedDefaultProviders: SupportedProviders[],
   sort = defaultProviderSort,
   search?: string
 ) {
   const record: Record<string, Provider> = useMemo(
     () => ({
-      ...PROVIDERS,
+      ...includedDefaultProviders.reduce((all, current) => {
+        all[current] = PROVIDERS[current];
+        return all;
+      }, {} as Record<SupportedProviders, Provider>),
       ...wallets.reduce((acc, wallet) => {
         acc[wallet.id] = walletToProvider(wallet);
         return acc;
       }, {} as Record<string, Provider>),
     }),
-    [wallets]
+    [wallets, includedDefaultProviders]
   );
 
   const providers = useMemo<[providerKey: string, provider: Provider][]>(() => {