fix(reference): fix for wallet ref pages (#1571)

* fix(reference): fix for wallet ref pages * fix(reference): refactored func names
MetaMask · Sep 24, 2024 · 645627d · 645627d
1 parent 2ab87a9
commit 645627d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/src/components/NavbarWallet/index.tsx b/src/components/NavbarWallet/index.tsx
@@ -24,7 +24,7 @@ const NavbarWalletComponent: FC = ({
 
   const COPY_TEXT = "Copy to clipboard";
   const COPIED_TEXT = "Copied!";
-  const { metaMaskAccount, sdk, metaMaskConnectHandler, metaMaskDisconnect } =
+  const { metaMaskAccount, sdk, metaMaskWalletIdConnectHandler, metaMaskDisconnect } =
     useContext(MetamaskProviderContext);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [copyMessage, setCopyMessage] = useState(COPY_TEXT);
@@ -67,7 +67,7 @@ const NavbarWalletComponent: FC = ({
   return !metaMaskAccount ? (
     <Button
       thin
-      onClick={metaMaskConnectHandler}
+      onClick={metaMaskWalletIdConnectHandler}
       className={styles.navbarButton}
     >
       {!isExtensionActive ? "Install MetaMask" : "Connect MetaMask"}

diff --git a/src/components/ParserOpenRPC/AuthBox/index.tsx b/src/components/ParserOpenRPC/AuthBox/index.tsx
@@ -5,15 +5,19 @@ import clsx from "clsx";
 import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
 
-export const AuthBox = () => {
-  const { metaMaskConnectHandler } = useContext(MetamaskProviderContext);
+interface AuthBoxProps {
+  isMetamaskNetwork?: boolean;
+}
+
+export const AuthBox = ({ isMetamaskNetwork = false }: AuthBoxProps) => {
+  const { metaMaskConnectHandler, metaMaskWalletIdConnectHandler } = useContext(MetamaskProviderContext);
   const connectHandler = () => {
     trackClickForSegment({
       eventName: "Connect wallet",
       clickType: "Connect wallet",
       userExperience: "B",
     });
-    metaMaskConnectHandler();
+    isMetamaskNetwork ? metaMaskConnectHandler() : metaMaskWalletIdConnectHandler();
   };
   return (
     <div className={styles.msgWrapper}>

diff --git a/src/components/ParserOpenRPC/ProjectsBox/index.tsx b/src/components/ParserOpenRPC/ProjectsBox/index.tsx
@@ -13,7 +13,7 @@ const ProjectsBox = () => {
     projects,
     metaMaskAccount,
     walletLinked,
-    metaMaskConnectHandler,
+    metaMaskWalletIdConnectHandler,
     walletLinkUrl,
   } = useContext(MetamaskProviderContext);
   const options = Object.keys(projects).map((v) => ({
@@ -98,7 +98,7 @@ const ProjectsBox = () => {
                 <Button
                   thin
                   className={styles.connectButton}
-                  onClick={metaMaskConnectHandler}
+                  onClick={metaMaskWalletIdConnectHandler}
                 >
                   Connect Wallet
                 </Button>

diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
@@ -244,7 +244,7 @@ export default function ParserOpenRPC({
         <div className={global.colRight}>
           <div className={global.stickyCol}>
             {pathname.startsWith(REF_PATH) && <ProjectsBox />}
-            {!pathname.startsWith(REF_PATH) && !metaMaskAccount && <AuthBox />}
+            {!pathname.startsWith(REF_PATH) && !metaMaskAccount && <AuthBox isMetamaskNetwork={isMetamaskNetwork} />}
             <RequestBox
               isMetamaskInstalled={!!metaMaskAccount}
               method={method}

diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -46,6 +46,7 @@ interface IMetamaskProviderContext {
   setProjects: (arg: { [key: string]: Project }) => void;
   metaMaskConnectHandler: () => Promise<void>;
   metaMaskDisconnect: () => Promise<void>;
+  metaMaskWalletIdConnectHandler: () => Promise<void>;
   userId: string | undefined;
   metaMaskAccount: string;
   setMetaMaskAccount: (arg: string[] | string) => void;
@@ -64,6 +65,7 @@ export const MetamaskProviderContext = createContext<IMetamaskProviderContext>({
   setProjects: () => {},
   metaMaskConnectHandler: () => new Promise(() => {}),
   metaMaskDisconnect: () => new Promise(() => {}),
+  metaMaskWalletIdConnectHandler: () => new Promise(() => {}),
   userId: undefined,
   metaMaskAccount: undefined,
   setMetaMaskAccount: () => {},
@@ -123,6 +125,16 @@ export const LoginProvider = ({ children }) => {
     } catch (e) {}
   };
 
+  const metaMaskConnectHandler = async () => {
+    try {
+      const accounts = await sdk.connect();
+      setMetaMaskAccount(accounts);
+      if (accounts && accounts.length > 0) {
+        setMetaMaskAccount(accounts[0]);
+      }
+    } catch (e) {}
+  };
+
   useEffect(() => {
     const provider = sdk?.getProvider();
     setMetaMaskProvider(provider);
@@ -180,17 +192,7 @@ export const LoginProvider = ({ children }) => {
     }
   }, []);
 
-  useEffect(() => {
-    if ((window as any)?.Sentry) {
-      (window as any)?.Sentry?.setUser({
-        name: metaMaskAccount,
-        id: metaMaskAccount,
-        username: metaMaskAccount,
-      });
-    }
-  }, [metaMaskAccount]);
-
-  const metaMaskConnectHandler = useCallback(async () => {
+  const metaMaskWalletIdConnectHandler = useCallback(async () => {
     try {
       setOpenAuthModal(true);
     } catch (err) {
@@ -224,6 +226,7 @@ export const LoginProvider = ({ children }) => {
               setProjects,
               metaMaskConnectHandler,
               metaMaskDisconnect,
+              metaMaskWalletIdConnectHandler,
               userId,
               metaMaskProvider,
               setMetaMaskProvider,