Feature/dapp refactor ethereum provider

raiden-dapp/__mocks__/@walletconnect/web3-provider.ts

@@ -0,0 +1,4 @@
+export default class WalletConnectProvider {
+  enable = jest.fn().mockResolvedValue(true);
+  on = jest.fn();
+}

raiden-dapp/src/components/AppHeader.vue

@@ -44,7 +44,7 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
-import { createNamespacedHelpers, mapGetters } from 'vuex';
+import { createNamespacedHelpers, mapState } from 'vuex';
 
 import HeaderContent from '@/components/HeaderContent.vue';
 import HeaderIdenticon from '@/components/HeaderIdenticon.vue';
@@ -61,7 +61,7 @@ const { mapState: mapNotificationsState, mapMutations } = createNamespacedHelper
     HeaderIdenticon,
   },
   computed: {
-    ...mapGetters(['isConnected']),
+    ...mapState(['isConnected']),
     ...mapNotificationsState(['newNotifications']),
   },
   methods: {

raiden-dapp/src/components/HeaderContent.vue

@@ -41,11 +41,12 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 
 @Component({
   computed: {
-    ...mapGetters(['network', 'isConnected']),
+    ...mapState(['isConnected']),
+    ...mapGetters(['network']),
   },
 })
 export default class HeaderContent extends Vue {

raiden-dapp/src/components/UpdateSnackbar.vue

@@ -23,8 +23,8 @@ import type { VersionInfo } from '@/types';
 @Component({
   components: { BlurredOverlay },
   computed: {
-    ...mapState(['versionInfo']),
-    ...mapGetters(['isConnected', 'versionUpdateAvailable']),
+    ...mapState(['isConnected', 'versionInfo']),
+    ...mapGetters(['versionUpdateAvailable']),
   },
 })
 export default class UpdateSnackbar extends Vue {

raiden-dapp/src/components/account/AccountContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="account-content">
-    <div v-if="!loading && defaultAccount">
+    <div v-if="isConnected">
       <v-row class="account-content__account-details" dense>
         <v-col cols="3">
           <span class="account-content__account-details__address">
@@ -102,13 +102,12 @@ interface MenuItem {
     AddressDisplay,
   },
   computed: {
-    ...mapState(['loading', 'defaultAccount', 'accountBalance', 'raidenAccountBalance']),
-    ...mapGetters(['isConnected', 'usingRaidenAccount']),
+    ...mapState(['isConnected', 'defaultAccount', 'accountBalance', 'raidenAccountBalance']),
+    ...mapGetters(['usingRaidenAccount']),
   },
 })
 export default class AccountContent extends Mixins(NavigationMixin) {
   menuItems: MenuItem[] = [];
-  loading!: boolean;
   defaultAccount!: string;
   accountBalance!: string;
   raidenAccountBalance!: string;
@@ -117,6 +116,7 @@ export default class AccountContent extends Mixins(NavigationMixin) {
   async disconnect() {
     await this.$raiden.disconnect();
     localStorage.removeItem('walletconnect');
+    this.$store.commit('setDisconnected');
     this.$store.commit('reset');
   }
 

raiden-dapp/src/components/account/backup-state/UploadStateDialog.vue

@@ -152,24 +152,14 @@ export default class UploadStateDialog extends Mixins(NavigationMixin) {
         this.$store.commit('backupState', retrievedState);
         setTimeout(async () => {
           this.uploadingStateProgress = false;
-          this.cancel();
-          this.connectAndRedirect(retrievedState);
+          this.navigateToHome();
         }, 1000);
       } catch (err) {
         this.dropzoneError();
       }
     };
     reader.readAsText(uploadedFile[0]);
   }
-
-  async connectAndRedirect(retrievedState: string) {
-    let { useRaidenAccount } = this.settings;
-
-    /* istanbul ignore next */
-    await this.$raiden.connect(retrievedState, useRaidenAccount ? true : undefined);
-
-    this.navigateToHome();
-  }
 }
 </script>
 

raiden-dapp/src/locales/en.json

@@ -419,11 +419,11 @@
   "error-screen": {
     "title": "Error"
   },
