feat: search my contracts

hyperweb-io · Sep 17, 2024 · 336edd3 · 336edd3
1 parent 0d02e31
commit 336edd3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/examples/chain-template/components/contract/MyContractsTable.tsx b/examples/chain-template/components/contract/MyContractsTable.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useChain } from '@cosmos-kit/react';
-import { Box, Icon, Spinner, Text } from '@interchain-ui/react';
+import { Box, Icon, Spinner, Text, TextField } from '@interchain-ui/react';
 
 import { useCopyToClipboard, useMyContracts } from '@/hooks';
 import { Button, Table } from '../common';
 import { shortenAddress } from '@/utils';
 import { TabLabel } from '@/pages/contract';
 import { EmptyState } from './EmptyState';
 import { useChainStore } from '@/contexts';
+import styles from '@/styles/comp.module.css';
 
 type MyContractsTableProps = {
   show: boolean;
@@ -22,16 +23,54 @@ export const MyContractsTable = ({
   title,
   createContractTrigger,
 }: MyContractsTableProps) => {
+  const [searchValue, setSearchValue] = useState('');
+
   const { selectedChain } = useChainStore();
   const { address } = useChain(selectedChain);
   const { data: myContracts = [], isLoading } = useMyContracts();
 
+  const filteredContracts = useMemo(() => {
+    return myContracts.filter(({ address, contractInfo }) =>
+      [address, contractInfo?.label, contractInfo?.codeId.toString()].some(
+        (value) =>
+          value && value.toLowerCase().includes(searchValue.toLowerCase()),
+      ),
+    );
+  }, [myContracts, searchValue]);
+
   return (
     <Box display={show ? 'block' : 'none'} maxWidth="900px" mx="auto">
       <Text color="$blackAlpha600" fontSize="24px" fontWeight="700">
         {title}
       </Text>
-      <Box display="flex" justifyContent="end" mt="30px" mb="10px">
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mt="30px"
+        mb="10px"
+      >
+        <Box position="relative" width="220px">
+          <Icon
+            name="magnifier"
+            color="$blackAlpha500"
+            attributes={{
+              position: 'absolute',
+              left: '12px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              zIndex: '$10',
+            }}
+          />
+          <TextField
+            id="search"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder="Search"
+            autoComplete="off"
+            inputClassName={styles['input-pl']}
+          />
+        </Box>
         {createContractTrigger}
       </Box>
       <Box
@@ -46,6 +85,8 @@ export const MyContractsTable = ({
           <Spinner size="$6xl" color="$blackAlpha600" />
         ) : myContracts.length === 0 ? (
           <EmptyState text="No contracts found" />
+        ) : filteredContracts.length === 0 ? (
+          <EmptyState text="No matched contracts found" />
         ) : (
           <Box width="$full" alignSelf="start" overflowX="auto">
             <Table minWidth="650px">
@@ -60,7 +101,7 @@ export const MyContractsTable = ({
                 </Table.Row>
               </Table.Header>
               <Table.Body>
-                {myContracts.map(({ address, contractInfo }) => (
+                {filteredContracts.map(({ address, contractInfo }) => (
                   <Table.Row key={address}>
                     <Table.Cell>
                       <CopyText

diff --git a/examples/chain-template/styles/comp.module.css b/examples/chain-template/styles/comp.module.css
@@ -9,3 +9,7 @@
 .modal div[data-modal-part='children'] {
   padding: 0;
 }
+
+.input-pl {
+  padding-left: 36px;
+}