papers/lux-market-nft/sections/06-technical-architecture.tex

\section{Technical Architecture}


\subsection{Frontend Stack}

The frontend uses modern Web3 technologies:

\begin{itemize}
\item \textbf{Next.js 14}: Server-side rendering and app router
\item \textbf{React 18}: Component architecture with hooks
\item \textbf{TypeScript}: Type-safe development
\item \textbf{Wagmi}: Web3 React hooks
\item \textbf{RainbowKit}: Wallet connection management
\item \textbf{Reservoir Kit}: NFT marketplace components
\item \textbf{Radix UI}: Accessible component primitives
\end{itemize}

\subsection{API Integration}

API architecture follows RESTful principles with GraphQL support:

\begin{lstlisting}[language=Solidity]
// Reservoir API integration
const fetchCollection = async (address: string) => {
  const response = await fetch(
    `${RESERVOIR_API}/collections/v5`,
    {
      params: {
        contract: address,
        includeTopBid: true,
        normalizeRoyalties: NORMALIZE_ROYALTIES
      }
    }
  );
  return response.json();
};
\end{lstlisting}

\subsection{Smart Contract Interactions}

Contract interactions utilize ethers.js with typed interfaces:

\begin{lstlisting}[language=Solidity]
// Execute aggregated buy
const executeBuy = async (
  tokens: Token[],
  options: BuyOptions
) => {
  const router = new Contract(
    ROUTER_ADDRESS,
    ROUTER_ABI,
    signer
  );
  
  const tx = await router.buy(
    tokens,
    options.recipient,
    options.referrer,
    { value: totalPrice }
  );
  
  return tx.wait();
};
\end{lstlisting}