Feat/dapp explorer (#2054)

* feat(extension): implement client side dapp explorer data

* feat(extension): replace base64 encoded images with asset files

Author: mchappell

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/index.tsx

@@ -1,31 +1,19 @@
 import React from 'react';
-import { Box } from '@input-output-hk/lace-ui-toolkit';
 import { IogCardClassic } from '../../../components/Card';
 import IogEmptyState from '../../../components/EmptyState';
 import { EDrawerAction, useDrawer } from '../../../components/ProjectDetail/drawer';
 import { useDAppFetcher } from '../../../services/api/d-app';
 import { maybeGetCategoryName } from '../../../services/helpers/apis-formatter';
 import { ISectionCardItem } from '../../../services/helpers/apis-formatter/types';
-import { Skeleton } from 'antd';
-import useInfiniteScroll from 'react-infinite-scroll-hook';
 import type { ISimpleViewContent } from './types';
 import './styles.scss';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@lace/common';
 
-// Defines pagination parameters for infinite scroll mechanism.
-const MAX_ITEMS_PER_PAGE = 20;
-
 const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, search }) => {
   const { dispatch } = useDrawer<ISectionCardItem>();
-  const {
-    data: dapps,
-    loading,
-    fetchMore,
-    hasNextPage
-  } = useDAppFetcher({
+  const { data: dapps, loading } = useDAppFetcher({
     category: maybeGetCategoryName(selectedCategory),
-    page: { offset: 0, limit: MAX_ITEMS_PER_PAGE },
     search
   });
   const analytics = useAnalyticsContext();
@@ -44,13 +32,6 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
 
   const showEmptyState = !loading && dapps?.length === 0;
 
-  const [infiniteScrollRef] = useInfiniteScroll({
-    loading,
-    hasNextPage,
-    onLoadMore: fetchMore,
-    rootMargin: '0px 0px 0px 0px'
-  });
-
   const renderCards = (dappsToRender: ISectionCardItem[]) =>
     dappsToRender.map((dapp, index) => (
       <div key={`card-${dapp.id}-${index}`} className="card-container">
@@ -75,11 +56,6 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
   return (
     <div className="iog-simple-view-content-container">
       <div className="iog-section-card-grid">{renderCards(dapps)}</div>
-      {(loading || hasNextPage) && (
-        <Box mt={'$24'} ref={infiniteScrollRef} data-testid="skeleton">
-          <Skeleton />
-        </Box>
-      )}
     </div>
   );
 };

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/api/categories/index.ts

@@ -1,16 +1,12 @@
 import { useState, useEffect, useMemo } from 'react';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
-import { cacheRequest } from '@views/browser/features/dapp/explorer/services/cache';
-import { logger } from '@lace/common';
+import { getCachedCategories } from '@views/browser/features/dapp/explorer/services/api/static/dataSource';
 
 type FetchCategoriesResult = {
   loading: boolean;
   data: string[];
 };
 
-const dappRadarCategoriesUrl = `${process.env.DAPP_RADAR_API_URL}/v2/dapps/categories`;
-const dappRadarApiKey = process.env.DAPP_RADAR_API_KEY;
-
 export const useCategoriesFetcher = (): FetchCategoriesResult => {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState<string[]>([]);
@@ -25,38 +21,12 @@ export const useCategoriesFetcher = (): FetchCategoriesResult => {
   );
 
   useEffect(() => {
-    (async () => {
-      if (!dappRadarApiKey) {
-        setLoading(false);
-        return;
-      }
-
-      let categories: string[] = [];
-      try {
-        categories = await cacheRequest(dappRadarCategoriesUrl, async () => {
-          const response = await window.fetch(dappRadarCategoriesUrl, {
-            headers: {
-              Accept: 'application/json',
-              'x-api-key': dappRadarApiKey
-            }
-          });
-
-          if (!response.ok) {
-            throw new Error('Unexpected response');
-          }
-
-          const result = (await response.json()) as { categories: string[] };
-          return result.categories;
-        });
-      } catch (error) {
-        logger.error('Failed to fetch dapp categories.', error);
-      }
+    setLoading(true);
 
-      categories = categories.filter((category) => !disallowedDappCategories.has(category));
+    const categories = getCachedCategories().filter((category) => !disallowedDappCategories.has(category));
 
-      setData(categories);
-      setLoading(false);
-    })();
+    setData(categories);
+    setLoading(false);
   }, [disallowedDappCategories]);
 
   return { loading, data };

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/api/d-app/index.ts

@@ -1,48 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ISectionCardItem } from '@views/browser/features/dapp/explorer/services/helpers/apis-formatter/types';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
-import { cacheRequest } from '@views/browser/features/dapp/explorer/services/cache';
 import { logger } from '@lace/common';
-
-const dappRadarApiUrl = process.env.DAPP_RADAR_API_URL;
-const dappRadarApiKey = process.env.DAPP_RADAR_API_KEY;
-
-export type PaginationInput = {
-  offset: number;
-  limit: number;
-};
-
-type DAppRadarDappItem = {
-  dappId: number;
-  name: string;
-  description: string;
-  fullDescription: string;
-  logo: string;
-  link: string;
-  website: string;
-  chains: string[];
-  categories: string[];
-  socialLinks: Array<{
-    title: string;
-    type: string;
-    url: string;
-  }>;
-  metrics: {
-    transactions: number;
-    transactionsPercentageChange: number;
-    uaw: number;
-    uawPercentageChange: number;
-    volume: number;
-    volumePercentageChange: number;
-    balance: number;
-    balancePercentageChange: number;
-  };
-  tags: Array<{
-    id: string;
-    name: string;
-    slug: string;
-  }>;
-};
+import { getCachedDapps, getLogoUrl } from '@views/browser/features/dapp/explorer/services/api/static/dataSource';
+import type { DAppRadarDappItem } from '@views/browser/features/dapp/explorer/services/api/static/dataSource';
 
 const mapResponse = (
   dapps: DAppRadarDappItem[],
@@ -59,35 +20,29 @@ const mapResponse = (
       categories: dapp.categories,
       title: dapp.name,
       image: {
-        src: dapp.logo,
+        src: getLogoUrl(dapp.logo),
         alt: dapp.name
       },
-      certificates: undefined,
       shortDescription: dapp.description,
       longDescription: dapp.fullDescription,
       email: '',
       link: dapp.website,
       companyWebsite: '',
-      screenshots: undefined,
       socialLinks: dapp.socialLinks
     }));
 
 type DAppFetcherParams = {
   category?: string;
   search?: string;
-  page?: PaginationInput;
   // todo: re-instate later if we see fit (TBD)
   _subcategory?: string;
 };
 
 const useDAppFetcher = ({
-  category,
-  page: { limit }
+  category
 }: DAppFetcherParams): {
   loading: boolean;
   data: ISectionCardItem[];
-  fetchMore: () => void;
-  hasNextPage: boolean;
 } => {
   const [data, setData] = useState<DAppRadarDappItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -111,59 +66,29 @@ const useDAppFetcher = ({
   }, [dappExplorerFeaturePayload]);
 
   useEffect(() => {
-    (async () => {
-      if (!dappRadarApiKey) {
-        setData([]);
-        setLoading(false);
-        return;
-      }
-
-      setLoading(true);
-      const searchParams = new URLSearchParams('');
-      searchParams.set('chain', 'cardano');
-      searchParams.set('range', '30d');
-      searchParams.set('top', '100');
-      if (category) {
-        searchParams.set('category', category);
-      }
-
-      let results: DAppRadarDappItem[] = [];
-      const url = `${dappRadarApiUrl}/v2/dapps/top/uaw?${searchParams.toString()}`;
-      try {
-        results = await cacheRequest(url, async () => {
-          const response = await window.fetch(url, {
-            headers: {
-              Accept: 'application/json',
-              'x-api-key': dappRadarApiKey
-            }
-          });
-
-          if (!response.ok) {
-            throw new Error('Unexpected response');
-          }
-
-          const parsedResponse = (await response.json()) as { results: DAppRadarDappItem[] };
-          return parsedResponse.results;
-        });
-      } catch (error) {
-        logger.error('Failed to fetch dapp list.', error);
-      }
-
-      setData(results);
-      setLoading(false);
-    })();
-  }, [category, limit]);
+    setLoading(true);
+
+    try {
+      const allDapps = getCachedDapps();
+      const filtered = allDapps.filter((dapp) => {
+        if (!category) {
+          return true;
+        }
+        return dapp.categories.includes(category);
+      });
+
+      setData(filtered);
+    } catch (error) {
+      logger.error('Failed to read cached dapp list.', error);
+      setData([]);
+    }
 
-  // eslint-disable-next-line unicorn/consistent-function-scoping
-  const fetchMore = () => {
-    logger.error('Pagination not implemented!');
-  };
+    setLoading(false);
+  }, [category]);
 
   return {
     loading,
-    data: mapResponse(data, disallowedDappIds, disallowedDappCategories),
-    fetchMore,
-    hasNextPage: false
+    data: mapResponse(data, disallowedDappIds, disallowedDappCategories)
   };
 };