update(lease, dialog, chart, skeleton)

languages/add.json

@@ -227,5 +227,13 @@
   "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
   "stoppings-payout": "This position will have an approximate payout of {amount}",
   "collect-title": "This position is being collect",
-  "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+  "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+  "leases-history": "leases",
+  "vote-history": "vote",
+  "stake-history": "stake",
+  "earn-history": "earn",
+  "transfer-history": "transfer",
+  "loading-data": "Loading data",
+  "stop-loss-error": "stop-loss-error",
+  "stepper-transfer-position": "Transfer"
 }

package.json

@@ -48,7 +48,7 @@
     "vue": "^3.5.13",
     "vue-i18n": "11.0.1",
     "vue-router": "^4.5.0",
-    "web-components": "github:nolus-protocol/web-components#v2.0.19"
+    "web-components": "github:nolus-protocol/web-components#v2.0.20"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.1",

src/assets/styles/global.scss

@@ -75,7 +75,7 @@ svg {
 }
 
 .skeleton-box {
-  background-color: #ccc;
+  @apply bg-neutral-bg-300;
   animation: blink 1.2s linear infinite;
 }
 

src/common/components/BigNumber.vue

@@ -27,7 +27,7 @@
       </template>
       <div
         v-else
-        class="skeleton-box rounded-sm"
+        class="skeleton-box rounded-[4px]"
         :style="[{ width: '100%', height: `${amount?.fontSize || 32 * 1.2}px` }]"
       ></div>
     </div>
@@ -47,7 +47,7 @@
       </template>
       <div
         v-else
-        class="skeleton-box mt-1 rounded-sm"
+        class="skeleton-box mt-1 rounded-[4px]"
         :style="[{ width: '100%', height: `${14 * 1.2}px` }]"
       ></div>
     </template>
@@ -67,7 +67,7 @@
       </template>
       <div
         v-else
-        class="skeleton-box rounded-sm"
+        class="skeleton-box rounded-[4px]"
         :style="[{ width: '100%', height: `${secondary?.fontSize || 12 * 1.2}px` }]"
       ></div>
     </template>

src/common/components/Chart.vue

@@ -5,14 +5,15 @@
   >
     <div
       v-if="!disableSkeleton && isLoading"
-      class="skeleton-loader absolute inset-0 flex items-end justify-center gap-1 rounded p-2"
+      class="absolute h-full w-full"
     >
-      <div
-        v-for="n in numberOfBars"
-        :key="n"
-        class="blink bg-gray-300"
-        :style="{ width: barWidth + 'px', height: randomHeight() }"
-      ></div>
+      <div class="flex h-full w-full flex-col items-center justify-center">
+        <span class="mb-2 justify-center text-14 text-typography-default">{{ $t("message.loading-data") }}</span>
+        <Spinner
+          height="20"
+          width="20"
+        />
+      </div>
     </div>
     <div
       ref="plotContainer"
@@ -24,8 +25,9 @@
 
 <script lang="ts" setup>
 import { select } from "d3";
-import { onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import { Logger } from "../utils";
+import { Spinner } from "web-components";
 
 export interface IChart {
   updateChart: Function;
@@ -40,24 +42,14 @@ const props = defineProps<IChart>();
 const isLoading = ref(true);
 const maxHeight = ref(0);
 const container = ref<HTMLDivElement | null>();
-const numberOfBars = ref(0);
-const barWidth = 10;
-
 const plotContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
-  updateNumberOfBars();
-  window.addEventListener("resize", updateNumberOfBars);
-
   await props.updateChart(plotContainer.value, tooltip);
   const items = props.fns.map((item) => item());
   await Promise.all(items).catch((e) => Logger.error(e));
 });
 
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", updateNumberOfBars);
-});
-
 onUnmounted(() => {
   tooltip.remove();
 });
@@ -75,35 +67,5 @@ watch(
   }
 );
 
-function updateNumberOfBars() {
-  if (container.value) {
-    const containerWidth = container.value?.clientWidth;
-    const totalBarWidth = barWidth;
-    numberOfBars.value = Math.floor(containerWidth / totalBarWidth);
-  }
-}
-
-function randomHeight() {
-  const min = 10;
-  const max = 50;
-  return Math.floor(Math.random() * (max - min + 1) + min) + "%";
-}
-
 defineExpose({ update });
 </script>
-
-<style scoped lang="scss">
-.skeleton-loader {
-  animation: blink 1.5s linear infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    background-color: rgba(224, 224, 224, 0.6);
-  }
-  50% {
-    background-color: rgba(224, 224, 224, 0.4);
-  }
-}
-</style>

src/common/utils/AssetUtils.ts

@@ -24,10 +24,20 @@ import {
 } from "@/config/global";
 
 export class AssetUtils {
-  public static formatNumber(amount: number | string, decimals: number) {
-    return new Intl.NumberFormat("us-US", { maximumFractionDigits: decimals, minimumFractionDigits: decimals })
-      .format(Number(amount))
-      .toString();
+  public static formatNumber(amount: number | string, decimals: number, symbol?: string) {
+    const a = Number(amount);
+    let sign = "";
+
+    if (a < 0) {
+      sign = "-";
+    }
+
+    return `${sign}${symbol ?? ""}${new Intl.NumberFormat("us-US", {
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals
+    })
+      .format(Math.abs(a))
+      .toString()}`;
   }
 
   public static getBalance(ibcData: string) {

src/common/utils/WalletConnect.ts

@@ -8,7 +8,6 @@ import { useWalletStore, WalletActions } from "@/common/stores/wallet";
 import { AssetUtils, WalletManager } from ".";
 import { type NetworkData, WalletConnectMechanism } from "@/common/types";
 import { authenticateKeplr, authenticateLeap, authenticateLedger, type BaseWallet, type Wallet } from "@/networks";
-import type { Window as KeplrWindow } from "@keplr-wallet/types/build/window";
 
 export const validateAddress = (address: string) => {
   if (!address || address.trim() == "") {
@@ -57,8 +56,8 @@ export const validateAmountV2 = (amount: string, amount2: string) => {
     return i18n.global.t("message.invalid-amount");
   }
 
-  const a = new Dec(amount);
-  const b = new Dec(amount2);
+  const a = new Dec(amount.replace(",", ""));
+  const b = new Dec(amount2.replace(",", ""));
 
   const isLowerThanOrEqualsToZero = a.lte(new Dec(0));
 

src/locales/cn.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/en.json

@@ -552,6 +552,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
-}
+}

src/locales/es.json

@@ -557,6 +557,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/fr.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/gr.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/id.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/jp.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/ru.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }

src/locales/tr.json

@@ -563,6 +563,14 @@
     "stoppings-close-price": "Your position will automatically close if the price of {asset} hits {price}",
     "stoppings-payout": "This position will have an approximate payout of {amount}",
     "collect-title": "This position is being collect",
-    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes."
+    "collect-description": "Please come back later or wait, this usually takes less than 2 minutes.",
+    "leases-history": "leases",
+    "vote-history": "vote",
+    "stake-history": "stake",
+    "earn-history": "earn",
+    "transfer-history": "transfer",
+    "loading-data": "Loading data",
+    "stop-loss-error": "stop-loss-error",
+    "stepper-transfer-position": "Transfer"
   }
 }