make proof of concept

sora-xor · Apr 26, 2024 · a4a1807 · a4a1807
1 parent 19cf779
commit a4a1807
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 35 deletions.
diff --git a/src/components/App/Header/AppHeaderMenu.vue b/src/components/App/Header/AppHeaderMenu.vue
@@ -27,10 +27,7 @@
           >
             {{ text }}
           </s-dropdown-item>
-          <div @click="openNotificationDialog" class="notif-option el-dropdown-menu__item header-menu__item">
-            <bell-icon class="notif-option__bell notif-option__bell--dropdown" />
-            <span class="notif-option__text">{{ t('browserNotificationDialog.title') }}</span>
-          </div>
+          <currency-option />
         </template>
       </s-dropdown>
     </s-button>
@@ -46,6 +43,7 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { getter, mutation, state } from '@/store/decorators';
 
 import BellIcon from './BellIcon.vue';
+import CurrencyOption from './MenuOptions/Currency.vue';
 
 enum HeaderMenuType {
   HideBalances = 'hide-balances',
@@ -68,6 +66,7 @@ const BREAKPOINT = 1440;
 @Component({
   components: {
     BellIcon,
+    CurrencyOption,
   },
 })
 export default class AppHeaderMenu extends Mixins(TranslationMixin) {
@@ -84,7 +83,6 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
   @mutation.wallet.settings.toggleHideBalance private toggleHideBalance!: FnWithoutArgs;
   @mutation.settings.setAlertSettingsPopup private setAlertSettingsPopup!: (flag: boolean) => void;
   @mutation.settings.setSelectLanguageDialogVisibility private setLanguageDialogVisibility!: (flag: boolean) => void;
-  @mutation.settings.setSelectCurrencyDialogVisibility private setCurrencyDialogVisibility!: (flag: boolean) => void;
   @mutation.settings.toggleDisclaimerDialogVisibility private toggleDisclaimerDialogVisibility!: FnWithoutArgs;
 
   get mediaQueryList(): MediaQueryList {
@@ -141,12 +139,17 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
         icon: 'basic-globe-24',
         text: this.t('headerMenu.switchLanguage'),
       },
+
       {
         value: HeaderMenuType.Currency,
         icon: 'el-icon-money',
-        text: 'Select currency',
+        text: 'Select currency Bs.F.',
+      },
+      {
+        value: HeaderMenuType.Notification,
+        icon: 'info-16',
+        text: this.t('browserNotificationDialog.title'),
       },
-      // TODO: add notification here
       {
         value: HeaderMenuType.Disclaimer,
         icon: 'info-16',
@@ -168,10 +171,6 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
     return this.disclaimerVisibility && !this.userDisclaimerApprove;
   }
 
-  openNotificationDialog(): void {
-    this.setAlertSettingsPopup(true);
-  }
-
   handleClickHeaderMenu(): void {
     const dropdown = (this.$refs.headerMenu as any).dropdown;
     dropdown.visible ? dropdown.hide() : dropdown.show();
@@ -188,8 +187,8 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
       case HeaderMenuType.Language:
         this.setLanguageDialogVisibility(true);
         break;
-      case HeaderMenuType.Currency:
-        this.setCurrencyDialogVisibility(true);
+      case HeaderMenuType.Notification:
+        this.setAlertSettingsPopup(true);
         break;
       case HeaderMenuType.Disclaimer:
         if (this.disclaimerDisabled) return;
@@ -248,28 +247,6 @@ $icon-size: 28px;
   }
 }
 
-.notif-option {
-  display: flex;
-
-  &__bell {
-    width: $icon-size;
-    height: $icon-size;
-    margin: auto 0;
-    fill: var(--s-color-base-content-tertiary);
-
-    &--dropdown {
-      margin-top: $inner-spacing-mini;
-      margin-right: $basic-spacing-mini;
-    }
-  }
-
-  &:hover {
-    .notif-option__bell {
-      fill: var(--s-color-base-content-secondary);
-    }
-  }
-}
-
 .el-dropdown-menu__item.header-menu__item.is-disabled {
   pointer-events: initial;
   cursor: not-allowed;

diff --git a/src/components/App/Header/MenuOptions/Currency.vue b/src/components/App/Header/MenuOptions/Currency.vue
@@ -0,0 +1,75 @@
+<template>
+  <div @click="openCurrencyDialog" class="notif-option el-dropdown-menu__item header-menu__item">
+    <div class="icon-currency-wrapper">
+      <span class="symbol">{{ symbol }}</span>
+    </div>
+    <span class="notif-option__text">{{ 'Select currency' }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import { getter, mutation, state } from '@/store/decorators';
+
+import type { Currency, CurrencyFields } from '@soramitsu/soraneo-wallet-web/lib/types/currency';
+
+@Component
+export default class CurrencyOption extends Vue {
+  @state.wallet.settings.currency currency!: Currency;
+  @state.wallet.settings.currencies currencies!: Array<CurrencyFields>;
+
+  @getter.wallet.settings.currencySymbol private currencySymbol!: string;
+
+  @mutation.settings.setSelectCurrencyDialogVisibility private setCurrencyDialogVisibility!: (flag: boolean) => void;
+
+  get symbol(): string | undefined {
+    return this.currencySymbol;
+  }
+
+  openCurrencyDialog(): void {
+    this.setCurrencyDialogVisibility(true);
+  }
+}
+</script>
+
+<style lang="scss">
+.icon-currency-wrapper {
+  width: 28px;
+  height: 28px;
+  background-color: var(--s-color-base-content-tertiary);
+  color: white;
+  border-radius: 50%;
+  margin-right: 4px;
+
+  .symbol {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -6px;
+    font-size: 12px;
+  }
+}
+.notif-option {
+  display: flex;
+  $icon-size: 28px;
+
+  &__bell {
+    width: $icon-size;
+    height: $icon-size;
+    margin: auto 0;
+    fill: var(--s-color-base-content-tertiary);
+
+    &--dropdown {
+      margin-top: $inner-spacing-mini;
+      margin-right: $basic-spacing-mini;
+    }
+  }
+
+  &:hover {
+    .icon-currency-wrapper {
+      background-color: var(--s-color-base-content-secondary);
+    }
+  }
+}
+</style>
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -2,6 +2,7 @@ import { FPNumber, CodecString } from '@sora-substrate/util';
 import { isNativeAsset } from '@sora-substrate/util/build/assets';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { api, WALLET_CONSTS, getExplorerLinks } from '@soramitsu/soraneo-wallet-web';
+import { Currency } from '@soramitsu/soraneo-wallet-web/lib/types/currency';
 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import debounce from 'lodash/debounce';