Init coretime business, #4832

packages/kintsugi-next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@interlay/monetary-js": "^0.5.3",
     "@next/env": "^13.3.0",
-    "@osn/icons": "^1.144.0",
+    "@osn/icons": "^1.145.0",
     "@polkadot/util-crypto": "^13.1.1",
     "@svgr/webpack": "^7.0.0",
     "bignumber.js": "^9.0.2",

packages/next-common/components/coretime/salePanel/index.jsx

@@ -0,0 +1,22 @@
+import { NeutralPanel } from "../../styled/containers/neutralPanel";
+import Divider from "../../styled/layout/divider";
+import CoretimeSaleSummary from "./summary";
+import useCoretimeSale from "next-common/context/coretime/sale/provider";
+
+export default function CoretimeSalePanel() {
+  const coretimeSale = useCoretimeSale();
+
+  return (
+    <NeutralPanel className="p-6 text-textPrimary">
+      <h3 className="text16Bold">Coretime Sale #{coretimeSale.id}</h3>
+      <Divider className="my-4" />
+      <CoretimeSaleSummary data={coretimeSale} />
+
+      <hr className="border-dashed border-neutral300 my-4" />
+
+      <div className="h-48 bg-neutral200">
+        <div className="flex justify-center items-center h-full">chart</div>
+      </div>
+    </NeutralPanel>
+  );
+}

packages/next-common/components/coretime/salePanel/summary/index.jsx

@@ -0,0 +1,111 @@
+import SummaryItem from "next-common/components/summary/layout/item";
+import SummaryLayout from "next-common/components/summary/layout/layout";
+import ValueDisplay from "next-common/components/valueDisplay";
+import { useChainSettings } from "next-common/context/chain";
+import { toPrecision } from "next-common/utils";
+import PhaseItem from "next-common/components/coretime/salePanel/summary/phase";
+
+function Item({ label = "", value }) {
+  return (
+    <div className="flex items-center gap-x-1 text12Medium text-textTertiary">
+      <div>{label}</div>
+      <div className="text-textPrimary">{value}</div>
+    </div>
+  );
+}
+
+export default function CoretimeSaleSummary({ data }) {
+  const { decimals, symbol } = useChainSettings();
+
+  return (
+    <div>
+      <SummaryLayout>
+        <SummaryItem title="Current Price">
+          {data?.info?.price ? (
+            <ValueDisplay
+              value={toPrecision(10000000000, decimals)}
+              symbol={symbol}
+            />
+          ) : (
+            <div className="text-textTertiary">-</div>
+          )}
+        </SummaryItem>
+
+        <SummaryItem title="Available Cores">
+          {data?.info ? (
+            <div>
+              {data?.info?.coresSold}
+              <span className="text-textTertiary">
+                {" "}
+                / {data?.info?.coresOffered}
+              </span>
+            </div>
+          ) : (
+            <div className="text-textTertiary">-</div>
+          )}
+        </SummaryItem>
+
+        <PhaseItem />
+
+        <SummaryItem title="Sale Period">
+          <div>[time]</div>
+        </SummaryItem>
+
+        <SummaryItem>
+          <div className="space-y-1 text12Medium text-textTertiary">
+            <Item
+              label="Total Revenue"
+              value={
+                <ValueDisplay
+                  className="text-textPrimary"
+                  value={toPrecision(data?.totalRevenue, decimals)}
+                  symbol={symbol}
+                />
+              }
+            />
+            <Item
+              label="↳ Renewal"
+              value={
+                <ValueDisplay
+                  className="text-textPrimary"
+                  value={toPrecision(data?.renewalRevenue, decimals)}
+                  symbol={symbol}
+                />
+              }
+            />
+            <Item
+              label="↳ Sale"
+              value={
+                <ValueDisplay
+                  className="text-textPrimary"
+                  value={toPrecision(data?.purchaseRevenue, decimals)}
+                  symbol={symbol}
+                />
+              }
+            />
+          </div>
+        </SummaryItem>
+
+        <SummaryItem>
+          <div className="space-y-1 text12Medium text-textTertiary">
+            <Item label="System Reserved" value="[0]" />
+            <Item label="Renewal" value={data?.renewalCount} />
+            <Item label="Sale" value={data?.purchaseCount} />
+          </div>
+        </SummaryItem>
+
+        <SummaryItem>
+          <div className="text12Medium">
+            <Item label="End in" value="[time]" />
+          </div>
+        </SummaryItem>
+
+        <SummaryItem>
+          <div className="space-y-1 text12Medium">
+            <Item label="End At" value="[time]" />
+          </div>
+        </SummaryItem>
+      </SummaryLayout>
+    </div>
+  );
+}

packages/next-common/components/coretime/salePanel/summary/phase.jsx

