Creating A Totem Details Page: A Frontend Guide

by Alex Johnson 48 views

In this comprehensive guide, we'll walk through the process of creating a detailed Totem page for a frontend application. This page will display comprehensive information about a specific totem, including its voters and voting statistics. We will cover everything from UI design and data loading to interactive features and performance optimization. Our goal is to provide a clear, step-by-step approach to building a robust and user-friendly Totem Details page.

Understanding the Totem Details Page

The Totem Details page serves as a dedicated space for presenting in-depth information about a proposed totem. It aims to provide transparency by showcasing who has voted, the amount of their votes, and when the votes were cast. Visual aids like graphs further enhance understanding, offering a complete picture of the totem's performance and reception. The main goal is to offer users a holistic view of each totem, encouraging informed participation and engagement within the platform.

Key Features of the Totem Details Page

To effectively achieve its purpose, the Totem Details page encompasses several key features:

  1. Totem Information Section (Hero): This section acts as the introduction to the totem, featuring high-resolution images (often sourced from IPFS), the totem's name, its type (such as Object, Animal, Trait, or Universe), and a comprehensive description. Additionally, it highlights the associated founder (complete with a profile picture), the totem's current ranking (indicated with medals for the top three positions), the proposer's address (along with Blockies), and the date the totem was proposed. Animations, using libraries like Framer Motion, can add a dynamic touch to this section.
  2. Voting Statistics Section: This area is dedicated to presenting the numerical data related to the totem's voting performance. Glassmorphic cards display key metrics such as the total TRUST deposited, the number of unique voters, the average vote per voter, the largest single vote (the "whale"), and the most recent vote timestamp. Contextual icons further clarify each statistic's meaning.
  3. List of Voters Section: This section provides a detailed list of all the individuals who have deposited votes for the totem. Presented in a table or list format, it includes columns for Rank, Voter, Amount, Date, and a link to the explorer. The default sorting is by the descending amount, but users can also sort by date. Each voter is represented by their Blockies avatar, and a link to Basescan is provided for further exploration. Pagination is implemented for totems with more than 50 voters to ensure a smooth user experience.
  4. Graphical Visualizations Section: This section transforms the voting data into visual representations. Charts such as a timeline of votes (line chart), distribution of amounts (histogram), cumulative TRUST over time, and a pie chart comparing the top 10 voters against others are included. Libraries like recharts are used to create these responsive and informative charts, complete with tooltips for additional details.
  5. Comparison with Other Totems Section: This section adds context by comparing the current totem with others proposed by the same founder. Mini cards of competitors, progress bars, and links to their detail pages allow users to quickly assess the totem's relative performance.
  6. Action Buttons: These interactive elements allow users to take action related to the totem. Buttons include options to vote for the totem (if the voting period is active), add TRUST (if the user has already voted), share the totem, and copy the link. These buttons are disabled if the voting has concluded.

By incorporating these features, the Totem Details page becomes a comprehensive tool for understanding and interacting with proposed totems, enhancing the overall user experience and engagement within the platform.

UI Design and Layout

Crafting a user-friendly and visually appealing interface for the Totem Details page is paramount. A responsive glassmorphic layout is the foundation, providing a modern and elegant look that adapts seamlessly to various screen sizes. This design choice ensures a consistent and engaging user experience across devices, which is crucial for accessibility and user satisfaction.

