[snap/frontend]: WS implementation

[AnthonyLaw]

What was the issue?

• We need a WebSocket implementation to improve the wallet's user experience.

What's the fix?

• Added WebSocket client.
• Added listenConfrimTransaction method listener.
• Implement web socket in the helper.setupSnap and open() socket when the network changes.
• Store socket in context state,
• Implementation of listenConfrimTransaction in the transaction table component.

[Wayonb]

make sure to fix failing tests 🙏🏾

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 92.85714% with 8 lines in your changes missing coverage. Please review.

Project coverage is 98.79%. Comparing base (26cf594) to head (6218655). Report is 9 commits behind head on snap/symbol.

Files	Patch %	Lines
snap/frontend/utils/webSocketClient.js	91.42%	6 Missing :warning:
...nap/frontend/components/TransactionTable/index.jsx	83.33%	2 Missing :warning:

Additional details and impacted files

[](https://app.codecov.io/gh/symbol/product/pull/1063?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 #1063 +/- ## =============================================== - Coverage 99.07% 98.79% -0.29% =============================================== Files 42 43 +1 Lines 2384 2490 +106 Branches 306 322 +16 =============================================== + Hits 2362 2460 +98 - Misses 22 30 +8 ``` | [Flag](https://app.codecov.io/gh/symbol/product/pull/1063/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/1063/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol) | `98.70% <92.85%> (-0.33%)` | :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/1063?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/1063?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%> (ø)` | | | [snap/frontend/config/index.js](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Fconfig%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb25maWcvaW5kZXguanM=) | `100.00% <100.00%> (ø)` | | | [snap/frontend/context/reducer.js](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Fcontext%2Freducer.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb250ZXh0L3JlZHVjZXIuanM=) | `98.21% <100.00%> (+0.13%)` | :arrow_up: | | [snap/frontend/utils/dispatchUtils.js](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Futils%2FdispatchUtils.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC91dGlscy9kaXNwYXRjaFV0aWxzLmpz) | `100.00% <100.00%> (ø)` | | | [snap/frontend/utils/helper.js](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Futils%2Fhelper.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC91dGlscy9oZWxwZXIuanM=) | `100.00% <100.00%> (ø)` | | | [...nap/frontend/components/TransactionTable/index.jsx](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Fcomponents%2FTransactionTable%2Findex.jsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC9jb21wb25lbnRzL1RyYW5zYWN0aW9uVGFibGUvaW5kZXguanN4) | `96.42% <83.33%> (-1.06%)` | :arrow_down: | | [snap/frontend/utils/webSocketClient.js](https://app.codecov.io/gh/symbol/product/pull/1063?src=pr&el=tree&filepath=snap%2Ffrontend%2Futils%2FwebSocketClient.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=symbol#diff-c25hcC9mcm9udGVuZC91dGlscy93ZWJTb2NrZXRDbGllbnQuanM=) | `91.42% <91.42%> (ø)` | |