feat: [lw 11882] Connect DApp Explorer to DApp Radar API (#1649)

* feat: load dapps data from dapp radar api

* feat: fetch dapp categories from dapp radar

* ci: add dappradar credentials to github action

* feat: cover edge cases of api requests implementation

* feat: show single show all category when no dapp radar api token

* fix: code cleanup, small ui adjustments

* docs: document how to get dapp radar api token for local development

* fix: dapp details drawer redirect button

* fix: lint

* feat: prepare CI to consume dapp radar api token and use it for extension build

* fix: capturing active category by analytics

* feat: allow to render dapp explorer page with/out content depending on feature flag

* fix: rendering of icons in the categories carousel

* fix: add elipsis to dapp tile texts

* fix: ui fixes

---------

Co-authored-by: John Oshalusi <[email protected]>

.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/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import capitalize from 'lodash/fp/capitalize';
 import { IogImage } from '../../Image';
 import { IogCardProps } from './types';
 import './styles.scss';
@@ -30,7 +31,7 @@ export const IogCardClassic: React.FC<IogCardProps> = ({ onClick, ...props }) =>
             </Text.Body.Normal>
             <Box w="$fill">
               <Text.Body.Small weight="$semibold" color="secondary" data-testid="dappCategory">
-                {categories?.map((category, index) => (categories.length !== index + 1 ? `${category} ` : category))}
+                {categories.map((c) => capitalize(c)).join(', ')}
               </Text.Body.Small>
             </Box>
           </Flex>

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

@@ -19,7 +19,7 @@
 
   span {
     display: block;
-    white-space: normal;
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;

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/DAppExplorer.tsx

@@ -1,14 +1,18 @@
 import { Layout, SectionLayout } from '@views/browser/components';
 import SimpleView from './SimpleView';
 import React from 'react';
+import { ExperimentName } from '@providers/ExperimentsProvider/types';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 
-export const DAppExplorer: React.FC = () => (
-  <>
-    <Layout noAside>
-      <SectionLayout>
-        <SimpleView />
-      </SectionLayout>
-    </Layout>
-    <div id={'dAppStore'} />
-  </>
-);
+export const DAppExplorer: React.FC = () => {
+  const posthog = usePostHogClientContext();
+  const dappExplorerEnabled = posthog.isFeatureEnabled(ExperimentName.DAPP_EXPLORER);
+  return (
+    <>
+      <Layout noAside>
+        <SectionLayout>{dappExplorerEnabled && <SimpleView />}</SectionLayout>
+      </Layout>
+      <div id={'dAppStore'} />
+    </>
+  );
+};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Text } from '@input-output-hk/lace-ui-toolkit';
 import { useTranslation } from 'react-i18next';
 import { IogText } from '../Typography';
 import Empty from './images/Empty';
@@ -12,9 +13,9 @@ const IogEmptyState: React.FC = () => {
       <div data-testid="empty-state-image">
         <Empty />
       </div>
-      <IogText xxMedium bold as="div" color="black" data-testid="empty-state-header">
+      <Text.Body.Large weight={'$bold'} data-testid="empty-state-header">
         {t('dappdiscovery.empty_state.no_dapps_title')}
-      </IogText>
+      </Text.Body.Large>
       <IogText as="div" small normal color="dark" center data-testid="empty-state-text">
         {t('dappdiscovery.empty_state.no_dapps_content1')}
       </IogText>

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

@@ -15,7 +15,18 @@ 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>
+        </Box>
+        <Text.Body.Normal>{data?.shortDescription}</Text.Body.Normal>
+      </Box>
+      <Box my="$24">
+        <Box mb="$12">
+          <Text.SubHeading>{'DApp Description'}</Text.SubHeading>
+        </Box>
+        <Text.Body.Normal>
+          <div dangerouslySetInnerHTML={{ __html: data?.longDescription }} />
+        </Text.Body.Normal>
       </Box>
       {data?.screenshots && (
         <Box mb="$16">