LogoLogo
  • Introduction to the Muse DAO
  • Developer Vision
  • DAPPS
    • Fast Dapp
      • Tutorials
        • Getting started
          • Make an ERC20 transfer app
      • Components
        • Contract Read
        • Contract Write
        • APICall
        • Events
        • Address Display
        • Block Number
        • Ethereum Balance
        • PleaseConnect (Request user connection)
        • Token Balance (ERC20)
        • WatchEvents
        • AirStack
        • Sweep NFT floor
        • Token amount (ERC20)
        • Token name (ERC20)
        • Uniswap tradebox
        • Moment (display date/time)
      • Variables
        • userAddress
        • ABIs
        • connectedChain
        • Passing arbitrary data in query URL parameters
        • location
        • Toast
      • Templates
        • ERC20 Token transfer
        • Nouns Auction
        • AAVE V3
        • Lido Staking page
        • DAI Saving Rate
        • ERC6551
        • Popular NFT collections buy button
        • Non Fungible Message
        • No Shit Sherlock
      • Style
    • Launch
      • How to Launch a project
      • How to buy from a Launch
      • How to sell into a Launch
      • FAQ
    • NFT20
      • Use Cases
      • Liquidity Incentives
      • Guides
        • Adding a project
          • Create Pool
      • Contracts
        • NFT20Factory
          • Source
        • NFT20Pair
          • Source
      • API
      • Fees
    • ETHCMD
    • RolodETH
    • The Very Nifty Gallery
    • CUDL Game
      • Pets
      • $CUDL
      • MILK
      • Bazaar
      • Battles and weapons
    • Feather NFT
    • Dreams of EVM NFT
    • Sudoswap,js
    • The Quest (Sword & Shield)
    • Royal Game
    • Space Goo
    • NFT API
    • Pepesea NFT Marketplace
  • Tokenomics
    • $MUSE
    • Treasury
  • Other resources
    • Governance
    • Links
Powered by GitBook
On this page
  • Airstack queries
  • Props​
  • Example​
  1. DAPPS
  2. Fast Dapp
  3. Components

AirStack

PreviousWatchEventsNextSweep NFT floor

Last updated 1 year ago

Airstack queries

Display data retrieved by an airstack query. You can see the for more information.

Props

  • query

  • variables

  • render a function to render the result

Example

Retrieve NFTs of an address and display them:

<AirStack
  query={`
query tokens($address: Identity!) {
  nfts: TokenBalances(
    input: {filter: {owner: {_in: [$address]}, tokenType: {_in: [ERC721]}, tokenAddress: {_nin: ["0x22C1f6050E56d2876009903609a2cC3fEf83B415"]}}, limit: 100, blockchain: ethereum}
  ) {
    data:TokenBalance {
      amount  
      chainId
      id
      tokenAddress
      tokenId
      tokenType
      token {
        name
        symbol
      }
      tokenNfts {
        tokenId
        metaData {
          name
        }
        contentValue {
          image {
            medium
          }
        }
      }
    }
  }
}
`}
  variables={{
    address: userAddress,
  }}
  render={(data) => (
    <div class="grid grid-cols-3 grid-flow-row gap-2 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
      {data.nfts.data.map((nft) => (
        <div
          key={nft.id}
          class="card w-full p-4  bg-base-100 shadow-xl image-full"
        >
          <figure class="h-full w-full m-0 p-0">
            <img
              class="h-full w-full object-contains"
              src={
                nft.tokenNfts.contentValue.image
                  ? nft.tokenNfts.contentValue.image.medium
                  : " "
              }
            />
          </figure>
          <div class="card-body">
            <h2 class="card-title text-white">
              {nft.tokenNfts.metaData ? nft.tokenNfts.metaData.name : ""}
            </h2>
            <p>{nft.token.name}</p>
          </div>
        </div>
      ))}
    </div>
  )}
/>
Airstack docs
​
​