Add new chain to a channel #1723

mishramonalisha76 · 2024-07-12T08:18:35Z

Pull Request Template

Ticket Number

1704

Description

Problem/Feature:
Created a new page to add chain to a channel.

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

Additional Context

Review & Approvals

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

Notes

github-actions · 2024-07-12T08:23:03Z

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

github-actions · 2024-07-12T08:25:03Z

All looks good.

github-actions · 2024-07-12T09:17:57Z

All looks good.

github-actions · 2024-07-12T10:47:47Z

All looks good.

src/blocks/select/Select.tsx

src/structure/Navigation.tsx

src/config/AppPaths.ts

src/blocks/select/Select.tsx

rohitmalhotra1420 · 2024-07-16T07:47:24Z

src/modules/addNewChain/components/NewAddress.tsx

+ <TextInput
+ label="Your Address on New Chain"
+ description="Make sure you own this alias as verification will take place."
+ value={formik.values.alias}
+ onChange={formik.handleChange('alias')}
+ error={formik.touched.alias && Boolean(formik.errors.alias)}
+ errorMessage={formik.touched.alias ? formik.errors.alias : ''}
+ />


This field needs to have a min and max char length validation.

@rohitmalhotra1420 there is not fixed length for the address, but have added a function to check if the address is valid

src/modules/addNewChain/components/NewAddress.tsx

src/modules/addNewChain/components/ChangeNetwork.tsx

src/modules/addNewChain/AddNewChain.tsx

…push-notification-service/push-dapp into DAPP-1704-alias-verification

github-actions · 2024-07-17T11:25:49Z

All looks good.

rohitmalhotra1420 · 2024-07-18T06:02:47Z

src/modules/addNewChain/AddNewChain.tsx

+ const validationSchema = yup.object().shape({
+ alias: yup
+ .string()
+ .required('Address is required')
+ .test('is-valid-address', 'Invalid wallet address', isValidAddress),
+ chainId: yup.string().required('ChainId is required'),
+ });
+ const formik = useFormik<NewChainAddressValue>({
+ initialValues: {
+ alias: '',
+ chainId: '11155111',
+ },
+ validationSchema: validationSchema,
+ onSubmit: (values) => {
+ handleInitiate(values.alias, values.chainId);
+ },
+ });


We decided the validation schema, form types and initial values goes to the AddNewChain.form.ts

@rohitmalhotra1420 but useFormik can only be used in a react component, as its a react hook

I am not talking out moving out the hook but validation schema, form types and initial values from the component to another file

rohitmalhotra1420 · 2024-07-18T06:03:17Z

src/modules/addNewChain/components/NewAddress.tsx

+import { getSelectChains } from '../AddNewChain.utils';
+
+export type NewAddressProps = {
+ formik: any;


Suggested change

formik: any;

form: Type;

Please provide a type

src/modules/addNewChain/AddNewChain.tsx

src/modules/addNewChain/components/ChangeNetwork.tsx

src/modules/addNewChain/components/VerifyAliasChain.tsx

rohitmalhotra1420 · 2024-07-18T06:11:30Z

src/structure/Navigation.tsx

+ border-bottom: 1.5px solid var(--stroke-tertiary);
+ border-left: 1.5px solid var(--stroke-tertiary);
+ border-bottom-left-radius: 10px;


borderWidth should be a css variable

1.5 px is not a valid borderwidth. Ask Zee to fix this.

github-actions · 2024-07-18T08:41:45Z

All looks good.

github-actions · 2024-07-18T09:53:46Z

All looks good.

src/modules/addNewChain/AddNewChain.form.tsx

rohitmalhotra1420 · 2024-07-19T06:42:02Z

src/blocks/textInput/TextInput.tsx

@@ -13,7 +13,7 @@ export type TextInputProps = {
 type?: 'text' | 'password';
 errorMessage?: string;
 label?: string;
- onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;


Why make it optional?

Because even when the input is disabled like in the last section - verify alias, Text input shows error

…rification

github-actions · 2024-07-19T07:59:23Z

All looks good.

github-actions · 2024-07-19T08:00:09Z

All looks good.

* 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]>

* 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]>

