Skip to content

Commit

Permalink
dapp: add connection options to vuex user settings
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
weilbith committed May 10, 2021
1 parent 311fcd8 commit a2568c8
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 2 deletions.
11 changes: 9 additions & 2 deletions raiden-dapp/src/services/ethereum-connection/types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
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 connect: (options?: any) => Promise<EthereumConnection>; // eslint-disable-line @typescript-eslint/no-explicit-any
static connectionName: string;
static connect: (options: EthereumConnectionOptions) => Promise<EthereumConnection>;
abstract provider: providers.JsonRpcProvider;
abstract account: string | number;
}
20 changes: 20 additions & 0 deletions raiden-dapp/src/store/user-settings/getters.ts
Original file line number Diff line number Diff line change
@@ -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] ?? {};
},
};
11 changes: 11 additions & 0 deletions raiden-dapp/src/store/user-settings/mutations.ts
Original file line number Diff line number Diff line change
@@ -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> = {
Expand All @@ -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;
},
};
1 change: 1 addition & 0 deletions raiden-dapp/src/store/user-settings/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { UserSettingsState } from './types';

export const defaultState = (): UserSettingsState => ({
useRaidenAccount: true,
ethereumConnectionOptions: {},
});

const state: UserSettingsState = defaultState();
Expand Down
3 changes: 3 additions & 0 deletions raiden-dapp/src/store/user-settings/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import type { EthereumConnectionOptions } from '@/services/ethereum-connection';

export interface UserSettingsState {
useRaidenAccount: boolean;
ethereumConnectionOptions: { [connectionName: string]: EthereumConnectionOptions };
}
19 changes: 19 additions & 0 deletions raiden-dapp/tests/unit/store/user-settings/getters.spec.ts
Original file line number Diff line number Diff line change
@@ -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',
});
});
});
10 changes: 10 additions & 0 deletions raiden-dapp/tests/unit/store/user-settings/mutations.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});

0 comments on commit a2568c8

Please sign in to comment.