UI/UX: Fix blockchain-blocks skeleton. (#697)

* Fix blockchain-blocks skeleton.

* Fix blockchain skeleton background.

* Fix mempool blockchain skeleton.

* Add e2e testing.
Add tsconfig.
Fix mempool fit to screen.

* Fix wrong return.
Fix e2e testing.

* Fix blockchainblocks connectionstate.
Add init action to websocket mock.
Add e2e testing for droping websock connection.

* Ref e2e code for websocket connection.
Fix blockchain blocks skeleton.

* Fix state connections.
Remove .only e2e tests.

* Fix mempool blocks skeleton.

* Add fit screen to empty blocks.

frontend/cypress/support/index.d.ts

@@ -0,0 +1,10 @@
+
+/// <reference types="cypress" />
+declare namespace Cypress {
+    interface Chainable<Subject> {
+        waitForSkeletonGone(): Chainable<any>
+        waitForPageIdle(): Chainable<any>
+        mockMempoolSocket(): Chainable<any>
+        changeNetwork(network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet"): Chainable<any>
+    }
+}

frontend/cypress/support/websocket.ts

@@ -38,6 +38,7 @@ export const mockWebSocket = () => {
 				win.mockServer = server;
 				win.mockServer.on('connection', (socket) => {
 					win.mockSocket = socket;
+                    win.mockSocket.send('{"action":"init"}');
 				});
 
                 win.mockServer.on('message', (message) => {
@@ -81,4 +82,11 @@ export const emitMempoolInfo = ({
 	});
     cy.waitForSkeletonGone();
     return cy.get('#mempool-block-0');
-};
+};
+
+export const dropWebSocket = (() => {
+    cy.window().then((win) => {
+        win.mockServer.simulate("error");
+    });
+    return cy.wait(500);
+});