feat: mine owner management page

Author: vkhv

src/features/mine-owner/management/ui/MineTable/index.tsx

@@ -1,29 +1,30 @@
-import { Progress, Space, Tooltip } from 'antd';
+import { Progress, Tooltip } from 'antd';
 import { DMECoinIcon, neutral3Color, primary6 } from 'shared';
 import Icon, { InfoCircleOutlined } from '@ant-design/icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'effector-react';
-import { $mineNft, $userMine } from '../../../models';
-import { DepthChanger } from '../DepthChanger';
+
+import { $mineOwnerManagementData } from '../../../models/mineOwnerManagement';
 import styles from './styles.module.scss';
 
 const SUB_LEVELS_MAX_AMOUNT = 5;
 
 export const MineTable = () => {
     const { t } = useTranslation();
-    const mine = useStore($userMine);
-    const mineNft = useStore($mineNft);
+    const mineOwnerManagementData = useStore($mineOwnerManagementData);
+
+    const mineNft = mineOwnerManagementData?.mine_asset;
     const dmeToLevelUpgradePercent =
         mineNft &&
         Math.floor(
-            (100 * Number(mineNft?.data['DME Mined'])) /
-                Number(mineNft?.data['DME to Upgrade'])
+            (100 * Number(mineNft?.dme_mined)) / Number(mineNft?.dme_to_upgrade)
         );
     const mineSubLevelToPercent =
-        mine &&
-        mine.sublevel > 0 &&
-        ((mine.sublevel + 1) / SUB_LEVELS_MAX_AMOUNT) * 100;
+        Number(mineOwnerManagementData?.mine_sublevel) > 0 &&
+        ((Number(mineOwnerManagementData?.mine_sublevel) + 1) /
+            SUB_LEVELS_MAX_AMOUNT) *
+            100;
     return (
         <div className={styles.table}>
             <div className={styles.line}>
@@ -36,16 +37,10 @@ export const MineTable = () => {
                         percent={Number(dmeToLevelUpgradePercent || 0)}
                         showInfo={false}
                     />{' '}
-                    {mineNft?.data['DME Mined'] &&
-                    mineNft?.data['DME to Upgrade'] ? (
+                    {mineNft?.dme_mined && mineNft?.dme_to_upgrade ? (
                         <>
-                            <span>
-                                {Math.floor(mineNft?.data['DME Mined'])}
-                            </span>
-                            /
-                            <span>
-                                {Math.floor(mineNft?.data['DME to Upgrade'])}
-                            </span>
+                            <span>{mineNft?.dme_mined}</span>/
+                            <span>{mineNft?.dme_to_upgrade}</span>
                         </>
                     ) : null}
                     {'\u00a0'}
@@ -56,7 +51,7 @@ export const MineTable = () => {
                     </Tooltip>
                     <div>
                         {'\u00a0'}
-                        {mine?.level}
+                        {mineOwnerManagementData?.mine_level}
                     </div>
                 </div>
             </div>
@@ -72,16 +67,16 @@ export const MineTable = () => {
                     />
                 </div>
             </div>
-            <div className={styles.line}>
-                <div>{t('Depth level')}</div>
-                <Space>
-                    <div>
-                        {t('features.mining.currentDepthLevel')}{' '}
-                        {mine?.layer_depth}
-                    </div>
-                    <DepthChanger />
-                </Space>
-            </div>
+            {/* <div className={styles.line}> */}
+            {/*    <div>{t('Depth level')}</div> */}
+            {/*    <Space> */}
+            {/*        <div> */}
+            {/*            {t('features.mining.currentDepthLevel')}{' '} */}
+            {/*            {mine?.layer_depth} */}
+            {/*        </div> */}
+            {/*        <DepthChanger /> */}
+            {/*    </Space> */}
+            {/* </div> */}
         </div>
     );
 };