JSPM

@cyphr/sdk

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q50244F
  • License MIT

SDK for integrating Cyph Wallet with React, Chakra UI, and Wagmi.

Package Exports

  • @cyphr/sdk
  • @cyphr/sdk/utils

Readme

@cyphr/sdk ๐Ÿ› ๏ธ

SDK for integrating Cyph Wallet with React, Chakra UI, and Wagmi. Provides reusable UI components and utilities for wallet auth, social login, API key management, and Web3 balance queries.

โœจ Features

๐Ÿ” Social, email, phone, and wallet login UI

๐Ÿ”‘ API key generation modal

๐Ÿ’ณ Wallet balances, NFTs, transactions

๐Ÿงฑ Built with Chakra UI + Wagmi

๐Ÿ“ฆ ESM/CJS exports with full TypeScript support

๐Ÿ“ฆ Installation npm install @cyphr/sdk

Peer Dependencies:

npm install react wagmi @chakra-ui/react

๐Ÿงฑ Components

  1. UnauthenticatedContent

UI for users to connect with wallet, phone, email, social login, or passkey.

โœ… Usage: import UnauthenticatedContent from '@cyphr/sdk'

<UnauthenticatedContent chainId={1} rpcUrl="https://mainnet.infura.io/v3/YOUR_KEY" showWallets showSocialLogins showEmailLogin showPhoneLogin showPasskeyLogin={false} onClose={() => console.log('modal closed')} />

Props Prop Type Description chainId number Target chain (e.g. 1 for Ethereum Mainnet) rpcUrl string? Optional RPC provider URL showWallets boolean Show wallet connector section showSocialLogins boolean Show social login buttons (Twitter, etc.) showEmailLogin boolean Show email login UI showPhoneLogin boolean Show phone login UI showPasskeyLogin boolean Enable passkey login (not yet implemented) onClose () => void Called on successful login or close 2. CreateApiKeyModal

A modal to securely generate and configure API keys.

โœ… Usage: import { CreateApiKeyModal } from '@cyphr/sdk' import { useDisclosure } from '@chakra-ui/react'

const { isOpen, onOpen, onClose } = useDisclosure()

<CreateApiKeyModal isOpen={isOpen} onClose={onClose} onCreated={() => alert('API key created')} />

Props Prop Type Description isOpen boolean Modal visibility onClose () => void Close handler onCreated () => void Callback after API key is created

โš ๏ธ The secret key is shown only once โ€” instruct users to save it!

  1. WalletApps

Displays a styled wallet button (with icon, spinner, disabled state).

โœ… Usage: import WalletApps from '@cyphr/sdk'

<WalletApps connector={{ id: 'metamask', name: 'MetaMask' }} onClick={() => connectWallet()} isLoading={false} disabled={false} />

Props Prop Type Description connector any Wallet info (id, name) onClick () => void Click handler isLoading boolean Show spinner disabled boolean Disable interaction iconId string? Optional override for icon lookup name string? Optional name override 4. AuthenticatedContent

Used after login to show links and logout options.

โœ… Usage: import AuthenticatedContent from '@cyphr/sdk' import { FaHome, FaUser } from 'react-icons/fa'

<AuthenticatedContent navLinks={[ { label: 'Home', href: '/home', icon: FaHome }, { label: 'Profile', href: '/profile', icon: FaUser }, ]} onLogout={() => console.log('Logging out')} onClose={() => console.log('Closing nav')} currentPath="/home" logoutRedirectPath="/login" />

Props Prop Type Description navLinks NavLink[] Links to show (label, href, icon) onLogout () => void Logout handler onClose () => void Close the nav menu currentPath string Current route path (for active link state) logoutRedirectPath string? Redirect after logout (default: /login) ๐Ÿงช API Utilities

All fetches use built-in authFetch (with credentials: include).

  1. src/api/users.ts setClientId(clientId?: string) fetchUserProfile(): Promise

  2. sdk/src/api/wallets.ts setClientId(clientId?: string) getWalletTransactions(address: string, opts?): Promise<WalletTransaction[]> getNativeBalance(address: string): Promise getTokenBalances(address: string): Promise<TokenBalance[]> getWalletNFTs(address: string): Promise<NFT[]>

๐Ÿงฐ Build Setup npm run build

Uses tsup to bundle into:

CommonJS (dist/index.cjs.js)

ESM (dist/index.esm.js)

Type declarations (dist/index.d.ts)

The build outputs are available via exports in package.json.

๐Ÿ“ Package Exports "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" }, "./utils": { "import": "./dist/utils/index.esm.js", "require": "./dist/utils/index.cjs.js", "types": "./dist/utils/index.d.ts" } }

๐Ÿ“š Repository

๐Ÿ”— GitHub: CypherVerseLabs/cyph-wallet-sdk

๐Ÿ“œ License

MIT ยฉ CypherVerseLabs