Rename General screen to account

raiden-dapp/CHANGELOG.md

@@ -17,6 +17,11 @@
 - [#1382] Better error handling when PFS can't find routes between nodes.
 - [#1427] Scroll bar issue in Channel List view.
 
+### Changed
+
+- [#1458] General screen has been renamed to account.
+
+[#1458]: https://github.com/raiden-network/light-client/issues/1458
 [#1402]: https://github.com/raiden-network/light-client/issues/1402
 [#1413]: https://github.com/raiden-network/light-client/issues/1413
 [#1395]: https://github.com/raiden-network/light-client/issues/1395

raiden-dapp/src/components/AppHeader.vue

@@ -13,7 +13,7 @@
               @click="onBackClicked()"
             >
               <v-img
-                :src="require('../assets/back_arrow.svg')"
+                :src="require('@/assets/back_arrow.svg')"
                 max-width="34px"
               />
             </v-btn>
@@ -37,7 +37,7 @@
           </v-col>
           <v-spacer />
           <span class="app-header__account-wrapper">
-            <header-identicon @click.native="navigateToGeneralHome()" />
+            <header-identicon @click.native="navigateToAccoount()" />
           </span>
         </div>
       </v-col>

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

@@ -1,47 +1,47 @@
 <template>
-  <div class="general-screen-menu">
+  <div class="account-content">
     <div v-if="!loading && defaultAccount">
-      <v-row class="general-screen-menu__account-details" no-gutters>
+      <v-row class="account-content__account-details" no-gutters>
         <v-col cols="12">
-          <div class="general-screen-menu__account-details--title">
-            {{ $t('general-menu.account-details') }}
+          <div class="account-content__account-details--title">
+            {{ $t('account-content.account-details') }}
           </div>
         </v-col>
       </v-row>
       <v-row no-gutters>
         <v-col cols="2">
-          <span class="general-screen-menu__account-details--address">
-            {{ $t('general-menu.address') }}
+          <span class="account-content__account-details--address">
+            {{ $t('account-content.address') }}
           </span>
         </v-col>
         <v-col cols="10">
-          <span class="general-screen-menu__account-details--address">
+          <span class="account-content__account-details--address">
             <address-display :address="defaultAccount" full-address />
           </span>
         </v-col>
       </v-row>
-      <v-row class="general-screen-menu__account-details__eth" no-gutters>
+      <v-row class="account-content__account-details__eth" no-gutters>
         <v-col cols="2">
-          <span class="general-screen-menu__account-details__eth--currency">
-            {{ $t('general-menu.currency') }}
+          <span class="account-content__account-details__eth--currency">
+            {{ $t('account-content.currency') }}
           </span>
         </v-col>
         <v-col cols="10">
-          <span class="general-screen-menu__account-details__eth--balance">
+          <span class="account-content__account-details__eth--balance">
             {{ balance | decimals }}
           </span>
         </v-col>
       </v-row>
     </div>
-    <v-list two-line class="general-screen-menu__menu">
+    <v-list two-line class="account-content__menu">
       <v-list-item
         v-for="(menuItem, index) in menuItems"
         :key="index"
-        class="general-screen-menu__menu__list-items"
+        class="account-content__menu__list-items"
       >
-        <div class="general-screen-menu__menu__list-items__icon">
+        <div class="account-content__menu__list-items__icon">
           <v-img
-            :src="require(`../assets/${menuItem.icon}`)"
+            :src="require(`@/assets/${menuItem.icon}`)"
             max-width="40px"
             height="36px"
             contain
@@ -78,7 +78,7 @@ import AddressDisplay from '@/components/AddressDisplay.vue';
     ...mapGetters(['balance', 'isConnected'])
   }
 })
-export default class GeneralMenu extends Mixins(NavigationMixin) {
+export default class AccountContent extends Mixins(NavigationMixin) {
   menuItems: {}[] = [];
   loading!: boolean;
   defaultAccount!: string;
@@ -89,19 +89,23 @@ export default class GeneralMenu extends Mixins(NavigationMixin) {
     this.menuItems = [
       {
         icon: 'state.svg',
-        title: this.$t('general-menu.menu-items.backup-state-title') as string,
+        title: this.$t(
+          'account-content.menu-items.backup-state.title'
+        ) as string,
         subtitle: this.$t(
-          'general-menu.menu-items.backup-state-subtitle'
+          'account-content.menu-items.backup-state.subtitle'
         ) as string,
         route: () => {
           this.navigateToBackupState();
         }
       },
       {
         icon: 'bug.svg',
-        title: this.$t('general-menu.menu-items.report-bugs-title') as string,
+        title: this.$t(
+          'account-content.menu-items.report-bugs.title'
+        ) as string,
         subtitle: this.$t(
-          'general-menu.menu-items.report-bugs-subtitle'
+          'account-content.menu-items.report-bugs.subtitle'
         ) as string,
         route: () => {
           this.downloadLogs();
@@ -114,14 +118,19 @@ export default class GeneralMenu extends Mixins(NavigationMixin) {
       const mainAccount = await this.$raiden.getMainAccount();
       const raidenAccount = await this.$raiden.getAccount();
       if (mainAccount && raidenAccount) {
-        this.menuItems.unshift({
+        const raidenAccount = {
           icon: 'eth.svg',
-          title: 'Raiden Account',
-          subtitle: 'Transfer ETH between your main and Raiden account',
+          title: this.$t(
+            'account-content.menu-items.raiden-account.title'
+          ) as string,
+          subtitle: this.$t(
+            'account-content.menu-items.raiden-account.subtitle'
+          ) as string,
           route: () => {
             this.navigateToRaidenAccountTransfer();
           }
-        });
+        };
+        this.menuItems.unshift(raidenAccount);
       }
     }
   }
@@ -147,9 +156,9 @@ export default class GeneralMenu extends Mixins(NavigationMixin) {
 </script>
 
 <style scoped lang="scss">
-@import '../scss/colors';
+@import '../../scss/colors';
 
-.general-screen-menu {
+.account-content {
   margin: 0 64px 0 64px;
 
   &__account-details {

raiden-dapp/src/components/DownloadStateDialog.vue → raiden-dapp/src/components/account/backup-state/DownloadStateDialog.vue

@@ -9,7 +9,7 @@
         <v-col cols="6">
           <v-img
             class="download-state__warning"
-            :src="require('../assets/warning.svg')"
+            :src="require('@/assets/warning.svg')"
           ></v-img>
         </v-col>
         <v-col cols="12">
@@ -33,7 +33,7 @@
 import { Component, Prop, Emit, Mixins } from 'vue-property-decorator';
 import RaidenDialog from '@/components/RaidenDialog.vue';
 import ActionButton from '@/components/ActionButton.vue';
-import NavigationMixin from '../mixins/navigation-mixin';
+import NavigationMixin from '../../../mixins/navigation-mixin';
 
 @Component({
   components: {

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

@@ -56,7 +56,7 @@
         <v-row class="upload-state__dropzone__button">
           <input ref="stateInput" type="file" hidden @change="onFileSelect" />
           <action-button
-            :enabled="!activeDropzone ? true : false"
+            :enabled="!activeDropzone"
             ghost
             :text="$t('backup-state.upload-button')"
             @click="$refs.stateInput.click()"
@@ -167,7 +167,7 @@ export default class UploadStateDialog extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../scss/colors';
+@import '../../../scss/colors';
 
 .upload-state {
   &__error {

raiden-dapp/src/locales/en.json

@@ -30,15 +30,23 @@
     "raiden-account": "Raiden Account",
     "main-account": "Main Account"
   },
-  "general-menu": {
+  "account-content": {
     "account-details": "Account Details",
     "address": "Address:",
     "currency": "ETH:",
     "menu-items": {
-      "backup-state-title": "Backup state",
-      "backup-state-subtitle": "Download & upload your state",
-      "report-bugs-title": "Report bugs",
-      "report-bugs-subtitle": "Download logs"
+      "backup-state": {
+        "title": "Backup state",
+        "subtitle": "Download & upload your state"
+      },
+      "report-bugs": {
+        "title": "Report bugs",
+        "subtitle": "Download logs"
+      },
+      "raiden-account": {
+        "title": "Raiden Account",
+        "subtitle": "Transfer ETH between your main and Raiden account"
+      }
     }
   },
   "backup-state": {

raiden-dapp/src/mixins/navigation-mixin.ts

@@ -69,21 +69,21 @@ export default class NavigationMixin extends Vue {
     });
   }
 
-  navigateToGeneralHome() {
+  navigateToAccoount() {
     this.$router.push({
-      name: RouteNames.GENERAL_HOME
+      name: RouteNames.ACCOUNT_ROOT
     });
   }
 
   navigateToBackupState() {
     this.$router.push({
-      name: RouteNames.BACKUP_STATE
+      name: RouteNames.ACCOUNT_BACKUP
     });
   }
 
   navigateToRaidenAccountTransfer() {
     this.$router.push({
-      name: RouteNames.RAIDEN_ACCOUNT
+      name: RouteNames.ACCOUNT_RAIDEN
     });
   }
 

raiden-dapp/src/router/index.ts

@@ -72,8 +72,8 @@ const router = new Router({
       component: () => import('../views/ChannelsRoute.vue')
     },
     {
-      path: '/general',
-      name: RouteNames.GENERAL,
+      path: '/account',
+      name: RouteNames.ACCOUNT,
       beforeEnter: (to, from, next) => {
         // Remembers the route that was visited just before the General view is opened and
         // then loads the General view in a separate <router-view>. The last visited route
@@ -85,34 +85,34 @@ const router = new Router({
         } else if (to.matched.length) {
           to.matched[0].components.default = from.matched[0].components.default;
           to.matched[0].components.modal = () =>
-            import('../views/GeneralDialog.vue');
+            import('../views/AccountRoute.vue');
         }
         next();
       },
       children: [
         {
-          path: 'general-home',
-          name: RouteNames.GENERAL_HOME,
+          path: '/',
+          name: RouteNames.ACCOUNT_ROOT,
           meta: {
-            title: 'General'
+            title: 'Account'
           },
-          component: () => import('../views/GeneralHome.vue')
+          component: () => import('../views/account/AccountRoot.vue')
         },
         {
-          path: 'backup-state',
-          name: RouteNames.BACKUP_STATE,
+          path: 'backup',
+          name: RouteNames.ACCOUNT_BACKUP,
           meta: {
             title: 'Backup State'
           },
-          component: () => import('../views/BackupState.vue')
+          component: () => import('../views/account/BackupState.vue')
         },
         {
-          path: 'raiden-account',
-          name: RouteNames.RAIDEN_ACCOUNT,
+          path: 'raiden',
+          name: RouteNames.ACCOUNT_RAIDEN,
           meta: {
             title: 'Raiden Account'
           },
-          component: () => import('../views/RaidenAccount.vue')
+          component: () => import('../views/account/RaidenAccount.vue')
         }
       ]
     }

raiden-dapp/src/router/route-names.ts

@@ -6,8 +6,8 @@ export enum RouteNames {
   HOME = 'home',
   CHANNELS = 'channels',
   OPEN_CHANNEL = 'open-channel',
-  GENERAL = 'general',
-  GENERAL_HOME = 'general-home',
-  BACKUP_STATE = 'backup-state',
-  RAIDEN_ACCOUNT = 'raiden-account'
+  ACCOUNT = 'account',
+  ACCOUNT_ROOT = 'account-root',
+  ACCOUNT_BACKUP = 'account-backup',
+  ACCOUNT_RAIDEN = 'account-raiden'
 }

raiden-dapp/src/views/GeneralDialog.vue → raiden-dapp/src/views/AccountRoute.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="general-screen-wrapper">
-    <div class="general-screen">
-      <v-row class="general-screen__header" no-gutters>
-        <div class="general-screen__header__content">
-          <div class="general-screen__header__content__back">
+  <div id="account-route-wrapper">
+    <div class="account-route">
+      <v-row class="account-route__header" no-gutters>
+        <div class="account-route__header__content">
+          <div class="account-route__header__content__back">
             <v-btn
               height="40px"
               text
@@ -12,21 +12,21 @@
               @click="onGeneralBackClicked()"
             >
               <v-img
-                :src="require('../assets/back_arrow.svg')"
+                :src="require('@/assets/back_arrow.svg')"
                 max-width="34px"
               />
             </v-btn>
           </div>
-          <div class="general-screen__header__content__title">
+          <div class="account-route__header__content__title">
             {{ $route.meta.title }}
           </div>
         </div>
       </v-row>
       <router-view />
-      <v-row class="general-screen__footer" no-gutters>
+      <v-row class="account-route__footer" no-gutters>
         <div v-if="version">
           <span>{{ $t('versions.sdk', { version }) }}</span>
-          <span class="general-screen__footer__contracts-version">
+          <span class="account-route__footer__contracts-version">
             {{ $t('versions.contracts', { version: contractVersion }) }}
           </span>
         </div>
@@ -41,7 +41,7 @@ import { Raiden } from 'raiden-ts';
 import NavigationMixin from '@/mixins/navigation-mixin';
 
 @Component({})
-export default class GeneralDialog extends Mixins(NavigationMixin) {
+export default class AccountRoute extends Mixins(NavigationMixin) {
   get version() {
     return Raiden.version;
   }
@@ -57,7 +57,7 @@ export default class GeneralDialog extends Mixins(NavigationMixin) {
 @import '../scss/fonts';
 @import '../scss/colors';
 
-#general-screen-wrapper {
+#account-route-wrapper {
   align-items: center;
   display: flex;
   height: 100%;
@@ -70,7 +70,7 @@ export default class GeneralDialog extends Mixins(NavigationMixin) {
   }
 }
 
-.general-screen {
+.account-route {
   background-color: black;
   border-radius: 10px;
   display: flex;