chore: upgrade from use-contractkit to react-celo

package.json

@@ -107,15 +107,14 @@
   },
   "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"
   },
   "dependencies": {
     "@apollo/client": "^3.6.5",
-    "@celo-tools/use-contractkit": "^3.1.0",
-    "@celo/contractkit": "^1.2.0",
+    "@celo/contractkit": "^3.2.0",
+    "@celo/react-celo": "^4.3.0",
     "@celo/utils": "^1.2.1",
     "@craco/craco": "^6.1.2",
     "@emotion/react": "^11.10.5",

src/components/AccountDetails/Transaction.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React from 'react'
 import { CheckCircle, Triangle } from 'react-feather'

src/components/AccountDetails/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit, WalletTypes } from '@celo-tools/use-contractkit'
+import { useContractKit, WalletTypes } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'

src/components/AddressInputPanel/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'

src/components/CurrencyInputPanel/index.tsx

@@ -1,4 +1,4 @@
-import { ChainId, useContractKit } from '@celo-tools/use-contractkit'
+import { ChainId, useContractKit } from '@celo/react-celo'
 import { Pair, Token, TokenAmount } from '@ubeswap/sdk'
 import { darken } from 'polished'
 import React, { useCallback, useState } from 'react'

src/components/Header/OpticsV1Warning.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { JSBI, Token } from '@ubeswap/sdk'
 import { AutoColumn, TopSection } from 'components/Column'
 import { CardSection } from 'components/earn/styled'

src/components/Header/Polling.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'

src/components/Header/URLWarning.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React from 'react'
 import { isMobile } from 'react-device-detect'

src/components/Header/UbeBalanceContent.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, TokenAmount } from '@ubeswap/sdk'
 import Loader from 'components/Loader'
 import React from 'react'

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, useContractKit } from '@celo/react-celo'
 import { CELO, ChainId as UbeswapChainId, TokenAmount } from '@ubeswap/sdk'
 import { CardNoise } from 'components/earn/styled'
 import Modal from 'components/Modal'
@@ -358,7 +358,7 @@ const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
 
 export default function Header() {
   const { address: account, network } = useContractKit()
-  const chainId = network.chainId
+  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 { useContractKit } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { UBE } from 'constants/tokens'
 import { BigNumber } from 'ethers'

src/components/Identicon/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import Jazzicon from 'jazzicon'
 import React, { useEffect, useRef } from 'react'
 import styled from 'styled-components'

src/components/LimitOrderHistory/LimitOrderHistoryItem.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, Token, TokenAmount } from '@ubeswap/sdk'
 import { BigNumber } from 'ethers'
 import { useToken } from 'hooks/Tokens'

src/components/ModalViews/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useContext } from 'react'
 import { ArrowUpCircle } from 'react-feather'

src/components/Popups/TransactionPopup.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'

src/components/PositionCard/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { JSBI, Pair, Percent, TokenAmount } from '@ubeswap/sdk'
 import { darken, transparentize } from 'polished'
 import React, { useState } from 'react'

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 { useContractKit } from '@celo/react-celo'
 import { currencyEquals, Token, TokenAmount } from '@ubeswap/sdk'
 import React, { CSSProperties, MutableRefObject, useCallback } from 'react'
 import { FixedSizeList } from 'react-window'

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 { useContractKit } from '@celo/react-celo'
 import { Token } from '@ubeswap/sdk'
 import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'

src/components/SearchModal/ImportToken.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId, Token } from '@ubeswap/sdk'
 import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'

src/components/SearchModal/ManageTokens.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId, Token } from '@ubeswap/sdk'
 import Card from 'components/Card'
 import Column from 'components/Column'

src/components/Stake/ChangeDelegateModal.tsx

