npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

clanifynft-page

v1.1.2

Published

minting page

Downloads

5

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

0xalberlant0xalberlant

Keywords

nft

Readme

Demo

https://makeswift-examples-thirdweb.vercel.app/

Visually build with Thirdweb components

In this example, you'll learn how to integrate thirdweb components from your Next.js app into Makeswift to make it visually editable.

Tools

  • React SDK: to enable users to connect their wallets with the useMetamask hook, and access hooks such as useNFTDrop to interact with the NFT drop contract.
  • TypeScript SDK: to view the claimed supply, total supply, and mint NFTs from the drop.
  • Makeswift SDK: to register components into Makeswift's visual builder.

Using this example

To quickly try this example either deploy to Vercel or use our CLI.

Deploy your own to Vercel

Deploy your own with Vercel

Deploy with Vercel

With your deployment completed, take a tour of the newly created store

Use this example locally with the Makeswift CLI

  1. Run the Makeswift CLI command

    npx makeswift@latest init --template=ecommerce-thirdweb

    Note: the --template=ecommerce-thirdweb above will auto-select the "Ecommerce - Thirdweb" template in Makeswift and download this example Next.js app to your local machine

  2. Log in or sign up for Makeswift

Once completed, the CLI runs yarn dev and redirects you to app.makeswift.com.

Take a tour of your web3 website

After integration, you will be redirected to app.makeswift.com. You can see the "NFT Drop" component on the right-hand side of the screen.

With the NFT drop component selected, paste your NFT drop contract address from Thirdweb into the "Contract address" panel and select the correct chain.

If you don't have an NFT drop contract, read this guide to learn how to create one using Thirdweb without any code.

If you are struggling with this example reach out in our Discord and we will be happy to help!

Next steps

With Makeswift, you can give your marketing team hand-crafted Thirdweb building blocks to create custom Web3 websites.

To learn more about Makeswift, take a look at the following resources:

You can check out the Makeswift GitHub repository - your feedback and contributions are welcome!