MirrorBattle

The platform MirrorBattle provides agentic tools for traders to follow “smart money wallets” and execute copy-trades based on a set of customizable criteria. Each trader configures his own agent, deposits a certain amount of USDC into the agentic wallet, and engages with a PvP competition of trading. On a 7-day rolling basis, a PvP battle is conducted and snapshots of beginning and ending balance of the agent wallets are taken. The trader with an agent earning higher return % wins the battle.

Key Features Frictionless onboarding with creation of server wallets with restricted policies. Leveraging both pre-screened smart money wallets and custom wallet addresses for copy trades. Agentic wallets for automated copy-trades. Gasless transactions on EVM via 0x API Customizable parameters for the deployment of copy-trade agents: Thresholds (in USD value) to trigger copy-trade

Roadmap & Future Plans Improvement of UI&UX design Add profit-taking & stop-loss rules to the agents Add multi-chain support, including Solana Add prize pools and prediction markets for each PvP battle

• Node.js and TypeScript: The API is developed using Node.js, and TypeScript ensures type safety and easier maintenance.
• Fastify Framework: Chosen for its high-performance HTTP handling, Fastify forms the backbone of our API. We made use of multiple Fastify plugins:
  • @fastify/cors: to handle cross-origin requests.
  • @fastify/formbody: for form data parsing.
  • @fastify/helmet: to secure HTTP headers.
  • @fastify/jwt: to provide JWT-based authentication seamlessly.
  • @fastify/sensible: which adds additional utilities for error handling and responses.
  • @fastify/websocket: to enable real-time communication where necessary.

Database and ORM:

• Prisma ORM: Prisma is used for interacting with the database, offering a type-safe query builder and migration system. The integration is streamlined with an automatic client generation as part of the post-install script.

Authentication and Blockchain Integration:

• @privy-io/server-auth: This partner technology was integrated to manage authentication, ensuring a secure backend. Its flexibility was particularly beneficial when combined with other modern authentication methods.

• Moralis, Viem, and Zod: These libraries were used to handle blockchain interactions and schema validation. They ensure that any blockchain-related functionality is reliably implemented and validated.

• Next.js and React: The frontend is built using Next.js—providing server-side rendering, static optimizations, and excellent routing—together with React to create interactive UI components.

• TypeScript: Used throughout the frontend for consistency and maintainability.

• Tailwind CSS and Sass: Tailwind CSS offers utility-first styling, while Sass is used for more modular and maintainable custom styles. Both work together to ensure a responsive and modern UI.

• Radix UI Components: A suite of unstyled yet highly accessible UI components was integrated, allowing rapid development of complex components such as accordions, dialog boxes, and tab systems without compromising on accessibility.

• Utility Libraries:

  • clsx, cmdk, date-fns, and others were included to handle various UI conveniences such as class name merging, command menu interactions, and date manipulation.
  • Plugin Ecosystem: Tools like tailwind-merge and tailwindcss-animate further refined the UI design.

Authentication and Blockchain in the Frontend:

• @privy-io/react-auth: Partner technology that handles client-side authentication. It seamlessly integrates with the backend’s authentication logic.
• Ethers and Viem: Provide the necessary tools for interacting with blockchain data where required by the app.

Notable Hacky Details:

• Some of the UI components, particularly those handling dynamic layouts and real-time interactions, required bespoke enhancements. For example, blending Next.js’s SSR capabilities with client-side blockchain interactions mandated careful state synchronization.
• Integration between Radix UI components and Tailwind CSS was optimized by creating custom utility classes, ensuring consistency across various modules and responsive behavior on different devices.
• There were moments when integrating blockchain functionalities, especially while combining traditional REST endpoints with blockchain data, required some creative workarounds. For instance, bridging asynchronous blockchain state with Fastify’s synchronous flow was a challenge, and we solved it using custom middleware that caches blockchain responses.
• The usage of Fastify’s ecosystem allowed rapid prototyping. The post-install Prisma generation ensured that any schema changes were instantly applied, enforcing a tight feedback loop during development.