Pre migration refactor | fixes & minor adjustments (#57)

* rename TxHandlers to TxStatusHandlers

* Fix progress bar

* move Selectors

* constants

* lint & format

src/components/Elements/Progress/index.tsx

@@ -37,7 +37,7 @@ export const Progress = ({ progress, sections }: ProgressProps) => {
       {sections
         .filter((s) => s.value > 0)
         .map(({ name, value }, index) => (
-          <>
+          <div key={index}>
             <Box
               key={index}
               position='absolute'
@@ -57,7 +57,7 @@ export const Progress = ({ progress, sections }: ProgressProps) => {
             >
               <Typography component='div'>{`${name}`}</Typography>
             </Box>
-          </>
+          </div>
         ))}
     </Box>
   );

src/components/Selectors/index.ts → src/components/Elements/Selectors/index.ts

@@ -1,3 +1,3 @@
 export * from './ChainSelector';
 export * from './RecipientSelector';
-export * from './RegionSelector';
+export * from './RegionSelector';

src/components/Modals/Purchase/index.tsx

@@ -65,9 +65,10 @@ export const PurchaseModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to purchase region from sale. Error: ${e.errorMessage === 'Error'
-          ? 'Please check your balance.'
-          : e.errorMessage
+        `Failed to purchase region from sale. Error: ${
+          e.errorMessage === 'Error'
+            ? 'Please check your balance.'
+            : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Modals/Sell/index.tsx

@@ -13,7 +13,7 @@ import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { AmountInput, RegionCard } from '@/components/Elements';
-import { RecipientSelector } from '@/components/Selectors/RecipientSelector';
+import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector';
 
 import { CONTRACT_MARKET, CONTRACT_XC_REGIONS } from '@/contexts/apis/consts';
 import { useRegions } from '@/contexts/regions';
@@ -85,7 +85,8 @@ export const SellModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to approve the region. Error: ${e.errorMessage === 'Error' ? 'Please check your balance.' : e
+        `Failed to approve the region. Error: ${
+          e.errorMessage === 'Error' ? 'Please check your balance.' : e
         }`
       );
       setWorking(false);
@@ -126,9 +127,10 @@ export const SellModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to list the region. Error: ${e.errorMessage === 'Error'
-          ? 'Please check your balance.'
-          : e.errorMessage
+        `Failed to list the region. Error: ${
+          e.errorMessage === 'Error'
+            ? 'Please check your balance.'
+            : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Modals/Unlist/index.tsx

@@ -72,9 +72,10 @@ export const UnlistModal = ({
       setWorking(false);
     } catch (e: any) {
       toastError(
-        `Failed to unlist region from sale. Error: ${e.errorMessage === 'Error'
-          ? 'Please check your balance.'
-          : e.errorMessage
+        `Failed to unlist region from sale. Error: ${
+          e.errorMessage === 'Error'
+            ? 'Please check your balance.'
+            : e.errorMessage
         }`
       );
       setWorking(false);

src/components/Sidebar/index.tsx

@@ -27,8 +27,9 @@ const MenuItem = ({ label, enabled, route, icon }: MenuItemProps) => {
 
   return (
     <Box
-      className={`${styles.menuItem} ${isActive ? styles.active : styles.inactive
-        } ${!enabled ? styles.disabled : ''}`}
+      className={`${styles.menuItem} ${
+        isActive ? styles.active : styles.inactive
+      } ${!enabled ? styles.disabled : ''}`}
       onClick={() => enabled && route && push(route)}
     >
       {{

src/components/index.ts

@@ -1,6 +1,6 @@
 export * from './Elements';
+export * from './Elements/Selectors';
 export * from './Header';
 export * from './Layout';
 export * from './Modals';
-export * from './Selectors';
 export * from './Sidebar';

src/models/consts.ts

@@ -1,13 +1,23 @@
 export const COREMASK_BIT_LEN = 80;
-export const RELAY_CHAIN_BLOCK_TIME = 6 * 1000;
+
 export const SECOND = 1 * 1000;
 export const MINUTE = 60 * SECOND;
 export const HOUR = 60 * MINUTE;
 export const DAY = 24 * HOUR;
+export const RELAY_CHAIN_BLOCK_TIME = 6 * SECOND;
+
 export const CORETIME_DECIMALS = 12;
 export const CONTRACT_DECIMALS = 18;
 export const LISTING_DEPOSIT = 0 * CONTRACT_DECIMALS;
+
 /// Given that a timeslice is 8 minutes;
 export const DAY_IN_TIMESLICES = 180;
 export const WEEK_IN_TIMESLICES = DAY_IN_TIMESLICES * 7;
 export const REGION_COLLECTION_ID = 42;
+
+export const CORETIME_CHAIN_PARA_ID = 1005;
+export const CONTRACTS_CHAIN_PARA_ID = 2000;
+
+export const SAFE_XCM_VERSION = 3;
+
+export const BROKER_PALLET_ID = 50;

src/models/index.ts

@@ -1,2 +1,2 @@
 export * from './consts';
-export * from './types';
+export * from './types';

src/models/types.ts

@@ -2,7 +2,15 @@ import { ApiPromise } from '@polkadot/api';
 import { ContractPromise } from '@polkadot/api-contract';
 import { Signer } from '@polkadot/types/types';
 import { BN } from '@polkadot/util';
-import { Balance, ContextData, CoreIndex, RawRegionId, Region, TaskId, Timeslice } from 'coretime-utils';
+import {
+  Balance,
+  ContextData,
+  CoreIndex,
+  RawRegionId,
+  Region,
+  TaskId,
+  Timeslice,
+} from 'coretime-utils';
 
 export type Percentage = number; // Percentage value between 0 and 1
 
@@ -21,7 +29,7 @@ export type ContractContext = {
   marketContract: ContractPromise | undefined;
 };
 
-export type TxHandlers = {
+export type TxStatusHandlers = {
   ready: () => void;
   inBlock: () => void;
   finalized: () => void;
@@ -187,7 +195,6 @@ export class RegionMetadata {
   }
 }
 
-
 export class Listing {
   /// The reigon listed on sale.
   public region: Region;

src/pages/marketplace.tsx

@@ -13,7 +13,8 @@ const Marketplace = () => {
 
   const [purchaseModalOpen, openPurhcaseModal] = useState(false);
   const [selectedListing, setSelectedListing] = useState<Listing | null>(null);
-  const [filteredListings, setFilteredListings] = useState<Listing[]>(listedRegions);
+  const [filteredListings, setFilteredListings] =
+    useState<Listing[]>(listedRegions);
 
   const onPurchase = (listing: Listing) => {
     setSelectedListing(listing);

src/pages/purchase.tsx

@@ -79,16 +79,21 @@ const Purchase = () => {
           (await api.query.broker.status()).toHuman() as any
         ).lastCommittedTimeslice.toString()
       );
-      const end = blockNumber + 80 * (saleInfo.regionBegin - lastCommittedTimeslice);
+      const _saleStart = saleInfo.saleStart;
+      const _saleEnd =
+        blockNumber + 80 * (saleInfo.regionBegin - lastCommittedTimeslice);
 
       setCurrentBlockNumber(blockNumber);
-      setSaleEnd(end);
-      getBlockTimestamp(api, end).then((value) => setSaleEndTimestamp(value));
+      setSaleEnd(_saleEnd);
+      getBlockTimestamp(api, _saleEnd).then((value) =>
+        setSaleEndTimestamp(value)
+      );
 
-      const saleDuration = end - saleInfo.saleStart;
-      const elapsed = blockNumber - (saleInfo.saleStart - config.interludeLength);
+      const saleDuration = _saleEnd - _saleStart;
+      const elapsed = blockNumber - _saleStart;
 
-      setProgress((elapsed / (end - (saleInfo.saleStart + config.interludeLength))) * 100);
+      const progress = elapsed / saleDuration;
+      setProgress(progress * 100);
 
       if (saleInfo.saleStart > blockNumber) {
         setCurrentPhase(SalePhase.Interlude);
@@ -106,7 +111,9 @@ const Purchase = () => {
         },
         {
           name: 'Fixed price phase',
-          value: ((config.interludeLength + config.leadinLength) / saleDuration) * 100,
+          value:
+            ((config.interludeLength + config.leadinLength) / saleDuration) *
+            100,
         },
       ]);
     },
@@ -117,7 +124,10 @@ const Purchase = () => {
     async (api: ApiPromise) => {
       const blockNumber = (await api.query.system.number()).toJSON() as number;
 
-      const num = Math.min(blockNumber - saleInfo.saleStart, saleInfo.leadinLength);
+      const num = Math.min(
+        blockNumber - saleInfo.saleStart,
+        saleInfo.leadinLength
+      );
       const through = num / saleInfo.leadinLength;
       setCurrentPrice(
         Number((leadinFactorAt(through) * saleInfo.price).toFixed())
@@ -200,11 +210,11 @@ const Purchase = () => {
       </Box>
       <Box>
         {loading ||
-          !currentPhase ||
-          !saleEnd ||
-          !currentBlockNumber ||
-          !progress ||
-          !saleEndTimestamp ? (
+        !currentPhase ||
+        !saleEnd ||
+        !currentBlockNumber ||
+        !progress ||
+        !saleEndTimestamp ? (
           <>
             <Typography variant='h5' align='center'>
               Connect your wallet

src/utils/crossChain/consts.tsx

@@ -1,10 +1,10 @@
-export const XCM_VERSION = 3;
+import { BROKER_PALLET_ID, CORETIME_CHAIN_PARA_ID } from '@/models';
 
 export const CoretimeChain = {
   parents: 1,
   interior: {
     X1: {
-      Parachain: 1005,
+      Parachain: CORETIME_CHAIN_PARA_ID,
     },
   },
 };
@@ -13,7 +13,7 @@ export const ContractsChain = {
   parents: 1,
   interior: {
     X1: {
-      Parachain: 2000,
+      Parachain: CORETIME_CHAIN_PARA_ID,
     },
   },
 };
@@ -22,14 +22,17 @@ export const CoretimeRegionFromCoretimePerspective = {
   parents: 0,
   interior: {
     X1: {
-      PalletInstance: 50,
+      PalletInstance: BROKER_PALLET_ID,
     },
   },
 };
 
 export const CoretimeRegionFromContractsPerspective = {
   parents: 1,
   interior: {
-    X2: [{ Parachain: 1005 }, { PalletInstance: 50 }],
+    X2: [
+      { Parachain: CORETIME_CHAIN_PARA_ID },
+      { PalletInstance: BROKER_PALLET_ID },
+    ],
   },
 };

src/utils/crossChain/transfer.tsx

@@ -1,7 +1,7 @@
 import { ApiPromise } from '@polkadot/api';
 import { BN } from '@polkadot/util';
 
-import { Sender, TxHandlers } from '@/models';
+import { Sender, TxStatusHandlers } from '@/models';
 
 import {
   ContractsChain,
@@ -16,7 +16,7 @@ export async function coretimeToContractsTransfer(
   sender: Sender,
   rawRegionId: BN,
   receiver: Uint8Array,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) {
   const beneficiary = {
     parents: 0,
@@ -74,7 +74,7 @@ export function contractsToCoretimeTransfer(
   sender: Sender,
   rawRegionId: BN,
   receiver: Uint8Array,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) {
   const beneficiary = {
     parents: 0,

src/utils/crossChain/utils.tsx

@@ -1,8 +1,8 @@
-import { XCM_VERSION } from './consts';
+import { SAFE_XCM_VERSION } from '@/models';
 
 export const versionedWrap = (xcm: any) => {
   return {
-    [`V${XCM_VERSION}`]: xcm,
+    [`V${SAFE_XCM_VERSION}`]: xcm,
   };
 };
 

src/utils/native/approve.tsx

@@ -5,15 +5,15 @@ import {
   ContractContext,
   REGION_COLLECTION_ID,
   Sender,
-  TxHandlers,
+  TxStatusHandlers,
 } from '@/models';
 
 export const approveNonWrappedRegion = async (
   ctx: ContractContext,
   sender: Sender,
   region: Region,
   who: string,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) => {
   const { contractsApi } = ctx;
   if (!contractsApi) return;
@@ -53,7 +53,7 @@ export const approveXcRegion = async (
   sender: Sender,
   region: Region,
   who: string,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) => {
   const { contractsApi, xcRegionsContract } = ctx;
   if (!contractsApi || !xcRegionsContract) {

src/utils/native/init.tsx

@@ -1,13 +1,13 @@
 import { contractTx } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 
-import { ContractContext, Sender, TxHandlers } from '@/models';
+import { ContractContext, Sender, TxStatusHandlers } from '@/models';
 
 export async function initRegionMetadata(
   contractsCtx: ContractContext,
   sender: Sender,
   region: Region,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) {
   const { contractsApi, xcRegionsContract } = contractsCtx;
   if (!contractsApi || !xcRegionsContract) return;

src/utils/native/remove.tsx

@@ -1,13 +1,13 @@
 import { contractTx } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 
-import { ContractContext, Sender, TxHandlers } from '@/models';
+import { ContractContext, Sender, TxStatusHandlers } from '@/models';
 
 export async function removeXcRegionWrapper(
   contractsCtx: ContractContext,
   sender: Sender,
   region: Region,
-  handlers: TxHandlers
+  handlers: TxStatusHandlers
 ) {
   const { contractsApi, xcRegionsContract } = contractsCtx;
   if (!contractsApi || !xcRegionsContract) return;