DEV Community: Arif Rahman

How to write NFT smart contract in 2023

Arif Rahman — Wed, 18 Jan 2023 08:53:29 +0000

Hello you fellow `coders`!

With the recent craze on NFT space, i ponder myself on how would one build an NFT smart contract. As with any emerging technology buzzword blockchain, businesses building NFT projects now will have the advantage of early adopters.

NFTs allow businesses to connect with their audience in new ways by providing exclusive value and experiences they wouldn't have been able to provide before.

Here i will guide through on how i build a somewhat a mid/advanced NFT smart contract.

In this project, here are the list of features which is common and the new OpenSea's On-Chain Enforcement Tool (operator-filter)

- Batch Minting (ERC721a)
Allowing user to mint multiple tokens within a single call.

- Whitelist / Allowlist
Using MerkleProof to validate user address if they are white-listed.

- Pre-Reveal / Reveal
Pre-reveal placeholders are used for new generative projects. The artwork won’t actually be revealed until the NFT is minted, and collectors will only know which NFT in the collection they own once they buy the NFT.

- OpenSea's On-Chain Royalties Enforcement Tool (operator-filter)
A smart contract that enforce creator royalties.

Initialise project

In this tutorial, i will be using hardhat for smart contract development. Hardhat is a development environment for Ethereum software in a nutshell. You can even write test cases against your contract to ensure there no security issue, since once contract is deployed is immutable on the blockchain!

Lets start with creating a directory and installing hardhat as a dev dependency and initialise hardhat.

$ mkdir nft-smart-contract && cd nft-smart-contract && yarn add -D hardhat && npx hardhat

Follow the steps given by hardhat, in my project i've selected typescript. This will then generates the necessary folder for you to start building your smart contract.

Next installing dependency

$ yarn add -D erc721a @openzeppelin/contracts

As you can see we are installing erc721a an implementation of ERC721 for batch-minting and reduces gas fees during NFT Batch minting, credits to the @cygaar Azuki Dev. And also @openzeppelin which provides an open-source framework to build secure smart contracts.

Create our first NFT contract!

In the contracts folder create a new NftSample.sol file or name it to your choosing.

In the example here, we're importing and inheriting ERC721A and Ownable.

ERC721A allow us to inherit their batch-minting function later when we modify our mint() function

Ownable which provides a basic access control mechanism, where there is an account (an owner) that can be granted exclusive access to specific functions. This module is used through inheritance.

Minting (Public)

Next we will need to create our mint() function to allow user to mint multiple tokens. We also will set our token supply to 10k.

Here are some of the requirements we will be adding.

check if minting it available base on phases.
max limit per user address.
check if enough tokens left
check if the value is correct

   function mint(uint256 quantity) external payable {
        // check if public sale is live
        if (mintPhase != 2) revert PublicSaleNotLive();

        // check if enough token balance
        if (totalSupply() + quantity > maxSupply) {
            revert NotEnoughTokensLeft();
        }

        // check for the value user pass is equal to the quantity and the mintRate
        if (mintRate * quantity != msg.value) {
            revert WrongEther();
        }

        // check for user mint limit
        if (quantity + usedAddresses[msg.sender] > maxMints) {
            revert ExceededLimit();
        }

        usedAddresses[msg.sender] += quantity;
        _mint(msg.sender, quantity);
    }

In the example above, we add a check if user are able to mint by setting a phase. We then check if theres enough token available to mint. To ensure user does not pass the wrong value, we've added a check and throw an error if so. Then we do a check if user has already minted the limit allowed by add mapping the user address and the quantity they have minted.

To allow user to batch-mint we inherit _mint() that derived from ERC721a and than we set the quantity user minted in a mapping function.

White list mint

