feat: [Registry] Better search

.env.example

@@ -9,6 +9,7 @@ NEXT_PUBLIC_ARBITRUM_URL=__value__
 NEXT_PUBLIC_ARBITRUM_SEPOLIA_URL=__value__
 NEXT_PUBLIC_WALLET_PROJECT_ID=__URL__
 NEXT_PUBLIC_SOLANA_MAINNET_BETA_URL=__value__
+NEXT_PUBLIC_AUTONOLAS_SUB_GRAPH_URL=__URL__
 
 # autonolas-registry-frontend
 NEXT_PUBLIC_REGISTRY_URL=__value__

apps/autonolas-registry/common-util/Details/index.jsx

@@ -1,14 +1,13 @@
 import { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';
-import {
-  Row, Col, Button, Typography,
-} from 'antd';
+import { Row, Col, Button, Typography } from 'antd';
 import { get } from 'lodash';
 import { Loader, NA } from '@autonolas/frontend-library';
 
 import { NAV_TYPES } from '../../util/constants';
 import { useMetadata } from '../hooks/useMetadata';
+import { useHelpers } from '../hooks';
 import { typePropType } from '../propTypes';
 import { IpfsHashGenerationModal } from '../List/IpfsHashGenerationModal';
 import { useDetails } from './useDetails';
@@ -31,16 +30,16 @@ export const Details = ({
 }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  const {
-    isLoading, isOwner, info, ownerAddress, tokenUri, updateDetails,
-  } = useDetails({
-    id,
-    type,
-    getDetails,
-    getOwner,
-    getTokenUri,
-  });
-  const { nftImageUrl } = useMetadata(tokenUri);
+  const { isMainnet } = useHelpers();
+  const { isLoading, isOwner, info, ownerAddress, tokenUri, updateDetails } =
+    useDetails({
+      id,
+      type,
+      getDetails,
+      getOwner,
+      getTokenUri,
+    });
+  const { nftImageUrl, packageName } = useMetadata(tokenUri);
 
   // Update button to be show only if the connected account is the owner
   // and only for agent and component
@@ -58,10 +57,16 @@ export const Details = ({
     <>
       <Header>
         <div>
-          <Text strong>{`${capitalize(type)} Name`}</Text>
-          <DetailsTitle level={2}>
-            {`${capitalize(type)} ID ${id}`}
-          </DetailsTitle>
+          {isMainnet ? (
+            <DetailsTitle level={3}>{packageName}</DetailsTitle>
+          ) : (
+            <>
+              <Text strong>{`${capitalize(type)} Name`}</Text>
+              <DetailsTitle level={2}>
+                {`${capitalize(type)} ID ${id}`}
+              </DetailsTitle>
+            </>
+          )}
         </div>
 
         <div className="right-content">

apps/autonolas-registry/common-util/List/ListTable/ListTable.jsx

@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import { Table } from 'antd';
+import { Loader, useScreen } from '@autonolas/frontend-library';
+
+import { TOTAL_VIEW_COUNT } from '../../../util/constants';
+import { ListEmptyMessage } from '../ListCommon';
+import { useHelpers } from '../../hooks';
+import { convertTableRawData, getTableColumns } from './helpers';
+
+export const ListTable = ({
+  isLoading,
+  type,
+  searchValue,
+  isPaginationRequired,
+  list,
+  total,
+  currentPage,
+  setCurrentPage,
+  isAccountRequired,
+  onViewClick,
+  onUpdateClick,
+  extra,
+  tableDataTestId,
+}) => {
+  const { chainName, account, isSvm, chainId, isMainnet } = useHelpers();
+
+  /**
+   * no pagination on search as we won't know total beforehand
+   */
+  const canShowPagination = isPaginationRequired ? !searchValue : false;
+  const { isMobile } = useScreen();
+
+  const { scrollX } = extra;
+
+  if (isLoading) {
+    if (isSvm) {
+      return <Loader />;
+    }
+
+    return (
+      <Loader
+        isAccountRequired={isAccountRequired}
+        account={account}
+        notConnectedMessage={`To see your ${type}s, connect wallet.`}
+      />
+    );
+  }
+
+  const columns = getTableColumns(type, {
+    onViewClick,
+    onUpdateClick,
+    isMobile,
+    chainName,
+    chainId,
+    account,
+    isMainnet,
+  });
+  const dataSource = convertTableRawData(type, list, {
+    currentPage,
+    isMainnet,
+  });
+  const pagination = {
+    total,
+    current: currentPage,
+    defaultPageSize: canShowPagination ? TOTAL_VIEW_COUNT : total,
+    onChange: (e) => setCurrentPage(e),
+    showSizeChanger: false,
+  };
+
+  return (
+    <>
+      {list.length === 0 ? (
+        <ListEmptyMessage
+          type={type}
+          message={isSvm ? 'No services – do you have SOL in your wallet?' : ''}
+        />
+      ) : (
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          pagination={canShowPagination ? pagination : false}
+          scroll={{ x: scrollX }}
+          rowKey={(record) => `${type}-row-${record.id}`}
+          data-testid={tableDataTestId || `${type}-table`}
+        />
+      )}
+    </>
+  );
+};
+
+ListTable.propTypes = {
+  type: PropTypes.string.isRequired,
+  searchValue: PropTypes.string.isRequired,
+  isPaginationRequired: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  list: PropTypes.arrayOf(PropTypes.object),
+  total: PropTypes.number,
+  currentPage: PropTypes.number,
+  setCurrentPage: PropTypes.func,
+  isAccountRequired: PropTypes.bool,
+  onViewClick: PropTypes.func,
+  onUpdateClick: PropTypes.func,
+  tableDataTestId: PropTypes.string,
+  extra: PropTypes.shape({
+    scrollX: PropTypes.number,
+  }),
+};
+
+ListTable.defaultProps = {
+  isLoading: false,
+  isPaginationRequired: true,
+  list: [],
+  total: 0,
+  currentPage: 0,
+  setCurrentPage: () => {},
+  isAccountRequired: false,
+  onViewClick: () => {},
+  onUpdateClick: null,
+  extra: { scrollX: 1200 },
+};