Add global nft search, fix account addresses format

frontend/src/components/index.ts

@@ -2,7 +2,7 @@ import { CopyButton, FilterButton, LinkButton } from './buttons';
 import { Form, Input, Checkbox, Radio, Select, Textarea } from './form';
 import { withAccount, withApi, withMarketplaceConfig } from './hocs';
 import { InfoCard, InfoCardProps } from './info-card';
-import { PriceInput, SearchInput } from './inputs';
+import { PriceInput } from './inputs';
 import {
   Container,
   Footer,
@@ -34,7 +34,6 @@ export {
   InfoCard,
   NFTActionFormModal,
   PriceInfoCard,
-  SearchInput,
   FilterButton,
   Breadcrumbs,
   Form,

frontend/src/components/inputs/index.ts

@@ -1,4 +1,3 @@
 import { PriceInput } from './price-input';
-import { SearchInput } from './search-input';
 
-export { PriceInput, SearchInput };
+export { PriceInput };

frontend/src/components/layout/footer/consts.ts

@@ -9,11 +9,7 @@ const LIST = [
   },
   {
     heading: 'Legal',
-    links: [
-      { text: 'Community Guidelines', href: '#' },
-      { text: 'Terms', href: '#' },
-      { text: 'Privacy policy', href: '#' },
-    ],
+    links: [{ text: 'Privacy policy', href: 'https://vara.network/privacy-policy' }],
   },
 ];
 

frontend/src/components/layout/header/header.module.scss

@@ -5,6 +5,7 @@
 }
 
 .container,
+.search,
 .buttons,
 .wallet {
   display: flex;
@@ -19,6 +20,7 @@
   gap: 12px;
 }
 
+.search,
 .wallet {
   gap: 24px;
 }

frontend/src/components/layout/header/header.tsx

@@ -1,6 +1,7 @@
 import { useAccount } from '@gear-js/react-hooks';
 
 import { ROUTE } from '@/consts';
+import { NFTSearch } from '@/features/nft-search';
 import { Wallet, AccountBalance } from '@/features/wallet';
 
 import { LinkButton } from '../../buttons';