@@ -1,4 +1,5 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } 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'
@@ -36,7 +37,7 @@ export default function ChangeDelegateModal({ isOpen, onDismiss }: ChangeDelegat
   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()

src/components/Stake/Proposals/ProposalCard.tsx

@@ -1,6 +1,6 @@
-import { useContractKit, useProvider } from '@celo-tools/use-contractkit'
+import { useContractKit, useProvider } from '@celo/react-celo'
 import { ExternalProvider, JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
-import { JSBI, TokenAmount } from '@ubeswap/sdk'
+import { ChainId, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { StyledControlButton } from 'components/LimitOrderHistory/LimitOrderHistoryItem'
 import { BigNumber } from 'ethers'
 import { getAddress } from 'ethers/lib/utils'
@@ -114,13 +114,13 @@ export const useGetConnectedSigner = (): (() => Promise<JsonRpcSigner>) => {
   const library = useProvider()
   const signer = getProviderOrSigner(library, address || undefined)
   return useCallback(async () => {
-    if (kit.defaultAccount) {
+    if (kit.connection.web3.defaultAccount) {
       return signer as JsonRpcSigner
     }
     const connector = await connect()
     const nextKit = await connector.initialise()
-    const nextProvider = nextKit.kit.web3.currentProvider as unknown as ExternalProvider
-    return new Web3Provider(nextProvider).getSigner(nextKit.kit.defaultAccount)
+    const nextProvider = nextKit.kit.connection.web3.currentProvider as unknown as ExternalProvider
+    return new Web3Provider(nextProvider).getSigner(nextKit.kit.connection.web3.defaultAccount!)
   }, [signer, kit, connect])
 }
 
@@ -175,7 +175,7 @@ export const ProposalCard: React.FC<IProps> = ({ proposalEvent, clickable, showI
     timeText: undefined,
   })
   const getConnectedSigner = useGetConnectedSigner()
-  const romulusAddress = ubeGovernanceAddresses[network.chainId]
+  const romulusAddress = ubeGovernanceAddresses[network.chainId as ChainId]
   const [latestBlockNumber] = useLatestBlockNumber()
   const { proposal, proposalState } = useProposal((romulusAddress as string) || '', proposalEvent.args.id)
   const { votingPower, releaseVotingPower } = useVotingTokens(proposalEvent.args.startBlock)

src/components/Stake/StakeInputField.tsx

@@ -1,4 +1,4 @@
-import { ChainId, useContractKit } from '@celo-tools/use-contractkit'
+import { ChainId, useContractKit } from '@celo/react-celo'
 import { Token, TokenAmount } from '@ubeswap/sdk'
 import { darken } from 'polished'
 import React from 'react'

src/components/TransactionConfirmationModal/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId } from '@ubeswap/sdk'
 import React, { useContext } from 'react'
 import { AlertTriangle, ArrowUpCircle } from 'react-feather'

src/components/WalletModal/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import React, { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useTranslation } from 'react-i18next'

src/components/Web3Status/index.tsx

@@ -1,4 +1,4 @@
-import { useContractKit, WalletTypes } from '@celo-tools/use-contractkit'
+import { useContractKit, WalletTypes } from '@celo/react-celo'
 import * as Sentry from '@sentry/react'
 import useAccountSummary from 'hooks/useAccountSummary'
 import { darken, lighten } from 'polished'

src/components/earn/ClaimRewardModal.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { TokenAmount } from '@ubeswap/sdk'
 import { useDoTransaction } from 'components/swap/routing'
 import zip from 'lodash/zip'

src/components/earn/PoolCard.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { formatEther } from '@ethersproject/units'
 import { JSBI, TokenAmount } from '@ubeswap/sdk'
 import CurrencyLogo from 'components/CurrencyLogo'

src/components/earn/StakingModal.tsx

@@ -1,4 +1,4 @@
-import { useProvider } from '@celo-tools/use-contractkit'
+import { useProvider } from '@celo/react-celo'
 import { Pair, TokenAmount } from '@ubeswap/sdk'
 import Loader from 'components/Loader'
 import { useDoTransaction } from 'components/swap/routing'

src/components/earn/UnstakingModal.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { useDoTransaction } from 'components/swap/routing'
 import { CustomStakingInfo } from 'pages/Earn/useCustomStakingInfo'
 import React, { useState } from 'react'

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId, Token } from '@ubeswap/sdk'
 import { ButtonEmpty } from 'components/Button'
 import Card, { OutlineCard } from 'components/Card'

src/components/swap/routing/TradeDetails/MoolaDirectTradeDetails.tsx

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { CELO, ChainId as UbeswapChainId, cUSD, Fraction, TokenAmount, TradeType } from '@ubeswap/sdk'
 import { ErrorText } from 'components/swap/styleds'
 import { usePair } from 'data/Reserves'

src/components/swap/routing/hooks/directTrades.ts

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { Pair, Token, TokenAmount, Trade } from '@ubeswap/sdk'
 import flatMap from 'lodash.flatmap'
 import { useMemo } from 'react'

src/components/swap/routing/hooks/useTrade.ts

@@ -1,4 +1,4 @@
-import { ChainId, useContractKit, useProvider } from '@celo-tools/use-contractkit'
+import { ChainId, useContractKit, useProvider } from '@celo/react-celo'
 import { currencyEquals, JSBI, Pair, Percent, Price, Token, TokenAmount, Trade, TradeType } from '@ubeswap/sdk'
 import { ERC20_ABI } from 'constants/abis/erc20'
 import {
@@ -325,7 +325,7 @@ export function useMinimaTrade(tokenAmountIn?: TokenAmount, tokenOut?: Token): M
   const [fetchUpdatedData, setFetchUpdatedData] = React.useState<boolean>(true)
   const [fetchTimeout, setFetchTimeout] = React.useState<NodeJS.Timeout | undefined>(undefined)
   const { address: account, network } = useContractKit()
-  const { chainId } = network
+  const chainId = network.chainId as ChainId
   const library = useProvider()
   const provider = getProviderOrSigner(library, account || undefined)
   const tokens = useAllTokens()
@@ -337,7 +337,7 @@ export function useMinimaTrade(tokenAmountIn?: TokenAmount, tokenOut?: Token): M
     }
     const curDeps = {
       chainId,
-      account,
+      account: account || null,
       allowedSlippage,
       singleHopOnly,
       inputAddr: tokenAmountIn.currency.address,

src/components/swap/routing/index.ts

@@ -1,4 +1,4 @@
-import { useContractKit, useGetConnectedSigner } from '@celo-tools/use-contractkit'
+import { useContractKit, useGetConnectedSigner } from '@celo/react-celo'
 import { JsonRpcSigner, TransactionRequest } from '@ethersproject/providers'
 import { ChainId, Trade } from '@ubeswap/sdk'
 import { BigNumber, BigNumberish, CallOverrides, Contract, ContractTransaction, PayableOverrides } from 'ethers'

src/components/swap/routing/limit/queueLimitOrderTrade.ts

@@ -1,4 +1,4 @@
-import { useGetConnectedSigner } from '@celo-tools/use-contractkit'
+import { useGetConnectedSigner } from '@celo/react-celo'
 import { ChainId, TokenAmount } from '@ubeswap/sdk'
 import { LimitOrderProtocol__factory } from 'generated/factories/LimitOrderProtocol__factory'
 import { OrderBook__factory } from 'generated/factories/OrderBook__factory'

src/components/swap/routing/moola/useMoola.ts

@@ -1,5 +1,5 @@
 import { CeloContract } from '@celo/contractkit'
-import { useContractKit, useProvider } from '@celo-tools/use-contractkit'
+import { useContractKit, useProvider } from '@celo/react-celo'
 import { CELO, ChainId, cREAL, currencyEquals, cUSD, Token } from '@ubeswap/sdk'
 import { CEUR, MCELO, MCEUR, MCREAL, MCUSD } from 'constants/index'
 import { useMemo } from 'react'

src/components/swap/routing/moola/useMoolaDirectRoute.ts

@@ -1,4 +1,4 @@
-import { useContractKit, useProvider } from '@celo-tools/use-contractkit'
+import { useContractKit, useProvider } from '@celo/react-celo'
 import { ChainId, currencyEquals, JSBI, Pair, Route, Token, TokenAmount } from '@ubeswap/sdk'
 import { useMemo } from 'react'
 import { useUserAllowMoolaWithdrawal } from 'state/user/hooks'

src/components/swap/routing/useTradeCallback.ts

@@ -1,4 +1,4 @@
-import { useContractKit, useProvider } from '@celo-tools/use-contractkit'
+import { useContractKit, useProvider } from '@celo/react-celo'
 import { ChainId, Trade } from '@ubeswap/sdk'
 import useENS from 'hooks/useENS'
 import { SwapCallbackState, useSwapCallback } from 'hooks/useSwapCallback'

src/constants/multicall/index.ts

@@ -1,4 +1,4 @@
-import { ChainId } from '@celo-tools/use-contractkit'
+import { ChainId } from '@celo/react-celo'
 
 import MULTICALL_ABI from './abi.json'
 

src/constants/poolManager.ts

@@ -1,4 +1,4 @@
-import { ChainId } from '@celo-tools/use-contractkit'
+import { ChainId } from '@celo/react-celo'
 
 //todo: replace Mainnet and Baklava PoolManager Addresses
 export const POOL_MANAGER: Record<number, string> = {

src/hooks/Tokens.ts

@@ -1,4 +1,4 @@
-import { ChainId, useContractKit } from '@celo-tools/use-contractkit'
+import { ChainId, useContractKit } from '@celo/react-celo'
 import { parseBytes32String } from '@ethersproject/strings'
 import { currencyEquals, Token } from '@ubeswap/sdk'
 import { arrayify } from 'ethers/lib/utils'

src/hooks/romulus/useProposals.ts

@@ -1,4 +1,5 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
+import { ChainId } from '@ubeswap/sdk'
 import { BigNumber } from 'ethers'
 import { TypedEvent } from 'generated/common'
 import { useRomulusDelegateContract } from 'hooks/useContract'
@@ -20,7 +21,7 @@ type Proposal = [BigNumber, string, string[], BigNumber[], string[], string[], B
 
 export const useProposals = (): Array<TypedEvent<Proposal>> | undefined => {
   const { network } = useContractKit()
-  const romulusAddress = ubeGovernanceAddresses[network.chainId]
+  const romulusAddress = ubeGovernanceAddresses[network.chainId as ChainId]
   const romulusContract = useRomulusDelegateContract(romulusAddress)
   const [proposals, setProposals] = useState<Array<TypedEvent<Proposal>> | undefined>(undefined)
   const mountRef = useRef(true)

src/hooks/romulus/useRomulus.ts

@@ -1,5 +1,5 @@
 import { Address } from '@celo/contractkit'
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { usePoofTokenContract } from 'hooks/useContract'
 import { useMemo } from 'react'

src/hooks/romulus/useVoteCasts.ts

@@ -1,5 +1,5 @@
 import { Address } from '@celo/contractkit'
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { BigNumber } from 'ethers'
 import { TypedEvent } from 'generated/common'
 import { useRomulusDelegateContract } from 'hooks/useContract'

src/hooks/romulus/useVotingTokens.ts

@@ -1,4 +1,4 @@
-import { useContractKit } from '@celo-tools/use-contractkit'
+import { useContractKit } from '@celo/react-celo'
 import { ChainId as UbeswapChainId, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { BigNumber } from 'ethers'
 import { usePoofTokenContract } from 'hooks/useContract'
@@ -24,7 +24,7 @@ type VotingInfo = {
 
 export const useVotingTokens = (blockNumber: BigNumber | number): VotingInfo => {
   const { address, network } = useContractKit()
-  const chainId = network.chainId
+  const chainId = network.chainId as UbeswapChainId
   const romulusAddress = chainId ? ubeGovernanceAddresses[chainId] : undefined
   const ube = chainId ? UBE[chainId as unknown as UbeswapChainId] : undefined
   const { tokenAddress, releaseTokenAddress } = useRomulusInfo(romulusAddress)