@moralisweb3/react

v2.27.2

Published

3 months ago

Moralis Evm and Solana Hooks for React

Downloads

0High
0Medium
0Low

npm npm bundle size npm type definitions

`@moralisweb3/react`

Moralis Hooks for your React project

This project is a thin React wrapper around Moralis, to easily call functionalities and display data. It serves as a proxy, to allow users to access Moralis APIs in client-side.

Please check the official documentation of Moralis for all the functionalities of Moralis.

💥 Features

45+ hooks for easy and fast blockchain data accessing
NFT, Balance, Events, DeFi, Token, Transaction, Block, Resolve and more react hooks
Cross-chain compatible
Optimized, Lightweight, supports Cache persistence and Request duplication safe
TypeScript support out-of-box
Easy setup, but with a lot of configuration options

...and more

🚀 Quick start

1. Install Dependencies

Make sure to have react and react-dom installed as dependencies, then install @moralisweb3/react

In short:

npm install @moralisweb3/react react react-dom

yarn add  @moralisweb3/react react react-dom

2. Add MoralisProvider

Then wrap your app in a , and pass the config as a prop to the MoralisProvider

import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider, MoralisConfig } from "@moralisweb3/react";

const moralisConfig: MoralisConfig = {
  apiKey: "MORALIS_API_KEY",
};

ReactDOM.render(
  <MoralisProvider config={moralisConfig}>
    <App />
  </MoralisProvider>,
  document.getElementById("root"),
);

⭐️ Star us

If this @moralisweb3/react library helps you build your dapps faster - please star this project, every star makes us very happy!

🤝 Need help

If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this SDK is the super active community ready to help at any time! We help each other.

🧭 Table of Contents

✨ Hook Usage Examples

import { useEvmWalletTokenBalances } from '@moralisweb3/react'

const App = () => {
  const {
    data: balance,
    error,
    fetchStatus,
    isError,
    isFetched,
    isFetchedAfterMount,
    isFetching,
    isLoading,
    isPreviousData,
    isRefetching,
    isSuccess,
    refetch,
    status,
  } = useEvmWalletTokenBalances({ address: '0x...' })

  if (isFetching) return <div>Fetching/Refreshing balance…</div>
  if (error) return <div>{JSON.stringify(error, null, 2)}</div>
  return (
    <>
      <button onClick={refetch}>Refetch Balance</button>
      <div>{JSON.stringify(balance, null, 2)}</div>
    </>
  )
}

Hooks will not run data fetching until required parameters were provided, although all types are set as optional.

1. Provide params directly to the hook

In case all required params for the hook are defined you can provide them directly to the hook params. Data fetching in this case will be triggered automatically:

import { useEvmWalletTokenBalances } from '@moralisweb3/react'

const App = () => {
  const { data: balance } = useEvmWalletTokenBalances({ address: '0x...' })

  return (
      <div>{JSON.stringify(balance, null, 2)}</div>
  )
}

2. Provide fetching options

It's possible to set fallbacks or change settings of data fetching per hook. These options will override config provided to MoralisProvider.

import { useEvmNativeBalance } from '@moralisweb3/react'

const App = () => {
  const { refetch, data: ethBalance } = useEvmNativeBalance(
    {
      address: '0x...',
    },
    {
      onSuccess: (res) => console.log(res),
      refetchInterval: 3000,
      refetchOnWindowFocus: true,
      // data will be fetched only after refetch() called
      enabled: false,
    }
  );

  return (
    <div>
      <button onClick={()=> refetch()}>Fetch Ether Balance</button>
      <p>Ethereum Balance: {JSON.stringify(ethBalance)} Ether</p>
    </div>
  )
}

You can find more fetch data options in Data fetching config section.

EvmApi Hooks

`useEvmNativeBalance()`

Get the native balance for a specific wallet address.

`useEvmNativeBalancesForAddresses()`

Get the native balances for a set of specific addresses

`useEvmBlock()`

Get the contents of a block given the block hash.

`useEvmDateToBlock()`

Get the closest block given the date.

`useEvmPairAddress()`

Fetch the pair data of the provided token0+token1 combination. The token0 and token1 options are interchangable (ie. there is no different outcome in "token0=WETH and token1=USDT" or "token0=USDT and token1=WETH")

`useEvmPairReserves()`

Get the liquidity reserves for a given pair address. Only Uniswap V2 based exchanges supported at the moment.

`useEvmContractEvents()`

Get events for a contract ordered by block number in descending order.

`useEvmContractLogs()`

Get the logs for a contract.

`useEvmUploadFolder()`

Upload multiple files to IPFS and place them in a folder directory.

`useEvmContractNFTs()`

Get NFTs for a given contract address, including metadata for all NFTs (where available).

Results are limited to 100 per page by default
Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection.

`useEvmMultipleNFTs()`

Get NFTs for a given contract address, including metadata for all NFTs (where available).

Results are limited to 100 per page by default
Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection.

`useEvmNFTContractMetadata()`

Get the collection / contract level metadata for a given contract (name, symbol, base token uri).

Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection

`useEvmNFTContractTransfers()`

Get transfers of NFTs for a given contract and other parameters.

`useEvmNFTLowestPrice()`

Get the lowest executed price for an NFT contract for the last x days (only trades paid in ETH).

`useEvmNFTMetadata()`

Get NFT data, including metadata (where available), for the given NFT token ID and contract address.

Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection

`useEvmNFTOwners()`

Get owners of NFTs for a given contract.

Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection.

`useEvmNFTTokenIdOwners()`

Get owners of a specific NFT given the contract address and token ID.

Requests for contract addresses not yet indexed will automatically start the indexing process for that NFT collection

`useEvmNFTTrades()`

Get trades of NFTs for a given contract and marketplace.

`useEvmNFTTransfersByBlock()`

Get transfers of NFTs given a block number or block hash.

`useEvmNFTTransfersFromToBlock()`

Get transfers of NFTs from a block number to a block number.

`useEvmNFTTransfers()`

Get transfers of an NFT given a contract address and token ID.

`useEvmWalletNFTCollections()`

Get NFT collections owned by a given wallet address.

`useEvmWalletNFTs()`

Get NFTs owned by a given address.

The response will include status [SYNCED/SYNCING] based on the contracts being indexed.
Use the token_address param to get results for a specific contract only
Note results will include all indexed NFTs
Any request which includes the token_address param will start the indexing process for that NFT collection the very first time it is requested.

`useEvmWalletNFTTransfers()`

Get transfers of NFTs given the wallet and other parameters.

`useEvmReSyncMetadata()`

ReSync the metadata for an NFT

The metadata flag will request a the NFT's metadata from the already existing token_uri
The uri(default) flag will fetch the latest token_uri from the given NFT address. In sync mode the metadata will also be fetched
The sync mode will make the endpoint synchronous so it will wait for the task to be completed before responding
The async mode(default) will make the endpoint asynchronous so we will wait for the task to be completed before responding

`useEvmSearchNFTs()`

Get NFTs that match a given metadata search query.

`useEvmSyncNFTContract()`

Initiates a sync of a previously non synced Contract.

`useEvmResolveAddress()`

Resolve an ETH address and find the ENS name.

`useEvmResolveDomain()`

Resolve an Unstoppable domain and get the address.