Nicolasbrugneaux/react celo (#677)

craco.config.js

@@ -40,4 +40,14 @@ module.exports = {
     enable: false,
   },
   typescript: { enableTypeChecking: false },
+  // https://github.com/WalletConnect/walletconnect-monorepo/issues/1973
+  babel: {
+    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
+  },
+  jest: {
+    configure: (jestConfig, { env, paths, resolve, rootDir }) => {
+      // See https://github.com/WalletConnect/walletconnect-monorepo/issues/1749
+      return { ...jestConfig, setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'], resolver: 'jest-resolver-enhanced' }
+    },
+  },
 }

jest.setup.ts

@@ -0,0 +1,4 @@
+import { TextDecoder, TextEncoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder

package.json

@@ -31,8 +31,6 @@
     "@typescript-eslint/parser": "^4.28.0",
     "@ubeswap/injected-connector": "^6.1.0",
     "@uniswap/token-lists": "^1.0.0-beta.24",
-    "@web3-react/core": "^6.1.9",
-    "@web3-react/types": "^6.0.7",
     "ajv": "^8.8.2",
     "awesome-typescript-loader": "^5.2.1",
     "cids": "^1.1.6",
@@ -52,6 +50,7 @@
     "i18next-browser-languagedetector": "^6.1.1",
     "i18next-xhr-backend": "^3.2.2",
     "jazzicon": "^1.5.0",
+    "jest-resolver-enhanced": "^1.1.0",
     "lint-staged": ">=11",
     "lodash.flatmap": "^4.5.0",
     "multicodec": "^3.0.1",
@@ -107,16 +106,16 @@
   },
   "license": "GPL-3.0-or-later",
   "resolutions": {
-    "@celo/wallet-walletconnect": "1.2.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "prettier": "^2.3.0"
+    "prettier": "^2.3.0",
+    "react-error-overlay": "6.0.9"
   },
   "dependencies": {
     "@apollo/client": "^3.6.5",
-    "@celo-tools/use-contractkit": "^3.1.0",
-    "@celo/contractkit": "^1.2.0",
-    "@celo/utils": "^1.2.1",
+    "@celo/contractkit": "^4.1.0",
+    "@celo/react-celo": "^5.0.4",
+    "@celo/utils": "^4.1.0",
     "@craco/craco": "^6.1.2",
     "@emotion/react": "^11.10.5",
     "@ensdomains/ensjs": "^2.0.1",

src/components/AccountDetails/Transaction.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React from 'react'
 import { CheckCircle, Triangle } from 'react-feather'
@@ -37,7 +37,7 @@ const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
 `
 
 export default function Transaction({ hash }: { hash: string }) {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
   const allTransactions = useAllTransactions()
 

src/components/AccountDetails/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit, WalletTypes } from '@celo-tools/use-contractkit'
+import { useCelo, WalletTypes } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
@@ -215,7 +215,7 @@ export default function AccountDetails({
   confirmedTransactions,
   ENSName,
 }: AccountDetailsProps) {
-  const { connect, destroy, address, walletType, network } = useContractKit()
+  const { connect, destroy, address, walletType, network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
   const closeModals = useCloseModals()
   const theme = useContext(ThemeContext)

src/components/AddressInputPanel/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -78,7 +78,7 @@ export default function AddressInputPanel({
   // triggers whenever the typed value changes
   onChange: (value: string) => void
 }) {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
   const theme = useContext(ThemeContext)
 

src/components/CurrencyInputPanel/index.tsx

@@ -1,4 +1,4 @@
-import { ChainId, useContractKit } from '@celo-tools/use-contractkit'
+import { ChainId, useCelo } from '@celo/react-celo'
 import { Pair, Token, TokenAmount } from '@ubeswap/sdk'
 import { darken } from 'polished'
 import React, { useCallback, useState } from 'react'
@@ -145,7 +145,7 @@ export default function CurrencyInputPanel({
   const { t } = useTranslation()
 
   const [modalOpen, setModalOpen] = useState(false)
-  const { address: account } = useContractKit()
+  const { address: account } = useCelo()
 
   const userBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const selectedCurrencyBalance = balanceOverride ?? userBalance

src/components/Header/OpticsV1Warning.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { JSBI, Token } from '@ubeswap/sdk'
 import { AutoColumn, TopSection } from 'components/Column'
 import { CardSection } from 'components/earn/styled'
@@ -20,7 +20,7 @@ const WarningCard = styled(AutoColumn)<{ disabled?: boolean }>`
 `
 
 export default function OpticsV1Warning() {
-  const { address: account, network } = useContractKit()
+  const { address: account, network } = useCelo()
   const theme = useContext(ThemeContext)
   const chainId = network.chainId
   const allTokens = useAllTokens(chainId)

src/components/Header/Polling.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
@@ -63,7 +63,7 @@ const Spinner = styled.div`
 `
 
 export default function Polling() {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
 
   const blockNumber = useBlockNumber()

src/components/Header/URLWarning.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React from 'react'
 import { isMobile } from 'react-device-detect'
@@ -35,7 +35,7 @@ const appURL: Record<string, string> = {
 export default function URLWarning() {
   const toggleURLWarning = useURLWarningToggle()
   const showURLWarning = useURLWarningVisible()
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId
 
   return isMobile ? (

src/components/Header/UbeBalanceContent.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, TokenAmount } from '@ubeswap/sdk'
 import Loader from 'components/Loader'
 import React from 'react'
@@ -43,7 +43,7 @@ const StyledClose = styled(X)`
  * Content for balance stats modal
  */
 export default function UbeBalanceContent({ setShowUbeBalanceModal }: { setShowUbeBalanceModal: any }) {
-  const { address: account, network } = useContractKit()
+  const { address: account, network } = useCelo()
   const chainId = network.chainId
   const ube = chainId ? UBE[chainId as unknown as UbeswapChainId] : undefined
 

src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import 'rc-drawer/assets/index.css'
 
-import { ChainId, useContractKit } from '@celo-tools/use-contractkit'
+import { ChainId, useCelo } from '@celo/react-celo'
 import { CELO, ChainId as UbeswapChainId, TokenAmount } from '@ubeswap/sdk'
 import { CardNoise } from 'components/earn/styled'
 import Modal from 'components/Modal'
@@ -357,8 +357,8 @@ const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
 }
 
 export default function Header() {
-  const { address: account, network } = useContractKit()
-  const chainId = network.chainId
+  const { address: account, network } = useCelo()
+  const chainId = network.chainId as UbeswapChainId
   const { t } = useTranslation()
 
   const userCELOBalance = useTokenBalance(account ?? undefined, CELO[chainId as unknown as UbeswapChainId])

src/components/Header/useCirculatingSupply.ts

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { UBE } from 'constants/tokens'
 import { BigNumber } from 'ethers'
@@ -21,7 +21,7 @@ const nonCirculatingAddresses = {
  * Fetches the circulating supply
  */
 export const useCirculatingSupply = (): TokenAmount | undefined => {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId
   const ube = chainId ? UBE[chainId as unknown as UbeswapChainId] : undefined
   const ubeContract = useTokenContract(ube?.address)

src/components/Identicon/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import Jazzicon from 'jazzicon'
 import React, { useEffect, useRef } from 'react'
 import styled from 'styled-components'
@@ -13,7 +13,7 @@ const StyledIdenticonContainer = styled.div`
 export default function Identicon() {
   const ref = useRef<HTMLDivElement>()
 
-  const { address: account } = useContractKit()
+  const { address: account } = useCelo()
 
   useEffect(() => {
     if (account && ref.current) {

src/components/LimitOrderHistory/LimitOrderHistoryItem.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, Token, TokenAmount } from '@ubeswap/sdk'
 import { BigNumber } from 'ethers'
 import { useToken } from 'hooks/Tokens'
@@ -115,7 +115,7 @@ interface LimitOrderHistoryItemProps {
 }
 
 export default function LimitOrderHistoryItem({ item, rewardCurrency, lastDisplayItem }: LimitOrderHistoryItemProps) {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as UbeswapChainId
   const { callback: cancelOrder } = useCancelOrderCallback(item.orderHash)
   const theme = useTheme()

src/components/ModalViews/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useContext } from 'react'
 import { ArrowUpCircle } from 'react-feather'
@@ -50,7 +50,7 @@ export function SubmittedView({
   hash: string | undefined
 }) {
   const theme = useContext(ThemeContext)
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
 
   const { t } = useTranslation()

src/components/Popups/TransactionPopup.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
@@ -23,7 +23,7 @@ export default function TransactionPopup({
   success?: boolean
   summary?: string
 }) {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
 
   const theme = useContext(ThemeContext)

src/components/PositionCard/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { JSBI, Pair, Percent, TokenAmount } from '@ubeswap/sdk'
 import { darken, transparentize } from 'polished'
 import React, { useState } from 'react'
@@ -48,7 +48,7 @@ interface PositionCardProps {
 }
 
 export function MinimalPositionCard({ pair, border }: PositionCardProps) {
-  const { address: account } = useContractKit()
+  const { address: account } = useCelo()
 
   const currency0 = pair.token0
   const currency1 = pair.token1
@@ -157,7 +157,7 @@ export function MinimalPositionCard({ pair, border }: PositionCardProps) {
 
 export default function FullPositionCard({ pair, border, stakedBalance }: PositionCardProps) {
   const { t } = useTranslation()
-  const { address: account } = useContractKit()
+  const { address: account } = useCelo()
 
   const currency0 = pair.token0
   const currency1 = pair.token1

src/components/SearchModal/ChainSearchModal.tsx

@@ -1,4 +1,4 @@
-import { Network } from '@celo-tools/use-contractkit'
+import { Network } from '@celo/react-celo'
 import CurrencyLogo from 'components/CurrencyLogo'
 import React, { useCallback } from 'react'
 import { WrappedTokenInfo } from 'state/lists/hooks'

src/components/SearchModal/CurrencyList.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { currencyEquals, Token, TokenAmount } from '@ubeswap/sdk'
 import React, { CSSProperties, MutableRefObject, useCallback } from 'react'
 import { FixedSizeList } from 'react-window'
@@ -94,7 +94,7 @@ function CurrencyRow({
   otherSelected: boolean
   style: CSSProperties
 }) {
-  const { address: account } = useContractKit()
+  const { address: account } = useCelo()
 
   const key = currencyKey(currency)
   const selectedTokenList = useCombinedActiveList()

src/components/SearchModal/CurrencySearch.tsx

@@ -1,4 +1,4 @@
-import { ChainId } from '@celo-tools/use-contractkit'
+import { ChainId } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, cUSD, Token } from '@ubeswap/sdk'
 import { ButtonLight } from 'components/Button'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'

src/components/SearchModal/CurrencySearchModal.tsx

@@ -1,4 +1,4 @@
-import { ChainId } from '@celo-tools/use-contractkit'
+import { ChainId } from '@celo/react-celo'
 import { Token } from '@ubeswap/sdk'
 import { TokenList } from '@uniswap/token-lists'
 import usePrevious from 'hooks/usePrevious'

src/components/SearchModal/ImportRow.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { Token } from '@ubeswap/sdk'
 import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
@@ -54,7 +54,7 @@ export default function ImportRow({
   setImportToken: (token: Token) => void
 }) {
   // gloabls
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId
   const theme = useTheme()
 

src/components/SearchModal/ImportToken.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId, Token } from '@ubeswap/sdk'
 import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'
@@ -50,7 +50,7 @@ interface ImportProps {
 export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }: ImportProps) {
   const theme = useTheme()
 
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
 
   const [confirmed, setConfirmed] = useState(false)

src/components/SearchModal/ManageTokens.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
 import { ChainId, Token } from '@ubeswap/sdk'
 import Card from 'components/Card'
 import Column from 'components/Column'
@@ -43,7 +43,7 @@ export default function ManageTokens({
   setModalView: (view: CurrencyModalView) => void
   setImportToken: (token: Token) => void
 }) {
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const chainId = network.chainId as unknown as ChainId
 
   const [searchQuery, setSearchQuery] = useState<string>('')

src/components/Stake/ChangeDelegateModal.tsx

@@ -1,4 +1,5 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useCelo } from '@celo/react-celo'
+import { ChainId } from '@ubeswap/sdk'
 import { ButtonError } from 'components/Button'
 import { SearchInput } from 'components/SearchModal/styleds'
 import { useDoTransaction } from 'components/swap/routing'
@@ -31,12 +32,12 @@ interface ChangeDelegateModalProps {
 export default function ChangeDelegateModal({ isOpen, onDismiss }: ChangeDelegateModalProps) {
   const { t } = useTranslation()
 
-  const { network } = useContractKit()
+  const { network } = useCelo()
   const inputRef = useRef<HTMLInputElement>()
   const [delegateAddress, setDelegateAddress] = useState<string>('')
   const [error, setError] = useState<string | undefined>('ChangeDelegate')
 
-  const romulusAddress = ubeGovernanceAddresses[network.chainId]
+  const romulusAddress = ubeGovernanceAddresses[network.chainId as ChainId]
   const { tokenAddress } = useRomulusInfo(romulusAddress)
   const c = usePoofTokenContract(tokenAddress)
   const doTransaction = useDoTransaction()