Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nft/templates

Package Overview
Dependencies
Maintainers
5
Versions
93
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nft/templates

List of templates to use in any application. These templates can be customized with a ChakraUI-based theme. These templates are meant to be used in a next application and support server side rendering.

  • 1.0.0-beta.8.1
  • latest
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

NFT Templates

List of templates to use in any application. These templates can be customized with a ChakraUI-based theme. These templates are meant to be used in a next application and support server side rendering.

Installation

npm i @nft/templates

Documentation

For more information about the different templates available and how to use them, check the storybook https://storybook-templates-liteflow.vercel.app/

Quick Start

To get started with the templates library you need to ensure that your application adds wraps the LiteflowNFTApp components. Here is an example with a next application.

import LiteflowNFTApp from '@nft/components'
import { InjectedConnector } from '@web3-react/injected-connector'
import type { AppProps } from 'next/app'
import { theme } from '../styles/theme'

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <LiteflowNFTApp
      ssr={typeof window === 'undefined'}
      endpointUri={'YOUR_LITEFLOW_GRAPHQL_ENDPOINT'}
      cache={pageProps[APOLLO_STATE_PROP_NAME]}
      user={pageProps.user}
      connectors={{
        injected: new InjectedConnector({
          supportedChainIds: [1],
        }),
      }}
      theme={theme}
    >
      <Component {...pageProps} />
    </LiteflowNFTApp>
  )
}
export default MyApp

Once this is done you can include any templates in your different pages. Example:

import { Home } from '@nft/templates'
import { NextPage } from 'next'

export const getServerSideProps = Home.server(
  'YOUR_LITEFLOW_GRAPHQL_ENDPOINT',
  ["xxx", "yyy"], // List of nft ids to highlight on the page
  12,
  ["aaa", "bbb", "ccc", ...], // List of NFTs to showcase in the featured section
)

const HomePage: NextPage<Home.Props> = ({
  featuredTokens,
  limit,
  now,
  tokens,
  currentAccount,
}) => {
  return (
    <Home.Template
      currentAccount={currentAccount}
      featuredTokens={featuredTokens}
      limit={limit}
      now={now}
      tokens={tokens}
      explorer={{
        name: "Etherscan",
        url: "https://etherscan.io",
      }}
    />
  )
}

export default HomePage

FAQs

Package last updated on 22 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc