update widgets rendering flow

src/App.vue

@@ -103,7 +103,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.router.loading pageLoading!: 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/pages/Swap/Widget/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-  <price-chart-widget :base-asset="tokenFrom" :quote-asset="tokenTo" :is-available="isAvailable" />
+  <price-chart-widget v-bind="$attrs" :base-asset="tokenFrom" :quote-asset="tokenTo" :is-available="isAvailable" />
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <base-widget :title="t('swap.route')">
+  <base-widget v-bind="$attrs" :title="t('swap.route')">
     <ul class="distribution">
       <li v-for="{ input, output, amount, sources } in swapPaths" :key="input.address" class="distribution-step">
         <div class="distribution-asset">

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

@@ -1,11 +1,5 @@
 <template>
-  <base-widget
-    class="swap-widget"
-    :title="t('exchange.Swap')"
-    primary-title
-    v-loading="parentLoading"
-    v-on="$listeners"
-  >
+  <base-widget class="swap-widget" :title="t('exchange.Swap')" v-loading="parentLoading" v-bind="$attrs">
     <template #filters>
       <swap-status-action-badge>
         <template #label>{{ t('marketText') }}:</template>
@@ -14,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">
@@ -190,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,
   },
 })
@@ -210,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;
@@ -567,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/pages/Swap/Widget/Transactions.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-widget extensive :title="tc('transactionText', 2)" class="swap-transactions-widget">
+  <base-widget v-bind="$attrs" :title="tc('transactionText', 2)" class="swap-transactions-widget">
     <s-table
       ref="table"
       v-loading="loadingState"

src/components/shared/Widget/Base.vue

@@ -41,13 +41,33 @@ import { debouncedInputHandler } from '@/utils';
 
 @Component
 export default class BaseWidget extends Vue {
+  /**
+   * The widget title text
+   */
   @Prop({ default: '', type: String }) readonly title!: string;
+  /**
+   * The widget title tooltip text
+   */
   @Prop({ default: '', type: String }) readonly tooltip!: string;
+  /**
+   * The widget stretches to fit its parent
+   */
   @Prop({ default: false, type: Boolean }) readonly full!: boolean;
+  /**
+   * The widget has a delimeter line between header and content
+   */
   @Prop({ default: false, type: Boolean }) readonly delimeter!: boolean;
+  /**
+   * The widget content has a full width
+   */
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
+  /**
+   * The widget title has a large font-size
+   */
   @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
 
+  @Prop({ default: () => {}, type: Function }) readonly onResize!: (rect: DOMRect) => void;
+
   @Ref('container') readonly container!: Vue;
   @Ref('content') readonly content!: HTMLDivElement;
 
@@ -78,8 +98,7 @@ export default class BaseWidget extends Vue {
 
   onContentResize(): void {
     const el = this.container.$el;
-    const { clientHeight: height, clientWidth: width } = el;
-    this.$emit('resize', { height, width });
+    this.onResize(el.getBoundingClientRect());
   }
 }
 </script>

src/components/shared/Widget/Grid/Grid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="gridWrapper" class="grid-wrapper">
+  <div class="grid-wrapper">
     <grid-layout
       :layout.sync="layout"
       :responsive-layouts="responsiveLayouts"
@@ -28,14 +28,13 @@
         :min-w="item.minW"
         class="grid-item"
       >
-        <template v-if="ready">
-          <slot
-            v-bind="{
-              id: item.i,
-              resize: ($event) => onWidgetResize($event, item.i),
-            }"
-          />
-        </template>
+        <slot
+          v-if="ready"
+          :name="item.i"
+          v-bind="{
+            onResize: ($event) => onWidgetResize($event, item.i),
+          }"
+        />
       </grid-item>
     </grid-layout>
   </div>
