Code Examples

'use client'

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { Button } from '@/components/ui/button'

export function WalletConnect() {
  const { address, isConnected } = useAccount()
  const { connect, connectors } = useConnect()
  const { disconnect } = useDisconnect()

  if (isConnected) {
    return (
      <div className="space-y-2">
        <p>Connected: {address}</p>
        <Button onClick={() => disconnect()}>
          Disconnect
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-2">
      {connectors.map((connector) => (
        <Button
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          Connect {connector.name}
        </Button>
      ))}
    </div>
  )
}

import { ethers } from 'ethers';

async function connectWallet() {
  if (typeof window.ethereum === 'undefined') {
    alert('Please install MetaMask!');
    return;
  }

  try {
    // Request account access
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts'
    });

    // Create provider
    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();

    const address = await signer.getAddress();
    const balance = await provider.getBalance(address);

    console.log('Connected:', address);
    console.log('Balance:', ethers.formatEther(balance), 'PAX');

    return { provider, signer, address };
  } catch (error) {
    console.error('Error connecting wallet:', error);
  }
}

// Usage
const wallet = await connectWallet();

import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
import { WagmiConfig } from 'wagmi'
import { paxeer } from './chains'

const projectId = 'YOUR_PROJECT_ID'

const metadata = {
  name: 'My dApp',
  description: 'My dApp description',
  url: 'https://myapp.com',
  icons: ['https://myapp.com/icon.png']
}

const chains = [paxeer]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

createWeb3Modal({ wagmiConfig, projectId, chains })

function App() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <YourApp />
    </WagmiConfig>
  )
}

'use client'

import { useSendTransaction } from 'wagmi'
import { parseEther } from 'viem'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useState } from 'react'

export function SendPax() {
  const [to, setTo] = useState('')
  const [amount, setAmount] = useState('')
  const { sendTransaction, data, isPending, isSuccess } = useSendTransaction()

  const handleSend = () => {
    sendTransaction({
      to: to as `0x${string}`,
      value: parseEther(amount),
    })
  }

  return (
    <div className="space-y-4">
      <Input
        placeholder="Recipient address (0x...)"
        value={to}
        onChange={(e) => setTo(e.target.value)}
      />
      <Input
        placeholder="Amount (PAX)"
        type="number"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <Button 
        onClick={handleSend} 
        disabled={isPending || !to || !amount}
      >
        {isPending ? 'Sending...' : 'Send PAX'}
      </Button>
      {isSuccess && (
        <p className="text-green-600">
          Transaction: {data}
        </p>
      )}
    </div>
  )
}

import { ethers } from 'ethers';

async function sendTransaction(toAddress, amount) {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  const tx = {
    to: toAddress,
    value: ethers.parseEther(amount)
  };

  try {
    const transaction = await signer.sendTransaction(tx);
    console.log('Transaction sent:', transaction.hash);

    // Wait for confirmation
    const receipt = await transaction.wait();
    console.log('Transaction confirmed:', receipt.hash);

    return receipt;
  } catch (error) {
    console.error('Error sending transaction:', error);
    throw error;
  }
}

// Usage
await sendTransaction('0x...', '1.5');

'use client'

import { useReadContract } from 'wagmi'
import { formatUnits } from 'viem'

const ERC20_ABI = [
  {
    name: 'balanceOf',
    type: 'function',
    stateMutability: 'view',
    inputs: [{ name: 'owner', type: 'address' }],
    outputs: [{ name: 'balance', type: 'uint256' }],
  },
  {
    name: 'decimals',
    type: 'function',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: '', type: 'uint8' }],
  },
] as const

export function TokenBalance({ 
  address, 
  tokenAddress 
}: { 
  address: string; 
  tokenAddress: string 
}) {
  const { data: balance, isLoading: balanceLoading } = useReadContract({
    address: tokenAddress as `0x${string}`,
    abi: ERC20_ABI,
    functionName: 'balanceOf',
    args: [address as `0x${string}`],
  })

  const { data: decimals } = useReadContract({
    address: tokenAddress as `0x${string}`,
    abi: ERC20_ABI,
    functionName: 'decimals',
  })

  if (balanceLoading) return <div>Loading...</div>

  const formattedBalance = balance && decimals 
    ? formatUnits(balance, decimals)
    : '0'

  return (
    <div>
      Balance: {formattedBalance} tokens
    </div>
  )
}

