From 81e2a70f1cf0842a260c9a5b122e2af11e575d4e Mon Sep 17 00:00:00 2001
From: cuteolaf <oliverlim818@gmail.com>
Date: Wed, 8 May 2024 18:40:37 -0700
Subject: [PATCH 1/4] feat: pooling modal

---
 package.json                                  |   5 +-
 .../FinalitySelector/index.module.scss        |  26 +++
 .../Selectors/FinalitySelector/index.tsx      |  27 +++
 src/components/Elements/Selectors/index.ts    |   1 +
 .../Modals/Pooling/index.module.scss          |  26 +++
 src/components/Modals/Pooling/index.tsx       | 173 ++++++++++++++++++
 .../Modals/TaskAssign/index.module.scss       |   6 +
 src/components/Modals/TaskAssign/index.tsx    |  12 +-
 src/components/Modals/index.ts                |   1 +
 src/models/types.ts                           |   7 +
 src/pages/purchase.tsx                        |   2 +-
 src/pages/regions.tsx                         |  16 +-
 src/utils/functions.ts                        |  13 +-
 13 files changed, 302 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Elements/Selectors/FinalitySelector/index.module.scss
 create mode 100644 src/components/Elements/Selectors/FinalitySelector/index.tsx
 create mode 100644 src/components/Modals/Pooling/index.module.scss
 create mode 100644 src/components/Modals/Pooling/index.tsx

diff --git a/package.json b/package.json
index aa590430..89682040 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "@polkadot/extension-inject": "latest",
     "@polkadot/types": "latest",
     "@polkadot/ui-keyring": "latest",
-    "@polkadot/util": "latest",
+    "@polkadot/util": "^12.6.2",
+    "@polkadot/util-crypto": "^12.6.2",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "clsx": "^1.1.1",
@@ -67,4 +68,4 @@
     "typescript": "^4.7.4",
     "webpack": "^5.81.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Elements/Selectors/FinalitySelector/index.module.scss b/src/components/Elements/Selectors/FinalitySelector/index.module.scss
