✅ README.md

Cyph Wallet SDK

A plug-and-play React SDK to integrate Cyph Wallet login, wallet connection, and social/email login into your dApp using wagmi, Chakra UI, and EVM-compatible chains.

📦 Installation

npm install cyph-wallet-sdk
# or
yarn add cyph-wallet-sdk


This package requires the following peer dependencies:

react (18 or 19)

wagmi (^2.16.9)

@chakra-ui/react (^2.0.0)

⚙️ Setup

Wrap your app with Chakra UI and Wagmi providers in your main app (e.g. _app.tsx, main.tsx, etc.).

import { WagmiProvider, createConfig, http } from 'wagmi'
import { mainnet } from 'viem/chains'
import { ChakraProvider } from '@chakra-ui/react'

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http()
  }
})

function App() {
  return (
    <WagmiProvider config={config}>
      <ChakraProvider>
        <YourApp />
      </ChakraProvider>
    </WagmiProvider>
  )
}

🧩 Components
WalletList

Renders a list of wallet connection options (MetaMask, WalletConnect, Cyph).

import { WalletList } from 'cyph-wallet-sdk'

function ConnectWallet() {
  return <WalletList />
}


Props:

interface WalletListProps {
  rpcUrl?: string       // Custom RPC URL for Cyph chain
  chainId?: number      // Chain ID to switch to when connecting
  onSelect?: () => void // Optional callback after connect/disconnect
}

WalletModal

A full-screen modal with connection options.

import { WalletModal } from 'cyph-wallet-sdk'

function Page() {
  return <WalletModal isOpen={true} onClose={() => {}} />
}

EmailLogin and SocialLoginButton

Custom login components (optional usage if your dApp uses off-chain auth).

import { EmailLogin, SocialLoginButton } from 'cyph-wallet-sdk'

<EmailLogin />
<SocialLoginButton provider="google" />

useAuth Hook

Handles auth token logic (used internally by components like WalletList).

import { useAuth } from 'cyph-wallet-sdk'

const { token, setToken, clearToken } = useAuth()

🛠 Development (Local)

If you're contributing or linking locally:

git clone https://github.com/yourname/cyph-wallet-sdk.git
cd cyph-wallet-sdk
npm install
npm run build

📁 Project Structure
src/
├── components/
│   ├── WalletList.tsx
│   ├── WalletModal.tsx
│   └── LoginOnboard/
│       ├── EmailLogin.tsx
│       └── SocialLoginButton.tsx
├── Hooks/
│   └── useAuth.ts
├── lib/
│   └── config.ts
└── index.ts

🧾 License

MIT © [Your Name or Org]