4 Easy Steps to Kickstart Royalty Gating on a Website using React and Tokium

https://www.tokium.co/

Hi everyone, my name is Amy. I am a cofounder of Tokium, an open source toolkit simplifying royalty gating on decentralized applications. Github | NPM | Yarn

Why should we royalty gate? NFT marketplaces made paying creator royalties optional. Royalty gating allows creators to maintain that revenue stream while giving buyers value.

This tutorial will guide you through how to add royalty gating to your dApp using ReactJS.

Installation: Install the @tokium.co/tokiumwrapper package, create-react-app

Importing: Import the packages in the right places ;)

Application: Apply token gating and royalty gating on your app

Demonstration: Run your royalty gated app

Installation

This guide requires node version >= 14.0.0 and npm version >= 5.6 on the machine.

We are starting our project by creating a demo react project with the npm package create-react-app. In the parent directory, open the terminal and enter:

npx create-react-app royalty-gated-app
## Wait for installation

cd royalty-gated-app
npm i "@tokium.co/tokiumwrapper"
npm i react-router-dom

This creates a single-page react application of which we are going to apply token gating and royalty gating to.

You should see a folder named royalty-gated-app. Open this folder in your IDE of choice.

Importing

Add the following imports at the top of the file in addition to the imports create-react-appcreated for you.

In src/index.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { TokiumProvider, GatedRoute } from '@tokium.co/tokiumwrapper';

In src/app.js

import { Lockscreen } from '@tokium.co/tokiumwrapper';
import '@tokium.co/tokiumwrapper/dist/styles.css';

Application

Create GatedSite.js in src/ , a gated page on your site.

export default function GatedSite() {
   return (
    <div>
      I am royalty gated!
    </div>  
  )
}

In src/index.js, define, royalty gate, and provide context to your website by passing the following parameters into the TokiumProvider.

• A public key of a wallet
• Collection URL

In this example they are static, but you can make them dynamic by using packages like Web3Auth.

// Import your gated site
import GatedSite from './GatedSite';

// Set variables (these are static but you can make them dynamic yourself)
const pubkey = 'ASgysXy4k8xhq1QeQ59kBs8bK5e5jdHwhkuX4Qd7pWTZ';
const collection = 'https://magiceden.io/marketplace/y00ts';
// Create your routes
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <TokiumProvider pubkey={pubkey} collection={collection}>
      <BrowserRouter>
        <Routes>
        <Route path='/' element={ <App /> } />
        <Route path='/GatedSite' element={
          <GatedRoute redirect='/'>
            { <GatedSite /> }
          </GatedRoute>} />
        </Routes>
      </BrowserRouter>
    </TokiumProvider>
  </React.StrictMode>
)

In src/app.js, you can easily royalty gate the content by wrapping it in the Lockscreen tag. No need to pass in wallet address or collection link! It uses context provided by the TokiumProvider we wrapped our app in.

We are going to hide the header by wrapping it and passing in the width and height we want. In this case, Lockscreen is the size of its parent div.

function App() {
  return (
    <div className="App">
        <Lockscreen style={{ width: '100%', height: '100%' }}>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </Lockscreen>
    </div>
  )
}

Demonstration

Run your app in the terminal like so: npm start

Open https://localhost:3000 and you should see this:

This is the locked content, viewable because the example wallet has an nft from the collection Y00ts at the time of writing.

Try changing the wallet address in src/index.js and see what happens. What do you see?

Royalty Gating Lockscreen preventing your content from rendering

Visit https://localhost:3000/gatedsite using different wallets. Are you able to visit the site?

Conclusion

Royalty Gating your dApp is really quick and easy! You can apply this to preexisting sites or create new ones from this template.

This is the simplest way to implement royalty gating. The UI Kit is the quickest way to royalty gate your content. Minimal setup, easy to integrate into existing code or kick start new projects with royalty gating.

As you build your project, you may find yourself needing specific data from your holders. The Tokium API’s endpoints return NFT, token, wallet, transaction, and royalty data to help you build your dApp. The Tokium SDK, used by the UI Kit, helps you implement calls made to endpoints and returns parsed data for your project.

I hope this tutorial has been quick to follow and easy to use!

You can find me on Twitter ❤