ThetaPass for dapps - JavaScript

Example Project

Getting started

ThetaPass - slim library to interact with user's ThetaDrop managed wallets (read-only currently).

Installing ThetaPass

Dapps must use the ThetaPass library to interact (read-only) with the user's managed wallet on ThetaDrop to prove ownership of NFTs.

npm install --save @thetalabs/theta-pass

Importing

Three different ways to import depending on your project.

node.js require

const ThetaPass = require("@thetalabs/theta-pass");

ES6

import {ThetaPass} from '@thetalabs/theta-pass';

JS Script Tag

<script type="application/javascript" src="//unpkg.com/@thetalabs/theta-pass@latest/dist/theta-pass.umd.js"></script>

Request user's managed wallet address on ThetaDrop

Via Popup

const RedirectUrl = 'http://localhost:8080/example/callback.html';
const response = await ThetaPass.requestAccounts(RedirectUrl, null, true);
const {request, result} = response;
const walletAddress = result[0];

Via Redirect

const RedirectUrl = 'http://localhost:8080';
await ThetaPass.requestAccounts(RedirectUrl, null, false);

You'll need to add some code to detect when the user is returning from the redirect.

// TODO: add error handling for when the user is not coming from a redirect
const response = await ThetaPass.getResponse();
const {request, result} = response;
const walletAddress = result[0];

Request user's managed wallet on ThetaDrop to sign a message

Via Popup

const RedirectUrl = 'http://localhost:8080/example/callback.html';
const message = 'Hello World';
const response = await ThetaPass.signMessage(message, redirectUrl, null, true);

const {request, result} = response;
const{address, signature} = result;

The RedirectUrl must contain this contents and be hosted on the same domain.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload = function() {
          window.localStorage.setItem("theta-pass.request-callback-url", window.location.href);
          window.localStorage.removeItem('theta-pass.request-callback-url');
        };
    </script>
</head>
<body></body>
</html>

Via Redirect

const RedirectUrl = 'http://localhost:8080';
const message = 'Hello World';
await ThetaPass.signMessage(message, redirectUrl, null, false);

You'll need to add some code to detect when the user is returning from the redirect.

// TODO: add error handling for when the user is not coming from a redirect
const response = await ThetaPass.getResponse();
const {request, result} = response;
const{address, signature} = result;

Prove NFT ownership via Smart Contracts

Using theta.js

Fetch the account info for a connected user.

Learn more about Theta.js setup here:
https://docs.thetatoken.org/docs/theta-js-sdk-getting-started

const thetajs = require("@thetalabs/theta-js");

Check Balance of NFT Collection

const userWalletAddress = '0x0'; // From earlier ThetaPass requestAccounts result
const nftContractAddress = '0x1';
const nftABI = ThetaPass.THETA_DROP_NFT_ABI;
const provider = new thetajs.providers.HttpProvider();
const contract = new thetajs.Contract(nftContractAddress, nftABI, provider);
const balance = await contract.balanceOf(userWalletAddress);
// If balance > 0, user has at least one of these NFTs
if(balance.toNumber() > 0){
     // User owns at least 1 of this NFT!  (Unlock content, etc) 
}
else{
     // User does not own this NFT
}