Buffer is not defined error

If this error occurs you need to add 'buffer' to your project:

npm i buffer

import { Buffer } from 'buffer';
window.Buffer = window.Buffer || Buffer;

Uncaught ReferenceError: self is not defined (NextJS)

This error happens when embedding Whal3s on server side rendered pages (SSR) - especially NextJS.
To solve the error, wrap your component that uses Whal3s in a dynamic component.

import dynamic from 'next/dynamic'

const DynamicUtilityComponent = dynamic(() => import('./UtilityComponent'), {
    ssr: false
})

export default DynamicUtilityComponent

import React, {useEffect, useState} from 'react';
import Whal3s, {NftValidationUtility} from '@whal3s/whal3s.js'

const UtilityComponent = () => {

    const [utility, setUtility] = useState<NftValidationUtility | undefined>(undefined);
    const [step, setStep] = useState<number | undefined>(undefined);
  
    const init = async () => {
        const whal3s = new Whal3s();
        const _utility = await whal3s.createValidationUtility(process.env.whal3sUtilityId ?? '')
        _utility.addEventListener('stepChanged', () => {
            setStep(_utility.step)
        })
        setStep(_utility.step)
        setUtility(_utility)
    }

    useEffect(() => {
        init()
    }, [])


    return (
       //...
    );
};

export default UtilityComponent;