Merge pull request #318 from celo-org/release/4.2

Release/4.2

.eslintrc.js

@@ -50,5 +50,11 @@ module.exports = {
       },
     ],
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
   },
 };

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 14, lts/*]
+        node: [14, 16, 18]
     steps:
       - name: Checkout
         uses: actions/checkout@v2

package.json

@@ -2,11 +2,16 @@
   "name": "react-celo-root",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/example",
+    "packages/react-celo",
+    "packages/walletconnect-v1"
   ],
   "pkgs": {
     "path": "./packages"
   },
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "scripts": {
     "dev": "lerna run dev --stream --parallel",
     "build": "lerna link && lerna run clean && lerna run build --scope 'example' --include-dependencies",
@@ -43,15 +48,15 @@
     "eth-testing": "^1.0.0",
     "husky": "^7.0.4",
     "jest": "^28.1.0",
-    "lerna": "^4.0.0",
+    "lerna": "^5.4.3",
     "lint-staged": "^12.2.2",
-    "node-ts": "^5.1.2",
     "prettier": "^2.5.1",
     "prompt": "^1.2.1",
     "semver": "^7.3.5",
     "ts-jest": "^28.0.2",
+    "ts-node": "^10.9.1",
     "tsc-watch": "^4.6.0",
-    "typescript": "^4.5.5"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "*.{js,css,md,ts,tsx,json,yaml,yml}": "prettier --write"

packages/example/components/test-plan/perform-actions.tsx

@@ -63,7 +63,7 @@ export function PerformActionInWallet({
         status={status}
         title={title}
         disabledTest={disabled}
-        onRunTest={onRunTest}
+        onRunTest={() => void onRunTest()}
       >
         <Result status={status}>
           <p>{description}</p>

packages/example/components/test-plan/ui.tsx

@@ -51,8 +51,9 @@ export function TestBlock({
   );
 }
 
-export const Header: React.FC = (props) => (
-  <h3 className="font-semibold text-base mr-2" {...props} />
+type HeaderProps = { children: React.ReactNode };
+export const Header: React.FC<HeaderProps> = (props) => (
+  <h3 className="font-semibold text-base mr-2">{props.children}</h3>
 );
 
 export const Text: React.FC = (props) => (
@@ -77,7 +78,8 @@ export function Result(props: React.PropsWithChildren<{ status: Status }>) {
   );
 }
 
-export const Success: React.FC = (props) => {
+type ResultSuccessProps = { children: React.ReactNode };
+export const ResultSuccess: React.FC<ResultSuccessProps> = (props) => {
   const context = useResultContext();
   return context === Status.Success ? (
     <p className="text-[#43aa8b] flex items-center gap-[5px]">
@@ -86,7 +88,9 @@ export const Success: React.FC = (props) => {
   ) : null;
 };
 
-export const ErrorText: React.FC = (props) => {
+type ResultErrorProps = { children: React.ReactNode };
+
+export const ResultError: React.FC<ResultErrorProps> = (props) => {
   const context = useResultContext();
   return context === Status.Failed ? (
     <p className="text-[#f94144] flex items-center gap-[5px]">
@@ -95,13 +99,14 @@ export const ErrorText: React.FC = (props) => {
   ) : null;
 };
 
-export const Default: React.FC = (props) => {
+type ResultDefaultProps = { children: React.ReactNode };
+export const ResultDefault: React.FC<ResultDefaultProps> = (props) => {
   const context = useResultContext();
   return context === Status.NotStarted || context === Status.Pending ? (
     <>{props.children}</>
   ) : null;
 };
 
-Result.Success = Success;
-Result.Error = ErrorText;
-Result.Default = Default;
+Result.Success = ResultSuccess;
+Result.Error = ResultError;
+Result.Default = ResultDefault;

packages/example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -14,9 +14,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@celo/react-celo": "4.1.0",
-    "@celo/contractkit": "^2.0.0",
-    "@celo/utils": "^2.0.0",
+    "@celo/contractkit": "^2.2.0",
+    "@celo/react-celo": "^4.2.0",
+    "@celo/utils": "^2.2.0",
+    "@walletconnect/client": "1.8.0",
     "next": "^12.1.6",
     "postcss": "^8.4.5",
     "react": "^18.1.0",
@@ -25,6 +26,8 @@
     "web3": "1.3.6"
   },
   "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "autoprefixer": "^10.4.2",
     "tailwindcss": "^3.0.15"
   }

packages/example/pages/index.tsx

@@ -132,7 +132,7 @@ function HomePage(): React.ReactElement {
     sendTestTransaction,
     'sendTransaction'
   );
-  const testSignTypedData = wrapAction(signTestTypedData, 'sendTransaction');
+  const testSignTypedData = wrapAction(signTestTypedData, 'signTypedData');
   const testSignPersonal = wrapAction(signTest, 'signPersonal');
 
   const toggleDarkMode = useCallback(() => {
@@ -412,10 +412,10 @@ function SelectChain() {
     <select
       className="border border-celo-gold outline-celo-gold-light text-slate-800 rounded px-1 py-1 mr-1"
       value={network.name}
-      onChange={async (e) => {
+      onChange={(e) => {
         const newNetwork = networks.find((n) => n.name === e.target.value);
         if (newNetwork) {
-          await updateNetwork(newNetwork);
+          void updateNetwork(newNetwork);
         }
       }}
     >

packages/example/pages/wallet.tsx

@@ -15,7 +15,7 @@ import {
   SignTypedSignProposal,
   SupportedMethods,
 } from '@celo/wallet-walletconnect-v1';
-import WalletConnect from '@walletconnect/client-v1';
+import WalletConnect from '@walletconnect/client';
 import { BigNumber } from 'bignumber.js';
 import Head from 'next/head';
 import { createRef, useCallback, useEffect, useState } from 'react';
@@ -372,7 +372,7 @@ export default function Wallet(): React.ReactElement {
 
         setApprovalData({
           accept: approveConnection,
-          reject: rejectConnection,
+          reject: () => rejectConnection(),
           meta: {
             title: `new connection from dApp ${
               payload?.params[0]?.peerMeta?.name || ''

packages/example/utils/index.ts

@@ -6,43 +6,45 @@ import {
   Token,
 } from '@celo/contractkit';
 
-export const TYPED_DATA = {
-  types: {
-    EIP712Domain: [
-      { name: 'name', type: 'string' },
-      { name: 'version', type: 'string' },
-      { name: 'chainId', type: 'uint256' },
-      { name: 'verifyingContract', type: 'address' },
-    ],
-    Person: [
-      { name: 'name', type: 'string' },
-      { name: 'wallet', type: 'address' },
-    ],
-    Mail: [
-      { name: 'from', type: 'Person' },
-      { name: 'to', type: 'Person' },
-      { name: 'contents', type: 'string' },
-    ],
-  },
-  primaryType: 'Mail',
-  domain: {
-    name: 'Ether Mail',
-    version: '1',
-    chainId: 42220, // Alfajores
-    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
-  },
-  message: {
-    from: {
-      name: 'Cow',
-      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+export function getTypedData(chainId: number) {
+  return {
+    types: {
+      EIP712Domain: [
+        { name: 'name', type: 'string' },
+        { name: 'version', type: 'string' },
+        { name: 'chainId', type: 'uint256' },
+        { name: 'verifyingContract', type: 'address' },
+      ],
+      Person: [
+        { name: 'name', type: 'string' },
+        { name: 'wallet', type: 'address' },
+      ],
+      Mail: [
+        { name: 'from', type: 'Person' },
+        { name: 'to', type: 'Person' },
+        { name: 'contents', type: 'string' },
+      ],
     },
-    to: {
-      name: 'Bob',
-      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+    primaryType: 'Mail',
+    domain: {
+      name: 'Ether Mail',
+      version: '1',
+      chainId,
+      verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
     },
-    contents: 'Hello, Bob!',
-  },
-};
+    message: {
+      from: {
+        name: 'Cow',
+        wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+      },
+      to: {
+        name: 'Bob',
+        wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+      },
+      contents: 'Hello, Bob!',
+    },
+  };
+}
 
 type FeeTokenMap = { [FeeToken in CeloTokenContract]: CeloTokenType };
 

packages/example/utils/send-test-transaction.ts

@@ -10,7 +10,7 @@ export async function sendTestTransaction(
       .transfer(
         // impact market contract
         '0x73D20479390E1acdB243570b5B739655989412f5',
-        Web3.utils.toWei('0.00000001', 'ether')
+        Web3.utils.toWei('1', 'wei')
       )
       .sendAndWaitForReceipt({
         from: k.connection.defaultAccount,

packages/example/utils/sign-test-typed-data.ts

@@ -1,15 +1,17 @@
+import { MiniContractKit } from '@celo/contractkit/lib/mini-kit';
 import { UseCelo } from '@celo/react-celo';
 
-import { TYPED_DATA } from '.';
+import { getTypedData } from '.';
 
 export async function signTestTypedData(
   performActions: UseCelo['performActions']
 ) {
-  await performActions(async (kit) => {
+  await performActions(async (kit: MiniContractKit) => {
     if (kit.connection.defaultAccount) {
+      const chainId = await kit.connection.chainId();
       return await kit.connection.signTypedData(
         kit.connection.defaultAccount,
-        TYPED_DATA
+        getTypedData(chainId)
       );
     } else {
       throw new Error('No default account');

packages/react-celo/__tests__/connectors/celo-extension-wallet.test.ts

@@ -28,6 +28,8 @@ describe('CeloExtensionWalletConnector', () => {
     // @ts-ignore
     (global.window.celo = {
       ...provider,
+      request: ({ method, params }: { method: string; params: unknown[] }) =>
+        provider.request({ method, params }),
       send: (params, cb) =>
         cb(null, {
           jsonrpc: params.jsonrpc,
@@ -46,6 +48,7 @@ describe('CeloExtensionWalletConnector', () => {
       });
     testingUtils.mockAccounts([ACCOUNT]);
     testingUtils.mockRequestAccounts([ACCOUNT]);
+    testingUtils.mockChainId(`0x${Baklava.chainId.toString(16)}`);
     setApplicationLogger(mockLogger);
   });
   let connector: CeloExtensionWalletConnector;
@@ -75,6 +78,7 @@ describe('CeloExtensionWalletConnector', () => {
       expect(onConnect).toBeCalledWith({
         networkName: Alfajores.name,
         address: ACCOUNT,
+        walletChainId: Baklava.chainId,
         walletType: WalletTypes.CeloExtensionWallet,
       });
     });