Implement UX contest winning design

[konraddb]

[e00dan]

Ready for code review @mkxbl @homura @huwenchao

[ghost]

@konraddb Hi, nice work and here are some feedbacks:

• 1. When user click Approve Button, and the Metamask window popup, the Approve Button should be in processing status and disabled, otherwise user can click button again which trigger duplicated approve action. Same situation for transfer.

• 2. The network image and network name is not matched, after i switched network bridge direction

• 3. Wrong To {network} address

• 4. Click with no response, i guess the desired behavior is switch bridge network direction

• 5. Bsc network with wrong icon. And if i click the icon, the bridge network will be changed to Ethereum -> Nervos, while i think Nervos -> Bsc is the right direction to be.

• 6. Wrong display in Receive area

• 7. Better add more info(refer to https://forcebridge.com/ ) for reminder

• 8. CKB address check with testnet or mainnet

• 9. User may be confused about the area in the red box in the figure below, what's the meaning of it ?

• 10. How about add some description to tx-link(burn ... unlock ..)?

• 11. Wrong network icon

• 12. miss top warning banner, ref to https://forcebridge.com/

• 13. There isn't pagination in History List, the list could be too long if there are many records

• 14. User cann't select network( bsc <-> nervos or ethereum <-> nervos) in History Page, if user want to check out the bridge histories of another network

[konraddb]

@mkxbl Hi, thanks for your feedback,

regarding the question:
"9. User may be confused about the area in the red box in the figure below, what's the meaning of it ?"
do you have any solution to propose?

[ghost]

@mkxbl Hi, thanks for your feedback,

regarding the question: "9. User may be confused about the area in the red box in the figure below, what's the meaning of it ?" do you have any solution to propose?

How about:

[konraddb]

@mkxbl I have implemented above mentioned comments, please review.

[pygman]

@mkxbl I have implemented above mentioned comments, please review.

@konraddb Hi, I have checked your implements of the above feedbacks, they have all met expectations. during my use, I have some new feedbacks

1. After I click transfer and confirm in metamask, webpage jumps to blank and throw error 'Cannot read properties of undefiend (reading substring)', the same situation when click history or enter the URL '/history' manually.
   
2. Refresh the page or enter the URL manually, It alway reset direction, jumps to '/bridge/Ethereum/Nervos'
   
   
3. As I am used to, after transfer success page jumps history, I always click on go back button, and start another transfer, but It does not support going back
   
4. Expect the transfer direction is shown in the URL like '/history/Ethereum/Nervos', and in history page if there is no records, I can't recognize what is the current direction
   
5. For the first feedback, history page throw error, I fixed AddressLink to ignore the error, but it shows some unexpected pending burn records when direction is nervos -> xchain
   
   maybe I'm not modifying it the right way, if so please ignore
6. If amount too long, line break
   

[konraddb]

@pygman Hi, regarding the fifth point, the same situation occurs at https://testnet.forcebridge.com/. Other comments implemented

[pygman]

@pygman Hi, regarding the fifth point, the same situation occurs at https://testnet.forcebridge.com/. Other comments implemented

@konraddb Hi thanks, I have checked your implements, very nice. Here are some display areas that can be optimized.

1. expect these two words to be highlighted when on Transfer or History pages.
   
2. expect a tooltip to display the whole recipient address when mouse hover.
   
3. expect display receive amount and bridge fee when only amount is entered but recipient address is not entered.
   
4. expect something to show current network direction on history page, maybe "From >> to" network image or highlight the select "Change network direction" or ......
   
5. expect do switch bridge network direction when click ">>" image.
   
6. expect highlight available pagination buttons or hide unavailable buttons.
   
   
7. I filled the amount or recipient address input box with browser history, then the background color of the input box changed to white, I don't know if this is a problem of my browser.
   
   
   

[konraddb]

@pygman Hi, I have prepared solutions to your proposals, please check.

[pygman]

@pygman Hi, I have prepared solutions to your proposals, please check.

@konraddb Hi, I have checked your solutions and they are all right, very nice. thanks.

[e00dan]

@mkxbl @pygman

Can we guys merge the pull request if everything is fine?