feat: add starknet kit wallet modal (#497)

app/not-connected/page.tsx

@@ -1,28 +1,40 @@
 "use client";
 
-import { useAccount } from "@starknet-react/core";
-import React, { useEffect, useState } from "react";
+import { useAccount, useConnect } from "@starknet-react/core";
+import React, { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import Wallets from "@components/UI/wallets";
 import ErrorScreen from "@components/UI/screens/errorScreen";
+import { useStarknetkitConnectModal } from "starknetkit";
+import { availableConnectors } from "@app/provider";
 
 export default function Page() {
   const { address } = useAccount();
+  const { connectAsync } = useConnect();
   const { push } = useRouter();
-  const [hasWallet, setHasWallet] = useState<boolean>(true);
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: availableConnectors,
+  });
 
   useEffect(() => {
     if (address) push(`/${address}`);
   }, [address]);
 
+  const connectWallet = async () => {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connectAsync({ connector });
+    localStorage.setItem("SQ-connectedWallet", connector.id);
+  };
+
   return (
     <>
       <ErrorScreen
         errorMessage="You're not connected !"
         buttonText="Connect wallet"
-        onClick={() => setHasWallet(true)}
+        onClick={connectWallet}
       />
-      <Wallets closeWallet={() => setHasWallet(false)} hasWallet={hasWallet} />
     </>
   );
 }

app/provider.tsx

@@ -1,20 +1,32 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React from "react";
+import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
+import { ArgentMobileConnector } from "starknetkit/argentMobile";
 import { Chain, goerli, mainnet } from "@starknet-react/chains";
 import {
   Connector,
   StarknetConfig,
-  argent,
-  braavos,
   jsonRpcProvider,
 } from "@starknet-react/core";
 import { StarknetIdJsProvider } from "@context/StarknetIdJsProvider";
 import { ThemeProvider, createTheme } from "@mui/material";
 import { QuestsContextProvider } from "@context/QuestsProvider";
 import { getCurrentNetwork } from "@utils/network";
 
+export const availableConnectors = [
+  new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
+  new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
+  new WebWalletConnector({
+    url:
+      getCurrentNetwork() === "TESTNET"
+        ? "https://web.hydrogen.argent47.net"
+        : "https://web.argent.xyz/",
+  }),
+  new ArgentMobileConnector(),
+];
+
 export function Providers({ children }: { children: React.ReactNode }) {
   const network = getCurrentNetwork();
   const chains = [network === "TESTNET" ? goerli : mainnet];
@@ -24,20 +36,6 @@ export function Providers({ children }: { children: React.ReactNode }) {
     }),
   });
 
