Order fixes (#228)

* router fixes

* renaming

* sale status

* sale status

* filter orders

* remove switch

src/apis/orders.ts

@@ -3,7 +3,7 @@ import { fetchGraphql } from '@/utils/fetchGraphql';
 import { API_COCOS_INDEXER } from '@/consts';
 import { Address, ApiResponse } from '@/models';
 
-export const fetchContribution = async (
+export const fetchUserContribution = async (
   orderId: number,
   address: Address | undefined,
   after: string | null

src/contexts/orders/index.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from 'react';
 
-import { fetchContribution, fetchOrders as fetchOrdersApi } from '@/apis';
+import { fetchOrders as fetchOrdersApi, fetchUserContribution } from '@/apis';
 import { ApiResponse, ContextStatus, Order } from '@/models';
 
 import { useAccounts } from '../account';
@@ -44,13 +44,13 @@ const OrderProvider = ({ children }: Props) => {
   } = useAccounts();
 
   const fetchOrders = useCallback(async () => {
-    const getContribution = async (orderId: number) => {
+    const getUserContribution = async (orderId: number) => {
       let finished = false;
       let after: string | null = null;
 
       let sum = 0;
       while (!finished) {
-        const res: ApiResponse = await fetchContribution(
+        const res: ApiResponse = await fetchUserContribution(
           orderId,
           activeAccount?.address,
           after
@@ -111,7 +111,7 @@ const OrderProvider = ({ children }: Props) => {
                 ({
                   ...item,
                   totalContribution: parseInt(item.contribution),
-                  contribution: await getContribution(item.orderId),
+                  contribution: await getUserContribution(item.orderId),
                 }) as Order
             )
           )

src/contexts/sales/index.tsx

@@ -4,6 +4,7 @@ import { getBlockTime, getBlockTimestamp } from '@/utils/functions';
 import { getCorePriceAt, getCurrentPhase } from '@/utils/sale';
 
 import {
+  BrokerStatus,
   ContextStatus,
   PhaseEndpoints,
   RELAY_CHAIN_BLOCK_TIME,
@@ -13,14 +14,15 @@ import {
   SalePhaseInfo,
 } from '@/models';
 
-import { useCoretimeApi, useRelayApi } from '../apis';
+import { useCoretimeApi } from '../apis';
 import { ApiState } from '../apis/types';
 import { useNetwork } from '../network';
 
 interface SaleData {
   status: ContextStatus;
   saleInfo: SaleInfo;
   config: SaleConfig;
+  saleStatus: BrokerStatus;
   phase: SalePhaseInfo;
   fetchSaleInfo: () => void;
 }
@@ -61,10 +63,19 @@ const defaultSalePhase = {
   endpoints: defaultEndpoints,
 };
 
+const defaultSaleStatus: BrokerStatus = {
+  coreCount: 0,
+  lastCommittedTimeslice: 0,
+  lastTimeslice: 0,
+  privatePoolSize: 0,
+  systemPoolSize: 0,
+};
+
 const defaultSaleData: SaleData = {
   status: ContextStatus.UNINITIALIZED,
   saleInfo: defaultSaleInfo,
   config: defaultSaleConfig,
+  saleStatus: defaultSaleStatus,
   phase: defaultSalePhase,
   fetchSaleInfo: () => {
     /** */
@@ -84,11 +95,10 @@ const SaleInfoProvider = ({ children }: Props) => {
     timeslicePeriod,
   } = useCoretimeApi();
 
-  const {
-    state: { api: relayApi, apiState: relayApiState },
-  } = useRelayApi();
-
   const [saleInfo, setSaleInfo] = useState<SaleInfo>(defaultSaleData.saleInfo);
+  const [saleStatus, setSaleStatus] = useState<BrokerStatus>(
+    defaultSaleData.saleStatus
+  );
   const [config, setConfig] = useState<SaleConfig>(defaultSaleData.config);
 
   const [status, setStatus] = useState(ContextStatus.UNINITIALIZED);
@@ -114,27 +124,37 @@ const SaleInfoProvider = ({ children }: Props) => {
   const fetchSaleInfo = async () => {
     try {
       setStatus(ContextStatus.LOADING);
-      if (
-        !coretimeApi ||
-        coretimeApiState !== ApiState.READY ||
-        !relayApi ||
-        relayApiState !== ApiState.READY ||
-        !coretimeApi.query.broker
-      ) {
+      if (!coretimeApi || coretimeApiState !== ApiState.READY) {
         setStatus(ContextStatus.UNINITIALIZED);
         return;
       }
 
-      const saleInfoRaw = await coretimeApi.query.broker.saleInfo();
+      const [brokerStatusRaw, saleInfoRaw, configRaw] = (await new Promise(
+        (resolve, _reject) => {
+          coretimeApi.queryMulti(
+            [
+              coretimeApi.query.broker.status,
+              coretimeApi.query.broker.saleInfo,
+              coretimeApi.query.broker.configuration,
+            ],
+            (result) => {
+              resolve(result);
+            }
+          );
+        }
+      )) as Array<any>;
+
       const saleInfo = saleInfoRaw.toJSON() as SaleInfo;
       // On Rococo we have `endPrice` while on Kusama we still have `price`.
       saleInfo.price = saleInfo.price || (saleInfo as any).endPrice;
       setSaleInfo(saleInfo);
 
-      const configRaw = await coretimeApi.query.broker.configuration();
       const config = configRaw.toJSON() as SaleConfig;
       setConfig(config);
 
+      const brokerStatus = brokerStatusRaw.toJSON() as BrokerStatus;
+      setSaleStatus(brokerStatus);
+
       const saleStart = saleInfo.saleStart;
       // Sale start != bulk phase start. sale_start = bulk_phase_start + interlude_length.
       const saleStartTimestamp = await getBlockTimestamp(
@@ -174,14 +194,7 @@ const SaleInfoProvider = ({ children }: Props) => {
 
   useEffect(() => {
     fetchSaleInfo();
-  }, [
-    network,
-    coretimeApi,
-    coretimeApiState,
-    relayApi,
-    relayApiState,
-    timeslicePeriod,
-  ]);
+  }, [network, coretimeApi, coretimeApiState, timeslicePeriod]);
 
   useEffect(() => {
     if (height === 0) return;
@@ -194,6 +207,7 @@ const SaleInfoProvider = ({ children }: Props) => {
         status,
         saleInfo,
         config,
+        saleStatus,
         phase: {
           currentPhase,
           currentPrice,

src/pages/marketplace.tsx

@@ -13,11 +13,9 @@ import { useTheme } from '@mui/material/styles';
 import { OnChainRegionId, Region } from 'coretime-utils';
 import { useConfirm } from 'material-ui-confirm';
 import moment from 'moment';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
-import { enableRegionX } from '@/utils/functions';
 
 import {
   Balance,
@@ -30,7 +28,6 @@ import { useAccounts } from '@/contexts/account';
 import { useRegionXApi } from '@/contexts/apis/RegionXApi';
 import { ApiState } from '@/contexts/apis/types';
 import { useMarket } from '@/contexts/market';
-import { useNetwork } from '@/contexts/network';
 import { useToast } from '@/contexts/toast';
 import { ContextStatus, Listing, MarketFilterOptions } from '@/models';
 
@@ -66,9 +63,7 @@ const sortOptions: Option[] = [
 const Marketplace = () => {
   const confirm = useConfirm();
   const theme = useTheme();
-  const router = useRouter();
 
-  const { network } = useNetwork();
   const {
     state: { activeAccount, activeSigner },
   } = useAccounts();
@@ -146,12 +141,6 @@ const Marketplace = () => {
     }).then(() => unlistRegion(region.getOnChainRegionId()));
   };
 
-  useEffect(() => {
-    if (!enableRegionX(network)) {
-      router.push('/');
-    }
-  }, [network, router]);
-
   useEffect(() => {
     const checkConditions = (listing: Listing): boolean => {
       const { region, beginTimestamp, endTimestamp, currentPrice } = listing;

src/pages/orders/index.tsx

@@ -3,17 +3,12 @@ import {
   Box,
   Button,
   CircularProgress,
-  FormControlLabel,
   Paper,
-  Switch,
   Typography,
   useTheme,
 } from '@mui/material';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { enableRegionX } from '@/utils/functions';
-
 import {
   ActionButton,
   Balance,
@@ -24,40 +19,38 @@ import {
 import { OrderProcessorModal } from '@/components/Orders/Modals/OrderProcessor';
 
 import { useAccounts } from '@/contexts/account';
-import { useNetwork } from '@/contexts/network';
 import { useOrders } from '@/contexts/orders';
 import { useRegions } from '@/contexts/regions';
+import { useSaleInfo } from '@/contexts/sales';
 import { ContextStatus, Order } from '@/models';
 
 const OrderDashboard = () => {
   const theme = useTheme();
-  const router = useRouter();
 
-  const { network } = useNetwork();
-  const { orders, status } = useOrders();
+  const { orders, status: orderStatus } = useOrders();
   const { regions } = useRegions();
   const {
     state: { activeAccount },
   } = useAccounts();
 
-  const [expiredOnly, watchExpired] = useState(false);
-
   const [ordersToShow, setOrdersToShow] = useState<Order[]>([]);
   const [orderSelected, selectOrder] = useState<Order | undefined>();
 
   const [orderCreationModalOpen, openOrderCreationModal] = useState(false);
   const [contributionModal, openContributionModal] = useState(false);
   const [processorModal, openProcessorModal] = useState(false);
+  const { saleStatus, status: saleInfoStatus } = useSaleInfo();
 
   useEffect(() => {
-    if (!enableRegionX(network)) {
-      router.push('/');
-    }
-  }, [network, router]);
+    let _orders: Array<Order> = orders.filter(({ processed }) => !processed);
 
-  useEffect(() => {
-    setOrdersToShow(orders.filter(({ processed }) => !processed));
-  }, [orders]);
+    if (saleInfoStatus === ContextStatus.LOADED) {
+      _orders = _orders.filter(
+        ({ end }) => end > saleStatus.lastCommittedTimeslice
+      );
+    }
+    setOrdersToShow(_orders);
+  }, [orders, saleInfoStatus, saleStatus]);
 
   return (
     <>
@@ -85,34 +78,18 @@ const OrderDashboard = () => {
             Explorer the orders
           </Typography>
         </Box>
-        <Box sx={{ display: 'flex', gap: '1.5rem', height: '3.25rem' }}>
-          <FormControlLabel
-            control={
-              <Switch
-                color='success'
-                checked={expiredOnly}
-                onChange={(e) => watchExpired(e.target.checked)}
-              />
-            }
-            label='Expired Only'
-            labelPlacement='start'
-            sx={{
-              color: theme.palette.common.black,
-              padding: '0.25rem',
-            }}
-          />
-
+        <Box sx={{ display: 'flex', gap: '1.5rem', height: '2.75rem' }}>
           <ActionButton
             label='Create New Order'
             onClick={() => openOrderCreationModal(true)}
           />
         </Box>
       </Box>
-      {status === ContextStatus.ERROR ? (
+      {orderStatus === ContextStatus.ERROR ? (
         <Box mt='1rem'>
           <Typography>An error occured while fetching the orders.</Typography>
         </Box>
-      ) : status !== ContextStatus.LOADED ? (
+      ) : orderStatus !== ContextStatus.LOADED ? (
         <Backdrop open>
           <CircularProgress />
         </Backdrop>

src/pages/orders/processor.tsx

@@ -7,36 +7,24 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
 
 import { useProcessedOrders } from '@/hooks/order';
-import { enableRegionX } from '@/utils/functions';
 
 import { OrderProcessorTable } from '@/components';
 
 import { useRegionXApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
-import { useNetwork } from '@/contexts/network';
 
 const OrderProcessor = () => {
   const theme = useTheme();
-  const router = useRouter();
 
-  const { network } = useNetwork();
   const {
     state: { apiState },
   } = useRegionXApi();
 
   const { data: processedOrderData, loading: loadingProcessedOrders } =
     useProcessedOrders();
 
-  useEffect(() => {
-    if (!enableRegionX(network)) {
-      router.push('/');
-    }
-  }, [network, router]);
-
   return apiState !== ApiState.READY || loadingProcessedOrders ? (
     <Backdrop open>
       <CircularProgress data-cy='loading' />

src/pages/paras/index.tsx

@@ -179,7 +179,7 @@ const ParachainManagement = () => {
             Watch parachains state, register and manage parachains
           </Typography>
         </Box>
-        <Box sx={{ display: 'flex', gap: '1.5rem', height: '3.25rem' }}>
+        <Box sx={{ display: 'flex', gap: '1.5rem', height: '2.75rem' }}>
           <FormControlLabel
             control={
               <Switch