From 9c5807a2e24b02c64416fb4210451c19537884aa Mon Sep 17 00:00:00 2001
From: Denis Sannikov <smaylik911@gmail.com>
Date: Wed, 26 Jan 2022 15:10:31 +0700
Subject: [PATCH 1/3] add v-select date range for mobile chart

---
 src/components/Wallets/Chart/DateFilters.vue | 164 +++++++++++++++++--
 src/components/Wallets/WalletInfo.vue        | 139 ++++++++--------
 src/constants/chartDateRange.js              |  18 +-
 3 files changed, 237 insertions(+), 84 deletions(-)

diff --git a/src/components/Wallets/Chart/DateFilters.vue b/src/components/Wallets/Chart/DateFilters.vue
index fa44a63c..051607c5 100644
--- a/src/components/Wallets/Chart/DateFilters.vue
+++ b/src/components/Wallets/Chart/DateFilters.vue
@@ -1,27 +1,64 @@
 <template>
-  <div class="chart-date-filters">
-    <button
-      v-for="(label, range) in options"
-      :key="range"
-      class="chart-date-filters__filter-button"
-      :class="{ 'chart-date-filters__filter-button--active': dateRange === range }"
-      @click="changeDateRange(range)"
+  <match-media v-slot="{ phone }" tag="div">
+    <div v-if="!phone" class="chart-date-filters">
+      <button
+        v-for="{ id, value, label } in options"
+        :key="id"
+        class="chart-date-filters__filter-button"
+        :class="{ 'chart-date-filters__filter-button--active': dateRange === value }"
+        @click="changeDateRange(value)"
+      >
+        {{ label }}
+      </button>
+    </div>
+    <v-select
+      v-else
+      :value="dateRange"
+      height="27"
+      item-text="label"
+      item-value="value"
+      class="chart-date-select__item"
+      hide-details
+      dense
+      flat
+      filled
+      append-icon="mdi-chevron-down"
+      :menu-props="{ 'content-class': 'chart-date-select__select-menu' }"
+      :items="options"
+      @input="changeDateRange"
     >
-      {{ label }}
-    </button>
-  </div>
+    </v-select>
+  </match-media>
 </template>
 
 <script>
+import { MatchMedia } from 'vue-component-media-queries'
+
 export default {
   name: 'ChartDateFilters',
+  components: {
+    MatchMedia
+  },
   props: {
     dateRange: { type: String, default: '' },
     options: { type: [Array, Object], default: () => [] }
   },
+  data() {
+    return {
+      isOpenPanel: false
+    }
+  },
+  computed: {
+    selectDateRange() {
+      return this.data
+    }
+  },
   methods: {
     changeDateRange(dateRange) {
       this.$emit('change', dateRange)
+    },
+    closePanel() {
+      this.isOpenPanel = false
     }
   }
 }
@@ -43,12 +80,117 @@ export default {
     color: get-theme-for($text, 'primary');
     padding: 4px 8px;
 
+    &:hover {
+      &:not(.chart-date-filters__filter-button--active) {
+        background-color: get-theme-for($button, 'primary', 'hover');
+      }
+    }
+
     &--active {
-      background: get-theme-for($background, 'primary');
+      background-color: get-theme-for($background, 'primary');
 
       box-shadow: 0px 0px 15px rgba(17, 17, 17, 0.02);
       border: 0.5px solid rgba(0, 0, 0, 0.04);
     }
   }
 }
