diff --git a/app/(general)/layout.tsx b/app/(general)/layout.tsx index fdd1a4e8..4ad6751b 100644 --- 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 ( - -
- -
{children}
- -
-
- -
- -
- + + +
+ +
{children}
+ +
+
+ +
+ +
+ + ) } diff --git a/app/layout.tsx b/app/layout.tsx index f758a9a8..22fb53e6 100644 --- 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 ( - <> - - - {children} - - - - - + + + {children} + + + + ) } diff --git a/components/blockchain/wallet-connect-custom.tsx b/components/blockchain/wallet-connect-custom.tsx index 069e6175..565884fa 100644 --- 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 { 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 ( {({ @@ -37,7 +48,7 @@ export const WalletConnectCustom = ({ if (!connected) { return ( <> - diff --git a/components/blockchain/wallet-connect.tsx b/components/blockchain/wallet-connect.tsx index 60622740..8af4341c 100644 --- 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) => { + const { magic } = useMagic() + + const handleConnect = async () => { + if (!magic) { + return + } + await magic.wallet.connectWithUI() + } + return ( - + ) } diff --git a/components/context/magicProvider.tsx b/components/context/magicProvider.tsx new file mode 100644 index 00000000..03cb6eeb --- /dev/null +++ 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 + +type MagicContextType = { + magic: Magic | null +} + +const MagicContext = createContext({ + magic: null, +}) + +export const useMagic = () => useContext(MagicContext) + +const MagicProvider = ({ children }: { children: ReactNode }) => { + const [magic, setMagic] = useState(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 {children} +} + +export default MagicProvider diff --git a/components/shared/is-wallet-connected.tsx b/components/shared/is-wallet-connected.tsx index ef05b4bd..5f473f51 100644 --- 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 index f87a94af..06a8d944 100644 --- 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 ? (