@layer3/gatekeeper-sdk

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

Parameter	Description	Type	Required
account	Wallet address from the user	string	Yes
polygonId	Boolean to enable polygon id claim	boolean	No*
roles	Arrays of roles	string array	No*
checkIds	Arrays of checks ids	string array	No*
customization	Color properties explained below	Object	No**
nftClaimLinks	Object with links to claim the nfts	Object	No
signature	String provided to make the auth part with out user interaction	string	No
isStaging	Boolean to change between staging/production url	boolean	No***

* 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

Parameter	Description	Type	Required
backgroundColor	Background color of the modal	string	No
textColor	Color for the body text	string	No
buttonTextColor	Color for button texts	string	No
primaryColor	Primary button, info color	string	No

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

Function name	Description	Parameters	Return type
getSignature	Returns the user signature to avoid login process on the sdk	Object	string
getNonce	Returns the currect Nonce for a provided user address	string	number

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