function03-labs · 0xaaiden · Dec 14, 2024
diff --git a/app/(general)/layout.tsx b/app/(general)/layout.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from "react"
 
 import { NetworkStatus } from "@/components/blockchain/network-status"
 import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import MagicProvider from "@/components/context/magicProvider"
 import { Footer } from "@/components/layout/footer"
 import { SiteHeader } from "@/components/layout/site-header"
 import { FramerWrapper } from "@/components/providers/framer-wrapper"
@@ -13,17 +14,19 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <FramerWrapper>
-      <div className="relative flex min-h-screen flex-col">
-        <SiteHeader />
-        <main className="flex-1">{children}</main>
-        <Opensource />
-        <Footer />
-      </div>
-      <NetworkStatus />
-      <div className="fixed bottom-6 right-6 z-50 block sm:hidden">
-        <WalletConnect />
-      </div>
-    </FramerWrapper>
+    <MagicProvider>
+      <FramerWrapper>
+        <div className="relative flex min-h-screen flex-col">
+          <SiteHeader />
+          <main className="flex-1">{children}</main>
+          <Opensource />
+          <Footer />
+        </div>
+        <NetworkStatus />
+        <div className="fixed bottom-6 right-6 z-50 block sm:hidden">
+          <WalletConnect />
+        </div>
+      </FramerWrapper>
+    </MagicProvider>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,6 +10,7 @@ import { Analytics } from "@vercel/analytics/react"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 
+import MagicProvider from "@/components/context/magicProvider"
 import RootProvider from "@/components/providers/root-provider"
 import { Toaster } from "@/components/ui/toaster"
 
@@ -93,19 +94,17 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <>
-      <html lang="en" suppressHydrationWarning>
-        <body
-          className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable
-          )}
-        >
-          <RootProvider>{children}</RootProvider>
-          <Analytics />
-          <Toaster />
-        </body>
-      </html>
-    </>
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable
+        )}
+      >
+        <RootProvider>{children}</RootProvider>
+        <Analytics />
+        <Toaster />
+      </body>
+    </html>
   )
 }
diff --git a/components/blockchain/wallet-connect-custom.tsx b/components/blockchain/wallet-connect-custom.tsx
@@ -3,6 +3,8 @@ import { ConnectButton } from "@rainbow-me/rainbowkit"
 
 import { Button } from "@/components/ui/button"
 