new file mode 100644
index 00000000..c994ef44
--- /dev/null
+++ b/src/components/Elements/Selectors/FinalitySelector/index.module.scss
@@ -0,0 +1,26 @@
+.options {
+  display: flex;
+  justify-content: center;
+}
+
+.option,
+.activeOption {
+  min-width: 15rem;
+  margin: 1rem 5rem;
+  border-radius: 0.5rem !important;
+  text-transform: capitalize;
+}
+
+.activeOption {
+  border: 1px solid #e84d68;
+  background: linear-gradient(180deg, #e84d68 0%, #ad2b49 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.option {
+  border: 1px solid #cccccc !important;
+  background-color: white;
+  color: black;
+}
diff --git a/src/components/Elements/Selectors/FinalitySelector/index.tsx b/src/components/Elements/Selectors/FinalitySelector/index.tsx
new file mode 100644
index 00000000..2b974e8e
--- /dev/null
+++ b/src/components/Elements/Selectors/FinalitySelector/index.tsx
@@ -0,0 +1,27 @@
+import { MenuItem, Select } from '@mui/material';
+
+import { FinalityType } from '@/models';
+
+interface FinalitySelectorProps {
+  finality: FinalityType;
+  setFinality: (_: FinalityType) => void;
+}
+
+export const FinalitySelector = ({
+  finality,
+  setFinality,
+}: FinalitySelectorProps) => {
+  return (
+    <Select
+      value={finality}
+      onChange={(e) => setFinality(e.target.value as FinalityType)}
+      fullWidth
+    >
+      {Object.values(FinalityType).map((value, index) => (
+        <MenuItem key={index} value={value}>
+          {value}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
diff --git a/src/components/Elements/Selectors/index.ts b/src/components/Elements/Selectors/index.ts
index 3246a937..286b62e4 100644
--- a/src/components/Elements/Selectors/index.ts
+++ b/src/components/Elements/Selectors/index.ts
@@ -1,4 +1,5 @@
 export * from './AssetSelector';
 export * from './ChainSelector';
+export * from './FinalitySelector';
 export * from './RecipientSelector';
 export * from './RegionSelector';
diff --git a/src/components/Modals/Pooling/index.module.scss b/src/components/Modals/Pooling/index.module.scss
new file mode 100644
index 00000000..779e8db1
--- /dev/null
+++ b/src/components/Modals/Pooling/index.module.scss
@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 35rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.optionItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
diff --git a/src/components/Modals/Pooling/index.tsx b/src/components/Modals/Pooling/index.tsx
new file mode 100644
index 00000000..4a48c077
--- /dev/null
+++ b/src/components/Modals/Pooling/index.tsx
@@ -0,0 +1,173 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Input,
+  InputAdornment,
+  Paper,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useEffect, useState } from 'react';
+
+import { isValidAddress } from '@/utils/functions';
+
+import {
+  FinalitySelector,
+  ProgressButton,
+  SimpleRegionCard,
+} from '@/components/Elements';
+
+import { useAccounts } from '@/contexts/account';
+import { useCoretimeApi } from '@/contexts/apis';
+import { useRegions } from '@/contexts/regions';
+import { useToast } from '@/contexts/toast';
+import { FinalityType, RegionMetadata } from '@/models';
+
+import styles from './index.module.scss';
+
+interface PoolingModalProps {
+  open: boolean;
+  onClose: () => void;
+  regionMetadata: RegionMetadata;
+}
+
+export const PoolingModal = ({
+  open,
+  onClose,
+  regionMetadata,
+}: PoolingModalProps) => {
+  const theme = useTheme();
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
+
+  const {
+    state: { api: coretimeApi },
+  } = useCoretimeApi();
+  const { fetchRegions } = useRegions();
+  const { toastError, toastInfo, toastSuccess } = useToast();
+
+  const [finality, setFinality] = useState<FinalityType>(FinalityType.FINAL);
+  const [payee, setPayee] = useState<string>('');
+
+  const [working, setWorking] = useState(false);
+
+  const onPool = async () => {
+    if (!coretimeApi || !activeAccount || !activeSigner) return;
+
+    const txPooling = coretimeApi.tx.broker.pool(
+      regionMetadata.region.getOnChainRegionId(), // region id
+      activeAccount.address, // payee
+      finality
+    );
+
+    try {
+      setWorking(true);
+      await txPooling.signAndSend(
+        activeAccount.address,
+        { signer: activeSigner },
+        ({ status, events }) => {
+          if (status.isReady) toastInfo('Transaction was initiated');
+          else if (status.isInBlock) toastInfo(`In Block`);
+          else if (status.isFinalized) {
+            setWorking(false);
+            events.forEach(({ event: { method } }) => {
+              if (method === 'ExtrinsicSuccess') {
+                toastSuccess(
+                  'Successfully contributed to the instantaneous region pool'
+                );
+                onClose();
+                fetchRegions();
+              } else if (method === 'ExtrinsicFailed') {
+                toastError(
+                  `Failed to contribute to the instantaneous region pool`
+                );
+              }
+            });
+          }
+        }
+      );
+    } catch (e) {
+      toastError(`Failed to contribute to the instantaneous region pool ${e}`);
+      setWorking(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    setFinality(FinalityType.FINAL);
+    setPayee('');
+    setWorking(false);
+  }, [open]);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='md'>
+      <DialogContent className={styles.container}>
+        <Box>
+          <Typography
+            variant='subtitle1'
+            sx={{ color: theme.palette.common.black }}
+          >
+            Task Pooling
+          </Typography>
+          <Typography
+            variant='subtitle2'
+            sx={{ color: theme.palette.text.primary }}
+          >
+            You can contribute your region to the pool of instantaneous regions
+          </Typography>
+        </Box>
+        <Box className={styles.content}>
+          <SimpleRegionCard regionMetadata={regionMetadata} />
+        </Box>
+        <Paper className={styles.options}>
+          <Typography
+            variant='subtitle1'
+            sx={{ color: theme.palette.common.black }}
+          >
+            Contribution options
+          </Typography>
+          <Box className={styles.optionItem}>
+            <Typography className={styles.optionKey}>Finality:</Typography>
+            <FinalitySelector {...{ finality, setFinality }} />
+          </Box>
+          <Box className={styles.optionItem}>
+            <Typography className={styles.optionKey}>Payee:</Typography>
+            <Input
+              value={payee}
+              onChange={(e) => setPayee(e.target.value)}
+              fullWidth
+              type='text'
+              placeholder='Address of the payee'
+              endAdornment={
+                <InputAdornment position='end'>
+                  <Button
+                    variant='text'
+                    color='info'
+                    onClick={() =>
+                      activeAccount && setPayee(activeAccount.address)
+                    }
+                  >
+                    Me
+                  </Button>
+                </InputAdornment>
+              }
+              sx={{ height: '3rem' }}
+              error={payee.length > 0 && !isValidAddress(payee)}
+            />
+          </Box>
+        </Paper>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} variant='outlined'>
+          Cancel
+        </Button>
+
+        <ProgressButton onClick={onPool} label='Pool' loading={working} />
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/components/Modals/TaskAssign/index.module.scss b/src/components/Modals/TaskAssign/index.module.scss
index cd583cf3..342d1d4f 100644
--- a/src/components/Modals/TaskAssign/index.module.scss
+++ b/src/components/Modals/TaskAssign/index.module.scss
@@ -18,3 +18,9 @@
   padding: 1.25rem;
   gap: 1rem;
 }
+
+.alert {
+  max-width: 32rem;
+  align-items: center;
+  margin: 0 auto;
+}
diff --git a/src/components/Modals/TaskAssign/index.tsx b/src/components/Modals/TaskAssign/index.tsx
index ed9dfc44..47c6129d 100644
--- a/src/components/Modals/TaskAssign/index.tsx
+++ b/src/components/Modals/TaskAssign/index.tsx
@@ -165,14 +165,12 @@ export const TaskAssignModal = ({
               </Stack>
             </Paper>
           </Box>
+          <Alert className={styles.alert} severity='info'>
+            Finally assigned regions can no longer be managed. <br />
+            They will not be displayed on the Region Management page anymore.
+          </Alert>
         </DialogContent>
-        <Alert
-          sx={{ margin: '2rem', maxWidth: '500px', textAlign: 'center' }}
-          severity='info'
-        >
-          Finally assigned regions can no longer be managed. They will not be
-          displayed on the Region Management page anymore.
-        </Alert>
+
         <DialogActions>
           <Button onClick={onClose} variant='outlined'>
             Cancel
diff --git a/src/components/Modals/index.ts b/src/components/Modals/index.ts
index 6c64bf12..52243b89 100644
--- a/src/components/Modals/index.ts
+++ b/src/components/Modals/index.ts
@@ -1,6 +1,7 @@
 export * from './AddTask';
 export * from './Interlace';
 export * from './Partition';
+export * from './Pooling';
 export * from './Purchase';
 export * from './Sell';
 export * from './TaskAssign';
diff --git a/src/models/types.ts b/src/models/types.ts
index 05118c28..bfd7356b 100644
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -45,6 +45,13 @@ export enum NetworkType {
   KUSAMA = 'kusama',
 }
 
+export enum FinalityType {
+  // eslint-disable-next-line no-unused-vars
+  FINAL = 'Final',
+  // eslint-disable-next-line no-unused-vars
+  PROVISIONAL = 'Provisional',
+}
+
 export type Sender = {
   address: string;
   signer: Signer;
diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx
index e0ba207a..d297b8bb 100644
--- a/src/pages/purchase.tsx
+++ b/src/pages/purchase.tsx
@@ -92,7 +92,7 @@ const Purchase = () => {
         fetchRegions();
       },
       error: () => {
-        toastError(`Failed to purchase the region`);
+        toastError(`Failed to purchase a region`);
       },
     });
   };
diff --git a/src/pages/regions.tsx b/src/pages/regions.tsx
index f93bf446..b2c5d51a 100644
--- a/src/pages/regions.tsx
+++ b/src/pages/regions.tsx
@@ -1,3 +1,4 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import BackspaceIcon from '@mui/icons-material/Backspace';
 import SellIcon from '@mui/icons-material/Sell';
 import {
@@ -15,6 +16,7 @@ import { useState } from 'react';
 import {
   InterlaceModal,
   PartitionModal,
+  PoolingModal,
   RegionCard,
   TaskAssignModal,
   TransferModal,
@@ -44,6 +46,7 @@ const Dashboard = () => {
   const [partitionModalOpen, openPartitionModal] = useState(false);
   const [interlaceModalOpen, openInterlaceModal] = useState(false);
   const [assignModalOpen, openAssignModal] = useState(false);
+  const [poolingModalOpen, openPoolingModal] = useState(false);
   const [sellModalOpen, openSellModal] = useState(false);
   const [unlistModalOpen, openUnlistModal] = useState(false);
   const [transferModalOpen, openTransferModal] = useState(false);
@@ -84,6 +87,11 @@ const Dashboard = () => {
       icon: AssignmentIcon,
       onClick: () => manage(openAssignModal),
     },
+    {
+      label: 'Pool',
+      icon: AddCircleIcon,
+      onClick: () => manage(openPoolingModal),
+    },
     {
       label: 'sell',
       icon: SellIcon,
@@ -185,8 +193,7 @@ const Dashboard = () => {
           sx={{
             borderRadius: '.5rem',
             color: theme.palette.text.secondary,
-            minWidth: 280,
-            height: 500,
+            minWidth: '18rem',
             padding: '2rem 3rem',
           }}
         >
@@ -256,6 +263,11 @@ const Dashboard = () => {
               onClose={() => openUnlistModal(false)}
               regionMetadata={selectedRegion}
             />
+            <PoolingModal
+              open={poolingModalOpen}
+              onClose={() => openPoolingModal(false)}
+              regionMetadata={selectedRegion}
+            />
           </>
         )}
       </Box>
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index c78f02c9..8c93153d 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -1,7 +1,8 @@
 import { ApiPromise } from '@polkadot/api';
 import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult, Signer } from '@polkadot/types/types';
-import { formatBalance as polkadotFormatBalance } from '@polkadot/util';
+import { formatBalance as polkadotFormatBalance, isHex } from '@polkadot/util';
+import { validateAddress } from '@polkadot/util-crypto';
 import { RegionId } from 'coretime-utils';
 import Decimal from 'decimal.js';
 
@@ -20,6 +21,16 @@ export const parseHNStringToString = (str: string): string => {
   return str.replace(/,/g, '');
 };
 
+export const isValidAddress = (chainAddress: string, ss58Prefix = 42) => {
+  if (isHex(chainAddress)) return false;
+  try {
+    validateAddress(chainAddress, true, ss58Prefix);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 export const getBlockTimestamp = async (
   api: ApiPromise,
   height: number,

From 16d3bb3dd4fe3ba65b86d7cfa1d7daef3e682e5e Mon Sep 17 00:00:00 2001
From: cuteolaf <oliverlim818@gmail.com>
Date: Wed, 8 May 2024 18:57:31 -0700
Subject: [PATCH 2/4] restructure utility functions

---
 src/components/Elements/ListingCard/index.tsx |  10 +-
 src/components/Modals/Transfer/index.tsx      |   2 +-
 src/hooks/salePhase.tsx                       |   2 +-
 src/hooks/salePrice.tsx                       |   2 +-
 src/pages/transfer.tsx                        |   6 +-
 src/utils/coretime/index.ts                   |  45 +++++
 src/utils/functions.ts                        | 184 ------------------
 src/utils/functions/api.ts                    |  32 +++
 src/utils/functions/balance.ts                |  29 +++
 src/utils/functions/common.ts                 |  21 ++
 src/utils/{ => functions}/functions.test.ts   |   2 +-
 src/utils/functions/index.ts                  |   4 +
 src/utils/functions/timestamps.ts             |  62 ++++++
 src/utils/sale/{utils.ts => index.ts}         |   4 +-
 .../sale/{utils.test.ts => sales.test.ts}     |   2 +-
 .../crossChain/consts.ts}                     |   0
 .../crossChain/index.ts}                      |   2 +-
 .../crossChain/utils.ts}                      |   0
 .../native/index.ts}                          |   2 +-
 19 files changed, 213 insertions(+), 198 deletions(-)
 create mode 100644 src/utils/coretime/index.ts
 delete mode 100644 src/utils/functions.ts
 create mode 100644 src/utils/functions/api.ts
 create mode 100644 src/utils/functions/balance.ts
 create mode 100644 src/utils/functions/common.ts
 rename src/utils/{ => functions}/functions.test.ts (97%)
 create mode 100644 src/utils/functions/index.ts
 create mode 100644 src/utils/functions/timestamps.ts
 rename src/utils/sale/{utils.ts => index.ts} (96%)
 rename src/utils/sale/{utils.test.ts => sales.test.ts} (99%)
 rename src/utils/{crossChain/consts.tsx => transfers/crossChain/consts.ts} (100%)
 rename src/utils/{crossChain/transfer.tsx => transfers/crossChain/index.ts} (98%)
 rename src/utils/{crossChain/utils.tsx => transfers/crossChain/utils.ts} (100%)
 rename src/utils/{native/transfer.tsx => transfers/native/index.ts} (95%)

diff --git a/src/components/Elements/ListingCard/index.tsx b/src/components/Elements/ListingCard/index.tsx
index 029f5276..3f23f2ba 100644
--- a/src/components/Elements/ListingCard/index.tsx
+++ b/src/components/Elements/ListingCard/index.tsx
@@ -196,7 +196,10 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Price/timeslice:</Typography>
           <Typography variant='h2'>
-            {`${formatBalance(listing.timeslicePrice.toString(), true)} ${symbol}`}
+            {`${formatBalance(
+              listing.timeslicePrice.toString(),
+              true
+            )} ${symbol}`}
           </Typography>
         </Box>
         <Box
@@ -206,7 +209,10 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Total:</Typography>
           <Typography variant='h2'>
-            {`${formatBalance(listing.currentPrice.toString(), true)} ${symbol}`}
+            {`${formatBalance(
+              listing.currentPrice.toString(),
+              true
+            )} ${symbol}`}
           </Typography>
         </Box>
       </Box>
diff --git a/src/components/Modals/Transfer/index.tsx b/src/components/Modals/Transfer/index.tsx
index 8fdee019..a0497542 100644
--- a/src/components/Modals/Transfer/index.tsx
+++ b/src/components/Modals/Transfer/index.tsx
@@ -12,7 +12,7 @@ import {
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
-import { transferRegionOnCoretimeChain } from '@/utils/native/transfer';
+import { transferRegionOnCoretimeChain } from '@/utils/transfers/native';
 
 import { ProgressButton, SimpleRegionCard } from '@/components/Elements';
 
diff --git a/src/hooks/salePhase.tsx b/src/hooks/salePhase.tsx
index 9fea220f..0ffcbcb3 100644
--- a/src/hooks/salePhase.tsx
+++ b/src/hooks/salePhase.tsx
@@ -11,7 +11,7 @@ import {
   getCurrentPhase,
   getSaleEndInBlocks,
   getSaleStartInBlocks,
-} from '@/utils/sale/utils';
+} from '@/utils/sale';
 
 import { useCoretimeApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
diff --git a/src/hooks/salePrice.tsx b/src/hooks/salePrice.tsx
index c2a5113b..748ebf08 100644
--- a/src/hooks/salePrice.tsx
+++ b/src/hooks/salePrice.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 
-import { getCurrentPrice } from '@/utils/sale/utils';
+import { getCurrentPrice } from '@/utils/sale';
 
 import { useSaleInfo } from '@/contexts/sales';
 
diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx
index 50fc7931..40359752 100644
--- a/src/pages/transfer.tsx
+++ b/src/pages/transfer.tsx
@@ -4,15 +4,15 @@ import { Keyring } from '@polkadot/api';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
+import theme from '@/utils/muiTheme';
 import {
   transferTokensFromCoretimeToRelay,
   transferTokensFromRelayToCoretime,
-} from '@/utils/crossChain/transfer';
-import theme from '@/utils/muiTheme';
+} from '@/utils/transfers/crossChain';
 import {
   transferNativeToken,
   transferRegionOnCoretimeChain,
-} from '@/utils/native/transfer';
+} from '@/utils/transfers/native';
 
 import {
   AmountInput,
diff --git a/src/utils/coretime/index.ts b/src/utils/coretime/index.ts
new file mode 100644
index 00000000..1a821c90
--- /dev/null
+++ b/src/utils/coretime/index.ts
@@ -0,0 +1,45 @@
+// TODO: should be queried from runtime api instead.
+//
+// https://github.com/paritytech/polkadot-sdk/pull/3485
+
+import { RegionId } from 'coretime-utils';
+
+export const leadinFactorAt = (network: any, when: number) => {
+  if (network === 'rococo') return 2 - when;
+  else {
+    return 5 - 4 * when;
+  }
+};
+
+export const extractRegionIdFromRaw = (rawRegionId: bigint): RegionId => {
+  // Extract 'begin' (top 32 bits) and explicitly cast to number
+  const begin = Number(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    (rawRegionId >> BigInt(96)) & BigInt(0xffffffff)
+  );
+
+  // Extract 'core' (next 16 bits) and explicitly cast to number
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const core = Number((rawRegionId >> BigInt(80)) & BigInt(0xffff));
+
+  // Extract 'mask' (lowest 80 bits)
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const mask: bigint = rawRegionId & BigInt('0xFFFFFFFFFFFFFFFFFFFF');
+
+  return {
+    begin,
+    core,
+    mask: ('0x' + mask.toString(16)).padEnd(22, '0'),
+  };
+};
+
+export const rcBlockToParachainBlock = (
+  network: any,
+  blockNumber: number
+): number => {
+  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
+  return network == 'rococo' ? blockNumber : Math.floor(blockNumber / 2);
+};
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
deleted file mode 100644
index 8c93153d..00000000
--- a/src/utils/functions.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { ApiPromise } from '@polkadot/api';
-import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types';
-import { ISubmittableResult, Signer } from '@polkadot/types/types';
-import { formatBalance as polkadotFormatBalance, isHex } from '@polkadot/util';
-import { validateAddress } from '@polkadot/util-crypto';
-import { RegionId } from 'coretime-utils';
-import Decimal from 'decimal.js';
-
-import {
-  CORETIME_DECIMALS,
-  REGIONX_DECIMALS,
-  TxStatusHandlers,
-} from '@/models';
-
-// parse human readable number string
-export const parseHNString = (str: string): number => {
-  return parseInt(parseHNStringToString(str));
-};
-
-export const parseHNStringToString = (str: string): string => {
-  return str.replace(/,/g, '');
-};
-
-export const isValidAddress = (chainAddress: string, ss58Prefix = 42) => {
-  if (isHex(chainAddress)) return false;
-  try {
-    validateAddress(chainAddress, true, ss58Prefix);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-export const getBlockTimestamp = async (
-  api: ApiPromise,
-  height: number,
-  blockTime = 6000
-): Promise<number> => {
-  const [resHeight, resTimestamp] = await Promise.all([
-    api.query.system.number(),
-    api.query.timestamp.now(),
-  ]);
-  const currentHeight = parseHNString(resHeight.toString());
-  const currentTimestamp = parseHNString(resTimestamp.toString());
-  if (height <= currentHeight) {
-    return currentTimestamp - (currentHeight - height) * blockTime;
-  } else {
-    return currentTimestamp + (height - currentHeight) * blockTime;
-  }
-};
-
-export const timesliceToTimestamp = async (
-  api: ApiPromise,
-  timeslice: number,
-  timeslicePeriod: number
-): Promise<number> => {
-  const blockHeight = timeslice * timeslicePeriod;
-  const timestamp = await getBlockTimestamp(api, blockHeight);
-
-  return timestamp;
-};
-
-export const timestampToTimeslice = async (
-  api: ApiPromise,
-  timestamp: EpochTimeStamp,
-  timeslicePeriod: number
-): Promise<number> => {
-  // We have the current block number and the corresponding timestamp.
-  // Assume that 1 block ~ 6 seconds..
-  const [resHeight, resTimestamp] = await Promise.all([
-    api.query.system.number(),
-    api.query.timestamp.now(),
-  ]);
-  const currentHeight = parseHNString(resHeight.toString());
-  const now = parseHNString(resTimestamp.toString());
-  if (now > timestamp) {
-    // timestamps are in millis
-    const diffInBlocks = currentHeight - (now - timestamp) / 6000;
-    return diffInBlocks / timeslicePeriod;
-  } else {
-    // timestamps are in millis
-    const diffInBlocks = currentHeight + (timestamp - now) / 6000;
-    return diffInBlocks / timeslicePeriod;
-  }
-};
-
-export const formatBalance = (balance: string, regionXChain: boolean) => {
-  Decimal.config({ rounding: Decimal.ROUND_DOWN });
-  const decimals = regionXChain ? REGIONX_DECIMALS : CORETIME_DECIMALS;
-
-  return polkadotFormatBalance(balance, {
-    decimals,
-    withUnit: false,
-    withSiFull: true,
-  });
-};
-
-// TODO: should be queried from runtime api instead.
-//
-// https://github.com/paritytech/polkadot-sdk/pull/3485
-export const leadinFactorAt = (network: any, when: number) => {
-  if (network === 'rococo') return 2 - when;
-  else {
-    return 5 - 4 * when;
-  }
-};
-
-export const extractRegionIdFromRaw = (rawRegionId: bigint): RegionId => {
-  // Extract 'begin' (top 32 bits) and explicitly cast to number
-  const begin = Number(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (rawRegionId >> BigInt(96)) & BigInt(0xffffffff)
-  );
-
-  // Extract 'core' (next 16 bits) and explicitly cast to number
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const core = Number((rawRegionId >> BigInt(80)) & BigInt(0xffff));
-
-  // Extract 'mask' (lowest 80 bits)
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const mask: bigint = rawRegionId & BigInt('0xFFFFFFFFFFFFFFFFFFFF');
-
-  return {
-    begin,
-    core,
-    mask: ('0x' + mask.toString(16)).padEnd(22, '0'),
-  };
-};
-
-export const fetchBalance = async (
-  api: ApiPromise,
-  address: string
-): Promise<number> => {
-  const coretimeAccount = (
-    await api.query.system.account(address)
-  ).toHuman() as any;
-
-  return parseHNString(coretimeAccount.data.free.toString());
-};
-
-export const sendTx = (
-  tx: SubmittableExtrinsic<'promise', ISubmittableResult>,
-  account: AddressOrPair,
-  signer: Signer,
-  handlers: TxStatusHandlers
-) => {
-  try {
-    tx.signAndSend(account, { signer }, ({ status, events }) => {
-      if (status.isReady) handlers.ready();
-      else if (status.isInBlock) handlers.inBlock();
-      else if (status.isFinalized) {
-        handlers.finalized();
-        events.forEach(({ event: { method } }) => {
-          if (method === 'ExtrinsicSuccess') {
-            handlers.success();
-          } else if (method === 'ExtrinsicFailed') {
-            handlers.error();
-          }
-        });
-      }
-    });
-  } catch {
-    handlers.error();
-  } finally {
-    handlers.finally && handlers.finally();
-  }
-};
-
-export const getBlockTime = (network: any): number => {
-  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
-  const blockTime = !network || network == 'kusama' ? 12000 : 6000;
-  return blockTime;
-};
-
-export const rcBlockToParachainBlock = (
-  network: any,
-  blockNumber: number
-): number => {
-  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
-  return network == 'rococo' ? blockNumber : Math.floor(blockNumber / 2);
-};
diff --git a/src/utils/functions/api.ts b/src/utils/functions/api.ts
new file mode 100644
index 00000000..b3ccc76e
--- /dev/null
+++ b/src/utils/functions/api.ts
@@ -0,0 +1,32 @@
+import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types';
+import { ISubmittableResult, Signer } from '@polkadot/types/types';
+
+import { TxStatusHandlers } from '@/models';
+
+export const sendTx = (
+  tx: SubmittableExtrinsic<'promise', ISubmittableResult>,
+  account: AddressOrPair,
+  signer: Signer,
+  handlers: TxStatusHandlers
+) => {
+  try {
+    tx.signAndSend(account, { signer }, ({ status, events }) => {
+      if (status.isReady) handlers.ready();
+      else if (status.isInBlock) handlers.inBlock();
+      else if (status.isFinalized) {
+        handlers.finalized();
+        events.forEach(({ event: { method } }) => {
+          if (method === 'ExtrinsicSuccess') {
+            handlers.success();
+          } else if (method === 'ExtrinsicFailed') {
+            handlers.error();
+          }
+        });
+      }
+    });
+  } catch {
+    handlers.error();
+  } finally {
+    handlers.finally && handlers.finally();
+  }
+};
diff --git a/src/utils/functions/balance.ts b/src/utils/functions/balance.ts
new file mode 100644
index 00000000..bb0cfab5
--- /dev/null
+++ b/src/utils/functions/balance.ts
@@ -0,0 +1,29 @@
+import { ApiPromise } from '@polkadot/api';
+import { formatBalance as polkadotFormatBalance } from '@polkadot/util';
+import Decimal from 'decimal.js';
+
+import { CORETIME_DECIMALS, REGIONX_DECIMALS } from '@/models';
+
+import { parseHNString } from './common';
+
+export const formatBalance = (balance: string, regionXChain: boolean) => {
+  Decimal.config({ rounding: Decimal.ROUND_DOWN });
+  const decimals = regionXChain ? REGIONX_DECIMALS : CORETIME_DECIMALS;
+
+  return polkadotFormatBalance(balance, {
+    decimals,
+    withUnit: false,
+    withSiFull: true,
+  });
+};
+
+export const fetchBalance = async (
+  api: ApiPromise,
+  address: string
+): Promise<number> => {
+  const coretimeAccount = (
+    await api.query.system.account(address)
+  ).toHuman() as any;
+
+  return parseHNString(coretimeAccount.data.free.toString());
+};
diff --git a/src/utils/functions/common.ts b/src/utils/functions/common.ts
new file mode 100644
index 00000000..e81e98cb
--- /dev/null
+++ b/src/utils/functions/common.ts
@@ -0,0 +1,21 @@
+import { isHex } from '@polkadot/util';
+import { validateAddress } from '@polkadot/util-crypto';
+
+// parse human readable number string
+export const parseHNString = (str: string): number => {
+  return parseInt(parseHNStringToString(str));
+};
+
+export const parseHNStringToString = (str: string): string => {
+  return str.replace(/,/g, '');
+};
+
+export const isValidAddress = (chainAddress: string, ss58Prefix = 42) => {
+  if (isHex(chainAddress)) return false;
+  try {
+    validateAddress(chainAddress, true, ss58Prefix);
+    return true;
+  } catch {
+    return false;
+  }
+};
diff --git a/src/utils/functions.test.ts b/src/utils/functions/functions.test.ts
similarity index 97%
rename from src/utils/functions.test.ts
rename to src/utils/functions/functions.test.ts
index 529403b3..0e3443b8 100644
--- a/src/utils/functions.test.ts
+++ b/src/utils/functions/functions.test.ts
@@ -4,7 +4,7 @@ import {
   extractRegionIdFromRaw,
   parseHNString,
   parseHNStringToString,
-} from './functions';
+} from '.';
 
 describe('Util functions', () => {
   describe('parseHNString', () => {
diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts
new file mode 100644
index 00000000..7673a882
--- /dev/null
+++ b/src/utils/functions/index.ts
@@ -0,0 +1,4 @@
+export * from './api';
+export * from './balance';
+export * from './common';
+export * from './timestamps';
diff --git a/src/utils/functions/timestamps.ts b/src/utils/functions/timestamps.ts
new file mode 100644
index 00000000..125342b1
--- /dev/null
+++ b/src/utils/functions/timestamps.ts
@@ -0,0 +1,62 @@
+import { ApiPromise } from '@polkadot/api';
+
+import { parseHNString } from './common';
+
+export const getBlockTimestamp = async (
+  api: ApiPromise,
+  height: number,
+  blockTime = 6000
+): Promise<number> => {
+  const [resHeight, resTimestamp] = await Promise.all([
+    api.query.system.number(),
+    api.query.timestamp.now(),
+  ]);
+  const currentHeight = parseHNString(resHeight.toString());
+  const currentTimestamp = parseHNString(resTimestamp.toString());
+  if (height <= currentHeight) {
+    return currentTimestamp - (currentHeight - height) * blockTime;
+  } else {
+    return currentTimestamp + (height - currentHeight) * blockTime;
+  }
+};
+
+export const timesliceToTimestamp = async (
+  api: ApiPromise,
+  timeslice: number,
+  timeslicePeriod: number
+): Promise<number> => {
+  const blockHeight = timeslice * timeslicePeriod;
+  const timestamp = await getBlockTimestamp(api, blockHeight);
+
+  return timestamp;
+};
+
+export const timestampToTimeslice = async (
+  api: ApiPromise,
+  timestamp: EpochTimeStamp,
+  timeslicePeriod: number
+): Promise<number> => {
+  // We have the current block number and the corresponding timestamp.
+  // Assume that 1 block ~ 6 seconds..
+  const [resHeight, resTimestamp] = await Promise.all([
+    api.query.system.number(),
+    api.query.timestamp.now(),
+  ]);
+  const currentHeight = parseHNString(resHeight.toString());
+  const now = parseHNString(resTimestamp.toString());
+  if (now > timestamp) {
+    // timestamps are in millis
+    const diffInBlocks = currentHeight - (now - timestamp) / 6000;
+    return diffInBlocks / timeslicePeriod;
+  } else {
+    // timestamps are in millis
+    const diffInBlocks = currentHeight + (timestamp - now) / 6000;
+    return diffInBlocks / timeslicePeriod;
+  }
+};
+
+export const getBlockTime = (network: any): number => {
+  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
+  const blockTime = !network || network == 'kusama' ? 12000 : 6000;
+  return blockTime;
+};
diff --git a/src/utils/sale/utils.ts b/src/utils/sale/index.ts
similarity index 96%
rename from src/utils/sale/utils.ts
rename to src/utils/sale/index.ts
index a86d6dcd..4007512d 100644
--- a/src/utils/sale/utils.ts
+++ b/src/utils/sale/index.ts
@@ -1,9 +1,9 @@
 import { Timeslice } from 'coretime-utils';
 
-import { leadinFactorAt, rcBlockToParachainBlock } from '@/utils/functions';
-
 import { BlockNumber, SaleConfig, SaleInfo, SalePhase } from '@/models';
 
+import { leadinFactorAt, rcBlockToParachainBlock } from '../coretime';
+
 export const getCurrentPhase = (
   saleInfo: SaleInfo,
   blockNumber: number
diff --git a/src/utils/sale/utils.test.ts b/src/utils/sale/sales.test.ts
similarity index 99%
rename from src/utils/sale/utils.test.ts
rename to src/utils/sale/sales.test.ts
index 3886c5aa..f353a512 100644
--- a/src/utils/sale/utils.test.ts
+++ b/src/utils/sale/sales.test.ts
@@ -6,7 +6,7 @@ import {
   getSaleEndInBlocks,
   getSaleProgress,
   getSaleStartInBlocks,
-} from './utils';
+} from '.';
 
 describe('Purchase page', () => {
   const mockSaleInfo: SaleInfo = {
diff --git a/src/utils/crossChain/consts.tsx b/src/utils/transfers/crossChain/consts.ts
similarity index 100%
rename from src/utils/crossChain/consts.tsx
rename to src/utils/transfers/crossChain/consts.ts
diff --git a/src/utils/crossChain/transfer.tsx b/src/utils/transfers/crossChain/index.ts
similarity index 98%
rename from src/utils/crossChain/transfer.tsx
rename to src/utils/transfers/crossChain/index.ts
index 670e9613..9dc4f3c1 100644
--- a/src/utils/crossChain/transfer.tsx
+++ b/src/utils/transfers/crossChain/index.ts
@@ -18,7 +18,7 @@ import {
   versionWrappeddFungibleAsset,
   versionWrappeddNonfungibleAsset,
 } from './utils';
-import { sendTx } from '../functions';
+import { sendTx } from '../../functions';
 
 export async function coretimeToRegionXTransfer(
   coretimeApi: ApiPromise,
diff --git a/src/utils/crossChain/utils.tsx b/src/utils/transfers/crossChain/utils.ts
similarity index 100%
rename from src/utils/crossChain/utils.tsx
rename to src/utils/transfers/crossChain/utils.ts
diff --git a/src/utils/native/transfer.tsx b/src/utils/transfers/native/index.ts
similarity index 95%
rename from src/utils/native/transfer.tsx
rename to src/utils/transfers/native/index.ts
index 8bdf6b33..d7440a60 100644
--- a/src/utils/native/transfer.tsx
+++ b/src/utils/transfers/native/index.ts
@@ -4,7 +4,7 @@ import { Region } from 'coretime-utils';
 
 import { TxStatusHandlers } from '@/models';
 
-import { sendTx } from '../functions';
+import { sendTx } from '../../functions';
 
 export const transferNativeToken = async (
   api: ApiPromise,

From 0017b0ef9bad9276a0102b893eb089ee8060d8d5 Mon Sep 17 00:00:00 2001
From: cuteolaf <oliverlim818@gmail.com>
Date: Wed, 8 May 2024 19:06:00 -0700
Subject: [PATCH 3/4] fix test

---
 src/utils/functions/functions.test.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/utils/functions/functions.test.ts b/src/utils/functions/functions.test.ts
index 0e3443b8..24351278 100644
--- a/src/utils/functions/functions.test.ts
+++ b/src/utils/functions/functions.test.ts
@@ -1,10 +1,7 @@
 import { completeMask, RegionId } from 'coretime-utils';
 
-import {
-  extractRegionIdFromRaw,
-  parseHNString,
-  parseHNStringToString,
-} from '.';
+import { parseHNString, parseHNStringToString } from '.';
+import { extractRegionIdFromRaw } from '../coretime';
 
 describe('Util functions', () => {
   describe('parseHNString', () => {

From 1fb766a2e489e418c7adc04d80a558ea6c8cd8a4 Mon Sep 17 00:00:00 2001
From: Sergej <sakacszergej@gmail.com>
Date: Thu, 9 May 2024 08:47:51 +0200
Subject: [PATCH 4/4] Display 'Task: Instantaneous Pool'

---
 src/components/Elements/RegionCard/index.tsx |  3 ++-
 src/contexts/tasks/index.tsx                 | 25 +++++++++++---------
 src/models/consts.ts                         |  2 ++
 src/models/types.ts                          |  8 ++++---
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/Elements/RegionCard/index.tsx b/src/components/Elements/RegionCard/index.tsx
index 55381e5f..b34f69bc 100644
--- a/src/components/Elements/RegionCard/index.tsx
+++ b/src/components/Elements/RegionCard/index.tsx
@@ -26,7 +26,7 @@ import { useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
 import { useCommon } from '@/contexts/common';
 import { useTasks } from '@/contexts/tasks';
-import { RegionLocation, RegionMetadata } from '@/models';
+import { POOLING_TASK_ID, RegionLocation, RegionMetadata } from '@/models';
 
 import styles from './index.module.scss';
 import { Label } from '..';
@@ -168,6 +168,7 @@ const RegionCardInner = ({
   };
 
   const getTask = (taskId: number | null): string => {
+    if (taskId === POOLING_TASK_ID) return 'Instantaneous Pool';
     const getTaskName = (taskId: number) => {
       return tasks.find(({ id }) => id === taskId)?.name || '';
     };
diff --git a/src/contexts/tasks/index.tsx b/src/contexts/tasks/index.tsx
index d98c8923..1d5462ff 100644
--- a/src/contexts/tasks/index.tsx
+++ b/src/contexts/tasks/index.tsx
@@ -3,7 +3,7 @@ import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { parseHNString } from '@/utils/functions';
 
-import { ScheduleItem, TaskMetadata } from '@/models';
+import { POOLING_TASK_ID, ScheduleItem, TaskMetadata } from '@/models';
 
 import { useCoretimeApi } from '../apis';
 import { ApiState } from '../apis/types';
@@ -69,19 +69,20 @@ const TaskDataProvider = ({ children }: Props) => {
       const records = value.toHuman(undefined, true) as ScheduleItem[];
 
       records.forEach((record) => {
-        const {
-          assignment: { Task: taskId },
-          mask,
-        } = record;
-
+        const { assignment, mask } = record;
         const regionId = {
           begin: parseHNString(begin.toString()),
           core: parseHNString(core.toString()),
           mask,
         };
-        tasks[getEncodedRegionId(regionId, coretimeApi).toString()] = taskId
-          ? parseHNString(taskId)
-          : null;
+
+        if (assignment === 'Pool') {
+          tasks[getEncodedRegionId(regionId, coretimeApi).toString()] =
+            POOLING_TASK_ID;
+        } else {
+          tasks[getEncodedRegionId(regionId, coretimeApi).toString()] =
+            assignment.Task ? parseHNString(assignment.Task) : null;
+        }
       });
     }
 
@@ -104,7 +105,10 @@ const TaskDataProvider = ({ children }: Props) => {
         await coretimeApi.query.broker.workload(core)
       ).toHuman() as ScheduleItem[]
     )[0];
-    if (workload.assignment && workload.assignment.Task) {
+
+    if (workload.assignment === 'Pool') {
+      return POOLING_TASK_ID;
+    } else {
       const {
         assignment: { Task: taskId },
         mask,
@@ -113,7 +117,6 @@ const TaskDataProvider = ({ children }: Props) => {
       // Make the workload is for the specific region.
       return mask == regionMask ? parseHNString(taskId) : null;
     }
-    return 0;
   };
 
   const loadTasksFromLocalStorage = () => {
diff --git a/src/models/consts.ts b/src/models/consts.ts
index 0e293bbf..7a0d01b3 100644
--- a/src/models/consts.ts
+++ b/src/models/consts.ts
@@ -23,3 +23,5 @@ export const REGIONX_PARA_ID = 2000;
 export const SAFE_XCM_VERSION = 3;
 
 export const BROKER_PALLET_ID = 50;
+
+export const POOLING_TASK_ID = 0;
diff --git a/src/models/types.ts b/src/models/types.ts
index bfd7356b..fbb0febf 100644
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -83,9 +83,11 @@ export type TaskMetadata = {
 
 export type ScheduleItem = {
   mask: string;
-  assignment: {
-    Task: string;
-  };
+  assignment:
+    | {
+        Task: string;
+      }
+    | 'Pool';
 };
 
 export type SaleInfo = {