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.

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...'],
})