Use useSonarEntities with entity dropdown in sale phase

src/pages/Home.tsx

@@ -1,19 +1,19 @@
 import { useState, useEffect } from "react";
 import { ConnectKitButton } from "connectkit";
-import { useSonarAuth, useSonarEntity, useSonarEntities } from "@echoxyz/sonar-react";
-import { saleUUID, sonarHomeURL, sonarConfig } from "../config";
+import { useSonarAuth, useSonarEntities } from "@echoxyz/sonar-react";
+import { saleUUID, sonarConfig } from "../config";
 import { useAccount } from "wagmi";
 import CommitCard from "../components/sale/CommitCard";
 import { SaleEligibility } from "@echoxyz/sonar-core";
 import { AuthenticationSection } from "../components/auth/AuthenticationSection";
 import { EntityCard } from "../components/entity/EntityCard";
-import { NotEligibleMessage } from "../components/sale/NotEligibleMessage";
 import { EntitiesList } from "../components/registration/EntitiesList";
 import { EligibilityResults } from "../components/registration/EligibilityResults";
 import { CommitmentDataCard } from "../components/sale/CommitmentDataCard";
 
 export function Home() {
   const [saleIsLive, setSaleIsLive] = useState(false);
+  const [selectedEntityId, setSelectedEntityId] = useState<string | undefined>(undefined);
 
   // Load sale state from localStorage
   useEffect(() => {
@@ -34,7 +34,7 @@ export function Home() {
   const { address } = useAccount();
   const { login, authenticated, logout, ready } = useSonarAuth();
 
-  // Registration data
+  // Entities data
   const {
     loading: entitiesLoading,
     entities,
@@ -45,17 +45,10 @@ export function Home() {
 
   const eligibleEntities = entities?.filter((entity) => entity.SaleEligibility === SaleEligibility.ELIGIBLE) || [];
 
-  // Sale data
-  const {
-    loading: entityLoading,
-    entity,
-    error: entityError,
-  } = useSonarEntity({
-    saleUUID: saleUUID,
-    walletAddress: address,
-  });
+  // Resolve the selected entity for the sale phase (default to first entity)
+  const selectedEntity = entities?.find((e) => e.EntityID === selectedEntityId) ?? entities?.[0];
 
-  const isEligible = entity && entity.SaleEligibility === SaleEligibility.ELIGIBLE;
+  const isEligible = selectedEntity && selectedEntity.SaleEligibility === SaleEligibility.ELIGIBLE;
 
   const EntitySection = () => {
     if (!address || !authenticated) {
@@ -67,30 +60,30 @@ export function Home() {
       );
     }
 
-    if (entityLoading) {
+    if (entitiesLoading) {
       return (
         <div className="flex flex-col gap-2 bg-gray-50 rounded-lg p-6 w-full">
           <p className="text-gray-600">Loading your entity information...</p>
         </div>
       );
     }
 
-    if (entityError) {
+    if (entitiesError) {
       return (
         <div className="flex flex-col gap-2 bg-red-50 border border-red-200 rounded-lg p-6 w-full">
           <p className="text-red-800 font-medium">Error</p>
-          <p className="text-red-700">{entityError.message}</p>
+          <p className="text-red-700">{entitiesError.message}</p>
         </div>
       );
     }
 
-    if (!entity) {
+    if (!entities || entities.length === 0) {
       return (
         <div className="flex flex-col gap-2 bg-yellow-50 border border-yellow-200 rounded-lg p-6 w-full">
           <div>
             <p className="text-yellow-800 font-medium">No Entity Found</p>
             <p className="text-yellow-700">
-              No entity found for this wallet. Please link your wallet on Sonar to continue.
+              No entity found for this account.
             </p>
           </div>
           <div>
@@ -109,19 +102,40 @@ export function Home() {
 
     return (
       <div className="flex flex-col gap-2 w-full">
-        <EntityCard entity={entity} />
-        <p className="text-gray-700 text-sm">
-          You can switch entity by connecting a wallet that is linked to one of your other entities on{" "}
-          <a
-            href={`${sonarConfig.frontendURL}/sonar/${saleUUID}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 hover:text-blue-800 underline"
-          >
-            Sonar
-          </a>
-          .
-        </p>
+        {entities.length > 1 && (
+          <div className="flex flex-col gap-1">
+            <label htmlFor="entity-select" className="text-sm font-medium text-gray-700">
+              Select Sonar Entity
+            </label>
+            <select
+              id="entity-select"
+              value={selectedEntity?.EntityID ?? ""}
+              onChange={(e) => setSelectedEntityId(e.target.value)}
+              className="border border-gray-300 rounded-lg px-3 py-2 text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              {entities.map((e) => (
+                <option key={e.EntityID} value={e.EntityID}>
+                  {e.Label || "Unknown Entity"}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        {selectedEntity && <EntityCard entity={selectedEntity} />}
+        {selectedEntity && (
+          <p className="text-gray-700 text-sm">
+            You can manage and add entities on{" "}
+            <a
+              href={`${sonarConfig.frontendURL}/sonar/${saleUUID}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-800 underline"
+            >
+              Sonar
+            </a>
+            .
+          </p>
+        )}
       </div>
     );
   };
@@ -207,11 +221,11 @@ export function Home() {
             <div className="flex flex-col gap-8">
               {/* Connection Buttons */}
               <AuthenticationSection ready={ready} authenticated={authenticated} login={login} logout={logout} />
+              <ConnectKitButton />
 
               {/* Entity Information */}
               <div className="flex flex-col gap-4">
                 <h2 className="text-xl font-semibold text-gray-900">Your Entity Information</h2>
-                <ConnectKitButton />
                 <EntitySection />
               </div>
 
@@ -220,16 +234,13 @@ export function Home() {
                 <div className="flex flex-col gap-4">
                   <h2 className="text-xl font-semibold text-gray-900">Commit funds</h2>
                   <CommitCard
-                    entityID={entity.EntityID}
-                    saleSpecificEntityID={entity.SaleSpecificEntityID}
+                    entityID={selectedEntity.EntityID}
+                    saleSpecificEntityID={selectedEntity.SaleSpecificEntityID}
                     walletAddress={address}
                   />
                 </div>
               )}
 
-              {/* Not Eligible Message */}
-              {entity && !isEligible && <NotEligibleMessage sonarHomeURL={sonarHomeURL.href} />}
-
               {/* Commitment Data Card */}
               <div className="flex flex-col gap-4">
                 <h2 className="text-xl font-semibold text-gray-900">Sale Commitment Data</h2>