🔀 Merge pull request #35 from Ayush272002/metamask_button

🚑️ Fixing Metamask Connection Button!

components/custom/FeaturedEvent.tsx

@@ -1,44 +1,51 @@
 'use client';
 import React from 'react';
 import {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardTitle,
-    CardDescription,
-    CardContent,
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
 } from '@/components/ui/card';
 
 interface props {
-    name: string;
-    description: string;
-    location: string;
-    eventStartDate: number;
-    eventHost: string;
-    imageURL: string | null;
+  name: string;
+  description: string;
+  location: string;
+  eventStartDate: number;
+  eventHost: string;
+  imageURL: string | null;
 }
 
 const FeaturedEvent = ({
-    name, description, location, eventStartDate, eventHost, imageURL
+  name,
+  description,
+  location,
+  eventStartDate,
+  eventHost,
+  imageURL,
 }: props) => {
-    return <Card>
-        <CardHeader>
-            {imageURL && <img src={imageURL} alt={name}></img>}
-            <CardTitle>
-            {name}
-            </CardTitle>
-            <CardDescription>
-            {location}<br />
-            {new Date(eventStartDate*1000).toLocaleString()}
-            </CardDescription>
-        </CardHeader>
-        <CardContent>
-            {description}
-        </CardContent>
-        <CardFooter>
-            <i>Host: {eventHost.substring(0, 8)}...{eventHost.substring(eventHost.length-3)}</i>
-        </CardFooter>
+  return (
+    <Card>
+      <CardHeader>
+        {imageURL && <img src={imageURL} alt={name}></img>}
+        <CardTitle>{name}</CardTitle>
+        <CardDescription>
+          {location}
+          <br />
+          {new Date(eventStartDate * 1000).toLocaleString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>{description}</CardContent>
+      <CardFooter>
+        <i>
+          Host: {eventHost.substring(0, 8)}...
+          {eventHost.substring(eventHost.length - 3)}
+        </i>
+      </CardFooter>
     </Card>
-}
+  );
+};
 
-export default FeaturedEvent;
+export default FeaturedEvent;

components/scripts/MetaMask.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { useSDK, MetaMaskProvider } from '@metamask/sdk-react';
+import { WalletIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Popover,
@@ -9,54 +9,87 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 
-function WalletIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" />
-      <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" />
-      <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" />
-    </svg>
-  );
-}
-
-function formatAddress(address: string | undefined): string {
-  if (!address) return '';
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+declare global {
+  interface Window {
+    ethereum?: {
+      isMetaMask?: boolean;
+      request: (request: {
+        method: string;
+        params?: Array<unknown>; // Use `unknown` instead of `any`
+      }) => Promise<unknown>; // Specify a more accurate return type if possible
+    };
+  }
 }
 
 function MetaMaskConnect() {
-  const { sdk, connected, connecting, account } = useSDK();
-  const [isConnected, setIsConnected] = useState(false);
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [account, setAccount] = useState<string | null>(null);
 
+  // Initial check on load
   useEffect(() => {
-    setIsConnected(connected);
-  }, [connected]);
+    const checkConnection = async () => {
+      if (typeof window !== 'undefined' && window.ethereum) {
+        try {
+          // Check if there are any accounts already connected
+          const accounts = (await window.ethereum.request({
+            method: 'eth_accounts',
+          })) as string[];
+          if (accounts && accounts.length > 0) {
+            setIsConnected(true);
+            setAccount(accounts[0]);
+            localStorage.setItem('isConnected', JSON.stringify(true));
+            localStorage.setItem('account', accounts[0]);
+          } else {
+            // No connected accounts found; check `localStorage`
+            const storedIsConnected = JSON.parse(
+              localStorage.getItem('isConnected') || 'false'
+            );
+            const storedAccount = localStorage.getItem('account') || null;
+            setIsConnected(storedIsConnected);
+            setAccount(storedAccount);
+          }
+        } catch (error) {
+          console.error('Error checking MetaMask connection:', error);
+        }
+      }
+    };
+
+    checkConnection();
+  }, []);
+
+  // Update localStorage whenever connection state changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('isConnected', JSON.stringify(isConnected));
+      localStorage.setItem('account', account || '');
+    }
+  }, [isConnected, account]);
 
   const connect = async () => {
     try {
-      await sdk?.connect();
-      setIsConnected(true);
-    } catch (err) {
-      console.warn(`No accounts found`, err);
+      const accounts = (await window.ethereum?.request({
+        method: 'eth_requestAccounts',
+      })) as string[];
+      if (accounts && accounts.length > 0) {
+        setIsConnected(true);
+        setAccount(accounts[0]);
+        localStorage.setItem('isConnected', JSON.stringify(true));
+        localStorage.setItem('account', accounts[0]);
+      }
+    } catch (error) {
+      console.error('MetaMask connection failed:', error);
     }
   };
 
-  const disconnect = () => {
-    if (sdk) {
-      sdk.terminate();
-      setIsConnected(false);
-    }
+  const disconnect = async () => {
+    setIsConnected(false);
+    setAccount(null);
+    localStorage.setItem('isConnected', JSON.stringify(false));
+    localStorage.removeItem('account');
+    await window.ethereum?.request({
+      method: 'wallet_revokePermissions',
+      params: [{ eth_accounts: {} }],
+    });
   };
 
   return (
@@ -65,7 +98,7 @@ function MetaMaskConnect() {
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="link" className="text-white">
-              {formatAddress(account)}
+              {account && `${account.slice(0, 6)}...${account.slice(-4)}`}
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-44">
@@ -80,7 +113,6 @@ function MetaMaskConnect() {
         </Popover>
       ) : (
         <Button
-          disabled={connecting}
           onClick={connect}
           className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
         >
@@ -91,18 +123,4 @@ function MetaMaskConnect() {
   );
 }
 
-export default function MetaMaskConnectWrapper() {
-  return (
-    <MetaMaskProvider
-      debug={false}
-      sdkOptions={{
-        dappMetadata: {
-          name: 'My dApp',
-          url: typeof window !== 'undefined' ? window.location.href : '',
-        },
-      }}
-    >
-      <MetaMaskConnect />
-    </MetaMaskProvider>
-  );
-}
+export default MetaMaskConnect;