For our whitelist mint, there are couple of requirements to ensure of whitelist addresses are allowed to call this function. We will be using MerkleProof to verify user address.

    /**
     * @dev a function that only allow whitelisted addresses to mint
     */
    function whiteListMint(uint256 quantity, bytes32[] calldata proof)
        external
        payable
    {
        // check if white list sale is live
        if (mintPhase != 1) revert WhitelistNotLive();

        // check if the user is white listed.
        if (!isWhiteListed(msg.sender, proof)) revert InvalidMerkle();

        // check if enough token balance
        if (totalSupply() + quantity > maxSupply) {
            revert NotEnoughTokensLeft();
        }

        // check for the value user pass is equal to the quantity and the mintRate
        if (whiteListRate * quantity != msg.value) {
            revert WrongEther();
        }

        //check if user exceeded mint limit
        if (whiteListUsedAddresses[msg.sender] + quantity > whiteListMaxMints) {
            revert ExceededLimit();
        }

        _mint(msg.sender, quantity);
        // storing the number of minted items
        whiteListUsedAddresses[msg.sender] += quantity;
    }

    /**
     * @dev a function that check for user address and verify its proof
     */
    function isWhiteListed(address _account, bytes32[] calldata _proof)
        internal
        view
        returns (bool)
    {
        return _verify(leaf(_account), _proof);
    }

    function leaf(address _account) internal pure returns (bytes32) {
        return keccak256(abi.encodePacked(_account));
    }

    function _verify(bytes32 _leaf, bytes32[] memory _proof)
        internal
        view
        returns (bool)
    {
        return MerkleProof.verify(_proof, merkleRoot, _leaf);
    }

As you can see in the example whiteListMint write function, there's 2 arguments, quantity & proof.

quantity - the number of tokens user would like to mint
proof - an array of hex strings which is required to verify with merkleRootHash that we will be adding later on.

We're adding isWhiteListed get function to check and return a boolean which uses MerkleProof.verify(_proof, merkleRoot, _leaf) which we inherit from @openzeppelin/contracts/utils/cryptography/MerkleProof.sol for verification.

In the nutshell, Merkle proof confirms specific transactions/values represented by a leaf or branch hash within a Merkle hash root, verify it and return a boolean.

Here the list of check for our, whiteListMint

check if whitelistmint is live.
check if user is whitelisted.
check the there token left to be minted.
check if the value send if correct for minting
check if user exceeded white list mint limit.

Merkle Root Hash

In order to make whitelisting of addresses works, we need to generate merkle root hash which is a hex string and store in our contract. We will be adding a utils/scripts to do just that, in the example i'am using typescript, but you can use which ever programming language your prefer.

We will be installing the dependencies.

$ yarn add -D keccak265 merkletreejs

// utils/merkle.ts

import { ethers } from "ethers";
import keccak256 from "keccak256";
import { MerkleTree } from "merkletreejs";

/**
 * This is to ensure the addresses is valid and injects the checksum
 */
export const getAndConvertAddresses = (addresses: string[]): string[] => {
  if (!addresses?.length) return [];

  const convertedAddress = addresses.map((addr) => {
    return ethers.utils.getAddress(addr);
  });

  return convertedAddress;
};

const generateMerkle = (addresses: string[]) => {
  if (!addresses?.length) return null;

  // This is to ensure the addresses is valid and injects the checksum
  const convertedAddresses = getAndConvertAddresses(addresses);

  /**
   * Create a new array of `leafNodes` by hashing all indexes of the `whitelistAddresses`
   * using `keccak256`. Then creates a Merkle Tree object using keccak256 as the algorithm.
   * The leaves, merkleTree, and rootHas are all PRE-DETERMINED prior to whitelist claim
   */
  const leafNodes = convertedAddresses.map((addr) => keccak256(addr));

  const merkleTree = new MerkleTree(leafNodes, keccak256, { sortPairs: true });
  const merkleRootHash = merkleTree.getRoot().toString("hex");
  const merkleTreeString = merkleTree.toString();

  return {
    merkleTree,
    merkleRootHash: `0x${merkleRootHash}`,
    merkleTreeString,
  };
};

/**
 * A function that generates merkle proof hex string
 * @param whitelistAddresses | string []
 * @param walletAddress | string
 * @returns string[]
 */
const getMerkleProof = (
  whitelistAddresses: string[],
  walletAddress: string
) => {
  const convertedAddresses = getAndConvertAddresses([walletAddress]);
  const merkle = generateMerkle(whitelistAddresses);
  const hashAddress = keccak256(convertedAddresses[0]);
  const proof = merkle?.merkleTree.getHexProof(hashAddress);
  return proof || [];
};

