# basedauth

A React/Next.js authentication and wallet connection kit for Ethereum (wagmi) and Solana, with hooks and context providers for seamless integration.

## Features

- Multi-chain wallet connection (Ethereum, Solana)
- Modal and context providers for easy integration
- Hooks for account, balance, contract interaction, and more
- Built-in support for wagmi, Solana wallet adapter, and NextAuth

## Installation

```bash
yarn add based-auth
```

> **Note:** You must also install the required peer dependencies in your app:
>
> - `react`, `react-dom`
> - `@tanstack/react-query`
> - `next-auth`
> - `sonner`
> - `wagmi`, `@wagmi/core`, `@wagmi/connectors`
> - `@solana/wallet-adapter-react`, `@solana/wallet-adapter-wallets`, `@solana/web3.js`
> - `based-shared`, `based-assets` (from your monorepo or npm if published)

## Usage

### 1. Wrap your app with the provider

```tsx
// _app.tsx or main entry
import { SimpleKitProvider } from "based-auth";
import { supportedChains } from "based-shared/chains";

export default function App({ Component, pageProps }) {
  return (
    <SimpleKitProvider chains={supportedChains}>
      <Component {...pageProps} />
    </SimpleKitProvider>
  );
}
```

### 2. Use hooks in your components

```tsx
import {
  useAccount,
  useAccountBalance,
  useTokenBalance,
  useSimpleKit,
  useDisconnectAccount,
} from "based-auth";

function WalletInfo() {
  const { address, network } = useAccount();
  const { balance, formatted } = useAccountBalance();
  const { disconnectAccount } = useDisconnectAccount();
  const { openModal } = useSimpleKit();

  return (
    <div>
      <div>Address: {address}</div>
      <div>Network: {network}</div>
      <div>Balance: {formatted}</div>
      <button onClick={openModal}>Connect Wallet</button>
      <button onClick={() => disconnectAccount()}>Disconnect</button>
    </div>
  );
}
```

### 3. Modal and UI

The modal for wallet connection is automatically provided by the `SimpleKitProvider`. Use the `useSimpleKit` hook to open/close the modal.

### 4. Advanced: Contract interaction

```tsx
import { useWriteContractAsync } from "based-auth";

function MintButton() {
  const { writeContractAsync } = useWriteContractAsync();

  const handleMint = async () => {
    await writeContractAsync({
      address: "0xYourContract",
      abi: [...],
      functionName: "mint",
      args: [/* ... */],
      value: 0n,
    });
  };

  return <button onClick={handleMint}>Mint</button>;
}
```

## Environment Variables

Set the following in your `.env`:

```
NEXT_PUBLIC_PROJECT_ID=your_walletconnect_project_id
AUTH_TRUST_HOST=https://your-app-url.com
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_TWITTER_ID=...
AUTH_TWITTER_SECRET=...
AUTH_SECRET=...
```

## API

### Providers

- `SimpleKitProvider` – Main context provider, wraps your app.

### Hooks

- `useSimpleKit` – Modal controls and context
- `useAccount` – Current user/account info
- `useAccountBalance` – Native token balance
- `useTokenBalance` – ERC20/SPL token balance
- `useDisconnectAccount` – Disconnect wallet
- `useWriteContractAsync` – Write to contract (social or EVM/Solana)
- ...and more (see `src/hooks.tsx`)

## Example

```tsx
import { useSimpleKit } from "based-auth";

function ConnectButton() {
  const { isOpen, openModal, closeModal } = useSimpleKit();
  return (
    <button onClick={openModal}>
      {isOpen ? "Modal Open" : "Connect Wallet"}
    </button>
  );
}
```

---

**For more advanced usage, see the source code and hooks in `src/hooks.tsx`.**