'use client'

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
import { parseUnits } from 'viem'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useState } from 'react'

const ERC20_ABI = [
  {
    name: 'transfer',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [
      { name: 'to', type: 'address' },
      { name: 'amount', type: 'uint256' }
    ],
    outputs: [{ name: '', type: 'bool' }],
  },
] as const

export function TransferTokens({ tokenAddress }: { tokenAddress: string }) {
  const [to, setTo] = useState('')
  const [amount, setAmount] = useState('')

  const { 
    data: hash,
    writeContract,
    isPending 
  } = useWriteContract()

  const { isLoading: isConfirming, isSuccess } = 
    useWaitForTransactionReceipt({ hash })

  async function handleTransfer() {
    writeContract({
      address: tokenAddress as `0x${string}`,
      abi: ERC20_ABI,
      functionName: 'transfer',
      args: [
        to as `0x${string}`,
        parseUnits(amount, 18)
      ],
    })
  }

  return (
    <div className="space-y-4">
      <Input
        placeholder="Recipient address"
        value={to}
        onChange={(e) => setTo(e.target.value)}
      />
      <Input
        placeholder="Amount"
        type="number"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <Button 
        onClick={handleTransfer}
        disabled={isPending || isConfirming || !to || !amount}
      >
        {isPending || isConfirming ? 'Confirming...' : 'Transfer'}
      </Button>
      {isSuccess && (
        <div className="text-green-600">
          Transfer successful! 
          <a href={`https://paxscan.paxeer.app/tx/${hash}`} target="_blank">
            View transaction
          </a>
        </div>
      )}
    </div>
  )
}

import { ethers } from 'ethers';

const ERC20_ABI = [
  "function balanceOf(address owner) view returns (uint256)",
  "function transfer(address to, uint256 amount) returns (bool)",
  "function decimals() view returns (uint8)"
];

async function interactWithToken(tokenAddress) {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  // Create contract instance
  const contract = new ethers.Contract(
    tokenAddress,
    ERC20_ABI,
    signer
  );

  // Read balance
  const address = await signer.getAddress();
  const balance = await contract.balanceOf(address);
  const decimals = await contract.decimals();
  console.log('Balance:', ethers.formatUnits(balance, decimals));

  // Transfer tokens
  const tx = await contract.transfer(
    '0xRecipientAddress',
    ethers.parseUnits('10', decimals)
  );

  console.log('Transaction sent:', tx.hash);
  const receipt = await tx.wait();
  console.log('Transfer confirmed:', receipt.hash);

  return receipt;
}

// Usage
await interactWithToken('0xTokenAddress');

import { useWatchContractEvent } from 'wagmi'
import { useState } from 'react'

const ERC20_ABI = [
  {
    name: 'Transfer',
    type: 'event',
    inputs: [
      { indexed: true, name: 'from', type: 'address' },
      { indexed: true, name: 'to', type: 'address' },
      { indexed: false, name: 'value', type: 'uint256' }
    ],
  },
] as const

export function useTokenTransfers(tokenAddress: string) {
  const [transfers, setTransfers] = useState<any[]>([])

  useWatchContractEvent({
    address: tokenAddress as `0x${string}`,
    abi: ERC20_ABI,
    eventName: 'Transfer',
    onLogs(logs) {
      setTransfers(prev => [...prev, ...logs])
    },
  })

  return transfers
}

import { ethers } from 'ethers';

async function listenToTransfers(tokenAddress) {
  const provider = new ethers.JsonRpcProvider(
    'https://public-rpc.paxeer.app/rpc'
  );

  const contract = new ethers.Contract(
    tokenAddress,
    ['event Transfer(address indexed from, address indexed to, uint256 value)'],
    provider
  );

  // Listen to Transfer events
  contract.on('Transfer', (from, to, value, event) => {
    console.log('Transfer detected:');
    console.log('From:', from);
    console.log('To:', to);
    console.log('Value:', ethers.formatEther(value));
    console.log('Transaction:', event.log.transactionHash);
  });

  // Query past events
  const filter = contract.filters.Transfer();
  const events = await contract.queryFilter(filter, -10000);
  
  console.log('Recent transfers:', events.length);
}