Add ability to hide swap widgets (#1374)

* add ability to hide swap widgets

* add WidgetsVisibilityModel

* Collapsed menu background overlaps neighbor fix

* align chart header with swap widget

* update customise widget

* update translations

* style fixes

---------

Co-authored-by: shlavik <shlavik@gmail.com>

src/App.vue

@@ -106,7 +106,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.router.loading pageLoading!: boolean;
 
   @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
-  @getter.settings.chartsEnabled private chartsEnabled!: boolean;
   @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;
   @getter.libraryTheme libraryTheme!: Theme;

src/components/App/Footer/StatisticsDialog.vue

@@ -13,12 +13,12 @@
 import { components, mixins, WALLET_CONSTS, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
-import { getIndexerName } from '@/components/App/Footer/Indexer/utils';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components } from '@/consts';
 import { lazyComponent } from '@/router';
 import { action, state, mutation } from '@/store/decorators';
 import { Indexer } from '@/types/indexers';
+import { capitalize } from '@/utils';
 
 const IndexerListView = 'IndexerListView';
 const IndexerInfoView = 'IndexerInfoView';
@@ -47,7 +47,7 @@ export default class SelectIndexerDialog extends Mixins(TranslationMixin, mixins
     return Object.keys(WALLET_CONSTS.IndexerType).map((key) => {
       const type = WALLET_CONSTS.IndexerType[key];
       return {
-        name: getIndexerName(type),
+        name: capitalize(type),
         type,
         endpoint: this.indexersData[type].endpoint,
         online: this.indexersData[type].status === WALLET_TYPES.ConnectionStatus.Available,

src/components/App/Menu/AppMenu.vue

@@ -201,9 +201,13 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   @include scrollbar(0, 100%, true);
 }
 
+.app-menu {
+  background: var(--s-color-utility-body);
+}
+
 .app-menu.collapsed {
   @include tablet {
-    background: var(--s-color-utility-body);
+    background: transparent;
 
     .sidebar-item-content {
       & > .icon-container + span {
@@ -217,6 +221,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
 
     &:hover,
     &:focus {
+      background: var(--s-color-utility-body);
       box-shadow: 20px 20px 60px 0px #0000001a;
 
       .sidebar-item-content {

src/components/mixins/ChartSpecMixin.ts

@@ -4,6 +4,7 @@ import { Component, Mixins } from 'vue-property-decorator';
 
 import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { capitalize } from '@/utils';
 
 const LABEL_PADDING = 4;
 const AXIS_OFFSET = 8;
@@ -42,7 +43,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
           const formatted = this.formatDate(+value, timeFormat);
 
           if (isNewMonth) {
-            return `{monthStyle|${formatted.charAt(0).toUpperCase() + formatted.slice(1)}}`;
+            return `{monthStyle|${capitalize(formatted)}}`;
           }
           if (isNewDay) {
             return `{dateStyle|${formatted}}`;

src/components/pages/Swap/StatusActionBadge.vue

@@ -15,7 +15,7 @@ export default class SwapStatusActionBadge extends Vue {}
 
 <style lang="scss">
 .status-action-badge.s-card.neumorphic.s-size-small {
-  padding: $inner-spacing-tiny $inner-spacing-big * 2 $inner-spacing-tiny $inner-spacing-small;
+  padding: $inner-spacing-tiny * 1.75 $inner-spacing-big * 2 $inner-spacing-tiny * 1.75 $inner-spacing-small;
 }
 </style>
 

src/components/pages/Swap/Widget/Form.vue

@@ -8,15 +8,6 @@
           <s-button class="el-button--settings" type="action" icon="basic-settings-24" @click="openSettingsDialog" />
         </template>
       </swap-status-action-badge>
-
-      <svg-icon-button
-        v-if="chartsFlagEnabled"
-        icon="line-icon"
-        size="medium"
-        :tooltip="t('dexSettings.сhartsDescription')"
-        :active="chartsEnabled"
-        @click="toggleChart"
-      />
     </template>
 
     <div class="swap-form">
@@ -184,7 +175,6 @@ import type { Subscription } from 'rxjs';
     SelectToken: lazyComponent(Components.SelectToken),
     TokenInput: lazyComponent(Components.TokenInput),
     ValueStatusWrapper: lazyComponent(Components.ValueStatusWrapper),
-    SvgIconButton: lazyComponent(Components.SvgIconButton),
     FormattedAmount: components.FormattedAmount,
   },
 })
@@ -204,15 +194,12 @@ export default class SwapFormWidget extends Mixins(
 
   @getter.assets.xor private xor!: AccountAsset;
   @getter.swap.swapLiquiditySource liquiditySource!: Nullable<LiquiditySourceTypes>;
-  @getter.settings.chartsFlagEnabled chartsFlagEnabled!: boolean;
   @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
-  @getter.settings.chartsEnabled chartsEnabled!: boolean;
   @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
   @getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
   @getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
   @getter.swap.swapMarketAlgorithm swapMarketAlgorithm!: MarketAlgorithms;
 
-  @mutation.settings.setChartsEnabled private setChartsEnabled!: (value: boolean) => void;
   @mutation.swap.setFromValue private setFromValue!: (value: string) => void;
   @mutation.swap.setToValue private setToValue!: (value: string) => void;
   @mutation.swap.setAmountWithoutImpact private setAmountWithoutImpact!: (amount?: CodecString) => void;
@@ -561,10 +548,6 @@ export default class SwapFormWidget extends Mixins(
     this.showSettings = true;
   }
 
-  toggleChart(): void {
-    this.setChartsEnabled(!this.chartsEnabled);
-  }
-
   private enableSwapSubscriptions(): void {
     this.updateBalanceSubscriptions();
     this.subscribeOnQuote();

src/components/shared/Settings/SlippageTolerance.vue

@@ -221,6 +221,7 @@ export default class SlippageTolerance extends Mixins(mixins.NumberFormatterMixi
 
   .el-collapse-item__content {
     padding: 0 !important;
+    line-height: inherit;
   }
 
   .el-collapse--item .is-active .el-collapse {

src/components/shared/TokensRow.vue

@@ -46,13 +46,17 @@ export default class TokensRow extends Vue {
 
   &__item {
     display: block;
-    border-width: 2px;
     border-style: solid;
     border-color: transparent;
     border-radius: 50%;
+    border-width: 0px;
 
     &.border {
       border-color: var(--s-color-utility-surface);
+
+      & + & {
+        border-left-width: 2px;
+      }
     }
 
     & + & {

src/components/shared/Widget/Base.vue

@@ -4,7 +4,7 @@
       <div class="base-widget-block base-widget-header">
         <div :class="['base-widget-block', 'base-widget-title', { primary: primaryTitle }]">
           <slot name="title">
-            <span v-if="title">{{ title }}</span>
+            <span v-if="title">{{ capitalize(title) }}</span>
             <s-tooltip v-if="tooltip" border-radius="mini" :content="tooltip">
               <s-icon name="info-16" size="14px" />
             </s-tooltip>
@@ -30,6 +30,8 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import { capitalize } from '@/utils';
+
 @Component
 export default class BaseWidget extends Vue {
   @Prop({ default: '', type: String }) readonly title!: string;
@@ -38,6 +40,8 @@ export default class BaseWidget extends Vue {
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
   @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
 
+  public capitalize = capitalize;
+
   get hasHeader(): boolean {
     return !!this.title || !!this.$slots.title;
   }
@@ -97,7 +101,8 @@ $left: $inner-spacing-medium;
     font-size: var(--s-font-size-medium);
     font-weight: 500;
     line-height: var(--s-line-height-medium);
-    text-transform: capitalize;
+
+    min-height: var(--s-size-small);
 
     &.primary {
       font-size: var(--s-font-size-large);

src/components/shared/Widget/Customise.vue

@@ -0,0 +1,122 @@
+<template>
+  <base-widget
+    v-bind="$attrs"
+    :title="t('customisePageText')"
+    class="customise-widget"
+    @click.native.stop="toggleVisibility"
+  >
+    <template #filters>
+      <el-popover popper-class="customise-widget-popper" trigger="click" v-model="visible" :visible-arrow="false">
+        <template #reference>
+          <s-button id="customise-button" type="action" alternative size="small" icon="basic-settings-24" />
+        </template>
+
+        <div class="customise">
+          <div class="customise-title">{{ t('customisePageText') }}</div>
+
+          <div v-for="(model, name) in models" :key="name" class="customise-options">
+            <s-divider />
+            <label v-for="(value, key) in model" :key="key" class="customise-option">
+              <s-switch :value="value" @input="toggle(name, model, key, $event)" />
+              <span>{{ getLabel(key, name) }}</span>
+            </label>
+          </div>
+
+          <slot />
+        </div>
+      </el-popover>
+    </template>
+  </base-widget>
+</template>
+
+<script lang="ts">
+import isEmpty from 'lodash/fp/isEmpty';
+import { Component, Mixins, ModelSync, PropSync, Prop } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components, ObjectInit } from '@/consts';
+import { lazyComponent } from '@/router';
+import type { WidgetsVisibilityModel } from '@/types/layout';
+import { capitalize } from '@/utils';
+
+@Component({
+  components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
+  },
+})
+export default class CustomiseWidget extends Mixins(TranslationMixin) {
+  @PropSync('widgetsModel', { default: ObjectInit, type: Object }) readonly widgets!: WidgetsVisibilityModel;
+  @PropSync('optionsModel', { default: ObjectInit, type: Object }) readonly options!: WidgetsVisibilityModel;
+  @Prop({ default: ObjectInit, type: Object }) readonly labels!: Record<string, string>;
+
+  @ModelSync('value', 'input', { type: Boolean }) visible!: boolean;
+
+  get models(): Record<string, WidgetsVisibilityModel> {
+    const { widgets, options } = this;
+    return Object.entries({ widgets, options }).reduce((acc, [name, model]) => {
+      if (isEmpty(model)) return acc;
+      return { ...acc, [name]: model };
+    }, {});
+  }
+
+  toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean): void {
+    this[name] = { ...model, [key]: value };
+  }
+
+  getLabel(key: string, name: string): string {
+    const label = key in this.labels ? this.labels[key] : this.t(`${name}.${key}`);
+
+    return capitalize(label);
+  }
+
+  toggleVisibility(event: PointerEvent): void {
+    const target = event.target as HTMLElement;
+    if (target.closest('#customise-button')) return;
+
+    this.visible = !this.visible;
+  }
+}
+</script>
+
+<style lang="scss">
+.customise-widget-popper.el-popover.el-popper {
+  @include popper-content;
+}
+</style>
+
+<style lang="scss" scoped>
+.customise-widget {
+  cursor: pointer;
+
+  &-icon {
+    @include icon-styles(true);
+  }
+}
+
+.customise {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: $inner-spacing-medium;
+
+  @include vertical-divider('el-divider', 0);
+
+  &-title {
+    font-size: var(--s-font-size-small);
+    font-weight: 500;
+  }
+
+  &-options {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: $inner-spacing-medium;
+  }
+
+  &-option {
+    cursor: pointer;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: $inner-spacing-small;
+    text-transform: capitalize;
+  }
+}
+</style>

src/components/shared/Widget/PriceChart.vue

@@ -9,6 +9,7 @@
       <s-button
         v-if="isTokensPair && !isOrderBook"
         :class="{ 's-pressed': isReversedChart }"
+        size="small"
         type="action"
         alternative
         icon="arrows-swap-90-24"
@@ -451,7 +452,7 @@ export default class PriceChartWidget extends Mixins(
 
   get chartSpec() {
     // [TODO]: until we haven't two tokens volume
-    const withVolume = this.isOrderBook || (!!this.tokenA && !this.tokenB);
+    const withVolume = this.entities.length === 1;
 
     const priceGrid = this.gridSpec({
       top: 20,

src/consts/index.ts

@@ -254,6 +254,7 @@ export enum Components {
   BaseWidget = 'shared/Widget/Base',
   IFrameWidget = 'shared/Widget/IFrame',
   PriceChartWidget = 'shared/Widget/PriceChart',
+  CustomiseWidget = 'shared/Widget/Customise',
   // Shared Buttons
   SortButton = 'shared/Button/SortButton',
   SvgIconButton = 'shared/Button/SvgIconButton/SvgIconButton',

src/lang/cs.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Cena za 1 {token}"
     },
-    "calculatingText": "Vypočítávání"
+    "calculatingText": "Vypočítávání",
+    "customisePageText": "Přizpůsobit stránku",
+    "priceChartText": "Cenový graf"
 }

src/lang/de.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Preis pro 1 {token}"
     },
-    "calculatingText": "Berechnung"
+    "calculatingText": "Berechnung",
+    "customisePageText": "Seite anpassen",
+    "priceChartText": "Preisdiagramm"
 }

src/lang/en.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Price per 1 {token}"
     },
-    "calculatingText": "Calculating"
+    "calculatingText": "Calculating",
+    "customisePageText": "Customize page",
+    "priceChartText": "Price chart"
 }

src/lang/es.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Precio por 1 {token}"
     },
-    "calculatingText": "Calculando"
+    "calculatingText": "Calculando",
+    "customisePageText": "Personalizar página",
+    "priceChartText": "Gráfico de precios"
 }

src/lang/fr.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Prix par 1 {token}"
     },
-    "calculatingText": "Calculant"
+    "calculatingText": "Calculant",
+    "customisePageText": "Personnaliser la page",
+    "priceChartText": "Tableau des prix"
 }