Wallet.id

This is a white label template for hns.id. You can fork and modify to be used with any staked TLD

Customization

Basic customization are in the constants.js file and the src/assets folder, more specifically avatar.png and brand.png, as well as public/favicon.svg.

For more advanced customization, any component can be updated.

Contracts

The contracts addresses are also in the constants.js file. First is the testnet (Optimism Sepolia), and second the mainnet (Optimism).

Data

This project can be deployed as static website. All the data needed comes from smart contracts.

Handling the communication with the contracts can be done with a few React hooks:

useDomainStatus()

const { data } = useDomainStatus({ label: 'my-sld' });

/* Returns:
{
  "isAvailable": true,
  "labelValid": true,
  "publicRegistrationOpen": false,
  "isPremium": false,
  "priceInDollars": "5.00",
  "priceInWei": "2500000000000000",
  "label": "my-sld"
}
/*

useRegister()

const register = useRegister({
  label: 'my-sld',
  priceInWei: '2500000000000000',
});

<button onClick={register}>🤝</button>;

register is an async function that will invoke Metamask (or any other wallet the user choose) and will be resolved once the user signs the transaction.

Tip: you can connect both hooks:

const { data } = useDomainStatus({ label: 'my-sld' });
const register = useRegister(data);

usePrimaryName()

const { name, avatar } = usePrimaryName();

Both can be empty/null if the user hasn't defined a primary name a name yet.

Running locally

It uses yarn, so...

yarn install
yarn dev

... should do the magic.

GitHub Pages

As mentioned about, this project can be deployed as a static webpage, with no need for a backend like NodeJS or even Vercel, making it a great fit for GitHub pages.

After forking the project, enable Pages in the repository settings and update the CNAME file.