Merge pull request #703 from blockscout/marketplace-config

new marketplace config

.env.template

@@ -31,7 +31,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_CONFIG_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_CONFIG_URL__
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
 NEXT_PUBLIC_LOGOUT_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_URL__
 NEXT_PUBLIC_LOGOUT_RETURN_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_RETURN_URL__

.eslintignore

 node_modules
 node_modules_linux
 
-playwright/envs.js
+playwright/envs.js
\ No newline at end of file

.husky/pre-commit

@@ -14,4 +14,4 @@ for file in `git diff --diff-filter=ACMRT --cached --name-only | grep ".svg\$"`
         git add $file
     done
 
-echo ✅ All pre-commit jobs are done
+echo ✅ All pre-commit jobs are done
\ No newline at end of file

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
-import type { AppItemOverview } from 'types/client/apps';
 import type { FeaturedNetwork, NetworkExplorer, PreDefinedNetwork } from 'types/networks';
 import type { ChainIndicatorId } from 'ui/home/indicators/types';
 
@@ -87,7 +86,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)) || [],
+  marketplaceConfigUrl: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_CONFIG_URL),
   marketplaceSubmitForm: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM),
   protocol: appSchema,
   host: appHost,

configs/envs/.env.common

@@ -11,7 +11,6 @@ NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
-
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com
 NEXT_PUBLIC_STATS_API_HOST=https://stats-test.aws-k8s.blockscout.com

configs/envs/.env.goerli

@@ -16,8 +16,8 @@ NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.ankr.com/eth_goerli
+NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
 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.apps.blockscout.com/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.apps.blockscout.com/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_IS_TESTNET=true
 

configs/envs/.env.goerli.optimism

@@ -17,8 +17,8 @@ NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.optimism.io
+NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_MARKETPLACE_APP_LIST=[{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FT8RR0UqqvH6wAVfaaM4f%252FUniswap.png%3Falt%3Dmedia%26token%3D797851a0-2d80-4f7b-8d80-f9ba664c0b3d','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}, {'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FaNQY8jHNue30P2caV79v%252FAave.png%3Falt%3Dmedia%26token%3Dda9ea09b-a5d8-4bf1-bdfe-41837eebdd03','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'}, {'author': 'Blockscout','id':'token-approval-tracker','title':'Token Approval Tracker','logo':'https://approval-tracker.apps.blockscout.com/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.apps.blockscout.com/'}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_IS_TESTNET=true
 

configs/envs/.env.localhost

@@ -32,7 +32,6 @@ 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.apps.blockscout.com/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.apps.blockscout.com/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]
 NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
 
 # api config

configs/envs/.env.poa_core

@@ -22,7 +22,6 @@ NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
 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.apps.blockscout.com/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.apps.blockscout.com/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]
 
 # api config
 NEXT_PUBLIC_API_BASE_PATH=/poa/core

configs/envs/.env.pw

@@ -15,6 +15,7 @@ NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_SMALL_LOGO=
 NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
 NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace/eth-goerli.json
 NEXT_PUBLIC_IS_L2_NETWORK=false
 
 # api config

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

@@ -373,8 +373,6 @@ frontend:
       _default: /
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM:
       _default: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_APP_LIST:
-      _default: "[{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FT8RR0UqqvH6wAVfaaM4f%252FUniswap.png%3Falt%3Dmedia%26token%3D797851a0-2d80-4f7b-8d80-f9ba664c0b3d','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}, {'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FaNQY8jHNue30P2caV79v%252FAave.png%3Falt%3Dmedia%26token%3Dda9ea09b-a5d8-4bf1-bdfe-41837eebdd03','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'}, {'author': 'Blockscout','id':'token-approval-tracker','title':'Token Approval Tracker','logo':'https://approval-tracker.apps.blockscout.com/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.apps.blockscout.com/'}]"
     NEXT_PUBLIC_LOGOUT_URL:
       _default: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_LOGOUT_RETURN_URL:
@@ -383,6 +381,8 @@ frontend:
       _default: https://stats-optimism-goerli.test.aws-k8s.blockscout.com
     NEXT_PUBLIC_API_SPEC_URL:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL:
+      _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
     NEXT_PUBLIC_NETWORK_EXPLORERS:
       _default: ''
     NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT:

deploy/values/main/values.yaml

@@ -334,8 +334,6 @@ frontend:
       _default: validation
     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-main.test.aws-k8s.blockscout.com/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-main.test.aws-k8s.blockscout.com/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]"
     # api config
     NEXT_PUBLIC_API_BASE_PATH:
       _default: /
@@ -367,6 +365,8 @@ frontend:
       _default: "['daily_txs','coin_price','market_cup']"
     NEXT_PUBLIC_API_SPEC_URL:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL:
+      _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
     NEXT_PUBLIC_IS_TESTNET:
       _default: true
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION:

deploy/values/review-l2/values.yaml

