Merge branch 'master' into aaronmgdr/typed-localeStorage

# Conflicts:
#	packages/react-celo/src/use-celo-methods.ts

.yarnrc

@@ -0,0 +1 @@
+registry "https://registry.npmjs.org/"

development.md

@@ -0,0 +1,63 @@
+# Development
+
+## Workflow
+
+To run all the packages locally at once, simply clone this repository and run:
+
+```sh
+yarn;
+yarn build;  #only needs to be run the first time
+yarn dev;
+```
+
+A hot reloading server should come up on localhost:3000, it's the exact same as what's at react-celo-canary.vercel.app.
+
+Alternatively, you can individually run `react-celo` and the `example` app in parallel.
+
+For that, you still need to have run `yarn` in the root.
+
+Then, you can run `react-celo` in one tab:
+
+```sh
+cd packages/react-celo
+yarn dev
+```
+
+and run the `example` app in another:
+
+```sh
+cd packages/example
+yarn dev
+```
+
+## Bumping the packages
+
+All packages under `/packages` are meant to published with the same version.
+
+To bump the version of all the packages at once, use the `bump-versions` script.
+You'll need to specify which semver increase you want to use.
+
+For example, to bump to a prerelease:
+
+```sh
+yarn bump-versions prerelease --preId alpha
+```
+
+or for bumping a `major` version (same for `minor` or `patch`):
+
+```sh
+yarn bump-versions major
+```
+
+## Publishing the packages
+
+Once the packages are ready to be published, ensure you've checked master and it is updated. Then, you can run the npm following npm script:
+
+```sh
+yarn publish-packages
+```
+
+Hint:
+
+- You can use the `--dry-run` flag to check everything would run properly
+- If you need to run the script multiple times without changing the code, using the `--skip-build` flag can be useful to reduce the time.

package.json

