Developer Guide
dApp Kit

@vechain/dapp-kit-react

A single hook and some helper functions help enabling vet.domains in any dapp. An example project with the most relevant functionality is available on GitHub:
https://github.com/vechain-energy/examples-react-vetdomains (opens in a new tab)

Add the module to your existing DApp Kit react project (opens in a new tab):

yarn add @vechain.energy/dapp-kit-hooks

Hooks

useWalletName(address)

The hook will resolve a given address to its primary name, to enable personalization.

Example component:

import { useWallet, useWalletModal } from "@vechain/dapp-kit-react";
import { useWalletName } from "@vechain.energy/dapp-kit-hooks";
 
export default function UserAddress() {
  const { account, disconnect } = useWallet();
  const walletModal = useWalletModal();
  const { name } = useWalletName(account);
 
  if (!account) {
    return (
      <Button
        className={className}
        onClick={() => void walletModal.open()}
        variant={variant}
      >
        Connect
      </Button>
    );
  }
 
  if (name) {
    return <span>{name}</span>;
  }
 
  return (
    <span>
      {account.slice(0, 6)}...{account.slice(-4)}
    </span>
  );
}

Helper Functions

The helper functions support basic interaction like always resolving to an address or manually getting a record or name.

getAddress(name, connex)

  • Helper to always get an address returned, suited for sending integrations.
  • Returns given address or a getRecord() call.
import { useConnex } from "@vechain/dapp-kit-react"
import { getAddress } from "@vechain.energy/dapp-kit-hooks";
 
// ..
const connex = useConnex()
 
// ..
 
// always get an address
await getAddress("0x981ebf8F1F98465F93fd0208a0b5e531DdC37815", connex) 
await getAddress("hello.vet", connex)

getRecord(name, connex)

  • Lookup the address record for a name manually.
  • Returns address of ZeroAddress (0x0000000000000000000000000000000000000000).
import { useConnex } from "@vechain/dapp-kit-react"
import { getRecord } from "@vechain.energy/dapp-kit-hooks";
 
// ..
const connex = useConnex()
 
// ..
 
// get the address for a .vet name
await getRecord("hello.vet", connex)

getName(name, connex)

  • Lookup the primary name for an address.
  • Returns name or empty string.
import { useConnex } from "@vechain/dapp-kit-react"
import { getName } from "@vechain.energy/dapp-kit-hooks";
 
// ..
const connex = useConnex()
 
// ..
 
// get the primary name for an address
await getName("0x981ebf8F1F98465F93fd0208a0b5e531DdC37815", connex)

Input-Replacement

This component instantly swaps any address input field. It automatically resolves names and always provides a blockchain address when a users enters something.

import React, { type InputHTMLAttributes, useRef } from 'react';
import { getAddress } from '@vechain.energy/dapp-kit-hooks';
import { useConnex } from '@vechain/dapp-kit-react';
 
const CACHE: Record<string, string> = {};
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 
export default function NameInput({ onChange, ...props }: InputHTMLAttributes<HTMLInputElement>) {
    const connex = useConnex();
    const latestCallId = useRef(0);
 
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!onChange) { return }
 
        const value = e.target.value;
        if (!String(value).includes('.')) { return onChange(e); }
 
        if (CACHE[value]) {
            return passOnChangeWithValue(onChange, e, CACHE[value])
        }
 
        const callId = ++latestCallId.current;
        getAddress(value, connex)
            .then((address) => {
                CACHE[value] = address === ZERO_ADDRESS ? '' : address
                if (callId !== latestCallId.current) return; // Ignore if not the latest call
                return passOnChangeWithValue(onChange, e, CACHE[value])
            })
            .catch(() => {
                if (callId !== latestCallId.current) return; // Ignore if not the latest call
                onChange(e)
            })
    }
 
    return (
        <input
            {...props}
            onChange={handleChange}
        />
    )
}
 
function passOnChangeWithValue(handler, e: React.ChangeEvent<HTMLInputElement>, value) {
    handler({
        ...e,
        target: {
            ...e.target,
            value
        }
    });
}

Example

Before:

<input
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="0x.."
  />

After:

<NameInput
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="0x.. or .vet address"
  />
SubgraphNode.js