mod/reopen-virtual-portfolio

src/UI/VirtualPortfolio/Allocation.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+  import { isDarkMode } from "~/store";
+  import { formatPercent, formatValue, formatCurrency } from "~/utils/index";
+  import { i18n } from "~/lib/i18n";
+
+  import EChart from "~/components/EChart.svelte";
+  import Loading from "~/components/Loading.svelte";
+
+  import defaultToken from "~/assets/defaultToken.png";
+
+  export let isLoading;
+  export let listTokenHolding;
+
+  const MultipleLang = {
+    token_allocation: i18n("newtabPage.token-allocation", "Token Allocation"),
+    nft_allocation: i18n("newtabPage.nft-allocation", "NFT Allocation"),
+    performance: i18n("newtabPage.performance", "Performance"),
+    Balance: i18n("newtabPage.Balance", "Balance"),
+    Ratio: i18n("newtabPage.Ratio", "Ratio"),
+    Value: i18n("newtabPage.Value", "Value"),
+  };
+
+  let optionPie = {
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "item",
+      extraCssText: "z-index: 9997",
+      formatter: function (params) {
+        return `
+            <div style="display: flex; flex-direction: column; gap: 12px; min-width: 220px;">
+              <div style="display: flex; align-items: centers; gap: 4px">
+                <img src=${params?.data?.logo || defaultToken}
+                onerror="this.onerror=null;this.src='${defaultToken}';"
+                alt="" width=20 height=20 style="border-radius: 100%" />
+                <div style="font-weight: 500; font-size: 16px; line-height: 19px; color: ${
+                  $isDarkMode ? "white" : "black"
+                }">
+                  ${params?.name} ${
+                    params?.data?.symbol ? `(${params?.data?.symbol})` : ""
+                  }
+                </div>
+              </div>
+
+              ${
+                params?.data?.name_balance.length !== 0
+                  ? `
+                <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: ${
+                  $isDarkMode ? "white" : "black"
+                }">
+                  <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                    ${MultipleLang[params?.data?.name_balance]}
+                  </div>
+                  <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                    ${formatCurrency(params?.data?.value_balance)}
+                  </div>
+                </div>
+              `
+                  : ""
+              }
+
+              <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: ${
+                $isDarkMode ? "white" : "black"
+              }">
+                <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                  ${MultipleLang[params?.data?.name_value]}
+                </div>
+                <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                  ${formatValue(params?.data?.value_value)}
+                </div>
+              </div>
+
+              <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: ${
+                $isDarkMode ? "white" : "black"
+              }">
+                <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                  ${MultipleLang[params?.data?.name_ratio]}
+                </div>
+                <div style="grid-template-columns: repeat(1, minmax(0, 1fr)); font-weight: 500; font-size: 14px; line-height: 17px;">
+                  ${formatPercent(params?.value)}%
+                </div>
+              </div>
+            </div>`;
+      },
+    },
+    legend: {
+      type: "scroll",
+      top: "0%",
+      left: "center",
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "60%"],
+        left: 0,
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: "bold",
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [],
+      },
+    ],
+  };
+
+  const formatDataPie = (data) => {
+    return data?.map((item) => {
+      if (isNaN(item.value)) {
+        return {
+          ...item,
+          value: 0,
+        };
+      } else {
+        return item;
+      }
+    });
+  };
+
+  const formatTokenBreakdown = (data) => {
+    const formatData = data.filter((item) => Number(item.value) > 0);
+
+    const sumToken = (formatData || []).reduce(
+      (prev, item) => prev + Number(item?.value),
+      0
+    );
+
+    const sortBreakdownToken = formatData?.sort((a, b) => {
+      if (a.value < b.value) {
+        return 1;
+      }
+      if (a.value > b.value) {
+        return -1;
+      }
+      return 0;
+    });
+
+    const topFiveBreakdownToken = sortBreakdownToken
+      ?.slice(0, 5)
+      .map((item) => {
+        return {
+          ...item,
+          id: item.coinId || "N/A",
+          symbol: item.symbol || "N/A",
+          name: item.name || "N/A",
+        };
+      });
+
+    const orderBreakdownToken = sortBreakdownToken?.slice(
+      5,
+      sortBreakdownToken.length
+    );
+
+    const sumOrderBreakdownToken = (orderBreakdownToken || []).reduce(
+      (prev, item) => prev + Number(item.value),
+      0
+    );
+
+    const dataPieChartOrderBreakdownToken = [
+      {
+        logo: defaultToken,
+        name: "Other tokens",
+        symbol: "",
+        name_ratio: "Ratio",
+        value: (sumOrderBreakdownToken / sumToken) * 100,
+        name_value: "Value",
+        value_value: sumOrderBreakdownToken,
+        name_balance: "",
+        value_balance: 0,
+      },
+    ];
+
+    const formatDataPieChartTopFiveToken = topFiveBreakdownToken?.map(
+      (item) => {
+        return {
+          logo: item.logo || defaultToken,
+          name: item.name || item.symbol,
+          symbol: item.symbol,
+          name_ratio: "Ratio",
+          value: Number(item.percent),
+          name_value: "Value",
+          value_value: Number(item.value),
+          name_balance: "Balance",
+          value_balance: Number(item.amount),
+        };
+      }
+    );
+
+    const dataPieChartToken =
+      sumOrderBreakdownToken > 0
+        ? formatDataPieChartTopFiveToken?.concat(
+            dataPieChartOrderBreakdownToken
+          )
+        : formatDataPieChartTopFiveToken;
+
+    optionPie = {
+      ...optionPie,
+      legend: {
+        ...optionPie.legend,
+        formatter: function (name) {
+          const selected = dataPieChartToken.find(
+            (item) => item.name.toLowerCase() === name.toLowerCase()
+          );
+          return selected?.symbol || name;
+        },
+      },
+      series: [
+        {
+          ...optionPie.series[0],
+          data: formatDataPie(dataPieChartToken),
+        },
+      ],
+    };
+  };
+
+  $: {
+    if (listTokenHolding.length !== 0) {
+      formatTokenBreakdown(listTokenHolding);
+    }
+  }
+
+  $: theme = $isDarkMode ? "dark" : "white";
+</script>
+
+<div
+  class={`rounded-[20px] xl:p-6 py-4 px-3 ${
+    $isDarkMode ? "bg-[#222222]" : "bg-[#fff] xl:border border_0000001a"
+  }`}
+>
+  <div class="text-3xl font-medium xl:text-2xl mb-6">Allocation</div>
+
+  {#if isLoading}
+    <div class="flex items-center justify-center h-[465px]">
+      <Loading />
+    </div>
+  {:else}
+    <div class="h-full">
+      {#if listTokenHolding.length === 0}
+        <div
+          class="flex justify-center items-center h-[465px] text-base text-gray-400"
+        >
+          Empty
+        </div>
+      {:else}
+        <EChart
+          id="pie-chart-token-allocation-virtual"
+          {theme}
+          notMerge={true}
+          option={optionPie}
+          height={465}
+        />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style windi:preflights:global windi:safelist:global></style>