made extension button work

chain-notes-brussels · Jul 13, 2024 · ac882de · ac882de
1 parent 2d91969
commit ac882de
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 28 deletions.
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,20 +1,21 @@
+"use client"
+
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+import { MetaMaskProvider } from './hooks';
 
-export const metadata = getMetadata({
-  title: "Oh Snap!",
-  description: "On-chain Community Notes using Metamask Snap",
-});
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
       <body>
         <ThemeProvider enableSystem>
-          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
+          <ScaffoldEthAppWithProviders>
+          <MetaMaskProvider>{children}</MetaMaskProvider>
+          </ScaffoldEthAppWithProviders>
         </ThemeProvider>
       </body>
     </html>

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -12,30 +12,12 @@ import { Address } from "~~/components/scaffold-eth";
 // import type { ComponentProps, useState } from 'react';
 // import { ReactComponent as FlaskFox } from '../assets/flask_fox.svg';
 
-const handleExtensionButton = () => {
-  const requestSnap = useRequestSnap();
-
-  const confettiElement = document.createElement("div");
-  confettiElement.style.position = "fixed";
-  confettiElement.style.top = "0";
-  confettiElement.style.left = "0";
-  confettiElement.style.width = "100vw";
-  confettiElement.style.height = "100vh";
-  confettiElement.style.zIndex = "9999";
-  document.body.appendChild(confettiElement);
 
-  const confetti = <Confetti />;
-  // ReactDOM.render(confetti, confettiElement);
-
-  requestSnap();
-
-  setTimeout(() => {
-    document.body.removeChild(confettiElement);
-  }, 3000); // Hide confetti after 3 seconds
-};
 
 const Home: NextPage = () => {
   const { address: connectedAddress } = useAccount();
+  const requestSnap = useRequestSnap();
+
   // const [confettiVisible, setConfettiVisible] = useState(false);
 
   return (
@@ -61,9 +43,7 @@ const Home: NextPage = () => {
             {/*  here */}
             <div className="flex justify-center">
               <button
-                onClick={() => {
-                  handleExtensionButton();
-                }}
+                onClick={requestSnap}
                 className="bg-black text-white p-3 m-auto transition transform hover:bg-gray-900 hover:shadow-lg hover:scale-105 active:bg-gray-700 active:shadow-md active:scale-95"
               >
                 Get Your Snap Now!