feature/upgrade-wallet-library

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.7",
     "@arbitrum/sdk": "^3.0.0-beta.11",
+    "@coinbase/wallet-sdk": "^3.3.0",
     "@popperjs/core": "^2.9.3",
     "@reach/dialog": "^0.17.0",
     "@reach/portal": "^0.17.0",
@@ -41,11 +42,16 @@
     "@swapr/sdk": "1.6.0-rc.4",
     "@uniswap/smart-order-router": "^2.9.3",
     "@uniswap/token-lists": "^1.0.0-beta.27",
-    "@web3-react/core": "^6.1.9",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/network-connector": "^6.2.9",
-    "@web3-react/walletconnect-connector": "^6.2.13",
-    "@web3-react/walletlink-connector": "^6.2.14",
+    "@walletconnect/ethereum-provider": "^1.7.5",
+    "@web3-react/coinbase-wallet": "8.0.34-beta.0",
+    "@web3-react/core": "8.0.35-beta.0",
+    "@web3-react/eip1193": "8.0.26-beta.0",
+    "@web3-react/empty": "8.0.20-beta.0",
+    "@web3-react/metamask": "8.0.28-beta.0",
+    "@web3-react/network": "8.0.27-beta.0",
+    "@web3-react/types": "8.0.20-beta.0",
+    "@web3-react/url": "8.0.25-beta.0",
+    "@web3-react/walletconnect": "8.0.35-beta.0",
     "ajv": "^8.11.0",
     "ajv-formats": "^2.1.1",
     "aos": "^2.3.4",

src/components/AddTokenButton/AddTokenButton.tsx

@@ -3,11 +3,11 @@ import { SWPR } from '@swapr/sdk'
 import { useCallback, useMemo } from 'react'
 
 import swprLogo from '../../assets/images/swpr-logo.png'