-  "no-access": {
+  "error-codes": {
+    "no-ethereum-provider": "No Ethereum provider configured or available.",
     "unsupported-network": "The current network is unsupported. Please choose a different network.",
-    "sdk-initialization-failure": "SDK initialization failed. Please check the console for more information.",
-    "rdn-state-migration": "Cannot replace state with older uploaded state.",
-    "generic-error": "A valid account could not be detected. Please make sure that your provider is unlocked and accessible."
+    "sdk-initialization-failed": "SDK initialization failed. Please check the console for more information.",
+    "state-migration-failed": "Cannot replace state with older uploaded state."
   },
   "tokens": {
     "connected": {

raiden-dapp/src/model/types.ts

@@ -92,10 +92,9 @@ export const PlaceHolderNetwork: providers.Network = {
   chainId: -1,
 };
 
-export enum DeniedReason {
-  UNDEFINED,
-  NO_ACCOUNT,
-  UNSUPPORTED_NETWORK,
-  INITIALIZATION_FAILED,
-  RDN_STATE_MIGRATION,
+export enum ErrorCode {
+  NO_ETHEREUM_PROVIDER = 'no-ethereum-provider',
+  UNSUPPORTED_NETWORK = 'unsupported-network',
+  SDK_INITIALIZATION_FAILED = 'sdk-initialization-failed',
+  STATE_MIGRATION_FAILED = 'state-migration-failed',
 }

raiden-dapp/src/router/guards/connection.ts

@@ -19,7 +19,7 @@ const accountRoutes = [
  * @returns eventual navigation instruction for middleware of global guard
  */
 export function redirectIfNotConnected(to: Route): NavigationGuardNextArgument | undefined {
-  const { isConnected } = store.getters;
+  const { isConnected } = store.state;
   const routingToAccount = accountRoutes.includes(to.name ?? '');
   const routingToHome = to.name === RouteNames.HOME;
 

raiden-dapp/src/services/ethereum-connection/__mocks__/direct-rpc-provider.ts

@@ -0,0 +1,13 @@
+export class DirectRpcProvider {
+  public readonly account = 0;
+
+  public static connect() {
+    return new this();
+  }
+
+  get provider() {
+    return {
+      getNetwork: jest.fn().mockResolvedValue({ chainId: 5 }),
+    };
+  }
+}

raiden-dapp/src/services/ethereum-connection/direct-rpc-provider.ts

@@ -0,0 +1,22 @@
+import { providers } from 'ethers';
+
+import { EthereumConnection } from './types';
+
+export class DirectRpcProvider extends EthereumConnection {
+  public static readonly connection_name = 'direct_rpc_provider';
+  public readonly provider: providers.JsonRpcProvider;
+  public readonly account: string;
+
+  private constructor(rpcUrl: string, privateKey: string) {
+    super();
+    this.provider = new providers.JsonRpcProvider(rpcUrl);
+    this.account = privateKey;
+  }
+
+  public static async connect(options: {
+    rpcUrl: string;
+    privateKey: string;
+  }): Promise<DirectRpcProvider> {
+    return new this(options.rpcUrl, options.privateKey);
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './direct-rpc-provider';
+export * from './injected-provider';
+export * from './types';
+export * from './wallet-connect';

raiden-dapp/src/services/ethereum-connection/injected-provider.ts

@@ -0,0 +1,39 @@
+import { providers } from 'ethers';
+
+import { EthereumConnection } from './types';
+
+export class InjectedProvider extends EthereumConnection {
+  public static readonly connection_name = 'injected_provider';
+  public readonly provider: providers.JsonRpcProvider;
+  public readonly account = 0; // Refers to the currently selected account in the wallet.
+
+  private constructor(injetedProvider: providers.ExternalProvider) {
+    super();
+    this.provider = new providers.Web3Provider(injetedProvider);
+  }
+
+  public static async connect(): Promise<InjectedProvider> {
+    if (!window.ethereum && !window.web3) {
+      throw new Error('No injected provider is available.');
+    }
+
+    let injectedProvider;
+
+    if (window.ethereum) {
+      window.ethereum.autoRefreshOnNetworkChange = false;
+      await window.ethereum.request({ method: 'eth_requestAccounts' });
+      injectedProvider = window.ethereum;
+    } else {
+      injectedProvider = window.web3.currentProvider;
+    }
+
+    injectedProvider.on('chainChanged', resetHandler);
+    injectedProvider.on('disconnect', resetHandler);
+
+    return new this(injectedProvider);
+  }
+}
+
+function resetHandler() {
+  window.location.replace(window.location.origin);
+}

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

@@ -0,0 +1,8 @@
+import type { providers } from 'ethers';
+
+export abstract class EthereumConnection {
+  static connection_name: string;
+  static connect: (options?: any) => Promise<EthereumConnection>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  abstract provider: providers.JsonRpcProvider;
+  abstract account: string | number;
+}