Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Testnet Rewards Section in Astral Explorer #850

Draft
wants to merge 38 commits into
base: main
Choose a base branch
from

Conversation

marc-aurele-besner
Copy link
Collaborator

@marc-aurele-besner marc-aurele-besner commented Sep 19, 2024

User description

Add Testnet Rewards Section in Astral Explorer

Preview

Logout-TestnetRewardsSection

Login-1wallet-TestnetRewardsTop
Login-3wallets-TestnetRewardsTop


PR Type

enhancement, tests


Description

  • Added a new TestnetIcon component with SVG icons for various testnet phases.
  • Implemented the RewardHistory component to manage and display connected wallets, including functionality to connect and disconnect subspace wallets.
  • Created a responsive EmptyHeader component with theme toggle and chain dropdown support.
  • Enhanced the user interface with new icons and improved wallet management features.

Changes walkthrough 📝

Relevant files
Enhancement
3 files
TestnetIcon.tsx
Add SVG icons for testnet phases                                                 

explorer/src/components/icons/TestnetIcon.tsx

  • Added multiple SVG icons for various testnet phases.
  • Defined React functional components for each icon.
  • Used consistent styling and color themes for icons.
  • +316/-0 
    RewardHistory.tsx
    Implement RewardHistory component for wallet management   

    explorer/src/components/TestnetRewards/RewardHistory.tsx

  • Implemented RewardHistory component to display connected wallets.
  • Added functionality to connect and disconnect subspace wallets.
  • Utilized hooks for managing wallet connections and view states.
  • +133/-0 
    EmptyHeader.tsx
    Create responsive EmptyHeader with theme toggle                   

    explorer/src/components/layout/EmptyHeader.tsx

  • Created EmptyHeader component with responsive design.
  • Integrated theme toggle functionality.
  • Included chain dropdown and mobile header support.
  • +83/-0   
    Additional files (token-limit)
    13 files
    testnetRewards.ts
    ...                                                                                                           

    explorer/gql/types/testnetRewards.ts

    ...

    +2283/-0
    TestnetRewardsTable.tsx
    ...                                                                                                           

    explorer/src/components/TestnetRewards/TestnetRewardsTable.tsx

    ...

    +251/-0 
    testnetRewards.query.ts
    ...                                                                                                           

    explorer/src/components/TestnetRewards/testnetRewards.query.ts

    ...

    +79/-0   
    FAQ.tsx
    ...                                                                                                           

    explorer/src/components/TestnetRewards/FAQ.tsx

    ...

    +45/-0   
    view.ts
    ...                                                                                                           

    explorer/src/states/view.ts

    ...

    +11/-1   
    AccountPreviousRewards.tsx
    ...                                                                                                           

    explorer/src/components/Consensus/Account/AccountPreviousRewards.tsx

    ...

    +3/-3     
    indexers.ts
    ...                                                                                                           

    explorer/src/constants/indexers.ts

    ...

    +3/-0     
    page.tsx
    ...                                                                                                           

    explorer/src/app/[chain]/testnet-rewards/page.tsx

    ...

    +29/-0   
    routes.ts
    ...                                                                                                           

    explorer/src/constants/routes.ts

    ...

    +5/-7     
    index.tsx
    ...                                                                                                           

    explorer/src/components/TestnetRewards/index.tsx

    ...

    +24/-0   
    ChainProvider.tsx
    ...                                                                                                           

    explorer/src/providers/ChainProvider.tsx

    ...

    +2/-0     
    codegen.ts
    ...                                                                                                           

    explorer/codegen.ts

    ...

    +5/-0     
    layout.tsx
    ...                                                                                                           

    explorer/src/app/[chain]/testnet-rewards/layout.tsx

    ...

    +7/-0     

    💡 PR-Agent usage:
    Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    @github-actions github-actions bot added enhancement New feature or request tests labels Sep 19, 2024
    Copy link

    PR Reviewer Guide 🔍

    ⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Key issues to review

    Code Duplication
    There is significant code duplication in the SVG path definitions across various icon components. Consider creating a more generic component that accepts parameters to adjust the SVG paths dynamically, reducing redundancy and improving maintainability.

    Complex Component
    The RewardHistory component is quite complex and handles multiple states and conditions. It could benefit from decomposition into smaller subcomponents to improve readability and maintainability.

    Copy link

    github-actions bot commented Sep 19, 2024

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Score
    Possible bug
    Add a runtime check to ensure the 'testnetRewards' schema is defined

    Ensure that the schema for 'testnetRewards' is correctly defined in
    'defaultIndexer.squids'. If 'defaultIndexer.squids' does not have a 'testnetRewards'
    property, this will lead to a runtime error. Consider adding a check or ensuring
    that the schema is correctly set up.

    explorer/codegen.ts [24-28]

     './gql/types/testnetRewards.ts': {
    -  schema: defaultIndexer.squids.testnetRewards,
    +  schema: defaultIndexer.squids.testnetRewards ?? throw new Error('Schema for testnetRewards is not defined'),
       documents: ['./src/**/testnetRewards.query.ts'],
       plugins: ['typescript', 'typescript-operations'],
     },
     
    Suggestion importance[1-10]: 8

    Why: This suggestion addresses a potential runtime error by ensuring that the 'testnetRewards' schema is defined, which is crucial for preventing application crashes.

    8
    Best practice
    Improve type safety by explicitly typing the subspaceAccount and mySubspaceWallets variables

    Consider using a more specific type for the subspaceAccount and mySubspaceWallets
    variables to ensure type safety and avoid potential runtime errors. For example, if
    these are expected to be strings or arrays of strings, explicitly type them as such.

    explorer/src/components/TestnetRewards/RewardHistory.tsx [17-18]

    -const { actingAccount, subspaceAccount, accounts } = useWallet()
    -const { mySubspaceWallets, addSubspaceWallet, removeSubspaceWallet } = useViewStates()
    +const { actingAccount, subspaceAccount, accounts }: { actingAccount: string; subspaceAccount: string; accounts: Account[] } = useWallet()
    +const { mySubspaceWallets, addSubspaceWallet, removeSubspaceWallet }: { mySubspaceWallets: string[]; addSubspaceWallet: (account: string) => void; removeSubspaceWallet: (account: string) => void } = useViewStates()
     
    Suggestion importance[1-10]: 8

    Why: Explicitly typing variables improves type safety and helps prevent runtime errors, which is a best practice in TypeScript. This suggestion correctly identifies and addresses a potential issue.

    8
    Enhancement
    Simplify the conditional check for rewards

    Simplify the conditional check by directly checking the length of 'userRewards' and
    'userRewardsGeminiIIIf' as they are already arrays.

    explorer/src/components/Consensus/Account/AccountPreviousRewards.tsx [157]

    -if (userRewards[0] && (userRewards.length > 0 || userRewardsGeminiIIIf.length > 0))
    +if (userRewards.length > 0 || userRewardsGeminiIIIf.length > 0)
     
    Suggestion importance[1-10]: 7

    Why: This suggestion simplifies the conditional check, improving code readability and maintainability without altering functionality.

    7
    Simplify the condition check for subspaceAccount using logical AND

    Replace the ternary operator with a simpler logical AND operation when checking if
    subspaceAccount exists before including it in the mySubspaceWallets array. This
    makes the code cleaner and easier to understand.

    explorer/src/components/TestnetRewards/RewardHistory.tsx [21]

    -() => (subspaceAccount ? mySubspaceWallets.includes(subspaceAccount) : false),
    +() => !!subspaceAccount && mySubspaceWallets.includes(subspaceAccount),
     
    Suggestion importance[1-10]: 7

    Why: Simplifying the condition check with a logical AND operation enhances code readability and maintainability without changing functionality, making it a worthwhile improvement.

    7
    Maintainability
    Use a data-driven approach for FAQ questions and answers

    Replace the hardcoded FAQ questions with a data-driven approach by moving the
    questions and answers to a separate data file or structure, which can be easily
    maintained and updated.

    explorer/src/components/TestnetRewards/FAQ.tsx [16-41]

    -{[
    -  'How will the rewards be converted to ATC?',
    -  'When can I withdraw the ATC?',
    -  'How else can I use ATC?',
    -].map((question, index) => (
    +{faqData.map((faq, index) => (
       <div key={index} className='m-4'>
         <button
           className='w-full rounded-lg bg-white p-8 text-left text-gray-900 shadow-md  dark:border-none dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo dark:text-white'
           onClick={() => toggleFAQ(index)}
         >
           <span className='font-semibold'>
    -        {index + 1}. {question}
    +        {index + 1}. {faq.question}
           </span>
           <span className='float-right'>{openIndex === index ? '▲' : '▼'}</span>
         </button>
         {openIndex === index && (
           <div className='mt-2 rounded-lg bg-gray-100 p-4 dark:bg-gray-700'>
             <p className='text-gray-700 dark:text-white'>
    -          {/* Add the answer content here */}
    -          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
    -          Praesent libero. Sed cursus ante dapibus diam.
    +          {faq.answer}
             </p>
           </div>
         )}
       </div>
     ))}
     
    Suggestion importance[1-10]: 6

    Why: This suggestion enhances maintainability by suggesting a data-driven approach, making it easier to update FAQ content without modifying the component code directly.

    6
    Use a constant for repeated class names to simplify updates and reduce errors

    Consider using a constant for the class names in the JSX to avoid repetition and
    facilitate easier updates. Define the class names at the top of the component or
    outside of it.

    explorer/src/components/TestnetRewards/RewardHistory.tsx [106-108]

    -className='rounded-full px-6 py-2 font-semibold text-white bg-blue-600 hover:bg-blue-700'
    +const buttonClass = 'rounded-full px-6 py-2 font-semibold text-white bg-blue-600 hover:bg-blue-700';
    +className={buttonClass}
     
    Suggestion importance[1-10]: 5

    Why: Using constants for repeated class names can reduce errors and simplify updates, enhancing maintainability. However, this is a minor improvement as it mainly affects code organization.

    5
    Readability
    Improve readability by using a more descriptive variable name in the map function

    Use a more descriptive variable name than wallet in the map function to enhance code
    readability. For example, walletAddress would be more informative.

    explorer/src/components/TestnetRewards/RewardHistory.tsx [44]

    -{mySubspaceWallets.map((wallet) => (
    +{mySubspaceWallets.map((walletAddress) => (
     
    Suggestion importance[1-10]: 6

    Why: Using descriptive variable names improves code readability and understanding, which is beneficial for maintainability, especially in collaborative environments.

    6

    Base automatically changed from feat/migrate-to-sub-query to main September 19, 2024 20:45
    @marc-aurele-besner marc-aurele-besner changed the base branch from main to feat/improve-docker-compose September 19, 2024 22:05
    Base automatically changed from feat/improve-docker-compose to main September 20, 2024 15:44
    Copy link

    netlify bot commented Sep 21, 2024

    Deploy Preview for dev-astral ready!

    Name Link
    🔨 Latest commit b1fc540
    🔍 Latest deploy log https://app.netlify.com/sites/dev-astral/deploys/66eec3e4bf45bc000888b6a2
    😎 Deploy Preview https://deploy-preview-850--dev-astral.netlify.app
    📱 Preview on mobile
    Toggle QR Code...

    QR Code

    Use your smartphone camera to open QR code link.

    To edit notification comments on pull requests, go to your Netlify site configuration.

    Copy link

    Report too large to display inline

    View full report↗︎

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    1 participant