Sell Domains with the Partner API

chmod +x setup-pav3-guide.sh
./setup-pav3-guide.sh

API_URL = 'https://api.ud-sandbox.com/partner/v3'
API_KEY_VALUE = 'xxxxx'
PORT = 3001

import express, { Express, Request, Response } from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import axios from 'axios';

// Load environment variables from .env file
dotenv.config();

// Set up the Express application instance
const app: Express = express();
const port = process.env.PORT || 3001;

// Unstoppable Domains Sandbox API configurations
const UNSTOPPABLE_SANDBOX_API_KEY = process.env.API_KEY_VALUE as string;
const UNSTOPPABLE_SANDBOX_API_URL = process.env.API_URL as string;

// Middleware setup
app.use(express.json()); // For parsing JSON request bodies
app.use(cors()); // Enable Cross-Origin Resource Sharing

/**
 * GET /api/domains - Fetch domain suggestions based on a query string.
 *
 * @query {string} query - The search term for domain suggestions.
 * @returns {Response} - Returns a JSON response with domain suggestions or an error message.
 */
app.get('/api/domains', async (req: Request, res: Response) => {
  const query = req.query.query as string;
  try {
    const domains = await searchDomains(query);
    res.json(domains);
  } catch (error: any) {
    res.status(500).json({ error: 'Error fetching domains', details: error.message });
  }
});

/**
 * POST /api/register - Registers a domain by its ID.
 *
 * @body {string} domainId - The ID of the domain to be registered.
 * @returns {Response} - Returns a JSON response with registration status or an error message.
 */
app.post('/api/register', async (req: Request, res: Response) => {
  const domainId = req.body.domainId as string;
  try {
    const register = await registerDomain(domainId);
    if (register.error) {
      res.status(500).json(register);
    } else {
      res.json(register);
    }
  } catch (error: any) {
    res.status(500).json({ error: 'Error registering domain', details: error.message });
  }
});

/**
 * POST /api/availability - Checks availability of an array of domains.
 *
 * @body {string[]} domains - Array of domains to check availability.
 * @returns {Response} - Returns a JSON response with availability status or an error message.
 */
app.post('/api/availability', async (req: Request, res: Response) => {
  const domains = req.body.domains as string[];
  try {
    const availability = await checkAvailability(domains);
    if (availability.error) {
      res.status(500).json(availability);
    } else {
      res.json(availability);
    }
  } catch (error: any) {
    res.status(500).json({ error: 'Error checking domain availability', details: error.message });
  }
});

/**
 * Starts the Express server and listens on the specified port.
 * Logs a message to the console once the server is running.
 */
app.listen(port, () => {
  console.log('Server is running on http://localhost:%s', port);
});

app.post('/api/register', async (req: Request, res: Response) => {
  const domainId = req.body.domainId as string;
  try {
    const register = await registerDomain(domainId);
    if (register.error) {
      res.status(500).json(register);
    } else {
      res.json(register);
      trackOperation(register.operation.id);
    }
  } catch (error: any) {
    res.status(500).json({ error: 'Error registering domain', details: error.message });
  }
});

import path from 'path';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { JSONFile } from 'lowdb/node';
import { Low } from 'lowdb';
import { Orders } from './types/orders';
import { Transfers } from './types/transfers';
import { Returns } from './types/returns';

// Directory setup for the databases
const __dirname = dirname(fileURLToPath(import.meta.url));

// Default data for databases
const defaultOrderData: Orders = { items: <Order[]>[] }
const defaultTransferData: Transfers = { items: <Transfer[]>[] }
const defaultReturnData: Returns = { items: <Return[]>[] }

// Paths for local JSON databases
const orderDBPath = path.join(__dirname, 'data/orders.json')
const transferDBPath = path.join(__dirname, 'data/transfers.json')
const returnDBPath = path.join(__dirname, 'data/returns.json')

// LowDB instances for each JSON database
const orderDB = new Low(new JSONFile<Orders>(orderDBPath), defaultOrderData);
const transferDB = new Low(new JSONFile<Transfers>(transferDBPath), defaultTransferData);
const returnDB = new Low(new JSONFile<Returns>(returnDBPath), defaultReturnData);

/**
 * Initializes local JSON databases for orders, transfers, and returns.
 * Reads data from the database files and writes default data if none exists.
 */
const initDB = async () => {
  // Initialize Orders database
  await orderDB.read();
  orderDB.data = orderDB.data || defaultOrderData;
  await orderDB.write();

  // Initialize Transfers database
  await transferDB.read();
  transferDB.data = transferDB.data || defaultTransferData;
  await transferDB.write();

  // Initialize Returns database
  await returnDB.read();
  returnDB.data = returnDB.data || defaultReturnData;
  await returnDB.write();
  console.log('Databases initialized');
};

// Initialize the databases on server start
initDB().catch((error) => console.error('Error initializing DB:', error));

/**
 * Updates an operation in the database with new operation data.
 *
 * Reads the database, searches for an existing operation by its ID, and updates it
 * if found. Writes the updated data back to the database.
 *
 * @param {Operation} operation - The operation data to update in the database.
 * @param {Low<any>} db - The database instance to perform the update.
 * @returns {Promise<void>} - A promise that resolves when the operation is updated.
 */
const updateOperation = async (operation: Operation, db: Low<any>): Promise<void> => {
  await db.read();
  const item = db.data.items.find((item: any) => item.operation.id === operation.id);
  if (item) {
    item.operation = operation;
    await db.write();
  }
};