-  const connectors = useMemo(
-    () => [
-      braavos(),
-      argent(),
-      new WebWalletConnector({
-        url:
-          network === "TESTNET"
-            ? "https://web.hydrogen.argent47.net"
-            : "https://web.argent.xyz/",
-      }),
-    ],
-    [network]
-  );
-
   const theme = createTheme({
     palette: {
       primary: {
@@ -58,7 +56,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
     <StarknetConfig
       chains={chains}
       provider={provider}
-      connectors={connectors as Connector[]}
+      connectors={availableConnectors as Connector[]}
       autoConnect
     >
       <StarknetIdJsProvider>

components/UI/navbar.tsx

@@ -1,22 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import React, {
-  useState,
-  useEffect,
-  FunctionComponent,
-  useCallback,
-} from "react";
+import React, { useState, useEffect, FunctionComponent } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
 import styles from "@styles/components/navbar.module.css";
 import Button from "./button";
-import {
-  useConnect,
-  useAccount,
-  Connector,
-  useDisconnect,
-} from "@starknet-react/core";
-import Wallets from "./wallets";
+import { useConnect, useAccount, useDisconnect } from "@starknet-react/core";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "@hooks/displayName.tsx";
 import { useDomainFromAddress } from "../../hooks/naming";
@@ -33,17 +22,16 @@ import { getPendingBoostClaims } from "@services/apiService";
 import { hexToDecimal } from "@utils/feltService";
 import CloseFilledIcon from "./iconsComponents/icons/closeFilledIcon";
 import { getCurrentNetwork } from "@utils/network";
-import { TOKEN_DECIMAL_MAP } from "@utils/constants";
-import { getTokenName } from "@utils/tokenService";
+import { availableConnectors } from "@app/provider";
+import { useStarknetkitConnectModal } from "starknetkit";
 
 const Navbar: FunctionComponent = () => {
   const currentNetwork = getCurrentNetwork();
   const [nav, setNav] = useState<boolean>(false);
-  const [hasWallet, setHasWallet] = useState<boolean>(false);
   const { address, account } = useAccount();
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
-  const { connect, connectors } = useConnect();
+  const { connectAsync } = useConnect();
   const { disconnect } = useDisconnect();
   const domainOrAddressMinified = useDisplayName(address ?? "");
   const domain = useDomainFromAddress(address ?? "").domain;
@@ -66,6 +54,9 @@ const Navbar: FunctionComponent = () => {
       linkText: "",
     },
   ]);
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: availableConnectors,
+  });
 
   const fetchAndUpdateNotifications = async () => {
     if (!address) return;
@@ -91,30 +82,23 @@ const Navbar: FunctionComponent = () => {
     fetchAndUpdateNotifications();
   }, [address]);
 
+  // Autoconnect
   useEffect(() => {
-    // to handle autoconnect starknet-react adds connector id in local storage
-    // if there is no value stored, we show the wallet modal
-    const timeout = setTimeout(() => {
-      if (!address) {
-        if (
-          !localStorage.getItem("lastUsedConnector") &&
-          route !== "/partnership"
-        ) {
-          if (connectors.length > 0) setHasWallet(true);
-        } else {
-          const lastConnectedConnectorId =
-            localStorage.getItem("lastUsedConnector");
-          if (lastConnectedConnectorId === null) return;
-
-          const lastConnectedConnector = connectors.find(
-            (connector) => connector.id === lastConnectedConnectorId
-          );
-          if (lastConnectedConnector === undefined) return;
-          tryConnect(lastConnectedConnector);
-        }
+    const connectToStarknet = async () => {
+      if (
+        !localStorage.getItem("SQ-connectedWallet") &&
+        route !== "/partnership"
+      ) {
+        connectWallet();
+      } else {
+        const connectordId = localStorage.getItem("SQ-connectedWallet");
+        const connector = availableConnectors.find(
+          (item) => item.id === connectordId
+        );
+        await connectAsync({ connector });
       }
-    }, 1000);
-    return () => clearTimeout(timeout);
+    };
+    connectToStarknet();
   }, []);
 
   useEffect(() => {
@@ -133,23 +117,21 @@ const Navbar: FunctionComponent = () => {
     });
   }, [account, network, isConnected]);
 
-  const tryConnect = useCallback(
-    async (connector: Connector) => {
-      if (address) return;
-      if (await connector.ready()) {
-        connect({ connector });
-
-        return;
-      }
-    },
-    [address, connectors]
-  );
+  const connectWallet = async () => {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connectAsync({ connector });
+    localStorage.setItem("SQ-connectedWallet", connector.id);
+  };
 
   function disconnectByClick(): void {
     disconnect();
     setIsConnected(false);
     setIsWrongNetwork(false);
     setShowWallet(false);
+    localStorage.removeItem("SQ-connectedWallet");
   }
 
   function handleNav(): void {
@@ -158,7 +140,7 @@ const Navbar: FunctionComponent = () => {
 
   function onTopButtonClick(): void {
     if (!isConnected) {
-      setHasWallet(true);
+      connectWallet();
     } else {
       setShowWallet(true);
     }
@@ -252,7 +234,7 @@ const Navbar: FunctionComponent = () => {
               <WalletButton
                 setShowWallet={setShowWallet}
                 showWallet={showWallet}
-                refreshAndShowWallet={() => setHasWallet(true)}
+                connect={connectWallet}
                 disconnectByClick={disconnectByClick}
               />
             </ul>
@@ -389,10 +371,6 @@ const Navbar: FunctionComponent = () => {
           </div>
         }
       />
-      <Wallets
-        closeWallet={() => setHasWallet(false)}
-        hasWallet={Boolean(hasWallet && !isWrongNetwork)}
-      />
       {showNotifications ? (
         <ModalNotifications
           open={showNotifications}