const isWhiteList = (
  whitelistAddresses: string[],
  walletAddress: string
): boolean => {
  const convertedAddresses = getAndConvertAddresses([walletAddress]);
  const merkle = generateMerkle(whitelistAddresses);
  const hashAddress = keccak256(convertedAddresses[0]);
  const proof = merkle?.merkleTree?.getHexProof(hashAddress) || [];
  const verify = merkle?.merkleTree.verify(
    proof,
    hashAddress,
    merkle?.merkleRootHash
  );

  return !!verify;
};

export { generateMerkle, getMerkleProof, isWhiteList, getAndConvertAddresses };

In the example above, we created 4 functions.

getAndConvertAddresses - check if the address is a correct checksum addresses before we hash the addresses.

generateMerkle - a function that generate merkle root hash that we will be using and add in the contract.

getMerkleProof - a function that return us proof that will be use for white list mint.

isWhiteList - a function to check if the address is white listed. We can use this function to check in the client-side for e.g

Generating Merkle Root Hash

Next, we will be using generateMerkle() to generate our Merkle root hash and we can either set in our variable in the contract or set it later let's say their changes in the addresses.

In the example above, we're simple creating a script and console log the output for our merkle root hash. Than we run the script.

$ npx ts-node scripts/generateMerkle.ts

The output will look something like this.

For this example, i'am going to just add in our contract.

Phew that was a lot of codes, now let's take a coffee break, no serious you deserve it! ☕️

Mint Phases

There couple of ways to handle mint phases for minting. Like checking the block time stamp if matches a specific timestamp. But for this example for setting public or whitelist phases. We simply add a check for both mint() & whiteListMint() if the phases return a boolean.

 uint256 public mintPhase;

 function mint(uint256 quantity) external payable {
        // check if public sale is live
        if (mintPhase != 2) revert PublicSaleNotLive();

        ...
    }

    /**
     * @dev a function that only allow whitelisted addresses to mint
     */
    function whiteListMint(uint256 quantity, bytes32[] calldata proof)
        external
        payable
    {
        // check if white list sale is live
        if (mintPhase != 1) revert WhitelistNotLive();

        ...
    }


    /**
     * @dev a function to set mint phase
     */
    function setMintPhase(uint256 _phase) external onlyOwner {
        mintPhase = _phase;
    }

In the example above, we create a setMintPhase() which accepts uint256 and only the owner can call this write function. This function allow only the owner to set the mint phases as such.

1 = whitelist phase.
2 = public phase.

TokenURI

As any NFT ERC721 contract, we need to include tokenUri get function to fetch the metadata of of that NFT by token id.

 function tokenURI(uint256 _tokenId)
        public
        view
        override
        returns (string memory)
    {
        require(_exists(_tokenId), "token does not exist!");
        if (revealed)
            return
                string(
                    abi.encodePacked(
                        baseURI,
                        _tokenId.toString(),
                        baseExtension
                    )
                );
        else {
            return
                string(
                    abi.encodePacked(
                        baseHiddenUri,
                        _tokenId.toString(),
                        baseExtension
                    )
                );
        }
    }

tokenUri function accept an uint256 _tokenId, it check if the token exist. In our custom tokenUri function, we added a check for returning a revealed & unrevealed base on the the revealed boolean we added in our contract.

DefaultOperator by Opensea

How it works?

Token smart contracts may register themselves (or be registered by their "owner") with the OperatorFilterRegistry. Token contracts or their "owner"s may then curate lists of operators (specific account addresses) and codehashes (smart contracts deployed with the same code) that should not be allowed to transfer tokens on behalf of users.

    //  ==========================================
    //  ======== OPERATOR FILTER OVERRIDES =======
    //  ==========================================

    function transferFrom(
        address from,
        address to,
        uint256 tokenId
    ) public payable override onlyAllowedOperator(from) {
        super.transferFrom(from, to, tokenId);
    }

    function safeTransferFrom(
        address from,
        address to,
        uint256 tokenId
    ) public payable override onlyAllowedOperator(from) {
        super.safeTransferFrom(from, to, tokenId);
    }

    function safeTransferFrom(
        address from,
        address to,
        uint256 tokenId,
        bytes memory data
    ) public payable override onlyAllowedOperator(from) {
        super.safeTransferFrom(from, to, tokenId, data);
    }

Let's wrap up 🌯

