add BaseWidget component

sora-xor · Feb 28, 2024 · 51cbc69 · 51cbc69
1 parent 87c6ed3
commit 51cbc69
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 137 deletions.
diff --git a/src/components/pages/Moonpay/Moonpay.vue b/src/components/pages/Moonpay/Moonpay.vue
@@ -3,7 +3,7 @@
     <template #title>
       <moonpay-logo :theme="libraryTheme" />
     </template>
-    <widget :src="widgetUrl" />
+    <i-frame-widget :src="widgetUrl" />
   </dialog-base>
 </template>
 
@@ -28,7 +28,7 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
   components: {
     DialogBase: components.DialogBase,
     MoonpayLogo,
-    Widget: lazyComponent(Components.Widget),
+    IFrameWidget: lazyComponent(Components.IFrameWidget),
   },
 })
 export default class Moonpay extends Mixins(MoonpayBridgeInitMixin) {

diff --git a/src/components/pages/Moonpay/MoonpayHistory.vue b/src/components/pages/Moonpay/MoonpayHistory.vue
@@ -54,7 +54,7 @@
       />
     </template>
     <template v-else>
-      <widget :src="detailsWidgetUrl" />
+      <i-frame-widget :src="detailsWidgetUrl" />
       <s-button
         v-if="isCompletedTransaction"
         :type="actionButtonType"
@@ -80,7 +80,6 @@ import { Components } from '../../../consts';
 import { lazyComponent } from '../../../router';
 import { action, getter, state } from '../../../store/decorators';
 import { getCssVariableValue, toQueryString } from '../../../utils';
-import ethersUtil from '../../../utils/ethers-util';
 import { MoonpayTransactionStatus } from '../../../utils/moonpay';
 
 import type { MoonpayTransaction, MoonpayCurrency, MoonpayCurrenciesById } from '../../../utils/moonpay';
@@ -96,7 +95,7 @@ const DetailsView = 'details';
     X1exLogo,
     FormattedAmount: components.FormattedAmount,
     GenericPageHeader: lazyComponent(Components.GenericPageHeader),
-    Widget: lazyComponent(Components.Widget),
+    IFrameWidget: lazyComponent(Components.IFrameWidget),
     HistoryPagination: components.HistoryPagination,
   },
 })

diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
@@ -1,18 +1,11 @@
 <template>
-  <div v-loading="loading" class="order-book-widget stock-book book">
-    <div class="stock-book__title">
-      <div>
-        <span>{{ t('orderBook.orderBook') }}</span>
-        <s-tooltip
-          slot="suffix"
-          border-radius="mini"
-          :content="t('orderBook.tooltip.bookWidget')"
-          placement="top"
-          tabindex="-1"
-        >
-          <s-icon name="info-16" size="14px" />
-        </s-tooltip>
-      </div>
+  <base-widget
+    v-loading="loading"
+    class="stock-book book"
+    :title="t('orderBook.orderBook')"
+    :tooltip="t('orderBook.tooltip.bookWidget')"
+  >
+    <template #title-append>
       <s-dropdown
         v-if="false"
         class="stock-book__switcher"
@@ -27,7 +20,8 @@
           }}</s-dropdown-item>
         </template>
       </s-dropdown>
-    </div>
+    </template>
+
     <div class="book-columns">
       <div>{{ t('orderBook.price') }}</div>
       <div>{{ t('orderBook.amount') }}</div>
@@ -64,7 +58,7 @@
       </div>
     </div>
     <div v-else class="stock-book-buy--no-bids">{{ t('orderBook.book.noBids') }}</div>
-  </div>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -74,7 +68,8 @@ import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-import { LimitOrderType, ZeroStringValue } from '@/consts';
+import { Components, LimitOrderType, ZeroStringValue } from '@/consts';
+import { lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
 import type { OrderBookDealData } from '@/types/orderBook';
 
@@ -90,7 +85,11 @@ interface LimitOrderForm {
 
 type OrderBookPriceVolumeAggregated = [FPNumber, FPNumber, FPNumber];
 
-@Component
+@Component({
+  components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
+  },
+})
 export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingMixin, mixins.FormattedAmountMixin) {
   @state.orderBook.limitOrderType private limitOrderType!: LimitOrderType;
   @state.orderBook.asks asks!: OrderBookPriceVolume[];
@@ -341,8 +340,6 @@ $background-column-color-dark: #693d81;
 $mono-font: 'JetBrainsMono';
 
 .stock-book {
-  overflow: hidden;
-
   :not(.unclickable) .row:hover {
     cursor: pointer;
   }
@@ -355,21 +352,6 @@ $mono-font: 'JetBrainsMono';
     margin: 2px;
   }
 
-  &__title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 40px;
-    line-height: 40px;
-    font-weight: 500;
-    font-size: 17px;
-    margin-left: $basic-spacing;
-
-    .el-tooltip {
-      margin-left: $inner-spacing-mini;
-    }
-  }
-
   &__switcher {
     display: flex;
     justify-content: center;
@@ -492,11 +474,6 @@ $mono-font: 'JetBrainsMono';
     letter-spacing: -0.26px;
     text-transform: uppercase;
   }