Key UI Elements and Their Functions

  1. Responsive Glassmorphic Layout: The glassmorphism effect, characterized by translucent panels and subtle background blurring, adds depth and visual interest to the page. Its responsiveness ensures that the layout adjusts gracefully to different screen sizes, maintaining readability and usability on desktops, tablets, and mobile devices.
  2. Totem Information Section (Hero): This section serves as the visual and informational introduction to the totem. It prominently displays the totem's image in high resolution (often sourced from IPFS for decentralized storage), ensuring visual clarity and appeal. The totem's name is presented in a large, eye-catching font size, making it immediately recognizable. A badge indicating the totem's type (e.g., Object, Animal, Trait, Universe) provides quick categorization. The full description offers in-depth context, while the associated founder's information (including their photo) adds a personal touch. The current ranking (1st, 2nd, 3rd) is visually highlighted with corresponding medals, and the proposer's address (along with Blockies) adds a layer of transparency. The proposal date provides a historical context, and Framer Motion animations can be used to create engaging transitions and interactions.
  3. Voting Statistics Section: This section uses glassmorphic cards to present key voting metrics in a clean and organized manner. Each card displays a specific statistic, such as the total TRUST deposited, the number of unique voters, the average vote per voter, the largest vote (whale), and the most recent vote timestamp. Contextual icons are used to provide visual cues and aid understanding, making the data more accessible and intuitive.
  4. List of Voters Section: This section presents a detailed breakdown of voter participation. A table or list format is used to display deposits, with columns for Rank, Voter, Amount, Date, and Explorer link. Sorting options (defaulting to descending amount) allow users to analyze the data based on different criteria. Blockies avatars provide a visual representation of each voter, and links to Basescan offer further transparency. Pagination is implemented for totems with a large number of voters (over 50) to ensure smooth scrolling and optimal performance.
  5. Graphical Visualizations Section: This section transforms voting data into insightful visuals. A timeline of votes (line chart) shows voting trends over time, while a distribution of amounts (histogram) illustrates the range of vote sizes. Cumulative TRUST over time displays the overall accumulation of support, and a pie chart compares the top 10 voters against the rest, highlighting key contributors. The use of libraries like recharts ensures that these charts are responsive and interactive, with tooltips providing additional information.
  6. Comparison with Other Totems Section: This section adds context by comparing the current totem with others proposed by the same founder. Mini cards of competing totems offer a quick visual comparison, and progress bars illustrate the relative TRUST levels. Links to the competitors' detail pages allow users to delve deeper into their performance.
  7. Action Buttons: These interactive elements provide users with actionable options. Buttons are included for voting for the totem (if the voting period is active), adding TRUST (if the user has already voted), sharing the totem, and copying the link. These buttons are disabled when the voting period has ended, preventing further interaction.

Design Coherence and User Experience

Maintaining a consistent design language across the Totem Details page and the broader application is essential. This includes using a unified color palette, typography, and UI elements. Design coherence enhances the user experience by creating a sense of familiarity and ease of navigation. Attention to detail, such as consistent spacing, alignment, and visual hierarchy, further contributes to a polished and professional interface.

Data Loading and Management

Efficiently loading and managing data is critical for the performance and usability of the Totem Details page. This involves fetching data from various sources, handling loading states and errors, and ensuring data integrity. The primary approach is to use GraphQL queries to retrieve the necessary data, leveraging the power of precise data fetching and minimizing over-fetching.

Data Sources and Queries

  1. Identifying Totem: The first step is to identify the specific totem for which details are to be displayed. This is typically done by extracting the totemId or tripleId from the URL parameters. These identifiers serve as the key to querying the relevant data.
  2. GraphQL Queries: GraphQL is used to fetch the necessary data efficiently. A comprehensive GraphQL query, such as Triple details complet, is constructed to retrieve all the required information in a single request. This query includes details about the totem, its founder, vault statistics, and deposits. The use of GraphQL ensures that only the necessary data is fetched, reducing network overhead and improving performance.
  3. Data Inclusions: The GraphQL query specifically includes the following data points: totem, founder, vault stats, and deposits. The deposits represent the list of voters, which is crucial for displaying voter information and statistics.
  4. Loading States: To provide a smooth user experience, loading skeletons are implemented. These are placeholder UI elements that mimic the structure of the actual content, giving users visual feedback that data is being loaded. This prevents a jarring experience of blank screens while waiting for data to arrive.
  5. Error Boundaries: Error boundaries are implemented to gracefully handle any errors that may occur during data fetching or rendering. These boundaries catch errors and display a user-friendly error message, preventing the entire page from crashing. This ensures that users are informed of any issues and can take appropriate action, such as refreshing the page or contacting support.

