@f8n/foundationkit-ui

FoundationKit - UI

Warning This is a very early alpha version, API's may change, be removed or break at any time until we release a non alpha version. Please use at your discretion.

A set of React components that allow you to quickly add NFT

Installation

yarn add @foundationkit/ui

Getting Started

Each <Card/> component represents a single NFT, by default the Card component will only show Foundation marketplace information.

import { Card } from '@foundationkit/ui';
import { ethers } from 'ethers';

const provider = new ethers.providers.JsonRpcProvider(
  'https://alchemy-api-key.com'
);

export default function App() {
  return (
    <Card
      provider={provider}
      contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      tokenId="38"
      referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

If you want to display information about the NFT itself you will need to use a fetcher, this is a async function that returns a certain object shape. To get you started we have integrated with the Zora & Center API's.

import { Card, zoraFetcher } from '@foundationkit/ui';

export default function App() {
  const provider = useProvider();
  return (
    <Card
      provider={provider}
      contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      tokenId="38"
      fetcher={zoraFetcher()}
      referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

If you want to be able to make offers, place bids & use buy now's then you will also need to pass in a signer, you can get this from a library like wagmi.

import { Card, zoraFetcher } from '@foundationkit/ui';
import { useSigner } from 'wagmi';

export default function App() {
  const provider = useProvider();
  const { data: signer } = useSigner();
  return (
    <Card
      provider={provider}
      contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      tokenId="38"
      fetcher={zoraFetcher()}
      signer={signer}
      referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

API

• provider
• contractAddress
• tokenId
• fetcher
• signer
• referrer

provider (required)

The provider prop is a Ethers.js Provider, this can be fetched from a library like wagmi or Ethers.js itself.

import { Card } from '@foundationkit/ui';

export default function App() {
  const provider = useProvider();

  return (
    <Card
      provider={provider}
      // contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      // tokenId="38"
      // fetcher={zoraFetcher()}
      // signer={signer}
      // referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

contractAddress (required)

The contractAddress is the Ethereum address for the NFT collection you want to show the information for.

import { Card } from '@foundationkit/ui';

export default function App() {
  const provider = useProvider();

  return (
    <Card
      // provider={provider}
      contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      // tokenId="38"
      // fetcher={zoraFetcher()}
      // signer={signer}
      // referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

tokenId (required)

The tokenId is used to show which NFT from the collection to show.

import { Card } from '@foundationkit/ui';

export default function App() {
  const provider = useProvider();

  return (
    <Card
      // provider={provider}
      // contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      tokenId="38"
      // fetcher={zoraFetcher()}
      // signer={signer}
      // referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

fetcher

The fetcher prop takes an async function that receives the contract address and token ID and needs to return the following data object.

name: string;
collection: string;
imgSrc?: string;
collectionSrc?: string;

At a minimum it should return the name of the NFT and the collection name, the NFT & collection cover image source's are optional.

This data can be obtained in any way you want e.g. a static JSON file, an API service, a indexer. We provide 2 fetchers in the package, zoraFetcher & centerFetcher.

If this data is present we will make a best effort attempt to show the NFT details in the Card component.

import { Card, zoraFetcher } from '@foundationkit/ui';

export default function App() {
  const provider = useProvider();

  return (
    <Card
      // provider={provider}
      // contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      // tokenId="38"
      fetcher={zoraFetcher()}
      // signer={signer}
      // referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

signer

An Ethers.js Signer object, this can be fetched using libraries like wagmi, RainbowKit or Ethers.js. It is required if you wish to be able to perform web3 actions using the cards built in bid, offer and buy now functionality.

import { Card } from '@foundationkit/ui';

export default function App() {
  const { data: signer } = useSigner();

  return (
    <Card
      // provider={provider}
      // contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      // tokenId="38"
      // fetcher={zoraFetcher()}
      signer={signer}
      // referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}

referrer

The referrer prop allows you to pass in a Ethereum address that should receive a 1% fee if the NFT if bought using their site or integration. This address should be able to receive ETH.

import { Card } from '@foundationkit/ui';

export default function App() {
  const { data: signer } = useSigner();

  return (
    <Card
      // provider={provider}
      // contractAddress="0xAdB9Ed78A03c1eD432c20Be28a16c887145AAadF"
      // tokenId="38"
      // fetcher={zoraFetcher()}
      // signer={signer}
      referrer="0x2aE5f36C77A736f76d61F3eEC06F12CAF2963fD6"
    />
  );
}