@@ -0,0 +1,13 @@
+import SummaryItem from "next-common/components/summary/layout/item";
+import useCoretimeSalePhase from "next-common/context/coretime/hooks/useCoretimeSalePhase";
+import FieldLoading from "next-common/components/icons/fieldLoading";
+
+export default function PhaseItem() {
+  const {phase, isLoading} = useCoretimeSalePhase();
+
+  return (
+      <SummaryItem title="Current Phase">
+        <div>{isLoading ? <FieldLoading/> : phase}</div>
+      </SummaryItem>
+    )
+}

packages/next-common/components/coretime/salesHistorySection/index.jsx

@@ -0,0 +1,38 @@
+import Tabs from "next-common/components/tabs";
+import { NeutralPanel } from "../../styled/containers/neutralPanel";
+import { TitleContainer } from "../../styled/containers/titleContainer";
+import SalesHistoryPurchases from "./purchases";
+import SalesHistoryRenewals from "./renewals";
+import { useState } from "react";
+import { usePageProps } from "next-common/context/page";
+
+export default function CoretimeSalesHistorySection() {
+  const { coretimeSale } = usePageProps();
+  const [activeTabLabel, setActiveTabLabel] = useState("Purchases");
+
+  return (
+    <div>
+      <TitleContainer className="mb-4">Sales History</TitleContainer>
+      <NeutralPanel className="p-6">
+        <Tabs
+          activeTabLabel={activeTabLabel}
+          onTabClick={(tab) => {
+            setActiveTabLabel(tab.label);
+          }}
+          tabs={[
+            {
+              label: "Renewals",
+              activeCount: coretimeSale?.renewalCount,
+              content: <SalesHistoryRenewals />,
+            },
+            {
+              label: "Purchases",
+              activeCount: coretimeSale?.purchaseCount,
+              content: <SalesHistoryPurchases />,
+            },
+          ]}
+        />
+      </NeutralPanel>
+    </div>
+  );
+}

packages/next-common/components/coretime/salesHistorySection/purchases.jsx

@@ -0,0 +1,116 @@
+import dayjs from "dayjs";
+import { MapDataList } from "next-common/components/dataList";
+import Duration from "next-common/components/duration";
+import ExplorerLink from "next-common/components/links/explorerLink";
+import Pagination from "next-common/components/pagination";
+import AddressUser from "next-common/components/user/addressUser";
+import ValueDisplay from "next-common/components/valueDisplay";
+import { useChainSettings } from "next-common/context/chain";
+import { usePageProps } from "next-common/context/page";
+import { useCoretimeQuery } from "next-common/hooks/apollo";
+import { toPrecision } from "next-common/utils";
+import { defaultPageSize } from "next-common/utils/constants";
+import { useState } from "react";
+import { GET_CORETIME_SALE_PURCHASES } from "next-common/services/gql/coretime/consts";
+
+export default function SalesHistoryPurchases() {
+  const { decimals, symbol } = useChainSettings();
+  const { coretimeSale } = usePageProps();
+  const [page, setPage] = useState(1);
+  const [isTime, setIsTime] = useState(true);
+
+  const pageSize = defaultPageSize;
+
+  const { data, loading } = useCoretimeQuery(GET_CORETIME_SALE_PURCHASES, {
+    variables: {
+      saleId: coretimeSale?.id,
+      offset: (page - 1) * pageSize,
+      limit: pageSize,
+    },
+  });
+
+  const columns = [
+    {
+      name: "Core",
+      className: "w-[120px]",
+      render(data) {
+        return <div>#{data?.regionId?.core}</div>;
+      },
+    },
+    {
+      name: "Purchased By",
+      className: "w-80",
+      render(data) {
+        return (
+          <div>
+            <AddressUser add={data?.who} />
+          </div>
+        );
+      },
+    },
+    {
+      name: (
+        <button
+          className="text-theme500"
+          onClick={() => {
+            setIsTime(!isTime);
+          }}
+        >
+          {isTime ? "Time" : "Age"}
+        </button>
+      ),
+      render(data) {
+        const time = data?.indexer?.blockTime;
+
+        return (
+          <ExplorerLink indexer={data?.indexer}>
+            <div className="text-textTertiary hover:underline">
+              {isTime ? (
+                dayjs(time).format("YYYY-MM-DD HH:mm:ss")
+              ) : (
+                <Duration time={time} />
+              )}
+            </div>
+          </ExplorerLink>
+        );
+      },
+    },
+    {
+      name: "Price",
+      className: "text-right w-40",
+      render(data) {
+        return (
+          <div>
+            <ValueDisplay
+              value={toPrecision(data?.price, decimals)}
+              symbol={symbol}
+            />
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <MapDataList
+        loading={loading}
+        noDataText="No purchases history"
+        columnsDef={columns}
+        data={data?.coretimeSalePurchases?.items}
+      />
+
+      <div className="mt-4">
+        <Pagination
+          page={page}
+          total={data?.coretimeSalePurchases?.total}
+          pageSize={pageSize}
+          onPageChange={(e, newPage) => {
+            e.preventDefault();
+            setPage(newPage);
+          }}
+        />
+      </div>
+    </div>
+  );
+}