Merge pull request #9 from oasisprotocol/mz/explore

buberdds · web-flow · commit b1a44a743bb9 · 2025-06-12T13:45:41.000+02:00
Render ROFL apps in Explore page
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "lucide-react": "^0.514.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^7.6.2",
     "viem": "^2.31.0",
     "wagmi": "^2.15.6"
diff --git a/src/components/AppStatusIcon/index.tsx b/src/components/AppStatusIcon/index.tsx
@@ -0,0 +1,50 @@
+import { type FC } from 'react';
+import { CircleCheck, CircleMinus, CirclePause } from 'lucide-react';
+
+type AppStatusTypes = 'active' | 'inactive' | 'removed';
+
+function getRoflAppStatus(
+  hasActiveInstances: boolean,
+  removed: boolean
+): AppStatusTypes {
+  if (removed) return 'removed';
+  return hasActiveInstances ? 'active' : 'inactive';
+}
+
+type AppStatusIconProps = {
+  hasActiveInstances: boolean;
+  removed: boolean;
+};
+
+export const AppStatusIcon: FC<AppStatusIconProps> = ({
+  hasActiveInstances,
+  removed,
+}) => {
+  const status = getRoflAppStatus(hasActiveInstances, removed);
+  const getStatusIcon = (status: AppStatusTypes) => {
+    switch (status) {
+      case 'active':
+        return (
+          <CircleCheck
+            className="h-5 w-5"
+            style={{ color: 'var(--success)' }}
+          />
+        );
+      case 'inactive':
+        return (
+          <CirclePause
+            className="h-5 w-5"
+            style={{ color: 'var(--warning)' }}
+          />
+        );
+      case 'removed':
+        return (
+          <CircleMinus className="h-5 w-5" style={{ color: 'var(--error)' }} />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return <>{getStatusIcon(status)}</>;
+};
diff --git a/src/components/EmptyState/index.tsx b/src/components/EmptyState/index.tsx
@@ -4,6 +4,7 @@ import {
   CardFooter,
   CardHeader,
 } from '@oasisprotocol/ui-library/src/components/ui/card';
+import { useAccount } from 'wagmi';
 
 interface EmptyStateProps {
   title: string;
@@ -12,16 +13,22 @@ interface EmptyStateProps {
 }
 
 export function EmptyState({ title, description, children }: EmptyStateProps) {
+  const { isConnected } = useAccount();
+
   return (
     <Card className="h-full rounded-md border-0 flex justify-center p-8 gap-2">
       <CardHeader className="text-xl font-semibold text-white text-center">
-        {title}
+        {isConnected ? title : 'Connect is not connected'}
       </CardHeader>
       <CardContent className="max-w-[60%] mx-auto text-gray-400 text-sm text-balance text-center leading-relaxed">
-        {description}
+        {isConnected
+          ? description
+          : 'Please connect your wallet to to gain access to the view.'}
       </CardContent>
 
-      <CardFooter className="flex justify-center pt-2">{children}</CardFooter>
+      <CardFooter className="flex justify-center pt-2">
+        {isConnected ? children : null}
+      </CardFooter>
     </Card>
   );
 }
diff --git a/src/components/RainbowKitConnectButton/index.tsx b/src/components/RainbowKitConnectButton/index.tsx
@@ -12,6 +12,7 @@ import {
 import { AccountAvatar } from '../AccountAvatar';
 import { useDisconnect } from 'wagmi';
 import { useIsMobile } from '@oasisprotocol/ui-library/src/hooks/use-mobile';
+import { useNavigate } from 'react-router-dom';
 
 const TruncatedAddress: FC<{ address: string; className?: string }> = ({
   address,
@@ -32,6 +33,13 @@ interface Props {
 export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
   const isMobile = useIsMobile();
   const { disconnect } = useDisconnect();
+  const navigate = useNavigate();
+
+  const handleDisconnect = () => {
+    disconnect();
+    navigate('/');
+    onMobileClose?.();
+  };
 
   return (
     <ConnectButton.Custom>
@@ -119,10 +127,7 @@ export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
                     <Button
                       variant="ghost"
                       className="w-full justify-start rounded-md p-2.5 h-11"
-                      onClick={() => {
-                        disconnect();
-                        onMobileClose?.();
-                      }}
+                      onClick={handleDisconnect}
                     >
                       <span className="text-destructive text-base font-medium leading-6">
                         Sign out
@@ -170,7 +175,7 @@ export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
                         Switch network
                       </DropdownMenuItem>
                       <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={() => disconnect()}>
+                      <DropdownMenuItem onClick={handleDisconnect}>
                         Disconnect
                       </DropdownMenuItem>
                     </DropdownMenuContent>
diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
@@ -1,6 +1,6 @@
 import { useAccount } from 'wagmi';
 
-export function useNetwork(): 'mainnet' | 'testnet' {
+export function useNetwork(fallback): 'mainnet' | 'testnet' {
   const { chainId } = useAccount();
 
   if (chainId === 23294) {
@@ -11,5 +11,9 @@ export function useNetwork(): 'mainnet' | 'testnet' {
     return 'testnet';
   }
 
+  if (fallback) {
+    return fallback;
+  }
+
   throw new Error(`Unsupported chainId: ${chainId}.`);
 }
diff --git a/src/pages/CreateApp/index.tsx b/src/pages/CreateApp/index.tsx
@@ -1,5 +1,6 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
+import { MainLayout } from '../../components/Layout/MainLayout';
 
 export const Create: FC = () => {
-  return <>Create</>;
+  return <MainLayout>Create</MainLayout>;
 };
diff --git a/src/pages/Explore/ExploreAppCard.tsx b/src/pages/Explore/ExploreAppCard.tsx
@@ -0,0 +1,53 @@
+import { type FC } from 'react';
+import { type RoflApp } from '../../nexus/api';
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '@oasisprotocol/ui-library/src/components/ui/card';
+import { ArrowUpRight } from 'lucide-react';
+import { AppStatusIcon } from '../../components/AppStatusIcon';
+
+type ExploreAppCardProps = {
+  app: RoflApp;
+  network: string;
+};
+
+export const ExploreAppCard: FC<ExploreAppCardProps> = ({ app, network }) => {
+  return (
+    <Card className="rounded-md">
+      <CardHeader className="">
+        <div className="flex items-start justify-between">
+          <h3 className="text-lg font-semibold text-foreground pr-2 break-all">
+            <>{app.metadata?.['net.oasis.rofl.name']}</>
+          </h3>
+          <AppStatusIcon
+            hasActiveInstances={!!app.num_active_instances}
+            removed={app.removed}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <p className="text-gray-400 text-sm leading-relaxed">
+          <>{app.metadata?.['net.oasis.rofl.description']}</>
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="secondary" className="w-full" asChild>
+          <a
+            href={`https://explorer.oasis.io/${network}/sapphire/rofl/app/${app.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="flex items-center justify-center">
+              <span>View details</span>
+              <ArrowUpRight className="ml-2 h-4 w-4" />
+            </span>
+          </a>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
diff --git a/src/pages/Explore/index.tsx b/src/pages/Explore/index.tsx
@@ -1,11 +1,76 @@
-import type { FC } from 'react';
+import { type FC, useEffect } from 'react';
 import { MainLayout } from '../../components/Layout/MainLayout';
 import { ExploreEmptyState } from './emptyState';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useNetwork } from '../../hooks/useNetwork';
+import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton';
+import { ExploreAppCard } from './ExploreAppCard';
+import {
+  getGetRuntimeRoflAppsQueryKey,
+  GetRuntimeRoflApps,
+} from '../../nexus/api';
+import { useInView } from 'react-intersection-observer';
+
+const pageLimit = 18;
 
 export const Explore: FC = () => {
+  const { ref, inView } = useInView();
+  const network = useNetwork('mainnet');
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isFetched,
+  } = useInfiniteQuery({
+    queryKey: [...getGetRuntimeRoflAppsQueryKey(network, 'sapphire')],
+    queryFn: async ({ pageParam = 0 }) => {
+      const result = await GetRuntimeRoflApps(network, 'sapphire', {
+        limit: pageLimit,
+        offset: pageParam,
+      });
+      return result;
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      const totalFetched = allPages.length * pageLimit;
+      return totalFetched < lastPage.data.total_count
+        ? totalFetched
+        : undefined;
+    },
+  });
+
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, inView]);
+
+  const allRoflApps = data?.pages.flatMap((page) => page.data.rofl_apps) || [];
+  const isEmpty = isFetched && allRoflApps.length === 0;
+
   return (
     <MainLayout>
-      <ExploreEmptyState />
+      {isEmpty && <ExploreEmptyState />}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {isLoading &&
+          Array.from({ length: pageLimit }).map((_, index) => (
+            <Skeleton key={index} className="w-full h-[200px]" />
+          ))}
+
+        {allRoflApps.map((app) => (
+          <ExploreAppCard key={app.id} app={app} network={network} />
+        ))}
+
+        {isFetchingNextPage &&
+          Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={`next-page-${index}`} className="w-full h-[200px]" />
+          ))}
+      </div>
+
+      <div ref={ref} className="h-10 w-full" />
     </MainLayout>
   );
 };
diff --git a/ui-library b/ui-library
@@ -1 +1 @@
-Subproject commit 56c8d4c75d583a574ac4d6520080c500a6aad989
+Subproject commit f6d4225bf31218bd81f8d9f116f9f2b9ef3c5992
diff --git a/yarn.lock b/yarn.lock
@@ -5268,6 +5268,11 @@ react-hook-form@^7.56.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.57.0.tgz#d0bb0c84060c6b9282d99c64566ec919dfca9409"
   integrity sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==
 
+react-intersection-observer@^9.16.0:
+  version "9.16.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz#7376d54edc47293300961010844d53b273ee0fb9"
+  integrity sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { useAccount } from 'wagmi';`
`2`	`2`
`3`		`-export function useNetwork(): 'mainnet' \| 'testnet' {`
	`3`	`+export function useNetwork(fallback): 'mainnet' \| 'testnet' {`
`4`	`4`	`const { chainId } = useAccount();`
`5`	`5`
`6`	`6`	`if (chainId === 23294) {`
`@@ -11,5 +11,9 @@ export function useNetwork(): 'mainnet' \| 'testnet' {`
`11`	`11`	`return 'testnet';`
`12`	`12`	`}`
`13`	`13`
	`14`	`+ if (fallback) {`
	`15`	`+ return fallback;`
	`16`	`+ }`
	`17`	`+`
`14`	`18`	throw new Error(`Unsupported chainId: ${chainId}.`);
`15`	`19`	`}`