New Channel Creation Flow #1710

abhishek-01k · 2024-07-10T08:46:49Z

Pull Request Template

Ticket Number

#1703

Description

Problem/Feature:

Type of Change

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

Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

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

Screenshots/Video with Explanation

Figma link -> https://www.figma.com/design/FvJL0JWHlsVohsHTERB1Lh/Push-Design-Foundations-[Future]?node-id=5178-35807&m=dev

Additional Context

Review & Approvals

Self-review completed
Code review by at least one other engineer
Documentation updates if applicable

Notes

Things that are left:

About the website URL, rn it checks for https and www. But we need to talk with backend to update the url and then the user will be allowed to pass just url.org or url.com
Loader while the channel is getting created.
Pull the main and then change the theming based on new theme
Landing page when the chain is different.

github-actions · 2024-07-10T08:51:10Z

PR Preview Action v1.4.7
🚀 Deployed preview to https://push-protocol.github.io/push-dapp/pr-preview/pr-1710/
on branch `gh-pages` at 2024-07-12 10:24 UTC

github-actions · 2024-07-10T12:29:56Z

I found some issues in the code:

In src/App.tsx:

In the CSS part, the closing curly brace for HeaderContainer is missing. Add } after setting the z-index property.
In the extendConsole function, there are syntax errors. The closing curly brace for the inner window.console[level] if block is missing. Also, there is a missing closing curly brace for the outer window.console[level] if block.
In the disable console logic, the second 'if' statement should be removed as it is redundant.

In src/blocks/icons/components/CloudUpload.tsx:

It seems like the SVG paths are not properly formatted. Check the paths and make sure they are correct.

In src/blocks/textInput/TextInput.tsx:

The closing tag for the Text component just before the errorMessage block is missing. Add </Text> before the errorMessage block.
The color prop is not correctly placed in the Text component inside the errorMessage block. Move it inside the component props.

Apart from these issues, the code seems well-structured and clear.

Kindly address the mentioned issues.

github-actions · 2024-07-11T11:32:04Z

I will review the code now.

github-actions · 2024-07-11T11:56:11Z

File: src/App.tsx

In the CSS section, there is a mix of different types of comments (//, /* */). It's better to stick with one style of commenting throughout the file for consistency.
In the extendConsole function, there is a missing closing curly brace after the condition checking for window.console[level].
In the extendConsole function, there is a missing closing curly brace for the disabledConsoles[level] condition.
In the App component, the closing </SpacesUIProvider> tag seems to be missing its closing curly brace.

Overall, the code structure seems fine and the logic looks good.

All looks good.

File: src/blocks/icons/components/CloudUpload.tsx

In the SVG path details, there are multiple different path elements, but they are not properly wrapped inside <path> tags.
The stroke-width attribute should be in camelCase as strokeWidth.
Make sure to provide proper values for all the SVG paths and attributes to render the icon correctly.
The CloudUpload component seems to be missing some closing braces at the end of the file.

Consider fixing the SVG path details and the missing closing braces.

File: src/blocks/textInput/TextInput.tsx

In the StyledTextInput component, there are some formatting issues with the closing tags of JSX elements. Make sure all opening tags have proper closing tags.
In the JSX structure, the closing </Text> tag is missing just before the errorMessage block.
The errorMessage block should be wrapped properly inside a <div> or another appropriate JSX container element.

Overall, the TextInput component structure seems correct, but there are formatting issues and missing closing tags that need to be fixed.

Consider fixing the formatting issues and missing closing tags.

All other files were not provided in this review. If you need further reviews of those files, please provide them.

…o DAPP-1703-Channel-Creation-Flow-UI

github-actions · 2024-07-12T09:28:06Z

I found some issues in the code:

In src/App.tsx:

There is an unclosed block in the extendConsole function. The closing brace after the line disabledConsoles[level] = window.console[level]; is missing.
The ParentContainer component is missing the closing brace after the justify-content: center; property.
The background property in the styled component HeaderContainer is missing the closing parenthesis.
There seems to be some misplaced code related to custom styling options for a component. It might need refactoring or moving to the appropriate place.

In src/blocks/icons/components/CloudUpload.tsx:

The <path> elements inside the <svg> tag are not properly formatted. They seem to be mixed together and should be separated with individual <path> tags.

In src/blocks/textInput/TextInput.tsx:

The closing tags for the <Text> component inside the label and totalCount are missing.
The <Text> component for errorMessage is missing the opening tag and doesn't have proper syntax.

In src/config/AppPaths.ts:

The enum definition for paths is incomplete; there is a missing closing brace.

Please review and correct these issues.

All looks good.

github-actions · 2024-07-12T09:54:45Z

There are a few issues in the code review:

File: src/App.tsx

Line 39: There is a missing closing curly brace } for the window.console[level] === null condition.

