GithubHelp home page GithubHelp logo

gatekeeper's Introduction

Gatekeeper

Access control for DApps.

Gatekeeper provides token-based access control for web3 applications. This is enabled by rules defined in a smart-contract. This example uses an ERC721 token with a single boolean state property providing proof of access rights.

Gatekeeper was developed during BlockathonDAO March 2022.

Stack

  • Ethereum blockchain
  • Node (v16 recommended)
  • Typescript
  • Ethers.js
  • Hardhat
  • OpenZeppelin
  • React
  • TailwindCSS

Build and Run

Install node packages:

yarn install

Create a .env file in root of the repo with the following entries:

ALCHEMY_RINKEBY_URL=https://eth-rinkeby.alchemyapi.io/v2/<YOUR_API_KEY>
PRIVATE_KEY=...
COINMARKETCAP_API_KEY=...

Compile the contract:

yarn sol:compile

Start the application:

yarn run dev

Open http://localhost:3000

Contract Tests

To run the tests for the contract functions:

yarn run sol:test

Deploying Your Own Contract

If you prefer to use your own instance of the SleepyKoala contract:

  1. yarn sol:compile
  2. yarn sol:deploy:rinkeby
  3. Update contractAddress in Minter.tsx with the contract address returned in step 2.
  4. Restart the application.

Usage

The sample contract is deployed on the Rinkeby testnet. You will require a small amount of test ETH.

  1. On the home page connect to your MetaMask wallet.
  2. Click the Mint KOL button.
  3. Confirm the transaction in the MetaMask wallet and wait for the minted NFT.
  4. The new NFT does not have sufficient access privileges so click the Invert NFT button.
  5. Confirm the transaction and wait for access to be granted.

Note: For ease of demonstration and testing the app requires a new token to be minted every time. In a real-world scenario the newly minted KOL token will be automatically detected in the users wallet.

Contract

SleepyKoala

mint()

getTokenData()

invertTokenData()

setTokenData()

gatekeeper's People

Contributors

flipdazed avatar inewmarch avatar niluk avatar raymonddoan avatar samwarwick avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

gatekeeper's Issues

Update project README

Update the README with details of the Gatekeeper project.

  • Overview of purpose.
  • Summary of tech stack
  • Build and run instructions

NFT contains boolean

Add state static variable
Add function invert_nft_state which will invert the bool of state

Integrate a react component into the front end

The react component should be a popup that comes up when you click connect wallet

To start with don't bother integrating into web3.js just get it working with Web2

Web3 Mock

Mock the web3 interface by storing two variables:

  • nft_present (bool): True if NFT is present, else False
  • nft_state (bool): reflects the metadata inside the NFT

States

The react component should be able to host a variety of states:

  1. Minting NFT
  2. "Checking for NFT" - this is a temporary state while we are waiting to read the NFT metadata. This will in theory not be seen if
  3. "The NFT needs to be True to use 'A Dapp'" - this comes up if nft_state is False
  4. React Component disappears - This occurs when the nft_state is True. The react component disappears to reveal a Tick image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.