Parachain Management (#100)

* WIP: reserve & register modals

* reservation cost

* refactor formatBalance

* more refactoring for balances

* reservation modal working

* fix build

* fix styles

* show table

* default token name and decimals

* reservation working, state

* Update src/pages/paras/index.tsx

* Update src/pages/paras/index.tsx

* buy coretime

Co-authored-by: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>

* parachains soon active

* no action required for 'soon active'

* registration modal

* revert the revert :)

* fix

* fix

* fix duplicated

* fix

* fix format balance

* lease holding and system paras

* lint fix

* fix build

* rename parathread to 'ondemand parachain'

* pass para id to the renewal page

* Update src/pages/paras/index.tsx

* Update src/pages/paras/index.tsx

---------

Co-authored-by: cuteolaf <oliverlim818@gmail.com>
Co-authored-by: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>
Co-authored-by: Sergej <sakacszergej@gmail.com>

package.json

@@ -41,6 +41,7 @@
     "react": "^18.2.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "sass": "^1.48.0",
     "sharp": "^0.32.6"
   },

src/components/Elements/Balance/index.tsx

@@ -1,37 +1,47 @@
 import { Box, Typography, useTheme } from '@mui/material';
 
-import { formatBalance } from '@/utils/functions';
+import { getBalanceString } from '@/utils/functions';
 
 import { useAccounts } from '@/contexts/account';
+import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 
 import styles from './index.module.scss';
 
 interface BalanceProps {
   coretimeBalance: number;
   relayBalance: number;
-  symbol: string;
 }
 
