LasticXYZ · poppyseedDev · May 21, 2024 · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@poppyseed/squid-sdk": "^0.2.4",
     "@poppyseed/xcm-sdk": "^4.0.3",
     "@reduxjs/toolkit": "^2.2.5",
+    "@vercel/analytics": "^1.2.2",
     "@vercel/postgres": "^0.8.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(Website)/layout.tsx b/src/app/(Website)/layout.tsx
@@ -1,3 +1,4 @@
+import { Analytics } from '@vercel/analytics/react'
 import type { Metadata } from 'next'
 import { DM_Sans, Syne } from 'next/font/google'
 import Footer from './Footer'
@@ -33,7 +34,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={`${dm_sans.variable} ${syne.variable}`}>
         <Navbar navigation={navigation_app} />
         <div className="pt-5 font-dm_sans">
-          <main>{children}</main>
+          <main>
+            {children}
+            <Analytics />
+          </main>
         </div>
         <Footer />
       </body>

diff --git a/src/app/[network]/(App)/layout.tsx b/src/app/[network]/(App)/layout.tsx
@@ -1,9 +1,9 @@
 'use client'
 
+import { Analytics } from '@vercel/analytics/react'
 import './globals.css'
 //import type { Metadata } from 'next'
 import ThemeProvider from '@/components/themeToggle/themeProvider'
