Account info implementation & fix loading state (#54)

* Add account info

* Fix styles

src/App.vue

@@ -21,16 +21,19 @@
         </s-menu-item>
       </s-menu>
       <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.Exchange)" />
-      <div class="buttons">
-        <s-button class="wallet" type="action" icon="wallet" rounded :disabled="loading" @click="goTo(PageNames.Wallet)" />
+      <div class="buttons s-flex">
+        <div v-if="accountInfo" class="wallet-section s-flex">
+          <div class="account">{{ accountInfo }}</div>
+          <s-button class="wallet" type="action" icon="wallet" rounded :disabled="loading" @click="goTo(PageNames.Wallet)" />
+        </div>
+        <s-button v-else class="wallet" type="action" icon="wallet" rounded :disabled="loading" @click="goTo(PageNames.Wallet)" />
         <s-button type="action" icon="settings" rounded @click="openSettingsDialog" />
         <!-- TODO: The button is hidden because we don't have a Search page right now -->
         <!-- <s-button type="action" icon="search" rounded /> -->
       </div>
     </header>
     <div class="app-content">
-      <!-- TODO 4 alexnatalia: We should have this loader only for appropriate pages. Play with it a bit more -->
-      <router-view v-loading="loading" />
+      <router-view :parent-loading="loading" />
     </div>
     <settings :visible.sync="showSettings" />
   </div>
@@ -46,6 +49,7 @@ import TransactionMixin from '@/components/mixins/TransactionMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import router, { lazyComponent } from '@/router'
 import axios from '@/api'
