App Flow

Overview

This document describes the user journey through the Primape Markets platform, from onboarding to completing prediction cycles and engaging with content.

Onboarding and Sign-In/Sign-Up

When a brand-new user lands on Primape Markets, they are immediately greeted by a modern landing page that emphasizes the decentralized and trustless nature of the platform. The first step in the user journey is wallet connection.

Users are prompted to connect their digital wallet using Thirdweb's ConnectButton, which supports popular options like MetaMask and InAppWallet. This connection serves as both sign-up and sign-in, ensuring that each user's identity is verified by their wallet address.

If a user decides to disconnect or switch wallets, they can easily sign out and re-initiate the connection process. Although there is no traditional email or password sign-up, a recovery process is inherently managed by the wallet provider, ensuring that users' private keys and recovery phrases remain their responsibility.

This initial phase sets the stage for all subsequent transactions and interactions, making wallet connection the central authentication mechanism across the app.

Main Dashboard or Home Page

Once the wallet is connected, users are taken directly to the main dashboard, which serves as the hub for all activities on Primape Markets. The dashboard is designed with a clear separation of concerns:

  • A left sidebar provides quick access to market browsing, engagement features, and user profiles
  • The central area displays the dynamic list of prediction markets
  • The top navigation bar offers options for switching themes—dark, light, or ape—and provides immediate access to user settings and notifications

Major sections on this home page include the active markets, pending events awaiting resolution, and previously resolved markets. This central view is not only informative but interactive, with each market card providing details such as event status, time remaining, and basic statistics.

Easy navigation from the dashboard to detailed market pages and engagement sections ensures a smooth and intuitive user journey from the entry point to advanced system functions.

Detailed Feature Flows and Page Transitions

After the initial dashboard, the user journeys into the predictive and interactive core features of the platform.

Market Details

When users click on a specific prediction market, they are taken to the market details page. This page explains the event, displays relevant statistics, and lists available outcomes. In this phase, users can review details pulled directly from the PrimapePrediction.sol smart contract, allowing them to assess factors like current wagers and potential multipliers.

Market Participation

If the user decides to participate, they can engage in the market by purchasing shares. The system presents an interactive trading interface that prompts the user to select an outcome and specify the number of $APE tokens they wish to wager.

Detailed fee calculations and multipliers—reflecting base engagement activities—are dynamically computed and presented through a modal interface known as MarketBuyInterface. Once confirmed, the app triggers a smart contract call to execute the buyShares function, providing immediate feedback and updating the user's portfolio.

Engagement-to-Earn

Additionally, users have the option of engaging with content to earn additional rewards. In the engagement-to-earn module, every action including listening, reading, commenting, sharing, and even promoting content is captured.

Here, the application sends engagement data to the /api/engage endpoint, where verification, rate limiting, and bonus point calculations occur. The flow between browsing markets, engaging with creators, and entering trading actions is seamless, with clear navigation cues and transitions ensuring that the user always knows where they are and how to get to the next step, be it buying shares or moving to another event.

Market Resolution and Claiming Winnings

At the end of prediction events, another page comes into play: the market resolution page. This is typically accessed by market creators or designated authorities who resolve the market by calling the resolveMarket function on the underlying smart contract.

Once the outcome is declared, users are directed to a simple, yet clear claim winnings page. Here, a familiar call-to-action allows participants in the winning outcome to trigger the claimWinnings function and retrieve their rewards.

Each transition between pages—from market details to engagement interactions, from trading confirmation modals back to the main dashboard, and finally to claim winnings—is designed to keep the user informed and in control of their journey on the platform.

Settings and Account Management

Within the application, all personal information and preferences are accessible through an easily reachable settings panel. This panel is part of the user profile experience and allows users to update details such as:

  • Connected wallet information
  • Preferred themes (dark, light, or ape)
  • Notification settings
  • Linked social handles for engagement verification
  • Risk management settings such as spending thresholds for transactions

For users involved in frequent trading or engagement activities, the settings page also offers a historical overview of activity, rewards accumulated, and detailed performance metrics as displayed on their profile.

This management console ensures that settings adjustments are straightforward and can be quickly reverted to the main dashboard with clear navigational breadcrumbs, maintaining the overall fluidity of the app journey.

Error States and Alternate Paths

The platform has been designed to gracefully handle any errors or deviations from the expected user flow.

  • If a wallet connection fails or if there is an issue during the authentication process, users are immediately presented with a clear error message that explains the problem and offers guidance on how to reconnect or choose an alternate wallet option.
  • Throughout the market participation and engagement processes, invalid data entry or smart contract transaction errors—such as insufficient funds or network delays—lead to immediate alerts. These messages appear either inline on the interactive interfaces or as modal pop-ups, ensuring that the user is informed of the exact issue.
  • In the engagement-to-earn module, if a user exceeds the daily rate limit or if a verification process fails, the system notifies them without interrupting other navigational paths.

The error handling is integrated in such a way that after resolving the issue—whether reinitiating a connection or correcting input data—the user can easily resume the normal flow without losing context or progress.

Conclusion and Overall App Journey

The Primape Markets application takes users on a coherent journey from the moment they land on the platform until they complete a full cycle of activity. Beginning with wallet connection for secure, blockchain-based authentication, users are impressed by a dynamic and informative dashboard that provides clear access to markets and engagement content.

As they dive into prediction markets, engage with creators, and participate in wager transactions, every step is linked by seamless page transitions and real-time smart contract interactions. Settings and account management are always within easy reach, ensuring personalized control over the user experience, while robust error handling helps maintain trust even when issues occur.

Ultimately, users will complete their prediction cycles—from placing bets to claiming winnings—while also benefiting from the additional rewards of engagement. This journey not only makes decentralized prediction markets accessible and fun but also sets the stage for continuous, rewarding user participation on Primape Markets.