Merge pull request #312 from Chia-Network/refactor-tokenize-modal

tokenize modal base design

src/renderer/App.css

@@ -1,8 +1,8 @@
 #root {
-  max-width: 100%;
-  margin: 0 0;
-  padding: 0;
-  text-align: center;
+    max-width: 100%;
+    margin: 0 0;
+    padding: 0;
+    text-align: center;
 }
 
 /**
@@ -11,49 +11,55 @@
  * tailwind.config.js
  */
 :root {
-  --color-leftNavBg: #F0F2F5;
-  --color-leftNavText: #ffffff;
-  --color-leftNavItemActive: #14D863;
+    --color-leftNavBg: #F0F2F5;
+    --color-leftNavText: #ffffff;
+    --color-leftNavItemActive: #14D863;
+}
+
+.sentence-case::first-letter {
+    text-transform: uppercase
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
 }
+
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+    filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+    filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
 }
 
 .card {
-  padding: 2em;
+    padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+    color: #888;
 }
 
 [data-testid="flowbite-dropdown"] {
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
 }

src/renderer/api/cadt/v1/projects.api.ts

@@ -56,6 +56,7 @@ const projectsApi = cadtApi.injectEndpoints({
         params: { warehouseProjectId },
         method: 'GET',
       }),