Handling Voter Data

  1. Fetching Complete Deposit List: One of the key requirements is to fetch a complete list of deposits (voters). This list is essential for displaying the voters, their contributions, and for calculating various voting statistics.

Optimizing Data Loading

  1. GraphQL Caching: Implementing GraphQL caching can significantly improve performance. Caching allows frequently accessed data to be stored locally, reducing the need to make repeated requests to the server. This results in faster loading times and a smoother user experience.
  2. Prefetching Data: Prefetching involves loading data in advance, anticipating the user's next action. For example, data for the Totem Details page can be prefetched when a user navigates to a related page, such as a list of totems. This ensures that the data is readily available when the user accesses the Totem Details page, minimizing load times.

Displaying Voting Statistics

Presenting voting statistics in a clear and concise manner is crucial for conveying the performance and reception of a totem. The Voting Statistics Section utilizes glassmorphic cards to display key metrics, providing users with a quick overview of the totem's voting activity.

Key Metrics Displayed

  1. Total TRUST Deposited: This metric represents the aggregate amount of TRUST tokens deposited for the totem. It provides an overall measure of the financial support and confidence in the totem.
  2. Number of Unique Voters: This metric counts the distinct individuals who have voted for the totem. It indicates the breadth of support and engagement from the community.
  3. Average Vote per Voter: Calculated by dividing the total TRUST deposited by the number of unique voters, this metric provides insight into the average level of support from each voter.
  4. Largest Vote (Whale): This metric identifies the single largest vote for the totem. It highlights the significant contributions from key supporters and can indicate influential backers.
  5. Most Recent Vote (Timestamp): This metric displays the timestamp of the most recent vote, providing a real-time indication of ongoing voting activity.

Design and Visual Elements

  1. Glassmorphic Cards: The use of glassmorphic cards provides a modern and visually appealing way to present the statistics. The translucent panels with subtle background blurring add depth and visual interest, while maintaining a clean and uncluttered layout.
  2. Contextual Icons: Each statistic is accompanied by a contextual icon, providing a visual cue that aids understanding. Icons can quickly convey the meaning of the metric, making the information more accessible and intuitive.

Showcasing the List of Voters

A comprehensive list of voters is essential for transparency and provides valuable insights into the supporters of a totem. The List of Voters Section presents this information in a structured format, allowing users to explore the individual contributions and engagement.

Display Format and Columns

  1. Table or List Format: The voter list is presented in either a table or list format, depending on the design preferences and the complexity of the data. A table format is ideal for displaying multiple columns of information, while a list format may be more suitable for mobile devices or simpler layouts.
  2. Columns: The list includes the following columns:
    • Rank: The rank of the voter based on their deposit amount.
    • Voter: The address of the voter.
    • Amount: The amount of TRUST tokens deposited by the voter.
    • Date: The date and time of the deposit.
    • Explorer Link: A link to the transaction on a blockchain explorer like Basescan, allowing users to verify the deposit.

Sorting and Ordering

  1. Default Sort: The default sorting is by the descending amount, meaning the voters with the largest deposits are displayed at the top of the list. This provides an immediate view of the most significant contributors.
  2. Sorting Options: Users are provided with options to sort the list by other criteria, such as date. This allows users to analyze the voting data from different perspectives.

Visual Representation and Navigation

  1. Blockies Avatars: Each voter is represented by their Blockies avatar, a visual identifier that adds a personal touch to the list. Blockies are generated based on the voter's address, providing a unique and recognizable icon.
  2. Basescan Links: A link to Basescan is provided for each voter, allowing users to explore the transaction details on the blockchain. This enhances transparency and allows users to verify the deposits independently.
  3. Pagination: For totems with a large number of voters (over 50), pagination is implemented. This breaks the list into smaller, manageable chunks, improving performance and user experience. Pagination prevents the page from becoming too long and unwieldy, ensuring smooth scrolling and navigation.

Visualizing Data with Graphs

Graphical visualizations are powerful tools for conveying complex data in an accessible and engaging manner. The Graphical Visualizations Section transforms voting data into insightful charts, providing users with a deeper understanding of the totem's performance and reception. Libraries like recharts are commonly used to create these visualizations due to their flexibility and ease of use.

