feat: connect kit - wip

aave · Dec 10, 2024 · d579bc0 · d579bc0
1 parent 072b62a
commit d579bc0
Show file tree

Hide file tree

Showing 10 changed files with 1,143 additions and 916 deletions.
diff --git a/next.config.js b/next.config.js
@@ -25,6 +25,7 @@ module.exports = withBundleAnalyzer({
       ],
     });
     config.experiments = { topLevelAwait: true };
+    config.resolve.fallback = { fs: false, net: false, tls: false };
     return config;
   },
   reactStrictMode: true,

diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "@emotion/server": "latest",
     "@emotion/styled": "11.10.4",
     "@gelatonetwork/relay-sdk": "^5.5.5",
-    "@gnosis.pm/safe-apps-web3-react": "^1.2.0",
     "@heroicons/react": "^1.0.6",
     "@lingui/react": "^3.14.0",
     "@mui/icons-material": "^5.10.14",
@@ -61,19 +60,8 @@
     "@visx/tooltip": "^2.16.0",
     "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "2.7.0",
-    "@web3-react/abstract-connector": "^6.0.7",
-    "@web3-react/coinbase-wallet": "^8.2.3",
-    "@web3-react/core": "^8.2.3",
-    "@web3-react/frame-connector": "^6.0.9",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/metamask": "^8.2.4",
-    "@web3-react/network": "^8.2.3",
-    "@web3-react/store": "^8.2.3",
-    "@web3-react/torus-connector": "^6.2.9",
-    "@web3-react/types": "^8.2.3",
-    "@web3-react/walletconnect-v2": "^8.5.1",
-    "@web3-react/walletlink-connector": "^6.2.14",
     "blo": "^1.1.1",
+    "connectkit": "^1.8.2",
     "d3-array": "^3.2.0",
     "d3-time-format": "^4.1.0",
     "dayjs": "^1.11.5",
@@ -96,6 +84,8 @@
     "reflect-metadata": "^0.1.13",
     "remark-gfm": "^3.0.1",
     "tiny-invariant": "^1.3.1",
+    "viem": "2.x",
+    "wagmi": "^2.13.5",
     "zustand": "^4.1.4"
   },
   "devDependencies": {
@@ -137,10 +127,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.8.1",
-    "typescript": "^4.9.4"
-  },
-  "resolutions": {
-    "@web3-react/walletlink-connector/@coinbase/wallet-sdk": "3.1.0"
+    "typescript": "^5.0.4"
   },
   "contributors": [
     "Anastasia Khovaeva <[email protected]>",

diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -5,7 +5,7 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
 import { NoSsr } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { Web3ReactProvider } from '@web3-react/core';
+import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
@@ -17,10 +17,11 @@ import { TransactionEventHandler } from 'src/components/TransactionEventHandler'
 import { GasStationProvider } from 'src/components/transactions/GasStation/GasStationProvider';
 import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { ModalContextProvider } from 'src/hooks/useModal';
-import { connectors } from 'src/libs/web3-data-provider/connectors';
 import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider';
 import { useRootStore } from 'src/store/root';
 import { SharedDependenciesProvider } from 'src/ui-config/SharedDependenciesProvider';
+import { createConfig, WagmiProvider } from 'wagmi';
+import { mainnet, optimism } from 'wagmi/chains';
 
 import createEmotionCache from '../src/createEmotionCache';
 import { AppGlobalStyles } from '../src/layouts/AppGlobalStyles';
@@ -85,6 +86,17 @@ type NextPageWithLayout = NextPage & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
 };
 
+const config = createConfig(
+  getDefaultConfig({
+    chains: [mainnet, optimism],
+    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
+    appName: 'Aave',
+    appDescription: 'Non-custodial liquidity protocol',
+    appUrl: 'https://app.aave.com',
+    appIcon: 'https://avatars.githubusercontent.com/u/47617460?s=200&v=4',
+  })
+);
+
 interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
   Component: NextPageWithLayout;
@@ -127,40 +139,42 @@ export default function MyApp(props: MyAppProps) {
       />
       <NoSsr>
         <LanguageProvider>
-          <QueryClientProvider client={queryClient}>
-            <Web3ReactProvider connectors={connectors} lookupENS={false}>
-              <Web3ContextProvider>
-                <AppGlobalStyles>
-                  <AddressBlocked>
-                    <ModalContextProvider>
-                      <SharedDependenciesProvider>
-                        <AppDataProvider>
-                          <GasStationProvider>
-                            {getLayout(<Component {...pageProps} />)}
-                            <SupplyModal />
-                            <WithdrawModal />
-                            <BorrowModal />
-                            <RepayModal />
-                            <CollateralChangeModal />
-                            <DebtSwitchModal />
-                            <ClaimRewardsModal />
-                            <EmodeModal />
-                            <SwapModal />
-                            <FaucetModal />
-                            <TransactionEventHandler />
-                            <SwitchModal />
-                            <StakingMigrateModal />
-                            <BridgeModal />
-                          </GasStationProvider>
-                        </AppDataProvider>
-                      </SharedDependenciesProvider>
-                    </ModalContextProvider>
-                  </AddressBlocked>
-                </AppGlobalStyles>
-              </Web3ContextProvider>
-            </Web3ReactProvider>
-            <ReactQueryDevtools initialIsOpen={false} />
-          </QueryClientProvider>
+          <WagmiProvider config={config}>
+            <QueryClientProvider client={queryClient}>
+              <ConnectKitProvider>
+                <Web3ContextProvider>
+                  <AppGlobalStyles>
+                    <AddressBlocked>
+                      <ModalContextProvider>
+                        <SharedDependenciesProvider>
+                          <AppDataProvider>
+                            <GasStationProvider>
+                              {getLayout(<Component {...pageProps} />)}
+                              <SupplyModal />
+                              <WithdrawModal />
+                              <BorrowModal />
+                              <RepayModal />
+                              <CollateralChangeModal />
+                              <DebtSwitchModal />
+                              <ClaimRewardsModal />
+                              <EmodeModal />
+                              <SwapModal />
+                              <FaucetModal />
+                              <TransactionEventHandler />
+                              <SwitchModal />
+                              <StakingMigrateModal />
+                              <BridgeModal />
+                            </GasStationProvider>
+                          </AppDataProvider>
+                        </SharedDependenciesProvider>
+                      </ModalContextProvider>
+                    </AddressBlocked>
+                  </AppGlobalStyles>
+                </Web3ContextProvider>
+              </ConnectKitProvider>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
+          </WagmiProvider>
         </LanguageProvider>
       </NoSsr>
     </CacheProvider>

diff --git a/src/components/WalletConnection/ConnectWalletButton.tsx b/src/components/WalletConnection/ConnectWalletButton.tsx
@@ -1,32 +1,44 @@
 import { Trans } from '@lingui/macro';
 import { Button } from '@mui/material';
-import dynamic from 'next/dynamic';
+import { ConnectKitButton } from 'connectkit';
 import { useWalletModalContext } from 'src/hooks/useWalletModal';
 import { useRootStore } from 'src/store/root';
 import { AUTH } from 'src/utils/mixPanelEvents';
 
-const WalletModal = dynamic(() => import('./WalletModal').then((module) => module.WalletModal));
+import { AvatarSize } from '../Avatar';
+import { UserDisplay } from '../UserDisplay';
 
 export interface ConnectWalletProps {
   funnel?: string;
 }
 
 export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({ funnel }) => {
-  const { setWalletModalOpen } = useWalletModalContext();
   const trackEvent = useRootStore((store) => store.trackEvent);
 
   return (
     <>
-      <Button
-        variant="gradient"
-        onClick={() => {
-          trackEvent(AUTH.CONNECT_WALLET, { funnel: funnel });
-          setWalletModalOpen(true);
+      <ConnectKitButton.Custom>
+        {({ isConnected, show }) => {
+          return (
+            <Button
+              variant={isConnected ? 'surface' : 'gradient'}
+              onClick={() => {
+                show && show();
+              }}
+            >
+              {isConnected ? (
+                <UserDisplay
+                  avatarProps={{ size: AvatarSize.SM }}
+                  oneLiner={true}
+                  titleProps={{ variant: 'buttonM' }}
+                />
+              ) : (
+                <Trans>Connect wallet</Trans>
+              )}
+            </Button>
+          );
         }}
-      >
-        <Trans>Connect wallet</Trans>
-      </Button>
-      <WalletModal />
+      </ConnectKitButton.Custom>
     </>
   );
 };
diff --git a/src/layouts/AppHeader.tsx b/src/layouts/AppHeader.tsx
@@ -20,6 +20,7 @@ import Box from '@mui/material/Box';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { ContentWithTooltip } from 'src/components/ContentWithTooltip';
+import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton';
 import { useModalContext } from 'src/hooks/useModal';
 import { useRootStore } from 'src/store/root';
 import { ENABLE_TESTNET, FORK_ENABLED } from 'src/utils/marketsAndNetworksConfig';
@@ -322,14 +323,14 @@ export function AppHeader() {
           </StyledBadge>
         </NoSsr>
 
-        {!mobileMenuOpen && (
+        {/* {!mobileMenuOpen && (
           <WalletWidget
             open={walletWidgetOpen}
             setOpen={toggleWalletWigit}
             headerHeight={headerHeight}
           />
-        )}
-
+        )} */}
+        <ConnectWalletButton />
         <Box sx={{ display: { xs: 'none', md: 'block' } }}>
           <SettingsMenu />
         </Box>

diff --git a/src/layouts/WalletWidget.tsx b/src/layouts/WalletWidget.tsx
@@ -41,8 +41,7 @@ interface WalletWidgetProps {
 }
 
 export default function WalletWidget({ open, setOpen, headerHeight }: WalletWidgetProps) {
-  const { disconnectWallet, currentAccount, connected, chainId, loading, readOnlyModeAddress } =
-    useWeb3Context();
+  const { currentAccount, connected, chainId, loading, readOnlyModeAddress } = useWeb3Context();
 
   const { setWalletModalOpen } = useWalletModalContext();
 
@@ -357,7 +356,7 @@ export default function WalletWidget({ open, setOpen, headerHeight }: WalletWidg
         </Menu>
       )}
 
-      <WalletModal />
+      {/* <WalletModal /> */}
     </>
   );
 }