# Frontend Components This document provides detailed information about the frontend components used in the Habify Protocol. It covers the component structure, usage, and examples. ## Component Structure The Habify Protocol frontend is built using a component-based architecture, with components organized into several categories: 1. **UI Components**: Basic UI elements like buttons, inputs, and cards 2. **Layout Components**: Components for page layout, such as the navbar and footer 3. **Feature Components**: Components for specific features, such as activity submission and wallet management 4. **Chart Components**: Components for data visualization, such as activity charts and network stats ## UI Components UI components are the building blocks of the user interface. They are reusable and can be composed to create more complex components. ### Button The Button component is used for triggering actions. ```tsx // components/ui/button.tsx import { forwardRef } from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../lib/utils'; const buttonVariants = cva( 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'underline-offset-4 hover:underline text-primary', }, size: { default: 'h-10 py-2 px-4', sm: 'h-9 px-3 rounded-md', lg: 'h-11 px-8 rounded-md', }, }, defaultVariants: { variant: 'default', size: 'default', }, } ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } const Button = forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { return ( ``` ### Input The Input component is used for text input. ```tsx // components/ui/input.tsx import { forwardRef } from 'react'; import { cn } from '../../lib/utils'; export interface InputProps extends React.InputHTMLAttributes {} const Input = forwardRef( ({ className, type, ...props }, ref) => { return ( ); } ); Input.displayName = 'Input'; export { Input }; ``` Usage: ```tsx setName(e.target.value)} /> ``` ### Card The Card component is used for displaying content in a card format. ```tsx // components/ui/card.tsx import { forwardRef } from 'react'; import { cn } from '../../lib/utils'; const Card = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); Card.displayName = 'Card'; const CardHeader = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); CardHeader.displayName = 'CardHeader'; const CardTitle = forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); CardTitle.displayName = 'CardTitle'; const CardDescription = forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)); CardDescription.displayName = 'CardDescription'; const CardContent = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)); CardContent.displayName = 'CardContent'; const CardFooter = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)); CardFooter.displayName = 'CardFooter'; export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, }; ``` Usage: ```tsx Card Title Card Description
Card Content
``` ## Layout Components Layout components are used for structuring the page layout. ### Navbar The Navbar component is used for the top navigation bar. ```tsx // app/components/navbar.tsx import { useState } from 'react'; import Link from 'next/link'; import { Button } from '../../components/ui/button'; import { useWallet } from '../hooks/use-wallet'; import { WalletModal } from './wallet-modal'; export function Navbar() { const { address, connectWallet } = useWallet(); const [isWalletModalOpen, setIsWalletModalOpen] = useState(false); return (

Habify Protocol
Home Activity Staking API Access

{address ? ( ) : ( )}

setIsWalletModalOpen(false)} />
); } ``` ### GlassPanel The GlassPanel component is used for creating a glass-like panel effect. ```tsx // app/components/glass-panel.tsx import { cn } from '../../lib/utils'; interface GlassPanelProps { children: React.ReactNode; className?: string; } export function GlassPanel({ children, className }: GlassPanelProps) { return (
{children}
); } ``` ### TechnicalFooter The TechnicalFooter component is used for the footer section of the page. ```tsx // app/components/technical-footer.tsx import Link from 'next/link'; export function TechnicalFooter() { return (

Habify Protocol

A decentralized platform for tracking and verifying healthy habits and activities on the blockchain.

Resources

Documentation

API Reference

FAQ

Connect

Discord

Twitter

GitHub

© {new Date().getFullYear()} Habify Protocol. All rights reserved.

); } ``` ## Feature Components Feature components are used for specific features of the application. ### WalletOverview The WalletOverview component displays the user's wallet information. ```tsx // app/components/wallet-overview.tsx import { useEffect, useState } from 'react'; import { ethers } from 'ethers'; import { useWallet } from '../hooks/use-wallet'; import { useContracts } from '../contracts/contract-provider'; import { Card, CardHeader, CardTitle, CardContent } from '../../components/ui/card'; export function WalletOverview() { const { address } = useWallet(); const { xHBFContract } = useContracts(); const [balance, setBalance] = useState('0'); const [credits, setCredits] = useState('0'); useEffect(() => { if (!address || !xHBFContract) return; async function fetchBalance() { try { const balance = await xHBFContract.balanceOf(address); setBalance(ethers.utils.formatEther(balance)); const credits = await xHBFContract.getCredits(address); const totalCredits = credits.reduce( (total, credit) => total.add(credit.amount), ethers.BigNumber.from(0) ); setCredits(ethers.utils.formatEther(totalCredits)); } catch (error) { console.error('Error fetching balance:', error); } } fetchBalance(); // Set up event listener for Transfer events const fromFilter = xHBFContract.filters.Transfer(null, address); const toFilter = xHBFContract.filters.Transfer(address, null); xHBFContract.on(fromFilter, fetchBalance); xHBFContract.on(toFilter, fetchBalance); return () => { xHBFContract.off(fromFilter, fetchBalance); xHBFContract.off(toFilter, fetchBalance); }; }, [address, xHBFContract]); if (!address) { return ( Wallet Overview

