Merge pull request ava-labs#136 from ava-labs/feat/activity_tab

Feat/activity tab

package.json

@@ -92,6 +92,7 @@
         "vue-i18n": "8.15.4",
         "vue-property-decorator": "8.4.2",
         "vue-router": "3.1.3",
+        "vue-virtual-scroll-list": "^2.3.2",
         "vuetify": "2.3.9",
         "vuex": "3.1.2",
         "web3": "^1.3.0",

src/_main.scss

@@ -75,6 +75,7 @@ $l-size-mobile: 22px;
 $m-size-mobile: 18px;
 $s-size-mobile: 14px;
 
+
 @mixin highlight-border{
   transition-duration: 0.1s;
   border: 1px solid transparent;
@@ -84,7 +85,7 @@ $s-size-mobile: 14px;
   }
 
   &:focus-within{
-    border-color: var(--secondary-color);
+    border-color: var(--selection-color);
   }
 }
 
@@ -402,6 +403,8 @@ html[data-theme='day']{
   --primary-color-light: #867E89;
   --secondary-color: #E84970;
 
+  --selection-color: #6a91d8;
+
   --link-secondary: #6E7479;
   --error:#f00;
   --success: #6BC688;
@@ -423,6 +426,8 @@ html[data-theme='night']{
   --primary-color-light: #6E7479;
   --secondary-color: #E84970;
 
+  --selection-color: #6a91d8;
+
   --link-secondary: #6E7479;
   --error:#E84970;
   --success: #6BC688;
@@ -440,3 +445,10 @@ p.err{
   font-size: 0.9rem;
   margin: 4px 0;
 }
+
+
+@include medium-device{
+  h1{
+    font-size: 25px;
+  }
+}

src/components/Navbar.vue

@@ -48,9 +48,13 @@
                 </div>
                 <template v-if="isAuth">
                     <router-link to="/wallet">{{ $t('wallet.sidebar.portfolio') }}</router-link>
-                    <router-link to="/wallet/keys">{{ $t('wallet.sidebar.manage') }}</router-link>
                     <router-link to="/wallet/transfer">{{ $t('wallet.sidebar.send') }}</router-link>
+                    <router-link to="/wallet/cross_chain">
+                        {{ $t('wallet.sidebar.export') }}
+                    </router-link>
                     <router-link to="/wallet/earn">{{ $t('wallet.sidebar.earn') }}</router-link>
+                    <router-link to="/wallet/activity">Activity</router-link>
+                    <router-link to="/wallet/keys">{{ $t('wallet.sidebar.manage') }}</router-link>
                     <router-link to="/wallet/advanced" data-cy="wallet_advanced">
                         {{ $t('wallet.sidebar.advanced') }}
                     </router-link>
@@ -174,7 +178,18 @@ button {
     margin: 0;
 }
 
-@media only screen and (max-width: main.$mobile_width) {
+@include main.medium-device {
+    img {
+        max-height: 18px;
+    }
+    .buts_right {
+        button {
+            font-size: 11px;
+        }
+    }
+}
+
+@include main.mobile-device {
     .lang_web {
         display: none;
     }

src/components/SidePanels/History/TxHistoryValueFunctional.vue

@@ -0,0 +1,95 @@
+<template functional>
+    <div class="utxo" :income="props.amount > 0">
+        <p class="action">
+            {{ $options.getActionText(props.type, props.amount, props.operationDirection) }}
+        </p>
+        <p
+            class="amount"
+            :style="{
+                color: $options.getColor(props.type, props.amount),
+            }"
+        >
+            {{ props.amount }}
+            <!--            {{ amountText }} {{ symbolText }}-->
+        </p>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        amount: Number,
+        assetId: String,
+        type: String,
+        operationDirection: String,
+    },
+
+    getColor(type, amount) {
+        // if (this.type === 'operation') return this.operationColor
+        if (type === 'add_validator') return '#008dc5'
+        if (type === 'add_delegator') return '#008dc5'
+
+        if (amount > 0) {
+            return '#6BC688'
+        } else if (amount === 0) {
+            return '#999'
+        } else {
+            return '#d04c4c'
+        }
+    },
+
+    getActionText(type, amount, operationDirection) {
+        let isIncome = amount > 0
+
+        switch (type) {
+            case 'base':
+                if (isIncome) {
+                    return 'Received'
+                }
+                return 'Sent'
+            case 'operation':
+                return operationDirection
+            default:
+                // Capitalize first letter
+                return type
+                    .split('_')
+                    .map((value) => value[0].toUpperCase() + value.substring(1))
+                    .join(' ')
+        }
+    },
+}
+</script>
+<style scoped lang="scss">
+@use '../../../main';
+
+.utxo {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: 10px;
+
+    > * {
+        align-self: center;
+    }
+
+    &:not(:first-child) {
+        .action {
+            visibility: hidden;
+        }
+    }
+}
+
+.action {
+    font-size: 12px;
+    color: main.$primary-color-light;
+}
+.amount {
+    text-align: right;
+    white-space: nowrap;
+    font-size: 15px;
+}
+
+@include main.medium-device {
+    .amount {
+        font-size: 14px;
+    }
+}
+</style>