Market Dashboard

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dotflow-ui",
+  "name": "corehub",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -24,7 +24,7 @@
     "@scio-labs/use-inkathon": "^0.0.1-alpha.44",
     "@types/humanize-duration": "^3.27.3",
     "clsx": "^1.1.1",
-    "coretime-utils": "^0.2.3",
+    "coretime-utils": "^0.2.6",
     "humanize-duration": "^3.31.0",
     "javascript-time-ago": "^2.5.9",
     "next": "^13.3.1",

src/components/Modals/Interlace/index.tsx

@@ -20,7 +20,7 @@ import { RegionCard } from '@/components/elements';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
-import { COREMASK_BYTES_LEN, RegionMetadata } from '@/models';
+import { COREMASK_BIT_LEN, RegionMetadata } from '@/models';
 
 import styles from './index.module.scss';
 
@@ -53,7 +53,7 @@ export const InterlaceModal = ({
   const [position, setPosition] = useState(oneStart);
 
   const generateMask = (position: number): string => {
-    const mask = Array(COREMASK_BYTES_LEN * 8).fill('0');
+    const mask = Array(COREMASK_BIT_LEN).fill('0');
     for (let i = oneStart; i <= position; ++i) mask[i] = '1';
     return mask.join('');
   };
@@ -132,10 +132,9 @@ export const InterlaceModal = ({
                 onChange={(_e, v) => setPosition(Number(v))}
                 valueLabelDisplay='on'
                 valueLabelFormat={(v) =>
-                  `${(
-                    ((v - oneStart + 1) / (COREMASK_BYTES_LEN * 8)) *
-                    100
-                  ).toFixed(2)}%`
+                  `${(((v - oneStart + 1) / COREMASK_BIT_LEN) * 100).toFixed(
+                    2
+                  )}%`
                 }
                 className={styles.slider}
               />

src/components/Modals/Partition/index.tsx

@@ -17,6 +17,7 @@ import { useEffect, useState } from 'react';
 import { RegionCard } from '@/components/elements';
 
 import { useCoretimeApi } from '@/contexts/apis';
+import { useCommon } from '@/contexts/common';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
 import {
@@ -64,10 +65,8 @@ export const PartitionModal = ({
   const {
     state: { api: coretimeApi },
   } = useCoretimeApi();
-  const {
-    config: { timeslicePeriod },
-    fetchRegions,
-  } = useRegions();
+  const { fetchRegions } = useRegions();
+  const { timeslicePeriod } = useCommon();
 
   const { toastError, toastSuccess, toastInfo } = useToast();
 

src/components/Modals/Purchase/index.tsx

@@ -0,0 +1,106 @@
+import { LoadingButton } from '@mui/lab';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Stack,
+} from '@mui/material';
+import { contractTx, useContract, useInkathon } from '@scio-labs/use-inkathon';
+import { useState } from 'react';
+
+import { ListingCard } from '@/components/elements/ListingCard';
+
+import { CONTRACT_MARKET } from '@/contexts/apis/consts';
+import { useMarket } from '@/contexts/market';
+import { useRegions } from '@/contexts/regions';
+import { useToast } from '@/contexts/toast';
+import MarketMetadata from '@/contracts/market.json';
+import { Listing } from '@/models';
+
+interface PurchaseModalProps {
+  open: boolean;
+  onClose: () => void;
+  listing: Listing;
+}
+
+export const PurchaseModal = ({
+  open,
+  onClose,
+  listing,
+}: PurchaseModalProps) => {
+  const { activeAccount, api: contractsApi } = useInkathon();
+
+  const { contract: marketContract } = useContract(
+    MarketMetadata,
+    CONTRACT_MARKET
+  );
+
+  const { fetchRegions } = useRegions();
+  const { fetchMarket } = useMarket();
+
+  const { toastError, toastSuccess } = useToast();
+
+  const [working, setWorking] = useState(false);
+
+  const purchaseRegion = async () => {
+    if (!contractsApi || !activeAccount || !marketContract) {
+      return;
+    }
+
+    try {
+      setWorking(true);
+      const rawRegionId = listing.region.getEncodedRegionId(contractsApi);
+
+      const id = contractsApi.createType('Id', {
+        U128: rawRegionId.toString(),
+      });
+
+      await contractTx(
+        contractsApi,
+        activeAccount.address,
+        marketContract,
+        'purchase_region',
+        { value: listing.currentPrice },
+        [id, listing.region.getMetadataVersion()]
+      );
+
+      toastSuccess(`Successfully purchased region from sale.`);
+      onClose();
+      fetchMarket();
+      fetchRegions();
+      setWorking(false);
+    } catch (e: any) {
+      toastError(
+        `Failed to purchase region from sale. Error: ${
+          e.errorMessage === 'Error'
+            ? 'Please check your balance.'
+            : e.errorMessage
+        }`
+      );
+      setWorking(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='md'>
+      <DialogContent>
+        <Stack direction='column' gap={3}>
+          <ListingCard listing={listing} readOnly={true} bordered={false} />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <LoadingButton
+          onClick={() => purchaseRegion()}
+          variant='contained'
+          loading={working}
+        >
+          Purchase from sale
+        </LoadingButton>
+        <Button onClick={onClose} variant='outlined'>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/components/Modals/Sell/index.tsx

@@ -21,6 +21,7 @@ import { RegionCard } from '@/components/elements';
 import AmountInput from '@/components/elements/AmountInput';
 
 import { CONTRACT_MARKET, CONTRACT_XC_REGIONS } from '@/contexts/apis/consts';
+import { useMarket } from '@/contexts/market';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
 import MarketMetadata from '@/contracts/market.json';
@@ -50,6 +51,7 @@ export const SellModal = ({
   );
 
   const { fetchRegions } = useRegions();
+  const { fetchMarket } = useMarket();
   const { toastError, toastSuccess } = useToast();
 
   const [regionPrice, setRegionPrice] = useState('');
@@ -89,6 +91,7 @@ export const SellModal = ({
       toastSuccess(`Successfully approved region to the market.`);
       onClose();
       fetchRegions();
+      fetchMarket();
       setWorking(false);
     } catch (e: any) {
       toastError(
@@ -115,7 +118,8 @@ export const SellModal = ({
       const regionDuration = region.getEnd() - region.getBegin();
       const timeslicePrice = (
         (Number(regionPrice) * UNIT_DECIMALS) /
-        regionDuration
+        regionDuration /
+        region.coreOccupancy()
       ).toFixed(0);
 
       await contractTx(

src/components/Modals/Unlist/index.tsx

@@ -13,10 +13,11 @@ import { useState } from 'react';
 import { RegionCard } from '@/components/elements';
 
 import { CONTRACT_MARKET } from '@/contexts/apis/consts';
+import { useMarket } from '@/contexts/market';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
 import MarketMetadata from '@/contracts/market.json';
-import { LISTING_DEPOSIT, RegionMetadata } from '@/models';
+import { RegionMetadata } from '@/models';
 
 interface UnlistModalProps {
   open: boolean;
@@ -37,6 +38,7 @@ export const UnlistModal = ({
   );
 
   const { fetchRegions } = useRegions();
+  const { fetchMarket } = useMarket();
   const { toastError, toastSuccess } = useToast();
 
   const [working, setWorking] = useState(false);
@@ -59,13 +61,14 @@ export const UnlistModal = ({
         activeAccount.address,
         marketContract,
         'unlist_region',
-        { value: LISTING_DEPOSIT },
+        {},
         [id]
       );
 
       toastSuccess(`Successfully unlisted region from sale.`);
       onClose();
       fetchRegions();
+      fetchMarket();
       setWorking(false);
     } catch (e: any) {
       toastError(

src/components/Sidebar/index.tsx

@@ -1,4 +1,5 @@
 import DashboardIcon from '@mui/icons-material/Dashboard';
+import ExploreIcon from '@mui/icons-material/Explore';
 import HomeIcon from '@mui/icons-material/Home';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { Box, useTheme } from '@mui/material';
@@ -82,10 +83,10 @@ export const Sidebar = () => {
     ],
     'secondary market': [
       {
-        label: 'Buy Region',
-        route: '/market/buy',
-        enabled: false,
-        icon: <ShoppingCartIcon />,
+        label: 'Explore the Market',
+        route: '/market/marketplace',
+        enabled: true,
+        icon: <ExploreIcon />,
       },
     ],
   };

src/components/elements/ListingCard/index.module.scss

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  gap: 1.5rem;
+  border-radius: 0.5rem;
+  max-width: 45rem;
+  padding: 1.5rem 2rem;
+}
+
+.duration {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  width: fit-content;
+}
+
+.regionInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 16rem;
+}