update is not available state / charts

ergoplatform · Nov 1, 2023 · 442e6c8 · 442e6c8
1 parent 9880c75
commit 442e6c8
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 53 deletions.
diff --git a/src/common/components/OperationForm/OperationForm.tsx b/src/common/components/OperationForm/OperationForm.tsx
@@ -67,7 +67,7 @@ export function OperationForm<T>({
         loading: false,
         caption: CHECK_INTERNET_CONNECTION_CAPTION,
       });
-    } else if (isMintAvailable) {
+    } else if (!isMintAvailable) {
       setButtonProps({
         disabled: true,
         loading: false,

diff --git a/src/common/models/BankReservesData.ts b/src/common/models/BankReservesData.ts
@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+
+interface BankReservesDataRaw {
+  date: number;
+  value: number;
+}
+
+export class BankReservesData {
+  // public readonly price: Ratio;
+  // public readonly invertedPrice: Ratio;
+  public readonly date: DateTime;
+  public readonly ts: number;
+  public readonly reservesCount: number;
+
+  constructor(private raw: BankReservesDataRaw) {
+    this.ts = this.raw.date;
+    this.reservesCount = this.raw.value / 1e9;
+    this.date = DateTime.fromMillis(this.raw.date);
+  }
+
+  clone(raw?: Partial<BankReservesDataRaw>): BankReservesData {
+    return new BankReservesData({ ...this.raw, ...raw });
+  }
+}
diff --git a/src/common/models/CirculationSupplyData.ts b/src/common/models/CirculationSupplyData.ts
@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+
+interface CirculationSupplyDataRaw {
+  date: number;
+  tokenAmount: number;
+}
+
+export class CirculationSupplyData {
+  // public readonly price: Ratio;
+  // public readonly invertedPrice: Ratio;
+  public readonly date: DateTime;
+  public readonly ts: number;
+  public readonly reservesCount: number;
+
+  constructor(private raw: CirculationSupplyDataRaw) {
+    this.ts = this.raw.date;
+    this.reservesCount = this.raw.tokenAmount;
+    this.date = DateTime.fromMillis(this.raw.date);
+  }
+
+  clone(raw?: Partial<CirculationSupplyDataRaw>): CirculationSupplyData {
+    return new CirculationSupplyData({ ...this.raw, ...raw });
+  }
+}
diff --git a/src/common/models/PoolChartData.ts b/src/common/models/PoolChartData.ts
diff --git a/src/components/BankReservesGraph/BankReservesGraph.tsx b/src/components/BankReservesGraph/BankReservesGraph.tsx
@@ -30,8 +30,8 @@ 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 { BankReservesData } from '../../common/models/BankReservesData';
 import { Currency } from '../../common/models/Currency';
-import { PoolChartData } from '../../common/models/PoolChartData';
 import { useAggregatedByDateData } from './useAggregatedByDateData';
 import { useChartData } from './useChartData';
 import { Period, usePeriodSettings } from './usePeriodSettings';
@@ -88,16 +88,17 @@ export const BankReservesGraph: React.FC = () => {
     [durationOffset],
   );
   const [getChartData] = useChartData(params);
-  const rawData = getChartData?.map((value) => new PoolChartData(value)) ?? [];
+  const rawData =
+    getChartData?.map((value) => new BankReservesData(value)) ?? [];
 
   const data = useAggregatedByDateData(rawData, ticks);
 
   // recharts couldn't animate when dataKey is changed
   const chartData = useMemo(() => [...data], [data]);
 
-  const [activeData, setActiveData] = useState<PoolChartData | null>();
+  const [activeData, setActiveData] = useState<BankReservesData | null>();
 
-  const bankReserveValue = new Currency(39342343n, ergAsset);
+  const bankReserveValue = new Currency(0n, ergAsset);
 
   const isEmpty = data.length === 0;
 

diff --git a/src/components/BankReservesGraph/useAggregatedByDateData.ts b/src/components/BankReservesGraph/useAggregatedByDateData.ts
@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { useMemo } from 'react';
 
-import { PoolChartData } from '../../common/models/PoolChartData';
+import { PoolChartData } from '../../common/models/CirculationSupplyData';
 
 export const useAggregatedByDateData = (
   rawData: PoolChartData[],
@@ -19,9 +19,9 @@ export const useAggregatedByDateData = (
         while (rawData[j + 1]?.ts < lts.valueOf()) {
           j++;
         }
-        return rawData[j === -1 ? 0 : j].clone({ timestamp: lts.valueOf() });
+        return rawData[j === -1 ? 0 : j].clone({ date: lts.valueOf() });
       });
-    res.push(rawData[rawData.length - 1].clone({ timestamp: Date.now() }));
+    res.push(rawData[rawData.length - 1].clone({ date: Date.now() }));
     return res;
   }, [rawData]);
 };
