Merge branch 'dev'

.eslintrc.cjs

@@ -5,7 +5,6 @@ module.exports = {
   root: true,
   extends: [
     "plugin:vue/vue3-essential",
-    "plugin:vue/html-self-closing",
     "eslint:recommended",
     "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier/skip-formatting"

.vscode/extensions.json

@@ -1,8 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["EditorConfig.EditorConfig", "Vue.volar", "esbenp.prettier-vscode"]
 }

package.json

@@ -38,18 +38,20 @@
     "@ledgerhq/hw-transport-webusb": "^6.28.3",
     "@ledgerhq/logs": "^6.12.0",
     "@nolus/nolusjs": "2.3.4",
-    "@skip-router/core": "^2.0.4",
+    "@skip-router/core": "^5.0.4",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "cosmjs-types": "^0.9.0",
     "cosmjs-types-legacy": "npm:[email protected]",
     "date-fns": "^3.3.1",
+    "ethers": "^6.13.0",
     "marked": "^12.0.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-chartjs": "^5.3.0",
     "vue-i18n": "9.10.2",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "web-components": "github:nolus-protocol/web-components#v1.4.2"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
@@ -69,12 +71,12 @@
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.24.0",
     "husky": "^9.0.10",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.34",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12",
-    "sass": "^1.72.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "sass": "^1.77.0",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.3.0",

src/assets/styles/components/_checkbox.scss

@@ -20,11 +20,11 @@
     label {
       display: inline-block;
       vertical-align: middle;
-      font-size: 12px !important;
-      font-family: "Garet Bolder", sans-serif;
+      font-size: 13px !important;
+      font-family: "Garet Medium", sans-serif;
       font-weight: 600;
       margin-left: 0px !important;
-      line-height: 19px !important;
+      line-height: normal !important;
 
       &.flex{
         display: flex !important;
@@ -37,4 +37,4 @@
       }
     }
   }
-}
+}

src/assets/styles/components/_modal.scss

@@ -156,7 +156,7 @@
 
 .modal-send-receive-actions {
   @media (min-width: $md) {
-    padding-bottom: 30px;
+    padding-bottom: 40px;
   }
 }
 

src/assets/styles/global.scss

@@ -26,3 +26,7 @@
 @import "./components/banner";
 @import "./components/sort";
 @import "./components/search-input";
+
+strong {
+  font-weight: 600;
+}

src/assets/styles/helpers/_animations.scss

@@ -73,42 +73,42 @@
   }
 }
 
-[class^="icon-"] {
-  font-size: 1.8em !important;
-}
-
-.nls-btn-show {
-  display: none;
-  transition: 0.2s;
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  transform: translateY(-50%);
-}
+//[class^="icon-"] {
+//  font-size: 1.8em !important;
+//}
+
+//.nls-btn-show {
+//  display: none;
+//  transition: 0.2s;
+//  position: absolute;
+//  top: 50%;
+//  //right: 12px;
+//  transform: translateY(-50%);
+//}
 
 @media (min-width: $md) {
 
-  .row-actions:hover .nls-btn-show {
-    transition: 0.2s;
-
-    display: flex;
-    animation-name: show-anime;
-    animation-duration: 0.2s;
-    animation-iteration-count: 1;
-    animation-timing-function: ease-in;
-  }
-
-  .info-show {
-    animation-name: show-anime;
-    animation-duration: 0.2s;
-    animation-iteration-count: 1;
-    animation-timing-function: ease-in;
-    transition: 0.2s opacity;
-  }
-
-  .row-actions:hover .info-show {
-    opacity: 0;
-  }
+  //.row-actions:hover .nls-btn-show {
+  //  transition: 0.2s;
+  //
+  //  display: flex;
+  //  animation-name: show-anime;
+  //  animation-duration: 0.2s;
+  //  animation-iteration-count: 1;
+  //  animation-timing-function: ease-in;
+  //}
+  //
+  //.info-show {
+  //  animation-name: show-anime;
+  //  animation-duration: 0.2s;
+  //  animation-iteration-count: 1;
+  //  animation-timing-function: ease-in;
+  //  transition: 0.2s opacity;
+  //}
+  //
+  //.row-actions:hover .info-show {
+  //  opacity: 0;
+  //}
 
 }
 
@@ -224,4 +224,4 @@ span.loading {
     border-radius: 50%;
     opacity: 1;
   }
-}
+}

src/assets/styles/helpers/_fonts.scss

@@ -70,33 +70,33 @@
   */
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
-  font-family: "nolus";
-  font-style: normal;
-  font-weight: normal;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: 0.2em;
-  text-align: center;
+  //font-family: "nolus";
+  //font-style: normal;
+  //font-weight: normal;
+  //
+  //display: inline-block;
+  //text-decoration: inherit;
+  //width: 1em;
+  //margin-right: 0.2em;
+  //text-align: center;
 
   /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