+      keepUnusedDataFor: 0,
     }),
 
     getProjectsByIds: builder.query<Project[], GetProjectsById>({
@@ -74,4 +75,4 @@ const projectsApi = cadtApi.injectEndpoints({
 
 export const invalidateProjectApiTag = projectsApi.util.invalidateTags;
 
-export const { useGetProjectsQuery, useLazyGetProjectsByIdsQuery } = projectsApi;
+export const { useGetProjectsQuery, useLazyGetProjectsByIdsQuery, useGetProjectQuery } = projectsApi;

src/renderer/api/cadt/v1/units.api.ts

@@ -75,14 +75,16 @@ const unitsApi = cadtApi.injectEndpoints({
 
     getUnit: builder.query<Unit, GetUnitParams>({
       query: ({ warehouseUnitId }: GetUnitParams) => ({
-        url: `/v1/units`,
+        url: `/units/untokenized`,
         params: { warehouseUnitId },
         method: 'GET',
       }),
+      keepUnusedDataFor: 0,
     }),
   }),
 });
 
 export const invalidateUnitsApiTag = unitsApi.util.invalidateTags;
 
-export const { useGetTokenizedUnitsQuery, useGetUntokenizedUnitsQuery, useGetUnitQuery } = unitsApi;
+export const { useGetTokenizedUnitsQuery, useGetUntokenizedUnitsQuery, useLazyGetUnitQuery, useGetUnitQuery } =
+  unitsApi;

src/renderer/components/blocks/forms/ConnectForm.tsx

@@ -63,7 +63,7 @@ const ConnectForm: React.FC<FormProps> = ({ onSubmit, hasServerError, onClearErr
           {hasServerError && (
             <>
               <Alert color="failure">
-                <p className="normal-case">
+                <p className="sentence-case">
                   <FormattedMessage id="server-not-found" />
                 </p>
               </Alert>

src/renderer/components/blocks/forms/index.ts

@@ -1 +1,2 @@
 export * from './ConnectForm';
+export * from './CreateTokenForm';

src/renderer/components/blocks/modals/CreateTokenModal.tsx

@@ -1,26 +1,57 @@
-import React from 'react';
-import { Button, Modal } from '@/components';
+import React, { useMemo } from 'react';
+import { Button, ComponentCenteredSpinner, Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
+import { useGetProjectQuery, useGetUnitQuery } from '@/api';
 
 interface UpsertModalProps {
-  urlFragmentDerivedData: string;
+  tokenizeUrlFragment: string;
   onClose: () => void;
 }
 
-const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, urlFragmentDerivedData }: UpsertModalProps) => {
+const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, tokenizeUrlFragment }: UpsertModalProps) => {
+  const urlHashValues: string[] = tokenizeUrlFragment?.replace('tokenize-', '')?.split('^');
+  const warehouseUnitId = urlHashValues?.length >= 1 ? urlHashValues[0] : '';
+  const warehouseProjectId = urlHashValues?.length >= 2 ? urlHashValues[1] : '';
+  console.log(warehouseProjectId, warehouseUnitId);
+  const { data: unit, isFetching: unitLoading } = useGetUnitQuery({ warehouseUnitId });
+  const { data: project, isFetching: projectLoading } = useGetProjectQuery({ warehouseProjectId });
+
+  console.log('unit', unit);
+  console.log('project', project);
+
+  const modalBody = useMemo(() => {
+    if (unitLoading || projectLoading) {
+      return (
+        <div className="h-20">
+          <ComponentCenteredSpinner label={<FormattedMessage id="loading-unit-and-associated-project" />} />
+        </div>
+      );
+    } else if (unit && project) {
+      return (
+        <div>
+          {project.projectName}
+          {unit.serialNumberBlock}
+        </div>
+      );
+    } else {
+      return (
+        <p className="sentence-case">
+          <FormattedMessage id="unable-to-load-tokenization-data" />
+        </p>
+      );
+    }
+  }, [project, projectLoading, unit, unitLoading]);
+
   return (
     <Modal onClose={onClose} show={true} size={'5xl'}>
       <Modal.Header>
         <p className="capitalize">
           <FormattedMessage id="create-token" />
         </p>
       </Modal.Header>
-      <Modal.Body>
-        <p>sample modal</p>
-        <p>{urlFragmentDerivedData}</p>
-      </Modal.Body>
+      <Modal.Body>{modalBody}</Modal.Body>
       <Modal.Footer>
-        <Button>
+        <Button disabled={!project || !unit || projectLoading || unitLoading}>
           <p className="capitalize">
             <FormattedMessage id="create-token" />
           </p>

src/renderer/components/blocks/modals/NoHomeOrgModal.tsx

@@ -1,12 +1,12 @@
-import { ComponentCenteredSpinner, Modal } from '@/components';
+import { Modal, Spinner } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useGetHealthQuery, useGetHomeOrgQuery } from '@/api';
 import { useUrlHash } from '@/hooks';
 
 const NoHomeOrgModal: React.FC = () => {
   const { data: serverHealth, isLoading: healthLoading, refetch: refetchHealth } = useGetHealthQuery({});
-  const { data: homeOrg, isLoading: homeOrgLoading, refetch: refetchHomeOrg } = useGetHomeOrgQuery();
+  const { data: homeOrg, isFetching: homeOrgLoading, refetch: refetchHomeOrg } = useGetHomeOrgQuery();
   const [connectModalActive] = useUrlHash('connect');
   const [closeClicked, setCloseClicked] = useState(false);
 
@@ -36,13 +36,12 @@ const NoHomeOrgModal: React.FC = () => {
         </p>
       </Modal.Header>
       <Modal.Body>
-        {closeClicked ? (
-          <ComponentCenteredSpinner />
-        ) : (
-          <p className="normal-case">
+        <div className="flex space-x-2.5">
+          <p className="sentence-case">
             <FormattedMessage id="please-create-an-organization-to-use-this-application" />.
           </p>
-        )}
+          {closeClicked && <Spinner />}
+        </div>
       </Modal.Body>
     </Modal>
   );

src/renderer/components/blocks/tables/UntokenizedUnitListTable.tsx

@@ -43,8 +43,9 @@ const UntokenizedUnitListTable: React.FC<TableProps> = ({
         ignoreOrderChange: true,
         render: (row: Unit & Project) => {
           if (rowActions === 'tokenize') {
+            const urlHashValue = row.warehouseUnitId + '^' + row.warehouseProjectId || undefined;
             return (
-              <Button onClick={() => setTokenizeModalActive(true, row.warehouseUnitId || undefined)}>
+              <Button onClick={() => setTokenizeModalActive(true, urlHashValue)}>
                 <p className="capitalize">
                   <FormattedMessage id="tokenize" />
                 </p>
@@ -60,8 +61,7 @@ const UntokenizedUnitListTable: React.FC<TableProps> = ({
     const staticColumns: Column[] = [
       {
         title: <FormattedMessage id="registry-project-id" />,
-        key: 'warehouseProjectId',
-        render: (row: Project) => <span className="font-bold">{row.warehouseProjectId || '-'}</span>,
+        key: 'projectId',
       },
       {
         title: <FormattedMessage id="project-name" />,
@@ -146,7 +146,7 @@ const UntokenizedUnitListTable: React.FC<TableProps> = ({
         data={data}
         primaryKey="warehouseUnitId"
         isLoading={isLoading}
-        tableHeightOffsetPx={170}
+        tableHeightOffsetPx={320}
         footer={
           <>
             <PageCounter currentPage={currentPage} totalCount={totalCount} />
@@ -161,10 +161,7 @@ const UntokenizedUnitListTable: React.FC<TableProps> = ({
         }
       />
       {tokenizeModalActive && (
-        <CreateTokenModal
-          onClose={() => setTokenizeModalActive(false)}
-          urlFragmentDerivedData={tokenizeModalFragment.replace('tokenize-', '')}
-        />
+        <CreateTokenModal onClose={() => setTokenizeModalActive(false)} tokenizeUrlFragment={tokenizeModalFragment} />
       )}
     </>
   );

src/renderer/components/blocks/tabs/UntokenizedUnitsTab.tsx

@@ -69,14 +69,7 @@ const UntokenizedUnitsTab: React.FC<PageTabProps> = ({ search, order, setOrder }
   ]);
 
   const unifiedResult = useMemo<UnitAndProjectResult | undefined>(() => {
-    if (
-      projectsResponse &&
-      untokenizedUnitsResponse &&
-      !untokenizedUnitsError &&
-      !projectsError &&
-      !untokenizedUnitsLoading &&
-      !projectsLoading
-    ) {
+    if (projectsResponse && untokenizedUnitsResponse) {
       const result: UnitAndProjectResult = { ...untokenizedUnitsResponse, data: [] };
       untokenizedUnitsResponse.data.forEach((unit: Unit) => {
         const associatedProject = projectsResponse.find(

src/renderer/components/layout/ComponentCenteredSpinner.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Spinner } from '@/components';
 
 interface ComponentCenteredSpinnerProps {
-  label?: string;
+  label?: string | ReactNode;
 }
 
 const ComponentCenteredSpinner: React.FC<ComponentCenteredSpinnerProps> = ({ label }) => {
   return (
     <div className="flex justify-center items-center w-full min-h-screen">
       <Spinner />
-      {label && <div className="ml-4">{label}</div>}
+      {label && (
+        <div className="ml-4">
+          <p className="sentence-case">{label}</p>
+        </div>
+      )}
     </div>
   );
 };

src/renderer/hooks/useWildCardUrlHash.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 // Define a TypeScript type for the setActive callback function

src/renderer/pages/ErrorBoundary.tsx

@@ -33,12 +33,12 @@ class ErrorBoundary extends React.Component {
       >
         <Modal show={true}>
           <Modal.Header>
-            <p className="normal-case">
+            <p className="sentence-case">
               <FormattedMessage id="application-error" />
             </p>
           </Modal.Header>
           <Modal.Body>
-            <p className="normal-case text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            <p className="sentence-case text-base leading-relaxed text-gray-500 dark:text-gray-400">
               <FormattedMessage id="please-reload-or-restart-the-application" />.
             </p>
           </Modal.Body>

src/renderer/pages/TokensPage.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { useQueryParamState } from '@/hooks';
 import { debounce } from 'lodash';
-import { SearchBox, Tabs, SyncIndicator, UntokenizedUnitsTab } from '@/components';
+import { SearchBox, SyncIndicator, Tabs, UntokenizedUnitsTab } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 enum TabTypes {
@@ -21,8 +21,6 @@ const TokensPage: React.FC = () => {
     [setSearch, debounce],
   );
 
-  console.log(activeTab);
-
   return (
     <>
       <div className="pt-2 pl-2 pr-2 h-full">

src/renderer/translations/tokens/en-US.json

@@ -27,7 +27,10 @@
   "synced": "synced",
   "refresh": "refresh",
   "tokenization": "tokenization",
-  "search": "search",
+  "search": "Search",
   "no-owned-organization-found": "no owned organization found",
-  "tokenize": "tokenize"
+  "tokenize": "tokenize",
+  "please-create-an-organization-to-use-this-application": "please create an organization to use this application",
+  "loading-unit-and-associated-project": "loading unit and associated project",
+  "unable-to-load-tokenization-data": "unable to load tokenization data"
 }