+import { formatAddress } from '@/utils'
 
 @Component({
   components: {
@@ -68,6 +72,7 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin) {
   showSettings = false
 
   @Getter firstReadyTransaction!: any
+  @Getter account!: any
   @Action trackActiveTransactions
 
   async created () {
@@ -85,6 +90,13 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin) {
     this.handleChangeTransaction(value)
   }
 
+  get accountInfo (): string {
+    if (!this.account || !(this.account.name || this.account.address)) {
+      return ''
+    }
+    return this.account.name || formatAddress(this.account.address, 8)
+  }
+
   getCurrentPath (): string {
     if (this.exchangePages.includes(router.currentRoute.name as PageNames)) {
       return PageNames.Exchange
@@ -276,6 +288,12 @@ html {
     }
   }
 }
+.container {
+  @include container-styles;
+  .el-loading-mask {
+    border-radius: var(--s-border-radius-medium);
+  }
+}
 </style>
 
 <style lang="scss" scoped>
@@ -331,6 +349,18 @@ $menu-height: 65px;
 
 .buttons {
   margin-left: auto;
+  .wallet-section {
+    border: 1px solid var(--s-color-base-border-secondary);
+    border-radius: var(--s-size-small);
+    background: var(--s-color-base-background);
+    align-items: center;
+    margin-right: $inner-spacing-mini;
+    .account {
+      padding: 0 $inner-spacing-mini;
+      font-size: var(--s-font-size-mini);
+      font-feature-settings: $s-font-feature-settings-common;
+    }
+  }
   .wallet {
     background-color: var(--s-color-theme-accent);
     border-color: var(--s-color-theme-accent);

src/views/AddLiquidity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" v-loading="parentLoading">
     <generic-header :title="t('addLiquidity.title')" :tooltip="t('pool.description')" />
     <s-form
       class="el-form--actions"
@@ -160,7 +160,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
@@ -183,6 +183,8 @@ const namespace = 'addLiquidity'
   }
 })
 export default class AddLiquidity extends Mixins(TranslationMixin, LoadingMixin) {
+  @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
+
   @Getter('firstToken', { namespace }) firstToken!: any
   @Getter('secondToken', { namespace }) secondToken!: any
   @Getter('firstTokenValue', { namespace }) firstTokenValue!: number
@@ -342,16 +344,11 @@ export default class AddLiquidity extends Mixins(TranslationMixin, LoadingMixin)
 </style>
 
 <style lang="scss" scoped>
-.container {
-  @include container-styles;
-}
-
 .el-form--actions {
   @include input-form-styles;
   @include buttons;
   @include full-width-button;
 }
-
 @include vertical-divider;
 @include vertical-divider('el-divider');
 </style>

src/views/CreatePair.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" v-loading="parentLoading">
     <generic-header :title="t('createPair.title')" :tooltip="t('pool.description')" />
     <s-form
       class="el-form--actions"
@@ -114,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
@@ -139,6 +139,8 @@ const namespace = 'createPair'
 })
 
 export default class CreatePair extends Mixins(TranslationMixin, LoadingMixin) {
+  @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
+
   @Getter('firstToken', { namespace }) firstToken!: any
   @Getter('secondToken', { namespace }) secondToken!: any
   @Getter('firstTokenValue', { namespace }) firstTokenValue!: number
@@ -258,7 +260,6 @@ export default class CreatePair extends Mixins(TranslationMixin, LoadingMixin) {
 
 <style lang="scss" scoped>
 .container {
-  @include container-styles;
   .card--first-liquidity {
     margin-top: $inner-spacing-medium;
     font-feature-settings: $s-font-feature-settings-common;

src/views/Exchange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="exchange-container">
+  <div class="container" v-loading="parentLoading">
     <s-tabs class="s-tabs--exchange" type="rounded" :value="router.currentRoute.name" @click="handleTabClick">
       <s-tab
         v-for="tab in ExchangeTabs"
@@ -13,17 +13,19 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
-import router, { lazyComponent } from '@/router'
-import { ExchangeTabs, PageNames } from '@/consts'
+import router from '@/router'
+import { ExchangeTabs } from '@/consts'
 
 @Component
 export default class Exchange extends Mixins(TranslationMixin) {
   readonly ExchangeTabs = ExchangeTabs
   readonly router = router
 
+  @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
+
   handleTabClick ({ name }): void {
     if (router.currentRoute.name === name) {
       return
@@ -39,7 +41,7 @@ $tabs-container-height: $basic-spacing * 4;
 $tabs-container-padding: 2px;
 $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
 
-.exchange-container {
+.container {
   .s-tabs.s-tabs--exchange {
     &#{$tabs-class} {
       #{$tabs-class}__header {
@@ -85,8 +87,7 @@ $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
 </style>
 
 <style lang="scss" scoped>
-.exchange-container {
-  @include container-styles;
+.container {
   .s-tabs {
     width: 100%;
   }

src/views/RemoveLiquidity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-loading="loading">
+  <div class="container" v-loading="loading || parentLoading">
     <generic-header :title="t('removeLiquidity.title')" :tooltip="t('removeLiquidity.description')" />
     <s-form
       class="el-form--actions"
@@ -154,7 +154,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
@@ -180,6 +180,8 @@ const namespace = 'removeLiquidity'
   }
 })
 export default class RemoveLiquidity extends Mixins(TranslationMixin, LoadingMixin) {
+  @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
+
   @Getter('liquidity', { namespace }) liquidity!: any
   @Getter('firstToken', { namespace }) firstToken!: any
   @Getter('secondToken', { namespace }) secondToken!: any
@@ -306,10 +308,6 @@ export default class RemoveLiquidity extends Mixins(TranslationMixin, LoadingMix
 </script>
 
 <style lang="scss" scoped>
-.container {
-  @include container-styles;
-}
-
 .icon-divider {
   padding: $inner-spacing-medium;
 }

src/views/Wallet.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="wallet-container s-flex">
-    <sora-neo-wallet @close="handleClose" @swap="handleSwap" />
-  </div>
+  <sora-neo-wallet
+    class="container"
+    v-loading="parentLoading"
+    @close="handleClose"
+    @swap="handleSwap"
+  />
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action } from 'vuex-class'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
@@ -15,6 +18,8 @@ import { isWalletConnected } from '@/utils'
 
 @Component
 export default class Wallet extends Mixins(TranslationMixin) {
+  @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
+
   @Action setTokenFrom
   @Action setTokenTo
 
@@ -29,10 +34,3 @@ export default class Wallet extends Mixins(TranslationMixin) {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.wallet-container {
-  justify-content: center;
-  margin-top: $inner-spacing-big;
-}
-</style>