For the rest of the implementation, you can have a look at my open source project here: nft-smart-contract

It's been a fun project to build while learning through all the required tools/libraries to make this works.

If you like my blog please support me by giving my project ⭐️. You can reach me out at Linktree. And again thank you for reading 📚 and stay safe you unicorn 🦄!

How I build Crypto Tracker Chart with React 🚀

Arif Rahman — Mon, 17 May 2021 00:49:34 +0000

Hello Coders 👩🏼‍💻,

Recently, I visit a crypto tracker site to check DogeCoin prices to see whether it going to the moon 🚀

I was curious about how to build a simplified version on that site using React, other libraries, and tools out there.

Here is the link to my cool 😎 project:
https://cryptotracker.ayeprahman.com/

So I did research to find which API to use and came across a free, reliable, and comprehensive API from the team 🦎CoinGecko.

At the same time, my goal also was to focus to find a low-level visualization tool that comprises the power of using D3 with React, flexibility, optimized speed, and bundle sizes. And I came across Visx from Airbnb.

Some of the features that I had in mind are,

Listing all supported coins price, market cap, and volume and market-related data.
Display coin prices in a chart with a time filter and brushing capability to select a time range.

But here I will be focusing on the second point above.

For this project, I will be using,

reactjs with typescript
visx for visualization
styled-component for styling
coingecko api
material-ui for ui components.
and other libraries.

Step 1️⃣ - Initialize project

First off let start with creating our react project using create-react-app. If u haven't install create react app globally, you can do so in the cli with npm install -g create-react-app. We will be using typescript in our react project by using npx create-react-app <name of your project name> --template typescript.

If you haven't used typescript before, in a nutshell, this language allows us to use our Javascript skills more effectively. In fact, after you compile your code, all the Typescript stuff goes away and produces clean, cross-platform safe Javascript code. On top of being interoperable, Typescript adds unique features, including static typing, interfaces, classes, and more.

Next cd <name of your project> and install all the initial dependencies.

npm i axios axios-hooks @material-ui/core @material-ui/lab use-query-params @visx/axis @visx/brush @visx/gradient @visx/group @visx/shape @visx/tooltip d3-array date-fns numeral -f && npm i -D @types/styled-components @types/numeral @types/d3-array

As u can see in the dependencies, for Visx packages, we're only installing necessary packages that we need for our project as to not bloat our bundle size.

Next, let's start with structuring our project.

Let's add "baseUrl": "src" in our root tsconfig.json for absolute import. More about absolute import here.

Step 🥈 - Writing our Initial Code

We'll be creating a container src/containers/Market/index.tsx for API integration. Next, we will use useAxios for calling our coin market chart endpoint.

To display our prices in our chart, we will be using /coins/{ids}/market_chart for getting historical market data to include price, market cap, and 24h volume in our chart. https://www.coingecko.com/api/documentations/v3#/

Let's write our initial code first:

// src/containers/Market/index.tsx
import React from "react";
import useAxios from "axios-hooks";
import { TimeFilters } from "enums/TimeFilters";

export type TimeStamp = number;
export type Price = number;

export interface GetMarketChartResponse {
  prices?: [TimeStamp, Price][];
}

const MARKET_CHART_ID = "bitcoin";

const Market = () => {
  const [timeFilter, setTimeFilter] = React.useState<string>(TimeFilters.P1D);
  const [{ data, loading, error }] = useAxios<GetMarketChartResponse | null>({
    url: `https://api.coingecko.com/api/v3/coins/${MARKET_CHART_ID}/market_chart?vs_currency=usd&days=${timeFilter}`,
    method: "GET",
  });

  return <div>{JSON.stringify(data.prices)}</div>;
};

export default Market;

Let's mapped our price data for use to pass on to our charts later on. Prices data return an array of an array with the 0 indexes of timestamp and 1 index of the price value. We're converting our date timestamp to Date object to be pass in our secondary chart later on.

  const mappedData: DataProps[] = React.useMemo(() => {
    return data?.prices
      ? data.prices.map((ele) => ({
          date: new Date(ele[0]),
          price: ele[1],
        }))
      : [];
  }, [data]);

Before we move on to the next step. There are 3 main components that we want to develop.

