Support essential dapps in DeFi dropdown (#3218)

configs/envs/.env.eth

@@ -24,7 +24,7 @@ NEXT_PUBLIC_BEACON_CHAIN_VALIDATOR_URL_TEMPLATE=https://beaconcha.in/validator/{
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
-NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','url':'https://eth.blockscout.com/essential-dapps/swap?utm_source=defi-dropdown-&utm_medium=swap'},{'text':'Revoke','icon':'integration/partial','dappId':'revokescout'}, {'text': 'Multisend', 'icon': 'token', 'url': 'https://eth.blockscout.com/essential-dapps/multisend?utm_source=defi-dropdown-multisend&utm_medium=multisend'}]
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'swap','isEssentialDapp':true},{'text':'Revoke','icon':'integration/partial','dappId':'revoke','isEssentialDapp':true},{'text':'Multisend','icon':'navigation/tokens','dappId':'multisend','isEssentialDapp':true}]
 NEXT_PUBLIC_DEX_POOLS_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth.json
 NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK=https://chains.blockscout.com/
@@ -42,7 +42,7 @@ NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/ma
 NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://eth.blockscout.com/apps/revokescout?chainId=1
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
-NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'url': 'https://swapscout.vercel.app', 'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}}
+NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG={'swap': {'url': 'https://swapscout.vercel.app', 'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '1923', '42793', '59144'], 'fee': '0.004', 'integrator': 'blockscout'}, 'multisend': {'chains': ['1', '10', '30', '100', '122', '130', '137', '324', '480', '1135', '1514', '1868', '8453', '13371', '42161', '42220', '57073', '534352', '11155111', '1313161554', '59144', '7000'], 'posthogKey': 'phc_7O4WGsecqqDO1PeaKayHAxUWN1PjheOmQCiDxEMcmkx', 'posthogHost': 'https://us.i.posthog.com'}, 'revoke': {'chains': ['1', '10', '30', '100', '122', '130', '324', '480', '8453', '13371', '42161', '42220', '57073', '534352', '1868', '7887', '1514', '245022934', '61', '148', '314', '137', '7000', '42793', '4326']}}
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com

deploy/tools/envs-validator/schemas/features/defiDropdown.ts

@@ -9,6 +9,7 @@ const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
     text: yup.string().required(),
     icon: yup.string<IconName>(),
     dappId: yup.string(),
+    isEssentialDapp: yup.boolean(),
     url: yup.string().test(urlTest),
   })
   .test('oneOfRequired', 'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: Either dappId or url is required', function(value) {
@@ -21,4 +22,4 @@ export const defiDropdownSchema = yup.object({
     .transform(replaceQuotes)
     .json()
     .of(deFiDropdownItemSchema),
-});
+});

docs/ENVS.md

@@ -913,7 +913,7 @@ If the feature is enabled, a single button or a dropdown (if more than 1 item is
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon?: string; dappId?: string, url?: string }]` | An array of dropdown items containing the button text, icon name and dappId in Dappscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ |
+| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon?: string; dappId?: string, url?: string, isEssentialDapp?: boolean }]` | An array of dropdown items containing the button text, icon name and dappId in Dappscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'swap','isEssentialDapp':true},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ |
 
  
 

types/client/deFiDropdown.ts

@@ -4,6 +4,6 @@ export type DeFiDropdownItem = {
   text: string;
   icon?: IconName;
 } & (
-  { dappId: string; url?: never } |
-  { url: string; dappId?: never }
+  { dappId: string; isEssentialDapp?: boolean; url?: never } |
+  { url: string; dappId?: never; isEssentialDapp?: never }
 );

ui/pages/MarketplaceEssentialDapp.tsx

@@ -9,12 +9,15 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import Multisend from 'ui/marketplace/essentialDapps/multisend/Multisend';
 import Revoke from 'ui/marketplace/essentialDapps/revoke/Revoke';
 import Swap from 'ui/marketplace/essentialDapps/swap/Swap';
+import useAutoConnectWallet from 'ui/marketplace/useAutoConnectWallet';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const feature = config.features.marketplace;
 
 const EssentialDapp = () => {
   const router = useRouter();
+  useAutoConnectWallet();
+
   const id = getQueryParamString(router.query.id);
 
   let title = null;

ui/snippets/topBar/DeFiDropdown.tsx

@@ -59,7 +59,10 @@ const DeFiDropdown = () => {
     <Link
       href={
         items[0].dappId ?
-          route({ pathname: '/apps/[id]', query: { id: items[0].dappId, action: 'connect' } }) :
+          route({
+            pathname: items[0].isEssentialDapp ? '/essential-dapps/[id]' : '/apps/[id]',
+            query: { id: items[0].dappId, action: 'connect' },
+          }) :
           items[0].url
       }
       target={ items[0].dappId ? '_self' : '_blank' }

ui/snippets/topBar/DeFiDropdownItem.tsx

@@ -15,7 +15,13 @@ type Props = {
 const DeFiDropdownItem = ({ item }: Props) => {
   return (
     <Link
-      href={ item.dappId ? route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) : item.url }
+      href={ item.dappId ?
+        route({
+          pathname: item.isEssentialDapp ? '/essential-dapps/[id]' : '/apps/[id]',
+          query: { id: item.dappId, action: 'connect' },
+        }) :
+        item.url
+      }
       external={ !item.dappId }
       w="100%"
       h="34px"