-import { BanknotesIcon } from '@heroicons/react/24/outline'
 import {
   ArrowPathIcon,
   Cog8ToothIcon,
@@ -30,12 +30,12 @@ function getNavigation(network: string) {
       href: `/${network}/bulkcore1`,
       current: false,
     },
-    {
-      name: 'Trade Cores',
-      icon: <BanknotesIcon className="h-5 w-5" aria-hidden="true" />,
-      href: `/${network}/listings`,
-      current: false,
-    },
+    // {
+    //   name: 'Trade Cores',
+    //   icon: <BanknotesIcon className="h-5 w-5" aria-hidden="true" />,
+    //   href: `/${network}/listings`,
+    //   current: false,
+    // },
     // {
     //   name: 'On-Demand Cores',
     //   icon: <BoltIcon className="h-5 w-5" aria-hidden="true" />,
@@ -106,7 +106,10 @@ export default function RootLayout({
             >
               <Navbar navigation={navigation_app}>
                 <div className="py-10 font-montserrat">
-                  <main>{children}</main>
+                  <main>
+                    {children}
+                    <Analytics />
+                  </main>
                 </div>
               </Navbar>
             </UseInkathonProvider>

diff --git a/src/app/[network]/(App)/renewal/RenewFetch.tsx b/src/app/[network]/(App)/renewal/RenewFetch.tsx
@@ -1,15 +1,26 @@
 import Border from '@/components/border/Border'
+import RenewModal from '@/components/broker/extrinsics/RenewModal'
+import SecondaryButton from '@/components/button/SecondaryButton'
 import GeneralTable from '@/components/table/GeneralTable'
 import WalletStatus from '@/components/walletStatus/WalletStatus'
+import { PossibleNetworks, network_list } from '@/config/network'
+
 import {
   AllowedRenewalAssignmentInfo,
   AllowedRenewalCoreInfoUnf,
   AllowedRenewalsType,
 } from '@/types'
 import { parseFormattedNumber, parseNativeTokenToHuman } from '@/utils'
+import { getChainFromPath } from '@/utils/common/chainPath'
 import { useBalance, useInkathon } from '@poppyseed/lastic-sdk'
+import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
+interface ModalDataType {
+  coreInfo: AllowedRenewalCoreInfoUnf
+  assignmentInfo: AllowedRenewalAssignmentInfo
+}
+
 // Custom hook for querying and transforming workplan data
 const useAllowedRenewalsQuery = () => {
   const { api } = useInkathon()
@@ -41,6 +52,11 @@ const useAllowedRenewalsQuery = () => {
 }
 
 const RenewalsData = () => {
+  const [isRenewModalOpen, setIsRenewModalOpen] = useState(false)
+  const [modalData, setModalData] = useState<ModalDataType | null>(null)
+  const pathname = usePathname()
+  const network = getChainFromPath(pathname)
+
   const { activeAccount, activeChain } = useInkathon()
   const allowedRenewals = useAllowedRenewalsQuery()
   const [task, setTask] = useState<number | null>(null)
@@ -59,8 +75,13 @@ const RenewalsData = () => {
         (!core || parseFormattedNumber(plan.coreInfo[0].core) === core) &&
         (!begin || parseFormattedNumber(plan.coreInfo[0].when) === begin) &&
         (!task ||
-          parseFormattedNumber(plan.assignmentInfo.completion?.Complete[0]?.assignment.Task) ===
-            task)
+          (plan.assignmentInfo &&
+            plan.assignmentInfo.completion &&
+            plan.assignmentInfo.completion.Complete &&
+            plan.assignmentInfo.completion.Complete[0] &&
+            plan.assignmentInfo.completion.Complete[0].assignment &&
+            parseFormattedNumber(plan.assignmentInfo.completion.Complete[0].assignment.Task) ===
+              task))
       )
     })
     .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
@@ -74,88 +95,126 @@ const RenewalsData = () => {
   }
 
   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">Cores for renewal</h1>
-        <div className="flex flex-row items-center gap-3 mb-5">
-          <label htmlFor="task">Task:</label>
-          <input
-            id="task"
-            type="number"
-            placeholder="Task Number"
-            value={task || ''}
-            onChange={(e) => setTask(parseFloat(e.target.value) || null)}
-            className="ml-2 p-2 border rounded"
-          />
-          <label htmlFor="begin">Begin:</label>
-          <input
-            id="begin"
-            type="number"
-            placeholder="Begin Number"
-            value={begin || ''}
-            onChange={(e) => setBegin(parseFloat(e.target.value) || null)}
-            className="p-2 border rounded"
-          />
-          <label htmlFor="core">Core:</label>
-          <input
-            id="core"
-            type="number"
-            placeholder="Core Number"
-            value={core || ''}
-            onChange={(e) => setCore(parseFloat(e.target.value) || null)}
-            className="p-2 border rounded"
-          />
+    <>
+      <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">Cores for renewal</h1>
+          <div className="flex flex-row items-center gap-3 mb-5">
+            <label htmlFor="task">Task:</label>
+            <input
+              id="task"
+              type="number"
+              placeholder="Task Number"
+              value={task || ''}
+              onChange={(e) => setTask(parseFloat(e.target.value) || null)}
+              className="ml-2 p-2 border rounded"
+            />
+            <label htmlFor="begin">Begin:</label>
+            <input
+              id="begin"
+              type="number"
+              placeholder="Begin Number"
+              value={begin || ''}
+              onChange={(e) => setBegin(parseFloat(e.target.value) || null)}
+              className="p-2 border rounded"
+            />
+            <label htmlFor="core">Core:</label>
+            <input
+              id="core"
+              type="number"
+              placeholder="Core Number"
+              value={core || ''}
+              onChange={(e) => setCore(parseFloat(e.target.value) || null)}
+              className="p-2 border rounded"
+            />
+          </div>
+          {filteredData && filteredData.length > 0 ? (
+            <>
+              <div className="w-full overflow-x-auto">
+                <GeneralTable
+                  tableData={filteredData.map(({ coreInfo, assignmentInfo }) => {
+                    let task: number | null = assignmentInfo.completion?.Complete[0]?.assignment
+                      .Task
+                      ? parseFormattedNumber(
+                          assignmentInfo.completion?.Complete[0]?.assignment.Task,
+                        )
+                      : null
+                    return {
+                      data: [
+                        task?.toString() || 'N/A',
+                        task &&
+                        network_list[network as PossibleNetworks].paraId.hasOwnProperty(
+                          task ? task : '',
+                        )
+                          ? network_list[network as PossibleNetworks].paraId[task]
+                          : null,
+                        coreInfo[0].when,
+                        coreInfo[0].core,
+                        `${parseNativeTokenToHuman({ paid: assignmentInfo.price?.toString(), decimals: 12, reduceDecimals: 4 })} ${tokenSymbol}`,
+                        <SecondaryButton
+                          title="Renew"
+                          onClick={() => {
+                            setModalData({ coreInfo: coreInfo[0], assignmentInfo })
+                            setIsRenewModalOpen(true)
+                          }}
+                          key="data"
+                        />,
+                      ],
+                    }
+                  })}
+                  tableHeader={[
+                    { title: 'Para ID' },
+                    { title: 'Network' },
+                    { title: 'Begin' },
+                    { title: 'Core' },
+                    { title: 'Price' },
+                    { title: 'Renew' },
+                  ]}
+                  colClass="grid-cols-6"
+                />
+              </div>
+
+              {/* Pagination buttons */}
+              <div className="flex w-full items-center justify-between space-x-2 mt-4 px-5">
+                <button
+                  onClick={handlePrevPage}
+                  disabled={currentPage === 1}
+                  className={`px-4 py-2 rounded-2xl text-black dark:text-gray-1 border border-gray-21 font-semibold ${currentPage === 1 ? 'bg-gray-2 dark:bg-gray-20 dark:text-gray-14 text-gray-14 cursor-not-allowed' : ' hover:bg-green-6'}`}
+                >
+                  Previous
+                </button>
+                <p className="text-black dark:text-gray-1 font-semibold">{currentPage}</p>
+                <button
+                  onClick={handleNextPage}
+                  disabled={filteredData.length < itemsPerPage || filteredData.length === 0}
+                  className={`px-4 py-2   border border-gray-21 text-black dark:text-gray-1 font-semibold rounded-2xl ${filteredData.length < itemsPerPage ? 'bg-gray-2 dark:bg-gray-20 dark:text-gray-14 text-gray-14 cursor-not-allowed' : ' hover:bg-green-6'}`}
+                >
+                  Next
+                </button>
+              </div>
+            </>
+          ) : (
+            <p className="p-10">No data available.</p>
+          )}
         </div>
-        {filteredData && filteredData.length > 0 ? (
-          <>
-            <div className="w-full overflow-x-auto">
-              <GeneralTable
-                tableData={filteredData.map(({ coreInfo, assignmentInfo }) => ({
-                  data: [
-                    assignmentInfo.completion?.Complete[0]?.assignment.Task || 'N/A',
-                    coreInfo[0].when,
-                    coreInfo[0].core,
-                    assignmentInfo.completion?.Complete[0]?.mask || 'N/A',
-                    `${parseNativeTokenToHuman({ paid: assignmentInfo.price?.toString(), decimals: 12, reduceDecimals: 6 })} ${tokenSymbol}`,
-                    //<PrimaryButton title='Renew' />,
-                  ],
-                }))}
-                tableHeader={[
-                  { title: 'Task' },
-                  { title: 'Begin' },
-                  { title: 'Core' },
-                  { title: 'Mask' },
-                  { title: 'Price' },
-                  //{ title: 'Click to Renew' },
-                ]}
-                colClass="grid-cols-5"
-              />
-            </div>
+      </Border>
 
-            {/* Pagination buttons */}
-            <div className="flex w-full items-center justify-between space-x-2 mt-4 px-5">
-              <button
-                onClick={handlePrevPage}
-                disabled={currentPage === 1}
-                className={`px-4 py-2 rounded-2xl text-black dark:text-gray-1 border border-gray-21 font-semibold ${currentPage === 1 ? 'bg-gray-2 dark:bg-gray-20 dark:text-gray-14 text-gray-14 cursor-not-allowed' : ' hover:bg-green-6'}`}
-              >
-                Previous
-              </button>
-              <p className="text-black dark:text-gray-1 font-semibold">{currentPage}</p>
-              <button
-                onClick={handleNextPage}
-                disabled={filteredData.length < itemsPerPage || filteredData.length === 0}
-                className={`px-4 py-2   border border-gray-21 text-black dark:text-gray-1 font-semibold rounded-2xl ${filteredData.length < itemsPerPage ? 'bg-gray-2 dark:bg-gray-20 dark:text-gray-14 text-gray-14 cursor-not-allowed' : ' hover:bg-green-6'}`}
-              >
-                Next
-              </button>
-            </div>
-          </>
-        ) : (
-          <p className="p-10">No data available.</p>
-        )}
-      </div>
-    </Border>
+      {/* Renew modal */}
+      {modalData && (
+        <RenewModal
+          isOpen={isRenewModalOpen}
+          onClose={() => setIsRenewModalOpen(false)}
+          price={modalData.assignmentInfo.price}
+          tokenSymbol={tokenSymbol}
+          task={modalData.assignmentInfo.completion?.Complete[0]?.assignment.Task}
+          regionId={{
+            begin: modalData.coreInfo.when,
+            core: modalData.coreInfo.core,
+            mask: modalData.assignmentInfo.completion?.Complete[0]?.mask,
+          }}
+        />
+      )}
+    </>
   )
 }