Merge pull request #9 from celo-tools/1.2.0

Add cREAL support and upgrade deps

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -24,7 +24,7 @@ const securityHeaders = [
     key: 'Content-Security-Policy',
     value: `default-src 'self'; script-src 'self'${
       isDev ? " 'unsafe-eval'" : ''
-    }; connect-src 'self' https://*.celo.org https://*.celo-testnet.org wss://walletconnect.celo.org wss://relay.walletconnect.org; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
+    }; connect-src 'self' https://*.celo.org https://*.celo-testnet.org wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
   },
 ]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celo-tools/mento-fi",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",
@@ -25,51 +25,52 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@celo-tools/use-contractkit": "^1.3.0",
+    "@celo-tools/use-contractkit": "^2.1.2",
     "@ethersproject/address": "^5.5.0",
     "@metamask/inpage-provider": "6.0.1",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28",
-    "@reduxjs/toolkit": "^1.6.2",
-    "bignumber.js": "^9.0.1",
+    "@reduxjs/toolkit": "^1.7.1",
+    "bignumber.js": "^9.0.2",
     "formik": "^2.2.9",
     "frappe-charts": "^1.6.2",
-    "next": "12.0.3",
+    "next": "12.0.7",
     "next-persist": "^1.2.4",
     "post-message-stream": "3.0.0",
     "react": "^17.0.2",
     "react-accessible-dropdown-menu-hook": "^3.1.0",
     "react-dom": "^17.0.2",
+    "react-modal": "3.14.3",
     "react-redux": "^7.2.6",
     "react-select": "4.3.1",
     "react-toastify": "^8.1.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "16.11.7",
-    "@types/react": "17.0.34",
+    "@types/jest": "^27.0.3",
+    "@types/node": "17.0.5",
+    "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-redux": "7.1.21",
     "@types/react-select": "4.0.18",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/parser": "^5.8.1",
     "autoprefixer": "^10.4.0",
-    "eslint": "7.32.0",
-    "eslint-config-next": "^12.0.3",
+    "eslint": "8.5.0",
+    "eslint-config-next": "^12.0.7",
     "eslint-config-prettier": "^8.3.0",
-    "jest": "^27.3.1",
+    "jest": "^27.4.5",
     "jest-css-modules-transform": "^4.3.0",
-    "postcss": "^8.3.11",
-    "prettier": "^2.4.1",
-    "tailwindcss": "^2.2.19",
-    "ts-jest": "^27.0.7",
+    "postcss": "^8.4.5",
+    "prettier": "^2.5.1",
+    "tailwindcss": "^3.0.8",
+    "ts-jest": "^27.1.2",
     "ts-node": "^10.4.0",
-    "typescript": "4.4.4"
+    "typescript": "4.5.4"
   },
   "resolutions": {
-    "@walletconnect/client": "2.0.0-beta.19",
-    "@walletconnect/types": "2.0.0-beta.19"
+    "bignumber.js": "9.0.2"
   }
 }

src/components/nav/NetworkModal.tsx

@@ -48,7 +48,7 @@ export function NetworkModal({ isOpen, close }: Props) {
       overlayClassName="fixed bg-gray-100 bg-opacity-75 inset-0"
       contentLabel="Network details"
     >
-      <div className="bg-white dark:bg-gray-800 p-5">
+      <div className="bg-white p-5">
         <div className="relative flex flex-col items-center">
           <div className="absolute -top-1 -right-1">
             <IconButton imgSrc={XCircle} title="Close" width={16} height={16} onClick={close} />

src/config/tokenMapping.ts

@@ -13,6 +13,8 @@ export async function getExchangeContract(kit: ContractKit, tokenId: NativeToken
       return kit.contracts.getExchange(StableToken.cUSD)
     case NativeTokenId.cEUR:
       return kit.contracts.getExchange(StableToken.cEUR)
+    case NativeTokenId.cREAL:
+      return kit.contracts.getExchange(StableToken.cREAL)
     default:
       throw new Error(`Could not get contract for token ${tokenId}`)
   }
@@ -24,6 +26,8 @@ export async function getTokenContract(kit: ContractKit, tokenId: NativeTokenId)
       return kit.contracts.getStableToken(StableToken.cUSD)
     case NativeTokenId.cEUR:
       return kit.contracts.getStableToken(StableToken.cEUR)
+    case NativeTokenId.cREAL:
+      return kit.contracts.getStableToken(StableToken.cREAL)
     case NativeTokenId.CELO:
       return kit.contracts.getGoldToken()
     default:
@@ -34,6 +38,7 @@ export async function getTokenContract(kit: ContractKit, tokenId: NativeTokenId)
 export function kitContractToNativeToken(name: CeloContract): NativeTokenId {
   if (name === CeloContract.StableToken) return NativeTokenId.cUSD
   if (name === CeloContract.StableTokenEUR) return NativeTokenId.cEUR
+  if (name === CeloContract.StableTokenBRL) return NativeTokenId.cREAL
   if (name === CeloContract.GoldToken) return NativeTokenId.CELO
   throw new Error(`Unsupported token contract name ${name}`)
 }
@@ -44,6 +49,8 @@ export function kitTokenToNativeToken(tokenId: CeloTokenType): NativeTokenId {
       return NativeTokenId.cUSD
     case StableToken.cEUR:
       return NativeTokenId.cEUR
+    case StableToken.cREAL:
+      return NativeTokenId.cREAL
     case Token.CELO:
       return NativeTokenId.CELO
     default:
@@ -57,6 +64,8 @@ export function nativeTokenToKitToken(tokenId: NativeTokenId): CeloTokenType {
       return StableToken.cUSD
     case NativeTokenId.cEUR:
       return StableToken.cEUR
+    case NativeTokenId.cREAL:
+      return StableToken.cREAL
     case NativeTokenId.CELO:
       return Token.CELO
     default:

src/config/tokens.ts

@@ -18,14 +18,16 @@ export enum NativeTokenId {
   CELO = 'CELO',
   cUSD = 'cUSD',
   cEUR = 'cEUR',
+  cREAL = 'cREAL',
 }
 
-export const StableTokenIds = [NativeTokenId.cUSD, NativeTokenId.cEUR]
+export const StableTokenIds = [NativeTokenId.cUSD, NativeTokenId.cEUR, NativeTokenId.cREAL]
 
 export interface INativeTokens {
   CELO: Token
   cUSD: Token
   cEUR: Token
+  cREAL: Token
 }
 
 export const NativeTokens: INativeTokens = {
@@ -53,6 +55,14 @@ export const NativeTokens: INativeTokens = {
     decimals: 18,
     chainId: config.chainId,
   },
+  cREAL: {
+    id: NativeTokenId.cREAL,
+    symbol: NativeTokenId.cREAL,
+    name: 'Celo Real',
+    color: Color.celoGreen,
+    decimals: 18,
+    chainId: config.chainId,
+  },
 }
 
 export type Tokens = INativeTokens & Record<string, Token>
@@ -61,6 +71,7 @@ export type Tokens = INativeTokens & Record<string, Token>
 export const CELO = NativeTokens.CELO
 export const cUSD = NativeTokens.cUSD
 export const cEUR = NativeTokens.cEUR
+export const cREAL = NativeTokens.cREAL
 
 export function isNativeToken(tokenId: string) {
   return Object.keys(NativeTokens).includes(tokenId)

src/features/accounts/accountSlice.ts

@@ -12,6 +12,7 @@ const initialState: AccountState = {
     [NativeTokenId.CELO]: '0',
     [NativeTokenId.cUSD]: '0',
     [NativeTokenId.cEUR]: '0',
+    [NativeTokenId.cREAL]: '0',
   },
   lastUpdated: null,
 }

src/features/chart/ReactFrappeChart.tsx

@@ -67,6 +67,7 @@ type Props = {
   valuesOverPoints?: 0 | 1
 }
 
+// eslint-disable-next-line react/display-name
 const ReactFrappeChart = forwardRef((props: Props, parentRef) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const chart = React.useRef<any>(null)

src/features/granda/fetchConfig.ts

@@ -49,10 +49,8 @@ async function _fetchConfig(kit: ContractKit): Promise<GrandaConfig> {
     const tokenId = kitContractToNativeToken(name)
     const min = limits.minExchangeAmount
     const max = limits.maxExchangeAmount
-    if (min.gt(toWei(1_000_000)) || min.lt(toWei(50_000)))
-      throw new Error(`Invalid exchange min: ${min}`)
-    if (max.gt(toWei(100_000_000)) || max.lt(toWei(1_000_000)))
-      throw new Error(`Invalid exchange max: ${max}`)
+    if (min.lt(toWei(1))) throw new Error(`Invalid exchange min: ${min}`)
+    if (max.lt(toWei(1_000_000))) throw new Error(`Invalid exchange max: ${max}`)
     exchangeLimits[tokenId] = {
       min: min.toFixed(0),
       max: max.toFixed(0),

src/features/swap/SwapForm.tsx

@@ -7,7 +7,7 @@ import { IconButton } from 'src/components/buttons/IconButton'
 import { SolidButton } from 'src/components/buttons/SolidButton'
 import { RadioInput } from 'src/components/input/RadioInput'
 import TokenSelectField, { TokenOption } from 'src/components/input/TokenSelectField'
-import { CELO, cEUR, cUSD, isStableToken, NativeTokenId } from 'src/config/tokens'
+import { CELO, cEUR, cREAL, cUSD, isStableToken, NativeTokenId } from 'src/config/tokens'
 import { AccountBalances } from 'src/features/accounts/fetchBalances'
 import { SettingsMenu } from 'src/features/swap/SettingsMenu'
 import { setFormValues } from 'src/features/swap/swapSlice'
@@ -30,6 +30,7 @@ const tokens = [
   { value: NativeTokenId.CELO, label: CELO.symbol },
   { value: NativeTokenId.cUSD, label: cUSD.symbol },
   { value: NativeTokenId.cEUR, label: cEUR.symbol },
+  { value: NativeTokenId.cREAL, label: cREAL.symbol },
 ]
 
 export function SwapForm() {

src/images/tokens/TokenIcon.tsx

@@ -1,8 +1,9 @@
 import Image from 'next/image'
 import { memo } from 'react'
-import { CELO, cEUR, cUSD, Token } from 'src/config/tokens'
+import { CELO, cEUR, cREAL, cUSD, Token } from 'src/config/tokens'
 import CeloIcon from 'src/images/tokens/CELO.svg'
 import cEURIcon from 'src/images/tokens/cEUR.svg'
+import cREALIcon from 'src/images/tokens/cREAL.svg'
 import cUSDIcon from 'src/images/tokens/cUSD.svg'
 
 interface Props {
@@ -15,6 +16,7 @@ function _TokenIcon({ token, size = 'm' }: Props) {
   if (token?.id === CELO.id) imgSrc = CeloIcon
   else if (token?.id === cUSD.id) imgSrc = cUSDIcon
   else if (token?.id === cEUR.id) imgSrc = cEURIcon
+  else if (token?.id === cREAL.id) imgSrc = cREALIcon
 
   const { actualSize, fontSize } = sizeValues[size]
 

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import { ContractKitProvider, Mainnet } from '@celo-tools/use-contractkit'
+import { defaultScreens } from '@celo-tools/use-contractkit/lib/screens'
 import '@celo-tools/use-contractkit/lib/styles.css'
 import PersistWrapper from 'next-persist/lib/NextPersistWrapper'
 import type { AppProps } from 'next/app'
@@ -14,6 +15,22 @@ import 'src/styles/fonts.css'
 import 'src/styles/globals.css'
 import 'src/vendor/inpage-metamask'
 
+const dAppConfig = {
+  name: 'Mento',
+  description: 'Mento Exchange for Celo',
+  url: config.url,
+  icon: `${config.url}/logo.svg`,
+}
+
+// TODO removing all WalletConnect options until WC v1 / v2 issues are sorted
+const screensWithoutWalletConnect = { ...defaultScreens }
+const keysToRemove = ['Valora', 'Celo Wallet', 'Celo Terminal', 'CeloDance', 'WalletConnect']
+// @ts-ignore
+keysToRemove.forEach((k) => delete screensWithoutWalletConnect[k])
+const connectModalProps = {
+  screens: screensWithoutWalletConnect,
+}
+
 const nextPersistConfig = {
   method: 'localStorage',
   allowList: {
@@ -37,13 +54,9 @@ export default function App({ Component, pageProps, router }: AppProps) {
         <Provider store={store}>
           <PersistWrapperTypeFixed wrapperConfig={nextPersistConfig}>
             <ContractKitProvider
-              dapp={{
-                name: 'Mento',
-                description: 'Mento Exchange for Celo',
-                url: config.url,
-                icon: `${config.url}/logo.svg`,
-              }}
+              dapp={dAppConfig}
               network={Mainnet}
+              connectModal={connectModalProps}
             >
               <AppLayout pathName={pathName}>
                 <Component {...pageProps} />

src/pages/_document.tsx

@@ -18,7 +18,7 @@ class MyDocument extends Document {
           <meta name="theme-color" content="#ffffff" />
 
           <meta name="application-name" content="Mento Fi" />
-          <meta name="keywords" content="Mento Finance Celo Exchange cUSD cEUR" />
+          <meta name="keywords" content="Mento Finance Celo Exchange cUSD cEUR cREAL" />
           <meta name="description" content="A simple DApp for Celo Mento exchanges." />
 
           <meta name="HandheldFriendly" content="true" />

tailwind.config.js

@@ -2,9 +2,7 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  mode: 'jit',
-  purge: ['src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: ['src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     colors: {
       transparent: 'transparent',
@@ -56,12 +54,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      padding: ['last'],
-      filter: ['hover', 'active', 'disabled'],
-      brightness: ['hover', 'active', 'disabled'],
-    },
-  },
   plugins: [],
 }