@talak-web3/hooks

React hooks for talak-web3. Build Web3-enabled React applications with ease.

Installation

npm install @talak-web3/hooks
# or
yarn add @talak-web3/hooks
# or
pnpm add @talak-web3/hooks

Hooks

useWallet

Manage wallet connections and state.

import { useWallet } from '@talak-web3/hooks';

function WalletButton() {
  const { connect, disconnect, address, isConnected, chainId } = useWallet();

  return (
    <button onClick={isConnected ? disconnect : connect}>
      {isConnected ? `${address.slice(0, 6)}...${address.slice(-4)}` : 'Connect Wallet'}
    </button>
  );
}

useSIWE

Sign-In with Ethereum authentication.

import { useSIWE } from '@talak-web3/hooks';

function LoginButton() {
  const { signIn, signOut, isAuthenticated, user } = useSIWE({
    domain: 'myapp.com',
    uri: 'https://myapp.com/login',
  });

  return (
    <button onClick={isAuthenticated ? signOut : signIn}>
      {isAuthenticated ? `Welcome ${user.address}` : 'Sign In'}
    </button>
  );
}

useContract

Interact with smart contracts.

import { useContract } from '@talak-web3/hooks';

function TokenBalance() {
  const { read, write } = useContract({
    address: '0x1111111111111111111111111111111111111111',
    abi: ERC20_ABI,
  });

  const { data: balance } = read('balanceOf', [address]);

  return <div>Balance: {balance?.toString()}</div>;
}

useBalance

Fetch native token balance.

import { useBalance } from '@talak-web3/hooks';

function Balance() {
  const { data: balance, isLoading } = useBalance({
    address: '0x1111111111111111111111111111111111111111',
  });

  return <div>{isLoading ? 'Loading...' : `${balance} ETH`}</div>;
}

License

MIT