VNS Partner Registration

A React application for registering .vet.domains names through the VeChain Name Service (VNS) partner registrar.

Overview

This application allows users to:

• Check availability of domain names
• View registration prices
• Register domain names with the VNS system
• Set reverse records for domain resolution

Technical Stack

• React with TypeScript
• Vite for build tooling
• TanStack Query for data fetching
• VeChain DApp Kit for blockchain interaction
• Tailwind CSS for styling

Custom Hooks

useVNS

The main hook that combines all VNS-related functionality. It manages the registration process and transaction status.

const { 
  checkAvailability,  // Hook to check name availability
  getPrice,          // Hook to get registration price
  register,          // Function to register a name
  error,             // Current error state
  transactionId,     // Current transaction ID
  transactionStatus, // Status of current transaction
  resetTransaction   // Reset transaction state
} = useVNS();

useNameAvailability

Checks if a domain name is available for registration.

const { data: isAvailable, isLoading } = useNameAvailability(name);

Features:

• Validates name format
• Checks availability on the VNS contract
• Returns boolean indicating availability

useNamePrice

Retrieves the registration price for a domain name.

const { data: price, isLoading } = useNamePrice(name, duration);

Returns:

interface PriceResult {
  base: string;        // Base price in VET
  premium: string;     // Premium price in VET
  rawBase: bigint;     // Raw base price in Wei
  rawPremium: bigint;  // Raw premium price in Wei
  total: string;       // Total price in VET
}

useNameRegistration

Handles the domain registration process.

const { register } = useNameRegistration();

Registration process:

1. Validates name format
2. Creates registration transaction
3. Sets up resolver
4. Sets reverse record
5. Handles transaction signing and submission

Name Validation

Names must meet the following criteria:

• Minimum 3 characters
• Cannot include the .vet suffix (added automatically)
• Must use valid characters (normalized using ENS normalization)

Contract Interactions

The application interacts with the following VNS contracts:

• Partner Registrar: 0xa0b6d50571C81Bc46B9C1D5dB50f81533ac23AF5
• Public Resolver: 0xabac49445584C8b6c1472b030B1076Ac3901D7cf
• Reverse Registrar: 0x5c970901a587BA3932C835D4ae5FAE2BEa7e78Bc

Registration Process

1. Name Validation

   • Check name length and format
   • Normalize using ENS normalization
   • Validate characters

2. Availability Check

   • Query the VNS contract
   • Verify name is available

3. Price Calculation

   • Get base price
   • Calculate premium (if any)
   • Convert to user-friendly format

4. Registration

   • Create registration transaction
   • Set resolver
   • Set reverse record
   • Sign and submit transaction

5. Transaction Monitoring

   • Track transaction status
   • Update UI based on confirmation
   • Handle errors

Error Handling

The application handles various error cases:

• Invalid name format
• Names that are too short
• Unavailable names
• Transaction failures
• Network errors

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview