Mixtape-search NPM

MixtapeSearch

MixtapeSearch is a React component that provides a search bar for fetching and displaying NFTs from different networks. It uses the nft-fetcher library to fetch NFTs based on the user's search input.

Quick Start Method

The quickest way to get started is to use the nextjs mixtape-search-template repository.

git clone https://github.com/Zerobeings/mixtape-search-template.git
cd mixtape-search-template
yarn install

Installation

yarn add mixtape-search

mixtape-search has two peer dependencies: react and react-dom. Make sure they are installed in your project.

yarn add react react-dom

Usage

Create a component in your project and import the MixtapeSearch component from the mixtape-search package.

import MixtapeSearch from "mixtape-search"
import { useState, useEffect, useCallback } from "react";

export default function MixtapeSearchPackNOSSR(){
  const [fetchedNFTs, setFetchedNFTs] = useState<any[]>([]);

  const handleNFTsFetched = useCallback((nfts: any[]) => {
      setLoading(true);
      setFetchedNFTs(nfts);
      setInterval(() => {
          setLoading(false);
      }, 1000);
}, [setLoading, setFetchedNFTs]);

  return (
    <div>
      <MixtapeSearch 
        activeNetwork={"ethereum"}
        theme={"dark"}
        onNFTsFetched={handleNFTsFetched}
        />
    </div>
  )
}

Next, dynamically import the MixtapeSearchPackNOSSR component in your page.

import dynamic from "next/dynamic";
const MixtapeSearchPackNOSSR = dynamic(() => import('../components/MixtapeSearch/Searcher'), { ssr: false });

export default function Home() {
  return (
    <div>
      <MixtapeSearchPackNOSSR />
    </div>
  )
}

Props

activeNetwork: The active blockchain network. Default is 'ethereum'.
limit: The maximum number of NFTs to fetch.
start: The starting index for fetching NFTs.
where: An array of conditions for fetching NFTs.
select: The fields to select from the fetched NFTs.
dbURL: The URL of the database to fetch NFTs from.
theme: The theme of the search bar. Can be 'dark' or 'light'.
onNFTsFetched: A callback function that is called when NFTs are fetched. It receives the fetched NFTs as an argument.
style: An object containing CSS styles for various elements of the search bar.
classNames: An object containing class names for various elements of the search bar.

Styles and ClassNames

You can customize the appearance of the search bar by providing CSS styles and class names for various elements. The style prop is an object where the keys are the names of the elements and the values are CSS style objects. The classNames prop is similar, but the values are class names.

Here's an example of how you can use the style and classNames props to customize the appearance of the MixtapeSearch component:

import MixtapeSearch from 'mixtape-search';

<MixtapeSearch
  activeNetwork={"ethereum"}
  limit={10}
  start={0}
  theme={"dark"} // or "light"
  onNFTsFetched={(nfts) => console.log(nfts)}
  style={{
    searchContainer: {
      backgroundColor: '#f5f5f5',
      padding: '10px',
    },
    searchInput: {
      fontSize: '18px',
      padding: '10px',
    },
    searchButton: {
      backgroundColor: '#007bff',
      color: 'white',
      padding: '10px 20px',
    },
    resultsContainer: {
      marginTop: '20px',
    },
    resultItem: {
      borderBottom: '1px solid #ddd',
      padding: '10px 0',
    },
  }}
  classNames={{
    searchContainer: 'my-search-container',
    searchInput: 'my-search-input',
    searchButton: 'my-search-button',
    resultsContainer: 'my-results-container',
    resultItem: 'my-result-item',
  }}
/>

In this example, the style prop is used to provide CSS styles for the search container, search input, search button, results container, and result items. The classNames prop is used to provide custom class names for the same elements.

Please note that the actual style and class names that you can use will depend on the implementation of the MixtapeSearch component. The keys used in the style and classNames objects (like searchContainer, searchInput, etc.) are just examples and might not correspond to the actual elements in the MixtapeSearch component. You'll need to refer to the MixtapeSearch documentation or source code to find out the correct keys to use.

Fetching NFTs

When the user types in the search bar, the component fetches NFTs that match the user's input. The fetched NFTs are passed to the onNFTsFetched callback function.

Suggestions are displayed in a dropdown menu below the search bar. The user can click on a suggestion to select it. When a suggestion is selected, the onNFTsFetched callback function is called with the selected NFTs as an argument.

A contract address can also be entered in the search bar. When a contract address is entered, the component fetches all the NFTs from that contract and passes them to the onNFTsFetched callback function.

If a collection does not appear it has not been indexed yet. To request a collection to be indexed, please submit a request at https://indexer.locatia.app. Once the collection is indexed it will also appear in the suggestions dropdown.

Network Support

The component supports multiple blockchain networks. The active network can be set using the activeNetwork prop. The default network is 'ethereum'.

The following networks are supported:

Ethereum: "ethereum"
Polygon: "polygon"
Arbitrum One: "arbitrum"
Fantom Opera: "fantom"
Avalanche: "avalanche"

Next js configuration

Step 1: Update next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  basePath: "",
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      fs: false,
    };
    return config;
  }
};

module.exports = nextConfig;

Step 2: Under the public folder create a folder named db and add the sql-wasm-595817d88d82727f463bc4b73e0a64cf.wasm file to it. You can download the file from here or in the src file of this package.

Step 3: Create an mixtape-search.d.ts file under the typings folder of your project and the following declaration.