Primary Chart - Display line chart, prices, date, and tooltip.
Secondary Chart - Display area chart, brush capability for highlighting specific time range.
Time filter Buttons - Allow us to filter on a specific time period e.g (past 1 month)

The overall IO will be:

data prices will be passed down to our secondary chart.
Set the initial highlight time range and set our filtered data for our primary chart
Changing the highlighted secondary will update the primary chart.
Changing the time filter button will fetch the latest price data.
Hover on the primary chart on a specific point will display the date and price value.

Step ③ - Building our Primary Chart

Let's create a primary chart component and interfaces.

// src/interfaces/DataProps.ts
export interface DataProps {
  date: string | Date;
  price: number;
}

// src/components/PrimaryChart/interfaces.ts
import { DataProps } from "interfaces/DataProps";

export interface PrimaryChartProps {
  data: DataProps[];
  width: number;
  height: number;
  margin?: { top: number; right: number; bottom: number; left: number };
}

export type TooltipData = DataProps;

// src/components/PrimaryChart/index.tsx
/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import { PrimaryChartProps } from "./interfaces";

const PrimaryChart: React.FC<PrimaryChartProps> = ({
  data,
  width,
  height,
  margin = { top: 0, right: 0, bottom: 0, left: 0 },
}) => {
  // bounds
  const xMax = Math.max(width - margin.left - margin.right, 0);
  const yMax = Math.max(height - margin.top - margin.bottom, 0);

  return (
    <div style={{ position: "relative", margin: "0 0 1rem" }}>
      <svg width={width} height={height}>
        {/* we will include line chart, and tooltip */}
      </svg>
    </div>
  );
};

export default PrimaryChart;

Our primary chart would require data for scaling, display X-axis date, Y-axis price value, and tooltip later on. We're passing height and weight to specify the box size for our svg to control the rest of our element.

Now let's create a reusable Line Chart for us to render in our primary chart.

// src/components/LineChart/index.tsx
import React from "react";
import { LinePath } from "@visx/shape";
import { Group } from "@visx/group";
import { AxisLeft, AxisBottom } from "@visx/axis";
import { LineChartProps } from "./interfaces";
import { DataProps } from "interfaces/DataProps";
import {
  AXIS_COLOR,
  AXIS_BOTTOM_TICK_LABEL_PROPS,
  AXIS_LEFT_TICK_LABEL_PROPS,
} from "./constants";

const LineChart: React.FC<LineChartProps> = ({
  data,
  width,
  yMax,
  margin,
  xScale,
  yScale,
  hideBottomAxis = false,
  hideLeftAxis = false,
  stroke,
  top,
  left,
  yTickFormat,
  children,
}) => {
  if (!data) return null;
  // accessors
  const getDate = (d: DataProps) => new Date(d?.date);
  const getStockValue = (d: DataProps) => d?.price;

  return (
    <Group left={left || margin.left} top={top || margin.top}>
      <LinePath<DataProps>
        data={data}
        x={(d) => xScale(getDate(d)) || 0}
        y={(d) => yScale(getStockValue(d)) || 0}
        strokeWidth={1.5}
        stroke={stroke}
      />
      {!hideBottomAxis && (
        <AxisBottom
          top={yMax + margin.top}
          scale={xScale}
          numTicks={width > 520 ? 10 : 5}
          stroke={AXIS_COLOR}
          tickStroke={AXIS_COLOR}
          tickLabelProps={() => AXIS_BOTTOM_TICK_LABEL_PROPS}
        />
      )}
      {!hideLeftAxis && (
        <AxisLeft
          scale={yScale}
          numTicks={5}
          stroke={AXIS_COLOR}
          tickStroke={AXIS_COLOR}
          tickLabelProps={() => AXIS_LEFT_TICK_LABEL_PROPS}
          tickFormat={(d) => {
            return yTickFormat ? yTickFormat(d) : d;
          }}
        />
      )}
      {children}
    </Group>
  );
};

export default LineChart;

We then import our newly create LineChart into our Primary Chart.

// src/components/PrimaryChart/index.tsx
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useMemo } from "react";
import numeral from "numeral";
import { scaleLinear, scaleTime } from "@visx/scale";
import { max, min, extent } from "d3-array";
import { PrimaryChartProps } from "./interfaces";
import { DataProps } from "interfaces/DataProps";
import LineChart from "components/LineChart";
import { theme } from "styles";