-
-  h4 {
-    margin: $basic-spacing 0 10px $basic-spacing;
-    font-weight: 500;
-  }
 }
 
 .stock-book-sell--no-asks,

diff --git a/src/components/pages/OrderBook/HistoryOrderWidget.vue b/src/components/pages/OrderBook/HistoryOrderWidget.vue
@@ -1,46 +1,49 @@
 <template>
-  <div class="order-book-widget history s-flex-column">
-    <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>
+  <base-widget class="order-history-widget s-flex-column">
+    <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>
-      <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>
+    </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" />
@@ -55,7 +58,7 @@
       </div>
     </div>
     <cancel-confirm :visible.sync="confirmCancelOrderVisibility" @confirm="handleCancel" />
-  </div>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -75,6 +78,7 @@ import type { LimitOrder } from '@sora-substrate/util/build/orderBook/types';
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     AllOrders: lazyComponent(Components.AllOrders),
     OpenOrders: lazyComponent(Components.OpenOrders),
     CancelConfirm: lazyComponent(Components.CancelOrders),
@@ -194,13 +198,7 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
 </script>
 
 <style lang="scss">
-.history-widget {
-  .order-book-widget.history {
-    padding: 0;
-  }
-}
-
-.order-book-widget.history {
+.order-history-widget {
   min-height: 570px;
 
   .el-table-column--selection.is-leaf > .cell {
@@ -222,8 +220,9 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
 .order-history {
   &-header {
     display: flex;
+    flex: 1;
     justify-content: space-between;
-    padding: $basic-spacing $basic-spacing $inner-spacing-mini $basic-spacing;
+    padding: $inner-spacing-medium 0 $inner-spacing-mini;
     color: var(--s-color-base-content-secondary);
     font-size: $basic-spacing;
     font-weight: 500;

diff --git a/src/components/pages/OrderBook/MarketTradesWidget.vue b/src/components/pages/OrderBook/MarketTradesWidget.vue
@@ -1,17 +1,9 @@
 <template>
-  <div class="order-book-widget market-trades">
-    <h4 class="market-trades__title">
-      <span>{{ t('orderBook.marketTrades') }}</span>
-      <s-tooltip
-        slot="suffix"
-        border-radius="mini"
-        :content="t('orderBook.tooltip.marketWidget')"
-        placement="top"
-        tabindex="-1"
-      >
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </h4>
+  <base-widget
+    class="market-trades"
+    :title="t('orderBook.marketTrades')"
+    :tooltip="t('orderBook.tooltip.marketWidget')"
+  >
     <s-table class="market-trades-table" :data="completedOrders">
       <s-table-column>
         <template #header>
@@ -38,7 +30,7 @@
         </template>
       </s-table-column>
     </s-table>
-  </div>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -47,12 +39,18 @@ import dayjs from 'dayjs';
 import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
 import { getter, state } from '@/store/decorators';
 import type { OrderBookDealData } from '@/types/orderBook';
 
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
-@Component
+@Component({
+  components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
+  },
+})
 export default class MarketTradesWidget extends Mixins(TranslationMixin) {
   readonly PriceVariant = PriceVariant;
 
@@ -77,21 +75,8 @@ export default class MarketTradesWidget extends Mixins(TranslationMixin) {
 
 <style lang="scss">
 .market-trades {
-  overflow: hidden;
   min-height: 272px;
 
-  &__title {
-    height: 40px;
-    line-height: 40px;
-    font-weight: 500;
-    font-size: 17px;
-    margin-left: $basic-spacing;
-
-    .el-tooltip {
-      margin-left: $inner-spacing-mini;
-    }
-  }
-
   .order-info {
     &.time {
       font-size: var(--s-font-size-extra-small);

diff --git a/src/components/pages/OrderBook/SetLimitOrderWidget.vue b/src/components/pages/OrderBook/SetLimitOrderWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="order-book-widget" v-loading="loadingState">
+  <base-widget v-loading="loadingState">
     <div class="order-book-tabs">
       <s-tabs :value="currentTab" type="card" @input="handleChangeTab">
         <s-tab
@@ -13,7 +13,7 @@
     <div>
       <buy-sell />
     </div>
-  </div>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -28,6 +28,7 @@ import { mutation, state } from '@/store/decorators';
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     BuySell: lazyComponent(Components.BuySell),
   },
 })