@layer3/gatekeeper-sdk v3.0.8

Gatekeeper package

Integrate and customize the Gatekeeper frontend with your existing frontend.

Installation

Install @layer3/gatekeeper-sdk with npm or yarn

npm install @layer3/gatekeeper-sdk

yarn add @layer3/gatekeeper-sdk

Usage/Examples

First, you'll need to setup the GatekeeperContext, you use it like any other React context:

import { GatekeeperContextProvider } from "@layer3/gatekeeper-sdk";

root.render(
  <GatekeeperContextProvider>
    <AppContextProvider>
      <Router>
        <App />
      </Router>
    </AppContextProvider>
  </GatekeeperContextProvider>,
);

Then anywhere in your app, import as:

import AccessControlModal from "@layer3/gatekeeper-sdk";

const GateKeeperModal = () => {
  return (
    <div>
      <AccessControlModal
        account={address}
        checkIds={["KYC", "exampleId"]}
        roles={["role1", "role2"]}
        polygonId={false}
        checkCallback={checkCallback}
        customization={{
          primaryColor: "#000000",
          backgroundColor: "#FFFFFF",
          buttonTextColor: "#FFFFFF",
          textColor: "#000000",
        }}
      />
    </div>
  );
};

export default GateKeeperModal;

Parameters

* At least one have to be provide: polygonId or roles or checkIds ** Default customization properties *** isStaging by default is false

primaryColor: '#059669',
textColor: '#e2e8f0',
buttonTextColor: '#e2e8f0',
backgroundColor: '#141724',

Params examples

Roles:

roles={['role1', 'role2']}

CheckIds:

checkIds={['KYC', 'exampleId']}

NftClaimLinks:

nftClaimLinks={{
  'nftContractAddress1': 'https://claimNft1.1com',
  'nftContractAddress2': 'https://claimNft2.com',
}}

Security

Check Here for details on gating access to components/routes.

Customization

Issuance

• During this process, if the role or roles you are using have a verifiable credential (VC) available, the user will be able to claim it during the issuance process..

Funtions

Parameters details

• getSignature

const params = {
  address: string;
  signer: any;
  appId?: string;
  allowUserRegistration?: boolean; // Default is true
  isStaging?: boolean; // Default is false
}
const signature = getSignature(params)

• getNonce

  const {nonce} = getNonce(address: string, isStaging?: boolean)

Commands

To start TSDX helps you develop, test, and publish modern TypeScript packages/

yarn start

To start storybook Storybook is a frontend workshop for building UI components and pages in isolation.

yarn storybook

GitHub Actions

One actions are added by default:

• node which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix

We use a semantic versioning to update the build or changes that we have on the project. They way to handle this is using a command

git add .
yarn run commit
git push