add suggest ideas button

configs/app/features/marketplace.ts

@@ -6,6 +6,7 @@ import { getEnvValue, getExternalAssetFilePath } from '../utils';
 // config file will be downloaded at run-time and saved in the public folder
 const configUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL');
 const submitFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM');
+const suggestIdeasFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM');
 const categoriesUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL');
 const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 
@@ -14,7 +15,7 @@ const title = 'Marketplace';
 const config: Feature<(
   { configUrl: string } |
   { api: { endpoint: string; basePath: string } }
-) & { submitFormUrl: string; categoriesUrl: string | undefined }
+) & { submitFormUrl: string; categoriesUrl: string | undefined; suggestIdeasFormUrl: string | undefined }
 > = (() => {
   if (chain.rpcUrl && submitFormUrl) {
     if (configUrl) {
@@ -24,6 +25,7 @@ const config: Feature<(
         configUrl,
         submitFormUrl,
         categoriesUrl,
+        suggestIdeasFormUrl,
       });
     } else if (adminServiceApiHost) {
       return Object.freeze({
@@ -31,6 +33,7 @@ const config: Feature<(
         isEnabled: true,
         submitFormUrl,
         categoriesUrl,
+        suggestIdeasFormUrl,
         api: {
           endpoint: adminServiceApiHost,
           basePath: '',

configs/envs/.env.main

@@ -48,6 +48,7 @@ NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.k8s-dev.blockscout.com
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com

deploy/tools/envs-validator/schema.ts

@@ -94,6 +94,14 @@ const marketplaceSchema = yup
         // eslint-disable-next-line max-len
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM cannot not be used without NEXT_PUBLIC_MARKETPLACE_CONFIG_URL or NEXT_PUBLIC_ADMIN_SERVICE_API_HOST'),
       }),
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: yup
+      .string()
+      .when([ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'NEXT_PUBLIC_ADMIN_SERVICE_API_HOST' ], {
+        is: (config: Array<unknown>, apiHost: string) => config.length > 0 || Boolean(apiHost),
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM cannot not be used without NEXT_PUBLIC_MARKETPLACE_CONFIG_URL or NEXT_PUBLIC_ADMIN_SERVICE_API_HOST'),
+      }),
   });
 
 const beaconChainSchema = yup

deploy/tools/envs-validator/test/.env.base

@@ -25,6 +25,7 @@ NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://example.com
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://example.com
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://example.com
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://example.com
 NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE='<a href="#">Hello</a>'
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether

deploy/values/l2-optimism-goerli/values.yaml

@@ -180,6 +180,7 @@ frontend:
     NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
     NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-goerli.json
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
     NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json

deploy/values/main/values.yaml

@@ -149,6 +149,7 @@ frontend:
 
     NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
     NEXT_PUBLIC_APP_ENV: development
     NEXT_PUBLIC_APP_INSTANCE: main
     NEXT_PUBLIC_STATS_API_HOST: https://stats-test.k8s-dev.blockscout.com/

deploy/values/review-l2/values.yaml.gotmpl

@@ -53,6 +53,7 @@ frontend:
     NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
     NEXT_PUBLIC_API_HOST: blockscout-optimism-goerli.k8s-dev.blockscout.com
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_STATS_API_HOST: https://stats-optimism-goerli.k8s-dev.blockscout.com
     NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json

deploy/values/review/values.yaml.gotmpl

@@ -59,6 +59,7 @@ frontend:
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_AUTH_URL: https://blockscout-main.k8s-dev.blockscout.com
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
+    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
     NEXT_PUBLIC_NETWORK_RPC_URL: https://rpc.ankr.com/eth_goerli

docs/ENVS.md

@@ -440,6 +440,7 @@ This feature is **always enabled**, but you can configure its behavior by passin
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app | Required | - | `https://example.com/marketplace_config.json` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | Required | - | `https://airtable.com/shrqUAcjgGJ4jU88C` |
+| NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM | `string` | Link to form where users can suggest ideas for the marketplace | - | - | `https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form` |
 | NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` |
 | NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the markeplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` |
 

pages/apps/index.tsx

+import { IconButton, Menu, MenuButton, MenuItem, MenuList, Flex } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import React from 'react';
@@ -5,6 +6,9 @@ import React from 'react';
 import PageNextJs from 'nextjs/PageNextJs';
 
 import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
@@ -13,15 +17,60 @@ const feature = config.features.marketplace;
 const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false });
 
 const Page: NextPage = () => {
+  const isMobile = useIsMobile();
+  const links = [];
+
+  if (feature.isEnabled) {
+    if (feature.submitFormUrl) {
+      links.push({
+        label: 'Submit app',
+        href: feature.submitFormUrl,
+        icon: 'plus' as IconName,
+      });
+    }
+    if (feature.suggestIdeasFormUrl) {
+      links.push({
+        label: 'Suggest ideas',
+        href: feature.suggestIdeasFormUrl,
+        icon: 'edit' as IconName,
+      });
+    }
+  }
+
   return (
     <PageNextJs pathname="/apps">
       <>
         <PageTitle
           title="DAppscout"
-          contentAfter={ feature.isEnabled && (
-            <LinkExternal href={ feature.submitFormUrl } variant="subtle" fontSize="sm" lineHeight={ 5 } ml="auto">
-              Submit app
+          contentAfter={ (isMobile && links.length > 1) ? (
+            <Menu>
+              <MenuButton
+                as={ IconButton }
+                size="sm"
+                variant="outline"
+                colorScheme="gray"
+                px="9px"
+                ml="auto"
+                icon={ <IconSvg name="dots" boxSize="18px"/> }
+              />
+              <MenuList minW="max-content">
+                { links.map(({ label, href, icon }) => (
+                  <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
+                    <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
+                    { label }
+                    <IconSvg name="arrows/north-east" boxSize={ 4 } color="gray.400" ml={ 2 }/>
+                  </MenuItem>
+                )) }
+              </MenuList>
+            </Menu>
+          ) : (
+            <Flex ml="auto">
+              { links.map(({ label, href }) => (
+                <LinkExternal key={ label } href={ href } variant="subtle" fontSize="sm" lineHeight={ 5 } ml={ 2 }>
+                  { label }
                 </LinkExternal>
+              )) }
+            </Flex>
           ) }
         />
         <Marketplace/>