This is a white label template for hns.id. You can fork and modify to be used with any staked TLD
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.
The contracts addresses are also in the constants.js file. First is the testnet (Optimism Sepolia), and second the mainnet (Optimism).
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:
const { data } = useDomainStatus({ label: 'my-sld' });
/* Returns:
{
"isAvailable": true,
"labelValid": true,
"publicRegistrationOpen": false,
"isPremium": false,
"priceInDollars": "5.00",
"priceInWei": "2500000000000000",
"label": "my-sld"
}
/*
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);
const { name, avatar } = usePrimaryName();
Both can be empty/null if the user hasn't defined a primary name a name yet.
It uses yarn, so...
yarn install
yarn dev
... should do the magic.
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.