Connect your wallet to view your balance

); } return ( Wallet Overview

Balance

{balance} xHBF

Credits

{credits} xHBF

Wallet Address

{address}

); } ``` ### SubmitActivity The SubmitActivity component allows users to submit activities. ```tsx // app/components/submit-activity.tsx import { useState } from 'react'; import { ethers } from 'ethers'; import { Button } from '../../components/ui/button'; import { Select } from '../../components/ui/select'; import { useWallet } from '../hooks/use-wallet'; import { useToast } from '../hooks/use-toast'; import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '../../components/ui/card'; export function SubmitActivity() { const { address, signMessage } = useWallet(); const { toast } = useToast(); const [activityType, setActivityType] = useState('DAILY_EXERCISE'); const [loading, setLoading] = useState(false); async function handleSubmit() { if (!address) { toast({ title: 'Wallet not connected', description: 'Please connect your wallet to submit an activity', variant: 'destructive', }); return; } setLoading(true); try { // Create activity payload const timestamp = Math.floor(Date.now() / 1000); const nonce = ethers.utils.hexlify(ethers.utils.randomBytes(32)); // Create message hash const messageHash = ethers.utils.solidityKeccak256( ['address', 'string', 'uint256', 'bytes32'], [address, activityType, timestamp, nonce] ); // Convert to binary format for signing const messageHashBinary = ethers.utils.arrayify(messageHash); // Sign message const signature = await signMessage(messageHashBinary); // Submit activity to API const response = await fetch('/api/activity/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ user: address, activityType, timestamp, nonce, signature, }), }); const data = await response.json(); if (response.ok) { toast({ title: 'Activity submitted', description: 'Your activity has been submitted successfully', }); } else { throw new Error(data.message || 'Failed to submit activity'); } } catch (error) { console.error('Error submitting activity:', error); toast({ title: 'Error', description: error.message || 'Failed to submit activity', variant: 'destructive', }); } finally { setLoading(false); } } return ( Submit Activity

Activity Type

); } ``` ### ActivityHistory The ActivityHistory component displays the user's activity history. ```tsx // app/components/activity-history.tsx import { useEffect, useState } from 'react'; import { useWallet } from '../hooks/use-wallet'; import { Card, CardHeader, CardTitle, CardContent } from '../../components/ui/card'; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../components/ui/table'; interface Activity { id: string; user: string; activityType: string; timestamp: number; submitter: string; } export function ActivityHistory() { const { address } = useWallet(); const [activities, setActivities] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (!address) return; async function fetchActivities() { setLoading(true); try { const response = await fetch(`/api/activity/history?user=${address}`); const data = await response.json(); if (response.ok) { setActivities(data.activities); } else { console.error('Error fetching activities:', data.message); } } catch (error) { console.error('Error fetching activities:', error); } finally { setLoading(false); } } fetchActivities(); }, [address]); if (!address) { return ( Activity History

Connect your wallet to view your activity history

); } return ( Activity History {loading ? (

Loading...

) : activities.length === 0 ? (

No activities found

) : ( Activity Type Timestamp Submitter {activities.map((activity) => ( {activity.activityType} {new Date(activity.timestamp * 1000).toLocaleString()} {`${activity.submitter.slice(0, 6)}...${activity.submitter.slice(-4)}`} ))}

)} ); } ``` ### WalletModal The WalletModal component is used for connecting to a wallet. ```tsx // app/components/wallet-modal.tsx import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog'; import { Button } from '../../components/ui/button'; import { useWallet } from '../hooks/use-wallet'; interface WalletModalProps { isOpen: boolean; onClose: () => void; } export function WalletModal({ isOpen, onClose }: WalletModalProps) { const { address, connectWallet, disconnectWallet } = useWallet(); async function handleConnectWallet() { try { await connectWallet(); onClose(); } catch (error) { console.error('Error connecting wallet:', error); } } function handleDisconnectWallet() { disconnectWallet(); onClose(); } return ( {address ? 'Wallet Connected' : 'Connect Wallet'} {address ? (

Connected Address

{address}

) : (

Connect your wallet to interact with the Habify Protocol

)} ); } ``` ## Chart Components Chart components are used for data visualization. ### ActivityChart The ActivityChart component displays a chart of the user's activities. ```tsx // app/components/charts/activity-chart.tsx import { useEffect, useState } from 'react'; import { useWallet } from '../../hooks/use-wallet'; import { Card, CardHeader, CardTitle, CardContent } from '../../../components/ui/card'; import { Chart } from '../../../components/ui/chart'; interface ActivityCount { activityType: string; count: number; } export function ActivityChart() { const { address } = useWallet(); const [activityCounts, setActivityCounts] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (!address) return; async function fetchActivityCounts() { setLoading(true); try { const response = await fetch(`/api/activity/counts?user=${address}`); const data = await response.json(); if (response.ok) { setActivityCounts(data.counts); } else { console.error('Error fetching activity counts:', data.message); } } catch (error) { console.error('Error fetching activity counts:', error); } finally { setLoading(false); } } fetchActivityCounts(); }, [address]); if (!address) { return ( Activity Distribution

Connect your wallet to view your activity distribution

); } const chartData = { labels: activityCounts.map((count) => count.activityType), datasets: [ { label: 'Activities', data: activityCounts.map((count) => count.count), backgroundColor: [ 'rgba(59, 130, 246, 0.5)', // blue 'rgba(16, 185, 129, 0.5)', // green 'rgba(249, 115, 22, 0.5)', // orange 'rgba(139, 92, 246, 0.5)', // purple ], borderColor: [ 'rgba(59, 130, 246, 1)', 'rgba(16, 185, 129, 1)', 'rgba(249, 115, 22, 1)', 'rgba(139, 92, 246, 1)', ], borderWidth: 1, }, ], }; return ( Activity Distribution {loading ? (

Loading...

) : activityCounts.length === 0 ? (

No activities found

) : ( )} ); } ``` ### NetworkStats The NetworkStats component displays network statistics. ```tsx // app/components/charts/network-stats.tsx import { useEffect, useState } from 'react';