+  //font-variant: normal;
+  //text-transform: none;
 
   /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
+  //line-height: 1em;
 
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
-  margin-left: 0.2em;
+  //margin-left: 0.2em;
 
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
 
   /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  //-webkit-font-smoothing: antialiased;
+  //-moz-osx-font-smoothing: grayscale;
 
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

src/assets/styles/helpers/_html.scss

@@ -193,11 +193,11 @@ div#app {
   }
 }
 
-hr {
-  background-color: $borderColor;
-  border: none;
-  height: 1px;
-}
+//hr {
+//  background-color: $borderColor;
+//  border: none;
+//  height: 1px;
+//}
 
 input,
 select,
@@ -599,23 +599,6 @@ input[type="checkbox" i] {
   .nls-md-show {
     display: none;
   }
-
-  .outline {
-    outline: none;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      border: 1px solid #ebeff5;
-      border-radius: 12px;
-      pointer-events: none;
-    }
-  }
 }
 
 @media (max-width: $lg) {
@@ -661,11 +644,11 @@ input[type="checkbox" i] {
   .balance-box {
     //padding-right: 16px;
     //padding-left: 16px;
-    display: block;
+    //display: block;
 
-    & > div {
-      width: 100%;
-    }
+    //& > div {
+    //  width: 100%;
+    //}
   }
 
   .sidebar-elements-block {
@@ -833,21 +816,6 @@ body.dark {
   .dark-text-light-blue {
     color: $lightBlue !important;
   }
-
-  @media (max-width: $lg) {
-    .outline {
-      outline: 1px solid #2b384b !important;
-      box-shadow: 0px 12px 32px 0px rgba(7, 45, 99, 0.06);
-    }
-  }
-
-  @media (min-width: $md) {
-    .outline {
-      &::after {
-        border: 1px solid $dark-line;
-      }
-    }
-  }
 }
 
 body.sync {

src/common/components/CurrencyComponent.vue

@@ -17,7 +17,7 @@
   </template>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { NATIVE_CURRENCY } from "@/config/global";
 import { CURRENCY_VIEW_TYPES } from "@/common/types";
 import { CurrencyUtils } from "@nolus/nolusjs";
@@ -156,7 +156,7 @@ const amount = computed(() => {
   };
 });
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 span {
   &.text-40 {
     font-size: 40px;
@@ -169,9 +169,9 @@ span {
 
 @media (max-width: 576px) {
   span {
-    &.text-40 {
-      font-size: 32px;
-    }
+    //&.text-40 {
+    //  font-size: 32px;
+    //}
 
     &.text-38 {
       font-size: 28px;

src/common/components/menus/DesktopMenu.vue

@@ -2,12 +2,12 @@
   <div>
     <template
       v-for="item in menuItems"
-      :key="item.name"
+      :key="item?.name"
     >
       <template v-if="item!.action">
         <a
           class="sidebar-element flex cursor-pointer items-center gap-2.5 font-garet-medium"
-          @click="item!.action(item!.path)"
+          @click="item?.action(item!.path)"
         >
           <span
             :class="[`icon-${item!.icon}`]"

src/common/components/menus/MobileMenu.vue

@@ -6,7 +6,7 @@
     <!-- Hidden menu -->
     <div
       :style="showMobileNav ? 'transform: translateY(-176px)' : ''"
-      class="background nls-border mobile-transition-taskbar absolute z-[10] mb-[-1px] flex w-full flex-col rounded-tl-xl rounded-tr-xl transition-[0.5s]"
+      class="background nls-border mobile-transition-taskbar absolute z-[10] mb-[-1px] flex w-full flex-col transition-[0.5s]"
     >
       <RouterLink
         v-for="item in hiddenMenuItems"
@@ -27,10 +27,12 @@
       </RouterLink>
     </div>
 
-    <div class="background sidebar-elements-block relative z-20 flex w-full justify-between px-4 pb-4 pt-1.5">
+    <div
+      class="background sidebar-elements-block relative z-20 flex w-full justify-between border-t-[1px] border-border-color px-4 pb-4 pt-1.5"
+    >
       <template
         v-for="item in visibleMenuItems"
-        :key="item.name"
+        :key="item?.name"
         class="sidebar-element flex flex-col items-center font-garet-medium text-16"
         @click="showMobileNav = false"
       >
@@ -75,10 +77,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { inject, onMounted, onUnmounted, ref } from "vue";
 import { RouterLink } from "vue-router";
 import { RouteNames, router } from "@/router";
-import { inject } from "vue";
 import { EnvNetworkUtils } from "@/common/utils";
 
 const openDialog = inject("openDialog", () => {});