A simple NEXT.js app that lists NFTs within a contract address from a Buildable Flow.

Overview

NFT Marketplace Demo

Buildable

This is a basic Next.js app for listing NFTs in a given contract address. The purpose of this repository is to showcase the simplicity of creating your backend endpoints in Buildable and hooking them up to frontend apps.

This application receives data from the Moralis API, powered by a single Buildable Flow.

Check it out!

Live Demo: https://eloquent-khapse-9ee837.netlify.app/

Usage

To run this app, simply clone this repository and run:

> yarn install
> yarn start

The backend ⚡️

This application is linked to an existing Buildable Flow that gets NFT metadata using the Moralis API. The Flow is comprised of a single Node that contains the following code:

Input

const nodeInput = ({ $trigger, $nodes }) => {
  const { 
    chain = "ETH",
    address = "0xed5af388653567af2f388e6224dc7c4b3241c544",
    pageSize = 12,
    cursor
  } = $trigger.body;

  return {
    method: "GET",
    url: `https://deep-index.moralis.io/api/v2/nft/${address}`,
    params: {
      chain,
      address,
      limit: pageSize,
      cursor
    },
    responseType: "json",
    headers: {
      "Content-type": "application/json",
      "X-API-Key": $trigger.env.MORALIS_API_KEY
    }
  };
};

Run

const axios = require("axios");
const moment = require("moment");

const getRows = (result) => {
  return result?.map(token => {
    const metadata = JSON.parse(token.metadata);

    return {
      collection: token.name,
      name: metadata?.name,
      image: metadata?.image.replace("ipfs://", "https://ipfs.io/ipfs/"),
      contractType: token.contract_type,
      lastSynced: moment(token.synced_at).fromNow()
    };
  });
}

/**
 * The Node's executable function
 *
 * @param {Run} input - Data passed to your Node from the input function
 */
const run = async (input) => {
  verifyInput(input);

  try {
    const { data } = await axios(input);

    const rows = getRows(data.result);

    return {
      rows,
      page: data.page,
      pageSize: data.page_size,
      total: data.total,
      cursor: data.cursor
    };
  } catch (error) {
    return {
      failed: true,
      message: error.message,
      data: {
        ...error?.response?.data,
      },
    };
  }
};

/**
 * Verifies the input parameters
 */
const verifyInput = ({ method, url }) => {
  const ERRORS = {
    INVALID_METHOD: "A valid method field (string) must be provided",
    INVALID_URL: "A valid url field (string) must be provided",
  };

  if (typeof method !== "string") throw new Error(ERRORS.INVALID_METHOD);
  if (typeof url !== "string") throw new Error(ERRORS.INVALID_URL);
};

Head over to Buildable and create an account to get started with building your next backend!

License

© 2022, Buildable Technologies Inc. - Released under the MIT License

You might also like...

Converts your IPv4 address to a 4x4 2-bit PNG which you can extract the IP from.

Converts your IPv4 address to a 4x4 2-bit PNG which you can extract the IP from.

IP-to-PNG Converts your IPv4 address to a 4x4 2-bit PNG which you can extract the IP from. https://www.npmjs.com/package/ip2png Run npm install ip2png

Nov 30, 2022

A rhythm game played in your browser's address bar

URLX URLX is a rhythm game played in your browser's address bar. (no it does not stand for anything it's just the best name i could think of) Hit arro

Dec 21, 2022

jQuery Address - Deep linking for the masses

jQuery Address The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can poin

Oct 20, 2022

Browser extension that enables you to Log-in as ANY address on ALL dapps

Browser extension that enables you to Log-in as ANY address on ALL dapps

Impersonator Extension Log-in as ANY address on ALL dapps. Impersonator injects into the dapps just like Metamask, but gives you the freedom to set cu

Dec 14, 2022

Claim $ARB airdrop of several wallets at the same time and transfer all the tokens to one address

arbitrum-airdrop-claimer Claim $ARB airdrop of several wallets at the same time and transfer all tokens to one address You need to have Node.js instal

Mar 21, 2023

CryptoDappy is the fastest way to get started with Flow.

CryptoDappy is the fastest way to get started with Flow.

Demo application (testnet) Learning hub (start learning here) What's CryptoDappy? CryptoDappy is the fastest way to get started with blockchain develo

Aug 18, 2022

One-page checkout flow

Medusa Express Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences. Built with Me

Oct 11, 2022

Marquee is a VS Code extension designed to naturally integrate with your development flow, so that you will no longer lose track of your thoughts while you're coding

Marquee Stay organized with minimal context switching, all inside your Visual Studio Code. Marquee is a VS Code extension designed to naturally integr

Dec 13, 2022

A Flow-based programming language for universal applications.

A Flow-based programming language for universal applications.

Hlang A Flow-based programming language for universal applications. Hlang aims to make programming easier, faster and more comfortable. It avoids codi

Dec 25, 2022
Owner
Buildable
The open-source backend builder for UI engineers
Buildable
NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users.

NFTKastle NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users. NFTKas

Paschal 2 Oct 31, 2022
Marry in Web3, Mint Paired Soulbound NFTs by MultiSign Flow, No transfer, No sell, a non-financial Dapp

ERC721-520 Token 是 NFT-like Soulbound Token Standard(灵魂绑定凭证) 的一种实现,是 ERC721 标准的扩展。 ERC721-520 Token 不可转让,不可售卖,一个人同时只能有一个有效 Token ERC721-520 Token 由二者通

Marry3 48 Dec 21, 2022
Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tornado.Cash.

??️‍♂️ TORN Detector Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tor

Pascal Marco Caversaccio 14 Dec 24, 2022
Buildable's core open-source offering for actions that makes it easy to collect, centralize and action your backend system activity

What are Action Templates? Action Templates are open-source functions that save developers hundreds of hours when integrating databases, apps and othe

Buildable 6 Nov 5, 2022
Create your own NFTs within seconds 🪄

MagicaNFT An automated process to create a number of NFTs At the moment, the program only makes pixelated NFTs, with only a certain number of characte

Jaival Patel 2 Feb 3, 2022
Ordered lists, flat or nested, multiple formats ordered lists.

logseq-plugin-ol 有序列表,单级或多级、多种样式的有序列表。 Ordered lists, flat or nested, multiple formats ordered lists. 使用展示 (Usage) 在想要展示为有序列表的块上添加一个以 #.ol 开头的标签就可以了。有

Seth Yuan 25 Jan 1, 2023
Web app that generates BOLT11 invoices from an LNURL or Lightning Address.

LNURL Pay ⚡️ Web app that generates BOLT11 invoices from an LNURL or Lightning Address. Getting Started First, run the development server: npm run dev

Sam Samskies 7 Nov 3, 2022
A simple CLI Tools to Empty Crypto Wallet & Send to your other Wallet Address

A simple CLI tools to empty crypto wallet & send to your other wallet, Build with Nodejs using Ethers API Run Locally Clone the project git clone ht

Raihan Ramadhani 11 Dec 29, 2022
Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or enter your email address and more.

Demodal Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or en

Elbert Alias 225 Jan 4, 2023
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022