replace StatsCard for BaseWidget

sora-xor · Feb 29, 2024 · fda1b99 · fda1b99
1 parent 51cbc69
commit fda1b99
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 221 deletions.
diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
@@ -1,11 +1,12 @@
 <template>
   <base-widget
+    extensive
     v-loading="loading"
     class="stock-book book"
     :title="t('orderBook.orderBook')"
     :tooltip="t('orderBook.tooltip.bookWidget')"
   >
-    <template #title-append>
+    <template #filters>
       <s-dropdown
         v-if="false"
         class="stock-book__switcher"

diff --git a/src/components/pages/OrderBook/HistoryOrderWidget.vue b/src/components/pages/OrderBook/HistoryOrderWidget.vue
@@ -1,50 +1,42 @@
 <template>
-  <base-widget class="order-history-widget s-flex-column">
+  <base-widget class="order-history-widget s-flex-column" extensive delimeter>
     <template #title>
-      <div class="order-history-header">
-        <div class="order-history-header-filter-buttons">
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.open }"
-            @click="switchFilter(Filter.open)"
-          >
-            {{ openOrdersText }}
-          </span>
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.all }"
-            @click="switchFilter(Filter.all)"
-          >
-            {{ t('orderBook.history.orderHistory') }}
-          </span>
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.executed }"
-            @click="switchFilter(Filter.executed)"
-          >
-            {{ t('orderBook.history.tradeHistory') }}
-          </span>
-        </div>
-        <div v-if="isLoggedIn" class="order-history-header-cancel-buttons">
-          <span
-            class="order-history-cancel"
-            :class="{ 'order-history-cancel--inactive': isCancelMultipleInactive }"
-            @click="handleCancel(Cancel.multiple)"
-          >
-            {{ cancelText }}
-          </span>
-          <span
-            class="order-history-cancel"
-            :class="{ 'order-history-cancel--inactive': isCancelAllInactive }"
-            @click="openConfirmCancelDialog"
-          >
-            {{ cancelAllText }}
-          </span>
-        </div>
+      <div class="order-history-buttons order-history-buttons--filter-buttons">
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.open }]"
+          @click="switchFilter(Filter.open)"
+        >
+          {{ openOrdersText }}
+        </span>
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.all }]"
+          @click="switchFilter(Filter.all)"
+        >
+          {{ t('orderBook.history.orderHistory') }}
+        </span>
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.executed }]"
+          @click="switchFilter(Filter.executed)"
+        >
+          {{ t('orderBook.history.tradeHistory') }}
+        </span>
+      </div>
+      <div v-if="isLoggedIn" class="order-history-buttons order-history-buttons--cancel-buttons">
+        <span
+          :class="['order-history-button', 'order-history-button--cancel', { inactive: isCancelMultipleInactive }]"
+          @click="handleCancel(Cancel.multiple)"
+        >
+          {{ cancelText }}
+        </span>
+        <span
+          :class="['order-history-button', 'order-history-button--cancel', { inactive: isCancelAllInactive }]"
+          @click="openConfirmCancelDialog"
+        >
+          {{ cancelAllText }}
+        </span>
       </div>
     </template>
 
-    <div class="delimiter" />
     <div class="order-history-main s-flex-column" v-if="isLoggedIn">
       <open-orders v-if="currentFilter === Filter.open" :parent-loading="openOrdersLoading" />
       <all-orders v-else :filter="currentFilter" />