File: src/blocks/icons/components/CloudUpload.tsx

Line 43, 45: The paths are not valid. They should be enclosed in <path> tags.

File: src/blocks/textInput/TextInput.tsx

Line 113: The closing </Text> tag is missing for the totalCount block.
Line 125: The closing </div> tag is missing for the label-count block.
Line 139: The closing </Text> tag is missing for the description block.
Line 145: The closing </Text> tag is missing for the errorMessage block.
Line 148-149: The {errorMessage} should be inside a <Text> component.

Apart from these issues, the code seems to be structured and organized properly.

All looks good.

github-actions · 2024-07-12T10:15:57Z

It seems like there are some syntax errors and formatting issues in the code provided. Here are the mistakes found:

In "App.tsx":
- There is a missing closing brace } after defining window.console[level] function inside the console.enable function.
- The closing tag </SpacesUIProvider> is missing inside the ContentContainer.
- In the HeaderContainer styled component, the const keyword is missing before the component definition.
In "CloudUpload.tsx":
- Invalid SVG paths with missing <path> tags and incorrect properties.
- The closing </IconWrapper> tag is missing at the end.
In "TextInput.tsx":
- The closing tag for the outermost div container inside the StyledTextInput is missing.
- The Text component is not properly closed after errorMessage condition.

Other files have been provided but have not been checked due to their length.

Please correct the identified issues above and ensure the structure and syntax of the code is proper. Let me know if you need further assistance with any other file.

github-actions · 2024-07-12T10:17:20Z

There are a few issues in the provided code:

In src/App.tsx:

There is a typo in the useState hook declaration. It should be setcurrentTime instead of setcurrentTime.
In the styled-components section, the HeaderContainer styling is missing the closing curly brace '}' at the end.
In the styled-components section, the ParentContainer styling is missing the closing curly brace '}' at the end.

In src/blocks/icons/components/CloudUpload.tsx:

The <path> elements for 'd' attributes are not correctly formatted. The attributes should be enclosed in a single <path> element.
The stroke-width attribute should be strokeWidth.

In src/blocks/textInput/TextInput.tsx:

The closing tags for <Text>, <div>, and <StyledTextInput> components are not in the correct order. The <Text> component closing tags are missing.
There is a typo in the closing tag of the <Text> component within the label-count section. It should be </Text> instead of <Text>.
The error message section is not properly enclosed within the <Text> component.

In src/modules/createChannel/CreateChannel.constants.ts:

The CreateChannelSteps array has missing properties for the objects.

After fixing the above issues, the code should be reviewed thoroughly in terms of logic and functionality.

All other files mentioned seem to be empty or not provided, so they cannot be reviewed.

Please make the necessary corrections based on the identified issues.

mishramonalisha76

the casing is not as figma

The color of drag and drop text is not correct

Spelling of amount is wrong, check casing too. Copy exact text from figma

Failure in channel creation keeps showing this page and no errors are shown.

Also after channel creation screen gets stuck in loading details . Is it expected ?

src/modules/createChannel/CreateChannel.tsx

abhishek-01k · 2024-07-19T06:48:34Z

src/modules/createChannel/CreateChannel.form.ts

