Custom Hooks

import { useModal } from "@/hooks/use-modal";
import { Modal, Button } from "@/components";

function TransferModal() {
  const { isOpen, open, close } = useModal();

  return (
    <>
      <Button onClick={open}>Open Transfer</Button>
      <Modal title="Transfer" open={isOpen} onClose={close}>
        <p>Transfer content here</p>
      </Modal>
    </>
  );
}

import { useSessionExpiry } from "@/hooks/use-session-expiry";
import { useSession } from "@/context/session-provider";

function SessionExpiryModal() {
  const { isSignedIn } = useSession();
  const { 
    isExpiryModalOpen, 
    expiresAtForModal, 
    onRenew, 
    isRenewing 
  } = useSessionExpiry(isSignedIn);

  if (!isExpiryModalOpen) return null;

  const timeRemaining = expiresAtForModal 
    ? Math.max(0, expiresAtForModal - Date.now()) 
    : 0;

  return (
    <Modal 
      title="Session Expiring" 
      open={isExpiryModalOpen}
      blockClose={true}
    >
      <p>Your session will expire in {timeRemaining}ms</p>
      <Button 
        onClick={onRenew} 
        isLoading={isRenewing}
      >
        Renew Session
      </Button>
    </Modal>
  );
}

import { useTokenConversion } from "@/hooks/use-token-conversion";
import { useSession } from "@/context/session-provider";

function TokenBalance({ token, amount }: { token: string; amount: string }) {
  const { user } = useSession();
  const { convertToUSD, conversionRate, isLoading } = useTokenConversion(
    user?.id || "",
    token
  );

  const usdValue = convertToUSD(amount);

  return (
    <div>
      <p>{amount} {token}</p>
      <p className="text-muted">
        {isLoading ? "Loading..." : `$${usdValue}`}
      </p>
      <p className="text-xs">Rate: ${conversionRate}</p>
    </div>
  );
}

import { useTokenSwap } from "@/hooks/use-token-swap";

function SwapForm() {
  const { user } = useSession();
  const [fromAmount, setFromAmount] = useState("");
  const [fromToken, setFromToken] = useState("BTC");
  const [toToken, setToToken] = useState("ETH");
  
  const { 
    convertTo, 
    conversionRateFrom, 
    commissionRate,
    minAmount 
  } = useTokenSwap(
    user?.id || "",
    fromToken,
    toToken,
    false
  );

  const toAmount = convertTo(fromAmount);

  return (
    <div>
      <Input 
        label="From"
        value={fromAmount}
        onChange={(e) => setFromAmount(e.target.value)}
      />
      <p>You will receive: {toAmount} {toToken}</p>
      <p>Rate: {conversionRateFrom}</p>
      <p>Fee: {commissionRate}%</p>
      <p>Min: {minAmount} {toToken}</p>
    </div>
  );
}

import { useSelector } from "@/hooks/use-selector";
import { Select } from "@/components";

function TokenSelect({ tokens }: { tokens: Token[] }) {
  const tokenOptions = tokens.reduce((acc, token) => {
    acc[token.id] = token;
    return acc;
  }, {} as Record<string, Token>);

  const { selectedRow, selectedIndex, change } = useSelector(
    tokenOptions,
    0,
    {
      onChange: () => console.log("Token changed"),
      onChangeReactive: (token) => {
        console.log("Selected:", token.symbol);
      }
    }
  );

  const selectOptions = Object.keys(tokenOptions).map(key => ({
    id: key,
    label: tokenOptions[key].symbol,
    icon: <TokenIcon token={tokenOptions[key]} />
  }));

  return (
    <div>
      <Select
        label="Select Token"
        properties={{
          selectedIndex,
          options: selectOptions,
          onChange: change
        }}
      />
      <p>Selected: {selectedRow.symbol}</p>
    </div>
  );
}

import { useIsMobile } from "@/hooks/use-is-mobile";

function ResponsiveComponent() {
  const isMobile = useIsMobile(); // default: 1024px

  return (
    <div>
      {isMobile ? (
        <MobileNavigation />
      ) : (
        <DesktopNavigation />
      )}
    </div>
  );
}

import useMounted from "@/hooks/use-mounted";

function ClientOnlyComponent() {
  const mounted = useMounted();

  if (!mounted) return null;

  return (
    <div>
      {/* Client-only content */}
      <BrowserAPIComponent />
    </div>
  );
}