From ef30700313dda51cd57cb1b41c885b694e1ebb37 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 18 Jun 2023 08:38:26 +0800
Subject: [PATCH] adding currency.

---
 src/modules/wallet/accounts.vue  |  21 ++--
 src/modules/wallet/portfolio.vue | 209 ++++++++++++++++++-------------
 2 files changed, 133 insertions(+), 97 deletions(-)

diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue
index 961f6cc5..01fafc04 100644
--- a/src/modules/wallet/accounts.vue
+++ b/src/modules/wallet/accounts.vue
@@ -228,14 +228,14 @@ async function loadBalances(endpoint: string, address: string) {
 </script>
 <template>
   <div>
-    <div class="overflow-x-auto w-full card">
-      <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
-        <div class="min-w-0 flex-1">
+    <div class="overflow-x-auto w-full rounded-lg">
+      <div class="flex flex-wrap justify-between bg-base-100 p-5">
+        <div class="min-w-0">
           <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
             Accounts
           </h2>
           <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
-            <div class="mt-2 flex items-center text-sm text-gray-500">
+            <div class="mt-2 items-center text-sm text-gray-500 hidden md:!flex">
               <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
                 aria-hidden="true">
                 <path fill-rule="evenodd"
@@ -248,7 +248,7 @@ async function loadBalances(endpoint: string, address: string) {
             </div>
           </div>
         </div>
-        <div class="mt-5 flex flex-col lg:!ml-4 lg:!mt-0 text-right">
+        <div class="flex flex-col text-right">
           <span>Total Value</span>
           <span class="text-xl text-success font-bold">${{ format.formatNumber(totalValue, '0,0.[00]') }}</span>
           <span class="text-sm" :class="format.color(totalChange)">{{ format.formatNumber(totalChange, '+0,0.[00]')
@@ -286,7 +286,7 @@ async function loadBalances(endpoint: string, address: string) {
           <div>
             <div class=" max-w-md overflow-hidden"><div class="font-bold">{{ key }}</div></div>
             <div class="dropdown">
-              <label tabindex="0" class="">{{ subaccounts.length }} addresses</label>
+              <label tabindex="0" class=" cursor-pointer">{{ subaccounts.length }} addresses</label>
               <ul tabindex="0" class=" -left-14 dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50">
                 <li v-for="x in subaccounts">
                 <a>
@@ -301,10 +301,9 @@ async function loadBalances(endpoint: string, address: string) {
             </div>
           </div>
         </div>
-        <div class="divider"></div>
+        <div class="p-4 bg-base-200 mt-2">Delegations</div>
         <div>
-          <div class="my-4 ml-6">Delegations</div>
-          <ul class="!menu bg-base-200 w-full rounded-box ">
+          <ul class="!menu w-full">
             <div v-for="x in subaccounts">
               <li v-if="x.delegation.amount">
                 <RouterLink :to="`/${x.account.chainName}/account/${x.account.address}`">
@@ -321,9 +320,9 @@ async function loadBalances(endpoint: string, address: string) {
             </div>
           </ul>
         </div>
+        <div class="p-4 bg-base-200">Balances</div>
         <div>
-          <div class="my-4 ml-6">Balances</div>
-          <ul class="!menu bg-base-200 w-full rounded-box ">
+          <ul class="!menu w-full">
             <div v-for="s in subaccounts">
               <li v-for="x in s.balances">
                 <RouterLink :to="`/${s.account.chainName}/account/${s.account.address}`">
diff --git a/src/modules/wallet/portfolio.vue b/src/modules/wallet/portfolio.vue
index 6b733698..57127e65 100644
--- a/src/modules/wallet/portfolio.vue
+++ b/src/modules/wallet/portfolio.vue
@@ -21,8 +21,42 @@ const balances = ref({} as Record<string, Coin[]>);
 const delegations = ref({} as Record<string, Delegation[]>);
 const tokenMeta = ref({} as Record<string, AccountEntry>);
 
+const priceloading = ref(false)
+const currency = ref('cny')
+const prices = ref([] as {
+  id: string,
+  symbol: string,
+  name: string,
+  image: string,
+  current_price: number,
+  market_cap: number,
+  market_cap_rank: number,
+  fully_diluted_valuation: number,
+  total_volume: number, high_24h: number,
+  low_24h: number,
+  price_change_24h: number, price_change_percentage_24h: number, market_cap_change_24h: number,
+  market_cap_change_percentage_24h: number,
+  circulating_supply: number, total_supply: number,
+  max_supply: number,
+  ath: number,
+  ath_change_percentage: number,
+  ath_date: string,
+  atl: string,
+  atl_change_percentage: number,
+  atl_date: string, roi: string, last_updated: string,
+  sparkline_in_7d: { prices: number[] }
+}[])
+
 const loading = ref(0)
 const loaded = ref(0)
+watchEffect(() => {
+  if (loading.value > 0 && loading.value === loaded.value) {
+    if (!priceloading.value) {
+      priceloading.value = true
+      loadPrice()
+    }
+  }
+})
 
 Object.values(conf.value).forEach((imported) => {
   if (imported)
@@ -49,61 +83,6 @@ Object.values(conf.value).forEach((imported) => {
     });
 });
 
-const tokenValues = computed(() => {
-  const values = {} as Record<string, number>;
-  Object.values(balances.value).forEach((b) => {
-    b.forEach((coin) => {
-      const v = parseFloat(format.tokenValueNumber(coin).toFixed(2));
-      if (v) {
-        if (values[coin.denom]) {
-          values[coin.denom] += v;
-        } else {
-          values[coin.denom] = v;
-        }
-      }
-    });
-  });
-  Object.values(delegations.value).forEach((b) => {
-    b.forEach((d) => {
-      const v = parseFloat(format.tokenValueNumber(d.balance).toFixed(2));
-      if (v) {
-        if (values[d.balance.denom]) {
-          values[d.balance.denom] += v;
-        } else {
-          values[d.balance.denom] = v;
-        }
-      }
-    });
-  });
-  return values;
-});
-
-const totalValue = computed(() => {
-  return Object.values(tokenValues.value).reduce((a, s) => a + s, 0);
-});
-
-const tokenList = computed(() => {
-  const list = [] as {
-    denom: string;
-    value: number;
-    logo: string;
-    chainName: string;
-    percentage: number;
-  }[];
-  Object.keys(tokenValues.value).map((x) => {
-    list.push({
-      denom: x,
-      value: tokenValues.value[x],
-      chainName: tokenMeta.value[x]?.chainName,
-      logo: tokenMeta.value[x]?.logo,
-      percentage: tokenValues.value[x] / totalValue.value,
-    });
-  });
-  return list.filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
-});
-
-const priceloading = ref(false)
-const prices = ref([])
 const tokenQty = computed(() => {
   const values = {} as Record<string, { coinId: string, qty: number }>;
   Object.values(balances.value).forEach((b) => {
@@ -132,23 +111,61 @@ const tokenQty = computed(() => {
   });
   return values;
 });
-watchEffect(() => {
-  if (loading.value > 0 && loading.value === loaded.value) {
-    if (!priceloading.value) {
-      const ids = Object.values(tokenQty.value).map(x => x.coinId).join(',')
-      priceloading.value = true
-      get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=true&price_change_percentage=14d&locale=en`)
-        .then(res => {
-          prices.value = res
-        })
-    }
-  }
-})
 
+const tokenValues = computed(() => {
+  const values = {} as Record<string, number>;
+  Object.keys(tokenQty.value).forEach(k => {
+    const x = tokenQty.value[k]
+    const marketData = prices.value.find((p: any) => p.id === x.coinId)
+    values[k] = marketData? x.qty * marketData.current_price : 0
+  })
+  return values;
+});
+
+const totalValue = computed(() => {
+  return Object.values(tokenValues.value).reduce((a, s) => a + s, 0);
+});
+
+const tokenList = computed(() => {
+  const list = [] as {
+    denom: string;
+    value: number;
+    logo: string;
+    chainName: string;
+    percentage: number;
+  }[];
+  Object.keys(tokenValues.value).map((x) => {
+    list.push({
+      denom: x,
+      value: tokenValues.value[x],
+      chainName: tokenMeta.value[x]?.chainName,
+      logo: tokenMeta.value[x]?.logo,
+      percentage: tokenValues.value[x] / totalValue.value,
+    });
+  });
+  return list.filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
+});
+
+function loadPrice() {
+  const ids = Object.values(tokenQty.value).map(x => x.coinId).join(',')
+  get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency.value}&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=true&price_change_percentage=14d&locale=en`)
+    .then(res => {
+      prices.value = res
+    })
+}
+const totalChangeIn24 = computed(() => {
+  return Object.values(tokenQty.value).map(x => {
+    const marketData = prices.value.find((p: any) => p.id === x.coinId)
+    if (marketData)
+      return x.qty * (marketData.price_change_24h || 0)
+    return 0
+  }).reduce((s, c) => s + c, 0)
+})
+// Compute data for trend chart
 const changeData = computed(() => {
   const vals = Object.keys(tokenQty.value).map(denom => {
     const token = tokenQty.value[denom]
-    const marketData: any = prices.value.find((x: any) => x.id === token.coinId)
+    const marketData: any = prices.value.find((x) => x.id === token.coinId)
     if (marketData) {
       return marketData.sparkline_in_7d?.price.map((p: number) => p * token.qty) as number[]
     }
@@ -177,37 +194,57 @@ const chartConfig = computed(() => {
   }
   return getMarketPriceChartConfig(theme, labels);
 });
+
+const currencySign = computed(() => {
+  switch(currency.value) {
+    case 'usd': return '$'
+    case 'cny': return '¥'
+    case 'eur': return '€'
+    case 'hkd': return 'HK$'
+    case 'jpy': return '¥'
+    case 'sdg': return 'S$'
+    case 'krw': return '₩'
+    case 'btc': return 'BTC'
+    case 'eth': return 'ETH'
+  }
+  return '$'
+})
 </script>
 <template>
-  <div class="overflow-x-auto w-full card">
-    <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
-      <div class="min-w-0 flex-1">
+  <div class="overflow-x-auto w-full rounded-lg">
+    <div class="flex flex-wrap justify-between bg-base-100 p-5">
+      <div class="min-w-0">
         <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
           Portfolio
         </h2>
-        <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
-          <div class="mt-2 flex items-center text-sm text-gray-500">
-            <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
-              aria-hidden="true">
-              <path fill-rule="evenodd"
-                d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
-                clip-rule="evenodd" />
-              <path
-                d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
-            </svg>
-            Track all your assets in one page
+        <div>
+          <div class="flex items-center text-sm text-gray-500">
+            Currency: <select v-model="currency" @change="loadPrice" class="ml-1 uppercase">
+              <option>usd</option>
+              <option>cny</option>
+              <option>eur</option>
+              <option>hkd</option>
+              <option>jpy</option>
+              <option>sgd</option>
+              <option>krw</option>
+              <option>btc</option>
+              <option>eth</option>
+            </select>
           </div>
         </div>
       </div>
-      <div class="mt-5 lg:!ml-4 lg:!mt-0 text-right">
+      <div class="text-right">
         <div>Total Value</div>
-        <div class="text-success font-bold">${{ format.formatNumber(totalValue, '0,0.[00]') }}</div>
+        <div class="text-success font-bold">{{ currencySign }} {{ format.formatNumber(totalValue, '0,0.[00]') }}</div>
+        <div class="text-xs" :class="{ 'text-success': totalChangeIn24 > 0, 'text-error': totalChangeIn24 < 0 }">
+          {{ format.formatNumber(totalChangeIn24, '+0,0.[00]') }}
+        </div>
       </div>
     </div>
     <div class="bg-base-100">
       <div v-if="tokenList" class="grid grid-cols-1 md:grid-cols-3">
         <div>
-          <DonutChart  height="280" :series="Object.values(tokenValues)"
+          <DonutChart height="280" :series="Object.values(tokenValues)"
             :labels="Object.keys(tokenValues).map(x => format.tokenDisplayDenom(x)?.toUpperCase())" />
         </div>
         <div class="md:col-span-2">
@@ -237,7 +274,7 @@ const chartConfig = computed(() => {
                   <span class="capitalize ">{{ x.chainName }} </span>
                 </div>
               </td>
-              <td class="text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}</td>
+              <td class="text-right">{{ currencySign }}{{ format.formatNumber(x.value, '0,0.[00]') }}</td>
               <td class="text-right">{{ format.percent(x.percentage) }}</td>
             </tr>
           </tbody>