chore: make the dapp explorer work and render mocked data

apps/browser-extension-wallet/package.json

@@ -93,11 +93,15 @@
     "react-dom": "17.0.2",
     "react-hook-form": "7.47.0",
     "react-i18next": "^12.3.1",
+    "react-infinite-scroll-hook": "^4.1.1",
     "react-lottie": "^1.2.3",
+    "react-modern-drawer": "1.0.1",
+    "react-portal": "4.2.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "readable-stream": "^3.6.0",
     "rxjs": "7.4.0",
+    "swiper": "^8.4.4",
     "webextension-polyfill": "0.10.0",
     "zustand": "3.5.14"
   },
@@ -111,6 +115,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/qrcode": "^1",
     "@types/react-lottie": "^1.2.6",
+    "@types/react-portal": "4.0.7",
     "@types/text-encoding-utf-8": "^1",
     "@types/uuid": "^8.3.4",
     "@types/w3c-web-hid": "^1.0.3",

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx

@@ -0,0 +1,17 @@
+import { Layout, SectionLayout } from '@views/browser/components';
+import SimpleView from './SimpleView';
+import DappLayout from '../layout/dapp';
+import React from 'react';
+
+export const DAppExplorer = () => (
+  <>
+    <Layout>
+      <SectionLayout>
+        <DappLayout>
+          <SimpleView />
+        </DappLayout>
+      </SectionLayout>
+    </Layout>
+    <div id={'dAppStore'} />
+  </>
+);

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

@@ -11,7 +11,8 @@ import { IogBox } from '../../Grid';
 import { IogText } from '../../Typography';
 import { EIconsName } from '../../Icon';
 import { IogButton, IogButtonIcon } from '../../Button';
-import Cancel from '../../../assets/icons/cancel-icon.svg';
+import Cancel from '../../../assets/icons/cancel-icon.component.svg';
+import Icon from '@ant-design/icons';
 
 // Helpers
 import { requireMessageTextColor } from './helpers';
@@ -23,6 +24,7 @@ import './styles.scss';
 const { useRef, useState } = React;
 
 export const IogInput = React.memo(
+  // eslint-disable-next-line complexity
   ({
     register,
     name,
@@ -143,7 +145,7 @@ export const IogInput = React.memo(
             onClick={handleClearInput}
             data-testid="categories-btn-clear"
           >
-            <Cancel />
+            <Icon component={Cancel} />
           </IogButton>
         )}
 

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Form/Input/types.ts

@@ -1,9 +1,8 @@
 import { UseFormRegister, RegisterOptions, Control, UseFormSetError, FieldValues } from 'react-hook-form';
-import { ERoutes } from '../../../routes/enum';
 import { TIogBoxSizes } from '../types';
 
 interface IInputLink {
-  url: ERoutes;
+  url: string;
   label: string;
   e2eId: string;
 }

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

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { DefaultTheme, ThemeContext } from 'styled-components';
-import { ITheme } from '../../global/styles/Themes';
 import getIconMetaData from './data';
 import { EIconsTypes } from './enum';
 import SvgIcon from './svg';
 import { IIcon, ISvgIcon, TIconCreator } from './types';
 
-const { useContext, memo } = React;
+const { memo } = React;
 
 const ICON_SIZES = {
   LARGE: 36,
@@ -25,12 +23,11 @@ const getSizeValue = (size: ISvgIcon['size']): number => {
   }
 };
 
-const iconCreator = (props: TIconCreator, theme?: ITheme) => {
+const iconCreator = (props: TIconCreator) => {
   const { family, name, type, size, svgPathKey, ...otherProps } = props;
 
   const svgIconsProps = {
     svgPathKey,
-    theme,
     size: getSizeValue(size),
     ...otherProps
   };
@@ -46,12 +43,10 @@ const iconCreator = (props: TIconCreator, theme?: ITheme) => {
 };
 
 const Component: React.FC<IIcon> = (props) => {
-  const theme = useContext(ThemeContext);
-
   const { name, ...otherProps } = props;
   const iconMetaData = getIconMetaData(name);
 
-  return iconCreator({ ...otherProps, ...iconMetaData }, theme);
+  return iconCreator({ ...otherProps, ...iconMetaData });
 };
 
 export { EIconsName } from './enum';

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

@@ -12,7 +12,6 @@ const SvgIcon: React.FC<ISvgIcon> = (props) => {
     svgPathKey,
     size,
     style,
-    theme,
     strokeColor,
     defaultStrokeColor,
     strokeColorByFill,
@@ -21,7 +20,7 @@ const SvgIcon: React.FC<ISvgIcon> = (props) => {
   } = props;
   const viewBox = defaultViewBox ?? '0 0 24 24';
 
-  const fillColor = color ?? style?.color ?? defaultFill ?? theme?.colors.darkGray;
+  const fillColor = color ?? style?.color ?? defaultFill;
 
   const strokeDefaultColor = strokeColor ?? defaultStrokeColor ?? (strokeColorByFill && fillColor);
 

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Icon/types.ts

@@ -17,7 +17,7 @@ interface IIconRules {
 
 export interface IIcon extends IIconStyle, IIconRules {}
 
-type IconStylePickProperties = 'theme' | 'strokeColorByFill' | 'strokeColor';
+type IconStylePickProperties =  'strokeColorByFill' | 'strokeColor';
 
 interface ICommonIconsMetaDataValue {
   type?: EIconsTypes;

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { Image } from 'antd';
 import { IogImageProps } from '../types';
 import { mixins } from '../../../global/styles/Themes';
-import ImageError from '../../../assets/icons/image-error.svg';
+import ImageError from '../../../assets/icons/image-error.component.svg';
 
 import './styles.scss';
 

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

@@ -7,7 +7,6 @@ import { AuditHeader } from '../AuditHeader';
 import { IogRow } from '../../Grid';
 import { IogButton } from '../../Button';
 import { getCompletionDate, handleDownloadCertificate } from './helpers';
-import { t } from 'i18next';
 
 import './styles.scss';
 import { CERTIFICATION_AUDIT_DOWNLOAD_CERTIFICATION_TEST_ID } from './constants';
@@ -19,11 +18,6 @@ export const CertificationAndAudit = () => {
     state: { data }
   } = useDrawer<ISectionCardItem>();
 
-  const feedbackMessage =
-    data?.certificates && data?.certificates?.length > 0
-      ? t('dappdiscovery.iog_legal_disclaimer')
-      : t('dappdiscovery.audit_certification_not_available');
-
   return (
     <>
       <IogTitle as="h3" xMedium data-testid="audit-title">

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

@@ -12,12 +12,11 @@ import { IogText } from '../../components/Typography';
 import { IogBox, IogRow } from '../../components/Grid';
 import { AboutDapp } from './AboutDapp';
 import { Contact } from './Contact';
-import ExternalLink from '../../assets/icons/external-link.svg';
-import Exclamation from '../../assets/icons/exclamation.svg';
+import ExternalLink from '../../assets/icons/external-link.component.svg';
 
 import './styles.scss';
-import { Button, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
-import Link from 'next/link';
+import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import Icon from '@ant-design/icons';
 
 const shortenURL = (url?: string) => {
   if (!url) return '';
@@ -30,9 +29,6 @@ const ProjectDetail: React.FC = () => {
     state: { open, data },
     dispatch
   } = useDrawer<ISectionCardItem>();
-  const reportDAppUrl =
-    `${process.env.NEXT_PUBLIC_REPORT_DAPP_URL}?usp=pp_url&entry.2109698197=${data?.title}&entry.5231725=${data?.subject}` ||
-    '';
 
   const { t } = useTranslation();
 
@@ -95,9 +91,6 @@ const ProjectDetail: React.FC = () => {
                 {data?.title}
               </Text.SubHeading>
             </div>
-            <Link href={reportDAppUrl} target="_blank">
-              <Button.Secondary label="Report" icon={<Exclamation />} />
-            </Link>
           </Flex>
           {open && <Tabs className="iog-tabs" items={tabItems} defaultActiveKey="1" />}
         </div>
@@ -109,7 +102,7 @@ const ProjectDetail: React.FC = () => {
             onClick={handleOpenUrl}
             data-testid="app-details-website-btn"
           >
-            <ExternalLink />
+            <Icon component={ExternalLink} />
             {shortenURL(data?.link)}
           </IogButton>
         </IogRow>

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/with-drawer.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from 'react';
 import { Portal } from 'react-portal';
 import ProjectDetail from '../ProjectDetail';

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

@@ -1,32 +1,70 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 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';
 
 // Defines pagination parameters for infinite scroll mechanism.
 const MAX_ITEMS_PER_PAGE = 20;
 
+const isScrollbarAtBottom = () => {
+  const bodyHeight = document.body.scrollHeight;
+  const windowHeight = window.innerHeight;
+
+  // if difference between visible screen and scrollbar vertical position is less than 5px
+  return Math.round(bodyHeight - windowHeight) - Math.round(window.scrollY) < 5;
+};
+
 const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, search }) => {
   const { dispatch } = useDrawer<ISectionCardItem>();
-  const { data: dapps, loading } = useDAppFetcher({
+  const {
+    data: dapps,
+    loading,
+    fetchMore,
+    hasNextPage
+  } = useDAppFetcher({
     category: maybeGetCategoryName(selectedCategory),
     page: { offset: 0, limit: MAX_ITEMS_PER_PAGE },
     search
   });
 
+  const fetchNext = (_renderedDapps: ISectionCardItem[]) =>
+    fetchMore();
+
+  const loadMoreDapps = () => {
+    if (isScrollbarAtBottom() && hasNextPage) {
+      fetchNext(dapps);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', loadMoreDapps);
+
+    return () => {
+      window.removeEventListener('scroll', loadMoreDapps);
+    };
+  });
+
   const handleOpenDrawer = (drawerData: ISectionCardItem) => {
     dispatch({ type: EDrawerAction.OPEN, data: drawerData });
   };
 
   const showDApps = !loading && dapps?.length !== undefined && dapps.length > 0;
   const showEmptyState = !loading && dapps?.length === 0;
 
+  const [infiniteScrollRef] = useInfiniteScroll({
+    loading,
+    hasNextPage,
+    onLoadMore: loadMoreDapps,
+    rootMargin: '0px 0px 0px 0px'
+  });
+
   const renderCards = (dappsToRender: ISectionCardItem[]) =>
     dappsToRender.map((dapp) => (
       <div key={`card-${dapp.subject}`} className="card-container">
@@ -51,7 +89,7 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
   }
 
   return (
-    <div className="iog-simple-view-content-container">
+    <div className="iog-simple-view-content-container" ref={infiniteScrollRef}>
       {showDApps && <div className="iog-section-card-grid">{renderCards(dapps)}</div>}
       {loading && <Skeleton />}
     </div>