update(design fixes)

languages/add.json

@@ -223,5 +223,9 @@
   "hide-transaction-details": "Hide transaction details",
   "send-stepper": "Send",
   "receive-stepper": "Receive",
-  "transactions-summary": "Transactions summary"
+  "transactions-summary": "Transactions summary",
+  "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."
 }

package.json

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

src/assets/styles/global.scss

@@ -73,3 +73,18 @@ svg {
   position: relative;
   z-index: 9997;
 }
+
+.skeleton-box {
+  background-color: #ccc;
+  animation: blink 1.2s linear infinite;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}

src/common/components/BigNumber.vue

@@ -16,35 +16,61 @@
       /></Tooltip>
     </div>
     <div class="flex items-center gap-2">
-      <CurrencyComponent
-        v-if="amount"
-        :font-size="32"
-        :font-size-small="32"
-        v-bind="amount"
-        class="flex font-semibold text-typography-default"
-      />
+      <template v-if="!loading">
+        <CurrencyComponent
+          v-if="amount"
+          :font-size="32"
+          :font-size-small="32"
+          v-bind="amount"
+          class="flex font-semibold text-typography-default"
+        />
+      </template>
+      <div
+        v-else
+        class="skeleton-box rounded-sm"
+        :style="[{ width: '100%', height: `${amount?.fontSize || 32 * 1.2}px` }]"
+      ></div>
     </div>
-    <div
-      v-if="pnlStatus"
-      :class="pnlStatus?.positive ? 'text-typography-success' : 'text-typography-error'"
-      class="flex gap-1 text-14 font-normal"
-    >
-      <Badge
-        v-if="pnlStatus?.badge"
-        v-bind="pnlStatus?.badge"
-      />
-      {{ pnlStatus?.value }}
-    </div>
-    <CurrencyComponent
-      v-if="secondary"
-      v-bind="secondary"
-      :amount="secondary?.amount"
-      :denom="secondary?.denom"
-      :type="secondary?.type"
-      :font-size="12"
-      :font-size-small="12"
-      class="flex font-normal text-typography-default"
-    />
+    <template v-if="pnlStatus">
+      <template v-if="!loading">
+        <div
+          v-if="pnlStatus"
+          :class="pnlStatus?.positive ? 'text-typography-success' : 'text-typography-error'"
+          class="flex gap-1 text-14 font-normal"
+        >
+          <Badge
+            v-if="pnlStatus?.badge"
+            v-bind="pnlStatus?.badge"
+          />
+          {{ pnlStatus?.value }}
+        </div>
+      </template>
+      <div
+        v-else
+        class="skeleton-box mt-1 rounded-sm"
+        :style="[{ width: '100%', height: `${14 * 1.2}px` }]"
+      ></div>
+    </template>
+
+    <template v-if="secondary">
+      <template v-if="!loading">
+        <CurrencyComponent
+          v-if="secondary"
+          v-bind="secondary"
+          :amount="secondary?.amount"
+          :denom="secondary?.denom"
+          :type="secondary?.type"
+          :font-size="12"
+          :font-size-small="12"
+          class="flex font-normal text-typography-default"
+        />
+      </template>
+      <div
+        v-else
+        class="skeleton-box rounded-sm"
+        :style="[{ width: '100%', height: `${secondary?.fontSize || 12 * 1.2}px` }]"
+      ></div>
+    </template>
   </div>
 </template>
 
@@ -66,6 +92,7 @@ export interface IBigNumber {
     value?: string;
   };
   icon?: boolean;
+  loading?: boolean;
 }
 const props = defineProps<IBigNumber>();
 </script>

src/common/components/Chart.vue

@@ -1,38 +1,109 @@
 <template>
   <div
-    ref="plotContainer"
-    class="flex items-center justify-center"
-  />
+    class="relative my-4"
+    ref="container"
+  >
+    <div
+      v-if="!disableSkeleton && isLoading"
+      class="skeleton-loader absolute inset-0 flex items-end justify-center gap-1 rounded p-2"
+    >
+      <div
+        v-for="n in numberOfBars"
+        :key="n"
+        class="blink bg-gray-300"
+        :style="{ width: barWidth + 'px', height: randomHeight() }"
+      ></div>
+    </div>
+    <div
+      ref="plotContainer"
+      class="flex items-center justify-center"
+      :class="[{ 'opacity-0': isLoading && !disableSkeleton }]"
+    ></div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { select } from "d3";
-import { onMounted, onUnmounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "vue";
 import { Logger } from "../utils";
 
 export interface IChart {
   updateChart: Function;
   fns: Function[];
   getClosestDataPoint: Function;
+  loader?: boolean;
+  disableSkeleton?: boolean;
 }
 
 const tooltip = select("body").append("div").attr("class", "custom-tooltip").style("opacity", 0);
 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 () => {
-  props.updateChart(plotContainer.value, tooltip);
+  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));
 });
 
-function updateChart() {
-  props.updateChart(plotContainer.value, tooltip);
-}
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateNumberOfBars);
+});
 
 onUnmounted(() => {
   tooltip.remove();
 });
 
-defineExpose({ update: updateChart });
+function update() {
+  props.updateChart(plotContainer.value, tooltip);
+  isLoading.value = false;
+}
+
+watch(
+  () => plotContainer.value,
+  () => {
+    const containerHeight = plotContainer.value?.clientHeight || 0;
+    maxHeight.value = containerHeight - 50;
+  }
+);
+
+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/locales/cn.json

@@ -559,6 +559,10 @@
     "receive-stepper": "Receive",
     "transactions-summary": "Transactions summary",
     "price-per-asset": "Price Per",
-    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>"
+    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>",
+    "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."
   }
 }

src/locales/en.json

@@ -450,7 +450,7 @@
     "toast-repaid": "Position is repaid successfully",
     "toast-closed": "Position is closed successfully",
     "closing-title": "Position Now Closing",
-    "closing-description": "his usually takes less than a minutes",
+    "closing-description": "This usually takes less than a minutes",
     "repaid-title": "This position is being repaid",
     "repaid-description": "This usually takes less than 2 minutes. Please wait a moment or check back later",
     "repaying": "Repaying",
@@ -548,6 +548,10 @@
     "receive-stepper": "Receive",
     "transactions-summary": "Transactions summary",
     "price-per-asset": "Price Per",
-    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>"
+    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>",
+    "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."
   }
-}
+}

src/locales/es.json

@@ -553,6 +553,10 @@
     "receive-stepper": "Receive",
     "transactions-summary": "Transactions summary",
     "price-per-asset": "Price Per",
-    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>"
+    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>",
+    "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."
   }
 }

src/locales/fr.json

@@ -559,6 +559,10 @@
     "receive-stepper": "Receive",
     "transactions-summary": "Transactions summary",
     "price-per-asset": "Price Per",
-    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>"
+    "preview-closed-paid-partuial-debt": "You will pay off - <strong>{amount}</strong> of the debt at a rate of <strong>{price} per {asset}</strong> with <strong>{fee} in DEX fees</strong>",
+    "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."
   }
 }