Get started with Whal3s.js

Preacquisition

You need a Utility ID. Login to Whal3s App and create your utility. Of course you can also use our API to create a utility (More informations here).
Thats it, copy the Utility ID from the detail view and you are good to go.

Installation

1. Install whal3s.js to your project

npm i @whal3s/whal3s.js

2. In your project import the Whal3s class and initialise the utility.

import Whal3s, {NftValidationUtility} from "@whal3s/whal3s.js";
const whal3s = new Whal3s();
const utility = await whal3s.createValidationUtility(YOUR-UTILITY-ID)

3. For the next step you need to understand the concept of steps. Due to the fact, that some actions are handled by you as the developer but others by the user (e.g. wallet) we introduced steps.
   There are 7 steps in total. On each step you want the user to perform an action.
   More information on Utility steps .
   Most developers are going to add an event listener whenever the utility changes the step and amend the frontend.

//react example
const [step, setStep] = useState(NftValidationUtility.STEP_UNINITIALIZED)
utility.addEventListener('stepChanged', (event) => {
    setStep(event.detail.step)
})

4. Implement your frontend and connect to Whal3s.
   Each step required another action/data.
   More information on Utility steps.

//react example
{step === NftValidationUtility.STEP_UNINITIALIZED && <span>loading...</span>}
{step === NftValidationUtility.STEP_INITIALIZED && <button onClick={() => utility.connectWallet()}>Connect wallet</button>}

5. That's all you need to know. Build the frontend you need.
   If you need an example, check out the Developer playground.