@@ -218,54 +210,35 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
 
 <style lang="scss" scoped>
 .order-history {
-  &-header {
+  &-buttons {
     display: flex;
-    flex: 1;
-    justify-content: space-between;
-    padding: $inner-spacing-medium 0 $inner-spacing-mini;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: flex-end;
+    gap: $inner-spacing-tiny $inner-spacing-medium;
+
     color: var(--s-color-base-content-secondary);
-    font-size: $basic-spacing;
-    font-weight: 500;
-    &-cancel-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      justify-content: flex-end;
+
+    &--cancel-buttons {
       flex: 1;
     }
-    &-filter-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      justify-content: flex-start;
-    }
   }
 
-  &-filter {
-    margin-right: $basic-spacing;
-    line-height: 1.5;
-
-    &:hover {
-      cursor: pointer;
+  &-button {
+    &--cancel {
       color: var(--s-color-theme-accent);
     }
 
-    &--active {
+    &:hover {
+      cursor: pointer;
       color: var(--s-color-theme-accent);
     }
-  }
-
-  &-cancel {
-    color: var(--s-color-theme-accent);
-    margin-left: $basic-spacing;
-    line-height: 1.5;
 
-    &:hover {
-      cursor: pointer;
+    &.active {
       color: var(--s-color-theme-accent);
     }
 
-    &--inactive {
+    &.inactive {
       opacity: 0.5;
 
       &:hover {
@@ -298,11 +271,4 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
     }
   }
 }
-
-.delimiter {
-  background: var(--s-color-base-border-secondary);
-  margin: $inner-spacing-mini 0;
-  height: 1px;
-  width: 100%;
-}
 </style>
diff --git a/src/components/pages/OrderBook/MarketTradesWidget.vue b/src/components/pages/OrderBook/MarketTradesWidget.vue
@@ -1,5 +1,6 @@
 <template>
   <base-widget
+    extensive
     class="market-trades"
     :title="t('orderBook.marketTrades')"
     :tooltip="t('orderBook.tooltip.marketWidget')"

diff --git a/src/components/pages/OrderBook/SetLimitOrderWidget.vue b/src/components/pages/OrderBook/SetLimitOrderWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget v-loading="loadingState">
+  <base-widget extensive v-loading="loadingState">
     <div class="order-book-tabs">
       <s-tabs :value="currentTab" type="card" @input="handleChangeTab">
         <s-tab

diff --git a/src/components/pages/Stats/BarChart.vue b/src/components/pages/Stats/BarChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>{{ title }}</span>
-      <s-tooltip border-radius="mini" :content="tooltip">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget :title="title" :tooltip="tooltip">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -25,7 +18,7 @@
       <price-change :value="priceChange" />
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -76,9 +69,9 @@ const normalizeTo = (sample: ChartData[], difference: number, from: number, to:
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
     TokenLogo: components.TokenLogo,

diff --git a/src/components/pages/Stats/NetworkStats.vue b/src/components/pages/Stats/NetworkStats.vue
@@ -1,7 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>{{ t('networkStatisticsText') }}</template>
-
+  <base-widget :title="t('networkStatisticsText')">
     <template #filters>
       <stats-filter :disabled="loading" :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -34,7 +32,7 @@
         </s-card>
       </div>
     </div>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -72,7 +70,7 @@ type NetworkStatsColumn = {
 @Component({
   components: {
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
+    BaseWidget: lazyComponent(Components.BaseWidget),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
   },
@@ -181,7 +179,6 @@ $gap: $inner-spacing-mini;
   display: flex;
   flex-flow: row wrap;
   gap: $gap;
-  margin-top: $inner-spacing-mini * 2.5;
 
   .stats-column {
     @include columns(2, $gap);

diff --git a/src/components/pages/Stats/SupplyChart.vue b/src/components/pages/Stats/SupplyChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>Supply</span>
-      <s-tooltip border-radius="mini" :content="t('tooltips.supply')">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget title="Supply" :tooltip="t('tooltips.supply')">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -33,7 +26,7 @@
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
     <select-token :visible.sync="showSelectTokenDialog" :asset="token" @select="changeToken" />
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -70,7 +63,7 @@ const getExtremum = (data: readonly ChartData[], prop: string, min = false) => {
   components: {
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
+    BaseWidget: lazyComponent(Components.BaseWidget),
     StatsFilter: lazyComponent(Components.StatsFilter),
     TokenSelectButton: lazyComponent(Components.TokenSelectButton),
     SelectToken: lazyComponent(Components.SelectToken),

diff --git a/src/components/pages/Stats/TvlChart.vue b/src/components/pages/Stats/TvlChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>{{ TranslationConsts.TVL }}</span>
-      <s-tooltip border-radius="mini" :content="t('tooltips.tvl')">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget :title="TranslationConsts.TVL" :tooltip="t('tooltips.tvl')">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -24,7 +17,7 @@
       <price-change :value="priceChange" />
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -46,9 +39,9 @@ import { calcPriceChange, formatAmountWithSuffix, formatDecimalPlaces } from '@/
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
   },

diff --git a/src/components/pages/Swap/Chart.vue b/src/components/pages/Swap/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <stats-card v-loading="parentLoading">
+  <base-widget v-loading="parentLoading">
     <template #title>
       <tokens-row border :assets="tokens" size="medium" />
       <div v-if="tokenA" class="token-title">
@@ -56,7 +56,7 @@
         @datazoom="changeZoomLevel"
       />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -254,10 +254,10 @@ const getPrecision = (value: number): number => {
   components: {
     TokenLogo: components.TokenLogo,
     FormattedAmount: components.FormattedAmount,
+    BaseWidget: lazyComponent(Components.BaseWidget),
     SvgIconButton: lazyComponent(Components.SvgIconButton),
     TokensRow: lazyComponent(Components.TokensRow),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
   },

diff --git a/src/components/pages/Swap/Transactions.vue b/src/components/pages/Swap/Transactions.vue
@@ -0,0 +1,22 @@
+<template>
+  <base-widget title="All trades" tooltip="Some text"> </base-widget>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
+@Component({
+  components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
+  },
+})
+export default class SwapTransactions extends Vue {
+  @Prop({ default: () => null, type: Object }) readonly baseAsset!: Nullable<AccountAsset>;
+  @Prop({ default: () => null, type: Object }) readonly quoteAsset!: Nullable<AccountAsset>;
+}
+</script>