Browser extension login

import { PhantomProvider, useConnect, usePhantom, useAccounts, useIsExtensionInstalled, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        providers: ["injected"],
        appId: "your-app-id",
        addressTypes: [AddressType.solana],
      }}
      theme={darkTheme}
      appName="Your App"
    >
      <ExtensionLogin />
    </PhantomProvider>
  );
}

function ExtensionLogin() {
  const { connect, isConnecting } = useConnect();
  const { isConnected } = usePhantom();
  const addresses = useAccounts();
  const { isInstalled, isLoading } = useIsExtensionInstalled();

  if (isLoading) {
    return <p>Checking for Phantom...</p>;
  }

  if (!isInstalled) {
    return (
      <div>
        <p>Phantom extension not found</p>
        <a href="https://phantom.app/download" target="_blank">
          Install Phantom
        </a>
      </div>
    );
  }

  if (isConnected && addresses) {
    return <p>Connected: {addresses[0]?.address}</p>;
  }

  return (
    <button onClick={() => connect({ provider: "injected" })} disabled={isConnecting}>
      {isConnecting ? "Connecting..." : "Connect Phantom"}
    </button>
  );
}