@@ -4,6 +4,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "pkgs": {
+    "path": "./packages"
+  },
   "scripts": {
     "dev": "lerna run dev --stream --parallel",
     "build": "lerna link && lerna run clean && lerna run build --scope 'example' --include-dependencies",
@@ -13,10 +16,13 @@
     "test": "lerna link && COVERAGE=ON lerna run --stream --no-bail test",
     "prepare": "husky install",
     "reset-modules": "rm -rf node_modules/ packages/*/node_modules",
-    "publish-packages": "ts-node ./scripts/publish-packages.ts",
-    "deprecate-version": "ts-node ./scripts/deprecate-version.ts"
+    "publish-packages-script": "ts-node ./scripts/publish-packages.ts",
+    "deprecate-version": "ts-node ./scripts/deprecate-version.ts",
+    "publish-packages": "pkgs publish",
+    "bump-versions": "pkgs bump-versions"
   },
   "devDependencies": {
+    "@clabs/packages-publisher": "0.0.1-alpha.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.5.1",

packages/example/components/theme-button.tsx

@@ -64,7 +64,7 @@ const defaultDark = {
 const defaultLight = {
   primary: '#6366f1',
   secondary: '#eef2ff',
-  text: '#000000',
+  text: '#000',
   textSecondary: '#1f2937',
   textTertiary: '#64748b',
   muted: '#e2e8f0',
@@ -74,7 +74,7 @@ const defaultLight = {
 const greenCustom = {
   primary: '#34d399',
   secondary: '#ecfccb',
-  text: '#fff',
+  text: 'hsla(81, 88%, 80%)',
   textSecondary: '#d9f99d',
   textTertiary: '#bef264',
   muted: '#3f6212',
@@ -89,7 +89,7 @@ const roseCustom = {
   textTertiary: '#fecdd3',
   muted: '#3f3f46',
   background: '#27272a',
-  error: '#ef4444',
+  error: 'rgb(255, 0, 0)',
 };
 
 export const themes = [defaultDark, defaultLight, greenCustom, roseCustom];

packages/example/package.json

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

packages/example/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "./tsconfig.spec.json",
-  "exclude": ["**/*.test.ts"]
+  "exclude": ["**/*.test.ts"],
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
 }

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

@@ -8,6 +8,7 @@ import { Mainnet } 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';
+import defaultTheme from '../src/theme/default';
 
 interface RenderArgs {
   providerProps: Partial<CeloProviderProps>;
@@ -194,29 +195,20 @@ describe('CeloProvider', () => {
       expect(result.current.network).toEqual(Mainnet);
 
       act(() => {
-        result.current.updateTheme({
-          background: '#000',
-          primary: '#000',
-          secondary: '#000',
-          muted: '#000',
-          error: '#000',
-          text: '#000',
-          textSecondary: '#000',
-          textTertiary: '#000',
-        });
+        result.current.updateTheme(defaultTheme.light);
       });
 
       rerender();
 
       expect(result.current.theme).toEqual({
-        background: '#000',
-        primary: '#000',
-        secondary: '#000',
-        muted: '#000',
-        error: '#000',
-        text: '#000',
-        textSecondary: '#000',
-        textTertiary: '#000',
+        background: '#ffffff',
+        primary: '#6366f1',
+        secondary: '#eef2ff',
+        muted: '#e2e8f0',
+        error: '#ef4444',
+        text: '#000000',
+        textSecondary: '#1f2937',
+        textTertiary: '#64748b',
       });
     });
   });

packages/react-celo/__tests__/utils/colors.test.ts

@@ -0,0 +1,102 @@
+import {
+  Color,
+  contrast,
+  hexToRGB,
+  luminance,
+  RGBToHex,
+} from '../../src/utils/colors';
+
+describe('RGBToHex', () => {
+  it('converts rgb to hex', () => {
+    expect(RGBToHex('rgb(0, 0, 0)')).toEqual('#000000');
+    expect(RGBToHex('rgb(255, 0, 0)')).toEqual('#ff0000');
+  });
+  it('converts rgba to hex, with an error, and strip the alpha', () => {
+    const spy = jest.spyOn(console, 'error');
+    expect(RGBToHex('rgba(255, 255, 255, 0.5)')).toEqual('#ffffff80');
+    expect(spy).toBeCalled();
+  });
+});
+
+describe('hexToRGB', () => {
+  it('converts hex to rgb', () => {
+    expect(hexToRGB('#000000')).toEqual('rgb(0, 0, 0)');
+    expect(hexToRGB('#ff0000')).toEqual('rgb(255, 0, 0)');
+  });
+  it('converts hex to rgba', () => {
+    expect(hexToRGB('#000000ff')).toEqual('rgba(0, 0, 0, 1)');
+    expect(hexToRGB('#ff0000', 0.5)).toEqual('rgba(255, 0, 0, 0.5)');
+  });
+});
+
+describe('luminance', () => {
+  it('calculates the luminance of one color', () => {
+    expect(luminance(new Color('#fff'))).toBe(1);
+    expect(luminance(new Color('#000'))).toBe(0);
+    const randomColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+    expect(luminance(new Color(randomColor))).toBeGreaterThanOrEqual(0);
+    expect(luminance(new Color(randomColor))).toBeLessThanOrEqual(1);
+  });
+});
+
+describe('contrast', () => {
+  it('calculates the constrats between two colors', () => {
+    expect(contrast(new Color('#fff'), new Color('#000'))).toBe(21);
+    expect(contrast(new Color('#000'), new Color('#000'))).toBe(1);
+    expect(contrast(new Color('#fff'), new Color('#fff'))).toBe(1);
+    expect(contrast(new Color('#fff'), new Color('#444'))).toBe(9.74);
+  });
+});
+
+describe('Color', () => {
+  it('accepts hex', () => {
+    const color1 = new Color('#000000');
+    expect(color1.r).toEqual(0x00);
+    expect(color1.g).toEqual(0x00);
+    expect(color1.b).toEqual(0x00);
+    expect(color1.a).toEqual(null);
+    const color2 = new Color('#f00');
+    expect(color2.r).toEqual(0xff);
+    expect(color1.g).toEqual(0x00);
+    expect(color1.b).toEqual(0x00);
+    expect(color1.a).toEqual(null);
+    const color3 = new Color('#ffffff80');
+    expect(color3.r).toEqual(0xff);
+    expect(color3.r).toEqual(0xff);
+    expect(color3.r).toEqual(0xff);
+    expect(color3.a).toEqual(0.5);
+  });
+  it('accepts rgb(a)', () => {
+    const color1 = new Color('rgb(0, 0, 0)');
+    expect(color1.r).toEqual(0x00);
+    expect(color1.g).toEqual(0x00);
+    expect(color1.b).toEqual(0x00);
+    expect(color1.a).toEqual(null);
+    const color2 = new Color('rgb(255, 0, 0)');
+    expect(color2.r).toEqual(0xff);
+    expect(color1.g).toEqual(0x00);
+    expect(color1.b).toEqual(0x00);
+    expect(color1.a).toEqual(null);
+    const color3 = new Color('rgb(255, 255, 255, 0.2)');
+    expect(color3.r).toEqual(0xff);
+    expect(color3.r).toEqual(0xff);
+    expect(color3.r).toEqual(0xff);
+    expect(color3.a).toEqual(0.2);
+  });
+  it('accepts hsl(a)', () => {
+    const color1 = new Color('hsl(0, 0, 0)');
+    expect(color1.r).toEqual(0x00);
+    expect(color1.g).toEqual(0x00);
+    expect(color1.b).toEqual(0x00);
+    expect(color1.a).toEqual(null);
+    const color2 = new Color('hsl(359, 94, 62)');
+    expect(color2.r).toEqual(0xf9);
+    expect(color2.g).toEqual(0x43);
+    expect(color2.b).toEqual(0x46);
+    const color3 = new Color('hsl(359, 94, 62, 0.3)');
+    expect(color3.r).toEqual(0xf9);
+    expect(color3.g).toEqual(0x43);
+    expect(color3.b).toEqual(0x46);
+    expect(color3.a).toEqual(0.3);
+  });
+});

packages/react-celo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celo/react-celo",
-  "version": "4.0.0-beta.1-dev",
+  "version": "4.0.0-dev",
   "private": false,
   "scripts": {
     "prebuild": "mkdir -p lib && node ./scripts/json-to-ts.js package.json lib",
@@ -28,7 +28,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-beta.1-dev",
+    "@celo/wallet-walletconnect-v1": "4.0.0-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

@@ -5,7 +5,7 @@ import ReactModal from 'react-modal';
 import Spinner from '../components/spinner';
 import { Theme } from '../types';
 import { useCeloInternal } from '../use-celo';
-import { hexToRGB } from '../utils/helpers';
+import { hexToRGB } from '../utils/colors';
 import cls from '../utils/tailwind';
 import useTheme from '../utils/useTheme';
 import { styles as modalStyles } from './connect';

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

@@ -21,7 +21,7 @@ import {
   WalletEntry,
 } from '../types';
 import { useCeloInternal } from '../use-celo';
-import { hexToRGB } from '../utils/helpers';
+import { hexToRGB } from '../utils/colors';
 import { defaultProviderSort, SortingPredicate } from '../utils/sort';
 import cls from '../utils/tailwind';
 import useProviders, { walletToProvider } from '../utils/useProviders';

packages/react-celo/src/use-celo-methods.ts

@@ -10,9 +10,8 @@ import {
   useContractsCache,
 } from './ContractCacheBuilder';
 import { Dispatcher } from './react-celo-provider';
-import defaultTheme from './theme/default';
 import { Connector, Network, Theme } from './types';
-import { RGBToHex } from './utils/helpers';
+import { contrastCheck, fixTheme } from './utils/colors';
 import { getLastUsedWalletArgs } from './utils/localStorage';
 
 export function useCeloMethods(
@@ -180,23 +179,14 @@ export function useCeloMethods(
   const updateTheme = useCallback(
     (theme: Theme | null) => {
       if (!theme) return dispatch('setTheme', null);
-      Object.entries(theme).forEach(([key, value]: [string, string]) => {
-        if (!(key in defaultTheme.light)) {
-          console.warn(`Theme key ${key} is not valid.`);
-        }
-        const _key = key as keyof Theme;
-        if (value.startsWith('rgb')) {
-          theme[_key] = RGBToHex(value);
-          console.warn(
-            `RGB values not officially supported, but were translated to hex (${value} -> ${theme[_key]})`
-          );
-        } else if (!value.startsWith('#')) {
-          theme[_key] = `#${value}`;
-          console.warn(
-            `Malformed hex value was missing # (${value} -> ${theme[_key]})`
-          );
-        }
-      });
+
+      if (process.env.NODE_ENV !== 'production') {
+        fixTheme(theme);
+        // minimal recommended contrast ratio is 4.
+        // or 3 for larger font-sizes
+        contrastCheck(theme);
+      }
+
       dispatch('setTheme', theme);
     },
     [dispatch]