…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]>

mishramonalisha76 added 9 commits July 8, 2024 19:13

added basic layout

2116e48

finished ui

d9355bf

added fixes

bce272d

addes stepper

23f1772

fixed stepper

3e7e7b9

added some new theme types

1c51cd1

added layout of select

ba301a0

added mobilde design

a21a983

added chain details

8bf7e78

mishramonalisha76 self-assigned this Jul 12, 2024

mishramonalisha76 linked an issue Jul 12, 2024 that may be closed by this pull request

😈 [Feature Enhancement] - Alias Verification flow #1704

Closed

mishramonalisha76 changed the base branch from main to Feat-New-Channel-Creation-Flow July 12, 2024 08:20

merged base branch

adf34da

fixed width of the popover

c105816

mishramonalisha76 requested a review from rohitmalhotra1420 July 12, 2024 09:18

fixed alignment

e8939a5

rohitmalhotra1420 requested changes Jul 16, 2024

View reviewed changes

mishramonalisha76 added 3 commits July 17, 2024 15:09

added review fixes

f515fda

added review comments

280a294

Merge branch 'Feat-New-Channel-Creation-Flow' of github.com:ethereum-…

0ee2511

…push-notification-service/push-dapp into DAPP-1704-alias-verification

rohitmalhotra1420 requested changes Jul 18, 2024

View reviewed changes

fixed form code

870e596

removed Box from select

00db580

rohitmalhotra1420 linked an issue Jul 18, 2024 that may be closed by this pull request

[DApp - DS] Create Select component #1629

Closed

added form context wrapper

d9f8c89

rohitmalhotra1420 requested changes Jul 19, 2024

View reviewed changes

mishramonalisha76 and others added 2 commits July 19, 2024 13:19

moved validation outside

b5bd5ce

Merge branch 'Feat-New-Channel-Creation-Flow' into DAPP-1704-alias-ve…

51d5786

…rification

Update index.ts

e9a2867

rohitmalhotra1420 mentioned this pull request Jul 19, 2024

New Channel Creation Flow #1710

Merged

20 tasks

rohitmalhotra1420 approved these changes Jul 19, 2024

View reviewed changes

rohitmalhotra1420 merged commit 9a68be0 into Feat-New-Channel-Creation-Flow Jul 19, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new chain to a channel #1723

Add new chain to a channel #1723

mishramonalisha76 commented Jul 12, 2024 •

edited

Loading

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

rohitmalhotra1420 Jul 16, 2024

mishramonalisha76 Jul 17, 2024

github-actions bot commented Jul 17, 2024

rohitmalhotra1420 Jul 18, 2024

mishramonalisha76 Jul 18, 2024 •

edited

Loading

rohitmalhotra1420 Jul 18, 2024

rohitmalhotra1420 Jul 18, 2024

rohitmalhotra1420 Jul 18, 2024

github-actions bot commented Jul 18, 2024

github-actions bot commented Jul 18, 2024

rohitmalhotra1420 Jul 19, 2024

mishramonalisha76 Jul 19, 2024

github-actions bot commented Jul 19, 2024

github-actions bot commented Jul 19, 2024

Add new chain to a channel #1723

Add new chain to a channel #1723

Conversation

mishramonalisha76 commented Jul 12, 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 12, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 17, 2024

Choose a reason for hiding this comment

mishramonalisha76 Jul 18, 2024 • edited Loading

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

github-actions bot commented Jul 18, 2024

github-actions bot commented Jul 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 19, 2024

github-actions bot commented Jul 19, 2024

mishramonalisha76 commented Jul 12, 2024 •

edited

Loading

mishramonalisha76 Jul 18, 2024 •

edited

Loading