From 25e1616b4292280d1146a2268542988dca162068 Mon Sep 17 00:00:00 2001
From: yuriy <yuriy.menkov@latoken.com>
Date: Sat, 24 Oct 2020 01:16:40 +0300
Subject: [PATCH] total locked value in USD #51

---
 src/pages/Tokens/index.tsx              | 54 ++++++++++++++++++++-----
 src/services/index.ts                   |  6 +--
 src/stores/Tokens.ts                    |  9 +++++
 src/stores/core/ListStoreConstructor.ts | 17 ++++----
 src/stores/interfaces.ts                |  1 +
 5 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx
index 8c3d2f82..fd1894f0 100644
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@@ -73,23 +73,38 @@ const getColumns = ({ hmyLINKBalanceManager }): IColumn<ITokenInfo>[] => [
     title: 'HRC20 Address',
     key: 'hrc20Address',
     dataIndex: 'hrc20Address',
-    width: 280,
+    width: 300,
     render: value => oneAddress(getBech32Address(value)),
   },
-  {
-    title: 'Decimals',
-    key: 'decimals',
-    dataIndex: 'decimals',
-    width: 100,
-    className: styles.centerHeader,
-    align: 'center',
-  },
+  // {
+  //   title: 'Decimals',
+  //   key: 'decimals',
+  //   dataIndex: 'decimals',
+  //   width: 100,
+  //   className: styles.centerHeader,
+  //   align: 'center',
+  // },
   {
     title: 'Total Locked',
-    sortable: true,
+    // sortable: true,
     key: 'totalLockedNormal',
     dataIndex: 'totalLockedNormal',
-    width: 200,
+    width: 140,
+    render: value => (
+      <Box direction="column" justify="center">
+        {formatWithTwoDecimals(value)}
+      </Box>
+    ),
+    // className: styles.centerHeader,
+    // align: 'center',
+  },
+  {
+    title: 'Total Locked USD',
+    sortable: true,
+    key: 'totalLockedUSD',
+    defaultSort: 'asc',
+    dataIndex: 'totalLockedUSD',
+    width: 210,
     className: styles.rightHeaderSort,
     align: 'right',
     render: value => (
@@ -149,6 +164,23 @@ export const Tokens = observer((props: any) => {
           pad={{ horizontal: 'medium' }}
         >
           <Title>Bridged Assets</Title>
+
+          <Box direction="column">
+            <Title size="small">
+              Total Value Locked (USD){' '}
+              <span
+                style={{
+                  marginLeft: 5,
+                  color: '#47b8eb',
+                  fontWeight: 600,
+                  letterSpacing: 0.2
+                }}
+              >
+                {formatWithTwoDecimals(tokens.totalLockedUSD)}
+              </span>
+            </Title>
+          </Box>
+
           <Text>{`Last update: ${lastUpdateAgo}sec ago`}</Text>
         </Box>
 
diff --git a/src/services/index.ts b/src/services/index.ts
index ea9bddc1..84417119 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,6 +1,5 @@
 import { IOperation, ITokenInfo } from '../stores/interfaces';
 import * as agent from 'superagent';
-import { divDecimals } from '../utils';
 
 const servers = require('../../appengine-servers.json');
 
@@ -121,10 +120,7 @@ export const getTokensInfo = async (
     params,
   );
 
-  const content = res.body.content.map(t => ({
-    ...t,
-    totalLockedNormal: divDecimals(t.totalLocked, t.decimals),
-  }));
+  const content = res.body.content;
 
   return { ...res.body, content };
 };
diff --git a/src/stores/Tokens.ts b/src/stores/Tokens.ts
index 48f62236..90cbde86 100644
--- a/src/stores/Tokens.ts
+++ b/src/stores/Tokens.ts
@@ -2,6 +2,7 @@ import { ITokenInfo } from './interfaces';
 import { IStores } from './index';
 import * as services from 'services';
 import { ListStoreConstructor } from './core/ListStoreConstructor';
+import { computed } from 'mobx';
 
 export class Tokens extends ListStoreConstructor<ITokenInfo> {
   constructor(stores: IStores) {
@@ -9,6 +10,14 @@ export class Tokens extends ListStoreConstructor<ITokenInfo> {
       pollingInterval: 30000,
       isLocal: true,
       paginationData: { pageSize: 100 },
+      sorter: 'totalLockedUSD, asc',
+      sorters: {
+        totalLockedUSD: 'asc',
+      },
     });
   }
+
+  @computed get totalLockedUSD() {
+    return this.data.reduce((acc, v) => acc + Number(v.totalLockedUSD), 0);
+  }
 }
diff --git a/src/stores/core/ListStoreConstructor.ts b/src/stores/core/ListStoreConstructor.ts
index ee57dd37..6d4f4844 100644
--- a/src/stores/core/ListStoreConstructor.ts
+++ b/src/stores/core/ListStoreConstructor.ts
@@ -27,7 +27,7 @@ export interface ListData<T> {
 interface IListStoreOptions {
   pollingInterval?: number;
   paginationData?: IPagination;
-  sorter?: string[];
+  sorter?: string | string[];
   sorters?: ISorters;
   filters?: IFilters;
   isLocal?: boolean;
@@ -96,7 +96,7 @@ export class ListStoreConstructor<T> extends StoreConstructor {
     this.pollingInterval = pollingInterval;
 
     this.sorters = options.sorters || {};
-    this.sorter = 'none';
+    this.sorter = options.sorter || 'none';
     this.filters = options.filters || {};
 
     this.isLocal = options.isLocal;
@@ -241,15 +241,16 @@ export class ListStoreConstructor<T> extends StoreConstructor {
   @computed
   get sortedData() {
     if (!this.isLocal) return this.filteredData;
-    if (
-      !this.sorter ||
-      this.sorter === 'none' ||
-      this.sorter instanceof Array
-    ) {
+
+    console.log(this.sorter);
+
+    if (!this.sorter || this.sorter === 'none') {
       return this.filteredData;
     }
 
-    const [index, direction] = this.sorter.split(',');
+    const sorter = Array.isArray(this.sorter) ? this.sorter[0] : this.sorter;
+
+    const [index, direction] = sorter.split(',');
     const dir = direction === 'asc' ? 1 : -1;
     return this.filteredData.sort((a, b) => {
       return Number(a[index]) < Number(b[index]) ? dir : -dir;
diff --git a/src/stores/interfaces.ts b/src/stores/interfaces.ts
index ab8e60d7..a954ccb3 100644
--- a/src/stores/interfaces.ts
+++ b/src/stores/interfaces.ts
@@ -66,4 +66,5 @@ export interface ITokenInfo {
   hrc20Address: string;
   totalLocked: string;
   totalLockedNormal: string;
+  totalLockedUSD: string;
 }