Release/4.0.1 (#277)

* Fixes #268 (-webkit-fill-available vs background gradient bug) 

use react modals custom classname to add the styles to html and body only when our modal is open

* 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


* Fix handling of reactModalProp (#278)

* fixes the connect modal not recognizing when it receives style props externally.

* Remove Extra Global Styles (#282)

* remove  tailwind base as it is messing with global styles

* remove unnessessary css resets for react-celo

* fix vertical allignments

.github/workflows/ci.yml

@@ -7,6 +7,8 @@ on:
   pull_request:
     branches:
       - master
+      - stable
+      - 'release/**'
 
 jobs:
   build:

packages/example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "4.0.0-dev",
+  "version": "4.0.1-dev",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@celo/react-celo": "4.0.0-dev",
+    "@celo/react-celo": "4.0.1-dev",
     "@celo/contractkit": "^2.0.0",
     "next": "^12.1.6",
     "postcss": "^8.4.5",

packages/react-celo/__tests__/modals/connect.test.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+
+import { RenderResult } from '@testing-library/react';
+import React from 'react';
+
+import { ConnectModal } from '../../src/modals';
+import { renderComponentInCKProvider } from '../render-in-provider';
+
+const theme = {
+  primary: '#eef2ff',
+  secondary: '#6366f1',
+  text: '#ffffff',
+  textSecondary: '#cbd5e1',
+  textTertiary: '#64748b',
+  muted: '#334155',
+  background: '#1e293b',
+  error: '#ef4444',
+};
+
+describe('ConnectModal', () => {
+  describe('when given reactModalProps', () => {
+    let dom: RenderResult;
+    describe('style.overlay', () => {
+      beforeEach(() => {
+        dom = renderComponentInCKProvider(
+          <ConnectModal
+            reactModalProps={{
+              isOpen: true,
+              style: { overlay: { zIndex: 10 } },
+            }}
+          />,
+          { providerProps: { theme } }
+        );
+      });
+      it('applies those styles while keeping original', async () => {
+        const modal = await dom.findByRole('dialog');
+        expect(modal.parentElement).toHaveStyle(
+          'z-index: 10; background: rgba(30, 41, 59, 0.75)'
+        );
+      });
+      it('still uses theme for background on content modal', async () => {
+        const modal = await dom.findByRole('dialog');
+        expect(modal).toHaveStyle('background: rgba(30, 41, 59, 1)');
+      });
+    });
+  });
+});

packages/react-celo/__tests__/react-celo-provider.test.tsx

@@ -1,51 +1,17 @@
 import '@testing-library/jest-dom';
 
 import { CeloContract } from '@celo/contractkit';
-import { act, fireEvent, render, renderHook } from '@testing-library/react';
-import React, { ReactElement } from 'react';
+import { act, fireEvent } from '@testing-library/react';
+import React from 'react';
 
-import { Mainnet } from '../src/constants';
-import { CeloProvider, CeloProviderProps } from '../src/react-celo-provider';
+import { Mainnet, SupportedProviders } from '../src/constants';
+import { CeloProviderProps } from '../src/react-celo-provider';
 import { Maybe, Network, Theme } from '../src/types';
 import { UseCelo, useCelo, useCeloInternal } from '../src/use-celo';
-
-interface RenderArgs {
-  providerProps: Partial<CeloProviderProps>;
-}
-
-const defaultProps: CeloProviderProps = {
-  dapp: {
-    name: 'Testing Celo React',
-    description: 'Test it well',
-    url: 'https://celo.developers',
-    icon: '',
-  },
-  children: null,
-};
-
-function renderHookInCKProvider<R>(
-  hook: (i: unknown) => R,
-  { providerProps }: RenderArgs
-) {
-  return renderHook<R, unknown>(hook, {
-    wrapper: ({ children }) => {
-      const props = { ...defaultProps, ...providerProps };
-      return <CeloProvider {...props}>{children}</CeloProvider>;
-    },
-  });
-}
-
-function renderComponentInCKProvider(
-  ui: ReactElement<unknown, string>,
-  { providerProps }: RenderArgs
-) {
-  return render(ui, {
-    wrapper: ({ children }) => {
-      const props = { ...defaultProps, ...providerProps };
-      return <CeloProvider {...props}>{children}</CeloProvider>;
-    },
-  });
-}
+import {
+  renderComponentInCKProvider,
+  renderHookInCKProvider,
+} from './render-in-provider';
 
 describe('CeloProvider', () => {
   describe('user interface', () => {
@@ -54,9 +20,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 +41,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();
+      });
     });
   });
 

packages/react-celo/__tests__/render-in-provider.tsx

@@ -0,0 +1,42 @@
+import { render, renderHook } from '@testing-library/react';
+import React, { ReactElement } from 'react';
+
+import { CeloProvider, CeloProviderProps } from '../src/react-celo-provider';
+
+interface RenderArgs {
+  providerProps: Partial<CeloProviderProps>;
+}
+
+const defaultProps: CeloProviderProps = {
+  dapp: {
+    name: 'Testing Celo React',
+    description: 'Test it well',
+    url: 'https://celo.developers',
+    icon: '',
+  },
+  children: null,
+};
+
+export function renderComponentInCKProvider(
+  ui: ReactElement<unknown, string>,
+  { providerProps }: RenderArgs
+) {
+  return render(ui, {
+    wrapper: ({ children }) => {
+      const props = { ...defaultProps, ...providerProps };
+      return <CeloProvider {...props}>{children}</CeloProvider>;
+    },
+  });
+}
+
+export function renderHookInCKProvider<R>(
+  hook: (i: unknown) => R,
+  { providerProps }: RenderArgs
+) {
+  return renderHook<R, unknown>(hook, {
+    wrapper: ({ children }) => {
+      const props = { ...defaultProps, ...providerProps };
+      return <CeloProvider {...props}>{children}</CeloProvider>;
+    },
+  });
+}

packages/react-celo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celo/react-celo",
-  "version": "4.0.0-dev",
+  "version": "4.0.1-dev",
   "private": false,
   "scripts": {
     "prebuild": "mkdir -p lib && node ./scripts/json-to-ts.js package.json lib",
@@ -29,7 +29,7 @@
     "@celo/wallet-ledger": "^2.0.0",
     "@celo/wallet-local": "^2.0.0",
     "@celo/wallet-remote": "^2.0.0",
-    "@celo/wallet-walletconnect-v1": "4.0.0-dev",
+    "@celo/wallet-walletconnect-v1": "4.0.1-dev",
     "@ethersproject/providers": "^5.5.2",
     "@ledgerhq/hw-transport-webusb": "^5.43.0",
     "isomorphic-fetch": "^3.0.0",

packages/react-celo/src/modals/action.tsx

@@ -94,6 +94,8 @@ export const ActionModal: React.FC<Props> = ({
   return (
     <ReactModal
       portalClassName={styles.portal}
+      htmlOpenClassName={'react-celo-modal-open-html'}
+      bodyOpenClassName={'react-celo-modal-open-body'}
       isOpen={pendingActionCount > 0}
       // isOpen
       ariaHideApp={false}

packages/react-celo/src/modals/connect.tsx

@@ -57,6 +57,11 @@ export const styles = cls({
     tw-overflow-hidden`,
 });
 
+type ReactModalProps = Omit<
+  ReactModal.Props,
+  'onRequestClose' | 'htmlOpenClassName' | 'bodyOpenClassName'
+>;
+
 export interface ConnectModalProps {
   screens?: {
     [x in SupportedProviders]?: FunctionComponent<{
@@ -69,7 +74,7 @@ export interface ConnectModalProps {
     onClick: () => void;
     selected: boolean;
   }>;
-  reactModalProps?: Partial<ReactModal.Props>;
+  reactModalProps?: Partial<ReactModalProps>;
   title?: string | React.ReactElement;
   providersOptions?: {
     hideFromDefaults?: true | SupportedProviders[];
@@ -132,8 +137,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 +160,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 ? (
@@ -178,19 +192,22 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
   return (
     <ReactModal
       portalClassName={styles.portal}
+      htmlOpenClassName={'react-celo-modal-open-html'}
+      bodyOpenClassName={'react-celo-modal-open-body'}
       isOpen={!!connectionCallback}
-      onRequestClose={close}
       className={styles.modal}
       overlayClassName={styles.overlay}
+      {...reactModalProps}
+      onRequestClose={close}
       style={{
         content: {
           background: theme.background,
         },
         overlay: {
           background: hexToRGB(theme.background, 0.75),
+          ...reactModalProps?.style?.overlay,
         },
       }}
-      {...reactModalProps}
       shouldCloseOnOverlayClick={!isMobile}
       ariaHideApp={false}
     >