+import { useMagic } from "../context/magicProvider"
+
 interface WalletConnectCustomProps extends HTMLAttributes<HTMLDivElement> {
   classNameConnect?: string
   classNameConnected?: string
@@ -17,6 +19,15 @@ export const WalletConnectCustom = ({
   labelWrongNetwork = "Wrong Network",
   ...props
 }: WalletConnectCustomProps) => {
+  const { magic } = useMagic()
+  const handleConnect = async () => {
+    if (!magic) {
+      return
+    }
+
+    await magic.wallet.connectWithUI()
+  }
+
   return (
     <ConnectButton.Custom>
       {({
@@ -37,7 +48,7 @@ export const WalletConnectCustom = ({
               if (!connected) {
                 return (
                   <>
-                    <Button variant="default" onClick={openConnectModal}>
+                    <Button variant="default" onClick={handleConnect}>
                       {labelConnect}
                     </Button>
                   </>

diff --git a/components/blockchain/wallet-connect.tsx b/components/blockchain/wallet-connect.tsx
@@ -1,23 +1,28 @@
 import { HtmlHTMLAttributes } from "react"
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 
+import { useMagic } from "@/components/context/magicProvider"
+
+import { Button } from "../ui/button"
+
 export const WalletConnect = ({
   className,
   ...props
 }: HtmlHTMLAttributes<HTMLSpanElement>) => {
+  const { magic } = useMagic()
+
+  const handleConnect = async () => {
+    if (!magic) {
+      return
+    }
+    await magic.wallet.connectWithUI()
+  }
+
   return (
     <span className={className} {...props}>
-      <ConnectButton
-        showBalance={false}
-        accountStatus={{
-          smallScreen: "avatar",
-          largeScreen: "avatar",
-        }}
-        chainStatus={{
-          smallScreen: "icon",
-          largeScreen: "icon",
-        }}
-      />
+      <Button variant="default" onClick={handleConnect}>
+        Log in
+      </Button>
     </span>
   )
 }
diff --git a/components/context/magicProvider.tsx b/components/context/magicProvider.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { Magic as MagicBase } from "magic-sdk"
+
+export type Magic = MagicBase<OAuthExtension[]>
+
+type MagicContextType = {
+  magic: Magic | null
+}
+
+const MagicContext = createContext<MagicContextType>({
+  magic: null,
+})
+
+export const useMagic = () => useContext(MagicContext)
+
+const MagicProvider = ({ children }: { children: ReactNode }) => {
+  const [magic, setMagic] = useState<Magic | null>(null)
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) {
+      const magic = new MagicBase(process.env.NEXT_PUBLIC_MAGIC_API_KEY, {
+        network: {
+          rpcUrl: "https://rpc2.sepolia.org/",
+          chainId: 11155111,
+        },
+      })
+
+      setMagic(magic)
+    }
+  }, [])
+
+  const value = useMemo(() => {
+    return {
+      magic,
+    }
+  }, [magic])
+
+  return <MagicContext.Provider value={value}>{children}</MagicContext.Provider>
+}
+
+export default MagicProvider
diff --git a/components/shared/is-wallet-connected.tsx b/components/shared/is-wallet-connected.tsx
@@ -3,14 +3,16 @@
 import { ReactNode } from "react"
 import { useAccount } from "wagmi"
 
+import { useMagic } from "../context/magicProvider"
+
 interface IsWalletConnectedProps {
   children: ReactNode
 }
 
 export const IsWalletConnected = ({ children }: IsWalletConnectedProps) => {
-  const { address } = useAccount()
+  const { magic } = useMagic()
 
-  if (address) return <>{children}</>
+  if (magic?.user.isLoggedIn) return <>{children}</>
 
   return null
 }
diff --git a/integrations/siwe/components/button-siwe-login.tsx b/integrations/siwe/components/button-siwe-login.tsx
@@ -9,6 +9,7 @@ import { useToast } from "@/lib/hooks/use-toast"
 import { useUser } from "@/lib/hooks/use-user"
 import { cn } from "@/lib/utils"
 
+import { useMagic } from "@/components/context/magicProvider"
 import { Icons } from "@/components/shared/icons"
 import { Button } from "@/components/ui/button"
 import {
@@ -35,6 +36,8 @@ export const ButtonSIWELogin = ({
   ...props
 }: ButtonSIWELoginProps) => {
   const router = useRouter()
+  const { magic } = useMagic()
+
   const { toast } = useToast()
   const { chain } = useNetwork()
   const { address } = useAccount()
@@ -68,10 +71,15 @@ export const ButtonSIWELogin = ({
   const labelClasses = cn({
     "opacity-0": isLoading,
   })
+  const handleAccount = async () => {
+    if (magic?.user.isLoggedIn) {
+      await magic.wallet.showUI()
+    }
+  }
 
   return (
     <>
-      {user?.isLoggedIn ? (
+      {magic?.user.isLoggedIn ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -98,9 +106,9 @@ export const ButtonSIWELogin = ({
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <Link className="w-full" href="/dashboard/profile">
+              <span className="w-full" onClick={handleAccount}>
                 Profile
-              </Link>
+              </span>
             </DropdownMenuItem>
             <DropdownMenuItem>
               <Link className="w-full" href="/dashboard/subscription">

diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "jotai": "^1.13.0",
     "lucide-react": "^0.367.0",
     "luxon": "^3.2.1",
+    "magic-sdk": "^28.19.1",
     "marked": "^14.1.2",
     "moment": "^2.29.4",
     "mongodb": "^6.6.0",