Wallet connect v2 (#714)

* draft wallet connect ribbon app * fix contracts * fixes * governance wallet connect v2 * add timeout for wallet connect modal close
ribbon-finance · Aug 31, 2023 · 3a1f9a4 · 3a1f9a4 · vercel · Aug 31, 2023
1 parent a40be30
commit 3a1f9a4
Show file tree

Hide file tree

Showing 70 changed files with 892 additions and 352 deletions.
diff --git a/governance/package.json b/governance/package.json
@@ -12,7 +12,7 @@
     "@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",
     "bootstrap": "^4.6.0",
     "currency.js": "^2.0.4",
     "ethers": "5.4.0",

diff --git a/governance/src/App.tsx b/governance/src/App.tsx
@@ -1,22 +1,20 @@
 import { Web3ReactProvider } from "@web3-react/core";
 import { useEffect } from "react";
 import smoothscroll from "smoothscroll-polyfill";
-import { ConnectionProvider } from "@solana/wallet-adapter-react";
 import "shared/lib/i18n/config";
 
 import { SubgraphDataContextProvider } from "shared/lib/hooks/subgraphDataContext";
 import RootApp from "./components/RootApp";
 import { Web3ContextProvider } from "shared/lib/hooks/web3Context";
-import { getLibrary } from "shared/lib/utils/getLibrary";
 import { ExternalAPIDataContextProvider } from "shared/lib/hooks/externalAPIDataContext";
 import { Web3DataContextProvider } from "shared/lib/hooks/web3DataContext";
 import { PendingTransactionsContextProvider } from "shared/lib/hooks/pendingTransactionsContext";
 import { ChainContextProvider } from "shared/lib/hooks/chainContext";
-import { getSolanaClusterURI } from "shared/lib/utils/env";
 import { GeofenceCountry, useGeofence } from "shared/lib/hooks/useGeofence";
 import TextPreview from "shared/lib/components/TextPreview/TextPreview";
 import Geoblocked from "shared/lib/components/Geoblocked/Geoblocked";
 import { LoadingText } from "shared/lib/hooks/useLoadingText";
+import { allConnectors } from "shared/lib/utils/wallet/connectors";
 
 function App() {
   const { loading, rejected } = useGeofence(GeofenceCountry.SINGAPORE);
@@ -36,21 +34,19 @@ function App() {
 
   return (
     <ChainContextProvider>
-      <ConnectionProvider endpoint={getSolanaClusterURI()}>
-        <Web3ContextProvider>
-          <Web3ReactProvider getLibrary={getLibrary}>
-            <PendingTransactionsContextProvider>
-              <Web3DataContextProvider>
-                <SubgraphDataContextProvider>
-                  <ExternalAPIDataContextProvider>
-                    <RootApp />
-                  </ExternalAPIDataContextProvider>
-                </SubgraphDataContextProvider>
-              </Web3DataContextProvider>
-            </PendingTransactionsContextProvider>
-          </Web3ReactProvider>
-        </Web3ContextProvider>
-      </ConnectionProvider>
+      <Web3ContextProvider>
+        <Web3ReactProvider connectors={allConnectors}>
+          <PendingTransactionsContextProvider>
+            <Web3DataContextProvider>
+              <SubgraphDataContextProvider>
+                <ExternalAPIDataContextProvider>
+                  <RootApp />
+                </ExternalAPIDataContextProvider>
+              </SubgraphDataContextProvider>
+            </Web3DataContextProvider>
+          </PendingTransactionsContextProvider>
+        </Web3ReactProvider>
+      </Web3ContextProvider>
     </ChainContextProvider>
   );
 }

diff --git a/governance/src/components/FAB/StakingFab.tsx b/governance/src/components/FAB/StakingFab.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from "react";
 import styled from "styled-components";
-import { useWeb3React } from "@web3-react/core";
 import { useTranslation } from "react-i18next";
 
 import { SecondaryText, Title } from "shared/lib/designSystem";
@@ -15,6 +14,7 @@ import { useAssetBalance } from "shared/lib/hooks/web3DataContext";
 import TooltipExplanation from "shared/lib/components/Common/TooltipExplanation";
 import HelpInfo from "shared/lib/components/Common/HelpInfo";
 import { usePendingTransactions } from "shared/lib/hooks/pendingTransactionsContext";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 
 const FABContainer = styled.div.attrs({
   className: "d-flex align-items-center",
@@ -75,7 +75,7 @@ const FABOffsetContainer = styled.div`
   }
 `;
 const StakingFAB = () => {
-  const { active } = useWeb3React();
+  const { active } = useWeb3Wallet();
   const { t } = useTranslation();
   const [, setUnstakingModal] = useGovernanceGlobalState("unstakingModal");
 

diff --git a/governance/src/components/Homepage/TreasuryBreakdown.tsx b/governance/src/components/Homepage/TreasuryBreakdown.tsx
@@ -19,7 +19,8 @@ import {
   getEtherscanURI,
   RibbonTreasuryAddress,
 } from "shared/lib/constants/constants";
-import { CHAINID, isDevelopment } from "shared/lib/utils/env";
+import { isDevelopment } from "shared/lib/utils/env";
+import { CHAINID } from "shared/lib/constants/constants";
 import { ExternalIcon } from "shared/lib/assets/icons/icons";
 
 const SectionLabel = styled.div`

diff --git a/governance/src/components/Profile/ProfileActivity.tsx b/governance/src/components/Profile/ProfileActivity.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import styled from "styled-components";
 import moment from "moment";
-import { useWeb3React } from "@web3-react/core";
 
 import { Title, SecondaryText, BaseLink } from "shared/lib/designSystem";
 import FilterDropdown from "shared/lib/components/Common/FilterDropdown";
@@ -30,6 +29,7 @@ import { GovernanceChainID } from "../../constants/constants";
 import useGovernanceTransactions from "shared/lib/hooks/useGovernanceTransactions";
 import { GovernanceTransaction } from "shared/lib/models/governance";
 import useLoadingText from "shared/lib/hooks/useLoadingText";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 
 const ActivityContainer = styled.div`
   display: flex;
@@ -76,7 +76,7 @@ const ExternalLinkIcon = styled(ExternalIcon)`
 const perPage = 5;
 
 const ProfileActivity = () => {
-  const { active } = useWeb3React();
+  const { active } = useWeb3Wallet();
   const { width } = useScreenSize();
   // const { activities } = useGovernanceActivity();
   const { transactions, loading } = useGovernanceTransactions();

diff --git a/governance/src/components/Profile/StakingSummary.tsx b/governance/src/components/Profile/StakingSummary.tsx
@@ -15,9 +15,9 @@ import {
   Chart,
   HoverInfo,
 } from "shared/lib/components/Common/PerformanceChart";
-import { useWeb3React } from "@web3-react/core";
 import sizes from "shared/lib/designSystem/sizes";
 import { useTranslation } from "react-i18next";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 
 const SummaryContainer = styled.div`
   display: flex;
@@ -81,7 +81,7 @@ const ChartContainer = styled.div`
 `;
 
 const StakingSummary = () => {
-  const { active } = useWeb3React();
+  const { active } = useWeb3Wallet();
   const { t } = useTranslation();
   const { data: rbnTokenAccount, loading: rbnTokenAccountLoading } =
     useRBNTokenAccount();

diff --git a/governance/src/components/RootApp.tsx b/governance/src/components/RootApp.tsx
@@ -17,6 +17,7 @@ import UnstakingModal from "./Unstaking/UnstakingModal";
 import { TxStatusToast } from "./Common/toast";
 import sizes from "shared/lib/designSystem/sizes";
 import Faqs from "../pages/Faqs";
+import { Chains } from "shared/lib/constants/constants";
 
 const Root = styled.div<{ screenHeight: number }>`
   background-color: ${colors.background.one};
@@ -30,7 +31,7 @@ const RootApp = () => {
 
   return (
     <Root id="appRoot" screenHeight={screenHeight}>
-      <WalletConnectModal />
+      <WalletConnectModal specificChain={Chains.Ethereum} />
       <StakingModal />
       <UnstakingModal />
 

diff --git a/governance/src/components/Staking/StakingModalForm.tsx b/governance/src/components/Staking/StakingModalForm.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { useWeb3React } from "@web3-react/core";
 import { formatUnits, parseUnits } from "@ethersproject/units";
 import { BigNumber } from "@ethersproject/bignumber";
 
@@ -24,6 +23,7 @@ import moment, { duration, Duration } from "moment";
 import StakingModalFormCalendarOverlay from "./StakingModalFormCalendarOverlay";
 import { calculateInitialveRBNAmount } from "shared/lib/utils/governanceMath";
 import { ActionButton } from "shared/lib/components/Common/buttons";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 
 const durationSelectOptions = [
   "1W",
@@ -86,7 +86,7 @@ const StakingModalForm: React.FC<StakingModalFormProps> = ({
   initialStakingData,
   proceedToPreview,
 }) => {
-  const { active } = useWeb3React();
+  const { active } = useWeb3Wallet();
   const { data: rbnTokenAccount } = useRBNTokenAccount();
 
   const [showCalendarPicker, setShowCalendarPicker] = useState(false);

diff --git a/governance/src/components/Staking/StakingModalIncreaseAmountForm.tsx b/governance/src/components/Staking/StakingModalIncreaseAmountForm.tsx
@@ -2,8 +2,6 @@ import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 import { BigNumber } from "ethers";
 import moment, { Duration } from "moment";
-import { useWeb3React } from "@web3-react/core";
-
 import { StakeIcon } from "shared/lib/assets/icons/icons";
 import {
   BaseInput,
@@ -21,6 +19,7 @@ import { formatUnits, parseUnits } from "ethers/lib/utils";
 import { formatBigNumber, formatBigNumberAmount } from "shared/lib/utils/math";
 import { calculateInitialveRBNAmount } from "shared/lib/utils/governanceMath";
 import { ActionButton } from "shared/lib/components/Common/buttons";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 
 const LogoContainer = styled.div`
   display: flex;
@@ -47,7 +46,7 @@ interface StakingModalncreaseAmountFormProps {
 const StakingModalncreaseAmountForm: React.FC<
   StakingModalncreaseAmountFormProps
 > = ({ initialStakingData, proceedToPreview }) => {
-  const { active } = useWeb3React();
+  const { active } = useWeb3Wallet();
   const { data: rbnTokenAccount } = useRBNTokenAccount();
 
   const [expiryMoment, durationToExpiry] = useMemo(() => {

diff --git a/governance/src/constants/constants.ts b/governance/src/constants/constants.ts
@@ -1,5 +1,5 @@
-import { CHAINID, isDevelopment } from "shared/lib/utils/env";
-
+import { isDevelopment } from "shared/lib/utils/env";
+import { CHAINID } from "shared/lib/constants/constants";
 export const GovernanceChainID = isDevelopment()
   ? CHAINID.ETH_KOVAN
   : CHAINID.ETH_MAINNET;
diff --git a/governance/src/hooks/useAccountRebateAmount.ts b/governance/src/hooks/useAccountRebateAmount.ts
@@ -4,9 +4,11 @@ import { useCallback, useEffect, useState } from "react";
 import { useWeb3Context } from "shared/lib/hooks/web3Context";
 import { getCurveFeeDistribution } from "./useCurveFeeDistribution";
 import { impersonateAddress } from "shared/lib/utils/development";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 export const useAccountRebateAmount = () => {
-  const { library, active: web3Active, account: web3Account } = useWeb3React();
-  const { provider } = useWeb3Context();
+  const { provider, account: web3Account } = useWeb3React();
+  const { active: web3Active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
 
   const account = impersonateAddress ? impersonateAddress : web3Account;
 
@@ -16,7 +18,10 @@ export const useAccountRebateAmount = () => {
 
   const [loading, setLoading] = useState<boolean>(true);
   const getData = useCallback(async () => {
-    const contract = getCurveFeeDistribution(library || provider, web3Active);
+    const contract = getCurveFeeDistribution(
+      provider || defaultProvider,
+      web3Active
+    );
 
     if (!contract || !account) {
       return;
@@ -29,7 +34,7 @@ export const useAccountRebateAmount = () => {
     setRbnRebateAmount(penaltyRebateOf);
 
     setLoading(false);
-  }, [account, library, provider, web3Active]);
+  }, [account, defaultProvider, provider, web3Active]);
 
   useEffect(() => {
     getData();

diff --git a/governance/src/hooks/useCurveFeeDistribution.ts b/governance/src/hooks/useCurveFeeDistribution.ts
@@ -3,6 +3,8 @@ import { useWeb3React } from "@web3-react/core";
 import { CurveFeeDistributionAddress } from "shared/lib/constants/constants";
 import { CurveFeeDistribution } from "shared/lib/codegen/CurveFeeDistribution";
 import { CurveFeeDistribution__factory } from "shared/lib/codegen/factories/CurveFeeDistribution__factory";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
+import { useWeb3Context } from "shared/lib/hooks/web3Context";
 export const getCurveFeeDistribution = (
   library: any,
   useSigner: boolean = true
@@ -15,12 +17,14 @@ export const getCurveFeeDistribution = (
 };
 
 const useCurveFeeDistribution = (): CurveFeeDistribution | undefined => {
-  const { library, active } = useWeb3React();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [contract, setContract] = useState<CurveFeeDistribution>();
 
   useEffect(() => {
-    setContract(getCurveFeeDistribution(library));
-  }, [library, active]);
+    setContract(getCurveFeeDistribution(provider || defaultProvider));
+  }, [active, provider, defaultProvider]);
 
   return contract;
 };

diff --git a/governance/src/hooks/useFeeDistributor.ts b/governance/src/hooks/useFeeDistributor.ts
@@ -3,6 +3,8 @@ import { useWeb3React } from "@web3-react/core";
 
 import { FeeDistributorAddress } from "shared/lib/constants/constants";
 import { FeeDistributor, FeeDistributor__factory } from "shared/lib/codegen";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
+import { useWeb3Context } from "shared/lib/hooks/web3Context";
 
 export const getFeeDistributor = (library: any): FeeDistributor | undefined => {
   if (library) {
@@ -14,12 +16,14 @@ export const getFeeDistributor = (library: any): FeeDistributor | undefined => {
 };
 
 const useFeeDistributor = (): FeeDistributor | undefined => {
-  const { library, active } = useWeb3React();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [contract, setContract] = useState<FeeDistributor>();
 
   useEffect(() => {
-    setContract(getFeeDistributor(library));
-  }, [library, active]);
+    setContract(getFeeDistributor(provider || defaultProvider));
+  }, [active, provider, defaultProvider]);
 
   return contract;
 };

diff --git a/governance/src/hooks/usePenaltyRewards.ts b/governance/src/hooks/usePenaltyRewards.ts
@@ -3,6 +3,8 @@ import { useWeb3React } from "@web3-react/core";
 
 import { PenaltyRewards, PenaltyRewards__factory } from "shared/lib/codegen";
 import { PenaltyRewardsAddress } from "shared/lib/constants/constants";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
+import { useWeb3Context } from "shared/lib/hooks/web3Context";
 
 export const getPenaltyRewards = (library: any): PenaltyRewards | undefined => {
   if (library) {
@@ -14,12 +16,14 @@ export const getPenaltyRewards = (library: any): PenaltyRewards | undefined => {
 };
 
 const usePenaltyRewards = (): PenaltyRewards | undefined => {
-  const { library, active } = useWeb3React();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [contract, setContract] = useState<PenaltyRewards>();
 
   useEffect(() => {
-    setContract(getPenaltyRewards(library));
-  }, [library, active]);
+    setContract(getPenaltyRewards(provider || defaultProvider));
+  }, [active, provider, defaultProvider]);
 
   return contract;
 };

diff --git a/governance/src/hooks/usePenaltyRewardsPostTimestamp.ts b/governance/src/hooks/usePenaltyRewardsPostTimestamp.ts
@@ -3,6 +3,8 @@ import { useWeb3React } from "@web3-react/core";
 
 import { PenaltyRewards, PenaltyRewards__factory } from "shared/lib/codegen";
 import { PenaltyRewardsPostTimestampAddress } from "shared/lib/constants/constants";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
+import { useWeb3Context } from "shared/lib/hooks/web3Context";
 
 export const getPenaltyRewardsPostTimestamp = (
   library: any
@@ -19,12 +21,14 @@ export const getPenaltyRewardsPostTimestamp = (
 };
 
 const usePenaltyRewardsPostTimestamp = (): PenaltyRewards | undefined => {
-  const { library, active } = useWeb3React();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [contract, setContract] = useState<PenaltyRewards>();
 
   useEffect(() => {
-    setContract(getPenaltyRewardsPostTimestamp(library));
-  }, [library, active]);
+    setContract(getPenaltyRewardsPostTimestamp(provider || defaultProvider));
+  }, [active, provider, defaultProvider]);
 
   return contract;
 };

diff --git a/governance/src/hooks/useVotingEscrowDelegationProxy.ts b/governance/src/hooks/useVotingEscrowDelegationProxy.ts
@@ -6,6 +6,8 @@ import {
   VotingEscrowDelegationProxy__factory,
 } from "shared/lib/codegen";
 import { VotingEscrowDelegationProxyAddress } from "shared/lib/constants/constants";
+import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
+import { useWeb3Context } from "shared/lib/hooks/web3Context";
 
 export const getVotingEscrowDelegationProxy = (
   library: any
@@ -24,12 +26,14 @@ export const getVotingEscrowDelegationProxy = (
 const useVotingEscrowDelegationProxy = ():
   | VotingEscrowDelegationProxy
   | undefined => {
-  const { library, active } = useWeb3React();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [contract, setContract] = useState<VotingEscrowDelegationProxy>();
 
   useEffect(() => {
-    setContract(getVotingEscrowDelegationProxy(library));
-  }, [library, active]);
+    setContract(getVotingEscrowDelegationProxy(provider || defaultProvider));
+  }, [active, provider, defaultProvider]);
 
   return contract;
 };