diff --git a/src/components/CirculationSupply/CirculationSupply.tsx b/src/components/CirculationSupply/CirculationSupply.tsx
@@ -30,8 +30,8 @@ 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 { CirculationSupplyData } from '../../common/models/CirculationSupplyData';
 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';
@@ -88,16 +88,17 @@ export const CirculationSupply: React.FC = () => {
     [durationOffset],
   );
   const [getChartData] = useChartData(params);
-  const rawData = getChartData?.map((value) => new PoolChartData(value)) ?? [];
+  const rawData =
+    getChartData?.map((value) => new CirculationSupplyData(value)) ?? [];
 
   const data = useAggregatedByDateData(rawData, ticks);
 
   // recharts couldn't animate when dataKey is changed
   const chartData = useMemo(() => [...data], [data]);
 
-  const [activeData, setActiveData] = useState<PoolChartData | null>();
+  const [activeData, setActiveData] = useState<CirculationSupplyData | null>();
 
-  const bankReserveValue = new Currency(393423n, dexyGoldAsset);
+  const bankReserveValue = new Currency(0n, dexyGoldAsset);
 
   const isEmpty = data.length === 0;
 
@@ -106,6 +107,7 @@ export const CirculationSupply: React.FC = () => {
       if (typeof ts === 'string') {
         return ts;
       }
+
       return DateTime.fromMillis(ts).toLocaleString(timeFormat);
     },
     [defaultActivePeriod],

diff --git a/src/components/CirculationSupply/useAggregatedByDateData.ts b/src/components/CirculationSupply/useAggregatedByDateData.ts
@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { useMemo } from 'react';
 
-import { PoolChartData } from '../../common/models/PoolChartData';
+import { PoolChartData } from '../../common/models/CirculationSupplyData';
 
 export const useAggregatedByDateData = (
   rawData: PoolChartData[],
@@ -19,9 +19,9 @@ export const useAggregatedByDateData = (
         while (rawData[j + 1]?.ts < lts.valueOf()) {
           j++;
         }
-        return rawData[j === -1 ? 0 : j].clone({ timestamp: lts.valueOf() });
+        return rawData[j === -1 ? 0 : j].clone({ date: lts.valueOf() });
       });
-    res.push(rawData[rawData.length - 1].clone({ timestamp: Date.now() }));
+    res.push(rawData[rawData.length - 1].clone({ date: Date.now() }));
     return res;
   }, [rawData]);
 };
diff --git a/src/components/MintForm/MintForm.tsx b/src/components/MintForm/MintForm.tsx
@@ -3,6 +3,7 @@ import {
   ArrowLeftOutlined,
   Box,
   CheckCircleOutlined,
+  CloseCircleOutlined,
   Flex,
   FormGroup,
   Tag,
@@ -150,26 +151,38 @@ export const MintFormContainer: FC<MintFormProps> = ({ mint }) => {
           <Flex.Item marginBottom={6} justify="space-between">
             <Typography.Title level={4}>
               Mint DexyGold{' '}
-              {mint.mintType() === MintType.arbMint ? (
-                <Typography.Body style={{ color: 'rgb(138, 138, 138)' }}>
-                  (by Arbitrage Mint)
-                </Typography.Body>
-              ) : (
-                <Typography.Body style={{ color: 'rgb(138, 138, 138)' }}>
-                  (by Free Mint)
-                </Typography.Body>
-              )}
+              {mint.mintType() ? (
+                mint.mintType() === MintType.arbMint ? (
+                  <Typography.Body style={{ color: 'rgb(138, 138, 138)' }}>
+                    (by Arbitrage Mint)
+                  </Typography.Body>
+                ) : (
+                  <Typography.Body style={{ color: 'rgb(138, 138, 138)' }}>
+                    (by Free Mint)
+                  </Typography.Body>
+                )
+              ) : null}
             </Typography.Title>
             <div>
-              <Tooltip title="Oracle price is less than the Liquidity pool price.">
+              {isMintAvailable ? (
+                <Tooltip title="Oracle price is less than the Liquidity pool price.">
+                  <Tag
+                    icon={<CheckCircleOutlined />}
+                    color={'success'}
+                    style={{ height: '24px' }}
+                  >
+                    Available
+                  </Tag>
+                </Tooltip>
+              ) : (
                 <Tag
-                  icon={<CheckCircleOutlined />}
-                  color={'success'}
+                  icon={<CloseCircleOutlined />}
+                  color={'error'}
                   style={{ height: '24px' }}
                 >
-                  Available
+                  Not available
                 </Tag>
-              </Tooltip>
+              )}
             </div>
           </Flex.Item>
           <Flex.Item>