Paraid -M9

src/app/[network]/(App)/bulkcore1/CoreUtilisation.tsx

@@ -17,7 +17,7 @@ type DataSetKey = 'priceOnePeriod' | 'price' | 'cores' | 'pastAuctions' // Add m
 const CoreUtilisation: React.FC = () => {
   const pathname = usePathname()
   const network = getChainFromPath(pathname)
-  const decimalPoints = network_list[network].decimalPoints
+  const decimalPoints = network_list[network].tokenDecimals
 
   const [activeDataSet, setActiveDataSet] = useState<DataSetKey>('priceOnePeriod') // Change to string to accommodate multiple datasets
   const client = useMemo(() => getClient(), [])

src/app/[network]/(App)/bulkcore1/TimeSection.tsx

@@ -32,7 +32,7 @@ export default function BrokerSaleInfo() {
   const configuration = network_list[network].configuration
   const brokerConstants = network_list[network].constants
   const tokenSymbol = network_list[network].tokenSymbol
-  const decimalPoints = network_list[network].decimalPoints
+  const decimalPoints = network_list[network].tokenDecimals
 
   const currentSaleRegion = useSaleRegion(network, client)
 

src/app/[network]/(App)/core/[number]/[regionId]/[mask]/Core.tsx

@@ -1,11 +1,11 @@
 import Border from '@/components/border/Border'
-import AssignModal from '@/components/broker/extrinsics/AssignModal'
-import InterlaceCoreModal from '@/components/broker/extrinsics/InterlaceCoreModal'
-import PartitionCoreModal from '@/components/broker/extrinsics/PartitionCoreModal'
-import TransferModal from '@/components/broker/extrinsics/TransferModal'
 import SecondaryButton from '@/components/button/SecondaryButton'
 import CoreItemExtensive from '@/components/cores/CoreItemExtensive'
 import CountDown from '@/components/countDown/CountDown'
+import AssignModal from '@/components/extrinsics/broker/AssignModal'
+import InterlaceCoreModal from '@/components/extrinsics/broker/InterlaceCoreModal'
+import PartitionCoreModal from '@/components/extrinsics/broker/PartitionCoreModal'
+import TransferModal from '@/components/extrinsics/broker/TransferModal'
 import ListingsModal from '@/components/listings/AddListingsModal'
 import TimelineComponent from '@/components/timelineComp/TimelineComp'
 import TimelineUtilizeCore from '@/components/timelineComp/TimelineUtilizeCore'

src/app/[network]/(App)/instacore/BuyCores.tsx

@@ -1,7 +1,7 @@
 'use client'
 import Border from '@/components/border/Border'
-import PurchaseCreditsModal from '@/components/broker/extrinsics/PurchaseCreditsModal'
 import SecondaryButton from '@/components/button/SecondaryButton'
+import PurchaseCreditsModal from '@/components/extrinsics/broker/PurchaseCreditsModal'
 import WalletStatus from '@/components/walletStatus/WalletStatus'
 import { useInkathon } from '@poppyseed/lastic-sdk'
 

src/app/[network]/(App)/paraId/ParaIdFetch2.tsx

@@ -0,0 +1,133 @@
+import Border from '@/components/border/Border'
+import NumberField from '@/components/inputField/NumberField'
+import GeneralTableWithButtons from '@/components/table/GeneralTableWithButtons'
+import WalletStatus from '@/components/walletStatus/WalletStatus'
+import { network_list } from '@/config/network'
+import { ParachainInfo, ParachainState } from '@/hooks/useParachainInfo'
+import { useCurrentRelayBlockNumber } from '@/hooks/useSubstrateQuery'
+import { blocksToTimeFormat } from '@/utils/broker/blockTime'
+import { useInkathon } from '@poppyseed/lastic-sdk'
+import { ChangeEvent, useState } from 'react'
+
+const statusColors = {
+  'System Chain': 'bg-blue-200',
+  'Currently Active': 'bg-green-200',
+  'Idle Chain': 'bg-yellow-200',
+  Reserved: 'bg-red-200',
+  Onboarding: 'bg-purple-200',
+  Parathread: 'bg-indigo-200',
+  'Idle - In workplan': 'bg-pink-200',
+  'Holding Slot': 'bg-orange-200',
+}
+
+const statusDescriptions = {
+  'System Chain':
+    'A system chain is the main chain of a blockchain network, responsible for its core functionality.',
+  'Currently Active':
+    'An active parachain is currently producing blocks and participating in the relay chain.',
+  'Idle Chain': 'An idle chain is not currently active or producing blocks.',
+  Reserved: 'Reserved parachains have slots that are reserved but not yet active.',
+  Onboarding: 'Parachains that are currently in the process of onboarding to the network.',
+  Parathread:
+    'Parathreads are parachains that are not continuously active but can participate in the network on demand.',
+  'Idle - In workplan':
+    'Idle parachains that are included in a work plan but are not currently active.',
+  'Holding Slot': 'Parachains that hold a slot but are not actively producing blocks.',
+}
+
+const ParaIdFetch = ({ parachains }: { parachains: ParachainInfo[] }) => {
+  const { activeChain, relayApi } = useInkathon()
+  const [filter, setFilter] = useState<string>('all')
+  const [paraIdSET, setParaId] = useState<number | null>(null)
+  const currentBlockNumber = useCurrentRelayBlockNumber(relayApi)
+
+  if (!activeChain) {
+    return (
+      <Border className="h-full flex flex-row justify-center items-center">
+        <WalletStatus />
+      </Border>
+    )
+  }
+
+  const handleParaIdChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setParaId(value ? parseFloat(value) : null)
+  }
+
+  const filteredParachains = parachains.filter((parachain) => {
+    const matchesFilter = filter === 'all' || parachain.state === filter
+    const matchesParaId = paraIdSET === null || parachain.paraId === paraIdSET
+    return matchesFilter && matchesParaId
+  })
+
+  return (
+    <Border className="h-full flex flex-row justify-center items-center">
+      <div className="h-full w-full flex flex-col justify-start items-start p-10">
+        <h1 className="text-xl font-bold uppercase mb-5">Status of {filter} cores</h1>
+        <div className="grid grid-cols-3 gap-10 items-start">
+          <NumberField
+            label="ParaId"
+            value={paraIdSET !== null ? paraIdSET.toString() : ''}
+            onChange={handleParaIdChange}
+            className="mb-5"
+          />
+          <div className="flex flex-wrap col-span-2 gap-3 mb-5">
+            <button
+              onClick={() => setFilter('all')}
+              className={`px-4 py-2 rounded-full text-black dark:text-white ${filter === 'all' ? 'font-bold' : ''}`}
+              title="Show all parachains"
+            >
+              All
+            </button>
+            {Object.entries(ParachainState).map(([stateKey, stateValue]) => (
+              <button
+                key={stateKey}
+                onClick={() => setFilter(stateValue)}
+                className={`px-4 py-2 rounded-full text-black ${statusColors[stateValue]} ${filter === stateValue ? 'font-bold' : ''}`}
+                title={statusDescriptions[stateValue]}
+              >
+                {stateValue}
+              </button>
+            ))}
+          </div>
+        </div>
+        {filteredParachains.length > 0 ? (
+          <div className="w-full overflow-x-auto">
+            <GeneralTableWithButtons
+              tableData={filteredParachains.map(({ paraId, state, network }, idx) => {
+                const leaseEndBlock = network_list[network]?.paraId[paraId.toString()]?.lease
+                const remainingBlocks =
+                  leaseEndBlock !== null && currentBlockNumber !== null
+                    ? leaseEndBlock - currentBlockNumber
+                    : null
+                return {
+                  data: [
+                    paraId.toString(),
+                    network_list[network]?.paraId[paraId.toString()]?.name,
+                    network_list[network]?.paraId[paraId.toString()]?.description,
+                    <span key={idx} className={`${statusColors[state]} px-4 py-1 rounded-full`}>
+                      {state}
+                    </span>,
+                    blocksToTimeFormat(remainingBlocks, 'RELAY'),
+                  ],
+                }
+              })}
+              tableHeader={[
+                { title: 'ParaId' },
+                { title: 'Name' },
+                { title: 'Description' },
+                { title: 'Status' },
+                { title: 'Lease Period' },
+              ]}
+              colClass="grid-cols-5"
+            />
+          </div>
+        ) : (
+          <p>No data available.</p>
+        )}
+      </div>
+    </Border>
+  )
+}
+
+export default ParaIdFetch

src/app/[network]/(App)/paraId/ParaIdRelay.tsx

@@ -146,6 +146,7 @@ const ParaIdRelay = () => {
                       data.parachain.toString(),
                     )
                       ? network_list[network as PossibleNetworks].paraId[data.parachain.toString()]
+                          .name
                       : null,
                     data.head.toString(),
                     data.para.toString(),

src/app/[network]/(App)/paraId/ParachainsSubscanInfo.tsx

@@ -70,7 +70,7 @@ const ParachainInfo: React.FC = () => {
           network_list[network as PossibleNetworks].paraId.hasOwnProperty(
             paraInfo.para_id.toString(),
           )
-            ? network_list[network as PossibleNetworks].paraId[paraInfo.para_id.toString()]
+            ? network_list[network as PossibleNetworks].paraId[paraInfo.para_id.toString()]?.name
             : null,
           paraInfo.status,
           toShortAddress(paraInfo.manager_display?.address),

src/app/[network]/(App)/paraId/page.tsx

@@ -1,24 +1,58 @@
 'use client'
 
-import { useInkathon } from '@poppyseed/lastic-sdk'
-import SubTitle from '../samesections/SubTitle'
-import ParaIdFetch from './ParaIdFetch'
-import ParaIdRelay from './ParaIdRelay'
-import ParachainsSubscanInfo from './ParachainsSubscanInfo'
+import PrimaryButton from '@/components/button/PrimaryButton'
+import SecondaryButton from '@/components/button/SecondaryButton'
+import RegisterParaIDModal from '@/components/extrinsics/registrar/RegisterParaIDModal'
+import ReserveParaIDModal from '@/components/extrinsics/registrar/ReserveParaIDModal'
+import { useParachainInfo } from '@/hooks/useParachainInfo'
+import { getChainFromPath } from '@/utils/common/chainPath'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import ParaIdFetch2 from './ParaIdFetch2'
 
 const InstaCore = () => {
-  const { activeRelayChain } = useInkathon()
+  const pathname = usePathname()
+  const network = getChainFromPath(pathname)
+  const [isParaReserveOpen, setIsParaReserveOpen] = useState(false)
+  const [isParaRegisterOpen, setIsParaRegisterOpen] = useState(false)
+
+  const { parachains, nextParaId, reservationCost, dataDepositPerByte, maxCodeSize } =
+    useParachainInfo()
 
   return (
     <>
-      <SubTitle subtitle={`Para Id Execution on ${activeRelayChain?.name}`} />{' '}
       <section className="mx-auto max-w-9xl px-4 sm:px-6 lg:px-8 flex flex-col items-stretch mt-5">
+        <div className="flex flex-row items-start justify-between m">
+          <h2 className="font-unbounded uppercase font-bold py-2 px-5 text-xl md:text-1xl xl:text-2xl">
+            Execution on {network}
+          </h2>
+          <div className="flex flex-row justify-center items-center">
+            <PrimaryButton title="Create New ParaId" onClick={() => setIsParaReserveOpen(true)} />
+            <SecondaryButton title="Register ParaId" onClick={() => setIsParaRegisterOpen(true)} />
+          </div>
+        </div>
+      </section>
+      <section className="mx-auto max-w-9xl px-4 sm:px-6 lg:px-8 flex flex-col items-stretch mt-5">
+        <ParaIdFetch2 parachains={parachains} />
+      </section>
+      {/* <section className="mx-auto max-w-9xl px-4 sm:px-6 lg:px-8 flex flex-col items-stretch mt-5">
         <ParaIdFetch />
       </section>
-      <ParachainsSubscanInfo />
       <section className="mx-auto max-w-9xl px-4 sm:px-6 lg:px-8 flex flex-col items-stretch mt-5">
         <ParaIdRelay />
-      </section>
+      </section> */}
+      <ReserveParaIDModal
+        isOpen={isParaReserveOpen}
+        nextParaId={nextParaId}
+        reservationCost={reservationCost}
+        onClose={() => setIsParaReserveOpen(false)}
+      />
+      <RegisterParaIDModal
+        isOpen={isParaRegisterOpen}
+        dataDepositPerByte={dataDepositPerByte}
+        maxCodeSize={maxCodeSize}
+        onClose={() => setIsParaRegisterOpen(false)}
+      />
     </>
   )
 }

src/app/[network]/(App)/renewal/RenewFetch.tsx

@@ -1,6 +1,6 @@
 import Border from '@/components/border/Border'
-import RenewModal from '@/components/broker/extrinsics/RenewModal'
 import SecondaryButton from '@/components/button/SecondaryButton'
+import RenewModal from '@/components/extrinsics/broker/RenewModal'
 import GeneralTable from '@/components/table/GeneralTable'
 import WalletStatus from '@/components/walletStatus/WalletStatus'
 import { PossibleNetworks, network_list } from '@/config/network'
@@ -146,7 +146,7 @@ const RenewalsData = () => {
                         network_list[network as PossibleNetworks].paraId.hasOwnProperty(
                           task ? task : '',
                         )
-                          ? network_list[network as PossibleNetworks].paraId[task]
+                          ? network_list[network as PossibleNetworks].paraId[task].name
                           : null,
                         coreInfo[0].when,
                         coreInfo[0].core,

src/components/extrinsics/registrar/RegisterParaIDModal.tsx

@@ -0,0 +1,115 @@
+import PrimaryButton from '@/components/button/PrimaryButton'
+import NumberField from '@/components/inputField/NumberField'
+import InputFile from '@/components/inputFile/InputFile'
+import Modal from '@/components/modal/Modal'
+import { formatPrice } from '@/utils'
+import { getChainFromPath } from '@/utils/common/chainPath'
+import { truncateHash } from '@/utils/truncateHash'
+import { ArrowUpOnSquareIcon, CodeBracketIcon } from '@heroicons/react/24/solid'
+import { compactAddLength } from '@polkadot/util'
+import { encodeAddress } from '@polkadot/util-crypto'
+import { TxButtonProps, useInkathon, useTxButton } from '@poppyseed/lastic-sdk'
+import { usePathname } from 'next/navigation'
+import { FC, useState } from 'react'
+
+interface TransferModalProps {
+  isOpen: boolean
+  dataDepositPerByte: bigint
+  maxCodeSize: bigint
+  onClose: () => void
+}
+
+const ReserveParaIDModal: FC<TransferModalProps> = ({
+  isOpen,
+  dataDepositPerByte,
+  maxCodeSize,
+  onClose,
+}) => {
+  const { relayApi, activeSigner, activeAccount, activeChain } = useInkathon()
+  const pathname = usePathname()
+  const network = getChainFromPath(pathname)
+  const [genesisHead, setGenesisHead] = useState<Uint8Array>()
+  const [wasmCode, setWasmCode] = useState<Uint8Array>()
+  const [paraId, setParaId] = useState<number | null>(null)
+
+  const registrationCost = dataDepositPerByte * (BigInt(genesisHead?.length ?? 0) + maxCodeSize)
+
+  const txButtonProps: TxButtonProps = {
+    api: relayApi,
+    setStatus: (status: string | null) => console.log('tx status:', status),
+    attrs: {
+      palletRpc: 'registrar',
+      callable: 'register',
+      inputParams: [
+        paraId ? paraId : undefined,
+        genesisHead ? compactAddLength(genesisHead) : undefined,
+        wasmCode ? compactAddLength(wasmCode) : undefined,
+      ],
+      paramFields: [
+        { name: 'id', type: 'u32', optional: false },
+        { name: 'genesisHead', type: 'Bytes', optional: false },
+        { name: 'validationCode', type: 'Bytes', optional: false },
+      ],
+    },
+    type: 'SIGNED-TX',
+    activeAccount,
+    activeSigner,
+  }
+
+  const { transaction, status, allParamsFilled } = useTxButton(txButtonProps)
+
+  // Check if genesisHead and wasmCode are defined and non-empty
+  const canSubmitTransaction = () => {
+    return genesisHead && genesisHead.length > 0 && wasmCode && wasmCode.length > 0
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Register your Parachain">
+      <div className="flex flex-col p-4 space-y-4 text-blackdark:text-white rounded-lg">
+        <div className="flex flex-col">
+          <p className="text-lg mb-2">
+            Reserve with account:{' '}
+            {activeAccount
+              ? truncateHash(
+                  encodeAddress(activeAccount.address, activeChain?.ss58Prefix || 42),
+                  10,
+                )
+              : 'error'}
+          </p>
+        </div>
+        <div className="mb-4">
+          Registration Cost: {formatPrice(registrationCost.toString(), network)}
+        </div>
+        <NumberField
+          label="Parachain Id:"
+          value={paraId || ''}
+          onChange={(e) => setParaId(parseFloat(e.target.value) || null)}
+        />
+        <InputFile
+          label="Upload WASM validation function for this parachain."
+          icon={<CodeBracketIcon className="h-5 w-5 text-gray-500" />}
+          onChange={(data) => setWasmCode(data)}
+          onCancel={() => setWasmCode(new Uint8Array())}
+        />
+        <InputFile
+          label="Genesis Head - Upload the state for this parachain."
+          icon={<ArrowUpOnSquareIcon className="h-5 w-5 text-gray-500" />}
+          onChange={(data) => setGenesisHead(data)}
+          onCancel={() => setGenesisHead(new Uint8Array())}
+        />
+        <div className="flex justify-center pt-5">
+          <PrimaryButton
+            title="Register Your Parachain"
+            onClick={transaction}
+            disabled={!canSubmitTransaction()}
+          />
+        </div>
+        <div className="mt-5 text-sm text-gray-400">{status}</div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ReserveParaIDModal