soramitsu
diff --git a/‎package.json
Lines changed: 2 additions & 2 deletions b/‎package.json
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/components/App/Menu/AppMenu.vue
Lines changed: 3 additions & 24 deletions b/‎src/components/App/Menu/AppMenu.vue
Lines changed: 3 additions & 24 deletions
diff --git a/‎src/components/App/Menu/SidebarItemContent.vue
Lines changed: 2 additions & 21 deletions b/‎src/components/App/Menu/SidebarItemContent.vue
Lines changed: 2 additions & 21 deletions
diff --git a/‎src/components/App/Menu/SoraCardIcon.vue
Lines changed: 0 additions & 16 deletions b/‎src/components/App/Menu/SoraCardIcon.vue
Lines changed: 0 additions & 16 deletions
diff --git a/‎src/components/pages/SoraCard/Dashboard/Dashboard.vue
Lines changed: 70 additions & 7 deletions b/‎src/components/pages/SoraCard/Dashboard/Dashboard.vue
Lines changed: 70 additions & 7 deletions
diff --git a/‎src/components/pages/SoraCard/common/BalanceIndicator.vue
Lines changed: 10 additions & 10 deletions b/‎src/components/pages/SoraCard/common/BalanceIndicator.vue
Lines changed: 10 additions & 10 deletions
@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.23.2",
+  "version": "1.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.23.3",
+    "@soramitsu/soraneo-wallet-web": "1.23.4",
     "@walletconnect/web3-provider": "^1.8.0",
     "core-js": "^3.26.0",
     "country-code-emoji": "^2.3.0",
 
@@ -248,34 +248,13 @@ export default class AppMenu extends Mixins(TranslationMixin) {
       background-color: unset !important;
     }
   }
-}
-
-// TODO: [TECH] move from fonts provided values
-.sora-card-sidebar-icon {
-  path {
-    fill: var(--s-color-base-content-tertiary) !important;
-  }
-}
 