// accessors
const getDate = (d: DataProps) => new Date(d.date);
const getStockValue = (d: DataProps) => d?.price;

const PrimaryChart: React.FC<PrimaryChartProps> = ({
  data,
  width = 10,
  height,
  margin = { top: 0, right: 0, bottom: 0, left: 0 },
}) => {
  // bounds
  const xMax = Math.max(width - margin.left - margin.right, 0);
  const yMax = Math.max(height - margin.top - margin.bottom, 0);

  // scales
  const dateScale = useMemo(() => {
    return scaleTime({
      range: [0, xMax],
      domain: extent(data, getDate) as [Date, Date],
    });
  }, [xMax, data]);
  const priceScale = useMemo(() => {
    return scaleLinear({
      range: [yMax + margin.top, margin.top],
      domain: [min(data, getStockValue) || 0, max(data, getStockValue) || 0],
      nice: true,
    });
    //
  }, [margin.top, yMax, data]);

  return (
    <div style={{ position: "relative", margin: "0 0 1rem" }}>
      <svg width={width} height={height}>
        <LineChart
          data={data}
          width={width}
          margin={{ ...margin }}
          yMax={yMax}
          xScale={dateScale}
          yScale={priceScale}
          stroke={theme.colors.lapislazuli}
          yTickFormat={(d) => {
            return numeral(d).format(d <= 100 ? "$0.00" : "$0,0");
          }}
        />
      </svg>
    </div>
  );
};

export default PrimaryChart;

2 keys thing we need to make our LineChart work, is that we need to scale data accordingly to our X and Y boxSize is scaleTime() & scaleLinear()

scaleTime - allow us to construct a new time scale according to range and domain we provide.
scaleLinear - allow us to construct a continuos scale according to the range and domain we provide.

We're also using React useMemo to only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

  // scales
  const dateScale = useMemo(() => {
    return scaleTime({
      range: [0, xMax],
      domain: extent(data, getDate) as [Date, Date],
    });
  }, [xMax, data]);
  const priceScale = useMemo(() => {
    return scaleLinear({
      range: [yMax + margin.top, margin.top],
      domain: [min(data, getStockValue) || 0, max(data, getStockValue) || 0],
      nice: true,
    });
    //
  }, [margin.top, yMax, data]);

Weewwww 💦, that was a lot of code we just wrote! Let have a quick cup of ☕️ and watch some 📹.

Next, let's integrate logic for displaying our tool in our primary chart while hovering on a specific point in the chart. We will be using a tooltip hook helper from @visx/tooltip.

import {
  useTooltip,
  TooltipWithBounds,
  defaultStyles as defaultToopTipStyles,
} from "@visx/tooltip";

Then in our primary chart, useTooltip exposes function and variable we need to handle the value and position of our tooltip while hovering.

