Prerequisites

Before you start coding you need the following prerequisites:

• An account on the Whal3s app
• An NFT (ERC-721) in one of your wallets + associated smart contract address.
  • If you don't have an NFT yet:
    • Head over to our Demo Page
    • Request Testnet tokens (Testnet tokens)
    • • Network: Mumbai*
        - Token: Matic tokens
      • Claim your free Whal3s NFT on Demo Page
• An NFT validation utility (Whal3s app -> NFT validation -> Add utility)
  - If you want to use the Whal3s NFT use the following configuration:
  - Network: Matic Mumbai (Polygon Testnet)
  - Smart Contract Address: 0x8f4d3Cf1998Fbf203F221c8986A0A11e14Fdb1a9

Clone the skeleton project from git, navigate into it and install JavaScript dependencies.

git clone https://github.com/Whal3s-xyz/nft-validation-utility-skeleton.git
cd nft-validation-utility-skeleton
npm install

If you are familiar with node scripts head ofter to Get started section

Getting started

Follow the steps and build your own utility dApp.

Install whal3s.js

npm i @whal3s/whal3s.js

Insert Utility ID

const id = '[YOUR-UTILITY-ID]';

Create Whal3s object

const whal3s = new Whal3s();

Create Validation Utility Instance

whal3s.createValidationUtility(id).then((newUtility) => {
    newUtility.addEventListener('stepChanged', (step) => {
        setStep(step.detail.step)
    })
    setUtility(newUtility)
    setStep(newUtility.step)
})

Let users connect their wallet

Call utility.connectWallet() when the Connect-Wallet-Button in 1_ConnectWallet.jsx is clicked.

<Button onClick={() => utility.connectWallet()}>Connect Wallet</Button>

Let users select one of their eligible NFTs

We already prepared an example visualization of all eligable NFTs.
You just need to set the token ID that should be used.

if(nft.valid)
    utility.tokenId = e.target.value

Reserve usage spot

In this example we make use of the reservation feature. This is optional but can be used to block this usage spot while asking for additional data like shipping address.
To do so, call reserveEngagement() when the Button in 3_SelectNft.jsx is clicked.

utility.reserveEngagement()

Claim utility

As already mentioned, we can add additional metadata to an engagement. This makes it possible to ship a completely serverless dApp.
In this example (4_ClaimNft.jsx) we only ask for a text input you can exchange it for name and email for example.
Finally you need to persist the claim. To do so, call storeEngagement on your utility object.

utility.storeEngagement({additionalData: additionalData})

Finished

Check out your dApp by running it using npm run start.
You are now able to claim your own utility on http://localhost:3000/
Finally head over to Whal3s App and check the freshly created engagement.

Tips and tricks

Account Center

You can customize the Wallet Configuration, like account center position, by passing a Configuration during Whal3s initialization.

const whal3s = new Whal3s({
    accountCenter: {
        desktop: {
            position: 'bottomRight', // position the account center to bottom right
        },
    }
});

Learn More

You can learn more in the Whal3s documentation.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.