[DDW-245] Integrate react-polymorph render props in Daedalus

[MarcusHurney]

This PR integrates the develop branch of react-polymorph into Daedalus.

Todo:

• release new react-polymorph version on npm
• set correct react-polymorph version in package.json after npm release
• Replace react-css-themr ThemeProvider with react-polymorph ThemeProvider
• Change import statements of react-polymorph components, skins, and themes to match new file structure
• Pass skins to react-polymorph components as a variable created by import statements instead of passing a skin component instance (i.e. doesn't pass skin components with tags<>)
• general: focus-on-label-click feature in react-polymorph FormField component
• general: clearing of wallet restore mnemonics when leaving the dialog
• general: select arrow has inverted color on active/inactive states
  react-polymorph PR 68
• general: select checkmark should be white in dark theme

• general: select not closing on enter key selection
• settings screen: disabled state on custom fields (inline editing inputs) is wrong (should look like enabled field)

• ada-redemption screen: isOpeningUpwards not working correctly on select and autocomplete components

• create-dialog: mnemonic entry buttons should not have outline if they are disabled (even if they are focused!)

• wallet send screen: in case you enter a valid amount and then type some non-numeric keys the button becomes disabled

---

Review Checklist:

Basics

• PR is updated to the most recent version of target branch (and there are no conflicts)
• PR has good description that summarizes all changes and shows some screenshots or animated GIFs of important UI changes
• CHANGELOG entry has been added and is linked to the correct PR on GitHub
• Automated tests: All acceptance tests are passing (npm run test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (npm run dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (npm run package / CI builds)
• There are no flow errors or warnings (npm run flow:test)
• There are no lint errors or warnings (npm run lint)
• [N/A] No text changes -> Text changes are proofread and approved (Jane Wild)
• There are no missing translations (running npm run manage:translations produces no changes)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (npm run storybook)
• In case of npm dependency changes both package-lock.json and yarn.lock files are updated

Code Quality

• Important parts of the code are properly documented and commented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-rendering
• Any code that only works in Electron is neatly separated from components

Testing

• New feature / change is covered by acceptance tests
• All existing acceptance tests are still up-to-date
• New feature / change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review:

• Merge PR
• Delete source branch
• Move ticket to done on the Youtrack board

[DominikGuzei]

Brilliant work @MarcusHurney! Thanks for doing all the hard work to make my dreams for react-polymorph true 😉 specially love how this actually reduces our lines of code a bit while featuring a better component api (e.g: passing the skins directly, instead of jsx components)

Since this is a huge change, i would love to have one other approval before merging! (@nikolaglumac ?)

[nikolaglumac]

@DominikGuzei sure - I will review this on Monday. Still, we must be very careful due to all of the changes - especially in the NumericInput on the Send screen, special inputs on Wallet Settings screen, etc.

@DominikGuzei would you be willing to sort out the 2 of remaining Todos? (publishing new React-Polymorph version + updating that version in package.json on Daedalus side?)

[nikolaglumac]

This PR should not be merged before the 1.3 release cut-off.

[MarcusHurney]

@DominikGuzei
Thanks for the kind words. I share your dreams for react-polymorph and I highly doubt I would have been able to implement any of this without all the ground work you did. You conceptualized the skyscraper, built the foundation and structure and all the stuff that makes it a monster feat. I just put in the elevators and windows. I'm excited to see where this thing goes and I'm kind of amazed how much cooler stuff can be when people work together. It's nice to feel like something is my baby, but I'd rather see the baby become a spacecraft rather than a kite with my name on it. haha

[nikolaglumac]

Hi @MarcusHurney @DominikGuzei - great work!
Almost everything is fixed. I have found some more defects which we need to fix:

• duplicated styles (Dominik)
• error state on textarea (Dominik)
• checkbox component 1px centering issue (Dominik)
• checkbox disabled state border color in Dark blue theme (Nikola and Saša)

[nikolaglumac]

@DominikGuzei @MarcusHurney checkbox disabled state styles fixed!

[DominikGuzei]

@nikolaglumac @MarcusHurney this PR is ready for final review :)

[nikolaglumac]

Great work @DominikGuzei @MarcusHurney 🎉
Everything is now working perfectly! 👍
Let's merge and release React-Polymoprh version and then update the package.json in this PR. After that it is ready to be merged!