const PrimaryChart: React.FC<PrimaryChartProps> = ({
  data,
  width = 10,
  height,
  margin = { top: 0, right: 0, bottom: 0, left: 0 },
}) => {
  const {
    showTooltip,
    hideTooltip,
    tooltipData,
    tooltipTop = 0,
    tooltipLeft = 0,
  } = useTooltip<DataProps>();

Now in the next line, let's include our function to handle tooltip position and setting the value.

// tooltip handler
  const handleTooltip = useCallback(
    (
      event: React.TouchEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>
    ) => {
      const { x } = localPoint(event) || { x: 0 };
      const currX = x - margin.left;
      const x0 = dateScale.invert(currX);
      const index = bisectDate(data, x0, 1);
      const d0 = data[index - 1];
      const d1 = data[index];
      let d = d0;

      // calculate the cursor position and convert where to position the tooltip box.
      if (d1 && getDate(d1)) {
        d =
          x0.valueOf() - getDate(d0).valueOf() >
          getDate(d1).valueOf() - x0.valueOf()
            ? d1
            : d0;
      }

      // we setting the position and value to be display later in our tooltip component below
      showTooltip({
        tooltipData: d,
        tooltipLeft: x,
        tooltipTop: priceScale(getStockValue(d)),
      });
    },
    [showTooltip, priceScale, dateScale, data, margin.left]
  );

But in order for us to get the touchpoint and data values in our chart, We need a component that allows us to track the mouse cursor touchpoint. Let's include Bar component from Visx that allows us to do just so.

 {/* a transparent ele that track the pointer event, allow us to display tooltup */}
        <Bar
          x={margin.left}
          y={margin.top * 2}
          width={xMax}
          height={yMax}
          fill="transparent"
          rx={14}
          onTouchStart={handleTooltip}
          onTouchMove={handleTooltip}
          onMouseMove={handleTooltip}
          onMouseLeave={() => hideTooltip()}
        />

There are 3 main components we would want to display

Line to be drawn on the vertical of a specific point
A circle element to indicate data point
Tooltip box for displaying our date and price value.

Now let's include these lines of code!

// src/components/PrimaryChart/index.tsx
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useMemo, useCallback } from "react";
import { format } from "date-fns";
import numeral from "numeral";
import {
  useTooltip,
  TooltipWithBounds,
  defaultStyles as defaultToopTipStyles,
} from "@visx/tooltip";
import { scaleLinear, scaleTime } from "@visx/scale";
import { localPoint } from "@visx/event";
import { Line, Bar } from "@visx/shape";
import { max, min, extent, bisector } from "d3-array";
import { PrimaryChartProps } from "./interfaces";
import { DataProps } from "interfaces/DataProps";
import LineChart from "components/LineChart";
import { theme } from "styles";

// accessors
const getDate = (d: DataProps) => new Date(d.date);
const getStockValue = (d: DataProps) => d?.price;
const getFormatValue = (d: DataProps) => numeral(d.price).format("$0,0.00");
const bisectDate = bisector<DataProps, Date>((d) => new Date(d.date)).left;

const PrimaryChart: React.FC<PrimaryChartProps> = ({
  data,
  width = 10,
  height,
  margin = { top: 0, right: 0, bottom: 0, left: 0 },
}) => {
  const {
    showTooltip,
    hideTooltip,
    tooltipData,
    tooltipTop = 0,
    tooltipLeft = 0,
  } = useTooltip<DataProps>();

  // bounds
  const xMax = Math.max(width - margin.left - margin.right, 0);
  const yMax = Math.max(height - margin.top - margin.bottom, 0);

  // scales
  const dateScale = useMemo(() => {
    return scaleTime({
      range: [0, xMax],
      domain: extent(data, getDate) as [Date, Date],
    });
  }, [xMax, data]);
  const priceScale = useMemo(() => {
    return scaleLinear({
      range: [yMax + margin.top, margin.top],
      domain: [min(data, getStockValue) || 0, max(data, getStockValue) || 0],
      nice: true,
    });
    //
  }, [margin.top, yMax, data]);

  // tooltip handler
  const handleTooltip = useCallback(
    (
      event: React.TouchEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>
    ) => {
      const { x } = localPoint(event) || { x: 0 };
      const currX = x - margin.left;
      const x0 = dateScale.invert(currX);
      const index = bisectDate(data, x0, 1);
      const d0 = data[index - 1];
      const d1 = data[index];
      let d = d0;

      // calculate the cursor position and convert where to position the tooltip box.
      if (d1 && getDate(d1)) {
        d =
          x0.valueOf() - getDate(d0).valueOf() >
          getDate(d1).valueOf() - x0.valueOf()
            ? d1
            : d0;
      }

      showTooltip({
        tooltipData: d,
        tooltipLeft: x,
        tooltipTop: priceScale(getStockValue(d)),
      });
    },
    [showTooltip, priceScale, dateScale, data, margin.left]
  );

  return (
    <div style={{ position: "relative", margin: "0 0 1rem" }}>
      <svg width={width} height={height}>
        <LineChart
          data={data}
          width={width}
          margin={{ ...margin }}
          yMax={yMax}
          xScale={dateScale}
          yScale={priceScale}
          stroke={theme.colors.lapislazuli}
          xTickFormat={(d) => {
            return numeral(d).format(d <= 100 ? "$0.00" : "$0,0");
          }}
        />
        {/* a transparent ele that track the pointer event, allow us to display tooltup */}
        <Bar
          x={margin.left}
          y={margin.top * 2}
          width={xMax}
          height={yMax}
          fill="transparent"
          rx={14}
          onTouchStart={handleTooltip}
          onTouchMove={handleTooltip}
          onMouseMove={handleTooltip}
          onMouseLeave={() => hideTooltip()}
        />
        {/* drawing the line and circle indicator to be display in cursor over a
          selected area */}
        {tooltipData && (
          <g>
            <Line
              from={{ x: tooltipLeft, y: margin.top * 2 }}
              to={{ x: tooltipLeft, y: yMax + margin.top * 2 }}
              stroke={theme.colors.primary}
              strokeWidth={2}
              opacity={0.5}
              pointerEvents="none"
              strokeDasharray="5,2"
            />
            <circle
              cx={tooltipLeft}
              cy={tooltipTop + 1 + margin.top}
              r={4}
              fill="black"
              fillOpacity={0.1}
              stroke="black"
              strokeOpacity={0.1}
              strokeWidth={2}
              pointerEvents="none"
            />
            <circle
              cx={tooltipLeft}
              cy={tooltipTop + margin.top}
              r={4}
              fill={theme.colors.lapislazuli}
              stroke="white"
              strokeWidth={2}
              pointerEvents="none"
            />
          </g>
        )}
      </svg>
      {/* To display the tooltip box with price and value */}
      {tooltipData && (
        <div>
          <TooltipWithBounds
            key={Math.random()}
            top={tooltipTop - 12}
            left={tooltipLeft}
            style={{
              ...defaultToopTipStyles,
              background: theme.colors.lapislazuli,
              padding: "0.5rem",
              border: "1px solid white",
              color: "white",
            }}
          >
            <ul style={{ padding: "0", margin: "0", listStyle: "none" }}>
              <li style={{ paddingBottom: "0.25rem" }}>
                <b>{format(getDate(tooltipData), "PPpp")}</b>
              </li>
              <li>
                Price: <b>{`${getFormatValue(tooltipData)}`}</b>
              </li>
            </ul>
          </TooltipWithBounds>
        </div>
      )}
    </div>
  );
};

