Utorg wallet integration

components/ConnectEth.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useWeb3Modal } from '@web3modal/react';
 import { useAuth, useDisconnect } from '../hooks/useAuth';
 import Link from 'next/link';
+import Image from 'next/image';
+import { EthereumClientContext } from '../context/EthereumClientContext/EthereumClientContext';
 
 export const ConnectEth: React.FC = () => {
   const [hasMounted, setHasMounted] = useState(false);
@@ -11,13 +13,27 @@ export const ConnectEth: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const onMouseEnter = () => setIsOpen(true);
   const onMouseLeave = () => setIsOpen(false);
+  const { ethereumClient } = useContext(EthereumClientContext);
 
   useEffect(() => {
     setHasMounted(true);
   }, []);
 
   if (!hasMounted) return null;
 
+  const openUTORG = async () => {
+    ethereumClient?.connectWalletConnect((uri) => {
+      if (uri) {
+        window.open(
+          `https://link.UTORG.com/zp0f/wc?uri=${encodeURIComponent(
+            encodeURIComponent(uri)
+          )}`,
+          '_newtab'
+        );
+      }
+    });
+  };
+
   return (
     <ul className="navbar-nav mb-2 mb-lg-0 fs-5">
       <li className="nav-item dropdown">
@@ -55,12 +71,28 @@ export const ConnectEth: React.FC = () => {
             ) : null}
           </div>
         ) : (
-          <button
-            className="block border border-white w-52 py-2.5 px-5 rounded-xl text-white hover:text-black hover:bg-white transition-all"
-            onClick={open}
-          >
-            Connect
-          </button>
+          <div className="flex flex-row flex-wrap gap-4 justify-center">
+            <button
+              className="block border border-white w-52 py-2.5 px-5 rounded-xl text-white hover:text-black hover:bg-white transition-all"
+              onClick={open}
+            >
+              Connect
+            </button>
+
+            <button
+              className="flex flex-row block border border-white w-52 py-2.5 px-5 rounded-xl text-white hover:text-white bg-slate-800/50 hover:bg-black transition-all"
+              onClick={openUTORG}
+            >
+              <Image
+                className="rounded"
+                src="https://static.utorg.com/icons/app.png"
+                alt="Utorg icon"
+                width={28}
+                height={28}
+              />
+              <span className="mx-auto">Connect Utorg</span>
+            </button>
+          </div>
         )}
       </li>
     </ul>

components/Layout.tsx

@@ -27,6 +27,7 @@ import { useCookies } from 'react-cookie';
 import { useAuth } from '../hooks/useAuth';
 import { lineaMainnet, lineaNetwork } from '../helpers/linea';
 import { lineaTestnet } from 'wagmi/chains';
+import { EthereumClientProvider } from '../context/EthereumClientContext/EthereumClientContext';
 
 interface Props {
   children?: JSX.Element;
@@ -101,30 +102,9 @@ export default function Layout({ children }: Props) {
         </WagmiConfig>
         <Toaster />
         <Web3Modal
-          mobileWallets={[
-            {
-              id: '5978418d55211a6fe3f600df88afcc05a94f046998452dd1ca21d86fc7157c17',
-              name: 'UTORG',
-              links: {
-                universal: 'https://link.utorg.com/zp0f',
-                native: 'https://link.utorg.com/zp0f',
-              },
-            },
+          explorerRecommendedWalletIds={[
+            '6af02afbc4ac21d339fb4290d048d48f9f73c3b1a307a994f0474329948c0e5a',
           ]}
-          desktopWallets={[
-            {
-              id: '5978418d55211a6fe3f600df88afcc05a94f046998452dd1ca21d86fc7157c17',
-              name: 'UTORG',
-              links: {
-                universal: 'https://utorg.app/',
-                native: 'https://utorg.app/',
-              },
-            },
-          ]}
-          walletImages={{
-            '5978418d55211a6fe3f600df88afcc05a94f046998452dd1ca21d86fc7157c17':
-              'https://static.utorg.com/icons/app.png',
-          }}
           projectId={projectId}
           ethereumClient={ethereumClient}
         />
@@ -134,7 +114,6 @@ export default function Layout({ children }: Props) {
 }
 
 const AuthBlock = ({ children }: Props) => {
-  const [hasMounted, setHasMounted] = useState(false);
   const { chain } = useNetwork();
   const [user, setUser] = useState<UserType | null>(null);
   const [cookies] = useCookies();
@@ -146,10 +125,6 @@ const AuthBlock = ({ children }: Props) => {
     switchNetwork?.(lineaNetwork.id);
   };
 
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
   useEffect(() => {
     const token = cookies.auth_token;
     if (token && Boolean(fetchUserProfile)) {
@@ -168,16 +143,16 @@ const AuthBlock = ({ children }: Props) => {
     }
   }, [cookies.auth_token]);
 
-  if (!hasMounted) return <></>;
-
   if (
     (process.env.NEXT_PUBLIC_PRODUCTION !== 'true' && chain?.id != 59140) ||
     (process.env.NEXT_PUBLIC_PRODUCTION == 'true' && chain?.id != 59144)
   ) {
     return (
       <div className="flex flex-col min-h-screen">
         <div className="relative z-50">
-          <Header network="eth" />
+          <EthereumClientProvider value={{ ethereumClient }}>
+            <Header network="eth" />
+          </EthereumClientProvider>
         </div>
         <main className="flex-grow flex">
           <div className="m-auto text-center">

context/EthereumClientContext/EthereumClientContext.tsx

@@ -0,0 +1,11 @@
+import { type EthereumClient } from '@web3modal/ethereum';
+import { createContext } from 'react';
+
+export interface ValueType {
+  ethereumClient: EthereumClient | null;
+}
+export const EthereumClientContext = createContext<ValueType>({
+  ethereumClient: null,
+});
+
+export const EthereumClientProvider = EthereumClientContext.Provider;