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>
   );
 }