export default PrimaryChart;

Before we can test, let's include our Primary Chart in our Market Container and pass our mappedData to our primary chart.

// src/containers/Market/index.tsx
const Market = () => {
  const [timeFilter, setTimeFilter] = React.useState<string>(TimeFilters.P1D);

  const [{ data, loading, error }] = useAxios<GetMarketChartResponse | null>({
    url: `https://api.coingecko.com/api/v3/coins/${MARKET_CHART_ID}/market_chart?vs_currency=usd&days=${timeFilter}`,
    method: "GET",
  });

  const mappedData: DataProps[] = React.useMemo(() => {
    return data?.prices
      ? data.prices.map((ele) => ({
          date: new Date(ele[0]),
          price: ele[1],
        }))
      : [];
  }, [data]);

  return (
    <>
      {mappedData?.length ? (
        <>
          <PrimaryChart
            data={mappedData}
            height={200}
            width={600}
            margin={{
              top: 16,
              right: 16,
              bottom: 40,
              left: 48,
            }}
          />
        </>
      ) : null}
    </>
  );
};

Now try hovering our PrimaryChart!

Congratz! we have successfully displayed our first chart with a tooltip!

Let's wrap up 🌯

For the rest of the implementation, you can have a look at my open source project here: react-crypto-tracker.

It's been a fun project to build while learning through all the required tools/libraries to make this works. There a high learning curve to learn Visx but it all worth it!

If you like my blog please support me by giving my project ⭐️. You can reach me out at Twitter or LinkedIn. And again thank you for reading 📚 and stay safe you unicorn 🦄!

DEV Community: Arif Rahman

How to write NFT smart contract in 2023

Hello you fellow coders!

Initialise project

Next installing dependency

Create our first NFT contract!

Minting (Public)

White list mint

Merkle Root Hash

Generating Merkle Root Hash

Mint Phases

TokenURI

DefaultOperator by Opensea

How it works?

Let's wrap up 🌯

How I build Crypto Tracker Chart with React 🚀

Step 1️⃣ - Initialize project

Step 🥈 - Writing our Initial Code

The overall IO will be:

Step ③ - Building our Primary Chart

Let's wrap up 🌯

Hello you fellow `coders`!