From 81556d9f873db48d010b255395dd3393a861ddda Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <s@nextepoch.com>
Date: Fri, 6 Mar 2026 15:29:54 -0800
Subject: [PATCH 1/2] Add Profile box, NFT info, and ERC20 notes to create app
 homepage

- Add Profile search card and NFT info card to homepage alongside token search
- Cards display side-by-side on larger screens
- Specify ERC20 in token search title and description
- Add example links for token and profile lookups
- Note on profile page that only ERC20 tokens are included

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/create/src/pages/Profile.tsx |  3 +-
 apps/create/src/pages/Search.tsx  | 85 +++++++++++++++++++++++++++----
 2 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/apps/create/src/pages/Profile.tsx b/apps/create/src/pages/Profile.tsx
index 4cca475..58a98cc 100644
--- a/apps/create/src/pages/Profile.tsx
+++ b/apps/create/src/pages/Profile.tsx
@@ -299,7 +299,8 @@ export const Profile = () => {
           <CardHeader>
             <CardTitle>Tokens</CardTitle>
             <CardDescription>
-              Party tokens you hold. Open to view, buy, or sell on this app.
+              Party tokens you hold. Open to view, buy, or sell on this app. Only ERC20 tokens are
+              included.
             </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-6">
diff --git a/apps/create/src/pages/Search.tsx b/apps/create/src/pages/Search.tsx
index 94da5dc..4d20032 100644
--- a/apps/create/src/pages/Search.tsx
+++ b/apps/create/src/pages/Search.tsx
@@ -1,5 +1,5 @@
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router";
 
 import {
   Button,
@@ -12,39 +12,106 @@ import {
   Label
 } from "@party-forever/ui";
 
-interface FormData {
+interface TokenFormData {
   tokenAddress: string;
 }
 
+interface ProfileFormData {
+  address: string;
+}
+
 export const Search = () => {
   const navigate = useNavigate();
-  const { register, handleSubmit } = useForm<FormData>();
+  const tokenForm = useForm<TokenFormData>();
+  const profileForm = useForm<ProfileFormData>();
 
-  const onSubmit = (data: FormData) => {
+  const onTokenSubmit = (data: TokenFormData) => {
     navigate(`/${data.tokenAddress}`);
   };
 
+  const onProfileSubmit = (data: ProfileFormData) => {
+    navigate(`/profile/${data.address.trim()}`);
+  };
+
   return (
-    <div className="p-6 flex flex-col items-center gap-6">
+    <div className="p-6 flex flex-col lg:flex-row lg:items-start lg:justify-center gap-6">
       <Card className="w-full max-w-md">
         <CardHeader>
-          <CardTitle>View token</CardTitle>
+          <CardTitle>View ERC20 token</CardTitle>
           <CardDescription>
-            Enter a token address to buy, sell, or trade on Uniswap (Base)
+            Enter an ERC20 token address to buy, sell, or trade on Uniswap (Base)
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+          <form onSubmit={tokenForm.handleSubmit(onTokenSubmit)} className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
               <Label htmlFor="token-address">Token address</Label>
-              <Input id="token-address" placeholder="0x..." {...register("tokenAddress")} />
+              <Input
+                id="token-address"
+                placeholder="0x..."
+                {...tokenForm.register("tokenAddress")}
+              />
             </div>
             <Button type="submit" className="w-full">
               View token
             </Button>
           </form>
+          <div className="mt-4 pt-4 border-t border-border">
+            <p className="text-sm text-muted-foreground mb-2">Example</p>
+            <Link
+              to="/0x90e3b08e50bf662154964c6051ab3ce64024ff24"
+              className="text-sm text-primary underline hover:no-underline hover:text-primary/80 break-all"
+            >
+              0x90e3b08e50bf662154964c6051ab3ce64024ff24
+            </Link>
+          </div>
         </CardContent>
       </Card>
+
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Profile</CardTitle>
+          <CardDescription>
+            Enter a wallet address to view Party ERC20 token holdings
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={profileForm.handleSubmit(onProfileSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="profile-address">Wallet address</Label>
+              <Input
+                id="profile-address"
+                placeholder="0x..."
+                {...profileForm.register("address")}
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              View Profile
+            </Button>
+          </form>
+          <div className="mt-4 pt-4 border-t border-border">
+            <p className="text-sm text-muted-foreground mb-2">Example</p>
+            <Link
+              to="/profile/0xba5f2ffb721648Ee6a6c51c512A258ec62f1D6af"
+              className="text-sm text-primary underline hover:no-underline hover:text-primary/80 break-all"
+            >
+              0xba5f2ffb721648Ee6a6c51c512A258ec62f1D6af
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>NFTs</CardTitle>
+          <CardDescription>
+            Party NFTs are pinned on IPFS and available to view and trade via OpenSea.
+          </CardDescription>
+        </CardHeader>
+      </Card>
     </div>
   );
 };

From 7d80d84e620a87227d1b4fa43620f6a0c9aeced9 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <s@nextepoch.com>
Date: Fri, 6 Mar 2026 15:33:05 -0800
Subject: [PATCH 2/2] updates

---
 apps/create/src/App.tsx                | 9 ---------
 apps/create/src/pages/TokenDetails.tsx | 7 ++++++-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/create/src/App.tsx b/apps/create/src/App.tsx
index ee7d5c5..300cc93 100644
--- a/apps/create/src/App.tsx
+++ b/apps/create/src/App.tsx
@@ -18,15 +18,6 @@ const App = () => {
           Party Create
         </NavLink>
         <LandingLink />
-        <NavLink
-          to="/"
-          end
-          className={({ isActive }) =>
-            `party-nav-link text-sm font-medium ${isActive ? "active text-[#00d4ff]" : ""}`
-          }
-        >
-          Search
-        </NavLink>
         {address && (
           <NavLink
             to={`/profile/${address}`}
diff --git a/apps/create/src/pages/TokenDetails.tsx b/apps/create/src/pages/TokenDetails.tsx
index 422f5ce..ab532a8 100644
--- a/apps/create/src/pages/TokenDetails.tsx
+++ b/apps/create/src/pages/TokenDetails.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { parseEther } from "viem";
 import { useAccount } from "wagmi";
 
@@ -53,6 +54,7 @@ const ERC20_BALANCE_ABI = [
 export const TokenDetails = () => {
   const { address } = useParams<{ address: string }>();
   const { address: userAddress } = useAccount();
+  const { openConnectModal } = useConnectModal();
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -215,7 +217,10 @@ export const TokenDetails = () => {
                 >
                   Sell
                 </Button>
-                <Button className="flex-1" onClick={() => setBuyModalOpen(true)}>
+                <Button
+                  className="flex-1"
+                  onClick={() => (userAddress ? setBuyModalOpen(true) : openConnectModal?.())}
+                >
                   Buy
                 </Button>
               </div>