useIdentity

import { useIdentity } from '@zkscore/react';

function IdentityCard({ address }: { address: string }) {
  const { identity, loading, error } = useIdentity(address);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!identity) return <div>No identity found</div>;

  return (
    <div>
      <h2>{identity.username}</h2>
      <p>Token ID: {identity.tokenId}</p>
      <p>Minted: {new Date(identity.mintedAt).toLocaleDateString()}</p>
    </div>
  );
}

import { useMintIdentity } from '@zkscore/react';
import { useState } from 'react';

function MintIdentityForm({ address }: { address: string }) {
  const [username, setUsername] = useState('');
  const { mutate, loading, error, data } = useMintIdentity({
    onSuccess: (identity) => {
      console.log('Identity minted:', identity);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate({ address, username });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Choose username"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Minting...' : 'Mint Identity'}
      </button>
      {error && <p className="error">{error.message}</p>}
      {data && <p className="success">Identity created: {data.username}</p>}
    </form>
  );
}

import { useCheckUsername } from '@zkscore/react';
import { useState, useEffect } from 'react';

function UsernameInput() {
  const [username, setUsername] = useState('');
  const { check, available, checking } = useCheckUsername();

  useEffect(() => {
    if (username.length >= 3) {
      check(username);
    }
  }, [username]);

  return (
    <div>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      {checking && <span>Checking...</span>}
      {!checking && username.length >= 3 && (
        <span className={available ? 'success' : 'error'}>
          {available ? '✓ Available' : '✗ Taken'}
        </span>
      )}
    </div>
  );
}

import { useActivateIdentity } from '@zkscore/react';

function ActivateButton({ tokenId }: { tokenId: string }) {
  const { mutate, loading, error } = useActivateIdentity({
    onSuccess: () => {
      console.log('Identity activated!');
    },
  });

  return (
    <div>
      <button onClick={() => mutate({ tokenId })} disabled={loading}>
        {loading ? 'Activating...' : 'Activate Identity'}
      </button>
      {error && <p className="error">{error.message}</p>}
    </div>
  );
}

import { useIdentity, useMintIdentity, useCheckUsername } from '@zkscore/react';
import { useState } from 'react';

function IdentityManager({ address }: { address: string }) {
  const { identity, loading: identityLoading } = useIdentity(address);
  const [username, setUsername] = useState('');
  const { check, available } = useCheckUsername();
  const { mutate: mint, loading: minting } = useMintIdentity({
    onSuccess: () => setUsername(''),
  });

  if (identityLoading) return <div>Loading...</div>;

  if (identity) {
    return (
      <div>
        <h2>Welcome, {identity.username}!</h2>
        <p>Your ZKScore ID is active</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Create Your ZKScore Identity</h2>
      <input
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
          check(e.target.value);
        }}
        placeholder="Choose username"
      />
      {available !== null && (
        <p className={available ? 'success' : 'error'}>
          {available ? 'Username available' : 'Username taken'}
        </p>
      )}
      <button
        onClick={() => mint({ address, username })}
        disabled={!available || minting}
      >
        {minting ? 'Creating...' : 'Create Identity'}
      </button>
    </div>
  );
}

import { useIdentity } from '@zkscore/react';

function IdentityAvatar({ address }: { address: string }) {
  const { identity } = useIdentity(address);

  if (!identity) return <div className="avatar-placeholder" />;

  return (
    <div className="identity-avatar">
      <img
        src={`https://api.onzks.com/avatar/${identity.id}`}
        alt={identity.username}
      />
      <span>{identity.username}</span>
    </div>
  );
}

import { useIdentities } from '@zkscore/react';

function UserList({ addresses }: { addresses: string[] }) {
  const { identities, loading } = useIdentities(addresses);

  if (loading) return <div>Loading identities...</div>;

  return (
    <ul>
      {identities.map((identity, i) => (
        <li key={i}>
          {identity ? identity.username : addresses[i]}
        </li>
      ))}
    </ul>
  );
}

interface Identity {
  id: string;
  username: string;
  address: string;
  tokenId: string;
  mintedAt: string;
  activatedAt?: string;
  active: boolean;
}

interface MintParams {
  address: string;
  username: string;
}

interface ActivateParams {
  tokenId: string;
}