[snap/frontend]: Added transfer form component

[AnthonyLaw]

What was the issue?

• The transfer transaction form is missing when clicking on the send button on the home page.

What's the fix?

• Added transfer transaction form.
• Click on the Send button to pop up the modal box.
• Added form validation, such as Address (network check), mosaic amount, and message length.
• Handle mosaic selector logic, when the user clicks on "Add" mosaic, the options will be filtered (no duplicate).

Preview:

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 96.26866% with 10 lines in your changes missing coverage. Please review.

Project coverage is 99.01%. Comparing base (0bc06c9) to head (920d3fc).

Files	Patch %	Lines
...nap/frontend/components/TransferModalBox/index.jsx	96.01%	10 Missing :warning:

Additional details and impacted files

[](https://app.codecov.io/gh/symbol/product/pull/1029?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) ```diff @@ Coverage Diff @@ ## snap/symbol #1029 +/- ## =============================================== - Coverage 99.38% 99.01% -0.38% =============================================== Files 40 41 +1 Lines 1963 2230 +267 Branches 248 289 +41 =============================================== + Hits 1951 2208 +257 - Misses 12 22 +10 ``` | [Flag](https://app.codecov.io/gh/symbol/product/pull/1029/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | Coverage Δ | | |---|---|---| | [snap-frontend](https://app.codecov.io/gh/symbol/product/pull/1029/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | `98.95% <96.26%> (-0.44%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/symbol/product/pull/1029?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | Coverage Δ | | |---|---|---| | [snap/frontend/components/Home/index.jsx](https://app.codecov.io/gh/symbol/product/pull/1029?src=pr&el=tree&filepath=snap%2Ffrontend%2Fcomponents%2FHome%2Findex.jsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb21wb25lbnRzL0hvbWUvaW5kZXguanN4) | `100.00% <100.00%> (ø)` | | | [...nap/frontend/components/TransferModalBox/index.jsx](https://app.codecov.io/gh/symbol/product/pull/1029?src=pr&el=tree&filepath=snap%2Ffrontend%2Fcomponents%2FTransferModalBox%2Findex.jsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb21wb25lbnRzL1RyYW5zZmVyTW9kYWxCb3gvaW5kZXguanN4) | `96.01% <96.01%> (ø)` | |

[AnthonyLaw]

Also, when the user clicks send, is there a verification screen for the tx?

Yes, this will be another PR. The final pop-up confirmation will come from metamask.