Integrate and customize the Gatekeeper frontend with your existing frontend.
Install @layer3/gatekeeper-sdk with npm
or yarn
npm install @layer3/gatekeeper-sdk
yarn add @layer3/gatekeeper-sdk
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;
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',
roles={['role1', 'role2']}
checkIds={['KYC', 'exampleId']}
nftClaimLinks={{
'nftContractAddress1': 'https://claimNft1.1com',
'nftContractAddress2': 'https://claimNft2.com',
}}
Check Here for details on gating access to components/routes.
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 |
- 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..
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 |
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)
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
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