Add DappView component and enhance ChainsView with search functionality

api3dao · Feb 26, 2025 · ac33930 · ac33930
1 parent fe41a4d
commit ac33930
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 7 deletions.
diff --git 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 (
             <Flex
                 p={3}
@@ -51,7 +54,7 @@ const ChainList = ({ isTestnet, chain }) => {
 };
 
 const ChainsView = () => {
-    const [chain, setChain] = useState('');
+    const [searchArg, setSearchArg] = useState('');
 
     return (
         <Flex p={3} gap={3} bgColor={'white'} wrap={'wrap'} alignItems="center" justifyContent="center">
@@ -61,11 +64,11 @@ const ChainsView = () => {
                     {getSupportedChains(true).length} testnet chains
                 </Text>
             </Flex>
-            <SearchRow text={chain} setText={setChain} placeholder={'Enter a chain'} />
+            <SearchRow text={searchArg} setText={setSearchArg} placeholder={'Enter a chain id or chain name'} />
             <Title header={'Mainnets'} />
-            <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
@@ -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
@@ -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>