@@ -98,8 +98,6 @@ frontend:
       _default: /
     NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM:
       _default: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_APP_LIST:
-      _default: "[{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FT8RR0UqqvH6wAVfaaM4f%252FUniswap.png%3Falt%3Dmedia%26token%3D797851a0-2d80-4f7b-8d80-f9ba664c0b3d','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}, {'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FaNQY8jHNue30P2caV79v%252FAave.png%3Falt%3Dmedia%26token%3Dda9ea09b-a5d8-4bf1-bdfe-41837eebdd03','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'}, {'author': 'Blockscout','id':'token-approval-tracker','title':'Token Approval Tracker','logo':'https://approval-tracker.apps.blockscout.com/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.apps.blockscout.com/'}]"
     NEXT_PUBLIC_LOGOUT_URL:
       _default: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_LOGOUT_RETURN_URL:
@@ -109,6 +107,8 @@ frontend:
       _default: https://stats-optimism-goerli.test.aws-k8s.blockscout.com
     NEXT_PUBLIC_API_SPEC_URL:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL:
+      _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
     NEXT_PUBLIC_NETWORK_EXPLORERS:
       _default: ''
     NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT:

deploy/values/review/values.yaml

@@ -101,8 +101,6 @@ 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.apps.blockscout.com/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.apps.blockscout.com/'},{'author': 'Revoke','id':'revoke.cash','title':'Revoke.cash','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FVBMGyUFnd6CScjfK7CYQ%252Frevoke_sing.png%3Falt%3Dmedia%26token%3D9ab94986-7ab1-41c8-bf7e-d9ce11d23182','categories':['security','tools'],'shortDescription': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','site': 'https://revoke.cash/about','description': 'Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.','url':'https://revoke.cash/'},{'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrZkUTIUCG7Zx8BW6Em34%252FAave.png%3Falt%3Dmedia%26token%3D249797a4-4c1e-4372-9cd2-3e48e05e5f30','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'},{'author':'LooksRare','id':'looksrare','external':true,'title':'LooksRare','logo': 'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FeAI4gy3qPMt68mZOZHAx%252FLooksRare.png%3Falt%3Dmedia%26token%3D44c01439-ae09-40aa-b904-3a9ce5b2e002','categories':['tools'],'shortDescription': 'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','site':'https://docs.looksrare.org/about/welcome-to-looksrare','description':'LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.','url': 'https://goerli.looksrare.org/'},{'author':'zkSync Bridge','id':'zksync-bridge','external':true,'title':'zkSync Bridge','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FrtQsaAz9BjGBc35tVAnq%252FzkSync.png%3Falt%3Dmedia%26token%3D5c18171c-8ccf-4a88-8f44-680cbf238115','categories':['security','tools'],'shortDescription':'zkSync 2.0 Goerli Bridge','site':'https://v2-docs.zksync.io/dev/','description':'zkSync 2.0 Goerli Bridge','url':'https://portal.zksync.io/bridge'},{'author':'dYdX','id':'dydx','external':true,'title':'dYdX','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FCrOglR72wpi0UhEscwe4%252Fdxdy.png%3Falt%3Dmedia%26token%3D8811909e-93e3-487c-9614-dffce37223e9','categories': ['security','tools'],'shortDescription':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','site':'https://help.dydx.exchange/en/articles/3047379-introduction-and-overview','description':'dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.','url':'https://trade.stage.dydx.exchange/portfolio/overview'},{'author':'MetalSwap','id':'metalswap','title':'MetalSwap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252F8xqldTvxb6avrwVVc3rS%252FMetalSwap.png%3Falt%3Dmedia%26token%3D92d2db99-853a-487d-8d8c-8cdeaeaaf014','categories':['security','tools'],'shortDescription':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','site':'https://docs.metalswap.finance/','description':'MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.','url':'https://demo.metalswap.finance/'},{'author':'FaucetDao','id':'faucetdao','title':'FaucetDao','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252Ffnnt3ZNZhzRwqMM5YYjD%252FPlaceholder.png%3Falt%3Dmedia%26token%3D507571bb-d76f-4d96-a35e-2b278608f7ca','categories':['tools'],'shortDescription':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','site':'https://linktr.ee/faucet_dao','description':'FaucetDao is a decentralised community fund providing liquidity and support to early-stage well vetted blockchain projects.','url':'https://www.faucetdao.shop/swap?chain=goerli'},{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=32,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FJc0QAyeaBmFIL97tSmGv%252FUniswap.png%3Falt%3Dmedia%26token%3D5d25d796-c273-4e22-92fa-ff85206bec76','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}]"
     NEXT_PUBLIC_LOGOUT_URL:
       _default: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_LOGOUT_RETURN_URL:
@@ -118,6 +116,8 @@ frontend:
       _default: "[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/ethereum/goerli/transaction','address':'/ethereum/ethereum/goerli/address'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address'}}]"
     NEXT_PUBLIC_API_SPEC_URL:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL:
+      _default: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
     NEXT_PUBLIC_IS_TESTNET:
       _default: true
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 

docs/ENVS.md

@@ -33,7 +33,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` | Link to Twitter in the footer | - | - | `https://www.twitter.com/blockscoutcom` |
 | NEXT_PUBLIC_FOOTER_TELEGRAM_LINK | `string` | Link to Telegram in the footer | - | - | `https://t.me/poa_network` |
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` | 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', 'external': true, '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_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 | - | - | `https://example.com/marketplace_config.json` |
 | 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` | Verification type in the network | - | `mining` | `validation` |

lib/csp/policies/app.ts

@@ -12,16 +12,7 @@ const MAIN_DOMAINS = [
 // eslint-disable-next-line no-restricted-properties
 const REPORT_URI = process.env.SENTRY_CSP_REPORT_URI;
 
-function getMarketplaceAppsHosts() {
-  return {
-    frames: appConfig.marketplaceAppList.map(({ url }) => new URL(url).host),
-    logos: appConfig.marketplaceAppList.map(({ logo }) => new URL(logo).host),
-  };
-}
-
 export function app(): CspDev.DirectiveDescriptor {
-  const marketplaceAppsHosts = getMarketplaceAppsHosts();
-
   return {
     'default-src': [
       // KEY_WORDS.NONE,
@@ -111,7 +102,8 @@ export function app(): CspDev.DirectiveDescriptor {
     ],
 
     'frame-src': [
-      ...marketplaceAppsHosts.frames,
+      // improve: allow only frames from marketplace config
+      '*',
     ],
 
     ...(REPORT_URI && !appConfig.isDev ? {

lib/hooks/useNavItems.tsx

@@ -64,7 +64,7 @@ export function isInternalItem(item: NavItem): item is NavItemInternal {
 }
 
 export default function useNavItems(): ReturnType {
-  const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0 && appConfig.network.rpcUrl;
+  const isMarketplaceAvailable = Boolean(appConfig.marketplaceConfigUrl && appConfig.network.rpcUrl);
   const hasAPIDocs = appConfig.apiDoc.specUrl;
 
   const router = useRouter();
@@ -170,7 +170,7 @@ export default function useNavItems(): ReturnType {
         isActive: pathname.startsWith('/token'),
         isNewUi: true,
       },
-      isMarketplaceFilled ? {
+      isMarketplaceAvailable ? {
         text: 'Apps',
         nextRoute: { pathname: '/apps' as const },
         icon: appsIcon,
@@ -234,5 +234,5 @@ export default function useNavItems(): ReturnType {
     };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ hasAPIDocs, isMarketplaceFilled, pathname ]);
+  }, [ hasAPIDocs, isMarketplaceAvailable, pathname ]);
 }

pages/apps/[id].tsx

 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import type { AppItemOverview } from 'types/client/apps';
-
-import appConfig from 'configs/app/config';
-import { apos } from 'lib/html-entities';
-import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import MarketplaceApp from 'ui/pages/MarketplaceApp';
 import Page from 'ui/shared/Page/Page';
 
 const AppPage: NextPage = () => {
-  const router = useRouter();
-  const [ isLoading, setIsLoading ] = useState(true);
-  const [ app, setApp ] = useState<AppItemOverview | undefined>(undefined);
-
-  const id = router.query.id;
-
-  useEffect(() => {
-    if (!id) {
-      return;
-    }
-
-    const app = appConfig.marketplaceAppList.find((app) => app.id === id);
-    setApp(app);
-    setIsLoading(false);
-  }, [ id ]);
-
-  if (app || isLoading) {
-    return (
-      <>
-        <Head><title>{ app ? `Blockscout | ${ app.title }` : 'Loading app..' }</title></Head>
-        <MarketplaceApp app={ app } isLoading={ isLoading }/>
-      </>
-    );
-  }
-
   return (
-    <Page>
-      <Head><title>Blockscout | No app found</title></Head>
-      <EmptySearchResult text={ `Couldn${ apos }t find an app.` }/>
+    <Page wrapChildren={ false }>
+      <Head><title>Blockscout | Marketplace</title></Head>
+      <MarketplaceApp/>
     </Page>
   );
 };

pages/apps.tsx → pages/apps/index.tsx

@@ -10,7 +10,7 @@ const AppsPage: NextPage = () => {
   return (
     <Page>
       <PageTitle text="Apps"/>
-      <Head><title>Apps</title></Head>
+      <Head><title>Blockscout | Marketplace</title></Head>
 
       <Apps/>
     </Page>

types/client/apps.ts

-export enum MarketplaceCategoryId {
-  'all',
-  'favorites',
-  'defi',
-  'exchanges',
-  'finance',
-  'games',
-  'marketplaces',
-  'nft',
-  'security',
-  'social',
-  'tools',
-  'yieldFarming',
-}
-
-export type MarketplaceCategoriesIds = keyof typeof MarketplaceCategoryId;
-
-export type MarketplaceCategory = { id: MarketplaceCategoriesIds; name: string }
-
 export type AppItemPreview = {
   id: string;
-  external: boolean;
+  external?: boolean;
   title: string;
   logo: string;
   shortDescription: string;
-  categories: Array<MarketplaceCategoriesIds>;
+  categories: Array<string>;
   url: string;
 }
 
@@ -35,3 +16,8 @@ export type AppItemOverview = AppItemPreview & {
   telegram?: string;
   github?: string;
 }
+
+export enum AppCategory {
+  ALL = 'All apps',
+  FAVORITES = 'Favorites',
+}

ui/apps/AppCard.tsx

@@ -9,7 +9,6 @@ import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 
 import AppCardLink from './AppCardLink';
-import { APP_CATEGORIES } from './constants';
 
 interface Props extends AppItemPreview {
   onInfoClick: (id: string) => void;
@@ -29,7 +28,7 @@ const AppCard = ({
   isFavorite,
   onFavoriteClick,
 }: Props) => {
-  const categoriesLabel = categories.map(c => APP_CATEGORIES[c]).filter(Boolean).join(', ');
+  const categoriesLabel = categories.join(', ');
 
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();

ui/apps/AppCardLink.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 type Props = {
   id: string;
   url: string;
-  external: boolean;
+  external?: boolean;
   title: string;
 }
 

ui/apps/AppList.tsx

-import { Grid, GridItem, Heading, VisuallyHidden } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AppItemPreview } from 'types/client/apps';
@@ -7,65 +7,44 @@ import { apos } from 'lib/html-entities';
 import AppCard from 'ui/apps/AppCard';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 
-import AppModal from './AppModal';
-
 type Props = {
   apps: Array<AppItemPreview>;
   onAppClick: (id: string) => void;
-  displayedAppId: string | null;
-  onModalClose: () => void;
   favoriteApps: Array<string>;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
 }
 
-const AppList = ({ apps, onAppClick, displayedAppId, onModalClose, favoriteApps, onFavoriteClick }: Props) => {
-  return (
-    <>
-      <VisuallyHidden>
-        <Heading as="h2">App list</Heading>
-      </VisuallyHidden>
-
-      { apps.length > 0 ? (
-        <Grid
-          templateColumns={{
-            sm: 'repeat(auto-fill, minmax(178px, 1fr))',
-            lg: 'repeat(auto-fill, minmax(260px, 1fr))',
-          }}
-          autoRows="1fr"
-          gap={{ base: '16px', sm: '24px' }}
+const AppList = ({ apps, onAppClick, favoriteApps, onFavoriteClick }: Props) => {
+  return apps.length > 0 ? (
+    <Grid
+      templateColumns={{
+        sm: 'repeat(auto-fill, minmax(178px, 1fr))',
+        lg: 'repeat(auto-fill, minmax(260px, 1fr))',
+      }}
+      autoRows="1fr"
+      gap={{ base: '16px', sm: '24px' }}
+    >
+      { apps.map((app) => (
+        <GridItem
+          key={ app.id }
         >
-          { apps.map((app) => (
-            <GridItem
-              key={ app.id }
-            >
-              <AppCard
-                onInfoClick={ onAppClick }
-                id={ app.id }
-                external={ app.external }
-                url={ app.url }
-                title={ app.title }
-                logo={ app.logo }
-                shortDescription={ app.shortDescription }
-                categories={ app.categories }
-                isFavorite={ favoriteApps.includes(app.id) }
-                onFavoriteClick={ onFavoriteClick }
-              />
-            </GridItem>
-          )) }
-        </Grid>
-      ) : (
-        <EmptySearchResult text={ `Couldn${ apos }t find an app that matches your filter query.` }/>
-      ) }
-
-      { displayedAppId && (
-        <AppModal
-          id={ displayedAppId }
-          onClose={ onModalClose }
-          isFavorite={ favoriteApps.includes(displayedAppId) }
-          onFavoriteClick={ onFavoriteClick }
-        />
-      ) }
-    </>
+          <AppCard
+            onInfoClick={ onAppClick }
+            id={ app.id }
+            external={ app.external }
+            url={ app.url }
+            title={ app.title }
+            logo={ app.logo }
+            shortDescription={ app.shortDescription }
+            categories={ app.categories }
+            isFavorite={ favoriteApps.includes(app.id) }
+            onFavoriteClick={ onFavoriteClick }
+          />
+        </GridItem>
+      )) }
+    </Grid>
+  ) : (
+    <EmptySearchResult text={ `Couldn${ apos }t find an app that matches your filter query.` }/>
   );
 };
 

ui/apps/AppModal.tsx

@@ -4,9 +4,8 @@ import {
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { AppItemOverview, MarketplaceCategoriesIds } from 'types/client/apps';
+import type { AppItemOverview } from 'types/client/apps';
 
-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';
@@ -17,20 +16,19 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 
 import AppModalLink from './AppModalLink';
-import { APP_CATEGORIES } from './constants';
 
 type Props = {
-  id: string;
   onClose: () => void;
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean) => void;
+  data: AppItemOverview;
 }
 
 const AppModal = ({
-  id,
   onClose,
   isFavorite,
   onFavoriteClick,
+  data,
 }: Props) => {
   const {
     title,
@@ -44,7 +42,7 @@ const AppModal = ({
     twitter,
     logo,
     categories,
-  } = appConfig.marketplaceAppList.find(app => app.id === id) as AppItemOverview;
+  } = data;
 
   const socialLinks = [
     telegram ? {
@@ -62,14 +60,14 @@ const AppModal = ({
   ].filter(Boolean);
 
   const handleFavoriteClick = useCallback(() => {
-    onFavoriteClick(id, isFavorite);
-  }, [ onFavoriteClick, id, isFavorite ]);
+    onFavoriteClick(data.id, isFavorite);
+  }, [ onFavoriteClick, data.id, isFavorite ]);
 
   const isMobile = useIsMobile();
 
   return (
     <Modal
-      isOpen={ Boolean(id) }
+      isOpen={ Boolean(data.id) }
       onClose={ onClose }
       size={ isMobile ? 'full' : 'md' }
       isCentered
@@ -123,7 +121,7 @@ const AppModal = ({
           >
             <Box display="flex">
               <AppModalLink
-                id={ id }
+                id={ data.id }
                 url={ url }
                 external={ external }
                 title={ title }
@@ -157,14 +155,14 @@ const AppModal = ({
           </Heading>
 
           <Box marginBottom={ 2 }>
-            { categories.map((category: MarketplaceCategoriesIds) => APP_CATEGORIES[category] && (
+            { categories.map((category) => (
               <Tag
                 colorScheme="blue"
                 marginRight={ 2 }
                 marginBottom={ 2 }
                 key={ category }
               >
-                { APP_CATEGORIES[category] }
+                { category }
               </Tag>
             )) }
           </Box>

ui/apps/AppModalLink.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 type Props = {
   id: string;
   url: string;
-  external: boolean;
+  external?: boolean;
   title: string;
 }
 

ui/apps/CategoriesMenu.tsx

 import { Box, Button, Icon, Menu, MenuButton, MenuList } from '@chakra-ui/react';
 import React from 'react';
 
-import type { MarketplaceCategoriesIds, MarketplaceCategory } from 'types/client/apps';
+import { AppCategory } from 'types/client/apps';
 
-import appConfig from 'configs/app/config';
 import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
 
 import CategoriesMenuItem from './CategoriesMenuItem';
-import { APP_CATEGORIES } from './constants';
-
-const categoriesList = Object.keys(APP_CATEGORIES).map((id: string) => ({
-  id: id,
-  name: APP_CATEGORIES[id as MarketplaceCategoriesIds],
-})) as Array<MarketplaceCategory>;
 
 type Props = {
-  selectedCategoryId: MarketplaceCategoriesIds;
-  onSelect: (category: MarketplaceCategoriesIds) => void;
+  categories: Array<string>;
+  selectedCategoryId: string;
+  onSelect: (category: string) => void;
 }
 
-const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
-  const selectedCategory = categoriesList.find(category => category.id === selectedCategoryId);
-  const actualCategories = appConfig.marketplaceAppList.map(app => app.categories).flat();
-  const displayedCategories = categoriesList.filter(category => category.id === 'all' ||
-      category.id === 'favorites' ||
-      actualCategories.includes(category.id));
+const CategoriesMenu = ({ selectedCategoryId, onSelect, categories }: Props) => {
+  const options = React.useMemo(() => ([
+    AppCategory.FAVORITES,
+    AppCategory.ALL,
+    ...categories,
+  ]), [ categories ]);
 
   return (
     <Menu>
@@ -42,17 +36,16 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
           display="flex"
           alignItems="center"
         >
-          { selectedCategory?.name }
+          { selectedCategoryId }
           <Icon transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/>
         </Box>
       </MenuButton>
 
       <MenuList zIndex={ 3 }>
-        { displayedCategories.map((category: MarketplaceCategory) => (
+        { options.map((category: string) => (
           <CategoriesMenuItem
-            key={ category.id }
-            id={ category.id }
-            name={ category.name }
+            key={ category }
+            id={ category }
             onClick={ onSelect }
           />
         )) }

ui/apps/CategoriesMenuItem.tsx

@@ -2,21 +2,20 @@ import { Icon, MenuItem } from '@chakra-ui/react';
 import type { FunctionComponent, SVGAttributes } from 'react';
 import React, { useCallback } from 'react';
 
-import type { MarketplaceCategoriesIds } from 'types/client/apps';
+import { AppCategory } from 'types/client/apps';
 
 import starFilledIcon from 'icons/star_filled.svg';
 
 type Props = {
-  id: MarketplaceCategoriesIds;
-  name: string;
-  onClick: (category: MarketplaceCategoriesIds) => void;
+  id: string;
+  onClick: (category: string) => void;
 }
 
-const ICONS = {
-  favorites: starFilledIcon,
-} as { [key in MarketplaceCategoriesIds]: FunctionComponent<SVGAttributes<SVGElement>> };
+const ICONS: Record<string, FunctionComponent<SVGAttributes<SVGElement>>> = {
+  [AppCategory.FAVORITES]: starFilledIcon,
+};
 
-const CategoriesMenuItem = ({ id, name, onClick }: Props) => {
+const CategoriesMenuItem = ({ id, onClick }: Props) => {
   const handleSelection = useCallback(() => {
     onClick(id);
   }, [ id, onClick ]);
@@ -28,11 +27,8 @@ const CategoriesMenuItem = ({ id, name, onClick }: Props) => {
       display="flex"
       alignItems="center"
     >
-      { id in ICONS && (
-        <Icon mr={ 3 } as={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/>
-      ) }
-
-      { name }
+      { id in ICONS && <Icon mr={ 3 } as={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> }
+      { id }
     </MenuItem>
   );
 };

ui/apps/constants.ts

-import type { MarketplaceCategoriesIds } from 'types/client/apps';
-
-export const APP_CATEGORIES: {[key in MarketplaceCategoriesIds]: string} = {
-  favorites: 'Favorites',
-  all: 'All apps',
-  defi: 'DeFi',
-  exchanges: 'Exchanges',
-  finance: 'Finance',
-  games: 'Games',
-  marketplaces: 'Marketplaces',
-  nft: 'NFT',
-  security: 'Security',
-  social: 'Social',
-  tools: 'Tools',
-  yieldFarming: 'Yield farming',
-};

ui/apps/useMarketplaceApps.tsx

-import debounce from 'lodash/debounce';
+import { useQuery } from '@tanstack/react-query';
+import _unique from 'lodash/uniq';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import type { AppItemOverview, MarketplaceCategoriesIds } from 'types/client/apps';
+import type { AppItemOverview } from 'types/client/apps';
+import { AppCategory } from 'types/client/apps';
 
 import appConfig from 'configs/app/config';
+import type { ResourceError } from 'lib/api/resources';
+import useDebounce from 'lib/hooks/useDebounce';
+import useApiFetch from 'lib/hooks/useFetch';
 
 const favoriteAppsLocalStorageKey = 'favoriteApps';
 
@@ -19,21 +24,26 @@ function isAppNameMatches(q: string, app: AppItemOverview) {
   return app.title.toLowerCase().includes(q.toLowerCase());
 }
 
-function isAppCategoryMatches(category: MarketplaceCategoriesIds, app: AppItemOverview, favoriteApps: Array<string>) {
-  return category === 'all' ||
-      (category === 'favorites' && favoriteApps.includes(app.id)) ||
+function isAppCategoryMatches(category: string, app: AppItemOverview, favoriteApps: Array<string>) {
+  return category === AppCategory.ALL ||
+      (category === AppCategory.FAVORITES && favoriteApps.includes(app.id)) ||
       app.categories.includes(category);
 }
 
 export default function useMarketplaceApps() {
-  const [ isLoading, setIsLoading ] = useState(true);
-  const [ defaultAppList, setDefaultAppList ] = useState<Array<AppItemOverview>>();
-  const [ displayedApps, setDisplayedApps ] = useState<Array<AppItemOverview>>([]);
-  const [ displayedAppId, setDisplayedAppId ] = useState<string | null>(null);
-  const [ category, setCategory ] = useState<MarketplaceCategoriesIds>('all');
+  const [ selectedAppId, setSelectedAppId ] = useState<string | null>(null);
+  const [ selectedCategoryId, setSelectedCategoryId ] = useState<string>(AppCategory.ALL);
   const [ filterQuery, setFilterQuery ] = useState('');
   const [ favoriteApps, setFavoriteApps ] = useState<Array<string>>([]);
 
+  const apiFetch = useApiFetch();
+  const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<AppItemOverview>>(
+    [ 'marketplace-apps' ],
+    async() => apiFetch(appConfig.marketplaceConfigUrl || ''),
+    {
+      select: (data) => (data as Array<AppItemOverview>).sort((a, b) => a.title.localeCompare(b.title)),
+    });
+
   const handleFavoriteClick = useCallback((id: string, isFavorite: boolean) => {
     const favoriteApps = getFavoriteApps();
 
@@ -49,61 +59,53 @@ export default function useMarketplaceApps() {
   }, [ ]);
 
   const showAppInfo = useCallback((id: string) => {
-    setDisplayedAppId(id);
+    setSelectedAppId(id);
   }, []);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceFilterApps = useCallback(debounce(q => setFilterQuery(q), 500), []);
-  const clearDisplayedAppId = useCallback(() => setDisplayedAppId(null), []);
-
-  const filterApps = useCallback((q: string, category: MarketplaceCategoriesIds) => {
-    const apps = defaultAppList
-      ?.filter(app => {
-        return isAppNameMatches(q, app) && isAppCategoryMatches(category, app, favoriteApps);
-      });
-
-    setDisplayedApps(apps || []);
-  }, [ defaultAppList, favoriteApps ]);
+  const debouncedFilterQuery = useDebounce(filterQuery, 500);
+  const clearSelectedAppId = useCallback(() => setSelectedAppId(null), []);
 
-  const handleCategoryChange = useCallback((newCategory: MarketplaceCategoriesIds) => {
-    setCategory(newCategory);
+  const handleCategoryChange = useCallback((newCategory: string) => {
+    setSelectedCategoryId(newCategory);
   }, []);
 
-  useEffect(() => {
-    setFavoriteApps(getFavoriteApps());
-  }, [ ]);
+  const displayedApps = React.useMemo(() => {
+    return data?.filter(app => isAppNameMatches(debouncedFilterQuery, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || [];
+  }, [ selectedCategoryId, data, debouncedFilterQuery, favoriteApps ]);
 
-  useEffect(() => {
-    filterApps(filterQuery, category);
-  }, [ filterQuery, category, filterApps ]);
+  const categories = React.useMemo(() => {
+    return _unique(data?.map(app => app.categories).flat()) || [];
+  }, [ data ]);
 
   useEffect(() => {
-    const defaultDisplayedApps = [ ...appConfig.marketplaceAppList ]
-      .sort((a, b) => a.title.localeCompare(b.title));
-
-    setDefaultAppList(defaultDisplayedApps);
-    setDisplayedApps(defaultDisplayedApps);
-    setIsLoading(false);
+    setFavoriteApps(getFavoriteApps());
   }, [ ]);
 
   return React.useMemo(() => ({
-    category,
-    handleCategoryChange,
-    debounceFilterApps,
+    selectedCategoryId,
+    onCategoryChange: handleCategoryChange,
+    onSearchInputChange: setFilterQuery,
     isLoading,
+    isError,
+    error,
+    categories,
     displayedApps,
     showAppInfo,
-    displayedAppId,
-    clearDisplayedAppId,
+    selectedAppId,
+    clearSelectedAppId,
     favoriteApps,
-    handleFavoriteClick,
-  }), [ category,
-    clearDisplayedAppId,
-    debounceFilterApps,
-    displayedAppId, displayedApps,
+    onFavoriteClick: handleFavoriteClick,
+  }), [
+    selectedCategoryId,
+    categories,
+    clearSelectedAppId,
+    selectedAppId,
+    displayedApps,
+    error,
     favoriteApps,
     handleCategoryChange,
     handleFavoriteClick,
+    isError,
     isLoading,
     showAppInfo,
   ]);

ui/pages/Apps.tsx

@@ -5,6 +5,7 @@ import config from 'configs/app/config';
 import PlusIcon from 'icons/plus.svg';
 import AppList from 'ui/apps/AppList';
 import AppListSkeleton from 'ui/apps/AppListSkeleton';
+import AppModal from 'ui/apps/AppModal';
 import CategoriesMenu from 'ui/apps/CategoriesMenu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 
@@ -13,17 +14,26 @@ import useMarketplaceApps from '../apps/useMarketplaceApps';
 const Apps = () => {
   const {
     isLoading,
-    category,
-    handleCategoryChange,
-    debounceFilterApps,
+    isError,
+    error,
+    selectedCategoryId,
+    categories,
+    onCategoryChange,
+    onSearchInputChange,
     showAppInfo,
     displayedApps,
-    displayedAppId,
-    clearDisplayedAppId,
+    selectedAppId,
+    clearSelectedAppId,
     favoriteApps,
-    handleFavoriteClick,
+    onFavoriteClick,
   } = useMarketplaceApps();
 
+  if (isError) {
+    throw new Error('Unable to get apps list', { cause: error });
+  }
+
+  const selectedApp = displayedApps.find(app => app.id === selectedAppId);
+
   return (
     <>
       <Box
@@ -31,21 +41,29 @@ const Apps = () => {
         flexDirection={{ base: 'column', sm: 'row' }}
       >
         <CategoriesMenu
-          selectedCategoryId={ category }
-          onSelect={ handleCategoryChange }
+          categories={ categories }
+          selectedCategoryId={ selectedCategoryId }
+          onSelect={ onCategoryChange }
         />
 
-        <FilterInput onChange={ debounceFilterApps } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
+        <FilterInput onChange={ onSearchInputChange } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
       </Box>
 
       { isLoading ? <AppListSkeleton/> : (
         <AppList
           apps={ displayedApps }
           onAppClick={ showAppInfo }
-          displayedAppId={ displayedAppId }
-          onModalClose={ clearDisplayedAppId }
           favoriteApps={ favoriteApps }
-          onFavoriteClick={ handleFavoriteClick }
+          onFavoriteClick={ onFavoriteClick }
+        />
+      ) }
+
+      { selectedApp && (
+        <AppModal
+          onClose={ clearSelectedAppId }
+          isFavorite={ favoriteApps.includes(selectedApp.id) }
+          onFavoriteClick={ onFavoriteClick }
+          data={ selectedApp }
         />
       ) }
 

ui/pages/MarketplaceApp.tsx

 import { Box, Center, useColorMode } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import { route } from 'nextjs-routes';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { AppItemOverview } from 'types/client/apps';
 
 import appConfig from 'configs/app/config';
+import type { ResourceError } from 'lib/api/resources';
+import useApiFetch from 'lib/hooks/useFetch';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
-import Page from 'ui/shared/Page/Page';
 
-type Props = {
-  app?: AppItemOverview;
-  isLoading: boolean;
-}
+const IFRAME_SANDBOX_ATTRIBUTE = 'allow-forms allow-orientation-lock ' +
+'allow-pointer-lock allow-popups-to-escape-sandbox ' +
+'allow-same-origin allow-scripts ' +
+'allow-top-navigation-by-user-activation allow-popups';
+
+const IFRAME_ALLOW_ATTRIBUTE = 'clipboard-read; clipboard-write;';
+
+const MarketplaceApp = () => {
+  const ref = useRef<HTMLIFrameElement>(null);
+
+  const apiFetch = useApiFetch();
+  const router = useRouter();
+  const id = getQueryParamString(router.query.id);
+
+  const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, AppItemOverview>(
+    [ 'marketplace-apps', id ],
+    async() => {
+      const result = await apiFetch<Array<AppItemOverview>, unknown>(appConfig.marketplaceConfigUrl || '');
+      if (!Array.isArray(result)) {
+        throw result;
+      }
+
+      const item = result.find((app: AppItemOverview) => app.id === id);
+      if (!item) {
+        throw { status: 404 };
+      }
+
+      return item;
+    },
+  );
 
-const MarketplaceApp = ({ app, isLoading }: Props) => {
   const [ isFrameLoading, setIsFrameLoading ] = useState(isLoading);
   const { colorMode } = useColorMode();
-  const ref = useRef<HTMLIFrameElement>(null);
 
   const handleIframeLoad = useCallback(() => {
     setIsFrameLoading(false);
   }, []);
 
   useEffect(() => {
-    if (app && !isFrameLoading) {
+    if (data && !isFrameLoading) {
       const message = {
         blockscoutColorMode: colorMode,
         blockscoutRootUrl: appConfig.baseUrl + route({ pathname: '/' }),
@@ -35,45 +63,40 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
         blockscoutNetworkRpc: appConfig.network.rpcUrl,
       };
 
-      ref?.current?.contentWindow?.postMessage(message, app.url);
+      ref?.current?.contentWindow?.postMessage(message, data.url);
     }
-  }, [ isFrameLoading, app, colorMode, ref ]);
+  }, [ isFrameLoading, data, colorMode, ref ]);
 
-  const sandboxAttributeValue = 'allow-forms allow-orientation-lock ' +
-      'allow-pointer-lock allow-popups-to-escape-sandbox ' +
-      'allow-same-origin allow-scripts ' +
-      'allow-top-navigation-by-user-activation allow-popups';
-
-  const allowAttributeValue = 'clipboard-read; clipboard-write;';
+  if (isError) {
+    throw new Error('Unable to load app', { cause: error });
+  }
 
   return (
-    <Page wrapChildren={ false }>
-      <Center
-        as="main"
-        h="100vh"
-        pt={{ base: '138px', lg: 0 }}
-        pb={{ base: 0, lg: 10 }}
-      >
-        { (isFrameLoading) && (
-          <ContentLoader/>
-        ) }
-
-        { app && (
-          <Box
-            allow={ allowAttributeValue }
-            ref={ ref }
-            sandbox={ sandboxAttributeValue }
-            as="iframe"
-            h="100%"
-            w="100%"
-            display={ isFrameLoading ? 'none' : 'block' }
-            src={ app.url }
-            title={ app.title }
-            onLoad={ handleIframeLoad }
-          />
-        ) }
-      </Center>
-    </Page>
+    <Center
+      as="main"
+      h="100vh"
+      pt={{ base: '138px', lg: 0 }}
+      pb={{ base: 0, lg: 10 }}
+    >
+      { (isFrameLoading) && (
+        <ContentLoader/>
+      ) }
+
+      { data && (
+        <Box
+          allow={ IFRAME_ALLOW_ATTRIBUTE }
+          ref={ ref }
+          sandbox={ IFRAME_SANDBOX_ATTRIBUTE }
+          as="iframe"
+          h="100%"
+          w="100%"
+          display={ isFrameLoading ? 'none' : 'block' }
+          src={ data.url }
+          title={ data.title }
+          onLoad={ handleIframeLoad }
+        />
+      ) }
+    </Center>
   );
 };