add other hubs to explorer

src/app/[identifier]/page.tsx

@@ -3,6 +3,7 @@ import Modal from '@/components/modal-component';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { useClipboard } from '@/hooks/useClipboard';
+import { capitalizeNickname } from '@/lib/helpers';
 import { fetchCastAndFidData } from '@/lib/utils';
 import { CopyCheckIcon, CopyIcon, UserIcon } from 'lucide-react';
 import Link from 'next/link';
@@ -13,6 +14,12 @@ interface ResponseProps {
   params: { identifier: string };
 }
 
+const hubs = [
+  { shortname: 'hoyt', url: 'https://hoyt.farcaster.xyz:2281' },
+  { shortname: 'Neynar hub', url: 'https://hub-api.neynar.com' },
+  { shortname: 'lamia', url: 'https://lamia.farcaster.xyz:2281' },
+];
+
 const isNumeric = (str: string): boolean => {
   return !isNaN(Number(str)) && !isNaN(parseFloat(str)) && !/^0x/.test(str);
 };
@@ -42,6 +49,7 @@ export default function Page({ params }: ResponseProps) {
   const [modalTitle, setModalTitle] = useState<string>('');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [showOtherHubs, setShowOtherHubs] = useState(false);
 
   const fetchData = async () => {
     setLoading(true);
@@ -138,10 +146,10 @@ export default function Page({ params }: ResponseProps) {
     neynarCastHubMissing,
   } = data ?? {};
 
-  const hubs = data?.hubData ?? [];
-  const nemes = hubs[0] ?? {};
-  const neynarHub = hubs[1] ?? {};
-  const { author: nemesAuthor, cast: nemesCast } = nemes || {};
+  const hubsData = data?.hubData ?? [];
+  const hoyt = hubsData[0] ?? {};
+  const neynarHub = hubsData[1] ?? {};
+  const { author: hoytAuthor, cast: hoytCast } = hoyt || {};
   const { author: neynarHubAuthor, cast: neynarHubCast } = neynarHub || {};
   const { author: warpcastAuthor, cast: warpcastCast } = warpcast || {};
   const { author: neynarAuthor, cast: neynarCast } = neynar || {};
@@ -167,7 +175,7 @@ export default function Page({ params }: ResponseProps) {
 
     return (
       <button onClick={() => openModal(label, data, missingObjects)}>
-        <Card className="hover:bg-slate-100 rounded-lg relative border-black flex flex-col items-center justify-center">
+        <Card className="min-w-36 hover:bg-slate-100 rounded-lg relative border-black flex flex-col items-center justify-center">
           <CardHeader className="text-center relative w-full">
             {label}
           </CardHeader>
@@ -237,13 +245,13 @@ export default function Page({ params }: ResponseProps) {
               )}
               {renderHeader('Warpcast API', warpcastCast, warpcastCastMissing)}
               {renderHeader(
-                'Warpcast Hub (Hoyt)',
-                nemesAuthor,
+                capitalizeNickname(hoyt.name),
+                hoytAuthor,
                 warpcastAuthorHubMissing
               )}
               {renderHeader(
-                'Warpcast Hub (Hoyt)',
-                nemesCast,
+                capitalizeNickname(hoyt.name),
+                hoytCast,
                 warpcastCastHubMissing
               )}
               {renderHeader(
@@ -257,6 +265,29 @@ export default function Page({ params }: ResponseProps) {
             </>
           )}
         </div>
+
+        {!showOtherHubs && (
+          <Button
+            className="mt-10 min-h-10 px-4 py-2 bg-purple-500 text-white hover:bg-purple-700 rounded-lg"
+            onClick={() => setShowOtherHubs(true)}
+          >
+            Check other hubs
+          </Button>
+        )}
+
+        {showOtherHubs && (
+          <div className="flex md:flex-row flex-col items-center my-5">
+            {hubs.slice(2).map((hub, index) => (
+              <div key={index}>
+                {renderHeader(
+                  `${capitalizeNickname(hub.shortname)}`,
+                  data?.hubData?.[index + 2],
+                  []
+                )}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </>
   );

src/constants.ts

@@ -6,10 +6,9 @@ export const seo = {
 };
 
 export const hubs = [
-  // {"shortname": "nemes", "url": "https://nemes.farcaster.xyz:2281"},
   { shortname: 'hoyt', url: 'https://hoyt.farcaster.xyz:2281' },
   { shortname: 'Neynar hub', url: 'https://hub-api.neynar.com' },
-  // {"shortname": "lamia", "url": "https://lamia.farcaster.xyz:2281"},
+  { shortname: 'lamia', url: 'https://lamia.farcaster.xyz:2281' },
 ];
 
 export const neynarHub = {

src/lib/utils.ts

@@ -5,7 +5,7 @@ import { hubs, tokenBearer } from '@/constants';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-interface HubType {
+export interface HubType {
   shortname: string;
   url: string;
 }