-.el-menu-item:not(.is-active):not(.is-disabled) {
-  .sidebar-item-content {
-    &:hover .sora-card-sidebar-icon path {
-      fill: var(--s-color-base-content-secondary) !important;
+  .el-menu-item {
+    i.el-icon-bank-card {
+      width: 28px;
     }
   }
 }
-
-.el-menu-item.is-disabled {
-  &:hover path {
-    fill: var(--s-color-base-content-tertiary) !important;
-  }
-}
-
-.is-active .sora-card-sidebar-icon {
-  path {
-    fill: var(--s-color-theme-accent) !important;
-  }
-}
 </style>
 
 <style lang="scss" scoped>
 
@@ -1,10 +1,6 @@
 <template>
   <component :is="tag" :class="classes" :tabindex="tabindex">
-    <!-- TODO: [TECH] move from fonts provided values -->
-    <div v-if="icon === 'sora-card'" class="icon-container">
-      <sora-card-icon class="sora-card-sidebar-icon" />
-    </div>
-    <div v-else-if="icon" class="icon-container">
+    <div if="icon" class="icon-container">
       <s-icon :name="icon" size="28" />
     </div>
     <span>{{ title }}</span>
@@ -16,13 +12,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
-import SoraCardIcon from './SoraCardIcon.vue';
-
-@Component({
-  components: {
-    SoraCardIcon,
-  },
-})
+@Component
 export default class AppSidebarItemContent extends Mixins(TranslationMixin) {
   @Prop({ default: '', type: String }) readonly icon!: string;
   @Prop({ default: '', type: String }) readonly title!: string;
@@ -93,13 +83,4 @@ $icon-size: 42px;
     box-shadow: none;
   }
 }
-.sora-card-sidebar-icon {
-  display: block;
-  margin: auto;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.el-menu-item:not(.is-active):not(.is-disabled):focus .sora-card-sidebar-icon path {
-  fill: var(--s-color-base-content-secondary) !important; // focus state of sora card item
-}
 </style>
@@ -9,7 +9,17 @@
         draggable="false"
         class="unselectable sora-card-hub-image"
       />
-      <formatted-amount class="sora-card-hub-balance" :value="balance" fiatSign="€" value-can-be-hidden is-fiat-value />
+      <formatted-amount
+        v-if="userInfo.iban"
+        class="sora-card-hub-balance"
+        :value="balance"
+        fiatSign="€"
+        value-can-be-hidden
+        is-fiat-value
+      />
+      <p class="sora-card-hub-management-coming">
+        {{ t('card.cardHub.comingSoon') }}
+      </p>
       <div class="sora-card-hub-options">
         <s-button
           v-for="option in options"
@@ -31,6 +41,10 @@
         <s-input :placeholder="t('card.cardHub.ibanLabel')" :value="iban" readonly />
         <s-icon name="basic-copy-24" @click.native="handleCopyIban" />
       </div>
+      <div v-else class="sora-card-hub-info-iban-missing">
+        <p class="label">{{ t('card.cardHub.ibanLabel') }}</p>
+        <p v-html="t('card.ibanPendingDesc', { email: emailLink })" />
+      </div>
       <div class="sora-card-hub-logout" @click="logoutFromSoraCard">
         <span>{{ t('card.cardHub.logout') }}</span>
         <s-icon name="arrows-chevron-right-rounded-24" size="18" />
@@ -74,6 +88,12 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
   @state.soraCard.userInfo userInfo!: UserInfo;
   @state.wallet.settings.shouldBalanceBeHidden private shouldBalanceBeHidden!: boolean;
 
+  email = '[email protected]';
+
+  get emailLink(): string {
+    return `<a href='mailto: ${this.email} rel="nofollow noopener"'>${this.email}</a>`;
+  }
+
   options: Array<Options> = [
     { icon: OptionsIcon.TopUp, type: Option.TopUp },
     { icon: OptionsIcon.Transfer, type: Option.Transfer },
@@ -88,9 +108,9 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
   get balance(): string {
     const balance = this.userInfo.availableBalance;
 
-    if (balance === 0) return '0';
+    if (!balance) return '0';
 
-    return balance ? `${balance / 100}` : '';
+    return `${balance / 100}`;
   }
 
   handleClick(type: Option): void {}
@@ -114,6 +134,7 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
 .sora-card {
   &-hub {
     &-balance {
+      margin-bottom: $basic-spacing;
       .formatted-amount {
         font-size: 28px;
         letter-spacing: -0.56px;
@@ -167,28 +188,60 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
         margin-right: $inner-spacing-mini;
       }
     }
+
+    &-management-coming {
+      text-align: center;
+      color: var(--s-color-base-content-secondary);
+      font-size: var(--s-font-size-medium);
+      margin-bottom: $basic-spacing-mini;
+      font-weight: 500;
+    }
+
     &-logout {
       margin-top: $inner-spacing-mini;
       display: flex;
       align-items: center;
       justify-content: space-between;
       background: var(--s-color-utility-body);
-      font-size: var(--s-font-size-big);
+      font-size: var(--s-font-size-medium);
       font-weight: 500;
       border-radius: var(--s-border-radius-small);
       padding: 18px $basic-spacing;
       color: var(--s-color-theme-accent-hover);
 
-      i {
-        color: var(--s-color-base-content-tertiary);
-      }
       &:hover {
         cursor: pointer;
       }
+
       &:hover i {
         color: var(--s-color-base-content-secondary);
       }
     }
+
+    &-info {
+      &-iban-missing {
+        margin-top: $inner-spacing-mini;
+        background: var(--s-color-utility-body);
+        font-size: var(--s-font-size-medium);
+        font-weight: 400;
+        border-radius: var(--s-border-radius-small);
+        padding: 18px $basic-spacing;
+        line-height: 140%;
+
+        .label {
+          color: var(--s-color-base-content-secondary);
+          margin-bottom: 5px;
+        }
+
+        &:hover i {
+          color: var(--s-color-base-content-secondary);
+        }
+      }
+
+      i {
+        color: var(--s-color-base-content-tertiary);
+      }
+    }
   }
 
   &-hub-info {
@@ -215,3 +268,13 @@ export default class Dashboard extends Mixins(mixins.LoadingMixin, TranslationMi
   }
 }
 </style>
+
+<style lang="scss">
+.sora-card-hub-info-iban-missing {
+  a {
+    color: var(--s-color-base-content-primary);
+
+    @include focus-outline;
+  }
+}
+</style>
@@ -25,14 +25,12 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { state } from '@/store/decorators';
 import { delay } from '@/utils';
 
-const hundred = 100;
-
 @Component
 export default class BalanceIndicator extends Mixins(TranslationMixin, mixins.LoadingMixin) {
   @state.soraCard.xorToDeposit private xorToDeposit!: FPNumber;
   @state.soraCard.euroBalance private euroBalance!: string;
 
-  @Ref('progress') private readonly progressBar!: HTMLInputElement;
+  @Ref('progress') private readonly progressBar!: Nullable<HTMLInputElement>;
 
   @Watch('euroBalance')
   private handleEuroBalanceChange() {
@@ -47,17 +45,19 @@ export default class BalanceIndicator extends Mixins(TranslationMixin, mixins.Lo
   }
 
   async runProgressBarAnimation(): Promise<void> {
-    if (this.progressBar) {
-      const balanceInteger = Math.round(Number(this.euroBalance));
-      for (let i = 0; i < balanceInteger; i = i + 0.12) {
-        await delay(1);
-        this.progressBar.style.setProperty('width', `${i}%`);
-      }
+    if (!this.progressBar) return;
+
+    const balanceInteger = Math.round(Number(this.euroBalance));
+    for (let i = 0; i < balanceInteger; i = i + 0.12) {
+      await delay(1);
+      this.progressBar?.style?.setProperty?.('width', `${i}%`);
     }
   }
 
   mounted(): void {
-    setTimeout(this.runProgressBarAnimation, 2500);
+    this.$nextTick().then(() => {
+      setTimeout(this.runProgressBarAnimation, 2_500);
+    });
   }
 }
 </script>