dapp: add connection options to vuex user settings

This extension of the user settings allows to make the Ethereum
connection options as provided by the user can be easily preserved and
reloaded.

This is a preparation for the connection management by the user. For
this commit the connection options are still derived from the
configuration file. Later this will allows to save the users connection
options and pre-fill the connection dialog, allow for auto-logins,
change the options somewhere else and more.

raiden-dapp/src/services/ethereum-connection/types.ts

@@ -1,9 +1,16 @@
 import type { providers } from 'ethers';
 
+// The type evaluation for static class members works slightly different for
+// the moment. Thereby it is not possible to have any better type restrictions
+// here. Though having the named type here in place will allows us to adopt it
+// later and being explicit about it at all places.
+export type EthereumConnectionOptions = any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+// TOOD: watch-out when `static abstract` becomes possible in TypeScript
 export abstract class EthereumConnection {
-  static connection_name: string;
+  static connectionName: string;
   static isAvailable = false;
-  static connect: (options?: any) => Promise<EthereumConnection>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  static connect: (options: EthereumConnectionOptions) => Promise<EthereumConnection>;
   abstract provider: providers.JsonRpcProvider;
   abstract account: string | number;
 

raiden-dapp/src/store/user-settings/getters.ts

@@ -0,0 +1,20 @@
+import type { GetterTree } from 'vuex';
+
+import type { EthereumConnectionOptions } from '@/services/ethereum-connection';
+import type { RootState } from '@/types';
+
+import type { UserSettingsState } from './types';
+
+type Getters = {
+  getEthereumConnectionOptions(
+    state: UserSettingsState,
+  ): (connectionName: string) => EthereumConnectionOptions;
+};
+
+export const getters: GetterTree<UserSettingsState, RootState> & Getters = {
+  // This getter is relevant to have a standardized default value that works for
+  // all component which interact with such connection options.
+  getEthereumConnectionOptions: (state) => (connectionName) => {
+    return state.ethereumConnectionOptions[connectionName] ?? {};
+  },
+};

raiden-dapp/src/store/user-settings/mutations.ts

@@ -1,5 +1,7 @@
 import type { MutationTree } from 'vuex';
 
+import type { EthereumConnectionOptions } from '@/services/ethereum-connection';
+
 import type { UserSettingsState } from './types';
 
 export const mutations: MutationTree<UserSettingsState> = {
@@ -9,4 +11,13 @@ export const mutations: MutationTree<UserSettingsState> = {
   disableRaidenAccount(state) {
     state.useRaidenAccount = false;
   },
+  saveEthereumConnectionOptions(
+    state,
+    payload: {
+      connectionName: string;
+      connectionOptions: EthereumConnectionOptions;
+    },
+  ) {
+    state.ethereumConnectionOptions[payload.connectionName] = payload.connectionOptions;
+  },
 };

raiden-dapp/src/store/user-settings/state.ts

@@ -2,6 +2,7 @@ import type { UserSettingsState } from './types';
 
 export const defaultState = (): UserSettingsState => ({
   useRaidenAccount: true,
+  ethereumConnectionOptions: {},
 });
 
 const state: UserSettingsState = defaultState();

raiden-dapp/src/store/user-settings/types.ts

@@ -1,3 +1,6 @@
+import type { EthereumConnectionOptions } from '@/services/ethereum-connection';
+
 export interface UserSettingsState {
   useRaidenAccount: boolean;
+  ethereumConnectionOptions: { [connectionName: string]: EthereumConnectionOptions };
 }

raiden-dapp/tests/unit/store/user-settings/getters.spec.ts

@@ -0,0 +1,19 @@
+import { getters } from '@/store/user-settings/getters';
+import { defaultState } from '@/store/user-settings/state';
+
+describe('user settings store getters', () => {
+  test('get empty options for etherum connections per default', () => {
+    const state = defaultState();
+
+    expect(getters.getEthereumConnectionOptions(state)('test_connection')).toMatchObject({});
+  });
+
+  test('get saved options for etherum connections', () => {
+    const state = defaultState();
+    state.ethereumConnectionOptions['test_connection'] = { option: 'test' };
+
+    expect(getters.getEthereumConnectionOptions(state)('test_connection')).toMatchObject({
+      option: 'test',
+    });
+  });
+});

raiden-dapp/tests/unit/store/user-settings/mutations.spec.ts

@@ -19,4 +19,14 @@ describe('user setttings store mutations', () => {
 
     expect(state.useRaidenAccount).toBe(false);
   });
+
+  test('can save ethereum connection options', () => {
+    const state = defaultState();
+    expect(state.ethereumConnectionOptions['test_connection']).toBeUndefined();
+
+    const payload = { connectionName: 'test_connection', connectionOptions: 'test_options' };
+    mutations.saveEthereumConnectionOptions(state, payload);
+
+    expect(state.ethereumConnectionOptions['test_connection']).toBe('test_options');
+  });
 });