This is an NFT Storefront using Dapper Wallet built on Next.js that uses the Niftory API.

Visit https://dapper-sample.niftory.com/ to see a deployed instance of this app and explore the capabilities you can get started with for free!

Dapper Wallet utilizes Circle for credit card payments. To try out the purchase flow, you can use Circle's test credit card numbers.

Let's get you set up!

This app uses dotenv for configuration, so you can set your app's environment variables by creating a .env file in this directory.

See .env.example for an example of how to configure these environment variables. The only thing you need to configure is:

• NEXT_PUBLIC_API_KEY
• NEXT_PUBLIC_CLIENT_ID
• CLIENT_SECRET

Follow this guide to get your Niftory API keys. Note that your project and contract will also need to be approved by Dapper in order to successfully execute transactions with Dapper Wallet

Once your .env file is set up, you can run the app locally with:

yarn install
yarn dev

• Web framework: Next.js
• UI framework: Chakra UI
• Auth framework: NextAuth
• Graph QL Client: urql
• GraphQL codegen: graphql-codeg-generator

This app demonstrates how to take the user through the wallet setup steps with the Flow client library.

See the WalletSetup component to explore how this flow works.

The advantage of Niftory is that we handle the complex blockchain stuff for you. In that vein, Niftory has implemented all the cadence scripts and transactions needed to handle purchase, minting, listing and transfer using Dapper Wallet.

While you will be using the Niftory APIs to get/sign the transactions, you can view the Cadence code here:

• Purchase transaction (used to handle everything associated with checkout with Dapper Wallet -- purchase, minting, transfer, etc.)
• Metadata script (used to display the item being checked out in the Dapper Wallet pop-up)

This app demonstrates various forms of authentication using the Niftory API.

This is a pure dApp -- the "user" is just the Dapper Wallet address. We show how to register this wallet with Niftory and configure it to accept NFTs from this app, and use FCL and cookies to manage the session state for this wallet.

The browser's GraphQL client specifies the project's API key as part of the headers of every request. This allows users to view available NFTs without signing in.

Before purchasing an NFT, the app will prompt the user to set up their wallet.