feat: migrate to use connectkit

apps/web/package.json

@@ -41,6 +41,7 @@
     "axios": "^1.6.3",
     "browser-image-compression": "^2.0.2",
     "chart.js": "^4.4.1",
+    "connectkit": "^1.5.3",
     "dotenv": "^16.3.1",
     "esbuild": "^0.19.11",
     "framer-motion": "^10.17.0",

apps/web/src/components/Common/Providers/Web3Provider.tsx

@@ -1,10 +1,9 @@
 import type { FC, ReactNode } from 'react';
 
-import { APP_NAME, WALLETCONNECT_PROJECT_ID } from '@hey/data/constants';
-import { CoinbaseWalletConnector } from '@wagmi/connectors/coinbaseWallet';
-import { InjectedConnector } from '@wagmi/connectors/injected';
-import { WalletConnectConnector } from '@wagmi/connectors/walletConnect';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { ALCHEMY_API_KEY, WALLETCONNECT_PROJECT_ID } from '@hey/data/constants';
+import connectkitTheme from '@lib/connectkitTheme';
+import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
+import { createConfig, WagmiConfig } from 'wagmi';
 import {
   base,
   baseGoerli,
@@ -17,45 +16,50 @@ import {
   zora,
   zoraTestnet
 } from 'wagmi/chains';
-import { publicProvider } from 'wagmi/providers/public';
 
-const { chains, publicClient } = configureChains(
-  [
-    polygon,
-    polygonMumbai,
-    mainnet,
-    goerli,
-    zora,
-    zoraTestnet,
-    optimism,
-    optimismGoerli,
-    base,
-    baseGoerli
-  ],
-  [publicProvider()]
-);
-
-const connectors: any = [
-  new InjectedConnector({ chains, options: { shimDisconnect: true } }),
-  new CoinbaseWalletConnector({ options: { appName: APP_NAME } }),
-  new WalletConnectConnector({
-    chains,
-    options: { projectId: WALLETCONNECT_PROJECT_ID }
+const config = createConfig(
+  getDefaultConfig({
+    alchemyId: ALCHEMY_API_KEY,
+    appIcon: '/logo.png',
+    appName: 'Hey',
+    chains: [
+      polygon,
+      polygonMumbai,
+      mainnet,
+      goerli,
+      zora,
+      zoraTestnet,
+      optimism,
+      optimismGoerli,
+      base,
+      baseGoerli
+    ],
+    walletConnectProjectId: WALLETCONNECT_PROJECT_ID
   })
-];
-
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors,
-  publicClient
-});
+);
 
 interface Web3ProviderProps {
   children: ReactNode;
 }
 
 const Web3Provider: FC<Web3ProviderProps> = ({ children }) => {
-  return <WagmiConfig config={wagmiConfig}>{children}</WagmiConfig>;
+  return (
+    <WagmiConfig config={config}>
+      <ConnectKitProvider
+        customTheme={connectkitTheme}
+        options={{
+          hideNoWalletCTA: true,
+          hideQuestionMarkCTA: true,
+          hideTooltips: true,
+          initialChainId: polygon.id,
+          reducedMotion: true
+        }}
+        theme="minimal"
+      >
+        {children}
+      </ConnectKitProvider>
+    </WagmiConfig>
+  );
 };
 
 export default Web3Provider;

apps/web/src/components/Publication/HeyOpenActions/Nft/BasePaintCanvas/Mint/MintAction.tsx

@@ -2,7 +2,7 @@ import type { AnyPublication } from '@hey/lens';
 import type { BasePaintCanvas } from '@hey/types/nft';
 import type { FC } from 'react';
 
-import WalletSelector from '@components/Shared/Login/WalletSelector';
+import LoginButton from '@components/Shared/Navbar/LoginButton';
 import SwitchNetwork from '@components/Shared/SwitchNetwork';
 import {
   CurrencyDollarIcon,
@@ -98,7 +98,10 @@ const MintAction: FC<MintActionProps> = ({
     <div className="flex">
       {isDisconnected ? (
         <div className="mt-5 w-full justify-center">
-          <WalletSelector />
+          <LoginButton
+            className="w-full justify-center"
+            title="Login to Continue"
+          />
         </div>
       ) : chain !== base.id ? (
         <SwitchNetwork

apps/web/src/components/Publication/HeyOpenActions/Nft/ZoraNft/Mint/MintAction.tsx

@@ -3,7 +3,7 @@ import type { ZoraNft } from '@hey/types/nft';
 import type { FC } from 'react';
 import type { Address } from 'viem';
 
-import WalletSelector from '@components/Shared/Login/WalletSelector';
+import LoginButton from '@components/Shared/Navbar/LoginButton';
 import SwitchNetwork from '@components/Shared/SwitchNetwork';
 import {
   CurrencyDollarIcon,
@@ -141,8 +141,11 @@ const MintAction: FC<MintActionProps> = ({
   return !mintingOrSuccess ? (
     <div className="flex">
       {isDisconnected ? (
-        <div className="mt-5 w-full justify-center">
-          <WalletSelector />
+        <div className="mt-5 w-full">
+          <LoginButton
+            className="w-full justify-center"
+            title="Login to Continue"
+          />
         </div>
       ) : chain !== nft.chainId ? (
         <SwitchNetwork

apps/web/src/components/Shared/ConnectWallet.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import { WalletIcon } from '@heroicons/react/24/outline';
+import { Button } from '@hey/ui';
+import { useModal } from 'connectkit';
+import { useGlobalModalStateStore } from 'src/store/non-persisted/useGlobalModalStateStore';
+
+const ConnectWallet: FC = () => {
+  const setShowAuthModal = useGlobalModalStateStore(
+    (state) => state.setShowAuthModal
+  );
+  // const { isConnected } = useAccount();
+  const { setOpen } = useModal({
+    onConnect: () => {
+      alert('connected');
+      setShowAuthModal(false);
+    }
+  });
+
+  return (
+    <Button
+      className="w-full justify-center"
+      icon={<WalletIcon className="size-5" />}
+      onClick={() => setOpen(true)}
+      outline
+    >
+      Connect Wallet
+    </Button>
+  );
+};
+
+export default ConnectWallet;

apps/web/src/components/Shared/GlobalModals.tsx

@@ -10,6 +10,7 @@ import {
 import { Modal } from '@hey/ui';
 import { useGlobalModalStateStore } from 'src/store/non-persisted/useGlobalModalStateStore';
 import { usePublicationStore } from 'src/store/non-persisted/usePublicationStore';
+import { useAccount } from 'wagmi';
 
 import Login from './Login';
 import WrongNetwork from './Login/WrongNetwork';
@@ -71,6 +72,8 @@ const GlobalModals: FC = () => {
     (state) => state.setShowDiscardModal
   );
 
+  const { connector: activeConnector } = useAccount();
+
   // Publication store
   const publicationContent = usePublicationStore(
     (state) => state.publicationContent
@@ -135,14 +138,16 @@ const GlobalModals: FC = () => {
       >
         <SwitchProfiles />
       </Modal>
-      <Modal
-        icon={<ArrowRightCircleIcon className="text-brand-500 size-5" />}
-        onClose={() => setShowAuthModal(false)}
-        show={showAuthModal}
-        title="Login"
-      >
-        <Login />
-      </Modal>
+      {activeConnector?.id && (
+        <Modal
+          icon={<ArrowRightCircleIcon className="text-brand-500 size-5" />}
+          onClose={() => setShowAuthModal(false)}
+          show={showAuthModal}
+          title="Login"
+        >
+          <Login />
+        </Modal>
+      )}
       <Modal
         onClose={() => setShowWrongNetworkModal(false)}
         show={showWrongNetworkModal}