-const Balance = ({ relayBalance, coretimeBalance, symbol }: BalanceProps) => {
+const Balance = ({ relayBalance, coretimeBalance }: BalanceProps) => {
   const theme = useTheme();
   const {
     state: { activeAccount },
   } = useAccounts();
+  const {
+    state: { decimals: relayDecimals, symbol: relaySymbol },
+  } = useRelayApi();
+  const {
+    state: { decimals: coretimeDecimals, symbol: coretimeSymbol },
+  } = useCoretimeApi();
 
   const items = [
     {
       label: 'Relay Chain',
       value: relayBalance,
+      symbol: relaySymbol,
+      decimals: relayDecimals,
     },
     {
       label: 'Coretime Chain',
       value: coretimeBalance,
+      symbol: coretimeSymbol,
+      decimals: coretimeDecimals,
     },
   ];
 
   return activeAccount ? (
     <Box className={styles.container}>
-      {items.map(({ label, value }, index) => (
+      {items.map(({ label, value, symbol, decimals }, index) => (
         <Box key={index} className={styles.balanceItem}>
           <Typography sx={{ color: theme.palette.text.primary }}>
             {label}
@@ -43,7 +53,7 @@ const Balance = ({ relayBalance, coretimeBalance, symbol }: BalanceProps) => {
             }}
             className={styles.balanceWrapper}
           >
-            {`${formatBalance(value.toString(), false)} ${symbol}`}
+            {getBalanceString(value.toString(), decimals, symbol)}
           </Box>
         </Box>
       ))}

src/components/Elements/InputFile/index.module.scss

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 0;
+  width: 15rem;
+  height: 7.5rem;
+  position: relative;
+  background-color: #f6f7fa;
+  color: #000;
+  border: 1px solid #888;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.fileName,
+.fileSize {
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fileSize {
+  font-size: 0.75rem;
+}
+
+.fileName {
+  margin: 0.25rem 0.5rem;
+}
+
+.hasFile {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1rem;
+}
+
+.closeIcon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 0;
+}

src/components/Elements/InputFile/index.tsx

@@ -0,0 +1,123 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import { hexToU8a, isHex, u8aToString } from '@polkadot/util';
+import React, { createRef, useCallback, useState } from 'react';
+import type { DropzoneRef } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
+
+import styles from './index.module.scss';
+
+export interface InputFilePropsBase {
+  className?: string;
+  clearContent?: boolean;
+  isDisabled?: boolean;
+  isError?: boolean;
+  isFull?: boolean;
+  icon: React.ReactNode;
+  label: string;
+}
+
+export interface InputFileProps extends InputFilePropsBase {
+  accept?: string[];
+  onChange?: (_contents: Uint8Array) => void;
+  onCancel?: () => void;
+}
+
+interface FileState {
+  name: string;
+  size: number;
+}
+
+const BYTE_STR_0 = '0'.charCodeAt(0);
+const BYTE_STR_X = 'x'.charCodeAt(0);
+const STR_NL = '\n';
+const NOOP = (): void => undefined;
+
+function convertResult(result: ArrayBuffer): Uint8Array {
+  const data = new Uint8Array(result);
+
+  // this converts the input (if detected as hex), via the hex conversion route
+  if (data[0] === BYTE_STR_0 && data[1] === BYTE_STR_X) {
+    let hex = u8aToString(data);
+
+    while (hex.endsWith(STR_NL)) {
+      hex = hex.substring(0, hex.length - 1);
+    }
+
+    if (isHex(hex)) {
+      return hexToU8a(hex);
+    }
+  }
+
+  return data;
+}
+
+function InputFile({
+  accept,
+  isDisabled,
+  icon,
+  label,
+  onChange,
+  onCancel,
+}: InputFileProps): React.ReactElement<InputFileProps> {
+  const dropRef = createRef<DropzoneRef>();
+  const [file, setFile] = useState<FileState | undefined>();
+
+  const onDrop = useCallback(
+    (files: File[]): void => {
+      files.forEach((file): void => {
+        const reader = new FileReader();
+
+        reader.onabort = NOOP;
+        reader.onerror = NOOP;
+
+        reader.onload = ({ target }: ProgressEvent<FileReader>): void => {
+          if (target?.result) {
+            const name = file.name;
+            const data = convertResult(target.result as ArrayBuffer);
+
+            onChange && onChange(data);
+            dropRef &&
+              setFile({
+                name,
+                size: data.length,
+              });
+          }
+        };
+
+        reader.readAsArrayBuffer(file);
+      });
+    },
+    [dropRef, onChange]
+  );
+
+  const { getInputProps, getRootProps } = useDropzone({
+    accept: accept?.reduce((all, mime) => ({ ...all, [mime]: [] }), {}),
+    disabled: isDisabled,
+    onDrop,
+  });
+
+  return (
+    <div className={styles.container}>
+      {!file ? (
+        <div className={styles.upload} {...getRootProps()}>
+          {icon}
+          {label}
+          <input {...getInputProps()} />
+        </div>
+      ) : (
+        <div className={styles.hasFile}>
+          <IconButton className={styles.closeIcon} onClick={onCancel}>
+            <CloseIcon />
+          </IconButton>
+          <div className={styles.fileName}>{file.name}</div>
+          <div
+            className={styles.fileSize}
+          >{`(${file.size.toLocaleString()} bytes)`}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default React.memo(InputFile);

src/components/Elements/ListingCard/index.tsx

@@ -16,7 +16,7 @@ import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { formatBalance, timesliceToTimestamp } from '@/utils/functions';
+import { getBalanceString, timesliceToTimestamp } from '@/utils/functions';
 
 import { useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
@@ -86,7 +86,7 @@ const ListingCardInner = ({
   const [endTimestamp, setEndTimestamp] = useState(0);
 
   const {
-    state: { api, apiState, symbol },
+    state: { api, apiState, symbol, decimals },
   } = useRelayApi();
   const { timeslicePeriod } = useCommon();
 
@@ -196,10 +196,11 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Price/timeslice:</Typography>
           <Typography variant='h2'>
-            {`${formatBalance(
+            {getBalanceString(
               listing.timeslicePrice.toString(),
-              true
-            )} ${symbol}`}
+              decimals,
+              symbol
+            )}
           </Typography>
         </Box>
         <Box
@@ -209,10 +210,11 @@ const ListingCardInner = ({
         >
           <Typography fontSize={'1rem'}>Total:</Typography>
           <Typography variant='h2'>
-            {`${formatBalance(
+            {getBalanceString(
               listing.currentPrice.toString(),
-              true
-            )} ${symbol}`}
+              decimals,
+              symbol
+            )}
           </Typography>
         </Box>
       </Box>

src/components/Elements/MarketFilters/PriceFilter.tsx

@@ -1,18 +1,21 @@
 import { Box, Slider, Typography } from '@mui/material';
 import { useState } from 'react';
 
-import { formatBalance } from '@/utils/functions';
+import { planckBnToUnit } from '@/utils/functions';
 
 import { FilterProps } from '.';
 
-const PriceFilter = ({ listings, filters, updateFilters }: FilterProps) => {
+const PriceFilter = ({
+  listings,
+  filters,
+  updateFilters,
+  decimals,
+}: FilterProps) => {
   const maxValue = (): number => {
     if (listings.length < 1) return 0;
     const sortedListings = new Array(...listings);
     sortedListings.sort((a, b) => b.currentPrice.cmp(a.currentPrice));
-    return Number(
-      formatBalance(sortedListings[0].currentPrice.toString(), true)
-    );
+    return planckBnToUnit(sortedListings[0].currentPrice.toString(), decimals);
   };
 
   const [priceLimit, setPriceLimit] = useState(maxValue());
@@ -22,7 +25,7 @@ const PriceFilter = ({ listings, filters, updateFilters }: FilterProps) => {
     updateFilters({
       ...filters,
       priceFilter: (listing) =>
-        Number(formatBalance(listing.currentPrice.toString(), true)) <=
+        planckBnToUnit(listing.currentPrice.toString(), decimals) <=
         (newValue as number),
     });
   };

src/components/Elements/MarketFilters/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material';
 import { useState } from 'react';
 
-import { Listing } from '@/models';
+import { Listing, REGIONX_DECIMALS } from '@/models';
 
 import CoreOccupancyFilter from './coreOccupancyFilter';
 import DurationFilter from './DurationFilter';
@@ -19,6 +19,7 @@ export interface FilterProps {
   filters: Filters;
   listings: Array<Listing>;
   updateFilters: (_filters: Filters) => void;
+  decimals: number;
 }
 
 type Filters = {
@@ -65,27 +66,31 @@ export const MarketFilters = ({ listings, setFilteredListings }: Props) => {
               <CoreOccupancyFilter
                 listings={listings}
                 filters={filters}
+                decimals={REGIONX_DECIMALS}
                 updateFilters={updateFilters}
               />
             </Box>
             <Box marginRight={'1em'} marginTop={'.5em'}>
               <DurationFilter
                 listings={listings}
                 filters={filters}
+                decimals={REGIONX_DECIMALS}
                 updateFilters={updateFilters}
               />
             </Box>
             <Box marginRight={'1em'} marginTop={'.5em'}>
               <RegionStartFilter
                 listings={listings}
                 filters={filters}
+                decimals={REGIONX_DECIMALS}
                 updateFilters={updateFilters}
               />
             </Box>
             <Box marginRight={'1em'} marginTop={'.5em'}>
               <RegionEndFilter
                 listings={listings}
                 filters={filters}
+                decimals={REGIONX_DECIMALS}
                 updateFilters={updateFilters}
               />
             </Box>
@@ -106,6 +111,7 @@ export const MarketFilters = ({ listings, setFilteredListings }: Props) => {
         <PriceFilter
           listings={listings}
           filters={filters}
+          decimals={REGIONX_DECIMALS}
           updateFilters={updateFilters}
         />
       </Box>