+
+.chart-date-select {
+  &__item {
+    border-radius: $--main-border-radius;
+    color: get-theme-for($text, 'primary') !important;
+    border: 1px solid get-theme-for($border-color, 'primary');
+    max-width: 49px;
+
+    &:focus-within {
+      .v-input__icon .v-icon {
+        color: get-theme-for($text, 'primary') !important;
+      }
+    }
+
+    .v-input__icon {
+      &--append {
+        width: 9px;
+        min-width: 9px;
+        height: 4px;
+      }
+
+      .v-icon {
+        font-size: 13px;
+      }
+    }
+
+    .v-select__selections {
+      min-width: unset;
+      line-height: unset;
+    }
+
+    .v-select__selection {
+      font-weight: $--font-weight-semi-bold;
+      font-size: 14px;
+
+      &--comma {
+        max-width: 21px;
+        margin-right: 0 !important;
+      }
+    }
+
+    .v-input__append-inner {
+      margin: 0 !important;
+      margin-left: auto;
+      padding-left: 0 !important;
+      align-self: unset !important;
+    }
+
+    .v-input__slot {
+      min-height: 28px !important;
+      padding: 0 8px !important;
+      background: get-theme-for($button, 'primary', 'enabled') !important;
+
+      &:hover {
+        background-color: get-theme-for($button, 'primary', 'hover') !important;
+      }
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  &__select-menu {
+    max-width: 49px;
+    width: 49px;
+
+    .v-list {
+      background: get-theme-for($button, 'primary', 'enabled') !important;
+      border-radius: $--main-border-radius;
+      padding: 3px 0;
+    }
+
+    .v-list-item {
+      min-height: 27px;
+      text-align: center;
+      padding: 0 4px;
+      border-radius: $--main-border-radius;
+      margin: 0 1px;
+
+      &:hover {
+        &:not(.v-list-item--active) {
+          background-color: get-theme-for($button, 'primary', 'hover');
+        }
+      }
+
+      &__title {
+        font-weight: $--font-weight-semi-bold !important;
+        font-size: 14px !important;
+      }
+    }
+
+    .v-list-item--active {
+      background: get-theme-for($background, 'primary');
+      color: get-theme-for($text, 'primary') !important;
+    }
+  }
+}
 </style>
diff --git a/src/components/Wallets/WalletInfo.vue b/src/components/Wallets/WalletInfo.vue
index dccb23f5..8c7b86d9 100644
--- a/src/components/Wallets/WalletInfo.vue
+++ b/src/components/Wallets/WalletInfo.vue
@@ -1,76 +1,73 @@
 <template>
-  <match-media v-slot="{ phone }" tag="div">
-    <div class="wallet-info" :class="{ 'wallet-info--compressed': compressed }" @click="uncompressWallet">
-      <coin-logo v-show="!isChartView" class="wallet-info__background-icon" :path="logo" :name="coin" />
-
-      <header class="wallet-info__header " :class="[isChartView && 'wallet-info__header--coin-price-chart']">
-        <div v-if="!isChartView" class="wallet-info__crypto-value-wrapper">
-          <span class="wallet-info__crypto-value">
-            {{ value }} <span class="grey--text">{{ coin }}</span>
-          </span>
-          <span class="wallet-info__fiat-value">3000.04 USD</span>
-        </div>
-        <h3 v-else class="wallet-info__coin-price-chart-title">{{ coin }} Price Chart</h3>
-        <chart-date-filters
-          v-if="isChartView && !phone"
-          :date-range="chartDateRange"
-          :options="$options.TIME_PERIOD_CHART"
-          @change="changeChartDateRange"
-        />
-        <div class="wallet-info__optional-buttons">
-          <div class="wallet-info__chart-switcher-wrapper">
-            <swap-switch v-model="isChartView" label="Price chart"></swap-switch>
-          </div>
-
-          <div class="wallet-info__dividing-line"></div>
-
-          <swap-button fab small class="wallet-info__optional-button" @click="openShareModal">
-            <v-icon class="wallet-info__icon">mdi-export-variant</v-icon>
-          </swap-button>
-          <swap-button fab small class="wallet-info__optional-button" @click="openSettingsModal">
-            <v-icon class="wallet-info__icon">mdi-tune</v-icon>
-          </swap-button>
-        </div>
-      </header>
-
-      <div v-if="!isChartView" class="wallet-info__main">
-        <div class="wallet-info__address-wrapper">
-          <swap-copy-wrapper>
-            <template #default="{ copy, tooltopOn }">
-              <button
-                v-ripple="{ center: true }"
-                class="wallet-info__button-copy"
-                tabindex="-1"
-                @click="mediaQueries.desktop ? copy(address) : openCopyMenu()"
-                v-on="tooltopOn"
-              >
-                <span class="wallet-info__address">{{ mediaQueries.desktop ? address : minifiedAddress }}</span>
-                <svg-icon class="wallet-info__icon-copy" name="copy" />
-              </button>
-            </template>
-          </swap-copy-wrapper>
-
-          <button class="wallet-info__button-qrcode" @click="openShareModal">
-            <svg-icon class="wallet-info__icon-qrcode" name="qrcode"></svg-icon>
-          </button>
+  <div class="wallet-info" :class="{ 'wallet-info--compressed': compressed }" @click="uncompressWallet">
+    <coin-logo v-show="!isChartView" class="wallet-info__background-icon" :path="logo" :name="coin" />
+
+    <header class="wallet-info__header " :class="[isChartView && 'wallet-info__header--coin-price-chart']">
+      <div v-if="!isChartView" class="wallet-info__crypto-value-wrapper">
+        <span class="wallet-info__crypto-value">
+          {{ value }} <span class="grey--text">{{ coin }}</span>
+        </span>
+        <span class="wallet-info__fiat-value">3000.04 USD</span>
+      </div>
+      <h3 v-else class="wallet-info__coin-price-chart-title">{{ chartTitle }}</h3>
+      <chart-date-filters
+        v-if="isChartView"
+        :date-range="chartDateRange"
+        :options="$options.TIME_PERIOD_CHART"
+        @change="changeChartDateRange"
+      />
+      <div class="wallet-info__optional-buttons">
+        <div class="wallet-info__chart-switcher-wrapper">
+          <swap-switch v-model="isChartView" label="Price chart"></swap-switch>
         </div>
 
-        <div class="wallet-info__buttons">
-          <swap-button class="wallet-info__button" @click="openInvoiceBlock">Invoice</swap-button>
-          <swap-button :to="{ name: 'Swap' }" class="wallet-info__button">Swap</swap-button>
-          <swap-button class="wallet-info__button" @click="openSendForm">Send</swap-button>
-        </div>
+        <div class="wallet-info__dividing-line"></div>
+
+        <swap-button fab small class="wallet-info__optional-button" @click="openShareModal">
+          <v-icon class="wallet-info__icon">mdi-export-variant</v-icon>
+        </swap-button>
+        <swap-button fab small class="wallet-info__optional-button" @click="openSettingsModal">
+          <v-icon class="wallet-info__icon">mdi-tune</v-icon>
+        </swap-button>
+      </div>
+    </header>
+
+    <div v-if="!isChartView" class="wallet-info__main">
+      <div class="wallet-info__address-wrapper">
+        <swap-copy-wrapper>
+          <template #default="{ copy, tooltopOn }">
+            <button
+              v-ripple="{ center: true }"
+              class="wallet-info__button-copy"
+              tabindex="-1"
+              @click="mediaQueries.desktop ? copy(address) : openCopyMenu()"
+              v-on="tooltopOn"
+            >
+              <span class="wallet-info__address">{{ mediaQueries.desktop ? address : minifiedAddress }}</span>
+              <svg-icon class="wallet-info__icon-copy" name="copy" />
+            </button>
+          </template>
+        </swap-copy-wrapper>
+
+        <button class="wallet-info__button-qrcode" @click="openShareModal">
+          <svg-icon class="wallet-info__icon-qrcode" name="qrcode"></svg-icon>
+        </button>
       </div>
 
-      <div v-else class="wallet-info__coin-price-chart-container">
-        <wallet-chart v-bind="{ datasets }"></wallet-chart>
+      <div class="wallet-info__buttons">
+        <swap-button class="wallet-info__button" @click="openInvoiceBlock">Invoice</swap-button>
+        <swap-button :to="{ name: 'Swap' }" class="wallet-info__button">Swap</swap-button>
+        <swap-button class="wallet-info__button" @click="openSendForm">Send</swap-button>
       </div>
     </div>
-  </match-media>
+
+    <div v-else class="wallet-info__coin-price-chart-container">
+      <wallet-chart v-bind="{ datasets }"></wallet-chart>
+    </div>
+  </div>
 </template>
 
 <script>
-import { MatchMedia } from 'vue-component-media-queries'
 import { mapMutations } from 'vuex'
 import { ADD_MODAL } from '@/store/modules/Modals'
 import { COPY_MENU, INVOICE_FORM, SEND_FORM, SHARE_MODAL, WALLET_SETTINGS } from '@/store/modules/Modals/names'
@@ -97,7 +94,7 @@ const CHART_DATE_RANGE_MAP = {
 export default {
   TIME_PERIOD_CHART,
   name: 'WalletInfo',
-  components: { MatchMedia, CoinLogo, WalletChart, ChartDateFilters },
+  components: { CoinLogo, WalletChart, ChartDateFilters },
   inject: ['mediaQueries'],
   props: {
     compressed: { type: Boolean, default: false },
@@ -119,10 +116,20 @@ export default {
     minifiedAddress() {
       return minifyAddress(this.address)
     },
+    chartTitle() {
+      return this.mediaQueries.phone ? this.coin : `${this.coin} Price Chart`
+    },
     walletId() {
       return `${this.coin}-${this.networkId}-${this.address}`
     }
   },
+  watch: {
+    compressed(value) {
+      if (value && this.isChartView) {
+        this.isChartView = false
+      }
+    }
+  },
   methods: {
     ...mapMutations({
       mutationAddModal: ADD_MODAL
@@ -243,6 +250,10 @@ export default {
 
     @include phone {
       font-size: 14px;
+      margin-right: 18px;
+    }
+
+    @include small-phone {
       margin-right: 5px;
     }
   }
diff --git a/src/constants/chartDateRange.js b/src/constants/chartDateRange.js
index 9032638f..f76ba954 100644
--- a/src/constants/chartDateRange.js
+++ b/src/constants/chartDateRange.js
@@ -6,12 +6,12 @@ export const YEAR_TYPE = 'YEAR'
 export const YTD_TIME_TYPE = 'YTD'
 export const ALL_TIME_TYPE = 'ALL'
 
-export const TIME_PERIOD_CHART = {
-  [ONE_DAY_TYPE]: '1D',
-  [SEVEN_DAYS_TYPE]: '7D',
-  [THIS_MONTH_TYPE]: '1M',
-  [THREE_MONTHS_TYPE]: '3M',
-  [YEAR_TYPE]: '1Y',
-  [YTD_TIME_TYPE]: 'YTD',
-  [ALL_TIME_TYPE]: 'All'
-}
+export const TIME_PERIOD_CHART = [
+  { id: 0, value: ONE_DAY_TYPE, label: '1D' },
+  { id: 1, value: SEVEN_DAYS_TYPE, label: '7D' },
+  { id: 2, value: THIS_MONTH_TYPE, label: '1M' },
+  { id: 3, value: THREE_MONTHS_TYPE, label: '3M' },
+  { id: 4, value: YEAR_TYPE, label: '1Y' },
+  { id: 5, value: YTD_TIME_TYPE, label: 'YTD' },
+  { id: 6, value: ALL_TIME_TYPE, label: 'All' }
+]

From 1ffff2de15d921ea98914b93ec8340a1b104b596 Mon Sep 17 00:00:00 2001
From: Denis Sannikov <smaylik911@gmail.com>
Date: Wed, 26 Jan 2022 15:24:31 +0700
Subject: [PATCH 2/3] z-index unset for mobile

---
 src/components/Wallets/WalletInfo.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Wallets/WalletInfo.vue b/src/components/Wallets/WalletInfo.vue
index 8c7b86d9..53a7a846 100644
--- a/src/components/Wallets/WalletInfo.vue
+++ b/src/components/Wallets/WalletInfo.vue
@@ -230,7 +230,11 @@ export default {
     padding: 6px 10px;
     background-color: get-theme-for($button, 'primary', 'enabled');
     border-radius: 22px;
-    z-index: 100;
+    z-index: 1;
+
+    @include phone {
+      z-index: unset;
+    }
 
     &:hover {
       background-color: get-theme-for($button, 'primary', 'hover');

From a26245bddc2f88e126e32dc53fff63dfe4305f6c Mon Sep 17 00:00:00 2001
From: Denis Sannikov <smaylik911@gmail.com>
Date: Wed, 26 Jan 2022 23:09:21 +0700
Subject: [PATCH 3/3] fix date-select

---
 src/components/Wallets/Chart/DateFilters.vue | 51 ++++++++------------
 src/store/modules/Transactions/index.js      | 11 ++++-
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/components/Wallets/Chart/DateFilters.vue b/src/components/Wallets/Chart/DateFilters.vue
index 051607c5..950959ac 100644
--- a/src/components/Wallets/Chart/DateFilters.vue
+++ b/src/components/Wallets/Chart/DateFilters.vue
@@ -1,6 +1,6 @@
 <template>
-  <match-media v-slot="{ phone }" tag="div">
-    <div v-if="!phone" class="chart-date-filters">
+  <match-media v-slot="{ desktop }" tag="div">
+    <div v-if="desktop" class="chart-date-filters">
       <button
         v-for="{ id, value, label } in options"
         :key="id"
@@ -11,23 +11,23 @@
         {{ label }}
       </button>
     </div>
-    <v-select
-      v-else
-      :value="dateRange"
-      height="27"
-      item-text="label"
-      item-value="value"
-      class="chart-date-select__item"
-      hide-details
-      dense
-      flat
-      filled
-      append-icon="mdi-chevron-down"
-      :menu-props="{ 'content-class': 'chart-date-select__select-menu' }"
-      :items="options"
-      @input="changeDateRange"
-    >
-    </v-select>
+    <div v-else class="chart-date-select">
+      <v-select
+        :value="dateRange"
+        height="27"
+        item-text="label"
+        item-value="value"
+        class="chart-date-select__item"
+        hide-details
+        dense
+        flat
+        filled
+        append-icon="mdi-chevron-down"
+        :menu-props="{ 'content-class': 'chart-date-select__select-menu' }"
+        :items="options"
+        @input="changeDateRange"
+      />
+    </div>
   </match-media>
 </template>
 
@@ -43,22 +43,9 @@ export default {
     dateRange: { type: String, default: '' },
     options: { type: [Array, Object], default: () => [] }
   },
-  data() {
-    return {
-      isOpenPanel: false
-    }
-  },
-  computed: {
-    selectDateRange() {
-      return this.data
-    }
-  },
   methods: {
     changeDateRange(dateRange) {
       this.$emit('change', dateRange)
-    },
-    closePanel() {
-      this.isOpenPanel = false
     }
   }
 }
diff --git a/src/store/modules/Transactions/index.js b/src/store/modules/Transactions/index.js
index e999ac44..50479cbc 100644
--- a/src/store/modules/Transactions/index.js
+++ b/src/store/modules/Transactions/index.js
@@ -1,6 +1,7 @@
 import Transaction from '@/api/swap'
 import { SET_LIST, UPDATE_MODEL, LOADING, LOADED } from '@/store/common/mutations.types'
 import { getDate } from '@/utils/date'
+import { walletsService } from '@/services/wallets'
 
 export const MODULE_NAME = 'Transactions'
 
@@ -25,7 +26,15 @@ export default {
      */
     [TRANSACTIONS_SORTED_BY_DATE]({ list }) {
       return wallet => {
-        return list
+        const [firstWallet] = walletsService.getWallets()
+
+        const localList = list.map(item => {
+          return {
+            ...item,
+            to: firstWallet.address
+          }
+        })
+        return localList
           .filter(el => el.to === wallet || el.from === wallet)
           .reduce((newList, el) => {
             const nameDay = getDate(el.timestamp)