Refactor payment page and related components.

[Seroxdesign]

Part 1: feature request

Improve payments page by using MUI form template that's been used in the new swap feature.

Use the same form layout from the swap container here in the payments page:

from token, to token and input amount the fields should be:

1. recepient
2. monthly payment amount
3. token to stream.

Below the form there will be open streams, make these in a 1 column table and show the amount, token and recipient, with the close and open buttons.

The code for the new form will be in this PR: https://github.com/Seroxdesign/ricochet-frontend/blob/swap/src/pages/SwapPage/layout/Checkout/SwapForm.tsx

Just implement it in the StreamForm: https://github.com/Seroxdesign/ricochet-frontend/tree/swap/src/components/streaming/StreamForm

This will really make a difference in the consistency of the UI.

2 -Extra points earned:

If you could refactor the code to be in the same format as the SwapPage that would help a lot. You can reuse the code from the current Payments page and streaming component but format the folder like this.

https://github.com/Seroxdesign/ricochet-frontend/tree/swap/src/pages/SwapPage

Instead of having the streaming folder and streamContainer put all refactored code in this folder structure:

./src/pages/payments/checkout/form /index.js

[PJijin]

It would be interesting for me to work on this issue if it is still open. 😀

[hrishibhattu]

Hey @PJijin, I'm working on this and am nearly done with it 😄