4.0 release (#256)

* chore: Label all issues in repo as Applications so they show in zenhub

* FEAT: Allow developers to pass in any networks they wish

add passed networks as a return value of useContractKit
replace NetWorkNames Enum with POJO so that its extendable
Make Network interface support arbitrary networks and include option to pass in the nativeCurrency which is used when adding to metamask.
For non celo networks dont try to add celo tokens to metamask

* fix: update Fee Currency should only be an option for Connectors / wallets that support alternative  gas fee currencies

* lint extra imports

* expose supportsFeeCurrency so devs can use to display conditional fee currency setting ops + demo it in our example app

* make it clear why we are returning false

* conflict

* Append current browser location in Metamask mobile

* replacing use of contractkit with minicontractkit

* Missing Import

* Add optional contractCache builder and memoization

* Catch token not registered error, display balances

* Fix empty block

* Change value to be type string

* Log error

* upgrade to react 18
add testing utils
start testing of Provider and hook

* upgrade jest and friends

remove react-test-render as we dont use and its not cool

* feat: redesign and wc fixes (#169)

* added search bar

* added search bar and optimization

* made some changes

* feat: initial redesign

* chore: remove unused unstated-next

* chore: review feedback

* fix: bad merge + pr review

* perf: search

* feat: adjust install logic

Co-authored-by: Henry Nunez <[email protected]>

* Balances has BigNumber value and string error

* chore: Add svg icon for celo terminal (#69)

Add svg icon for celo terminal

* docs: improve readme (#184)

* docs(readme): fix typo
* docs(readme): add better development instructions
* refactor: remove check for window
* docs(readme): remove v2 of WC from example
* docs(readme): add wallets to list
* docs(readme): add supported actions
* fix: issue labeler error
* fix(docs): original instructions with alternative

* fix: remove toggle z-index to not interfere

* fix: remove specific actions from wallet (#188)

* move to target es6

All major browsers support es6 and this should improve bundle size too.

https://www.typescriptlang.org/tsconfig#target

* Renames use-contract kit to react-celo

4.0 now requires contractkit 2.0 and greater

* fix typo

Co-authored-by: Camila Rondinini <[email protected]>

* Add test for modal

* no message

* Add basic level testing for private-key and wallet connect connectors.

* If the network is not set here than initialise call will just re establish connection to metamask with this.network (probably the one it was constructed with)

* fix: adjust styles for mobile and specifically for ios safari (#192)

* codeReview from @dckesler

* Feat/theming (#198)

* feat: initial theming

* chore: codereview

* test: add updateTheme tests

* Add Aliases for old function names  (#204)

Add Aliases for old function names so its not a pain to upgrade to v4

* feat: wallet test plan page (#205)

adds a page to the Example app (hidden in this commit) where the user can go through a set of steps to check how well a wallet interacts with the available actions of the package.

* fix: export useContractKit (#215)

* Some Network Change Errors (#216)

* Add tests for address handling in reducer
fix test file being misnamed
fix some error messages and code comments to be more clear

* fix #214 There was a destructuring error when init was not passed which is legal as its optional

* fixes #209 when switching network feeCurrency could be undefined. In that case lets skip setting it.

* fix: celo-wallet web connection (#217)

* fix: celo-wallet web connection

* refactor: rename getDesktopLink->getWebLink

* fix: destroy not re-rendering

* refactor: deeplinks and weblinks logic

* Allow updateTheme to take a null value (#219)

* Fix #211 Cleanup Init Errors (#223)

* Fix #211 Cleanup Init Errors when going to a new Wallet Screen or closing the modal

* lint: remove unused import

* fix: handle disconnect events coming from sessionUpdate events

* fix: show qrcode for mobile connectors

* chore: eslint warnings

* feat: show mobile disclaimer on apps with a deeplink

* fix dark toggle on example app (#227)

* Move the toggle down by the rest of the styling options this way it isnt  blocking everything on mobile.

also make it a little smaller

* update the used by list not to include projects that are dead or use a fork

* Change css classes to react-celo, include necessary TW css (#231)

* 4.0 Alpha 2

* fix example app dependencies (#233)

* fix example app dependencies

* attempt fix on deploy

* chore: configure test in example app (#234)

Sets up tests in the example app, using the configuration from the root (modified only to accept .test files outside of __tests__).

* docs: Add Migration Guide for v4 (#235)

* Add Guides





Co-authored-by: Camila Rondinini <[email protected]>

* style consistency

Co-authored-by: Camila Rondinini <[email protected]>

* pr review @crondinini: clarify version needed

* add proper link to release notes

Co-authored-by: Camila Rondinini <[email protected]>

* v4.0.0-beta.1 (React Celo Beta 1)

* 4.0 release

Co-authored-by: zhaonancy <[email protected]>
Co-authored-by: Nancy Zhao <[email protected]>
Co-authored-by: Nicolas Brugneaux <[email protected]>
Co-authored-by: Henry Nunez <[email protected]>
Co-authored-by: J M Rossy <[email protected]>
Co-authored-by: Camila Rondinini <[email protected]>
Co-authored-by: Daniel Kesler <[email protected]>

.github/labeler.yml

@@ -0,0 +1,2 @@
+Applications:
+  - '*'

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
         if: matrix.node == 'lts/*'
         uses: codecov/codecov-action@v2
         with:
-          files: ./packages/use-contractkit/coverage/clover.xml,./packages/walletconnect-v1/coverage/clover.xml
+          files: ./packages/react-celo/coverage/clover.xml,./packages/walletconnect-v1/coverage/clover.xml
           fail_ci_if_error: true
           verbose: true
 

.github/workflows/label.yml

@@ -0,0 +1,15 @@
+name: 'Issue Labeler'
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: github/[email protected]
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          configuration-path: .github/labeler.yml
+          not-before: 2020-01-15T02:54:32Z
+          enable-versioned-regex: 0

Makefile

@@ -7,13 +7,13 @@ dev-test:
 	yarn lerna run test:watch --stream --parallel
 
 build-demo:
-	yarn lerna run build --scope @celo-tools/use-contractkit --stream
+	yarn lerna run build --scope @celo/react-celo --stream
 	yarn lerna run build --scope example --stream
 
 clean:
 	rm -rf node_modules packages/**/node_modules packages/**/lib packages/**/.next
 
 publish:
-	cd packages/use-contractkit && yarn build && npm version patch && npm publish --public
+	cd packages/react-celo && yarn build && npm version patch && npm publish --public
 
 .PHONY: dev build-demo publish clean

codecov.yml

@@ -8,9 +8,9 @@ coverage:
         if_ci_failed: error
 
 flags:
-  use-contractkit:
+  react-celo:
     paths:
-      - packages/use-contractkit/
+      - packages/react-celo/
   walletconnect-v1:
     paths:
       - packages/walletconnect-v1/

guides/contract-cache-recipes.md

@@ -0,0 +1,49 @@
+# Building a Contracts Cache
+
+With version 4 the full ContractKit is no longer provided instead MiniContractKit is returned from the hook. For dapps that were accessing contract wrappers not provided on MiniContractKit getting the full contractsCache back can be done by providing a buildContractsCache function that takes in a `Connection` and an `AddressRegistry`. The return value of this function will be memoized and returned on `useCelo` hook as `contractsCache`.
+
+## Getting back the full cache
+
+```typescript
+import { Web3ContractCache } from '@celo/contractkit/lib/web3-contract-cache';
+import { WrapperCache } from '@celo/contractkit/lib/contract-cache';
+import { AddressRegistry } from '@celo/contractkit/lib/address-registry';
+import { ContractKit } from '@celo/contractkit';
+
+// This creates a contracts cache exactly the same as contractkit.contracts
+function fullContractsCache(
+  connection: ContractKit['connection'],
+  registry: AddressRegistry
+) {
+  const web3Contracts = new Web3ContractCache(registry);
+  return new WrapperCache(connection, web3Contracts, registry);
+}
+```
+
+```tsx
+//
+<CeloProvider
+  // The result of this function will be memoized. it will be recalculated when `fullContractsCache`, `connection` or `addressRegistry` changes
+  buildContractsCache={fullContractsCache}
+>
+  {/* etc */}
+</CeloProvider>
+
+//
+```
+
+```ts
+import { useCelo } from '@celo/react-celo';
+
+const { contractsCache } = useCelo();
+
+const contracts = contractsCache as WrapperCache;
+
+const governance = contractsCache.getGovernance();
+```
+
+## Creating a Custom Contracts Cache
+
+You can also create your own ContractsCache Class see [MiniContractsCache for an example](https://github.com/celo-org/celo-monorepo/blob/5cfd16214ca7ef7a7ff428c7d397933b3e1eeb51/packages/sdk/contractkit/src/mini-contract-cache.ts)
+
+Note that a few wrappers require a contractCache with a certain subset of other wrappers to be passed in to function these are `Slashers` `Election` `Governance` `ReleaseGold` `Validators` which depend on `Accounts` `Multisig` `BlockchainParameters` and themselves.

guides/migrate-to-v4.md

@@ -0,0 +1,31 @@
+# Migrating from @celo-tools/use-contractkit
+
+This guide covers moving from `@celo-tools/[email protected]` to `@celo/[email protected]`.
+
+Do not be thrown off by the name change. This is the same code base (with a few [breaking changes](https://github.com/celo-org/react-celo/releases/tag/v4.0.0)).
+
+## Step 1
+
+Remove @celo-tools/use-contractkit
+
+`yarn remove @celo-tools/use-contractkit`
+
+## Step 2
+
+Install @celo/react-celo and at least version 2.0.0 of @celo/contractkit
+
+`yarn add @celo/react-celo @celo/contractkit@latest`
+
+_If your app directly imports any other @celo sdks such as @celo/utils, @celo/wallet-\*\*, update them to 2.0.0 as well_
+
+## Step 3
+
+Using your favorite find–replace–tool replace all `@celo-tools/use-contractkit` with `@celo/react-celo`
+
+## Step 4 (Optional yet Recommended)
+
+Using your next favorite find–replace–tool replace all `useContractKit` with `useCelo` and all `ContractKitProvider` with `CeloProvider`
+
+## Step 5 (If needed)
+
+If you were using `kit.contracts` in your dApp to obtain celo contracts other than `Accounts`, `StableToken`, `Exchange` or `GoldToken`, you will need to [follow the contract-cache-recipe](contract-cache-recipes.md) for an alternative.

jest.config.js

@@ -7,7 +7,7 @@ module.exports = {
     },
   },
   testEnvironment: 'jsdom',
-  testRegex: '(/__tests__/.*.(test|spec)).(jsx?|tsx?)$',
+  testRegex: '(/__tests__/.*|(\\.|/))(test|spec)\\.[jt]sx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverage: Boolean(process.env.COVERAGE),
   coveragePathIgnorePatterns: ['__tests__', 'lib'],

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "use-contractkit",
+  "name": "react-celo-root",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -17,8 +17,9 @@
     "deprecate-version": "ts-node ./scripts/deprecate-version.ts"
   },
   "devDependencies": {
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^27.4.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@types/jest": "^27.5.1",
     "@types/node": "^16.3.0",
     "@types/prompt": "^1.1.2",
     "@types/semver": "^7.3.9",
@@ -33,15 +34,16 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "eth-testing": "^1.0.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
+    "jest": "^28.1.0",
     "lerna": "^4.0.0",
     "lint-staged": "^12.2.2",
     "node-ts": "^5.1.2",
     "prettier": "^2.5.1",
     "prompt": "^1.2.1",
     "semver": "^7.3.5",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^28.0.2",
     "tsc-watch": "^4.6.0",
     "typescript": "^4.5.5"
   },

packages/example/components/buttons.tsx

@@ -21,8 +21,10 @@ export function SecondaryButton(
   return (
     <button
       {...props}
-      className={`px-4 py-2 border border-transparent rounded-md text-base font-medium text-gradient bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 outline-none focus:outline-none ${
+      className={`px-4 py-2 border border-transparent rounded-md text-base font-medium outline-none focus:outline-none ${
         props.className || ''
+      } ${
+        props.disabled ? 'cursor-not-allowed text-slate-400' : 'text-purple-700'
       }`}
     />
   );

packages/example/components/test-plan/connect-wallet.test.tsx

@@ -0,0 +1,70 @@
+import '@testing-library/jest-dom';
+
+import { CeloProvider, Mainnet } from '@celo/react-celo';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { generateTestingUtils } from 'eth-testing';
+import { TestingUtils } from 'eth-testing/lib/testing-utils';
+
+import { ConnectWalletCheck } from './connect-wallet';
+
+declare global {
+  interface Window {
+    ethereum: ReturnType<TestingUtils['getProvider']> & { send?: () => void };
+  }
+}
+
+describe('ConnectWalletCheck', () => {
+  const testingUtils = generateTestingUtils({ providerType: 'MetaMask' });
+
+  beforeAll(() => {
+    // Manually inject the mocked provider in the window as MetaMask does
+    const provider = testingUtils.getProvider();
+    global.window.ethereum = provider;
+  });
+
+  beforeEach(() => {
+    testingUtils.clearAllMocks();
+  });
+
+  it('should show success when Metamask is connected', async () => {
+    // Start with no wallet connected
+    testingUtils.mockNotConnectedWallet();
+    // Mock the response for the connection request of MetaMask
+    testingUtils.mockRequestAccounts([
+      '0xf61B443A155b07D2b2cAeA2d99715dC84E839EEf',
+    ]);
+    // `send` is deprecated in Metamask, but web3 still uses it
+    global.window.ethereum.send = jest.fn();
+
+    const screen = render(
+      <CeloProvider
+        dapp={{
+          name: 'Test dapp',
+          description: 'Wallet test plan',
+          url: 'http://localhost:1234',
+          icon: 'http://localhost:1234/favicon.ico',
+        }}
+        network={Mainnet}
+        connectModal={{
+          providersOptions: { searchable: true },
+        }}
+      >
+        <ConnectWalletCheck />
+      </CeloProvider>
+    );
+
+    expect(screen.getByRole('status')).toHaveTextContent('not started');
+    const runButton = await screen.findByLabelText(
+      'Run Connect wallet to mainnet'
+    );
+    expect(runButton).toBeEnabled();
+
+    fireEvent.click(runButton);
+
+    await waitFor(() => screen.getByText(/MetaMask/).click());
+    await waitFor(() => screen.getByText(/Connected to/, { exact: false }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('success');
+    expect(runButton).toBeDisabled();
+  });
+});

packages/example/components/test-plan/connect-wallet.tsx

@@ -0,0 +1,42 @@
+import { Mainnet, useCelo } from '@celo/react-celo';
+import React, { useEffect } from 'react';
+
+import { SuccessIcon } from './success-icon';
+import { Result, TestBlock } from './ui';
+import { Status, useTestStatus } from './useTestStatus';
+
+export function ConnectWalletCheck() {
+  const { connect, address, updateNetwork } = useCelo();
+  const { status, errorMessage, wrapActionWithStatus, setStatus } =
+    useTestStatus();
+
+  const onConnectWallet = wrapActionWithStatus(async () => {
+    await updateNetwork(Mainnet);
+    await connect();
+  });
+
+  useEffect(() => {
+    if (address) {
+      setStatus.success();
+    }
+  }, [address, setStatus]);
+
+  return (
+    <TestBlock
+      status={status}
+      title="Connect wallet to mainnet"
+      disabledTest={status !== Status.NotStarted}
+      onRunTest={onConnectWallet}
+    >
+      <Result status={status}>
+        <Result.Default>
+          <p>Press the button above to choose a wallet to connect to.</p>
+        </Result.Default>
+        <Result.Success>
+          <SuccessIcon /> Connected to {address}
+        </Result.Success>
+        <Result.Error>{errorMessage}</Result.Error>
+      </Result>
+    </TestBlock>
+  );
+}

packages/example/components/test-plan/disconnect-button.tsx

@@ -0,0 +1,12 @@
+import { useCelo } from '@celo/react-celo';
+import React from 'react';
+
+export default function DisconnectButton() {
+  const { destroy } = useCelo();
+
+  return (
+    <button className="inline underline text-purple-700" onClick={destroy}>
+      Disconnect wallet
+    </button>
+  );
+}

packages/example/components/test-plan/error-icon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export function ErrorIcon() {
+  return (
+    <svg
+      className="inline"
+      height="15px"
+      version="1.1"
+      viewBox="0 0 20 20"
+      width="15px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title />
+      <desc />
+      <defs />
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+      >
+        <g
+          fill="#f94144"
+          id="Core"
+          transform="translate(-380.000000, -44.000000)"
+        >
+          <g id="cancel" transform="translate(380.000000, 44.000000)">
+            <path
+              d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M15,13.6 L13.6,15 L10,11.4 L6.4,15 L5,13.6 L8.6,10 L5,6.4 L6.4,5 L10,8.6 L13.6,5 L15,6.4 L11.4,10 L15,13.6 L15,13.6 Z"
+              id="Shape"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}