[snap/frontend]: Added fee multiplier component.

[AnthonyLaw]

What was the issue?

• The fee multiplier option is missing in the transfer form.

What's the fix?

• Query fee multiplier from snap state.
• Added fee multiplier frontend.

Preview

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 98.99%. Comparing base (0bc06c9) to head (2a8a491). Report is 249 commits behind head on snap/symbol.

Additional details and impacted files

[](https://app.codecov.io/gh/symbol/product/pull/1037?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 #1037 +/- ## =============================================== - Coverage 99.38% 98.99% -0.40% =============================================== Files 40 30 -10 Lines 1963 1984 +21 Branches 248 241 -7 =============================================== + Hits 1951 1964 +13 - Misses 12 20 +8 ``` | [Flag](https://app.codecov.io/gh/symbol/product/pull/1037/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | Coverage Δ | | |---|---|---| | [snap-backend](https://app.codecov.io/gh/symbol/product/pull/1037/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | `?` | | | [snap-frontend](https://app.codecov.io/gh/symbol/product/pull/1037/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | `98.99% <100.00%> (-0.40%)` | :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/1037?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/FeeMultiplier/index.jsx](https://app.codecov.io/gh/symbol/product/pull/1037?src=pr&el=tree&filepath=snap%2Ffrontend%2Fcomponents%2FFeeMultiplier%2Findex.jsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb21wb25lbnRzL0ZlZU11bHRpcGxpZXIvaW5kZXguanN4) | `100.00% <100.00%> (ø)` | | | [...nap/frontend/components/TransferModalBox/index.jsx](https://app.codecov.io/gh/symbol/product/pull/1037?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.09% <100.00%> (ø)` | | | [snap/frontend/utils/snap.js](https://app.codecov.io/gh/symbol/product/pull/1037?src=pr&el=tree&filepath=snap%2Ffrontend%2Futils%2Fsnap.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC91dGlscy9zbmFwLmpz) | `100.00% <100.00%> (ø)` | | ... and [12 files with indirect coverage changes](https://app.codecov.io/gh/symbol/product/pull/1037/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol)

[AnthonyLaw]

Looks good, but a couple of questions

1. how does the user know what fee values are slow, average, and fast?
2. Can the user set a custom fee?

1. I was thinking of implementing fees (tx size * fee multiplier) in this screen, which means I must create and prepare transactions in the front end, which doesn't look good (because I want it to implement prepare transactions in the backend)

• does it make sense we just showing fee multiplier and the fees will be displayed in the last confirmation screen?

2. Nope, but I can add it in the future.

[Wayonb]

Looks good, but a couple of questions

1. how does the user know what fee values are slow, average, and fast?
2. Can the user set a custom fee?

1. I was thinking of implementing fees (tx size * fee multiplier) in this screen, which means I must create and prepare transactions in the front end, which doesn't look good (because I want it to implement prepare transactions in the backend)

• does it make sense we just showing fee multiplier and the fees will be displayed in the last confirmation screen?

2. Nope, but I can add it in the future.
3. yea, that might work but I would verify with @0x6861746366574 tbh, not sure if these are needed since most tx will get committed in the next block