diff --git a/lend/craco.config.js b/lend/craco.config.js index 64505b960..bea6c916f 100644 --- a/lend/craco.config.js +++ b/lend/craco.config.js @@ -1,13 +1,33 @@ const CracoLessPlugin = require("craco-less"); - +const webpack = require('webpack'); module.exports = { + reactStrictMode: true, webpack: { configure: (webpackConfig) => { webpackConfig.module.rules.push({ test: /\.mjs$/, include: /node_modules/, type: "javascript/auto", + + }); + webpackConfig.module.rules.push({ + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, }); + webpackConfig.resolve.fallback = { + ...webpackConfig.resolve.fallback, + "fs": false, // Mock 'fs' with an empty module. + "path": require.resolve("path-browserify"), + "buffer": require.resolve("buffer") + }; + webpackConfig.plugins.push( + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'], + }), + ); return webpackConfig; }, }, @@ -24,4 +44,4 @@ module.exports = { }, }, ], -}; +}; \ No newline at end of file diff --git a/lend/package.json b/lend/package.json index f044856a5..7283f3a43 100644 --- a/lend/package.json +++ b/lend/package.json @@ -13,11 +13,12 @@ "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.7", - "@web3-react/core": "^6.1.9", + "@web3-react/core": "^8.2.0", "@web3-react/injected-connector": "^6.0.7", "@web3-react/walletconnect-connector": "^6.1.9", "axios": "^0.21.1", "bootstrap": "^4.6.0", + "craco-less": "3.0.1", "ethers": "5.4.0", "framer": "^1.2.29", "rc-slider": "^10.0.1", @@ -28,7 +29,7 @@ "react-dom": "^17.0.1", "react-hooks-global-state": "^1.0.1", "react-router-dom": "^5.2.0", - "react-scripts": "4.0.3", + "react-scripts": "5.0.1", "shared": "^0.1.0", "styled-components": "^5.2.1", "typescript": "^4.1.2", diff --git a/lend/src/App.tsx b/lend/src/App.tsx index ee443c5c8..a82707217 100644 --- a/lend/src/App.tsx +++ b/lend/src/App.tsx @@ -5,7 +5,6 @@ import { Web3ReactProvider } from "@web3-react/core"; import { Web3DataContextProvider } from "./hooks/web3DataContext"; import "shared/lib/i18n/config"; import { Web3ContextProvider } from "./hooks/web3Context"; -import { getLibrary } from "shared/lib/utils/getLibrary"; import { SubgraphDataContextProvider } from "./hooks/subgraphDataContext"; import { PendingTransactionsContextProvider } from "./hooks/pendingTransactionsContext"; import { ExternalAPIDataContextProvider } from "shared/lib/hooks/externalAPIDataContext"; @@ -16,6 +15,7 @@ import Geoblocked from "shared/lib/components/Geoblocked/Geoblocked"; import { LoadingText } from "shared/lib/hooks/useLoadingText"; import RootApp from "./pages/RootApp"; import colors from "shared/lib/designSystem/colors"; +import { allConnectors } from "shared/lib/utils/wallet/connectors"; import "shared/lib/i18n/config"; const Body = styled.div` @@ -48,7 +48,7 @@ function App() { return ( - + diff --git a/lend/src/components/WalletPage/index.tsx b/lend/src/components/WalletPage/index.tsx index 745535b9e..46d7cf967 100644 --- a/lend/src/components/WalletPage/index.tsx +++ b/lend/src/components/WalletPage/index.tsx @@ -26,7 +26,6 @@ import { useAssetsBalance } from "../../hooks/web3DataContext"; import Indicator from "shared/lib/components/Indicator/Indicator"; import { truncateAddress } from "shared/lib/utils/address"; import { formatUnits } from "ethers/lib/utils"; -import { useChain } from "../../hooks/chainContext"; const borderStyle = `1px solid ${colors.primaryText}1F`; @@ -253,7 +252,6 @@ export const WalletPage = ({ onHide }: WalletPageProps) => { ); const [selectedWallet, setWallet] = useState(); const balances = useAssetsBalance(); - const [chain] = useChain(); useEffect(() => { setTimeout(() => { if (active) setWalletStep(WalletPageEnum.ACCOUNT); @@ -263,13 +261,18 @@ export const WalletPage = ({ onHide }: WalletPageProps) => { const onActivate = useCallback(async () => { if (selectedWallet) { try { - await activate(selectedWallet as EthereumWallet, chain); + if (selectedWallet === EthereumWallet.WalletConnect) { + setTimeout(() => { + onHide(); + }, 1000); + } + await activate(selectedWallet as EthereumWallet, Chains.Ethereum); onHide(); } catch (error) { console.error(error); } } - }, [activate, chain, onHide, selectedWallet]); + }, [activate, onHide, selectedWallet]); const modalTitle = useMemo(() => { if (walletStep === WalletPageEnum.ACCOUNT) { diff --git a/lend/src/hooks/useERC20Contracts.ts b/lend/src/hooks/useERC20Contracts.ts index 27fbd645b..2cac18666 100644 --- a/lend/src/hooks/useERC20Contracts.ts +++ b/lend/src/hooks/useERC20Contracts.ts @@ -4,6 +4,7 @@ import { ERC20Balance } from "../codegen"; import { ERC20Balance__factory } from "../codegen/factories/ERC20Balance__factory"; import { useWeb3Context } from "shared/lib/hooks/web3Context"; import deployment from "../constants/deployments.json"; +import useWeb3Wallet from "./useWeb3Wallet"; export const getRibbonContract = (library: any, useSigner: boolean = true) => { const provider = useSigner ? library.getSigner() : library; @@ -21,17 +22,18 @@ export const getUSDCContract = (library: any, useSigner: boolean = true) => { }; const useERC20Contracts = () => { - const { active, library } = useWeb3React(); - const { provider } = useWeb3Context(); + const { provider } = useWeb3React(); + const { active } = useWeb3Wallet(); + const { provider: defaultProvider } = useWeb3Context(); const [ribbonToken, setRibbonToken] = useState(null); const [usdcToken, setUSDCToken] = useState(null); useEffect(() => { - const ribbonToken = getRibbonContract(library || provider, active); + const ribbonToken = getRibbonContract(provider || defaultProvider, active); setRibbonToken(ribbonToken); - const usdcToken = getUSDCContract(library || provider, active); + const usdcToken = getUSDCContract(provider || defaultProvider, active); setUSDCToken(usdcToken); - }, [active, library, provider]); + }, [active, defaultProvider, provider]); return { ribbonToken, diff --git a/lend/src/hooks/useFetchPoolData.ts b/lend/src/hooks/useFetchPoolData.ts index bc1757d9a..bb6313202 100644 --- a/lend/src/hooks/useFetchPoolData.ts +++ b/lend/src/hooks/useFetchPoolData.ts @@ -10,16 +10,13 @@ import { defaultPoolData, PoolData, PoolDataResponses } from "../models/pool"; import { isProduction } from "shared/lib/utils/env"; import { usePendingTransactions } from "./pendingTransactionsContext"; import { isPoolSupportedOnChain } from "../utils/pool"; +import useWeb3Wallet from "./useWeb3Wallet"; const useFetchPoolData = (): PoolData => { - const { - chainId, - library, - active: web3Active, - account: web3Account, - } = useWeb3React(); - - const { provider } = useWeb3Context(); + const { chainId, provider, account: web3Account } = useWeb3React(); + + const { active: web3Active } = useWeb3Wallet(); + const { provider: defaultProvider } = useWeb3Context(); const account = impersonateAddress ? impersonateAddress : web3Account; const { transactionsCounter } = usePendingTransactions(); @@ -47,7 +44,11 @@ const useFetchPoolData = (): PoolData => { web3Active && isPoolSupportedOnChain(pool, chainId || 1) ); - const contract = getLendContract(library || provider, pool, active); + const contract = getLendContract( + provider || defaultProvider, + pool, + active + ); if (!contract) { return { pool }; @@ -205,7 +206,7 @@ const useFetchPoolData = (): PoolData => { if (!isProduction()) { console.timeEnd("Pool Data Fetch"); // eslint-disable-line } - }, [account, web3Active, library, provider, chainId]); + }, [web3Active, chainId, provider, defaultProvider, account]); useEffect(() => { doMulticall(); diff --git a/lend/src/hooks/useInterestRateModelData.ts b/lend/src/hooks/useInterestRateModelData.ts index 1f74d5b87..13b37231f 100644 --- a/lend/src/hooks/useInterestRateModelData.ts +++ b/lend/src/hooks/useInterestRateModelData.ts @@ -6,12 +6,12 @@ import { getInterestRateModelContract } from "./useInterestRateModelContract"; import { useWeb3Context } from "./web3Context"; export const useInterestRateModelData = () => { - const { library } = useWeb3React(); - const { provider } = useWeb3Context(); + const { provider } = useWeb3React(); + const { provider: defaultProvider } = useWeb3Context(); const [data, setData] = useState(defaultInterestData); const [loading, setLoading] = useState(true); const getData = useCallback(async () => { - const contract = getInterestRateModelContract(library || provider); + const contract = getInterestRateModelContract(provider || defaultProvider); if (!contract) { return; @@ -40,7 +40,7 @@ export const useInterestRateModelData = () => { } as InterestData); setLoading(false); - }, [library, provider]); + }, [defaultProvider, provider]); useEffect(() => { getData(); diff --git a/lend/src/hooks/useLendContract.ts b/lend/src/hooks/useLendContract.ts index 7c2f0777f..3be219ee9 100644 --- a/lend/src/hooks/useLendContract.ts +++ b/lend/src/hooks/useLendContract.ts @@ -7,6 +7,7 @@ import { PoolOptions, } from "shared/lib/constants/lendConstants"; import { useWeb3Context } from "shared/lib/hooks/web3Context"; +import useWeb3Wallet from "./useWeb3Wallet"; export const getLendContract = ( library: any, @@ -22,14 +23,19 @@ export const getLendContract = ( }; const useLendContract = (poolOption: PoolOptions) => { - const { active, library } = useWeb3React(); - const { provider } = useWeb3Context(); + const { provider } = useWeb3React(); + const { active } = useWeb3Wallet(); + const { provider: defaultProvider } = useWeb3Context(); const [pool, setPool] = useState(null); useEffect(() => { - const pool = getLendContract(library || provider, poolOption, active); + const pool = getLendContract( + provider || defaultProvider, + poolOption, + active + ); setPool(pool); - }, [active, library, provider, poolOption]); + }, [active, provider, poolOption, defaultProvider]); return pool; }; diff --git a/lend/src/hooks/usePoolFactoryContract.ts b/lend/src/hooks/usePoolFactoryContract.ts index 5f310c45c..85c51db57 100644 --- a/lend/src/hooks/usePoolFactoryContract.ts +++ b/lend/src/hooks/usePoolFactoryContract.ts @@ -4,6 +4,7 @@ import { PoolFactory } from "../codegen"; import { PoolFactory__factory } from "../codegen/factories/PoolFactory__factory"; import { useWeb3Context } from "shared/lib/hooks/web3Context"; import deployment from "../constants/deployments.json"; +import useWeb3Wallet from "./useWeb3Wallet"; export const getPoolFactoryContract = ( library: any, @@ -15,14 +16,18 @@ export const getPoolFactoryContract = ( }; const usePoolFactoryContract = () => { - const { active, library } = useWeb3React(); - const { provider } = useWeb3Context(); + const { provider } = useWeb3React(); + const { active } = useWeb3Wallet(); + const { provider: defaultProvider } = useWeb3Context(); const [poolFactory, setPoolFactory] = useState(null); useEffect(() => { - const poolFactory = getPoolFactoryContract(library || provider, active); + const poolFactory = getPoolFactoryContract( + provider || defaultProvider, + active + ); setPoolFactory(poolFactory); - }, [active, library, provider]); + }, [active, defaultProvider, provider]); return poolFactory; }; diff --git a/lend/src/hooks/useWeb3Wallet.tsx b/lend/src/hooks/useWeb3Wallet.tsx index 041fd54fd..b5c679a3d 100644 --- a/lend/src/hooks/useWeb3Wallet.tsx +++ b/lend/src/hooks/useWeb3Wallet.tsx @@ -1,23 +1,22 @@ import { useWeb3React as useEVMWallet } from "@web3-react/core"; -import { AbstractConnector } from "@web3-react/abstract-connector"; -import { - getWalletConnectConnector, - injectedConnector, - walletlinkConnector, -} from "../utils/connectors"; -import { providers } from "ethers"; +import { Connector } from "@web3-react/types"; +import { Web3Provider } from "@ethersproject/providers"; import { useCallback, useEffect, useState } from "react"; -import { WalletConnectConnector } from "@web3-react/walletconnect-connector"; +import { WalletConnect as WalletConnectV2 } from "@web3-react/walletconnect-v2"; import { useChain } from "./chainContext"; +import { Wallet } from "shared/lib/models/wallets"; import { - EthereumWallet, - isEthereumWallet, - Wallet, -} from "shared/lib/models/wallets"; -import { Chains, CHAINS_TO_ID, ID_TO_CHAINS } from "../constants/constants"; -import { switchChains } from "shared/lib/utils/chainSwitching"; + Chains, + ChainsToCHAINID, + ID_TO_CHAINS, +} from "shared/lib/constants/constants"; import { impersonateAddress } from "shared/lib/utils/development"; import { isLedgerDappBrowserProvider } from "web3-ledgerhq-frame-connector"; +import { + LAST_CONNECTED_WALLET_LOCAL_STORAGE_KEY, + allConnectors, + walletToConnector, +} from "shared/lib/utils/wallet/connectors"; interface Web3WalletData { chainId: number | undefined; @@ -27,26 +26,30 @@ interface Web3WalletData { account: string | null | undefined; connectingWallet: Wallet | undefined; connectedWallet: Wallet | undefined; - ethereumProvider: providers.Web3Provider | undefined; - ethereumConnector?: AbstractConnector; + ethereumProvider: Web3Provider | undefined; + ethereumConnector?: Connector; // True if is embeded in ledger live isLedgerLive: boolean; } +// This error code indicates that +export enum ChainCodeErrorEnum { + UNAVAILABLE = 4902, // chain has not been added to MetaMask + CANCELLED = 4001, // switching chain has been cancelled +} + export const useWeb3Wallet = (): Web3WalletData => { - const [, setChain] = useChain(); + const [chain, setChain] = useChain(); const [chainToSwitch, setChainToSwitch] = useState(null); const [connectingWallet, setConnectingWallet] = useState(); const [connectedWallet, setConnectedWallet] = useState(); const { chainId: chainIdEth, - active: isActiveEth, - activate: activateEth, + isActive: isActiveEth, account: accountEth, - library: libraryEth, - deactivate: _deactivateEth, connector: connectorEth, + provider, } = useEVMWallet(); // This hook manages the entire multi-chain flow @@ -54,62 +57,76 @@ export const useWeb3Wallet = (): Web3WalletData => { useEffect(() => { if (isActiveEth && chainIdEth) { setChain(ID_TO_CHAINS[chainIdEth as number]); - if (connectorEth instanceof WalletConnectConnector) { - setConnectedWallet(EthereumWallet.WalletConnect); - } - } else if (!chainIdEth) { - setChain(Chains.NotSelected); } - }, [chainIdEth, connectorEth, isActiveEth, setChain]); + }, [chainIdEth, isActiveEth, setChain]); // This hook checks if there is an EVM chainId to switch to // If so, it will prompt switchChains only when a provider is available useEffect(() => { - const onSwitchChains = async () => { - await switchChains(libraryEth, CHAINS_TO_ID[chainToSwitch as Chains]); + const onSwitchChains = async (id: number) => { + try { + if (id === -1) { + await connectorEth.activate(); + } else { + await connectorEth.activate(id); + } + } catch (switchError: any) { + if (switchError.code === ChainCodeErrorEnum.CANCELLED) { + window.location.reload(); + } + } setChainToSwitch(null); }; - if (chainToSwitch && libraryEth) { - onSwitchChains(); + if (chainToSwitch && chainToSwitch !== chainIdEth && connectorEth) { + onSwitchChains(chainToSwitch); } - }, [libraryEth, chainToSwitch]); + }, [chainIdEth, chainToSwitch, connectorEth]); const deactivateEth = useCallback(async () => { - if (connectorEth) { - if (connectorEth instanceof WalletConnectConnector) { - await connectorEth.close(); - } - - _deactivateEth(); - setConnectedWallet(undefined); + try { + // Deactivate all connectors + const promises = allConnectors.map(async (c) => { + const connector = c[0]; + await connector.deactivate?.(); + await connector.resetState(); + }); + await Promise.all(promises); + // Remove last connected wallet from local storage so we don't eagerly connect to anything + localStorage.removeItem(LAST_CONNECTED_WALLET_LOCAL_STORAGE_KEY); + } catch (error) { + console.log("Error deactivating", error); } - }, [connectorEth, _deactivateEth]); + }, []); const activate = useCallback( - async (wallet: Wallet, chain: Chains) => { + async (wallet: Wallet, chainId: Chains) => { setConnectingWallet(wallet); - try { - if (isEthereumWallet(wallet)) { - if (!isActiveEth) { - const connector = evmConnectors[wallet as EthereumWallet](); - await activateEth(connector); - } - - setChainToSwitch(chain); - setConnectedWallet(wallet as EthereumWallet); - } else { - throw new Error("Wallet is not supported"); + // Connect to the selected connector + const connector = walletToConnector[wallet as Wallet](); + // If is wallet connect, we try to connect eagerly first + // This is because activate() will do nothing if it + // already has an active session + if (connector instanceof WalletConnectV2) { + // If theres an error here, we ignore and try to activate() + await connector?.connectEagerly().catch(() => {}); } - - setConnectedWallet(wallet as EthereumWallet); + await connector?.activate(ChainsToCHAINID[chainId]); + setChainToSwitch(chain); + setConnectedWallet(wallet as Wallet); + // Update local storage so we know which wallet to connect to when we connect eagerly + localStorage.setItem( + LAST_CONNECTED_WALLET_LOCAL_STORAGE_KEY, + String(wallet) + ); setConnectingWallet(undefined); } catch (error) { - console.error(error); // eslint-disable-line + // eslint-disable-next-line no-console + console.error(error); } }, - [activateEth, isActiveEth] + [chain] ); return { @@ -120,16 +137,10 @@ export const useWeb3Wallet = (): Web3WalletData => { account: impersonateAddress ?? accountEth, connectingWallet, connectedWallet, - ethereumProvider: libraryEth, + ethereumProvider: isActiveEth ? provider : undefined, ethereumConnector: connectorEth, isLedgerLive: isLedgerDappBrowserProvider(), }; }; -const evmConnectors: Record AbstractConnector> = { - [EthereumWallet.Metamask]: () => injectedConnector, - [EthereumWallet.WalletConnect]: getWalletConnectConnector, - [EthereumWallet.WalletLink]: () => walletlinkConnector, -}; - export default useWeb3Wallet; diff --git a/lend/src/hooks/web3Context.tsx b/lend/src/hooks/web3Context.tsx index 3061b8846..7601be819 100644 --- a/lend/src/hooks/web3Context.tsx +++ b/lend/src/hooks/web3Context.tsx @@ -1,15 +1,13 @@ import React, { ReactElement, useContext } from "react"; -import { ethers } from "ethers"; -import { BaseProvider } from "@ethersproject/providers"; +import { StaticJsonRpcProvider } from "@ethersproject/providers"; +import { NODE_URI, isDevelopment } from "shared/lib/utils/env"; import { CHAINID } from "shared/lib/constants/constants"; -import { NODE_URI } from "shared/lib/utils/env"; - export type Web3ContextData = { - provider: BaseProvider; + provider: StaticJsonRpcProvider; }; -const defaultProvider = new ethers.providers.StaticJsonRpcProvider( - NODE_URI[CHAINID.ETH_MAINNET] +const defaultProvider = new StaticJsonRpcProvider( + NODE_URI[isDevelopment() ? CHAINID.ETH_KOVAN : CHAINID.ETH_MAINNET] ); export const Web3Context = React.createContext({ diff --git a/lend/src/utils/connectors.ts b/lend/src/utils/connectors.ts index 452749849..85064f51b 100644 --- a/lend/src/utils/connectors.ts +++ b/lend/src/utils/connectors.ts @@ -1,8 +1,7 @@ import { InjectedConnector } from "@web3-react/injected-connector"; -import { WalletConnectConnector } from "@web3-react/walletconnect-connector"; import { WalletLinkConnector } from "@web3-react/walletlink-connector"; import LedgerHQFrameConnector from "web3-ledgerhq-frame-connector"; -import { CHAINID, supportedChainIds } from "./env"; +import { supportedChainIds } from "./env"; export const injectedConnector = new InjectedConnector({ supportedChainIds, @@ -11,21 +10,6 @@ export const injectedConnector = new InjectedConnector({ // Only receive messages from platform.apps.ledger.com export const ledgerConnector = new LedgerHQFrameConnector(); -/** - * A bug causes wallet connect connector to stuck forever upon second invoke - * Possibly workaround as getting new connector after every connect - * More about issue: https://github.com/NoahZinsmeister/web3-react/pull/130 - */ -export const getWalletConnectConnector = () => - new WalletConnectConnector({ - supportedChainIds, - rpc: { - [CHAINID.ETH_MAINNET]: process.env.REACT_APP_MAINNET_URI || "", - }, - qrcode: true, - pollingInterval: 5000, - }); - export const walletlinkConnector = new WalletLinkConnector({ url: process.env.REACT_APP_MAINNET_URI!, appName: "Ribbon Lend", diff --git a/shared/src/hooks/useFetchEarnVaultData.ts b/shared/src/hooks/useFetchEarnVaultData.ts index fdacd0bd8..7e590fe49 100644 --- a/shared/src/hooks/useFetchEarnVaultData.ts +++ b/shared/src/hooks/useFetchEarnVaultData.ts @@ -1,11 +1,7 @@ import { useCallback, useEffect, useState } from "react"; import { useWeb3React } from "@web3-react/core"; import { BigNumber } from "ethers"; -import { - getVaultNetwork, - EarnVaultList, - VIPVaultList, -} from "../constants/constants"; +import { getVaultNetwork, EarnVaultList } from "../constants/constants"; import { isProduction, isTreasury, isVIP } from "../utils/env"; import { getVaultContract } from "./useVaultContract"; import { impersonateAddress } from "../utils/development"; @@ -45,7 +41,7 @@ const useFetchEarnVaultData = (): V2VaultData => { return currentCounter; }); - const vaultList = isTreasury() || isVIP() ? VIPVaultList : EarnVaultList; + const vaultList = isTreasury() || isVIP() ? [] : EarnVaultList; const responses = await Promise.all( vaultList.map(async (vault) => { diff --git a/shared/src/hooks/useFetchV2VaultData.ts b/shared/src/hooks/useFetchV2VaultData.ts index def28af57..cd42ff9a5 100644 --- a/shared/src/hooks/useFetchV2VaultData.ts +++ b/shared/src/hooks/useFetchV2VaultData.ts @@ -115,6 +115,7 @@ const useFetchV2VaultData = (): V2VaultData => { | { newStrikePrice: BigNumber; newDelta: BigNumber } >[] = [ contract.totalBalance(), + contract.pricePerShare(), contract.cap(), contract.vaultState(), contract.lastQueuedWithdrawAmount(), @@ -153,6 +154,7 @@ const useFetchV2VaultData = (): V2VaultData => { const [ totalBalance, + pricePerShare, cap, _vaultState, lastQueuedWithdrawAmount, @@ -181,14 +183,18 @@ const useFetchV2VaultData = (): V2VaultData => { round?: number; }; - const actualPricePerShare = calculatePricePerShare( - decimals as BigNumber, - totalBalance as BigNumber, - totalPending, - lastQueuedWithdrawAmount as BigNumber, - totalSupply as BigNumber, - queuedWithdrawShares - ); + let actualPricePerShare = pricePerShare as BigNumber; + + if (!isTreasury) { + actualPricePerShare = calculatePricePerShare( + decimals as BigNumber, + totalBalance as BigNumber, + totalPending, + lastQueuedWithdrawAmount as BigNumber, + totalSupply as BigNumber, + queuedWithdrawShares + ); + } const accountVaultBalance = (shares as BigNumber) .mul(actualPricePerShare) diff --git a/treasury/craco.config.js b/treasury/craco.config.js index 64505b960..ec2ed1c04 100644 --- a/treasury/craco.config.js +++ b/treasury/craco.config.js @@ -1,13 +1,33 @@ const CracoLessPlugin = require("craco-less"); - +const webpack = require('webpack'); module.exports = { + reactStrictMode: true, webpack: { configure: (webpackConfig) => { webpackConfig.module.rules.push({ test: /\.mjs$/, include: /node_modules/, type: "javascript/auto", + + }); + webpackConfig.module.rules.push({ + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, }); + webpackConfig.resolve.fallback = { + ...webpackConfig.resolve.fallback, + "fs": false, // Mock 'fs' with an empty module. + "path": require.resolve("path-browserify"), + "buffer": require.resolve("buffer") + }; + webpackConfig.plugins.push( + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'], + }), + ); return webpackConfig; }, }, diff --git a/treasury/package.json b/treasury/package.json index 760af1798..9825f5909 100644 --- a/treasury/package.json +++ b/treasury/package.json @@ -17,11 +17,11 @@ "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "@web3-react/core": "^6.1.9", + "@web3-react/core": "^8.2.0", "axios": "^0.21.1", "bootstrap": "^4.6.0", "chart.js": "^2.9.4", - "craco-less": "^1.17.1", + "craco-less": "3.0.1", "currency.js": "^2.0.3", "ethers": "5.4.0", "framer": "^1.2.28", @@ -38,7 +38,7 @@ "react-lottie": "^1.2.3", "react-player": "^2.10.1", "react-router-dom": "^5.2.0", - "react-scripts": "4.0.3", + "react-scripts": "5.0.1", "shared": "^0.1.0", "smoothscroll-polyfill": "^0.4.4", "styled-components": "^5.2.1", diff --git a/treasury/src/App.tsx b/treasury/src/App.tsx index 71841f445..08cc96264 100644 --- a/treasury/src/App.tsx +++ b/treasury/src/App.tsx @@ -4,12 +4,12 @@ import smoothscroll from "smoothscroll-polyfill"; import RootApp from "./components/RootApp"; import { Web3ContextProvider } from "shared/lib/hooks/web3Context"; -import { getLibrary } from "shared/lib/utils/getLibrary"; import { Web3DataContextProvider } from "shared/lib/hooks/web3DataContext"; import { SubgraphDataContextProvider } from "shared/lib/hooks/subgraphDataContext"; import { PendingTransactionsContextProvider } from "shared/lib/hooks/pendingTransactionsContext"; import { ExternalAPIDataContextProvider } from "shared/lib/hooks/externalAPIDataContext"; import { ChainContextProvider } from "shared/lib/hooks/chainContext"; +import { allConnectors } from "shared/lib/utils/wallet/connectors"; import "shared/lib/i18n/config"; function App() { @@ -20,7 +20,7 @@ function App() { return ( - + diff --git a/treasury/src/components/RootApp.tsx b/treasury/src/components/RootApp.tsx index 67e01f53a..d1503781f 100644 --- a/treasury/src/components/RootApp.tsx +++ b/treasury/src/components/RootApp.tsx @@ -14,6 +14,7 @@ import { } from "webapp/lib/components/Common/toasts"; import WalletConnectModal from "shared/lib/components/Wallet/WalletConnectModal"; import NotFound from "shared/lib/pages/NotFound"; +import { Chains } from "shared/lib/constants/constants"; const Root = styled.div<{ screenHeight: number }>` max-height: 100vh; @@ -26,7 +27,7 @@ const RootApp = () => { return ( - + diff --git a/treasury/src/components/Vault/VaultActionsForm/v2/VaultV2DepositWithdrawForm.tsx b/treasury/src/components/Vault/VaultActionsForm/v2/VaultV2DepositWithdrawForm.tsx index 6cef0ea58..a81b78fb4 100644 --- a/treasury/src/components/Vault/VaultActionsForm/v2/VaultV2DepositWithdrawForm.tsx +++ b/treasury/src/components/Vault/VaultActionsForm/v2/VaultV2DepositWithdrawForm.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useMemo, useState } from "react"; import styled from "styled-components"; -import { useWeb3React } from "@web3-react/core"; import { parseUnits } from "@ethersproject/units"; import { useLocation } from "react-router-dom"; @@ -35,6 +34,7 @@ import { } from "../../../../constants/constants"; import useVaultPriceHistory from "shared/lib/hooks/useVaultPerformanceUpdate"; import { BigNumber } from "ethers"; +import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet"; const FormTabContainer = styled.div` display: flex; @@ -123,7 +123,7 @@ const VaultV2DepositWithdrawForm: React.FC = ({ const vaultVersion = isEarnVault(vaultOption) ? "earn" : "v2"; const vaultBalanceInAsset = depositBalanceInAsset.add(lockedBalanceInAsset); const { priceHistory } = useVaultPriceHistory(vaultOption, vaultVersion); - const { active } = useWeb3React(); + const { active } = useWeb3Wallet(); const vaultMaxDepositAmount = VaultMaxDeposit[vaultOption]; const isInputNonZero = parseFloat(vaultActionForm.inputAmount) > 0; diff --git a/yarn.lock b/yarn.lock index 059b1f6d5..e23eb694a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1895,7 +1895,7 @@ "@ethersproject/bytes" "^5.4.0" js-sha3 "0.5.7" -"@ethersproject/keccak256@^5.0.0-beta.130", "@ethersproject/keccak256@^5.4.0", "@ethersproject/keccak256@^5.7.0": +"@ethersproject/keccak256@^5.4.0", "@ethersproject/keccak256@^5.7.0": version "5.7.0" resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a" integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg== @@ -5768,17 +5768,6 @@ dependencies: "@web3-react/types" "^8.2.2" -"@web3-react/core@^6.1.9": - version "6.1.9" - resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-6.1.9.tgz#5f5daa0545a8ea07770a699580ced552583afc97" - integrity sha512-P877DslsbAkWIlMANpWiK7pCvNwlz0kJC0EGckuVh0wlA23J4UnFxq6xyOaxkxaDCu14rA/tAO0NbwjcXTQgSA== - dependencies: - "@ethersproject/keccak256" "^5.0.0-beta.130" - "@web3-react/abstract-connector" "^6.0.7" - "@web3-react/types" "^6.0.7" - tiny-invariant "^1.0.6" - tiny-warning "^1.0.3" - "@web3-react/core@^8.1.0", "@web3-react/core@^8.2.0": version "8.2.2" resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-8.2.2.tgz#f1a76e42f30a8c36bc0cc3b6e59f5cc89b357398" @@ -8304,14 +8293,6 @@ craco-less@3.0.1: less "^4.1.3" less-loader "^11.1.3" -craco-less@^1.17.1: - version "1.20.0" - resolved "https://registry.yarnpkg.com/craco-less/-/craco-less-1.20.0.tgz#7f68679b84c7756f785f9c5ee4e4f795662acad1" - integrity sha512-oP7kMRFOwwCPAlS+RBfA0yt9qAfSH8EOzJOQyzspVOECDtATTLXYyEYd0ghoybbReVRZbOmGxNtPWh4ALpVRng== - dependencies: - less "^4.1.1" - less-loader "^7.3.0" - crc-32@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff" @@ -13497,16 +13478,7 @@ less-loader@^11.1.3: resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-11.1.3.tgz#1bb62d6ca9bf00a177c02793b54baac40f9be694" integrity sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw== -less-loader@^7.3.0: - version "7.3.0" - resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-7.3.0.tgz#f9d6d36d18739d642067a05fb5bd70c8c61317e5" - integrity sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg== - dependencies: - klona "^2.0.4" - loader-utils "^2.0.0" - schema-utils "^3.0.0" - -less@^4.1.1, less@^4.1.3: +less@^4.1.3: version "4.2.0" resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450" integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==