/**
 * Retrieves the current status of an operation from the database.
 *
 * This function reads the database, searches for an operation by its ID,
 * and returns its status. If the operation is not found, it returns the provided
 * default status.
 *
 * @param {string} operationId - The ID of the operation to retrieve the status for.
 * @param {string} status - The default status to return if the operation is not found.
 * @param {Low<any>} db - The database instance to search.
 * @returns {Promise<string>} - A promise that resolves to the status of the operation.
 */
const getCurrentOperationStatus = async (operationId: string, status: string, db: Low<any>): Promise<string> => {
  await db.read();
  const item = db.data.items.find((item: any) => item.operation.id === operationId);
  if (item) {
    return item.operation.status;
  }
  return status;
};

const trackOperation = async (operationId: string, db: Low<any>) => {
  const interval = setInterval(async () => {
    const operation = await checkOperation(operationId);
    const status = await getCurrentOperationStatus(operationId, operation.status, db);
    if (operation.error) {
      console.log('Error:', operation.error);
    } else {
      if (operation.status != status) {
        await updateOperation(operation, db);
        if (operation.status === 'COMPLETED') {
          // Handle completed operation
          clearInterval(interval);
        }
        if (operation.status === 'FAILED') {
          // Handle failed operation
          clearInterval(interval);
        }
        // You would want to ensure you're handling other status cases here
      }
    }
  }, 60000); // 1 minute timer
};

app.post('/api/register', async (req: Request, res: Response) => {
  const domainId = req.body.domainId as string;
  try {
    const register = await registerDomain(domainId);
    if (register.error) {
      res.status(500).json(register);
    } else {
      res.json(register);
      await orderDB.update(({ items }) => items.push(register));
      trackOperation(register.operation.id, orderDB);
    }
  } catch (error: any) {
    res.status(500).json({ error: 'Error registering domain', details: error.message });
  }
});

/**
 * Initializes tracking for any pending operations in the order, transfer, and return databases.
 * Loads the database data and identifies entries where the 'operation.status' is not 'COMPLETED'.
 * For each pending operation, it triggers tracking functions to monitor ongoing processes.
 *
 * @async
 * @function initializeTracking
 * @returns {Promise<void>} - Resolves once all pending operations have been re-tracked.
 */
const initializeTracking = async (): Promise<void> => {
  // Load databases
  await orderDB.read();
  await transferDB.read();
  await returnDB.read();

  // Function to check and track pending operations
  const checkAndTrackPendingOperations = async (db: Low<any>) => {
    // Update according to the appropriate status of the operation
    const pendingItems = db.data?.items?.filter((item: any) => item.operation.status !== 'COMPLETED' && item.operation.status !== 'FAILED') || [];
    for (const item of pendingItems) {
      await trackOperation(item.operation.id, db);
    }
  };

  // Check and track pending operations in each database
  await checkAndTrackPendingOperations(orderDB);
  await checkAndTrackPendingOperations(transferDB);
  await checkAndTrackPendingOperations(returnDB);
  console.log('Pending operations re-tracked');
}

// Call initializeTracking when server starts
initializeTracking().catch((error) => console.error('Error initializing tracking:', error));

/**
 * POST /api/checkout/:domain - Processes checkout for a domain by updating the order details.
 *
 * @param {string} domain - The domain ID in the URL path.
 * @body {string} wallet - Wallet address for the domain transfer.
 * @body {boolean} payment - Payment confirmation status.
 * @body {string} operationId - Operation ID associated with the checkout.
 * @returns {Response} - Returns a JSON response indicating order processing status.
 */
app.post('/api/checkout/:domain', async (req: Request, res: Response) => {
  const domain = req.params.domain as string;
  const walletAddress = req.body.wallet as string;
  const payment = req.body.payment as boolean;
  const operationId = req.body.operationId as string;
  try {
    await orderDB.read();
    const order = orderDB.data.items.find(order => order.operation.id === operationId);
    if (order) {
      order.walletAddress = walletAddress;
      order.payment = payment;
      await orderDB.write();
    }
    res.json('Order for domain ' + domain + ' is being processed');
  } catch (error: any) {
    res.status(500).json({ error: 'Error processing checkout', details: error.message });
  }
});

/**
 * Monitors the checkout process and handles domain transfer or return based on payment status.
 *
 * This function periodically checks the status of an order associated with the provided domain ID.
 * If the order status is 'COMPLETED' and payment is successful, it transfers the domain to the user's
 * wallet address. If payment is unsuccessful, it returns the domain to Unstoppable Domains.
 *
 * @param {string} operationId - The ID of the operation to monitor during checkout.
 */
const trackCheckout = async (operationId: string) => {
  const interval = setInterval(async () => {
    await orderDB.read();
    const order = orderDB.data.items.find(order => order.operation.id === operationId);
    if (order) {
      // Successful checkout
      if (order.operation.status === 'COMPLETED' && order.walletAddress && order.payment === true) {
        try {
          const domainTransfer = await transferDomain(order.operation.domain, order.walletAddress);
          if (domainTransfer.error) {
            console.log('Error transferring domain:', domainTransfer.error);
            // Handle failed init transfer
          } else {
            console.log('Domain transferred:', domainTransfer);
            // Handle successful init transfer
            clearInterval(interval);
            await transferDB.update(({ items }) => items.push(domainTransfer));
            trackOperation(domainTransfer.operation.id, transferDB);
          }
        } catch (error: any) {
          console.log('Error transferring domain:', error.message);
        }
      // Unsuccessful Checkout
      } else if (order.operation.status === 'COMPLETED' && order.payment != true) {
        try {
          const domainReturn = await returnDomain(order.operation.domain);
          if (domainReturn.error) {
            console.log('Error returning domain:', domainReturn.error);
            // Handle failed init return
          } else {
            console.log('Domain returned:', domainReturn);
            // Handle successful init return
            clearInterval(interval);
            await returnDB.update(({ items }) => items.push(domainReturn));
            trackOperation(domainReturn.operation.id, returnDB);
          }
        } catch (error: any) {
          console.log('Error returning domain:', error.message);
        }
      }
      // You would want to ensure you're handling other status cases here
    }
  }, 180000); // 3 minute timer
};

