feat: [lw 11882] Connect DApp Explorer to DApp Radar API

.github/actions/build/app/action.yml

@@ -20,6 +20,9 @@ inputs:
   LACE_EXTENSION_KEY:
     description: 'Public extended manifest key'
     required: true
+  DAPP_RADAR_API_KEY:
+    description: 'Production api token of DApp Radar API'
+    required: true
   BUILD_DEV_PREVIEW:
     description: 'Build developer preview of Lace'
     required: false
@@ -76,6 +79,7 @@ runs:
         BLOCKFROST_PROJECT_ID_PREPROD: ${{ inputs.BLOCKFROST_PROJECT_ID_PREPROD }}
         BLOCKFROST_PROJECT_ID_PREVIEW: ${{ inputs.BLOCKFROST_PROJECT_ID_PREVIEW }}
         LACE_EXTENSION_KEY: ${{ inputs.LACE_EXTENSION_KEY }}
+        DAPP_RADAR_API_KEY: ${{ inputs.DAPP_RADAR_API_KEY }}
         BUILD_DEV_PREVIEW: ${{ inputs.BUILD_DEV_PREVIEW }}
         POSTHOG_PRODUCTION_TOKEN: ${{ inputs.POSTHOG_PRODUCTION_TOKEN }}
         PRODUCTION_MODE_TRACKING: ${{ inputs.PRODUCTION_MODE_TRACKING }}

.github/workflows/ci.yml

@@ -209,6 +209,7 @@ jobs:
           SENTRY_ORG: ${{ startsWith(github.ref, 'refs/heads/release') && vars.SENTRY_ORG || '' }}
           SENTRY_PROJECT: ${{ startsWith(github.ref, 'refs/heads/release') && vars.SENTRY_PROJECT || ''}}
           SENTRY_ENVIRONMENT: 'production'
+          DAPP_RADAR_API_KEY: ${{ startsWith(github.ref, 'refs/heads/release') && secrets.DAPP_RADAR_API_KEY || '' }}
   build:
     name: Build Lace
     runs-on: ubuntu-22.04

README.md

@@ -58,6 +58,8 @@ cp ./apps/.env.defaults ./apps/.env
 
 Once `.env` files is created adjust it to your needs, and update `LACE_EXTENSION_KEY`
 
+> If you want to develop DApp Explorer please refer to the [Setting up local connection with DApp Radar API](apps/browser-extension-wallet/src/views/browser-view/features/dapp/README.md) page
+
 ### Build packages and extension
 
 ```sh

apps/browser-extension-wallet/.env.defaults

@@ -65,6 +65,7 @@ PRODUCTION_MODE_TRACKING=false
 
 # Post Hog
 POSTHOG_DEV_TOKEN=phc_gH96Lx5lEVXTTWEyytSdTFPDk3Xsxwi4BqG88mKObd1
+
 # Sentry
 SENTRY_AUTH_TOKEN=
 SENTRY_DSN=
@@ -100,6 +101,9 @@ CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
 CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
+# DApp Radar API
+DAPP_RADAR_API_URL=https://apis.dappradar.com
+
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk
 LACE_EXTENSION_ID=gafhhkghbfjjkeiendhlofajokpaflmk

apps/browser-extension-wallet/.env.developerpreview

@@ -83,6 +83,9 @@ CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
 CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
+# DApp Radar API
+DAPP_RADAR_API_URL=https://apis.dappradar.com
+
 # Manifest.json
 LACE_EXTENSION_KEY=djcdfchkaijggdjokfomholkalbffgil
 LACE_EXTENSION_ID=djcdfchkaijggdjokfomholkalbffgil

apps/browser-extension-wallet/.env.example

@@ -92,6 +92,10 @@ CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
 CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
+# DApp Radar API
+DAPP_RADAR_API_URL=https://apis.dappradar.com
+DAPP_RADAR_API_KEY=
+
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk
 LACE_EXTENSION_ID=gafhhkghbfjjkeiendhlofajokpaflmk

apps/browser-extension-wallet/manifest.json

@@ -19,7 +19,7 @@
   "permissions": ["webRequest", "storage", "tabs", "unlimitedStorage"],
   "host_permissions": ["<all_urls>"],
   "content_security_policy": {
-    "extension_pages": "default-src 'self' $LOCALHOST_DEFAULT_SRC; frame-src https://connect.trezor.io/ https://www.youtube-nocookie.com; script-src 'self' 'wasm-unsafe-eval' $LOCALHOST_SCRIPT_SRC; font-src 'self' https://use.typekit.net; object-src 'self'; connect-src $BLOCKFROST_URLS $CARDANO_SERVICES_URLS $CARDANO_WS_SERVER_URLS $SENTRY_URL https://coingecko.live-mainnet.eks.lw.iog.io https://muesliswap.live-mainnet.eks.lw.iog.io $LOCALHOST_CONNECT_SRC $POSTHOG_HOST https://use.typekit.net data:; style-src * 'unsafe-inline'; img-src * data:;"
+    "extension_pages": "default-src 'self' $LOCALHOST_DEFAULT_SRC; frame-src https://connect.trezor.io/ https://www.youtube-nocookie.com; script-src 'self' 'wasm-unsafe-eval' $LOCALHOST_SCRIPT_SRC; font-src 'self' https://use.typekit.net; object-src 'self'; connect-src $BLOCKFROST_URLS $CARDANO_SERVICES_URLS $CARDANO_WS_SERVER_URLS $SENTRY_URL $DAPP_RADAR_APPI_URL https://coingecko.live-mainnet.eks.lw.iog.io https://muesliswap.live-mainnet.eks.lw.iog.io $LOCALHOST_CONNECT_SRC $POSTHOG_HOST https://use.typekit.net data:; style-src * 'unsafe-inline'; img-src * data:;"
   },
   "content_scripts": [
     {

apps/browser-extension-wallet/src/views/browser-view/features/dapp/README.md

@@ -0,0 +1,10 @@
+# Setting up local connection with DApp Radar API
+
+DApp Explorer uses [DApp Radar API](https://apis-portal.dappradar.com/full-api-reference)
+as a data source.
+For the local development you need to set up your personal
+[subscription](https://apis-portal.dappradar.com/subscriptions) to obtain an api token.
+You can use a free plan allowing you to perform 100 api calls per month.
+
+Once you have your personal api token set it in your `.env` file
+under the `DAPP_RADAR_API_KEY` name.

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

@@ -1,15 +1,11 @@
 interface IIogCardImage {
   alt: string;
   src: string;
-  width: number;
-  height: number;
 }
 
 export interface IogCardProps {
-  categories?: string[];
+  categories: string[];
   title: string;
-  description?: string;
-  isCertified?: boolean;
-  image?: Partial<IIogCardImage>;
-  onClick?: () => void;
+  image?: IIogCardImage;
+  onClick: () => void;
 }

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

@@ -15,7 +15,14 @@ export const AboutDapp: React.FC = () => {
   return (
     <>
       <Box my="$24">
-        <Text.Body.Normal>{data?.longDescription}</Text.Body.Normal>
+        <Box mb="$12">
+          <Text.SubHeading>{'Summary'}</Text.SubHeading>
+          <Text.Body.Normal>{data?.shortDescription}</Text.Body.Normal>
+        </Box>
+        <Text.SubHeading>{'DApp Description'}</Text.SubHeading>
+        <Text.Body.Normal>
+          <div dangerouslySetInnerHTML={{ __html: data?.longDescription }} />
+        </Text.Body.Normal>
       </Box>
       {data?.screenshots && (
         <Box mb="$16">

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

@@ -10,9 +10,11 @@ interface ContactItemType {
 
 export const ContactItem: React.FC<ContactItemType> = ({ itemIcon, itemTitle, itemData }) => (
   <div className="iog-contact-item" data-testid="contact-item">
-    <span className="iog-contact-item-icon" data-testid="contact-icon">
-      {itemIcon}
-    </span>
+    {itemIcon && (
+      <span className="iog-contact-item-icon" data-testid="contact-icon">
+        {itemIcon}
+      </span>
+    )}
     <Flex flexDirection="column">
       <span className="iog-contact-item-title" data-testid="contact-name">
         {itemTitle}

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

@@ -21,12 +21,20 @@ export const Contact: React.FC = () => {
 
   return (
     <Flex flexDirection="column" gap="$24" pt="$24" data-testid="contact-items">
-      <ContactItem itemIcon={mailIcon} itemTitle={t('dappdiscovery.side_panel.email')} itemData={data.email} />
-      <ContactItem
-        itemIcon={websiteIcon}
-        itemTitle={t('dappdiscovery.side_panel.company_website')}
-        itemData={data.companyWebsite}
-      />
+      {!!data.email && (
+        <ContactItem itemIcon={mailIcon} itemTitle={t('dappdiscovery.side_panel.email')} itemData={data.email} />
+      )}
+      {!!data.companyWebsite && (
+        <ContactItem
+          itemIcon={websiteIcon}
+          itemTitle={t('dappdiscovery.side_panel.company_website')}
+          itemData={data.companyWebsite}
+        />
+      )}
+      {data.socialLinks.map(({ url, title }) => (
+        // eslint-disable-next-line unicorn/no-null
+        <ContactItem key={title} itemIcon={null} itemTitle={title} itemData={url} />
+      ))}
     </Flex>
   );
 };

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

@@ -11,6 +11,7 @@ import LinkIcon from '../../assets/icons/link.component.svg';
 
 import './styles.scss';
 import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import { useExternalLinkOpener } from '@providers';
 
 const shortenURL = (url?: string) => {
   if (!url) return '';
@@ -23,23 +24,26 @@ const ProjectDetail: React.FC = () => {
     state: { open, data },
     dispatch
   } = useDrawer<ISectionCardItem>();
-
+  const openExternalLink = useExternalLinkOpener();
   const { t } = useTranslation();
 
   const handleClose = () => dispatch({ type: EDrawerAction.CLOSE });
 
   const handleOpenUrl = () => {
-    window.open(data?.companyWebsite, 'blank');
+    openExternalLink(data?.link);
   };
 
   const tabItems = [
     { label: t('dappdiscovery.side_panel.more_details'), key: '1', children: <AboutDapp /> },
     { label: t('dappdiscovery.side_panel.contact'), key: '2', children: <Contact /> }
   ];
 
+  // eslint-disable-next-line unicorn/no-null
+  if (!open || !data) return null;
+
   return (
     <Drawer
-      open={open}
+      open
       onClose={handleClose}
       navigation={
         <DrawerNavigation onCloseIconClick={handleClose} title={t('dappdiscovery.side_panel.about_this_dapp')} />
@@ -74,7 +78,7 @@ const ProjectDetail: React.FC = () => {
                 {data?.title}
               </Text.Body.Normal>
               <Text.Body.Small color="secondary" weight="$semibold">
-                {data?.category}
+                {data.categories.join(', ')}
               </Text.Body.Small>
             </Flex>
           </div>

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

@@ -42,13 +42,11 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
 
   const renderCards = (dappsToRender: ISectionCardItem[]) =>
     dappsToRender.map((dapp, index) => (
-      <div key={`card-${dapp.subject}-${index}`} className="card-container">
+      <div key={`card-${dapp.id}-${index}`} className="card-container">
         <IogCardClassic
           {...dapp}
-          description={dapp.shortDescription}
-          categories={[dapp.category, dapp.subcategory].filter(Boolean)}
+          categories={dapp.categories}
           image={dapp.image}
-          isCertified={dapp.isCertified}
           onClick={() => handleOpenDrawer(dapp)}
           title={dapp.title}
         />