Moving account data to a context provider

src/App.tsx

@@ -22,6 +22,7 @@ import {
   HttpLink,
   gql,
 } from '@apollo/react-hooks';
+import { AccountProvider } from './data/context/AccountContext';
 
 export const theGraphUniswapV2Client = new ApolloClient({
   link: new HttpLink({
@@ -83,50 +84,52 @@ function App() {
       <Suspense fallback={null}>
         <WagmiProvider>
           <BlendTableProvider>
-            <ScrollToTop />
-            <AppBody>
-              <Header />
-              <main className='flex-grow'>
-                <Routes>
-                  <Route
-                    path='/blend'
-                    element={
-                      <RedirectPartialPath
-                        from={['/blend', '/blend/']}
-                        to={'/blend/pools'}
-                      />
-                    }
-                  >
-                    <Route path='pools' element={<BlendPoolSelectPage blockNumber={blockNumber} />} />
-                    <Route
-                      path='pool/:pooladdress'
-                      element={<BlendPoolPage blockNumber={blockNumber} />}
-                    />
-                    <Route
-                      path='pool'
-                      element={<Navigate replace to='/blend' />}
-                    />
+            <AccountProvider>
+              <ScrollToTop />
+              <AppBody>
+                <Header />
+                <main className='flex-grow'>
+                  <Routes>
                     <Route
-                      path='*'
-                      element={<Navigate replace to='/blend/pools' />}
-                    />
-                  </Route>
-                  <Route path='/portfolio' element={<PortfolioPage />} />
-                  { // Devmode-only example page routing
-                    IS_DEV && (
-                      <>
-                        <Route path='/buttons' element={<ButtonExamplesPage />} />
-                        <Route path='/inputs' element={<InputExamplesPage />} />
-                        <Route path='/portfolio' element={<PortfolioPage />} />
-                        <Route path='/governance' element={<GovernancePage />} />
-                      </>
-                  )}
-                  <Route path='/' element={<Navigate replace to='/blend' />} />
-                  <Route path='*' element={<Navigate to='/' />} />
-                </Routes>
-              </main>
-              <Footer />
-            </AppBody>
+                      path='/blend'
+                      element={
+                        <RedirectPartialPath
+                          from={['/blend', '/blend/']}
+                          to={'/blend/pools'}
+                        />
+                      }
+                    >
+                      <Route path='pools' element={<BlendPoolSelectPage blockNumber={blockNumber} />} />
+                      <Route
+                        path='pool/:pooladdress'
+                        element={<BlendPoolPage blockNumber={blockNumber} />}
+                      />
+                      <Route
+                        path='pool'
+                        element={<Navigate replace to='/blend' />}
+                      />
+                      <Route
+                        path='*'
+                        element={<Navigate replace to='/blend/pools' />}
+                      />
+                    </Route>
+                    <Route path='/portfolio' element={<PortfolioPage />} />
+                    { // Devmode-only example page routing
+                      IS_DEV && (
+                        <>
+                          <Route path='/buttons' element={<ButtonExamplesPage />} />
+                          <Route path='/inputs' element={<InputExamplesPage />} />
+                          <Route path='/portfolio' element={<PortfolioPage />} />
+                          <Route path='/governance' element={<GovernancePage />} />
+                        </>
+                    )}
+                    <Route path='/' element={<Navigate replace to='/blend' />} />
+                    <Route path='*' element={<Navigate to='/' />} />
+                  </Routes>
+                </main>
+                <Footer />
+              </AppBody>
+            </AccountProvider>
           </BlendTableProvider>
         </WagmiProvider>
       </Suspense>

src/components/header/ConnectWalletButton.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { CloseableModal } from '../common/Modal';
-
 import { useConnect } from 'wagmi';
 import { FormatAddress } from '../../util/FormatAddress';
 import {
@@ -9,15 +8,14 @@ import {
 } from '../common/Buttons';
 import { mapConnectorNameToIcon } from './ConnectorIconMap';
 import { Text } from '../common/Typography';
+import { AccountContext } from '../../data/context/AccountContext';
 
 export type ConnectWalletButtonProps = {
-  accountData: any;
-  disconnect: () => void;
   buttonStyle?: 'secondary' | 'tertiary';
 };
 
 export default function ConnectWalletButton(props: ConnectWalletButtonProps) {
-  const { accountData, disconnect } = props;
+  const { accountData, disconnect } = useContext(AccountContext);
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [{ data: connectData, error: connectError }, connect] = useConnect();
 

src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import { MenuIcon } from '@heroicons/react/solid';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import tw from 'twin.macro';
@@ -9,7 +9,7 @@ import useMediaQuery from '../../data/hooks/UseMediaQuery';
 import { Text } from '../common/Typography';
 import ConnectWalletButton from './ConnectWalletButton';
 import { IS_DEV } from '../../util/Env';
-import { useAccount } from 'wagmi';
+import { AccountContext } from '../../data/context/AccountContext';
 
 type MenuItem = {
   title: string;
@@ -86,9 +86,7 @@ const NavDropdown = styled.div`
 `;
 
 export default function Header() {
-  const [{ data: accountData }, disconnect] = useAccount({
-    fetchEns: true,
-  });
+  const { accountData } = useContext(AccountContext);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleNavDropdown = () => {
     setIsMenuOpen(!isMenuOpen);
@@ -162,13 +160,13 @@ export default function Header() {
             </React.Fragment>
           ))}
           <div className='w-full'>
-            <ConnectWalletButton accountData={accountData} disconnect={disconnect} buttonStyle='tertiary' />
+            <ConnectWalletButton buttonStyle='tertiary' />
           </div>
         </NavDropdown>
       )}
       {isGTSmallScreen && (
         <div className='mr-8'>
-          <ConnectWalletButton accountData={accountData} disconnect={disconnect} />
+          <ConnectWalletButton />
         </div>
       )}
     </Nav>

src/components/pool/ConnectWallet.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useAccount } from 'wagmi';
 import DepositIllustration from '../../assets/svg/deposit_illustration.svg';
 import { Display, Text } from '../common/Typography';
 import ConnectWalletButton from '../header/ConnectWalletButton';
@@ -26,9 +25,6 @@ const Wrapper = styled.div`
 `;
 
 export default function ConnectWallet() {
-  const [{ data: accountData }, disconnect] = useAccount({
-    fetchEns: true,
-  });
   return (
     <Wrapper>
       <div className='flex items-center justify-center'>
@@ -40,7 +36,7 @@ export default function ConnectWallet() {
           By investing with Aloe, you will be able to earn trading fees on Uniswap, collect interest from other protocols, and autonomously manage your portfolio.
         </Text>
       </div>
-      <ConnectWalletButton accountData={accountData} disconnect={disconnect} buttonStyle='secondary' />
+      <ConnectWalletButton buttonStyle='secondary' />
     </Wrapper>
   );
 }

src/components/pool/WithdrawTab.tsx

@@ -1,7 +1,7 @@
 import Big from 'big.js';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { useAccount, useBalance, useSigner } from 'wagmi';
+import { useBalance, useSigner } from 'wagmi';
 import { withdraw } from '../../connector/BlendWithdrawActions';
 import {
   BlendPoolDrawData,
@@ -26,6 +26,7 @@ import TransactionFailedModal from './modal/TransactionFailedModal';
 import TokenBreakdown from '../common/TokenBreakdown';
 import { Text } from '../common/Typography';
 import { OffChainPoolStats } from '../../data/PoolStats';
+import { AccountContext } from '../../data/context/AccountContext';
 
 const LABEL_TEXT_COLOR = 'rgba(130, 160, 182, 1)';
 
@@ -89,7 +90,7 @@ export default function WithdrawTab(props: WithdrawTabProps) {
   const [usdEstimate, setUsdEstimate] = useState('-')
 
   const { poolStats } = useContext(BlendPoolContext);
-  const [{ data: accountData }] = useAccount();
+  const { accountData } = useContext(AccountContext);
   const [{ data: shareBalanceData }] = useBalance({
     addressOrName: accountData?.address,
     token: props.poolData.poolAddress,

src/components/poolstats/PoolPositionWidget.tsx

@@ -12,12 +12,12 @@ import { RESPONSIVE_BREAKPOINT_MD, RESPONSIVE_BREAKPOINT_XS } from '../../data/c
 import { API_URL } from '../../data/constants/Values';
 import { BlendPoolContext } from '../../data/context/BlendPoolContext';
 import { OffChainPoolStats } from '../../data/PoolStats';
-import { AccountData } from '../../pages/BlendPoolPage';
 import { formatUSDAuto, toBig } from '../../util/Numbers';
 import { PoolReturns, TokenReturns } from '../../util/ReturnsCalculations';
 import { PercentChange } from '../common/PercentChange';
 import { Display, Text } from '../common/Typography';
 import WidgetHeading from '../common/WidgetHeading';
+import { AccountContext } from '../../data/context/AccountContext';
 
 const PERFORMANCE_LABEL_TEXT_COLOR = 'rgba(130, 160, 182, 1)';
 const PERFORMANCE_VALUE_TEXT_COLOR = 'rgba(255, 255, 255, 1)';
@@ -103,15 +103,12 @@ export type PoolPositionWidgetProps = {
   walletIsConnected: boolean;
   poolData: BlendPoolMarkers;
   offChainPoolStats: OffChainPoolStats | undefined;
-  accountData: AccountData | undefined;
 };
 
 export default function PoolPositionWidget(props: PoolPositionWidgetProps) {
-
-  const { walletIsConnected, poolData, offChainPoolStats, accountData } = props;
+  const { walletIsConnected, poolData, offChainPoolStats } = props;
   const { poolStats } = useContext(BlendPoolContext);
-
-  // const [{ data: accountData }] = useAccount();
+  const { accountData } = useContext(AccountContext);
   const [{ data: accountShareBalance }] = useBalance({
     addressOrName: accountData?.address,
     token: poolData.poolAddress,

src/data/context/AccountContext.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Connector, useAccount } from 'wagmi';
+
+export type AccountData = {
+  address: string;
+  connector: Connector<any, any> | undefined;
+  ens:
+    | {
+        avatar: string | null | undefined;
+        name: string;
+      }
+    | undefined;
+};
+
+export interface IAccountContext {
+  accountData: AccountData | undefined;
+  disconnect: () => void;
+}
+
+const defaultAccount: AccountData = {
+  address: '',
+  connector: undefined,
+  ens: undefined,
+};
+
+const defaultState: IAccountContext = {
+  accountData: defaultAccount,
+  disconnect: () => {},
+};
+
+export const AccountContext =
+  React.createContext<IAccountContext>(defaultState);
+
+export type AccountProviderProps = {
+  children?: React.ReactNode;
+};
+
+export function AccountProvider(props: AccountProviderProps) {
+  const [{ data: accountData }, disconnect] = useAccount();
+
+  return (
+    <AccountContext.Provider value={{ accountData, disconnect }}>
+      {props.children}
+    </AccountContext.Provider>
+  );
+}

src/data/hooks/UseDeposit.ts

@@ -1,11 +1,12 @@
 import { BlendPoolMarkers } from '../BlendPoolMarkers';
-import { useAccount, useBalance } from 'wagmi';
+import { useBalance } from 'wagmi';
 import { useAllowance } from './UseAllowance';
 import Big from 'big.js';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { toBig } from '../../util/Numbers';
 import { WETH_9_MAINNET_ADDRESS } from '../constants/Addresses';
 import { WETH_GAS_RESERVE } from '../constants/Values';
+import { AccountContext } from '../context/AccountContext';
 
 type DepositPageState = {
   token0Balance: Big;
@@ -32,7 +33,7 @@ function tokenMaxFromBalance(
 export function useDeposit(poolData: BlendPoolMarkers) {
   const [state, setState] = useState<DepositPageState | null>(null);
 
-  const [{ data: accountData }] = useAccount();
+  const { accountData } = useContext(AccountContext)
   const [{ data: token0BalanceData }] = useBalance({
     addressOrName: accountData?.address,
     token: poolData.token0Address,

src/pages/BlendPoolPage.tsx

@@ -28,27 +28,18 @@ import { GetTokenData } from '../data/TokenData';
 import { ReactComponent as OpenIcon } from '../assets/svg/open.svg';
 import tw from 'twin.macro';
 import useMediaQuery from '../data/hooks/UseMediaQuery';
-import { Connector, useAccount } from 'wagmi';
 import { FeeTier } from '../data/BlendPoolMarkers';
 import { theGraphUniswapV3Client } from '../App';
 import { getUniswapVolumeQuery } from '../util/GraphQL';
 import { IOSStyleSpinner } from '../components/common/Spinner';
+import { AccountContext } from '../data/context/AccountContext';
 
 const ABOUT_MESSAGE_TEXT_COLOR = 'rgba(130, 160, 182, 1)';
 
 type PoolParams = {
   pooladdress: string;
 };
 
-export type AccountData = {
-  address: string;
-  connector: Connector<any, any> | undefined;
-    ens: {
-        avatar: string | null | undefined;
-        name: string;
-    } | undefined;
-}
-
 const LoaderWrapper = styled.div`
   position: absolute;
   left: 0;
@@ -152,6 +143,9 @@ export default function BlendPoolPage(props: BlendPoolPageProps) {
   const isGTSmallScreen = useMediaQuery(RESPONSIVE_BREAKPOINTS.SM);
 
   const { poolDataMap, fetchPoolData } = useContext(BlendTableContext);
+
+  const { accountData } = useContext(AccountContext);
+  const walletIsConnected = accountData?.address !== undefined;
 
   const poolData = poolDataMap.get(params.pooladdress || '');
 
@@ -212,9 +206,6 @@ export default function BlendPoolPage(props: BlendPoolPageProps) {
     };
   }, [blockNumber, poolData]);
 
-  const [{ data: accountData }] = useAccount({ fetchEns: true });
-  const walletIsConnected = accountData?.address !== undefined;
-
   if (!poolData) {
     if (params.pooladdress) {
       fetchPoolData(params.pooladdress);
@@ -267,7 +258,6 @@ export default function BlendPoolPage(props: BlendPoolPageProps) {
               walletIsConnected={walletIsConnected}
               poolData={poolData}
               offChainPoolStats={offChainPoolStats}
-              accountData={accountData}
             />
           )}
           <PoolStatsWidget