@@ -82,8 +81,6 @@ export default class WidgetsGrid extends Vue {
   @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfig;
   @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfig;
 
-  @Ref('gridWrapper') readonly gridWrapper!: HTMLDivElement;
-
   ready = false;
   onReady = debounce(this.setReady);
   breakpoint: BreakpointKey = BreakpointKey.lg;

src/store/settings/getters.ts

@@ -52,14 +52,6 @@ const getters = defineGetters<SettingsState>()({
     const { state, getters } = settingsGetterContext(args);
     return !!getters.x1ApiKey && !!state.featureFlags.x1ex;
   },
-  chartsFlagEnabled(...args): boolean {
-    const { state } = settingsGetterContext(args);
-    return !!state.featureFlags.charts;
-  },
-  chartsEnabled(...args): boolean {
-    const { state } = settingsGetterContext(args);
-    return !!state.featureFlags.charts && state.chartsEnabled;
-  },
   soraCardEnabled(...args): Nullable<boolean> {
     const { state } = settingsGetterContext(args);
     return state.featureFlags.soraCard;

src/store/settings/mutations.ts

@@ -53,10 +53,6 @@ const mutations = defineMutations<SettingsState>()({
     state.marketAlgorithm = value;
     storage.set('marketAlgorithm', value);
   },
-  setChartsEnabled(state, value: boolean): void {
-    state.chartsEnabled = value;
-    storage.set('сhartsEnabled', value); // TODO: replace Cyrillic character
-  },
   setTransactionDeadline(state, value: number): void {
     state.transactionDeadline = value;
     storage.set('transactionDeadline', value);

src/store/settings/state.ts

@@ -9,13 +9,11 @@ function initialState(): SettingsState {
   const node = settingsStorage.get('node');
   const customNodes = settingsStorage.get('customNodes');
   const disclaimerApprove = settingsStorage.get('disclaimerApprove');
-  const chartsEnabled = storage.get('сhartsEnabled');
   const isBrowserNotificationApiAvailable = 'Notification' in window;
   return {
     featureFlags: {},
     slippageTolerance: storage.get('slippageTolerance') || DefaultSlippageTolerance,
     marketAlgorithm: (storage.get('marketAlgorithm') || DefaultMarketAlgorithm) as MarketAlgorithms,
-    chartsEnabled: chartsEnabled ? Boolean(JSON.parse(chartsEnabled)) : true,
     userDisclaimerApprove: disclaimerApprove ? JSON.parse(disclaimerApprove) : false,
     transactionDeadline: Number(storage.get('transactionDeadline')) || 20,
     isBrowserNotificationApiAvailable,

src/store/settings/types.ts

@@ -23,7 +23,6 @@ export type SettingsState = {
   featureFlags: FeatureFlags;
   slippageTolerance: string;
   marketAlgorithm: MarketAlgorithms;
-  chartsEnabled: boolean;
   userDisclaimerApprove: boolean;
   transactionDeadline: number;
   node: Partial<Node>;

src/views/Swap.vue

@@ -19,19 +19,23 @@
       :layouts="layouts"
       class="swap-container"
     >
-      <template v-slot="{ id, resize }">
-        <template v-if="id === SwapWidgets.Form">
-          <swap-form-widget :parent-loading="parentLoading" @resize="resize" />
-        </template>
-        <template v-else-if="id === SwapWidgets.Chart">
-          <swap-chart-widget full :parent-loading="parentLoading" v-if="chartsEnabled" />
-        </template>
-        <template v-else-if="id === SwapWidgets.Distribution">
-          <swap-distribution-widget :parent-loading="parentLoading" @resize="resize" />
-        </template>
-        <template v-else-if="id === SwapWidgets.Transactions">
-          <swap-transactions-widget full :parent-loading="parentLoading" />
-        </template>
+      <template v-slot:[SwapWidgets.Form]="props">
+        <swap-form-widget :id="SwapWidgets.Form" v-bind="props" primary-title :parent-loading="parentLoading" />
+      </template>
+      <template v-slot:[SwapWidgets.Chart]="props">
+        <swap-chart-widget :id="SwapWidgets.Chart" v-bind="props" full :parent-loading="parentLoading" />
+      </template>
+      <template v-slot:[SwapWidgets.Distribution]="props">
+        <swap-distribution-widget :id="SwapWidgets.Distribution" v-bind="props" :parent-loading="parentLoading" />
+      </template>
+      <template v-slot:[SwapWidgets.Transactions]="props">
+        <swap-transactions-widget
+          :id="SwapWidgets.Transactions"
+          v-bind="props"
+          full
+          extensive
+          :parent-loading="parentLoading"
+        />
       </template>
     </widgets-grid>
   </div>
@@ -99,7 +103,6 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   @state.swap.isAvailable isAvailable!: boolean;
   @state.router.prev private prevRoute!: Nullable<PageNames>;
 
-  @getter.settings.chartsEnabled chartsEnabled!: boolean;
   @getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
   @getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
 
@@ -153,3 +156,12 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.swap-container {
+  #form,
+  #chart {
+    min-height: 502px;
+  }
+}
+</style>