✨Created MetaMask detection

app/Home.tsx

@@ -1,5 +1,7 @@
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
+import Test from '../components/scripts/Test';
+import MetaMask from '../components/scripts/MetaMask';
 
 export default function Home() {
   return (
@@ -21,6 +23,12 @@ export default function Home() {
             <li>Event 3 - Date</li>
           </ul>
         </section>
+        <section className="mb-8">
+          <Test />
+        </section>
+        <section className="mb-8">
+          <MetaMask />
+        </section>
         <Footer />
       </main>
     </div>

components/scripts/MetaMask.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { useEffect } from 'react';
+
+const MetaMask = () => {
+  const isMetaMaskInstalled = () =>
+    typeof (window as { ethereum?: unknown }).ethereum !== 'undefined';
+
+  useEffect(() => {
+    console.log('Print something');
+  }, []);
+
+  // TODO FIX! This is not working :(
+  const metaMaskInstalled = isMetaMaskInstalled();
+  //console.log(metaMaskInstalled);
+
+  return (
+    <div className="text-center p-4">
+      {metaMaskInstalled ? (
+        <button className="bg-blue-500 text-white px-4 py-2 rounded">
+          Connect Wallet
+        </button>
+      ) : (
+        <p>MetaMask not detected</p>
+      )}
+    </div>
+  );
+};
+
+export default MetaMask;

components/scripts/Test.tsx

@@ -0,0 +1,16 @@
+'use client';
+import React, { useEffect } from 'react';
+
+const Test = () => {
+  useEffect(() => {
+    console.log('Print some shit');
+  }, []);
+
+  return (
+    <div>
+      <p>Hellao!</p>
+    </div>
+  );
+};
+
+export default Test;