update interface

package.json

@@ -21,7 +21,7 @@
     "axios-hooks": "^4.0.0",
     "craco-less": "^1.20.0",
     "dexy-sdk-ts": "0.2.0",
-    "ergo-lib-wasm-browser": "^0.21.0",
+    "ergo-lib-wasm-browser": "^0.23.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "lodash": "^4.17.21",
     "luxon": "^2.1.1",

src/common/models/PoolChartData.ts

@@ -1,8 +1,5 @@
 import { DateTime } from 'luxon';
 
-import { AssetInfo } from './AssetInfo';
-import { Ratio } from './Ratio';
-
 interface PoolChartDataRaw {
   reservesCount: number;
   timestamp: number;
@@ -18,14 +15,9 @@ export class PoolChartData {
   constructor(private raw: PoolChartDataRaw) {
     this.ts = this.raw.timestamp;
     this.reservesCount = this.raw.reservesCount;
-    // this.invertedPrice = this.price.invertRatio();
     this.date = DateTime.fromMillis(this.raw.timestamp);
   }
 
-  // getRatio(isInverted = false): Ratio {
-  //   return isInverted ? this.invertedPrice : this.price;
-  // }
-
   clone(raw?: Partial<PoolChartDataRaw>): PoolChartData {
     return new PoolChartData({ ...this.raw, ...raw });
   }

src/components/BankInfo/BankInfo.tsx

@@ -42,11 +42,7 @@ const BankInfo = () => {
           <Typography.Body
             style={{ fontSize: valBySize('12px', '14px', '16px') }}
           >
-            1 DexyGOLD ={' '}
-            {new Currency(
-              mint.getMintObject().oracleRate(),
-              ergAsset,
-            ).toString()}{' '}
+            1 DexyGOLD = {new Currency(mint.oracleRate(), ergAsset).toString()}{' '}
             ERG
           </Typography.Body>
         </div>
@@ -66,9 +62,7 @@ const BankInfo = () => {
           <Typography.Body
             style={{ fontSize: valBySize('12px', '14px', '16px') }}
           >
-            1 DexyGOLD ={' '}
-            {new Currency(mint.getMintObject().lpRate(), ergAsset).toString()}{' '}
-            ERG
+            1 DexyGOLD = {new Currency(mint.lpRate(), ergAsset).toString()} ERG
           </Typography.Body>
         </div>
       </Flex.Item>

src/components/BankReservesGraph/BankReservesGraph.tsx

@@ -30,11 +30,10 @@ import styled from 'styled-components';
 import { ergAsset } from '../../common/assets/ergAsset';
 import { DateTimeView } from '../../common/components/DateTimeView/DateTimeView';
 import { Truncate } from '../../common/components/Truncate/Truncate';
-import { useObservable } from '../../common/hooks/useObservable';
 import { Currency } from '../../common/models/Currency';
 import { PoolChartData } from '../../common/models/PoolChartData';
-import { bankReservesGraph } from '../../mockData/chart';
 import { useAggregatedByDateData } from './useAggregatedByDateData';
+import { useChartData } from './useChartData';
 import { Period, usePeriodSettings } from './usePeriodSettings';
 import { useTicks } from './useTicks';
 
@@ -80,7 +79,17 @@ export const BankReservesGraph: React.FC = () => {
     usePeriodSettings(defaultActivePeriod);
 
   const ticks = useTicks(tick, durationOffset, [defaultActivePeriod]);
-  const rawData = bankReservesGraph.map((value) => new PoolChartData(value));
+
+  const params = useMemo(
+    () => ({
+      start: DateTime.now().minus(durationOffset).valueOf(),
+      end: DateTime.now().valueOf(),
+    }),
+    [durationOffset],
+  );
+  const [getChartData] = useChartData(params);
+  const rawData = getChartData?.map((value) => new PoolChartData(value)) ?? [];
+
   const data = useAggregatedByDateData(rawData, ticks);
 
   // recharts couldn't animate when dataKey is changed

src/components/BankReservesGraph/useChartData.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { applicationConfig } from '../../applicationConfig';
+import { useAxios } from '../../utils/axios';
+
+export const useChartData = ({
+  start,
+  end,
+}: {
+  start: number;
+  end: number;
+}) => {
+  const [requestState, runRequest] = useAxios<any>(
+    {
+      url: `${applicationConfig.dexybankUrl}/gold/bankReserve`,
+      method: 'GET',
+      params: {
+        start,
+        end,
+      },
+    },
+    { useCache: false },
+  );
+
+  const refresh = useCallback(() => {
+    runRequest();
+  }, [runRequest]);
+
+  return [
+    requestState.data,
+    requestState.loading,
+    requestState.error,
+    refresh,
+  ] as const;
+};

src/components/CirculationSupply/CirculationSupply.tsx

@@ -34,6 +34,7 @@ import { Currency } from '../../common/models/Currency';
 import { PoolChartData } from '../../common/models/PoolChartData';
 import { bankReservesGraph } from '../../mockData/chart';
 import { useAggregatedByDateData } from './useAggregatedByDateData';
+import { useChartData } from './useChartData';
 import { Period, usePeriodSettings } from './usePeriodSettings';
 import { useTicks } from './useTicks';
 
@@ -79,7 +80,16 @@ export const CirculationSupply: React.FC = () => {
     usePeriodSettings(defaultActivePeriod);
 
   const ticks = useTicks(tick, durationOffset, [defaultActivePeriod]);
-  const rawData = bankReservesGraph.map((value) => new PoolChartData(value));
+  const params = useMemo(
+    () => ({
+      start: DateTime.now().minus(durationOffset).valueOf(),
+      end: DateTime.now().valueOf(),
+    }),
+    [durationOffset],
+  );
+  const [getChartData] = useChartData(params);
+  const rawData = getChartData?.map((value) => new PoolChartData(value)) ?? [];
+
   const data = useAggregatedByDateData(rawData, ticks);
 
   // recharts couldn't animate when dataKey is changed

src/components/CirculationSupply/useChartData.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { applicationConfig } from '../../applicationConfig';
+import { useAxios } from '../../utils/axios';
+
+export const useChartData = ({
+  start,
+  end,
+}: {
+  start: number;
+  end: number;
+}) => {
+  const [requestState, runRequest] = useAxios<any>(
+    {
+      url: `${applicationConfig.dexybankUrl}/gold/circulationSupply`,
+      method: 'GET',
+      params: {
+        start,
+        end,
+      },
+    },
+    { useCache: false },
+  );
+
+  const refresh = useCallback(() => {
+    runRequest();
+  }, [runRequest]);
+
+  return [
+    requestState.data,
+    requestState.loading,
+    requestState.error,
+    refresh,
+  ] as const;
+};