Embedded Wallet Integration

const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY, {
  network: {
    rpcUrl: "https://rpc2.sepolia.org/",
    chainId: 11155111,
  },
})

import { Magic as MagicBase } from 'magic-sdk';
import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react';

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 as string, {
        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;

const { magic } = useMagic();

import { BrowserProvider } from "ethers";
import { useEffect, useState } from "react";
import { useMagic } from "./MagicProvider";

const useEthersProvider = () => {
  const { magic } = useMagic();
  const [provider, setProvider] = useState<BrowserProvider | null>(null);

  useEffect(() => {
    if (magic) {
      setProvider(new BrowserProvider((magic as any).rpcProvider));
    } else {
      console.log("Magic is not initialized");
    }
  }, [magic]);

  return provider;
};

export default useEthersProvider;

const provider = useEthersProvider();

const metadata = await magic?.user.getInfo();
const publicAddress = metadata.wallets.ethereum?.publicAddress;

import { formatEther } from "ethers";

const provider = useEthersProvider();
const balance = await provider.getBalance(publicAddress);
const balanceInEth = formatEther(balance);

import { parseEther } from "ethers";

const provider = useEthersProvider();

async function sendEth(amount: number, recipientAddress: string) {
  if (!provider) {
    throw new Error("Ethers provider is not initialized");
  }

  const signer = await provider.getSigner();
  const tx = await signer.sendTransaction({
    to: recipientAddress,
    value: parseEther(amount.toString()),
    gasLimit: 21000,
  });

  console.log("Transaction hash:", tx.hash);
  const receipt = await tx.wait();
  console.log("Transaction receipt:", receipt);
}