fix: update mint chart

CheesecakeLabs · Aug 23, 2023 · 6f1b2fa · 6f1b2fa
1 parent 08f96d4
commit 6f1b2fa
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git a/frontend/src/app/core/pages/burn-asset/index.tsx b/frontend/src/app/core/pages/burn-asset/index.tsx
@@ -55,6 +55,12 @@ export const BurnAsset: React.FC = () => {
           position: 'top-right',
         })
         getAssetById(id).then(asset => setAsset(asset))
+        getPaymentsByAssetId(id, 2, chartPeriod).then(paymentsAsset => {
+          setMintOperations(paymentsAsset)
+        })
+        getPaymentsByAssetId(id, 5, chartPeriod).then(paymentsAsset => {
+          setBurnOperations(paymentsAsset)
+        })
         return
       }
       toastError(MessagesError.errorOccurred)

diff --git a/frontend/src/app/core/pages/mint-asset/index.tsx b/frontend/src/app/core/pages/mint-asset/index.tsx
@@ -1,21 +1,26 @@
-import { Flex, Skeleton, useToast, VStack } from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
-import { FieldValues, UseFormSetValue } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
-
-import { useAssets } from 'hooks/useAssets'
-import { useDashboards } from 'hooks/useDashboards'
-import { mintHelper } from 'utils/constants/helpers'
-import { MessagesError } from 'utils/constants/messages-error'
-
-import { AssetActions } from 'components/enums/asset-actions'
-import { PathRoute } from 'components/enums/path-route'
-import { ActionHelper } from 'components/molecules/action-helper'
-import { TChartPeriod } from 'components/molecules/chart-period'
-import { ManagementBreadcrumb } from 'components/molecules/management-breadcrumb'
-import { MenuActionsAsset } from 'components/organisms/menu-actions-asset'
-import { Sidebar } from 'components/organisms/sidebar'
-import { MintAssetTemplate } from 'components/templates/mint-asset'
+import { Flex, Skeleton, useToast, VStack } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+import { FieldValues, UseFormSetValue } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+
+
+
+import { useAssets } from 'hooks/useAssets';
+import { useDashboards } from 'hooks/useDashboards';
+import { mintHelper } from 'utils/constants/helpers';
+import { MessagesError } from 'utils/constants/messages-error';
+
+
+
+import { AssetActions } from 'components/enums/asset-actions';
+import { PathRoute } from 'components/enums/path-route';
+import { ActionHelper } from 'components/molecules/action-helper';
+import { TChartPeriod } from 'components/molecules/chart-period';
+import { ManagementBreadcrumb } from 'components/molecules/management-breadcrumb';
+import { MenuActionsAsset } from 'components/organisms/menu-actions-asset';
+import { Sidebar } from 'components/organisms/sidebar';
+import { MintAssetTemplate } from 'components/templates/mint-asset';
+
 
 export const MintAsset: React.FC = () => {
   const [asset, setAsset] = useState<Hooks.UseAssetsTypes.IAssetDto>()
@@ -55,6 +60,12 @@ export const MintAsset: React.FC = () => {
           position: 'top-right',
         })
         getAssetById(id).then(asset => setAsset(asset))
+        getPaymentsByAssetId(id, 2, chartPeriod).then(paymentsAsset => {
+          setMintOperations(paymentsAsset)
+        })
+        getPaymentsByAssetId(id, 5, chartPeriod).then(paymentsAsset => {
+          setBurnOperations(paymentsAsset)
+        })
         return
       }
       toastError(MessagesError.errorOccurred)
@@ -129,4 +140,4 @@ export const MintAsset: React.FC = () => {
       </Sidebar>
     </Flex>
   )
-}
+}
diff --git a/frontend/src/components/molecules/chart-mint-burn/index.tsx b/frontend/src/components/molecules/chart-mint-burn/index.tsx
@@ -20,6 +20,7 @@ interface IChartMintBurn {
   burnOperations: Hooks.UseDashboardsTypes.IAsset
   chartPeriod: TChartPeriod
   setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
+  assetCode: string
 }
 
 export const ChartMintBurn: React.FC<IChartMintBurn> = ({
@@ -28,6 +29,7 @@ export const ChartMintBurn: React.FC<IChartMintBurn> = ({
   chartPeriod,
   loadingChart,
   setChartPeriod,
+  assetCode,
 }) => {
   const { colorMode } = useColorMode()
 
@@ -74,6 +76,7 @@ export const ChartMintBurn: React.FC<IChartMintBurn> = ({
         curve: 'smooth',
       },
     },
+    colors: ['#195a63', '#f55025'],
     tooltip: {
       theme: colorMode,
     },
@@ -90,7 +93,7 @@ export const ChartMintBurn: React.FC<IChartMintBurn> = ({
       labels: {
         show: true,
         formatter: function (value: number): string {
-          return `${toCrypto(value)}`
+          return `${toCrypto(value)} ${assetCode}`
         },
       },
     },

diff --git a/frontend/src/components/templates/burn-asset/index.tsx b/frontend/src/components/templates/burn-asset/index.tsx
@@ -120,6 +120,7 @@ export const BurnAssetTemplate: React.FC<IBurnAssetTemplate> = ({
           burnOperations={burnOperations}
           chartPeriod={chartPeriod}
           setChartPeriod={setChartPeriod}
+          assetCode={asset.code}
         />
       )}
     </Flex>

diff --git a/frontend/src/components/templates/mint-asset/index.tsx b/frontend/src/components/templates/mint-asset/index.tsx
@@ -120,6 +120,7 @@ export const MintAssetTemplate: React.FC<IMintAssetTemplate> = ({
           burnOperations={burnOperations}
           chartPeriod={chartPeriod}
           setChartPeriod={setChartPeriod}
+          assetCode={asset.code}
         />
       )}
     </Flex>