Add solution

app/pages/home/HomePage.tsx

@@ -1,7 +1,46 @@
+import { useQuery } from "@tanstack/react-query";
+import { TokenCard } from "./TokenCard";
+import { fetchApi } from "~/lib/fetch";
+import type { Erc20TokensListResponse } from "~/types/api";
+import { LoadingView } from "~/components/loading/LoadingView";
+import { ErrorView } from "~/components/error/ErrorView";
+import { useNavigate } from "react-router";
+import { useConnection } from "wagmi";
+import { useEffect } from "react";
+
 export function HomePage() {
+  const { data, isPending, error } = useQuery({
+    queryKey: ['tokens'],
+    queryFn: () => fetchApi<Erc20TokensListResponse>("https://api.next.code-camp.org/erc20-tokens")
+  });
+
+  const navigate = useNavigate();
+  const { address, isConnected } = useConnection();
+
+  useEffect(() => {
+    if (!isConnected) {
+      navigate('/status');
+    }
+  }, [isConnected, navigate]);
+
+
+  if (isPending) {
+    return <LoadingView />;
+  }
+
+  if (error) {
+    return <ErrorView />;
+  }
+
+  if (!address || !isConnected) {
+    return null;
+  }
+
   return (
-    <div>
-      <p>Hello Wagmi!</p>
+    <div className="flex flex-col gap-10">
+      {data.tokens.map(token => (
+        <TokenCard key={token.id} token={token} address={address} />
+      ))}
     </div>
   );
 }

app/pages/home/TokenCard.tsx

@@ -0,0 +1,128 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { erc20Abi, formatUnits, isAddress, parseUnits, type Address } from "viem";
+import { useReadContract, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import type { SimpleErc20Token } from "~/types/api";
+
+
+export function TokenCard({ token, address }: { token: SimpleErc20Token, address: Address }) {
+    const [isTransferSectionOpen, setIsTransferSectionOpen] = useState(false);
+
+    const [inputAddress, setInputAddress] = useState("");
+    const isAddressValid = isAddress(inputAddress);
+
+    const [inputAmount, setInputAmount] = useState("");
+    const isAmountValid = inputAmount && !isNaN(Number(inputAmount)) && Number(inputAmount) > 0;
+
+    const { data: balance, error: errorBalance } = useReadContract({
+        address: token.address,
+        abi: erc20Abi,
+        functionName: 'balanceOf',
+        args: [address]
+    });
+
+    const { data: decimals, error: errorDecimals } = useReadContract({
+        address: token.address,
+        abi: erc20Abi,
+        functionName: 'decimals'
+    });
+
+    const { data: hash, mutate: makeTransfer, isPending: isWaitingForUser, error: userError } = useWriteContract();
+    const { data: receipt, isPending, isFetching, error: receiptError } = useWaitForTransactionReceipt({
+        hash
+    })
+
+    const queryClient = useQueryClient();
+    useEffect(() => {
+        if (hash && receipt?.status === 'success') {
+            queryClient.invalidateQueries();
+        }
+    }, [receipt, hash, queryClient]);
+
+    function onSubmit(e) {
+        e.preventDefault();
+
+        if (!isAddressValid) {
+            toast.error('Invalid address.');
+            return;
+        }
+
+        if (!isAmountValid) {
+            toast.error('Invalid amount.');
+            return;
+        }
+
+        makeTransfer({
+            address: token.address,
+            abi: erc20Abi,
+            functionName: 'transfer',
+            args: [inputAddress, parseUnits(inputAmount, decimals!)]
+        })
+    }
+
+    if (errorBalance || errorDecimals) {
+        return <p>Cannot read balance</p>
+    }
+    
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">{token.name}</h3>
+            </div>
+            <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 gap-y-5">
+                <p className="opacity-60">Identifier</p>
+                <p className="col-span-2">{token.id}</p>
+
+                <p className="opacity-60">Symbol</p>
+                <p className="col-span-2">{token.symbol}</p>
+
+                <p className="opacity-60">Contract address</p>
+                <p className="col-span-2 break-all">{token.address}</p>
+
+                <p className="opacity-60">Balance</p>
+                <p className="col-span-2">
+                    {balance !== undefined && decimals !== undefined ? formatUnits(balance, decimals) : '...'} {token.symbol}
+                </p>
+            </div>
+
+            {isTransferSectionOpen && (
+                <div className="flex flex-col mt-10 mb-6 gap-3 rounded-xl p-3 lg:p-5 bg-amber-200/50">
+                    <div className="flex flex-row gap-3 justify-between items-center">
+                        <h4 className="font-semibold text-md w-full">Transfer funds</h4><span
+                            className="p-2 cursor-pointer" onClick={() => setIsTransferSectionOpen(false)}>×</span>
+                    </div>
+                    <form className="flex flex-col gap-3" onSubmit={onSubmit}>
+                        <input
+                            className="border border-gray-500 text-black rounded-md p-2"
+                            placeholder="Enter destination address" type="text" value={inputAddress} 
+                            onChange={e => setInputAddress(e.target.value)} />
+                        <input
+                            className="border border-gray-500 rounded-md p-2" placeholder="Enter amount"
+                            type="text" value={inputAmount} onChange={e => setInputAmount(e.target.value)} />
+
+                        <div className="flex flex-row justify-end">
+                            <button disabled={!isAddressValid || !isAmountValid || isWaitingForUser}
+                                className="bg-indigo-500 py-2 px-4 rounded-lg cursor-pointer text-white disabled:opacity-60">
+                                    Execute transfer
+                            </button>
+                        </div>
+                    </form>
+
+                    {isWaitingForUser && <p>Waiting for user...</p>}
+                    {(userError || receiptError) && <p>Failed to execute transfer.</p>}
+                    {(isPending && isFetching) && <p>Waiting for receipt...</p>}
+                    {receipt && <p>Status: {receipt.status}</p>}
+                </div>
+            )}
+
+            <div className="flex flex-row items-center justify-end gap-2 mt-6">
+                <a href={`https://etherscan.code-camp.org/address/${token.address}`} className="bg-emerald-600 py-2 px-4 rounded-lg text-white" target="_blank">View contract</a>
+                    
+                <button
+                    className="bg-blue-600 py-2 px-4 rounded-lg text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" 
+                    onClick={() => setIsTransferSectionOpen(!isTransferSectionOpen)}>Transfer</button>
+            </div>
+        </div>
+    );
+}

app/types/api.ts

@@ -0,0 +1,13 @@
+
+export type SimpleErc20Token = {
+    id: number;
+    name: string;
+    symbol: string;
+    address: `0x${string}`;
+}
+
+
+// https://api.next.code-camp.org/erc20-tokens
+export type Erc20TokensListResponse = {
+    tokens: Array<SimpleErc20Token>;
+}