app.post('/api/register', async (req: Request, res: Response) => {
  const domainId = req.body.domainId as string;
  try {
    const register = await registerDomain(domainId);
    if (register.error) {
      res.status(500).json(register);
    } else {
      res.json(register);
      await orderDB.update(({ items }) => items.push(register));
      trackOperation(register.operation.id, orderDB);
      trackCheckout(register.operation.id);
    }
  } catch (error: any) {
    res.status(500).json({ error: 'Error registering domain', details: error.message });
  }
});

NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
NEXT_PUBLIC_CLIENT_ID=1234567890
NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000
NEXT_PUBLIC_SCOPES=openid wallet profile

'use client';
import React, { useState } from 'react';
import { fetchSuggestions } from './api/fetchSuggestions';
import { Suggestions } from '../types/suggestions';

export default function Home() {
  const [query, setQuery] = useState('');
  const [domains, setDomains] = useState<Suggestions | null>(null);
  const [error, setError] = useState('');
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [loading, setLoading] = useState(false);
  const domainsPerPage = 5;
  return (
    ...

interface PaginationProps {
  domainsPerPage: number;
  totalDomains: number;
  paginate: (pageNumber: number) => void;
}

/**
 * Pagination component to render page numbers for navigating through domain results.
 *
 * @param {number} domainsPerPage - Number of domains displayed per page.
 * @param {number} totalDomains - Total number of domain results.
 * @param {function} paginate - Callback function to change the page number.
 * @returns {JSX.Element} Pagination buttons for navigation.
 */
const Pagination: React.FC<PaginationProps> = ({ domainsPerPage, totalDomains, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalDomains / domainsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav className='flex justify-center m-[20px]'>
      <ul className='flex list-none gap-[10px]'>
        {pageNumbers.map(number => (
          <li key={number}>
            <button onClick={() => paginate(number)} className='text-white bg-[#007bff] hover:bg-[#0056b3] font-medium px-[10px] py-[5px] rounded-[4px]'>
              {number}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

/**
 * Fetches domain suggestions based on the current search query.
 * Updates the 'domains' state with the response or sets an error message if the fetch fails.
 */
const searchDomains = async () => {
  try {
    const response = await fetchSuggestions(query);
    setDomains(response!);
    setError('');
    setCurrentPage(1);
  } catch (error) {
    console.error(error);
    setError('Error fetching domains. Please try again.');
  }
};

// Calculate indexes for pagination based on current page
const indexOfLastDomain = currentPage * domainsPerPage;
const indexOfFirstDomain = indexOfLastDomain - domainsPerPage;
const currentDomains = domains?.items?.slice(indexOfFirstDomain, indexOfLastDomain);

/**
 * Sets the current page for pagination.
 * @param {number} pageNumber - The page number to navigate to.
 */
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);

/**
 * Handles form submission for domain search.
 * Validates user input, resets domain state, and initiates domain search.
 * 
 * @param {React.FormEvent<HTMLFormElement>} event - The form submit event.
 */
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const inputElement = document.getElementById('search') as HTMLInputElement;
  const inputValue = inputElement.value;
  
  // Validation checks
  const isValidLength = inputValue.length >= 1 && inputValue.length <= 24;
  const hasValidChars = ![...inputValue].some(char => !/[a-zA-Z0-9-]/.test(char));
  const startsWithHyphen = inputValue.startsWith('-');
  const endsWithHyphen = inputValue.endsWith('-');
  
  const isValid = isValidLength && hasValidChars && !startsWithHyphen && !endsWithHyphen;
  
  if (!isValid) {
    setDomains(null);
    setError('Must be 1-24 characters in length, Contain only letters, numbers, or hyphens, and cannot start or end with a hyphen.');
    return;
  }
  setLoading(true);
  try {
    setDomains(null); // Clear previous results
    await searchDomains(); // Fetch new search results
  } catch (error) {
    console.error('Error:', error);
  } finally {
    setLoading(false); // Reset loading state
  }
}

<form className='max-w-md mx-auto min-w-[400px] pt-[40px] pb-[30px]' onSubmit={(e: React.FormEvent<HTMLFormElement>) => {handleSubmit(e)}}>   
    <div className='relative text-[1.2em] block w-full bg-[#333] rounded-[8px]'>
        <div className='absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none '>
            <svg className='w-4 h-4 text-gray-500 dark:text-gray-400' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'>
                <path stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'/>
            </svg>
        </div>
        <input type='search' id='search' className='block w-full p-4 ps-10 bg-[#333] placeholder-gray-400 text-white rounded-[8px]' placeholder='Search for your new domain' onChange={(e) => setQuery(e.target.value)} required />
        <button type='submit' className='text-white absolute end-2.5 bottom-2.5 bg-[#007bff] hover:bg-[#0056b3] font-medium px-4 py-2 rounded-[4px]'>Search</button>
    </div>
    <span className='flex text-gray-500 text-center justify-center mt-2'>Must be 1-24 characters in length, Contain only letters, numbers, or hyphens, and cannot start or end with a hyphen.</span>
</form>
{error && <div className='text-red-500 text-center mb-[20px]'>{error}</div>}

<div className='flex flex-col items-center'>
  {loading &&
    <svg className='animate-spin -ml-1 mr-3 h-5 w-5 text-black' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
      <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4'></circle>
      <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
    </svg>
  }
  {currentDomains?.map((domain) => (
    <div key={domain.name} className='flex justify-between items-center w-full max-w-[600px] p-[10px] m-[10px] bg-[#333] rounded-[4px]'>
      <div>
        <p className='text-[1.2em] text-white'>{domain?.name}</p>
        <p className='text-[#bbb]'>{((domain?.price?.listPrice?.usdCents ?? 0) / 100).toFixed(2)} USD</p>
      </div>
      <button className='text-white text-[1.2em] bg-[#007bff] hover:bg-[#0056b3] font-medium px-4 py-2 rounded-[4px]'>Add to Cart</button>
    </div>
  ))}
</div>

<Pagination
  domainsPerPage={domainsPerPage}
  totalDomains={domains?.items?.length || 0}
  paginate={paginate}
/>

import { useCallback, useEffect, useState } from 'react';

/**
 * Custom React hook to manage state with localStorage, syncing updates across browser tabs.
 * Provides a value stored in localStorage and an updater function to modify it.
 *
 * @template T - The type of the state value to be stored.
 * @param {string} storageKey - The localStorage key under which the state is saved.
 * @param {T} fallbackState - The initial value to be used if no item exists in localStorage.
 * @returns {[T, (newValue: T) => void]} - An array containing the current state value and a function to update it.
 */
function useLocalStorage<T>(storageKey: string, fallbackState: T) {
  const isClient = typeof window !== 'undefined';

  const [value, setValue] = useState<T>(() => {
    if (isClient) {
      const storedValue = localStorage.getItem(storageKey);
      return storedValue ? JSON.parse(storedValue) : fallbackState;
    }
    return fallbackState;
  });

  useEffect(() => {
    if (isClient) {
      const storedValue = localStorage.getItem(storageKey);
      setValue(storedValue ? JSON.parse(storedValue) : fallbackState);
    }
  }, [storageKey, isClient]);

  useEffect(() => {
    const handleChanges = (e: StorageEvent) => {
      if (e.key === storageKey) {
        setValue(e.newValue ? JSON.parse(e.newValue) : fallbackState);
      }
    }
    if (isClient) {
      window.addEventListener('storage', handleChanges);
    }
    return () => {
      if (isClient) {
        window.removeEventListener('storage', handleChanges);
      }
    };
  }, [storageKey, fallbackState, isClient]);

  const updateStorage = useCallback(
    (newValue: T) => {
      setValue(newValue)
      if (isClient) {
        localStorage.setItem(storageKey, JSON.stringify(newValue))
      }
    },
    [storageKey, isClient]
  )

  return [value, updateStorage] as const;
};

export default useLocalStorage

'use client';
import { DomainSuggestion } from '@/types/suggestions';
import { createContext, useContext, ReactNode } from 'react';
import useLocalStorage from '../utils/useLocalStorage';
import { CartItem } from '@/types/cart';

/**
 * @typedef {Object} CartContextType - Defines the context type for the cart.
 * @property {CartItem[]} cart - Array of items in the cart.
 * @property {(item: DomainSuggestion) => void} addToCart - Function to add a domain suggestion to the cart.
 * @property {(name: string) => void} removeFromCart - Function to remove a domain by name from the cart.
 * @property {(name: string, operationId: string) => void} updateCartItemOperation - Updates the operation ID of a cart item.
 * @property {(name: string, availability: boolean) => void} updateCartItemAvailability - Updates availability status of a cart item.
 * @property {() => void} clearCart - Clears all items from the cart.
 */

interface CartContextType {
  cart: CartItem[];
  addToCart: (item: DomainSuggestion) => void;
  removeFromCart: (name: string) => void;
  updateCartItemOperation: (name: string, operationId: string) => void;
  updateCartItemAvailability: (name: string, availability: boolean) => void;
  clearCart: () => void;
}

/** Context to manage cart state throughout the application */
const CartContext = createContext<CartContextType | undefined>(undefined);

/**
 * CartProvider component to wrap children and provide cart context.
 *
 * @param {Object} props - Props passed to the provider component.
 * @param {ReactNode} props.children - The components that will consume cart context.
 * @returns {JSX.Element} Context provider with cart functionalities.
 */
export const CartProvider = ({ children }: { children: ReactNode }) => {
  const [cart, setCart] = useLocalStorage<CartItem[]>('CART_STORAGE', []);

  /**
   * Adds a new item to the cart if it doesn't already exist.
   * @param {DomainSuggestion} item - The domain suggestion to add.
   */
  const addToCart = (item: DomainSuggestion) => {
    const newItem = { suggestion: item, available: true, operationId: '' };
    const newCart = cart.some(cartItem => cartItem.suggestion.name === newItem.suggestion.name)
    ? cart
    : [...cart, newItem];
    setCart(newCart);
  };

  /**
   * Removes an item from the cart by its domain name.
   * @param {string} name - The name of the domain to remove.
   */
  const removeFromCart = (name: string) => {
    setCart(cart.filter((item: CartItem) => item.suggestion.name !== name));
  };

  /**
   * Updates the operation ID for a specific cart item.
   * @param {string} name - Name of the cart item to update.
   * @param {string} operationId - The new operation ID to set.
   */
  const updateCartItemOperation = (name: string, operationId: string) => {
    const updatedCart = cart.map((item) => 
      item.suggestion.name === name ? { ...item, operationId } : item
    );
    setCart(updatedCart);
  };

  /**
   * Updates the availability status of a specific cart item.
   * @param {string} name - Name of the cart item to update.
   * @param {boolean} available - Availability status to set.
   */
  const updateCartItemAvailability = (name: string, available: boolean) => {
    const updatedCart = cart.map((item) => 
      item.suggestion.name === name ? { ...item, available } : item
    );
    setCart(updatedCart);
  };

  /** Clears all items from the cart. */
  const clearCart = () => setCart([]);

  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart, updateCartItemOperation, updateCartItemAvailability, clearCart }}>
      {children}
    </CartContext.Provider>
  );
};

/**
 * Custom hook to use the CartContext.
 * Throws an error if used outside of CartProvider.
 * @returns {CartContextType} The cart context value.
 */
export const useCart = (): CartContextType => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
};

'use client';
import { createContext, useContext, ReactNode, useState } from 'react';
import useLocalStorage from '../utils/useLocalStorage';
import UAuth from '@uauth/js';
import { Authorization } from '@/types/auth';

/**
 * @typedef {Object} AuthContextType - Defines the context type for authentication.
 * @property {Authorization | null} auth - The current authentication details.
 * @property {boolean} authorizing - Indicates if authentication is in progress.
 * @property {() => void} login - Initiates the login process.
 * @property {() => void} logout - Logs the user out.
 */

interface AuthContextType {
  auth: Authorization | null;
  authorizing: boolean;
  login: () => void;
  logout: () => void;
}

/** Context to manage authentication state throughout the application */
const AuthContext = createContext<AuthContextType | undefined>(undefined);

// UAuth instance for managing user authentication
const uauth = new UAuth({
    clientID: process.env.NEXT_PUBLIC_CLIENT_ID,
    redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI,
    scopes: process.env.NEXT_PUBLIC_SCOPES
  });

/**
 * AuthProvider component to wrap children and provide authentication context.
 *
 * @param {Object} props - Props passed to the provider component.
 * @param {ReactNode} props.children - The components that will consume auth context.
 * @returns {JSX.Element} Context provider with authentication functionalities.
 */
export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [auth, setAuth] = useLocalStorage<Authorization | null>('AUTH_STORAGE', null);
  const [authorizing, setAuthorizing] = useState(false);

  /**
   * Initiates the login process with Unstoppable Domains.
   * Sets auth state on successful verification.
   */
  const login = async () => {
    try {
        setAuthorizing(true);
        const authorization = await uauth.loginWithPopup();
        setAuth(authorization || null);
    } catch (error) {
        setAuth(null);
        console.log('Error logging in: ' + error);
    } finally {
      setAuthorizing(false);
    }
  };

  /**
   * Logs the user out and clears the auth state.
   */
  const logout = async() => {
    await uauth.logout();
    setAuth(null)
  };

  return (
    <AuthContext.Provider value={{ auth, authorizing, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

/**
 * Custom hook to use the AuthContext.
 * Throws an error if used outside of AuthProvider.
 * @returns {AuthContextType} The auth context value.
 */
export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

import { CartProvider } from './context/CartContext';
import { AuthProvider } from './context/AuthContext';
...
return (
  <html lang='en'>
    <body className={'antialiased'}>
      <AuthProvider>
        <CartProvider>
          {children}
        </CartProvider>
      </AuthProvider>
    </body>
  </html>
);

import Link from 'next/link';
import { useCart } from '../context/CartContext';
import { useAuth } from '../context/AuthContext';
import { useEffect, useState } from 'react';

/**
 * Nav component that renders the application header with links to the cart and account information.
 * Displays a loading spinner during client-side hydration.
 *
 * @returns {JSX.Element} The header and navigation elements of the application.
 */
const Nav = () => {
  const { cart } = useCart();
  const { auth, authorizing, login, logout } = useAuth();
  const [isClient, setIsClient] = useState(false); // Tracks client-side rendering status

  /**
   * Initiates the login process for wallet connection.
   */
  const connectWallet = () => {
    try {
      login();
    } catch (error) {
      console.error('Error:', error);
    }
  };

  /**
   * Initiates the logout process to disconnect the wallet.
   */
  const disconnectWallet = () => {
    try {
      logout();
    } catch (error) {
      console.error('Error:', error);
    }
  };

  useEffect(() => {
    setIsClient(true); // Set to true once the component has mounted client-side
  }, []);

  // If rendering server-side, display loading state to avoid flash of un-hydrated content.
  if (!isClient) {
    return (
      <header className='bg-[#007bff] p-[20px] text-white text-[2em] text-center rounded-[4px] flex justify-between items-center'>
        <h1>
          <Link href='/'>Unstoppable Domains Partner API Example</Link>
        </h1>
        <nav className='flex flex-row space-x-4 text-lg'>
        <div className='h-5 w-5 m-auto'>
          <svg className='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
            <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4'></circle>
            <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
          </svg>
          </div>
      </nav>
      </header>
    );
  }

  return (
    <header className='bg-[#007bff] p-[20px] text-white text-[2em] text-center rounded-[4px] flex justify-between items-center'>
      <h1>
        <Link href='/'>Unstoppable Domains Partner API Example</Link>
      </h1>
      <nav className='flex flex-row space-x-4 text-lg'>
        <Link href='/cart' className='flex flex-row m-auto h-10 w-150'>
          <div className='h-5 w-5 m-auto'>
            <svg className=' items-center justify-center' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
              <path d='M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/>
            </svg>
          </div>
          <div className='h-auto m-auto pl-1 '>
            <span>Cart ({cart.length})</span>
          </div>
        </Link>
        {auth ? 
          <button type='button' onClick={() => disconnectWallet()} className='flex flex-row m-auto h-10 w-150'>
            <div className='h-5 w-5 m-auto'>
              <svg className='items-center justify-center' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
                <path d='M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/>
              </svg>     
            </div>
            <div className='h-auto m-auto pl-1'>
              <span>{auth.idToken.sub}</span>
            </div>
          </button>
        : <button type='button' onClick={() => connectWallet()} className='flex flex-row m-auto h-10 w-150'>
            
            <div className='h-5 w-5 m-auto'>
              {authorizing ?
                <svg className='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
                  <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4'></circle>
                  <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
                </svg>
              : <svg className='items-center justify-center' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
                  <path d='M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/>
                </svg>
              }
            </div>
            <div className='h-auto m-auto pl-1'>
              <span>Account</span>
            </div>
          </button>
        }
      </nav>
    </header>
  );
};

export default Nav;

import Nav from './components/NavBar';
import { useCart } from './context/CartContext';
...
const [currentPage, setCurrentPage] = useState<number>(1);
const [loading, setLoading] = useState(false);
const { cart, addToCart, removeFromCart } = useCart();
const domainsPerPage = 5;
...
return (
<div>
  <Nav />
  ...
  <div className='flex flex-col items-center'>
    ...
    {currentDomains?.map((domain) => (
      <div key={domain?.name} className='flex justify-between items-center w-full max-w-[600px] p-[10px] m-[10px] bg-[#333] rounded-[4px]'>
        <div>
          <p className='text-[1.2em] text-white'>{domain?.name}</p>
          <p className='text-[#bbb]'>{((domain?.price?.listPrice?.usdCents ?? 0) / 100).toFixed(2)} USD</p>
        </div>
        {cart.some(cartItem => cartItem?.suggestion?.name === domain?.name)
          ? <button onClick={() => removeFromCart(domain?.name)} className='text-[#49a668] text-[1.2em] bg-[#edf7f4] font-medium px-4 py-2 rounded-[4px]'>Added</button>
          : <button onClick={() => addToCart(domain)} className='text-white text-[1.2em] bg-[#007bff] hover:bg-[#0056b3] font-medium px-4 py-2 rounded-[4px]'>Add to Cart</button>
        }
      </div>
    ))}
  </div>
  ...

'use client';
import Link from 'next/link';
import Nav from '../components/NavBar';
import { claimDomain } from '../api/claimDomain';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useCart } from '../context/CartContext';
import { useAuth } from '../context/AuthContext';
import { fetchAvailability } from '../api/fetchAvailability';

const Cart = () => {
  const { cart, removeFromCart, updateCartItemOperation, updateCartItemAvailability, clearCart } = useCart();
  const { auth, login } = useAuth();
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const [isClient, setIsClient] = useState(false);
  const [allAvailable, setAllAvailable] = useState(false);
  const [availabilityLoading, setAvailabilityLoading] = useState(false);

  // Calculate total price of items in the cart
  let total = 0;
  cart.forEach((item) => {
    total += (item?.suggestion?.price?.listPrice?.usdCents ?? 0);
  });

  /**
   * Initiates the login process for wallet connection.
   */
  const connectWallet = () => {
    try {
      login();
    } catch (error) {
      console.error('Error:', error);
    }
  }

  // Early return to avoid server-side rendering issues
  if (!isClient) {
    return (
      <section>
        <Nav />
      </section>
    );
  }

  return (
    <section>
      <Nav />
      <div>
      </div>
    </section>
  )
};

export default Cart;

/**
 * Sets client-side flag and periodically checks domain availability in the cart every minute.
 */
useEffect(() => {
  setIsClient(true);
  // Reset cart operationId on load
  cart.forEach((item) => {
    updateCartItemOperation(item.suggestion.name, '');
  });
  // Check if all cart items are available on load
  setAllAvailable(cart.every(item => item.available ?? false));
  // Periodic check every 60 seconds for domain availability in the cart
  const interval = setInterval(() => {
    setAvailabilityLoading(true);
    checkCartAvailability(); // Check the cart availability on interval
    setAvailabilityLoading(false);
  }, 60000);

  return () => clearInterval(interval); // Cleanup on component unmount
}, []);

/**
 * Checks the availability of all domains in the cart.
 * It updates the cart items' availability status based on the API response.
 *
 * @returns {Promise<boolean>} - Returns a boolean indicating if all items in the cart are available.
 */
const checkCartAvailability = async (): Promise<boolean> => {
  try {
    setError('');
    const domains: string[] = cart.map(item => item.suggestion.name); // Collect domain names from the cart
    if (domains.length > 0) {
      interface Status {
        name: string;
        available: boolean;
      }
      const statuses: Status[] = [];
      // Call external availability check function
      const availability = await fetchAvailability(domains);
      // Update each cart item’s availability based on the API response
      if (availability?.items) {
        for (const item of availability?.items) {
          const cartItem = cart.find((cartItem) => cartItem.suggestion.name === item.name);
          if (cartItem) {
            if (item.availability.status === 'AVAILABLE') {
              updateCartItemAvailability(item.name, true)
              statuses.push({ name: item.name, available: true })
            } else {
              updateCartItemAvailability(item.name, false)
              statuses.push({ name: item.name, available: false })
            }
          }
        }
      }
      // Handle error when item availability is missing
      // Check if all cart items are available
      setAllAvailable(cart.every(item => item.available ?? false));
      // Return true if all items are available, otherwise false
      return statuses.every(item => item.available ?? false);
    }
    return false; // Return false if there are no items in the cart
  } catch (error) {
    console.log('Error checking domain availability:', error);
    setError('An unexpected error occurred. Please try again.');
    return false;
  }
};

/**
 * Registers the domains in the cart by first checking their availability and then attempting to claim each domain.
 * If any domain is unavailable or an error occurs during the registration, an error message is displayed.
 *
 * @returns {Promise<boolean>} - Returns a boolean indicating if the domain registration was successful.
 */
const registerDomain = async (): Promise<boolean> => {
  try {
      setError('');
      setAvailabilityLoading(true);
      const available = await checkCartAvailability(); // Check availability of all domains in the cart
      setAvailabilityLoading(false);
      // Display error message if any domain is unavailable
      if (!available) {
        setError('One or more items in your cart are no longer available. Please remove them before proceeding.');
        return false;
      }
      // Attempt to claim each domain in the cart
      for (const item of cart) {
        try {
          const claim = await claimDomain(item.suggestion); // Attempt to claim the domain
          if (claim?.operation?.id) {
            updateCartItemOperation(item.suggestion.name, claim?.operation.id); // Update operation ID for the item based on claim response
          }
          // Handle any errors when ID is missing
        } catch (error) {
          console.log('Error registering ' + item.suggestion.name + ':', error);
          setError('An unexpected error occurred while claiming ' + item.suggestion.name + '.');
          return false;
        }
      };
      return true; // Return true if all domains are successfully claimed
  } catch (error) {
    console.log('Error registering domains:', error);
    setError('An unexpected error occurred. Please try again.');
    return false;
  }
};

/**
 * Handles the form submission for checkout. It triggers the checkout process
 * and navigates to the checkout page upon success.
 * 
 * @param {React.FormEvent<HTMLFormElement>} event - The form submission event.
 */
const handleCheckout = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  setLoading(true);
  let success = false;
  try {
    success = await registerDomain();
  } catch (error) {
    console.log('Error:', error);
  } finally {
    setLoading(false);
    if (success) {
      router.push('/checkout');
    }
  }
}

return (
  <section>
    <Nav />
    <div className='mx-auto max-w-screen-xl px-4 2xl:px-0 pt-5'>
      <div className='mt-6 sm:mt-8 md:gap-6 lg:flex lg:items-start xl:gap-8'>
        {cart.length === 0 ? (
          <p className='text-center text-lg text-gray-500 dark:text-gray-400 mt-10 mx-auto'>
            Your cart is empty.
          </p>
        ) : (
          <div>
            {cart.map((item) => (
              <div key={item?.suggestion?.name} className='pb-5'>
                <div>
                  <div className='rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6'>
                    <div className='space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0'>
                      <svg className='h-20 w-20' focusable='false' aria-hidden='true' viewBox='0 0 40 40'>
                        <path d='M38.3333 3.90803V16.5517L1.66666 31.4942L38.3333 3.90803Z' fill='#00C9FF'></path><path d='M31.4583 3.33333V25.1724C31.4583 31.5203 26.3281 36.6667 20 36.6667C13.6719 36.6667 8.54166 31.5203 8.54166 25.1724V15.977L15.4167 12.1839V25.1724C15.4167 26.2394 15.8392 27.2626 16.5913 28.0171C17.3434 28.7716 18.3635 29.1954 19.4271 29.1954C20.4907 29.1954 21.5108 28.7716 22.2629 28.0171C23.015 27.2626 23.4375 26.2394 23.4375 25.1724V7.75862L31.4583 3.33333Z' fill='#0D67FE'></path>
                      </svg>
                      <div className='flex items-center justify-between md:order-3 md:justify-end'>
                        <div className='text-end md:order-4 md:w-32'>
                          <p className='text-base font-bold text-gray-900 dark:text-white'>{((item?.suggestion?.price?.listPrice?.usdCents ?? 0) / 100).toFixed(2)} USD</p>
                        </div>
                      </div>
    
                      <div className='flex flex-col w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md'>
                        <span className='text-base font-medium text-gray-900 dark:text-white'>{item?.suggestion?.name}</span>
                        {availabilityLoading &&
                          <svg className='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
                            <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4'></circle>
                            <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
                          </svg>
                        }
                        {!availabilityLoading && !item?.available && <span className='text-xs font-medium text-red-600 dark:text-red-500'>Domain is no longer available</span>}
                        {!availabilityLoading && item?.available && <span className='text-xs font-medium text-green-600 dark:text-green-500'>Domain is available</span>}
                        <div className='flex items-center gap-4'>
                          <button type='button' className='inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500' onClick={() => removeFromCart(item?.suggestion?.name)}>
                            <svg className='me-1.5 h-5 w-5' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
                              <path stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18 17.94 6M18 18 6.06 6' />
                            </svg>
                            Remove
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            <Link href='/cart' onClick={() => clearCart()} className='flex flex-row font-medium text-gray-500 max-w-[120px] max-h-[20px]'>
              <div className='h-auto'>
                <span>Clear Cart</span>
              </div>
            </Link>
          </div>
        )}
        {cart.length > 0 &&
          <div className='mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-[25%]'>
            <div className='space-y-4 rounded-[8px] border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6'>
              <p className='text-xl font-semibold text-gray-900 dark:text-white'>Order summary</p>

              <div className='space-y-4'>
                <dl className='flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700'>
                  <dt className='text-base font-bold text-gray-900 dark:text-white'>Total</dt>
                  <dd className='text-base font-bold text-gray-900 dark:text-white'>{((total ?? 0) / 100).toFixed(2)} USD</dd>
                </dl>
              </div>

              <form onSubmit={handleCheckout}>
              { (auth && allAvailable) ? 
                <button type='submit' className='flex mx-auto w-[50%] md:w-[40%] items-center justify-center rounded-lg bg-[#007bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'>
                  {loading &&
                    <svg className='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
                      <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4'></circle>
                      <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
                    </svg>
                  }
                  Proceed to Checkout
                </button>
              : <div className='flex mx-auto w-[50%] md:w-[40%] items-center cursor-not-allowed justify-center rounded-lg bg-[#007bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'>
                  Proceed to Checkout
                </div>
              }
              </form>
              {error && <div className='text-red-500 text-center mb-[20px]'>{error}</div>}
              <div className='flex items-center justify-center gap-2'>
                <span className='text-sm font-normal text-gray-500 dark:text-gray-400'> or </span>
                <Link href='/' className='inline-flex items-center gap-2 text-sm font-medium underline hover:no-underline text-[#007bff]'>
                  Continue Shopping
                </Link>
              </div>
              { auth ? 
                <p className='text-sm font-normal text-gray-500 dark:text-gray-400 text-center'>
                  Connected Wallet Address:&nbsp;
                  <span className='items-center gap-2 text-sm font-medium text-[#007bff]'>
                    {auth?.idToken?.sub}&nbsp;
                    <span className='text-xs text-gray-500 dark:text-gray-400'>
                      ({auth?.idToken?.wallet_address})
                    </span> 
                  </span>
                </p>
              : <p className='text-sm font-normal text-gray-500 dark:text-gray-400 text-center'>
                  One or more items in your cart require a wallet connection.&nbsp;
                  <button onClick={() => connectWallet()} title='' className='font-medium text-primary-700 underline hover:no-underline dark:text-primary-500'>
                    Connect your wallet now.
                  </button>
                </p>
              }
            </div>
          </div>
        }
      </div>
    </div>
  </section>
);

'use client';
import { useCart } from '../context/CartContext';
import Nav from '../components/NavBar';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '../context/AuthContext';
import { initCheckout } from '../api/initCheckout';
import Link from 'next/link';
import useLocalStorage from '../utils/useLocalStorage';

/**
 * Checkout component manages the checkout process, including the countdown timer, domain transfer,
 * and final checkout submission. It checks if the cart has items and if the user is authenticated 
 * before proceeding. The user has a two-minute window to complete the checkout process.
 * 
 * @component
 */
const Checkout = () => {
  const { cart } = useCart();
  const { auth } = useAuth();
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const [isClient, setIsClient] = useState(false);
  const [expired, setExpired] = useState(false);
  const [timeLeft, setTimeLeft] = useState<number>(0);
  const [startTime, setStartTime] = useLocalStorage<number | null>('CHECKOUT_TIME', null);
  const countdownTime = 120;

  /**
   * Redirects the user to the cart page if the cart is empty, invalid, or the user is not authenticated.
   */
  useEffect(() => {
    if (cart.length === 0 || !auth) {
      router.push('/cart');
    } else if (cart.some(item => item.operationId === '')) {
      router.push('/cart');
    }
  }, [cart, auth, router]);

  /**
   * Ensures the component is only rendered on the client side.
   */
  useEffect(() => {
    setIsClient(true);
  }, []);

  // Calculate total price of items in the cart
  let total = 0;
  cart.forEach((item) => {
    total += (item?.suggestion?.price?.listPrice?.usdCents ?? 0);
  });

  // Early return to avoid server-side rendering issues
  if (!isClient) {
    return (
      <section>
        <Nav />
      </section>
    );
  }

  return (
    <section>
      <Nav />
      <div>
      </div>
    </section>
  )
};

export default Checkout;

/**
 * Calculates the remaining time on the countdown timer.
 */
useEffect(() => {
  const currentTime = Math.floor(Date.now() / 1000); // Get current timestamp in seconds
  if (startTime) {
    const elapsedTime = currentTime - startTime;
    const remainingTime = countdownTime - elapsedTime;
    // If time expired, stop the checkout process
    if (remainingTime <= 0) {
      setExpired(true);
      setTimeLeft(0);
      setStartTime(null);
      return;
    }
    // Otherwise, update the time left
    setTimeLeft(remainingTime);
  } else {
    // If no start time, initialize the countdown
    setStartTime(currentTime);
    setTimeLeft(countdownTime);
    setExpired(false);
  }
  /**
   * Interval to update the countdown timer every second.
   */
  const interval = setInterval(() => {
    setTimeLeft((prevTime) => {
      if (prevTime <= 0) {
        clearInterval(interval);
        setExpired(true);
        setStartTime(null);
        return 0;
      }
      return prevTime - 1;
    });
  }, 1000);
  // Cleanup the interval on component unmount or when countdown is finished
  return () => clearInterval(interval);
}, []);

/**
 * Helper function to format remaining time into minutes and seconds.
 * @param {number} seconds - The time in seconds to format.
 * @returns {string} - Formatted time string in 'minutes:seconds' format.
 */
const formatTime = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return minutes + ':' + (secs < 10 ? '0' : '') + secs;
};

/**
 * Executes the checkout process for each item in the cart.
 * It tries to process each domain in the cart and queues the transfer using initCheckout.
 * If any error occurs during the transfer, an error message is set and the process stops.
 * 
 * @returns {Promise<boolean>} - Returns a boolean indicating if the checkout was successful.
 */
const checkout = async (): Promise<boolean> => {
  try {
    setError('');
    for (const item of cart) {
      try {
          if (auth?.idToken.wallet_address && item.operationId) {
            await initCheckout(item.suggestion.name, auth?.idToken.wallet_address, true, item.operationId);
          }
          // Handle any errors when wallet_address and operation ID are missing
        } catch (error) {
          console.log('Error registering ' + item.suggestion.name + ':', error);
          setError('An unexpected error occurred while claiming ' + item.suggestion.name + '.');
          return false; // If an error occurs for a domain, return false to halt checkout
        }
    };
    return true; // Return true if all domains are successfully processed
  } catch (error) {
    console.error('Error processing domains:', error);
    setError('An unexpected error occurred. Please try again.');
    return false; // Return false if there's an issue with the overall checkout
  }
};