npm.io
0.1.10 • Published 4 years ago

nft-login

Licence
MIT
Version
0.1.10
Deps
2
Size
49 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

NFT Login from SaaS Deals

This is a react HOC that allows users to authenticate and log in to an application using NFTs they own. It's a higher order component that wraps some web3 calls to make NFT login simpler.

Metamask Transaction Example

About SaaS Deals

SaaS Deals is a a marketplace for new SaaS companies to launch. Users can buy an NFT representing lifetime access to the product. The NFT can be traded on the marketplace and the founders get royalties when the NFT is traded.

Props

Prop Description
key API Key from https://saasdeals.io
url API Endpoint from https://saasdeals.io
contracts An Array of contract addresses you want to check
message The message you want to display to the user when they sign the login message

How It Works

This is a higher order component. Simply wrap your react component in the NFTLogin HOC with the key and your contract addresses and you're all set. You'll need an account on SaaS Deals for this to work.

In the future (if there's demand) we may pull this out into a separate, stand alone service. let me know on Twitter.

Functions

Function Description Returns
login Passed to your component as a prop called login. It takes an optional array of contracts or no arguments example: this.props.login({ contracts: ['0x123'], message: "My Message" }) { success: true, matches: res.matches }
connectWallet Passed to your component as a prop called connectWallet. It takes no arguments. Calling login automatically calls connectWallet so you should not need to call this function directly. { wallet: String, chain: String, connected: Boolean } 
{
  /*... your component */
}

export default NFTLogin(NFTLoginImplementation, {
  key: 'xxx-xx-xx-xx-xx',
  contracts: ['0x...'],
})

Example Usage

import React, { Component } from 'react'
import NFTLogin from 'nft-login'

class NFTLoginImplementation extends Component {
  constructor(props) {
    super(props)
    this.state = { matches: [] }
  }

  login = async () => {
    const matches = await this.props.login()
    // or
    // const matches = await this.props.login({ contracts: ['0x...'], message: "Login with my nft!!!" })

    console.log('~ matches', matches)
    this.setState({ matches })
  }

  render() {
    const { matches } = this.state
    return (
      <div>
        <button type="button" onClick={this.login}>
          Login with nft
        </button>
        <div>{matches.length} matches</div>
      </div>
    )
  }
}

export default NFTLogin(NFTLoginImplementation, {
  key: 'xxx-xx-xx-xx-xx',
  contracts: ['0x...'],
})

Keywords

web3nftethereumweb5alchemy