Skip to content

Zynkah/Projekt_Zynk

Repository files navigation

📦 fare-privy-core

A React authentication + wallet management core for Privy-powered Web3 apps — optimized for casino, gaming, and onchain experiences.

fare-privy-core streamlines building secure auth and wallet flows by wrapping Privy’s authentication and wallet primitives in focused React hooks and state logic — without imposing opinionated UI components.(GitHub)


🚀 Features

  • 🔐 Privy Authentication Integration Full Privy login/logout support for Web2-style onboarding into your dApp.(GitHub)

  • 🪙 Wallet Management Expose user wallets (embedded and external) with convenient hooks.(GitHub)

  • 🔄 Multi-Chain Ready Built with both Ethereum and Solana workflows in mind.(GitHub)

  • 📊 Balance Fetching Utilities Consistent balance access across wallets with easy hooks.(GitHub)

  • 🧠 Focused, Tree-Shakable Hooks Import only what you use — keeps bundle size minimal.(GitHub)

  • 🎨 Themeable (Casino-Ready) Customize colors, logos, and appearance for your brand.(GitHub)

  • TypeScript Support Fully typed with declarations for a better developer experience.(GitHub)


📦 Installation

npm install fare-privy-core @privy-io/react-auth styled-components@^5.3.0 valtio@^1.12.0
# or
pnpm add fare-privy-core @privy-io/react-auth styled-components@^5.3.0 valtio@^1.12.0

⚠️ Peer Dependencies@privy-io/react-auth must be installed to integrate Privy auth.(GitHub) — Styled Components v5 is required (v6 incompatible).(GitHub) — Valtio v1 for wallet state.(GitHub)


🧠 Quick Start

Wrap your React app with the provider:

import { PrivyProvider } from "fare-privy-core";

function App() {
  return (
    <PrivyProvider
      appId="YOUR_PRIVY_APP_ID"
      config={{
        walletChainType: "ethereum-and-solana"
      }}
      theme={{
        accentColor: "#0066FF",
        darkMode: true
      }}
    >
      <YourApp />
    </PrivyProvider>
  );
}

🪝 Core Hooks

Use the ready-to-import hooks to manage auth and wallets:

🔑 Authentication

import { useAuthActions, useIsAuthenticated } from "fare-privy-core";

function LoginBtn() {
  const { login } = useAuthActions();
  return <button onClick={login}>Login</button>;
}

👛 Wallet Info

import { useConnectedWallets, useWalletBalance } from "fare-privy-core";

function WalletDisplay() {
  const { primaryWallet } = useConnectedWallets();
  const balance = useWalletBalance(primaryWallet);
  return (
    <div>
      <p>Address: {primaryWallet?.address}</p>
      <p>Balance: {balance?.formatted}</p>
    </div>
  );
}

💼 Wallet State Management

Switch or inspect wallet state using Valtio:

import { switchWalletState } from "fare-privy-core";
import { useSnapshot } from "valtio";

function MyWalletModal() {
  const snap = useSnapshot(switchWalletState);
  return snap.isWalletModalOpen ? <WalletModal /> : null;
}

🎨 Theming

You can theme the UI (used by hooks/modals if applicable):

<PrivyProvider
  theme={{
    accentColor: "#FF6B35",
    logo: "/logo.png",
    darkMode: false
  }}
>
  <App />
</PrivyProvider>

🧭 Philosophy

fare-privy-core is headless — it doesn’t ship UI components. Instead, it:

✅ Simplifies Privy auth & wallet state ✅ Keeps bundle footprint small ✅ Gives full control over your UI ✅ Works with any design system or component library(GitHub)


📘 Examples

You can combine this core with your UI library to create:

  • Casino login + wallet flows
  • Web3 dashboards with balance hooks
  • Cross-chain wallet connectors
  • Custom branded auth experiences

📦 Contributing

Feel free to open issues, suggest improvements or extend hooks into your UI library.


⚖️ License

MIT


If you want, I can also generate a demo app example, API reference, or TS types docs to include in the repo.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors