Replace buttons in the app with new ds component

[kalashshah]

Pull Request Template

Ticket Number

• 1628

Description

Replace buttons in the app with new ds Button component

Type of Change

• [x] Code refactor

Checklist

• [ ] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [x] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

https://www.notion.so/pushprotocol/Replacing-the-button-component-inside-the-Dapp-d332810b9c1846eb821ecea5f8b05b4f?pvs=4

Review & Approvals

• [x] Self-review completed
• [ ] Code review by at least one other engineer
• [x] Documentation updates if applicable

Notes

[github-actions[bot]]

I will start reviewing the code now. Let's begin!

File: src/App.tsx

1. There is a missing import for dotenv module. Add import dotenv from 'dotenv'; at the top.
2. The TODO comment should be formatted as // TODO: for consistency.
3. There is a typo in the comment: // Border Radius should be // Border Radius.
4. The comment // TODO: Add more as needed is not aligned properly.
5. The CSS variable --font-family should be --font-family: 'FK Grotesk Neu';
6. The line @(props) => getBlocksCSSVariables(props.theme.blocksTheme) contains a typo, change it to props instead of @(props).
7. The comment below the --r10 should be removed since it's unnecessary.

File: src/components/ChangeNetwork.tsx

1. There is a syntax error in the Box component where a closing > is missing. It should be corrected like this:

   <Box
    display="flex"
    alignSelf="center"
    alignItems="center"
    margin="s25 s0 s12 s0"
   >

2. There is a missing import statement for Text component. Add import { Text } from 'blocks'; at the top.
3. There is an incomplete Button component where the closing tag is not properly formatted. Correct it like this:

   <Button
    ...
   >
    <Text color="white">Change Network</Text>
   </Button>

File: src/components/ChannelDetails.jsx

1. There is a missing closing tag for <SectionDate> element.

I have reviewed the code, and these are the corrections needed. Let me know if you need further assistance or if you have any questions.

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-18 15:46 UTC

[github-actions[bot]]

I'll start reviewing the provided code files now. I'll begin with the 'src/App.tsx' file.

[github-actions[bot]]

I have reviewed the provided code and everything looks good.

[github-actions[bot]]

I will start reviewing the code in the specified files. Let's begin.

File: src/App.tsx

1. In the createGlobalStyle block, there is a comment using single-line syntax (//) inside the CSS section. This is not valid in CSS. Please update it to use CSS comments (/* */).

Review comments in the createGlobalStyle block in this file.

File: src/blocks/button/Button.tsx

1. All looks good.

File: src/components/ChangeNetwork.tsx

1. There is a missing closing > at the end of the Box component declaration before the <Button component. Update it to <Box>.

Fix the missing closing > tag before the Button component.

File: src/components/ChannelDetails.jsx

1. There are references to <Item>, <Date>, and <SpanV2> components that are not imported or defined in the file. Ensure these components are correctly imported or defined.

Import or define the missing components in this file.

File: src/components/ChannelInfo.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/ChannelSettings.jsx

1. Not reviewed as the content of the file was not provided.

File: src/components/FaucetInfo.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/ProfileModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/PushSnap/EnableSnoozeModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/PushSnap/InstallPushSnapModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/PushSnap/PushSnapConfigureModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/PushSnap/PushSnapSettings.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/PushSnap/SnapInformationModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/SearchFilter.jsx

1. Not reviewed as the content of the file was not provided.

File: src/components/SendNotifications.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/StakingInfo.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/StepsTransactionModal.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/UploadLogo.jsx

1. Not reviewed as the content of the file was not provided.

File: src/components/VerifyAlias.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/ViewChannelItem.jsx

1. Not reviewed as the content of the file was not provided.

File: src/components/ViewDelegateeItem.jsx

1. Not reviewed as the content of the file was not provided.

File: src/components/YieldFarmChainError.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/channel/ChannelButtons.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/channel/DepositFeeFooter.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/chat/unlockProfile/UnlockProfile.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/chat/w2wChat/searchBar/SearchBar.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/dropdowns/OptinNotifSettingDropdown.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/dropdowns/UpdateNotifSettingDropdown.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/yield/StakingModalComponent.tsx

1. Not reviewed as the content of the file was not provided.

File: src/components/yield/YieldPushFeeV3.tsx

1. Not reviewed as the content of the file was not provided.

Review complete. Please address the identified issues and provide more files for review if needed.

[github-actions[bot]]

I will start reviewing the code provided. Let's begin with the first file.

File: src/App.tsx

1. The import statement for dotenv is missing. Add import dotenv from 'dotenv'; at the top.

import dotenv from 'dotenv';

2. The usage of createGlobalStyle from styled-components seems correct. No issues found.

Overall, the code looks good with the addition of the import statement.

Next, I will proceed with the review of the next file. Let's check src/blocks/button/Button.tsx.

File: src/blocks/button/Button.tsx

1. Everything seems to be in order. No issues found. The component Button is well-defined and structured.

Moving on to the next file.

File: src/components/ChangeNetwork.tsx

1. There seems to be a typo in the below line where the closing angle bracket > is missing in the Box component.

margin="spacing-xxxl spacing-none spacing-xxl spacing-none"

It should be corrected as:

margin="spacing-xxxl spacing-none spacing-xxl spacing-none">

2. Additionally, the children prop of the Button component should be wrapped in a Text component for proper rendering.

Correct it as:

<Text color="white">Change Network</Text>

Other than the above issues, everything else looks coherent in the ChangeNetwork component.

Moving on to the next file.

File: src/components/ChannelDetails.jsx

1. There seem to be some missing parts in the code snippet provided. It's recommended to provide complete code snippets to ensure a thorough review.

Please provide the missing parts or additional files mentioned, so they can be reviewed accordingly.

Review Completed

Let me know if you need further assistance with the remaining files or any other code review.