Types of Graphs

  1. Timeline of Votes (Line Chart): A line chart is used to display the voting activity over time. The x-axis represents the timeline, and the y-axis represents the number of votes or the amount of TRUST deposited. This chart helps users identify trends and patterns in voting activity, such as peak voting periods or periods of sustained support.
  2. Distribution of Amounts (Histogram): A histogram is used to show the distribution of vote amounts. The x-axis represents the range of vote amounts, and the y-axis represents the number of voters within each range. This chart helps users understand the distribution of vote sizes, identifying common vote amounts and outliers.
  3. Cumulative TRUST over Time: This chart displays the cumulative amount of TRUST deposited for the totem over time. The x-axis represents the timeline, and the y-axis represents the cumulative TRUST. This visualization provides a clear picture of the overall support for the totem and how it has grown over time.
  4. Pie Chart: Top 10 Voters vs. Others: A pie chart is used to compare the contributions of the top 10 voters against the rest. The pie is divided into slices, with each slice representing the proportion of TRUST deposited by the top 10 voters and the remaining voters. This chart highlights the significance of key contributors and the distribution of support.

recharts Library

The recharts library is a popular choice for creating these visualizations due to its flexibility, performance, and ease of use. recharts is a composable charting library built on React components, allowing developers to create custom charts with a wide range of options and configurations. The library supports various chart types, including line charts, histograms, pie charts, and more.

Responsive Design and Tooltips

  1. Responsive Design: It is essential that the graphs are responsive, adapting to different screen sizes and devices. This ensures that the visualizations are displayed correctly and are easy to interact with, regardless of the user's device.
  2. Informative Tooltips: Tooltips are used to provide additional information when users hover over data points on the charts. Tooltips can display the exact values, timestamps, and other relevant details, enhancing the user's understanding of the data.

Comparing with Other Totems

To provide context and facilitate comparison, the Totem Details page includes a section that showcases other totems proposed by the same founder. The Comparison with Other Totems Section allows users to quickly assess the relative performance of the current totem and explore other options.

Display of Competing Totems

  1. Mini Cards: Mini cards are used to display the competing totems. Each card includes a thumbnail image of the totem, the totem's name, and a brief description. The cards provide a visual overview of the competing totems, making it easy for users to identify and compare them.
  2. Progress Bars: Progress bars are used to illustrate the relative TRUST levels of the totems. The progress bars visually represent the proportion of TRUST deposited for each totem, allowing users to quickly compare their support levels.
  3. Links to Detail Pages: Each mini card includes a link to the detail page of the corresponding totem. This allows users to delve deeper into the performance and statistics of the other totems, providing a comprehensive comparison.

Actions and Interactions

Interactive elements and action buttons are crucial for engaging users and allowing them to participate in the voting process. The Actions Section provides users with options to vote for the totem, add TRUST, share the totem, and copy the link.

Action Buttons

  1. Vote Button: If the voting period is active, a vote button is displayed. Clicking this button allows users to cast their vote for the totem.
  2. Add TRUST Button: If the user has already voted for the totem, an add TRUST button is displayed. This button allows users to increase their deposit and provide further support for the totem.
  3. Share Button: A share button is included, allowing users to easily share the totem on social media platforms or via direct links. Sharing the totem can help increase its visibility and attract more voters.
  4. Copy Link Button: A copy link button is provided, allowing users to copy the URL of the totem detail page. This makes it easy for users to share the totem with others via email, messaging apps, or other channels.
  5. Button States: The buttons are dynamically enabled or disabled based on the voting status. If the voting period has ended, the vote and add TRUST buttons are disabled, preventing further interaction. This ensures that users cannot vote or add TRUST after the voting has concluded.

In conclusion, creating a Totem Details page involves careful planning and execution across various aspects, from UI design and data loading to interactive features and performance optimization. By implementing these steps, you can create a robust and user-friendly page that enhances engagement and transparency within your platform. For further reading on best practices in web development and UI/UX design, consider exploring resources like Mozilla Developer Network.