Skip to main content

Examples

Explore real-world implementations of Human Wallet integration to see best practices and get inspiration for your own projects.

Quick Start Examples​

Quick start examples are available in the Human Wallet Examples repository. You can get each project folder using npx gitpick.

🛠 Try on CodeSandbox

npx gitpick holonym-foundation/human-wallet-examples/tree/main/human-wallet-plain-nextjs
cd human-wallet-plain-nextjs
npm install
npm run dev

There are helper files created to make integration snappy. Simply copy and paste relevant files into your project and you're good to go.

Some wallet specific methods and EIP-1193 methods are implemented in /components/methods/ folder. 1 method per component for easier reference.

For detailed explanation, see Quick Start Examples page. Repository also contains detailed README.md files for each example.

Human Passport Verification Demo​

A comprehensive Next.js application that demonstrates the power of combining Human Wallet with Human Passport for identity verification and Web3 authentication.

🌟 Live Demo​

→ Try the live demo at welcome.human.tech

🎯 What This Demo Showcases​

This application is a perfect example of how to integrate Human Wallet in a real-world scenario, demonstrating:

  • Human Passport Integration: Verify human identity using Human Passport scores with a configurable threshold
  • Seamless Authentication: Multiple login methods including social logins (Google, Twitter, Discord, GitHub), email, and wallet connections
  • Human Wallet SDK: Full integration with Human.tech's wallet solution
  • Multi-chain Support: Connect to different Ethereum networks seamlessly
  • Modern UI/UX: Responsive design with smooth animations using Framer Motion
  • Real-time Updates: Live passport score updates and verification status

🛠 Technical Implementation​

The demo uses a modern tech stack:

  • Framework: Next.js 15 with App Router
  • Frontend: React 19, TypeScript, Tailwind CSS
  • Web3: Wagmi, Viem, Ethers.js integration
  • State Management: Zustand for wallet state
  • Animations: Framer Motion for smooth UX
  • Identity Verification: Human Passport API integration

🔗 Explore the Code​

→ View source code on GitHub

The repository includes:

  • Complete Human Wallet SDK integration
  • Human Passport score verification implementation
  • Responsive UI components
  • Configuration examples
  • Environment setup guide
  • Deployment instructions

🚀 Key Features Demonstrated​

Identity Verification Flow​

// Example: Human Passport integration
const verifyHumanity = async (address: string) => {
  const response = await fetch(`https://api.passport.xyz/v2/stamps/${scorerId}/score/${address}`, {
    headers: { 'X-API-KEY': apiKey }
  });
  const data = await response.json();
  return data.score >= threshold; // Configurable threshold (default: 25)
};

Human Wallet Integration​

For complete method documentation, see our Methods Guide →

// Example: Wallet connection with Human Wallet SDK
import { initSilk } from "@silk-wallet/silk-wallet-sdk";

// Sets window.silk with all necessary methods
initSilk({
  config: {
    allowedSocials: ['google', 'twitter', 'discord', 'github'],
    authenticationMethods: ['email', 'social'],
    styles: { darkMode: true }
  }
});

📚 Learn From This Example​

This demo serves as an excellent reference for:

  1. Production-Ready Setup: See how to configure Human Wallet for production use
  2. Error Handling: Robust error handling patterns for wallet connections
  3. State Management: How to manage wallet state across your application
  4. UI/UX Best Practices: Creating intuitive wallet connection flows
  5. Human Passport Integration: Implementing identity verification in real applications

🎨 Customization Ideas​

Use this demo as inspiration to build your own unique implementations:

  • Customize the verification threshold based on your use case
  • Add additional social login providers
  • Implement custom UI themes and animations
  • Integrate with your existing user management system
  • Add features like NFT gating or token-based access control

Contributing Examples​

Have you built something amazing with Human Wallet? We'd love to showcase your work!

Submit your example →

Include:

  • Live demo URL
  • GitHub repository link
  • Brief description of what makes it unique
  • Technologies used