Move the marketplace app list to the ENV.

.env.template

@@ -27,6 +27,7 @@ NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TELEGRAM_L
 NEXT_PUBLIC_FOOTER_STAKING_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_STAKING_LINK__
 NEXT_PUBLIC_FEATURED_NETWORKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FEATURED_NETWORKS__
 NEXT_PUBLIC_NETWORK_EXPLORERS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_EXPLORERS__
+NEXT_PUBLIC_MARKETPLACE_APP_LIST=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_APP_LIST__
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
 
 # api config
@@ -35,5 +36,3 @@ NEXT_PUBLIC_API_BASE_PATH=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_BASE_PATH__
 
 # external services config
 NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
-
-

README.md

@@ -67,6 +67,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` *(optional)* | Link to Twitter in the footer | `https://www.twitter.com/blockscoutcom` |
 | NEXT_PUBLIC_FOOTER_TELEGRAM_LINK | `string` *(optional)* | Link to Telegram in the footer | `https://t.me/poa_network` |
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` *(optional)* | Link to staking dashboard in the footer | `https://duneanalytics.com/maxaleks/xdai-staking` |
+| NEXT_PUBLIC_MARKETPLACE_APP_LIST | `Array<MarketplaceApp>` where `MarketplaceApp` can have following [properties](#marketplace-app-configuration-properties) | List of apps that will be shown on the marketplace page | `[{'author': 'Bob', 'id': 'app', 'title': 'The App', 'logo': 'https://foo.app/icon.png', 'categories': ['security'], 'shortDescription': 'Awesome app', 'site': 'https://foo.app', 'description': 'The best app', 'url': 'https://foo.app/launch'}]` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | `https://airtable.com/shrqUAcjgGJ4jU88C` |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers.  | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
 | NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` *(optional)* | Verification type in the network | `mining` |
@@ -112,8 +113,40 @@ The app instance could be customized by passing following variables to NodeJS en
 
 | Variable | Type | Description | Default value
 | --- | --- | --- | --- |
-| NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Senty.io app | `<secret>` |
-| SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Senty.io app | `<secret>` |
+| NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Sentry.io app | `<secret>` |
+| SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Sentry.io app | `<secret>` |
+
+### Marketplace app configuration properties
+
+| Property | Type | Description | Example value
+| --- | --- | --- | --- |
+| id | `string` | Used as slug for the app. Must be unique in the app list. | `'app'` |
+| title | `string` | Displayed title of the app. | `'The App'` |
+| logo | `string` | URL to logo file. Should be at least 144x144. | `'https://foo.app/icon.png'` |
+| shortDescription | `string` | Displayed only in the app list. | `'Awesome app'` |
+| categories | `Array<MarketplaceCategoryId>` | Displayed category. Select one of the following bellow. | `['security', 'tools']` |
+| author | `string` | Displayed author of the app | `'Bob'` |
+| url | `string` | URL of the app which will be launched in the iframe. | `'https://foo.app/launch'` |
+| description | `string` | Displayed only in the modal dialog with additional info about the app. | `'The best app'` |
+| site | `string` *(optional)* | Displayed site link | `'https://blockscout.com'` |
+| twitter | `string` *(optional)* | Displayed twitter link | `'https://twitter.com/blockscoutcom'` |
+| telegram | `string`  *(optional)* | Displayed telegram link | `'https://t.me/poa_network'` |
+| github | `string` *(optional)* | Displayed github link | `'https://github.com/blockscout'` |
+
+#### Marketplace categories ids
+
+For each application, you need to specify the `MarketplaceCategoryId` to which it belongs. Select one of the following:
+
+- `defi`
+- `exchanges`
+- `finance`
+- `games`
+- `marketplaces`
+- `nft`
+- `security`
+- `social`
+- `tools`
+- `yieldFarming`
 
 ### How to add new environment variable
 

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
+import type { AppItemOverview } from 'types/client/apps';
 import type { FeaturedNetwork, NetworkExplorer } from 'types/networks';
 
 const getEnvValue = (env: string | undefined) => env?.replaceAll('\'', '"');
@@ -58,6 +59,7 @@ const config = Object.freeze({
   featuredNetworks: parseEnvJson<Array<FeaturedNetwork>>(getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS)) || [],
   blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
   isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',
+  marketplaceAppList: parseEnvJson<Array<AppItemOverview>>(getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_APP_LIST)) || [],
   marketplaceSubmitForm: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM),
   protocol: appSchema,
   host: appHost,

configs/envs/.env.common

@@ -10,7 +10,6 @@ NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','basePath':'/xdai/mainnet','group':'mainnets'}]
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 
 # api config
 NEXT_PUBLIC_API_ENDPOINT=https://blockscout.com

configs/envs/.env.poa_core

@@ -17,6 +17,8 @@ NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=0x029a799563238d0e75e20be2f4bda0ea68d00172
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
+NEXT_PUBLIC_MARKETPLACE_APP_LIST=[{'author': 'Blockscout', 'id': 'token-approval-tracker', 'title': 'Token Approval Tracker', 'logo': 'https://approval-tracker.vercel.app/icon-192.png', 'categories': ['security', 'tools'], 'shortDescription': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'site': 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker', 'description': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'url': 'https://approval-tracker.vercel.app/'}]
 
 # api config
 NEXT_PUBLIC_API_BASE_PATH=/poa/core

decs.d.ts

 declare module 'react-identicons'
-
-declare module 'data/marketplaceApps.json' {
-  import type { AppItemOverview } from './types/client/apps';
-  const value: Array<AppItemOverview>;
-  export default value;
-}

deploy/values/e2e/values.yaml

@@ -333,3 +333,5 @@ frontend:
       _default: /
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM:
       _default: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_APP_LIST:
+      _default: "[{'author': 'Blockscout', 'id': 'token-approval-tracker', 'title': 'Token Approval Tracker', 'logo': 'https://approval-tracker.vercel.app/icon-192.png', 'categories': ['security', 'tools'], 'shortDescription': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'site': 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker', 'description': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'url': 'https://approval-tracker.vercel.app/'}]"

deploy/values/main/values.yaml

@@ -333,3 +333,5 @@ frontend:
       _default: /
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM:
       _default: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_APP_LIST:
+      _default: "[{'author': 'Blockscout', 'id': 'token-approval-tracker', 'title': 'Token Approval Tracker', 'logo': 'https://approval-tracker.vercel.app/icon-192.png', 'categories': ['security', 'tools'], 'shortDescription': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'site': 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker', 'description': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'url': 'https://approval-tracker.vercel.app/'}]"

deploy/values/review/values.yaml

@@ -327,3 +327,5 @@ frontend:
       _default: /
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM:
       _default: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_APP_LIST:
+      _default: "[{'author': 'Blockscout', 'id': 'token-approval-tracker', 'title': 'Token Approval Tracker', 'logo': 'https://approval-tracker.vercel.app/icon-192.png', 'categories': ['security', 'tools'], 'shortDescription': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'site': 'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker', 'description': 'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.', 'url': 'https://approval-tracker.vercel.app/'}]"

lib/csp/getCspPolicy.ts

 import appConfig from 'configs/app/config';
 import featuredNetworks from 'lib/networks/featuredNetworks';
 
-import getMarketplaceApps from '../getMarketplaceApps';
-
 const KEY_WORDS = {
   BLOB: 'blob:',
   DATA: 'data:',
@@ -29,11 +27,11 @@ function getNetworksExternalAssets() {
 }
 
 function getMarketplaceAppsOrigins() {
-  return getMarketplaceApps().map(({ url }) => url);
+  return appConfig.marketplaceAppList.map(({ url }) => url);
 }
 
 function getMarketplaceAppsLogosOrigins() {
-  return getMarketplaceApps().map(({ logo }) => new URL(logo));
+  return appConfig.marketplaceAppList.map(({ logo }) => new URL(logo));
 }
 
 // we cannot use lodash/uniq in middleware code since it calls new Set() and it'is causing an error in Nextjs

lib/getMarketplaceApps.ts

-import data from 'data/marketplaceApps.json';
-
-export default function getMarketplaceApps() {
-  return data;
-}

lib/hooks/useNavItems.tsx

-import React, { useMemo } from 'react';
+import React from 'react';
 
 import appConfig from 'configs/app/config';
-import marketplaceApps from 'data/marketplaceApps.json';
 import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
 import appsIcon from 'icons/apps.svg';
@@ -18,10 +17,7 @@ import useCurrentRoute from 'lib/link/useCurrentRoute';
 import notEmpty from 'lib/notEmpty';
 
 export default function useNavItems() {
-  const isMarketplaceFilled = useMemo(() =>
-    marketplaceApps.filter(item => item.chainIds.includes(appConfig.network.id)),
-  [ ])
-    .length > 0;
+  const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0;
 
   const currentRoute = useCurrentRoute()();
 

pages/[network_type]/[network_sub_type]/apps/[id].tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 
 import type { AppItemOverview } from 'types/client/apps';
 
-import marketplaceApps from 'data/marketplaceApps.json';
+import appConfig from 'configs/app/config';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import MarketplaceApp from 'ui/pages/MarketplaceApp';
@@ -23,7 +23,7 @@ const AppPage: NextPage = () => {
       return;
     }
 
-    const app = marketplaceApps.find((app) => app.id === id);
+    const app = appConfig.marketplaceAppList.find((app) => app.id === id);
     setApp(app);
     setIsLoading(false);
   }, [ id ]);

types/client/apps.ts

@@ -26,7 +26,6 @@ export type AppItemPreview = {
 }
 
 export type AppItemOverview = AppItemPreview & {
-  chainIds: Array<string>;
   author: string;
   url: string;
   description: string;

ui/apps/AppModal.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 
 import type { AppItemOverview, MarketplaceCategoriesIds } from 'types/client/apps';
 
-import marketplaceApps from 'data/marketplaceApps.json';
+import appConfig from 'configs/app/config';
 import linkIcon from 'icons/link.svg';
 import ghIcon from 'icons/social/git.svg';
 import tgIcon from 'icons/social/telega.svg';
@@ -43,7 +43,7 @@ const AppModal = ({
     twitter,
     logo,
     categories,
-  } = marketplaceApps.find(app => app.id === id) as AppItemOverview;
+  } = appConfig.marketplaceAppList.find(app => app.id === id) as AppItemOverview;
 
   const socialLinks = [
     telegram ? {
@@ -206,7 +206,7 @@ const AppModal = ({
             </Link>
           ) }
 
-          { socialLinks.length && (
+          { socialLinks.length > 0 && (
             <List
               marginLeft={{ sm: 'auto' }}
               display="grid"

ui/apps/CategoriesMenu.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { MarketplaceCategoriesIds, MarketplaceCategory } from 'types/client/apps';
 
-import marketplaceApps from 'data/marketplaceApps.json';
+import appConfig from 'configs/app/config';
 import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
 
 import CategoriesMenuItem from './CategoriesMenuItem';
@@ -21,7 +21,7 @@ type Props = {
 
 const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
   const selectedCategory = categoriesList.find(category => category.id === selectedCategoryId);
-  const actualCategories = marketplaceApps.map(app => app.categories).flat();
+  const actualCategories = appConfig.marketplaceAppList.map(app => app.categories).flat();
   const displayedCategories = categoriesList.filter(category => category.id === 'all' ||
       category.id === 'favorites' ||
       actualCategories.includes(category.id));

ui/apps/useMarkeplaceApps.tsx → ui/apps/useMarketplaceApps.tsx

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import type { AppItemOverview, MarketplaceCategoriesIds } from 'types/client/apps';
 
 import appConfig from 'configs/app/config';
-import marketplaceApps from 'data/marketplaceApps.json';
 
 const favoriteAppsLocalStorageKey = 'favoriteApps';
 
@@ -79,8 +78,7 @@ export default function useMarketplaceApps() {
   }, [ filterQuery, category, filterApps ]);
 
   useEffect(() => {
-    const defaultDisplayedApps = [ ...marketplaceApps ]
-      .filter(item => item.chainIds.includes(appConfig.network.id))
+    const defaultDisplayedApps = [ ...appConfig.marketplaceAppList ]
       .sort((a, b) => a.title.localeCompare(b.title));
 
     setDefaultAppList(defaultDisplayedApps);

ui/pages/Apps.tsx

@@ -12,7 +12,7 @@ import AppListSkeleton from 'ui/apps/AppListSkeleton';
 import CategoriesMenu from 'ui/apps/CategoriesMenu';
 import FilterInput from 'ui/shared/FilterInput';
 
-import useMarketplaceApps from '../apps/useMarkeplaceApps';
+import useMarketplaceApps from '../apps/useMarketplaceApps';
 
 const Apps = () => {
   const fetch = useFetch();

ui/pages/MarketplaceApp.tsx

@@ -61,7 +61,8 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
       <Center
         as="main"
         h="100vh"
-        paddingTop={{ base: '138px', lg: 0 }}
+        pt={{ base: '138px', lg: 0 }}
+        pb={{ base: 0, lg: 10 }}
       >
         { (isFrameLoading) && (
           <ContentLoader/>