+ setActiveStepKey: (key: ActiveStepKey) => void;
+}
+
+const channelInfoValidationSchema = Yup.object().shape({


@rohitmalhotra1420 Here you can see I have implemented the Yup validations. for the channel Info form

src/modules/createChannel/CreateChannel.constants.ts

src/modules/createChannel/CreateChannel.form.ts

rohitmalhotra1420 · 2024-07-19T07:56:02Z

src/modules/createChannel/CreateChannel.form.ts

+export const createChannelInfoForm = ({ handleNextStep, setActiveStepKey }: FormikProps) =>
+ useFormik<ChannelInfoFormValues>({
+ initialValues: {
+ channelName: '',
+ channelDesc: '',
+ channelURL: '',
+ },
+ validationSchema: channelInfoValidationSchema,
+ onSubmit: (values) => {
+ handleNextStep('upload_logo');
+ setActiveStepKey('upload_logo');
+ },
+ });
+
+const logoValidationSchema = Yup.object().shape({
+ image: Yup.mixed().required('Image is required'),
+});
+
+export const uploadLogoForm = () =>
+ useFormik({
+ initialValues: {
+ image: null,
+ imageSrc: '',
+ imageType: '',
+ },
+ validationSchema: logoValidationSchema,
+ onSubmit: (values) => {
+ // Handle form submission logic here
+ },


We will not use 2 separate forms for this. The form is one and it is divided into two steps.

We will create a formik provider in this file with a custom hook to use the form values in different components.
Checkout this PR for reference: #1723

rohitmalhotra1420 · 2024-07-19T07:57:41Z

src/modules/createChannel/components/UploadLogo.tsx

 }

-const UploadLogo: FC<UploadLogoProps> = () => {
+const UploadLogo: FC<UploadLogoProps> = ({


Suggested change

const UploadLogo: FC<UploadLogoProps> = ({

const UploadChannelLogo: FC<UploadLogoProps> = ({

Also change the file name

rohitmalhotra1420 · 2024-07-19T07:58:55Z

src/modules/createChannel/components/UploadLogo.tsx

 Upload a PNG, JPG upto 1MB. Crop the image to resize to 128px.
 </Text>

+ <form onSubmit={uploadLogoFormik.handleSubmit}>


This whole form component will be a separate component called upload file and will live under blocks/FileUpload.

Also check the props here: https://ant.design/components/upload

src/modules/createChannel/components/StakeFees.tsx

rohitmalhotra1420 · 2024-07-19T08:04:38Z

src/modules/createChannel/components/CreateChannelError.tsx

+type CreateChannelErrorProp = {
+ channelCreationError: ChannelCreationError;
+}
+const CreateChannelError: FC<CreateChannelErrorProp> = ({


This will be a design system component and goes to blocks/Alert. For now you can only implement the error variant.

Assign a ticket to @rohitmalhotra1420 for implementing all other variants.

src/components/reusables/progress/ProgressBarUnit.tsx

src/modules/createChannel/CreateChannel.utils.ts

src/modules/createChannel/components/CreateChannelProcessingInfo.tsx

rohitmalhotra1420 · 2024-07-22T08:30:02Z

src/blocks/fileUpload/FileUpload.tsx

+ hidden?: boolean;
+ id: string;


Don't think we need these two props

input will be hidden all the time

We need id because we are adding a label in the children . Because with this id only it opens the upload option.

Browse to Choose/Upload

I will remove the hidden tag and make it true for all the case

rohitmalhotra1420 · 2024-07-22T08:31:44Z

src/modules/createChannel/components/StakeFees.tsx

+ handleNextStep('uploadLogo')
+ }
+
+ if (Object.keys(errors).length === 0) {


if (!Object.keys(errors).length) {

…or comment

* New Channel Creation flow UI * added common stepper * fixed stepper * fixed stepper * fixed stepper * Changed the Stepper flow * added layout * send notif * Add new chain to a channel (#1723) * added basic layout * finished ui * added fixes * addes stepper * added layout of select * fixed width of the popover * fixed alignment * added review comments * fixed form code * removed Box from select * added form context wrapper * moved validation outside * Update index.ts * added formik * New Channel Creation Flow (#1710) * New Channel Creation Flow based on new UI * Function implementation of the create Channel * Added New Page when chain is diff * Fixed the navigation for channel creation flow * Pulled the main to change the theme way * Removed the new createChannel route * Removed faucet duplication * Fixed issue with the text and text color * Fixed the imports and other issues * Resolved the stepper issue * Fixed the input validation and also added validaiton msg * fxed error validations * import fixes * refactoring done * Fixed the stepper steps prop * File upload moved to blocks and form is also corrected for ChannelInfo * Created Alert Block just for error * Removed hidden prop fro file upload and also fixed the stake fees error comment --------- Co-authored-by: rohitmalhotra1420 <[email protected]> * fixed mobile view * fixed mobile view * fixed enter key * added missing things in select * channel dashboard fix * fixed the navigation issue * fixed the navigation issue * fixed review issues --------- Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: Abhishek <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]>

…feature (#1782) * Dapp 1752 send notif (#1775) * New Channel Creation flow UI * added common stepper * fixed stepper * fixed stepper * fixed stepper * Changed the Stepper flow * added layout * send notif * Add new chain to a channel (#1723) * added basic layout * finished ui * added fixes * addes stepper * added layout of select * fixed width of the popover * fixed alignment * added review comments * fixed form code * removed Box from select * added form context wrapper * moved validation outside * Update index.ts * added formik * New Channel Creation Flow (#1710) * New Channel Creation Flow based on new UI * Function implementation of the create Channel * Added New Page when chain is diff * Fixed the navigation for channel creation flow * Pulled the main to change the theme way * Removed the new createChannel route * Removed faucet duplication * Fixed issue with the text and text color * Fixed the imports and other issues * Resolved the stepper issue * Fixed the input validation and also added validaiton msg * fxed error validations * import fixes * refactoring done * Fixed the stepper steps prop * File upload moved to blocks and form is also corrected for ChannelInfo * Created Alert Block just for error * Removed hidden prop fro file upload and also fixed the stake fees error comment --------- Co-authored-by: rohitmalhotra1420 <[email protected]> * fixed mobile view * fixed mobile view * fixed enter key * added missing things in select * channel dashboard fix * fixed the navigation issue * fixed the navigation issue * fixed review issues --------- Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: Abhishek <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]> * Dapp 1703 channel creation flow UI (#1776) * New Channel Creation flow UI * added common stepper * fixed stepper * fixed stepper * New Channel Creation Flow based on new UI * fixed stepper * Function implementation of the create Channel * Changed the Stepper flow * Added New Page when chain is diff * Fixed the navigation for channel creation flow * Pulled the main to change the theme way * Removed the new createChannel route * Removed faucet duplication * Fixed issue with the text and text color * Fixed the imports and other issues * Resolved the stepper issue * Fixed the input validation and also added validaiton msg * fxed error validations * import fixes * refactoring done * Add new chain to a channel (#1723) * added basic layout * finished ui * added fixes * addes stepper * added layout of select * fixed width of the popover * fixed alignment * added review comments * fixed form code * removed Box from select * added form context wrapper * moved validation outside * Update index.ts * Fixed the stepper steps prop * File upload moved to blocks and form is also corrected for ChannelInfo * Created Alert Block just for error * Removed hidden prop fro file upload and also fixed the stake fees error comment --------- Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> * Dapp 1704 alias verification (#1777) * New Channel Creation flow UI * added common stepper * added basic layout * finished ui * added fixes * fixed stepper * addes stepper * fixed stepper * fixed stepper * Changed the Stepper flow * added layout of select * fixed width of the popover * fixed alignment * added review comments * fixed form code * removed Box from select * added form context wrapper * moved validation outside * Update index.ts --------- Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]> * Created different routes for Create Channel and Channel Dashboard * Created Channel Dashboard Header and App Footer, also added listSemantics and modified MenuItem.ts file * Added Notification Settings in the dashboard body * Channel Delegates and Get Delegates functionality * Add Delegate and Remove Delegate Functionality added * Deactivate Channel Func added * Added Subgraph component and also used Uint8Array as type * Added token faucet and Reactivate channel function * Added Alert block and also added inline error in the components * Edit Channel Component and Function added * Fixed the build error * Revert "Fixed the build error" This reverts commit 464ce63. * Revert "Edit Channel Component and Function added" This reverts commit c8a440e. * Created New file for edit channel just UI * Edit Channel Functionality added * Changed the route for CreateChannel on Navigation * Check For Changes are implemented in EditChannel * Added tooltip and attached dashboard to notification setting page * Fixed the schematic issue in create channel * Fixed the Send Notification issue and updated Navigation file * Added space between balance and number * Changed the tooltip from description to title * fixed review comments * Fixed the issues on the Channel flow 1 * Fixed the connect modal on create channel and also fixed the overlay for blocknative modal * added frontend fixes * added frontend fixes * added frontend fixes * Added support for differnet chains on dashboard * added select close on scroll * added event removal * alais fixes * added event removal * Fixed the alias featured on the dashboard * added event removal * Fixed the displaying of channel details on dashboard for alias addresses * added validations * fixed review comments * Fixed poling of channel details for the alias condition * fixed ui * fixed closing of unlock in send notif * added fixes * fixed alias issues * Fixed the tag color and the sidebar send notification disappearing issur * Added verified alias logo to the dashboard header --------- Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]>

abhishek-01k added 3 commits July 10, 2024 12:45

New Channel Creation Flow based on new UI

e313de9

Pulled changes from main

6a78262

Pulled main for textarea

d3d0abc

abhishek-01k self-assigned this Jul 10, 2024

abhishek-01k added the DO NOT MERGE If the PR/task is dependent on some other task add this label to the PR. label Jul 10, 2024

Function implementation of the create Channel

afe469c

Fixed the handle Create Function

96ab8e3

Added New Page when chain is diff

1ad498f

abhishek-01k added 2 commits July 12, 2024 14:57

Fixed the navigation for channel creation flow

623d9db

Merge branch 'main' of https://github.com/push-protocol/push-dapp int…

a89b206

…o DAPP-1703-Channel-Creation-Flow-UI

Pulled the main to change the theme way

6033576

Removed the new createChannel route

1f08254

Removed faucet duplication

4e44103

abhishek-01k requested a review from rohitmalhotra1420 July 12, 2024 10:31

abhishek-01k changed the base branch from main to Feat-New-Channel-Creation-Flow July 12, 2024 10:31

abhishek-01k linked an issue Jul 12, 2024 that may be closed by this pull request

😈 [Feature Enhancement] - Implement the New Create Channel Flow #1703

Closed

corlard3y requested a review from mishramonalisha76 July 12, 2024 12:34

Pulled base branch

f49ead2

mishramonalisha76 requested changes Jul 15, 2024

View reviewed changes

Fixed issue with the text and text color

0c9d19d

abhishek-01k removed the DO NOT MERGE If the PR/task is dependent on some other task add this label to the PR. label Jul 16, 2024

rohitmalhotra1420 requested changes Jul 16, 2024

View reviewed changes

abhishek-01k added 3 commits July 17, 2024 11:59

Fixed the imports and other issues

230db69

Pulled the Feat-New-Channel-Creation-Flow branch for text input changes

4b9eb13

Resolved the stepper issue

ecd73b7

abhishek-01k commented Jul 19, 2024

View reviewed changes

abhishek-01k and others added 4 commits July 19, 2024 12:43

Fixed the input validation and also added validaiton msg

b9707be

fxed error validations

9a0d159

import fixes

b7ade20

refactoring done

0ee199d

rohitmalhotra1420 requested changes Jul 19, 2024

View reviewed changes

abhishek-01k added 4 commits July 19, 2024 14:15

pulled the base branch for latest update

1743b1f

Fixed the stepper steps prop

49efc27

File upload moved to blocks and form is also corrected for ChannelInfo

43ce15b

Created Alert Block just for error

e2aa900

rohitmalhotra1420 requested changes Jul 22, 2024

View reviewed changes

Removed hidden prop fro file upload and also fixed the stake fees err…

e5bf96b

…or comment

rohitmalhotra1420 merged commit d69aed2 into Feat-New-Channel-Creation-Flow Jul 22, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Channel Creation Flow #1710

New Channel Creation Flow #1710

abhishek-01k commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024

github-actions bot commented Jul 11, 2024

github-actions bot commented Jul 11, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

mishramonalisha76 left a comment

abhishek-01k Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 19, 2024

rohitmalhotra1420 Jul 22, 2024

rohitmalhotra1420 Jul 22, 2024

abhishek-01k Jul 22, 2024

abhishek-01k Jul 22, 2024

rohitmalhotra1420 Jul 22, 2024

	const UploadLogo: FC<UploadLogoProps> = ({
	const UploadChannelLogo: FC<UploadLogoProps> = ({

New Channel Creation Flow #1710

New Channel Creation Flow #1710

Conversation

abhishek-01k commented Jul 10, 2024 • edited Loading

Pull Request Template

Ticket Number

Description

Type of Change

Checklist

Frontend Guidelines

Build & Testing

Screenshots/Video with Explanation

Additional Context

Review & Approvals

Notes

github-actions bot commented Jul 10, 2024 • edited Loading

github-actions bot commented Jul 10, 2024

github-actions bot commented Jul 11, 2024

github-actions bot commented Jul 11, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

File: src/App.tsx

File: src/blocks/icons/components/CloudUpload.tsx

File: src/blocks/textInput/TextInput.tsx

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

mishramonalisha76 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abhishek-01k commented Jul 10, 2024 •

edited

Loading

github-actions bot commented Jul 10, 2024 •

edited

Loading