Replace metamask/provider mock methods with synpress in e2e tests

[EresDev]

The PR #345 addressed fixing e2e tests. However, it appears cypress gives false positives. It marks tests passed but tests are not running correctly.

I have looked into it and the reason is the introduction of async/await in these tests. Cypress doesn't want you to have async methods in tests. It has its own way of handling asynchronous code. Unfortunately, if you don't do that cypress just marks them passed.

But once you fix async/await in our tests, there comes the problem of its interaction with metamask. Metamask/provider methods were mocked initially. As I understand, there is no real metamask in e2e tests. But with the introduction of payment cards, the mocking isn't enough because there is much more interaction between wallet and the app. I spent several hours but I was not happy with the results I got with mocks. Plus, adding new tests is a pain with these mocks.

I suggest introducing something close to a real use case with minimum mocks in e2e tests. One possible solution is to use synpress It allows metamask in your tests and enables you to control metamask in your e2e test. Feel free to suggest if there are better alternatives in your mind.

It is important to evaluate the feasibility of synpress first because I have not used it but it looks suitable for the use case.

The goal of this issue is

• in e2e tests, let the app interact with metamask provided by synpress
• reduce the mocks in e2e tests
• fix any broken tests