From 024d898d8bc865127c77a1bd11597ca44d9eed44 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:16:52 +0300 Subject: [PATCH 01/12] Add support for 'dapp' category in logo fetching and utility functions --- helpers/utils.js | 15 ++++++++++++--- scripts/build-svg.js | 10 +++++++--- scripts/fetch-missing.js | 2 ++ scripts/version-check.js | 2 ++ 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/helpers/utils.js b/helpers/utils.js index 71d96c4b..19539d1b 100644 --- a/helpers/utils.js +++ b/helpers/utils.js @@ -15,9 +15,14 @@ module.exports = { getManualLogos, getSupportedChains, getApiProviders, - getSupportedFeeds + getSupportedFeeds, + getDapps }; +function getDapps() { + return []; +} + function getApiProviders() { const providers = [...new Set(dapis.map((dapi) => dapi.providers).flat())]; const filteredApiProviders = providers.filter((api) => !api.match(/(.*)(-mock)/)); @@ -43,8 +48,10 @@ function getSupportList(mode) { return getSupportedFeeds(); case 'api-provider': return getApiProviders(); + case 'dapp': + return getDapps(); default: - break; + return []; } } @@ -56,8 +63,10 @@ function getManualLogos(mode) { return []; case 'api-provider': return []; + case 'dapp': + return []; default: - break; + return []; } } diff --git a/scripts/build-svg.js b/scripts/build-svg.js index 44e15daf..da132314 100644 --- a/scripts/build-svg.js +++ b/scripts/build-svg.js @@ -6,11 +6,12 @@ const camelcase = require('camelcase'); const outputPath = './dist'; -const categories = ['chain', 'symbol', 'api-provider']; +const categories = ['chain', 'symbol', 'api-provider', 'dapp']; let chainLightLogos = []; let apiProviderLightLogos = []; let symbolLightLogos = []; +let dappsLightLogos = []; function getLogoList(mode) { switch (mode) { @@ -20,8 +21,10 @@ function getLogoList(mode) { return [...symbolLightLogos, ...utils.getManualLogos(mode), ...utils.getSupportedFeeds()]; case 'api-provider': return [...apiProviderLightLogos, ...utils.getManualLogos(mode), ...utils.getApiProviders()]; + case 'dapp': + return [...dappsLightLogos, ...utils.getManualLogos(mode), ...utils.getDapps()]; default: - break; + return []; } } @@ -119,7 +122,8 @@ async function findLightLogos() { const [chainFiles, apiProviderFiles, symbolFiles] = await Promise.all([ fs.readdir('./optimized/chain', 'utf-8'), fs.readdir('./optimized/api-provider', 'utf-8'), - fs.readdir('./optimized/symbol', 'utf-8') + fs.readdir('./optimized/symbol', 'utf-8'), + fs.readdir('./optimized/dapp', 'utf-8') ]); chainLightLogos = chainFiles.filter((file) => file.includes('light')).map((file) => file.replace('Chain', '')); diff --git a/scripts/fetch-missing.js b/scripts/fetch-missing.js index 5e0c2339..bf4b4be1 100644 --- a/scripts/fetch-missing.js +++ b/scripts/fetch-missing.js @@ -41,6 +41,8 @@ function getLogoList(mode) { return [...utils.getManualLogos(mode), ...utils.getSupportedFeeds()]; case 'api-provider': return [...utils.getManualLogos(mode), ...utils.getApiProviders()]; + case 'dapp': + return [...utils.getManualLogos(mode), ...utils.getDapps()]; default: break; } diff --git a/scripts/version-check.js b/scripts/version-check.js index cf7765ff..e88ca058 100644 --- a/scripts/version-check.js +++ b/scripts/version-check.js @@ -39,6 +39,8 @@ function getLogoList(mode) { return [...utils.getManualLogos(mode), ...utils.getSupportedFeeds()]; case 'api-provider': return [...utils.getManualLogos(mode), ...utils.getApiProviders()]; + case 'dapp': + return [...utils.getManualLogos(mode), ...utils.getDapps()]; default: break; } From 26301147b05b10daef55728560a97df5d09bd618 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:16:59 +0300 Subject: [PATCH 02/12] Add optimization for 'dapp' logos in build process --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index f07cc57b..4da119d2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "optimize-chain-logos": "rimraf ./optimized/chain & svgo -q -p 8 -f ./raw/chains -o ./optimized/chain", "optimize-symbol-logos": "rimraf ./optimized/symbol & svgo -q -p 8 -f ./raw/symbols -o ./optimized/symbol", "optimize-api-provider-logos": "rimraf ./optimized/api-provider & svgo -q -p 8 -f ./raw/api-providers -o ./optimized/api-provider", - "build": "pnpm run optimize-chain-logos && pnpm run optimize-symbol-logos && pnpm run optimize-api-provider-logos && node scripts/build-svg.js", + "optimize-dapp-logos": "rimraf ./optimized/dapp & svgo -q -p 8 -f ./raw/dapps -o ./optimized/dapp", + "build": "pnpm run optimize-chain-logos && pnpm run optimize-symbol-logos && pnpm run optimize-api-provider-logos && pnpm run optimize-dapp-logos && node scripts/build-svg.js", "fetch": "node scripts/fetch-missing.js", "version-check": "node scripts/version-check.js", "package": "pnpm run build", From b29c5fcdbed84b672bed0bfbf600670b6071f092 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:17:04 +0300 Subject: [PATCH 03/12] Add placeholder SVG for dapp logos --- raw/dapps/Placeholder.svg | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 raw/dapps/Placeholder.svg diff --git a/raw/dapps/Placeholder.svg b/raw/dapps/Placeholder.svg new file mode 100644 index 00000000..5ad200b3 --- /dev/null +++ b/raw/dapps/Placeholder.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From f2521fd8db584ba05254747ec26fa3a2d85b8718 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 26 Feb 2025 13:27:58 +0300 Subject: [PATCH 04/12] Delete ultraETHs.svg --- raw/symbols/ultraETHs.svg | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 raw/symbols/ultraETHs.svg diff --git a/raw/symbols/ultraETHs.svg b/raw/symbols/ultraETHs.svg deleted file mode 100644 index f923bb0d..00000000 --- a/raw/symbols/ultraETHs.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - From fe41a4dc3dae51bee77d750f4137b6c554d47cb3 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 26 Feb 2025 15:14:47 +0300 Subject: [PATCH 05/12] Enhance utility functions to include api3Contracts and improve switch case handling --- helpers/utils.js | 15 +++++++++++---- scripts/build-svg.js | 10 +++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/helpers/utils.js b/helpers/utils.js index 8701bead..01c87669 100644 --- a/helpers/utils.js +++ b/helpers/utils.js @@ -1,6 +1,6 @@ const fs = require('fs/promises'); const { rename } = require('fs'); -const { getChains, dapis } = require('@api3/dapi-management'); +const { getChains, dapis, api3Contracts } = require('@api3/dapi-management'); module.exports = { sanitizeName, @@ -20,7 +20,7 @@ module.exports = { }; function getDapps() { - return []; + return api3Contracts.DAPPS.map((dapp) => dapp.alias); } function getApiProviders() { @@ -88,14 +88,20 @@ function sanitizeName(name, suffix = '', prefix = '') { return prefix + componentName + suffix; } -function generateSwitchCase(array, prefix) { +function generateSwitchCase(files, array, prefix) { const sanitized = array.map((item) => { return sanitizeName(item, '', ''); }); + const file_prefix = prefix === 'Chain' ? 'Chain' : ''; + const filtered = [...new Set(sanitized)]; return filtered - .map((item) => `case "${sanitizeName(item).toLowerCase()}":\n\treturn ${prefix}${sanitizeName(item, '')};\n`) + .map((item) => { + let filename = checkFile(files, item, file_prefix); + if (item !== 'Placeholder' && filename === 'Placeholder.svg') return ''; + return `case "${sanitizeName(item).toLowerCase()}":\n\treturn ${prefix}${sanitizeName(item, '')};\n`; + }) .join(''); } @@ -120,6 +126,7 @@ function generateImports(files, array, prefix, file_prefix, path, format) { return filtered .map((item) => { let filename = checkFile(files, item, file_prefix); + if (item !== 'Placeholder' && filename === 'Placeholder.svg') return ''; return formatImport(item, filename, prefix, path, format); }) .join(''); diff --git a/scripts/build-svg.js b/scripts/build-svg.js index bbbe6cd6..cc0c142c 100644 --- a/scripts/build-svg.js +++ b/scripts/build-svg.js @@ -44,8 +44,8 @@ async function buildLogos(format = 'esm', dir, mode, batchName) { await fs.appendFile(`${outDir}/${batchName}Missing.json`, JSON.stringify(getMissingLogos(files, mode)), 'utf-8'); } -function buildSwitchCase(mode) { - return utils.generateSwitchCase(getLogoList(mode), utils.toPascalCase(mode)); +function buildSwitchCase(files, mode) { + return utils.generateSwitchCase(files, getLogoList(mode), utils.toPascalCase(mode)); } function buildLogoImports(files, mode, format) { @@ -72,7 +72,7 @@ async function buildBatch(files, outDir, format = 'esm', batchName, mode) { const imports = buildLogoImports(files, mode, format); - let code = await babelTransform(format, imports, batchName, mode); + let code = await babelTransform(files, format, imports, batchName, mode); if (format === 'cjs') { code = code.replace('export default', 'module.exports ='); @@ -81,11 +81,11 @@ async function buildBatch(files, outDir, format = 'esm', batchName, mode) { await fs.writeFile(`${outDir}/${batchName}.js`, code, 'utf-8'); } -async function babelTransform(format, imports, batchName, mode) { +async function babelTransform(files, format, imports, batchName, mode) { let { code } = await babel.transformAsync( ` ${imports} - ${utils.generateFunction(batchName, buildSwitchCase(mode), mode)}`, + ${utils.generateFunction(batchName, buildSwitchCase(files, mode), mode)}`, { presets: [['@babel/preset-react', { useBuiltIns: true }]] } From ac339309e530093e81cc8df35fdd4c0c27a9e9f3 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 26 Feb 2025 15:14:55 +0300 Subject: [PATCH 06/12] Add DappView component and enhance ChainsView with search functionality --- viewer/src/Components/ChainsView.js | 17 +++++--- viewer/src/Components/DappView.js | 66 +++++++++++++++++++++++++++++ viewer/src/Components/Welcome.js | 2 + 3 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 viewer/src/Components/DappView.js diff --git a/viewer/src/Components/ChainsView.js b/viewer/src/Components/ChainsView.js index c6d4171f..1816031c 100644 --- a/viewer/src/Components/ChainsView.js +++ b/viewer/src/Components/ChainsView.js @@ -6,17 +6,20 @@ import { useState } from 'react'; import Title from '../Custom/Title'; import InfoView from '../Custom/InfoView'; -const getSupportedChains = (isTestnet) => { +const getSupportedChains = (isTestnet, searchArg) => { const supportedChainIds = getChains() .filter((chain) => chain.stage !== 'retired') + .filter((chain) => + searchArg ? chain.alias.includes(searchArg.toLowerCase()) || chain.id.includes(searchArg) : true + ) .map((chain) => chain.id); return api3Contracts.CHAINS.filter((chain) => supportedChainIds.includes(chain.id) && chain.testnet === isTestnet); }; -const ChainList = ({ isTestnet, chain }) => { +const ChainList = ({ isTestnet, searchArg }) => { const [selectedChain, setSelectedChain] = useState(''); - return getSupportedChains(isTestnet).map((chain, index) => { + return getSupportedChains(isTestnet, searchArg).map((chain, index) => { return ( { }; const ChainsView = () => { - const [chain, setChain] = useState(''); + const [searchArg, setSearchArg] = useState(''); return ( @@ -61,11 +64,11 @@ const ChainsView = () => { {getSupportedChains(true).length} testnet chains - + - <ChainList isTestnet={false} chain={chain} /> + <ChainList isTestnet={false} searchArg={searchArg} /> <Title header={'Testnets'} /> - <ChainList isTestnet={true} chain={chain} /> + <ChainList isTestnet={true} searchArg={searchArg} /> </Flex> ); }; diff --git a/viewer/src/Components/DappView.js b/viewer/src/Components/DappView.js new file mode 100644 index 00000000..31461d01 --- /dev/null +++ b/viewer/src/Components/DappView.js @@ -0,0 +1,66 @@ +import { Flex, Text, Image } from '@chakra-ui/react'; +import { DappLogo } from '@api3/logos'; +import SearchRow from '../Custom/SearchRow'; +import { useState } from 'react'; +import InfoView from '../Custom/InfoView'; +import { api3Contracts } from '@api3/dapi-management'; + +const DappView = () => { + const [searchArg, setSearchArg] = useState(''); + const [selectedDapp, setSelectedDapp] = useState(''); + + const getDapps = () => { + const dapps = [...new Set(api3Contracts.DAPPS)]; + return dapps.filter((dapp) => dapp.name.toLowerCase().includes(searchArg.toLowerCase())); + }; + + return ( + <Flex p={3} gap={3} bgColor={'white'} wrap={'wrap'} alignItems="center" justifyContent="center"> + <Flex width={'100%'}> + <Text fontSize="md" fontWeight="bold" ml={2}> + There is a total of {getDapps().length} dapps + </Text> + </Flex> + <SearchRow text={searchArg} setText={setSearchArg} placeholder={'Enter a dapp name'} /> + + {getDapps().map((dapp, index) => { + return ( + <Flex + p={3} + boxShadow={'md'} + width={'310px'} + height={'80px'} + bgColor={'gray.100'} + key={index} + alignItems="center" + justifyContent="left" + onMouseDown={() => setSelectedDapp(dapp.alias)} + cursor={'pointer'} + > + {selectedDapp !== dapp.alias ? ( + <> + <Image src={DappLogo(dapp.alias)} width={50} height={50} bgColor={'white'} p={2} /> + <Image + src={DappLogo(dapp.alias, true)} + width={50} + height={50} + bgColor={'black'} + p={2} + /> + <Text fontSize="md" fontWeight="bold" ml={2}> + {dapp.name} + </Text> + </> + ) : ( + <> + <InfoView method={'Dapp'} feed={dapp.alias} onExit={() => selectedDapp(null)} /> + </> + )} + </Flex> + ); + })} + </Flex> + ); +}; + +export default DappView; diff --git a/viewer/src/Components/Welcome.js b/viewer/src/Components/Welcome.js index 9128a6b7..73b43b61 100644 --- a/viewer/src/Components/Welcome.js +++ b/viewer/src/Components/Welcome.js @@ -1,6 +1,7 @@ import SymbolsView from './SymbolsView'; import ChainsView from './ChainsView'; import ApiProviderView from './ApiProviderView'; +import DappView from './DappView'; import MissingLogosView from './MissingLogosView'; import Docs from './Docs'; import { VStack } from '@chakra-ui/react'; @@ -21,6 +22,7 @@ const Welcome = () => { <ExpandableView header={'Symbols'} view={<SymbolsView />} /> <ExpandableView header={'Chains'} view={<ChainsView />} /> <ExpandableView header={'ApiProviders'} view={<ApiProviderView />} /> + <ExpandableView header={'Dapps'} view={<DappView />} /> <ExpandableView header={'Missing Logos'} view={<MissingLogosView />} /> <ExpandableView header={'How to use'} view={<Docs />} /> </VStack> From 224669c5a2ff9307451583dcd4fc8cd53db172f9 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 26 Feb 2025 17:07:00 +0300 Subject: [PATCH 07/12] Refactor copySvgFiles function to use sanitizeName for improved file name handling --- helpers/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helpers/utils.js b/helpers/utils.js index 01c87669..d492694c 100644 --- a/helpers/utils.js +++ b/helpers/utils.js @@ -208,7 +208,7 @@ async function copySvgFiles(files, logosDir, prefix = '') { files.forEach(async (file) => { const isSupported = supportList.some( - (item) => item.toLowerCase() === file.replace('.svg', '').replace('Chain', '').toLowerCase() + (item) => sanitizeName(item).toLowerCase() === file.replace('.svg', '').replace('Chain', '').toLowerCase() ) || exceptions.some((item) => file.includes(item)); if (!isSupported) return; await fs.copyFile(`./optimized/${prefix}/${file}`, `${logosDir}/${file}`); From 5d4e55ad2d2d25cc71dff1d7755af514719db0eb Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Wed, 26 Feb 2025 17:31:42 +0300 Subject: [PATCH 08/12] Increase limit for fetching logos from Dropbox API --- scripts/fetch-missing.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/fetch-missing.js b/scripts/fetch-missing.js index 5e0c2339..df28589e 100644 --- a/scripts/fetch-missing.js +++ b/scripts/fetch-missing.js @@ -93,7 +93,7 @@ async function searchLogos() { async function fetchLogos() { const dbx = await getDropbox(); try { - const response = await dbx.filesListFolder({ path: '', recursive: true }); + const response = await dbx.filesListFolder({ path: '', recursive: true, limit: 1000 }); return response.result.entries; } catch (error) { console.error(error); From ed2a8b4ae407a35785df76c8ec26d55f057b2763 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Thu, 27 Feb 2025 14:00:09 +0300 Subject: [PATCH 09/12] Refactor copySvgFiles function for improved readability and maintainability --- helpers/utils.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/helpers/utils.js b/helpers/utils.js index d492694c..0726355a 100644 --- a/helpers/utils.js +++ b/helpers/utils.js @@ -208,7 +208,8 @@ async function copySvgFiles(files, logosDir, prefix = '') { files.forEach(async (file) => { const isSupported = supportList.some( - (item) => sanitizeName(item).toLowerCase() === file.replace('.svg', '').replace('Chain', '').toLowerCase() + (item) => + sanitizeName(item).toLowerCase() === file.replace('.svg', '').replace('Chain', '').toLowerCase() ) || exceptions.some((item) => file.includes(item)); if (!isSupported) return; await fs.copyFile(`./optimized/${prefix}/${file}`, `${logosDir}/${file}`); From c388e9ca781b02980693209c6a78894767ad0a88 Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Thu, 27 Feb 2025 15:34:50 +0300 Subject: [PATCH 10/12] Add isStringMatch utility function for case-insensitive string comparison --- helpers/utils.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/helpers/utils.js b/helpers/utils.js index 0726355a..f83dc7ca 100644 --- a/helpers/utils.js +++ b/helpers/utils.js @@ -16,7 +16,8 @@ module.exports = { getApiProviders, getSupportedFeeds, getDapps, - toPascalCase + toPascalCase, + isStringMatch }; function getDapps() { @@ -88,6 +89,10 @@ function sanitizeName(name, suffix = '', prefix = '') { return prefix + componentName + suffix; } +function isStringMatch(val1, val2) { + return sanitizeName(val1).toLowerCase() === sanitizeName(val2).toLowerCase(); +} + function generateSwitchCase(files, array, prefix) { const sanitized = array.map((item) => { return sanitizeName(item, '', ''); From 5bf0dd8a3fb1f5402de4dc5541f9a2ac8924a79a Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Thu, 27 Feb 2025 15:35:27 +0300 Subject: [PATCH 11/12] Add 'dapp' category to logo fetching and version checking scripts --- scripts/fetch-missing.js | 8 +++----- scripts/version-check.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/scripts/fetch-missing.js b/scripts/fetch-missing.js index bf4b4be1..5ae53243 100644 --- a/scripts/fetch-missing.js +++ b/scripts/fetch-missing.js @@ -7,7 +7,7 @@ const fetch = require('node-fetch'); let missingLogos = []; -const categories = ['chain', 'symbol', 'api-provider']; +const categories = ['chain', 'symbol', 'api-provider', 'dapp']; let dbx = null; @@ -77,10 +77,8 @@ async function searchLogos() { missingLogos.map((missingLogoCategory) => { missingLogoCategory.logos.map((missingLogo) => { foundLogos.map((foundLogo) => { - if ( - utils.sanitizeName(foundLogo.name).toLowerCase() === - `${utils.sanitizeName(missingLogo).toLowerCase()}` - ) { + const isCategoryMatch = foundLogo.path_lower.includes(missingLogoCategory.category); + if (utils.isStringMatch(foundLogo.name, missingLogo) && isCategoryMatch) { downloadLogos(missingLogoCategory.category, foundLogo); } }); diff --git a/scripts/version-check.js b/scripts/version-check.js index 43d218c3..3f616b68 100644 --- a/scripts/version-check.js +++ b/scripts/version-check.js @@ -5,7 +5,7 @@ const dropbox = require('dropbox'); const fetch = require('node-fetch'); const crypto = require('crypto'); -const categories = ['chain', 'symbol', 'api-provider']; +const categories = ['chain', 'symbol', 'api-provider', 'dapp']; let dbx = null; From 9eefc2cc8eb119ba4f5096210f1d004c6e7defec Mon Sep 17 00:00:00 2001 From: hiletmis <31757771+hiletmis@users.noreply.github.com> Date: Thu, 27 Feb 2025 15:35:46 +0300 Subject: [PATCH 12/12] Add changeset --- .changeset/wet-cities-bake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-cities-bake.md diff --git a/.changeset/wet-cities-bake.md b/.changeset/wet-cities-bake.md new file mode 100644 index 00000000..94a2bb4d --- /dev/null +++ b/.changeset/wet-cities-bake.md @@ -0,0 +1,5 @@ +--- +'@api3/logos': minor +--- + +Adds dApp support