@@ -15,7 +16,10 @@ function Header() {
   return (
     <header className={styles.header}>
       <Container className={styles.container}>
-        <Logo />
+        <div className={styles.search}>
+          <Logo />
+          <NFTSearch />
+        </div>
 
         <div className={styles.wallet}>
           <AccountBalance />

frontend/src/features/collections/components/collection-card/collection-card.tsx

@@ -1,3 +1,4 @@
+import { getVaraAddress } from '@gear-js/react-hooks';
 import { Identicon } from '@polkadot/react-identicon';
 import { Link, generatePath } from 'react-router-dom';
 
@@ -47,7 +48,7 @@ function CollectionCard({ id, name, collectionBanner, collectionLogo, admin, tok
 
             <div className={styles.user}>
               <Identicon value={admin} size={14} theme="polkadot" />
-              <span className={styles.address}>{admin}</span>
+              <span className={styles.address}>{getVaraAddress(admin)}</span>
             </div>
           </div>
         </div>

frontend/src/features/collections/components/nft-card/nft-card.tsx

@@ -1,4 +1,4 @@
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { getVaraAddress, useBalanceFormat } from '@gear-js/react-hooks';
 import { Link, generatePath } from 'react-router-dom';
 
 import { PriceInfoCard, InfoCard } from '@/components';
@@ -35,7 +35,7 @@ function NFTCard({ sales, auctions, ...nft }: Props) {
             <h3 className={styles.name}>{name}</h3>
 
             <p className={styles.owner}>
-              Owned by <span className={styles.address}>{owner}</span>
+              Owned by <span className={styles.address}>{getVaraAddress(owner)}</span>
             </p>
           </div>
         </Link>

frontend/src/features/nft-search/components/index.ts

@@ -0,0 +1,3 @@
+import { NFTSearch } from './nft-search';
+
+export { NFTSearch };

frontend/src/features/nft-search/components/nft-search/index.ts

@@ -0,0 +1,3 @@
+import { NFTSearch } from './nft-search';
+
+export { NFTSearch };

frontend/src/features/nft-search/components/nft-search/nft-search.tsx

@@ -0,0 +1,33 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+import { Input } from '@/components';
+import { ROUTE } from '@/consts';
+
+import SearchSVG from '../../assets/search.svg?react';
+import { FIELD_NAME, SCHEMA } from '../../consts';
+import { useNFTSearchParam } from '../../hooks';
+
+function NFTSearch() {
+  const param = useNFTSearchParam();
+
+  const form = useForm({ values: { [FIELD_NAME.QUERY]: param.value }, resolver: zodResolver(SCHEMA) });
+  const navigate = useNavigate();
+
+  const handleSubmit = form.handleSubmit(({ query }) => {
+    const search = query ? param.set(query) : param.reset();
+
+    navigate({ pathname: ROUTE.NFTS, search });
+  });
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit}>
+        <Input name={FIELD_NAME.QUERY} icon={SearchSVG} label="NFT name/Account address" size="small" />
+      </form>
+    </FormProvider>
+  );
+}
+
+export { NFTSearch };

frontend/src/features/nft-search/consts.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+const FIELD_NAME = {
+  QUERY: 'query',
+};
+
+const SCHEMA = z.object({
+  [FIELD_NAME.QUERY]: z.string().trim(),
+});
+
+export { FIELD_NAME, SCHEMA };

frontend/src/features/nft-search/hooks.ts

@@ -0,0 +1,24 @@
+import { useSearchParams } from 'react-router-dom';
+
+import { FIELD_NAME } from './consts';
+
+function useNFTSearchParam() {
+  const [params] = useSearchParams();
+  const value = params.get(FIELD_NAME.QUERY) || '';
+
+  const set = (query: string) => {
+    params.set(FIELD_NAME.QUERY, query);
+
+    return params.toString();
+  };
+
+  const reset = () => {
+    params.delete(FIELD_NAME.QUERY);
+
+    return '';
+  };
+
+  return { value, set, reset };
+}
+
+export { useNFTSearchParam };

frontend/src/features/nft-search/index.ts

@@ -0,0 +1,4 @@
+import { NFTSearch } from './components';
+import { useNFTSearchParam } from './hooks';
+
+export { NFTSearch, useNFTSearchParam };

frontend/src/features/wallet/components/account-button/account-button.tsx

@@ -1,3 +1,4 @@
+import { getVaraAddress } from '@gear-js/react-hooks';
 import { Button, ButtonProps } from '@gear-js/vara-ui';
 import { Identicon } from '@polkadot/react-identicon';
 
@@ -15,7 +16,7 @@ type Props = {
 function AccountButton({ address, name, color, size, block, onClick }: Props) {
   return (
     <Button onClick={onClick} color={color} size={size} block={block} className={styles.button}>
-      <Identicon value={address} size={16} theme="polkadot" /> <span>{name || address}</span>
+      <Identicon value={address} size={16} theme="polkadot" /> <span>{name || getVaraAddress(address)}</span>
     </Button>
   );
 }

frontend/src/features/wallet/components/wallet-modal/wallet-modal.tsx

@@ -1,5 +1,4 @@
-import { decodeAddress } from '@gear-js/api';
-import { useAccount, useAlert } from '@gear-js/react-hooks';
+import { getVaraAddress, useAccount, useAlert } from '@gear-js/react-hooks';
 import { Button, Modal } from '@gear-js/vara-ui';
 
 import CopySVG from '../../assets/copy.svg?react';
@@ -66,10 +65,10 @@ function WalletModal({ close }: Props) {
       };
 
       const handleCopyClick = () => {
-        const decodedAddress = decodeAddress(address);
+        const encodedAddress = getVaraAddress(address);
 
         navigator.clipboard
-          .writeText(decodedAddress)
+          .writeText(encodedAddress)
           .then(() => {
             close();
             alert.success('Copied');

frontend/src/pages/collection/collection.tsx

@@ -1,3 +1,4 @@
+import { getVaraAddress } from '@gear-js/react-hooks';
 import { generatePath, useParams } from 'react-router-dom';
 
 import { Breadcrumbs, Container, InfoCard, List } from '@/components';
@@ -57,7 +58,14 @@ function Collection() {
             <img src={getIpfsLink(collection.collectionLogo)} alt="" className={styles.logo} />
 
             <div className={styles.cards}>
-              <InfoCard heading="Creator" text={collection.admin} SVG={UserSVG} color="light" textOverflow />
+              <InfoCard
+                heading="Creator"
+                text={getVaraAddress(collection.admin)}
+                SVG={UserSVG}
+                color="light"
+                textOverflow
+              />
+
               <MintLimitInfoCard heading={collection.tokensLimit} text={nftsCount} color="light" />
             </div>
           </div>

frontend/src/pages/lists/hooks.ts

@@ -82,8 +82,8 @@ function useTotalNFTsCount(where: NftWhereInput) {
   return [totalCount, isReady, refetch] as const;
 }
 
-function useNFTs(owner: string, collectionId?: string) {
-  const where = useMemo(() => getNftFilters(owner, collectionId), [owner, collectionId]);
+function useNFTs(owner: string, collectionId: string | undefined, query?: string) {
+  const where = useMemo(() => getNftFilters(owner, collectionId, query), [owner, collectionId, query]);
   const [totalCount, isTotalCountReady, refetchTotalNFTsCount] = useTotalNFTsCount(where);
 
   const { data, isFetching, fetchNextPage, refetch } = useInfiniteQuery({

frontend/src/pages/lists/lists.tsx

@@ -7,6 +7,7 @@ import CollectionCardSkeletonSVG from '@/features/collections/assets/collection-
 import NFTCardSkeletonSVG from '@/features/collections/assets/nft-card-skeleton.svg?react';
 import { AccountFilter, GridSize, useAccountFilter, useGridSize } from '@/features/lists';
 import { GRID_SIZE } from '@/features/lists/consts';
+import { useNFTSearchParam } from '@/features/nft-search';
 import { cx } from '@/utils';
 
 import { useCollections, useNFTs } from './hooks';
@@ -23,10 +24,16 @@ function Lists() {
 
   const { gridSize, setGridSize } = useGridSize();
   const { accountFilterValue, accountFilterAddress, setAccountFilterValue } = useAccountFilter();
+  const nftSearchParam = useNFTSearchParam();
 
   const [collections, collectionsCount, hasMoreCollections, isCollectionsQueryReady, fetchCollections] =
     useCollections(accountFilterAddress);
-  const [nfts, nftsCount, hasMoreNFTs, isNFTsQueryReady, fetchNFTs] = useNFTs(accountFilterAddress);
+
+  const [nfts, nftsCount, hasMoreNFTs, isNFTsQueryReady, fetchNFTs] = useNFTs(
+    accountFilterAddress,
+    undefined,
+    nftSearchParam.value,
+  );
 
   const renderTabs = () =>
     TABS.map(({ to, text }, index) => {

frontend/src/pages/lists/utils.ts

@@ -1,8 +1,10 @@
+import { decodeAddress } from '@gear-js/api';
+
 import { CollectionWhereInput, NftWhereInput } from '@/graphql/graphql';
 
 const getCollectionFilters = (admin: string) => (admin ? { admin_contains: admin } : {}) as CollectionWhereInput;
 
-const getNftFilters = (owner: string | null, collectionId: string | undefined) => {
+const getNftFilters = (owner: string | null, collectionId: string | undefined, query: string | undefined) => {
   const where = {} as NftWhereInput;
 
   if (owner) {
@@ -13,6 +15,20 @@ const getNftFilters = (owner: string | null, collectionId: string | undefined) =
     where.collection = { id_eq: collectionId } as CollectionWhereInput;
   }
 
+  if (query) {
+    try {
+      const accountAddress = decodeAddress(query);
+
+      if (owner) {
+        where.AND = [{ owner_eq: accountAddress } as NftWhereInput];
+      } else {
+        where.owner_eq = accountAddress;
+      }
+    } catch {
+      where.name_containsInsensitive = query;
+    }
+  }
+
   return where;
 };
 

frontend/src/pages/nft/nft.tsx

@@ -1,4 +1,4 @@
-import { useAccount } from '@gear-js/react-hooks';
+import { getVaraAddress, useAccount } from '@gear-js/react-hooks';
 import { Identicon } from '@polkadot/react-identicon';
 import { useState } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
@@ -91,7 +91,7 @@ function NFT() {
 
             {owner ? (
               <p className={styles.ownerText}>
-                Owned by <span className={styles.ownerAddress}>{owner}</span>
+                Owned by <span className={styles.ownerAddress}>{getVaraAddress(owner)}</span>
               </p>
             ) : (
               <Skeleton width="100%" borderRadius="4px" />