-import { useActiveWeb3React } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { AddSWPRToMetamaskButton } from '../Button'
 
 export const AddTokenButton = ({ active }: { active?: boolean }) => {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3ReactCore()
 
   const swpr = useMemo(() => (chainId ? SWPR[chainId] : undefined), [chainId])
 

src/components/ButtonConnect/index.tsx

@@ -1,4 +1,4 @@
-import { useUnsupportedChainIdError } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { ApplicationModal } from '../../state/application/actions'
 import {
   useModalOpen,
@@ -8,11 +8,11 @@ import {
 import { ButtonPrimary } from '../Button'
 
 export const ButtonConnect = () => {
+  const { isActiveChainSupported } = useWeb3ReactCore()
   const toggleWalletSwitcherPopover = useWalletSwitcherPopoverToggle()
   const toggleNetworkSwitcherPopover = useNetworkSwitcherPopoverToggle()
   const networkSwitcherPopoverOpen = useModalOpen(ApplicationModal.NETWORK_SWITCHER)
-  const unsupportedChainIdError = useUnsupportedChainIdError()
-  const isSwitchNetwork = networkSwitcherPopoverOpen || unsupportedChainIdError
+  const isSwitchNetwork = networkSwitcherPopoverOpen || !isActiveChainSupported
 
   return (
     <ButtonPrimary

src/components/Claim/ActionButton/index.tsx

@@ -1,10 +1,11 @@
 import { CurrencyAmount } from '@swapr/sdk'
 
-import { InjectedConnector } from '@web3-react/injected-connector'
+import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
+import { MetaMask } from '@web3-react/metamask'
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { useActiveWeb3React } from '../../../hooks'
+import { useWeb3ReactCore } from '../../../hooks/useWeb3ReactCore'
 import { ButtonPrimary } from '../../Button'
 import { AutoColumn } from '../../Column'
 
@@ -35,7 +36,7 @@ export function ActionButton({
   onSwitchToArbitrum,
   onClaim,
 }: ActionButtonProps) {
-  const { account, chainId, connector } = useActiveWeb3React()
+  const { account, chainId, connector } = useWeb3ReactCore()
 
   const [disabled, setDisabled] = useState(true)
   const [text, setText] = useState('Claim SWPR (old)')
@@ -63,7 +64,8 @@ export function ActionButton({
 
   const handleLocalClick = useCallback(() => {
     if (!account) onConnectWallet()
-    else if (!correctNetwork && connector instanceof InjectedConnector) onSwitchToArbitrum()
+    else if (!correctNetwork && (connector instanceof MetaMask || connector instanceof CoinbaseWallet))
+      onSwitchToArbitrum()
     else if (isOldSwaprLp) {
       const anchor = document.createElement('a')
       Object.assign(anchor, {

src/components/Claim/ConvertFlow/index.tsx

@@ -3,9 +3,9 @@ import { SWPR_CONVERTER_ADDRESS, TokenAmount } from '@swapr/sdk'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
-import { useActiveWeb3React } from '../../../hooks'
 import { useConvertSwprCallback } from '../../../hooks/swpr/useConvertSwprCallback'
 import { ApprovalState, useApproveCallback } from '../../../hooks/useApproveCallback'
+import { useWeb3ReactCore } from '../../../hooks/useWeb3ReactCore'
 import { useTransactionAdder } from '../../../state/transactions/hooks'
 import { ButtonPrimary } from '../../Button'
 import { AutoColumn } from '../../Column'
@@ -23,7 +23,7 @@ interface ConvertFlowProps {
 }
 
 export function ConvertFlow({ oldSwprBalance, disabled, onError }: ConvertFlowProps) {
-  const { chainId, account } = useActiveWeb3React()
+  const { chainId, account } = useWeb3ReactCore()
   const addTransaction = useTransactionAdder()
   //chainId will be one of  1,4,100,137,42161,421611 or undefined
   const spender = SWPR_CONVERTER_ADDRESS[chainId!]

src/components/CurrencyInputPanel/CurrencyInputPanel.component.tsx

@@ -2,7 +2,7 @@ import { Currency } from '@swapr/sdk'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import { TYPE } from '../../theme'
 import { normalizeInputValue } from '../../utils'
@@ -56,7 +56,7 @@ export const CurrencyInputPanelComponent = ({
   const [isOpen, setIsOpen] = useState(false)
   const [focused, setFocused] = useState(false)
   const [localValue, setLocalValue] = useState(value)
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3ReactCore()
   const [isMaxAmount, setIsMaxAmount] = useState(false)
 
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)

src/components/CurrencyInputPanel/CurrencyUserBalance.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import { useTheme } from 'styled-components'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { TYPE } from '../../theme'
 import { limitNumberOfDecimalPlaces } from '../../utils/prices'
 import { UnderlinedSmallText, UppercaseHelper } from './CurrencyInputPanel.styles'
@@ -16,7 +16,7 @@ export const CurrencyUserBalance = ({
   customBalanceText,
   onMax,
 }: CurrencyUserBalanceProps) => {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3ReactCore()
   const theme = useTheme()
 
   if (!account) return null

src/components/CurrencyLogo/CurrencyLogo.container.tsx

@@ -5,8 +5,8 @@ import { useMemo } from 'react'
 import carrotListLogoUrl from '../../assets/images/carrot.png'
 import DXDLogo from '../../assets/images/dxd.svg'
 import SWPRLogo from '../../assets/images/swpr-logo.png'
-import { useActiveWeb3React } from '../../hooks'
 import useHttpLocations from '../../hooks/useHttpLocations'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { useBridgeTokenInfo } from '../../services/EcoBridge/EcoBridge.hooks'
 import { useTokenInfoFromActiveListOnCurrentChain } from '../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../state/lists/wrapped-token-info'
@@ -20,7 +20,7 @@ export const CurrencyLogo = ({
   currencyWrapperSource = CurrencyWrapperSource.SWAP,
   ...componentProps
 }: CurrencyLogoContainerProps) => {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3ReactCore()
   const selectedChainId = chainIdOverride || chainId
 
   const swapWrappedTokenInfo = useTokenInfoFromActiveListOnCurrentChain(currency)

src/components/Header/Balances.tsx

@@ -4,8 +4,8 @@ import { useMemo } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import styled from 'styled-components'
 
-import { useActiveWeb3React, useUnsupportedChainIdError } from '../../hooks'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { useToggleShowClaimPopup } from '../../state/application/hooks'
 import { useNativeCurrencyBalance, useTokenBalance } from '../../state/wallet/hooks'
 import { Amount } from './styled'
@@ -55,8 +55,7 @@ const StyledBalanacesWrapper = styled.div(
 export function Balances() {
   const toggleClaimPopup = useToggleShowClaimPopup()
   const nativeCurrency = useNativeCurrency()
-  const isUnsupportedChainIdError = useUnsupportedChainIdError()
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId } = useWeb3ReactCore()
   const userNativeCurrencyBalance = useNativeCurrencyBalance()
   const accountOrUndefined = useMemo(() => account || undefined, [account])
   const newSwpr = useMemo(() => (chainId ? SWPR[chainId] : undefined), [chainId])
@@ -71,30 +70,26 @@ export function Balances() {
 
   return (
     <StyledBalanacesWrapper onClick={toggleClaimPopup}>
-      {!isUnsupportedChainIdError && (
-        <>
-          <Amount id="eth-balance">
-            {userNativeCurrencyBalance ? (
-              `${
-                userNativeCurrencyBalance.greaterThan(new Fraction('10000'))
-                  ? numberFormater.format(parseInt(userNativeCurrencyBalance.toFixed(2)))
-                  : userNativeCurrencyBalance.toFixed(3)
-              } ${nativeCurrency.symbol}`
-            ) : (
-              <Skeleton className="eth-balance-skeleton-wrapper" />
-            )}
-          </Amount>
-          {!networkWithoutSWPR && (
-            <Amount id="swpr-info">
-              {newSwprBalance
-                ? newSwprBalance.greaterThan(new Fraction('10000'))
-                  ? numberFormater.format(parseInt(newSwprBalance.toFixed(3)))
-                  : newSwprBalance.toFixed(3)
-                : '0.000'}{' '}
-              SWPR
-            </Amount>
-          )}
-        </>
+      <Amount id="eth-balance">
+        {userNativeCurrencyBalance ? (
+          `${
+            userNativeCurrencyBalance.greaterThan(new Fraction('10000'))
+              ? numberFormater.format(parseInt(userNativeCurrencyBalance.toFixed(2)))
+              : userNativeCurrencyBalance.toFixed(3)
+          } ${nativeCurrency.symbol}`
+        ) : (
+          <Skeleton className="eth-balance-skeleton-wrapper" />
+        )}
+      </Amount>
+      {!networkWithoutSWPR && (
+        <Amount id="swpr-info">
+          {newSwprBalance
+            ? newSwprBalance.greaterThan(new Fraction('10000'))
+              ? numberFormater.format(parseInt(newSwprBalance.toFixed(3)))
+              : newSwprBalance.toFixed(3)
+            : '0.000'}{' '}
+          SWPR
+        </Amount>
       )}
     </StyledBalanacesWrapper>
   )

src/components/Header/Polling.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { useBlockNumber } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { getExplorerLink } from '../../utils'
@@ -63,7 +63,7 @@ const Spinner = styled.div`
 `
 
 export default function Polling() {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3ReactCore()
 
   const blockNumber = useBlockNumber()
 

src/components/Header/index.tsx

@@ -8,10 +8,10 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ReactComponent as GasInfoSvg } from '../../assets/images/gas-info.svg'
-import { useActiveWeb3React, useUnsupportedChainIdError } from '../../hooks'
 import { useSwaprSinglelSidedStakeCampaigns } from '../../hooks/singleSidedStakeCampaigns/useSwaprSingleSidedStakeCampaigns'
 import { useGasInfo } from '../../hooks/useGasInfo'
 import { useLiquidityMiningCampaignPosition } from '../../hooks/useLiquidityMiningCampaignPosition'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleShowClaimPopup, useToggleShowExpeditionsPopup } from '../../state/application/hooks'
 import { useDarkModeManager } from '../../state/user/hooks'
@@ -198,7 +198,7 @@ const StyledChevron = styled(ChevronUp)<{ open: boolean }>`
 `
 
 function Header() {
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId, isActiveChainSupported } = useWeb3ReactCore()
 
   const { t } = useTranslation('common')
   const [isGasInfoOpen, setIsGasInfoOpen] = useState(false)
@@ -213,8 +213,6 @@ function Header() {
   const newSwpr = useMemo(() => (chainId ? SWPR[chainId] : undefined), [chainId])
   const newSwprBalance = useTokenBalance(accountOrUndefined, newSwpr)
   const isUnsupportedNetworkModal = useModalOpen(ApplicationModal.UNSUPPORTED_NETWORK)
-  const isUnsupportedChainIdError = useUnsupportedChainIdError()
-
   const networkWithoutSWPR = !newSwpr
 
   const onScrollHander = () => {
@@ -297,23 +295,23 @@ function Header() {
         </HeaderSubRow>
 
         <Flex maxHeight={'22px'} justifyContent={'end'}>
-          {account && (
+          {account && isActiveChainSupported && (
             <>
               <HeaderButton onClick={toggleExpeditionsPopup} style={{ marginRight: '7px' }}>
                 &#10024;&nbsp;Expeditions
               </HeaderButton>
-              <Balances />
+              {isActiveChainSupported && <Balances />}
             </>
           )}
           <UnsupportedNetworkPopover show={isUnsupportedNetworkModal}>
-            {isUnsupportedChainIdError && (
+            {!isActiveChainSupported && (
               <Amount data-testid="unsupported-network-warning" zero>
                 {'UNSUPPORTED NETWORK'}
               </Amount>
             )}
           </UnsupportedNetworkPopover>
           {gas.normal !== 0.0 && (
-            <GasInfo onClick={() => setIsGasInfoOpen(!isGasInfoOpen)} hide={!account || isUnsupportedChainIdError}>
+            <GasInfo onClick={() => setIsGasInfoOpen(!isGasInfoOpen)} hide={!account || !isActiveChainSupported}>
               <GasInfoSvg />
               <Text marginLeft={'4px'} marginRight={'2px'} fontSize={10} fontWeight={600} lineHeight={'9px'}>
                 {gas.normal}

src/components/Header/swpr-info/index.tsx

@@ -3,7 +3,7 @@ import { TokenAmount } from '@swapr/sdk'
 import Skeleton from 'react-loading-skeleton'
 import styled from 'styled-components'
 
-import { useActiveWeb3React } from '../../../hooks'
+import { useWeb3ReactCore } from '../../../hooks/useWeb3ReactCore'
 import { HeaderButton } from '../HeaderButton'
 import { Amount } from '../styled'
 
@@ -24,10 +24,9 @@ interface SwprInfoProps {
 }
 
 export function SwprInfo({ onToggleClaimPopup, newSwprBalance, hasActiveCampaigns }: SwprInfoProps) {
-  const { account } = useActiveWeb3React()
-
+  const { account, isActiveChainSupported } = useWeb3ReactCore()
   return (
-    <Wrapper onClick={onToggleClaimPopup} hide={!account}>
+    <Wrapper onClick={onToggleClaimPopup} hide={!account || !isActiveChainSupported}>
       <Amount borderRadius={hasActiveCampaigns ? '8px 0px 0px 8px !important;' : ''} zero={false}>
         {!account ? (
           '0.000'

src/components/LiquidityMining/Create/Steps/PairAndReward/AssetSelector/index.tsx

@@ -4,9 +4,9 @@ import { useEffect, useMemo, useState } from 'react'
 import { Box, Flex } from 'rebass'
 import styled from 'styled-components'
 
-import { useActiveWeb3React } from '../../../../../../hooks'
 import { ApprovalState, useApproveCallback } from '../../../../../../hooks/useApproveCallback'
 import { useStakingRewardsDistributionFactoryContract } from '../../../../../../hooks/useContract'
+import { useWeb3ReactCore } from '../../../../../../hooks/useWeb3ReactCore'
 import { Actions, ActionType, CampaignType } from '../../../../../../pages/LiquidityMining/Create'
 import { useTokenBalance } from '../../../../../../state/wallet/hooks'
 import { CloseIcon, TYPE } from '../../../../../../theme'
@@ -82,7 +82,7 @@ export default function AssetSelector({
   rawAmount,
   setRewardsObject,
 }: AssetSelectorProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3ReactCore()
   const userBalance = useTokenBalance(account || undefined, currency0 !== null ? currency0 : undefined)
 
   const [assetTitle, setAssetTitle] = useState<string | null>(null)

src/components/LiquidityMining/Create/Steps/PreviewAndCreate/index.tsx

@@ -11,8 +11,8 @@ import { useEffect, useState } from 'react'
 import { Box, Flex } from 'rebass'
 import styled from 'styled-components'
 
-import { useActiveWeb3React } from '../../../../../hooks'
 import { useNativeCurrencyUSDPrice } from '../../../../../hooks/useNativeCurrencyUSDPrice'
+import { useWeb3ReactCore } from '../../../../../hooks/useWeb3ReactCore'
 import { getStakedAmountUSD } from '../../../../../utils/liquidityMining'
 import { ButtonPrimary } from '../../../../Button'
 import { CampaignCard } from '../../../../Pool/PairsList/CampaignCard'
@@ -76,7 +76,7 @@ export default function PreviewAndCreate({
   setSimulatedPrice,
   simulatedPrice,
 }: PreviewProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3ReactCore()
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false)
   const { loading: loadingNativeCurrencyUsdPrice, nativeCurrencyUSDPrice } = useNativeCurrencyUSDPrice()
   useEffect(() => {

src/components/ModalViews/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import styled, { useTheme } from 'styled-components'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { useActiveWeb3React } from '../../hooks'
+import { useWeb3ReactCore } from '../../hooks/useWeb3ReactCore'
 import { CloseIcon, CustomLightSpinner, TYPE } from '../../theme'
 import { ExternalLink } from '../../theme/components'
 import { getExplorerLink } from '../../utils'
@@ -47,7 +47,7 @@ export function SubmittedView({
   hash: string | undefined
 }) {
   const theme = useTheme()
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3ReactCore()
   const { t } = useTranslation('common')
 
   return (