Merge pull request #316 from Chia-Network/tokenization-modal-fix

Tokenization modal fix and workflow

.github/workflows/build-installers.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: Upload Mac Installer
         uses: actions/upload-artifact@v3
         with:
-          name: cadt-ui-mac-installer
+          name: tokenization-engine-ui-mac-installer
           path: ${{ github.workspace }}/dist/*.dmg
 
   build_windows:
@@ -117,7 +117,7 @@ jobs:
       - name: Upload Windows Installer
         uses: actions/upload-artifact@v3
         with:
-          name: cadt-ui-windows-installer
+          name: tokenization-engine-ui-windows-installer
           path: "${{ github.workspace }}/${{ env.INSTALLER_FILE }}"
 
   build_linux:
@@ -152,7 +152,7 @@ jobs:
       - name: Upload Linux Installer
         uses: actions/upload-artifact@v3
         with:
-          name: cadt-ui-linux-installer
+          name: tokenization-engine-ui-linux-installer
           path: ${{ github.workspace }}/dist/*.deb
 
   build_web:
@@ -177,13 +177,13 @@ jobs:
           npm run build
 
       - name: Create .tar.gz of the web build
-        run: tar -cvzf cadt-ui-web-build.tar.gz build
+        run: tar -cvzf tokenization-engine-ui-web-build.tar.gz build
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v3
         with:
-          name: cadt-ui-web-build
-          path: cadt-ui-web-build.tar.gz
+          name: tokenization-engine-ui-web-build
+          path: tokenization-engine-ui-web-build.tar.gz
 
   release:
     runs-on: ubuntu-latest
@@ -197,26 +197,26 @@ jobs:
       - name: Download Windows artifacts
         uses: actions/download-artifact@v3
         with:
-          name: cadt-ui-windows-installer
-          path: cadt-ui-windows-installer
+          name: tokenization-engine-ui-windows-installer
+          path: tokenization-engine-ui-windows-installer
 
       - name: Download MacOS artifacts
         uses: actions/download-artifact@v3
         with:
-          name: cadt-ui-mac-installer
-          path: cadt-ui-mac-installer
+          name: tokenization-engine-ui-mac-installer
+          path: tokenization-engine-ui-mac-installer
 
       - name: Download Linux artifacts
         uses: actions/download-artifact@v3
         with:
-          name: cadt-ui-linux-installer
-          path: cadt-ui-linux-installer
+          name: tokenization-engine-ui-linux-installer
+          path: tokenization-engine-ui-linux-installer
 
       - name: Download Web artifact
         uses: actions/download-artifact@v3
         with:
-          name: cadt-ui-web-build
-          path: cadt-ui-web-build
+          name: tokenization-engine-ui-web-build
+          path: tokenization-engine-ui-web-build
 
       - name: Get Filenames
         run: |

src/renderer/App.tsx

@@ -22,7 +22,8 @@ function App() {
   useEffect(() => {
     if (appStore.locale) {
       const processTranslationTokens = async () => {
-        setTranslationTokens(await loadLocaleData(appStore.locale));
+        const tokens = loadLocaleData(appStore.locale);
+        setTranslationTokens(tokens);
       };
 
       processTranslationTokens();

src/renderer/api/index.ts

@@ -1,4 +1,4 @@
-export * from './cadt/v1/projects.api';
-export * from './cadt/v1/system.api';
-export * from './cadt/v1/units.api';
-export * from './cadt/v1/organizations.api';
+export * from './tokenization-engine/projects.api';
+export * from './tokenization-engine/system.api';
+export * from './tokenization-engine/units.api';
+export * from './tokenization-engine/organizations.api';

src/renderer/api/cadt/v1/index.ts → src/renderer/api/tokenization-engine/index.ts

@@ -42,9 +42,9 @@ const baseQueryWithDynamicHost = async (args, api, extraOptions) => {
   return await baseQuery(modifiedArgs, api, extraOptions);
 };
 
-export const cadtApi = createApi({
+export const tokenizationEngineApi = createApi({
   baseQuery: baseQueryWithDynamicHost,
-  reducerPath: 'cadtApi',
+  reducerPath: 'tokenizationEngineApi',
   endpoints: () => ({}),
   tagTypes: [projectsTag, untokenizedUnitsTag, tokenizedUnitsTag, projectsByIdsTag],
 });

src/renderer/api/cadt/v1/organizations.api.ts → src/renderer/api/tokenization-engine/organizations.api.ts

@@ -1,9 +1,9 @@
-import { cadtApi } from './';
+import { tokenizationEngineApi } from './index';
 import { Organization } from '@/schemas/Organization.schema';
 // @ts-ignore
 import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
 
-const organizationsApi = cadtApi.injectEndpoints({
+const organizationsApi = tokenizationEngineApi.injectEndpoints({
   endpoints: (builder) => ({
     getHomeOrg: builder.query<Organization | undefined, void | null>({
       query: () => ({

src/renderer/api/cadt/v1/projects.api.ts → src/renderer/api/tokenization-engine/projects.api.ts

@@ -1,4 +1,4 @@
-import { cadtApi, projectsByIdsTag, projectsTag, RECORDS_PER_PAGE } from './index';
+import { projectsByIdsTag, projectsTag, RECORDS_PER_PAGE, tokenizationEngineApi } from './index';
 import { Project } from '@/schemas/Project.schema';
 
 interface GetProjectsParams {
@@ -22,7 +22,7 @@ interface GetProjectsResponse {
   data: Project[];
 }
 
-const projectsApi = cadtApi.injectEndpoints({
+const projectsApi = tokenizationEngineApi.injectEndpoints({
   endpoints: (builder) => ({
     getProjects: builder.query<GetProjectsResponse, GetProjectsParams>({
       query: ({ page, orgUid, search, order }: GetProjectsParams) => {

src/renderer/api/cadt/v1/system.api.ts → src/renderer/api/tokenization-engine/system.api.ts

@@ -1,4 +1,4 @@
-import { cadtApi } from './index';
+import { tokenizationEngineApi } from './index';
 // @ts-ignore
 import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
 import _ from 'lodash';
@@ -22,7 +22,7 @@ export interface Config {
   apiHost?: string;
 }
 
-const systemApi = cadtApi.injectEndpoints({
+const systemApi = tokenizationEngineApi.injectEndpoints({
   endpoints: (builder) => ({
     getHealth: builder.query<ServerHealth, GetHealthParams>({
       query: ({ apiHost = '', apiKey }) => ({
@@ -35,6 +35,7 @@ const systemApi = cadtApi.injectEndpoints({
         const readOnly = meta?.response?.headers.get('cw-readonly') === 'true';
         return { isHealthy, readOnly };
       },
+      keepUnusedDataFor: 0,
     }),
     getHealthImmediate: builder.mutation<boolean, GetHealthParams>({
       query: ({ apiHost = '', apiKey }) => ({

src/renderer/api/cadt/v1/units.api.ts → src/renderer/api/tokenization-engine/units.api.ts

@@ -1,8 +1,8 @@
 import {
-  cadtApi,
   projectsByIdsTag,
   projectsTag,
   RECORDS_PER_PAGE,
+  tokenizationEngineApi,
   tokenizedUnitsTag,
   untokenizedUnitsTag,
 } from './index';
@@ -28,7 +28,7 @@ export interface GetUnitsResponse {
   data: Unit[];
 }
 
-const unitsApi = cadtApi.injectEndpoints({
+const unitsApi = tokenizationEngineApi.injectEndpoints({
   endpoints: (builder) => ({
     getUntokenizedUnits: builder.query<GetUnitsResponse, GetUnitsParams>({
       query: ({ page, search, order, filter }: GetUnitsParams) => {

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

@@ -5,6 +5,15 @@ import * as yup from 'yup';
 import { FloatingLabel, FormButton, HelperText, Spacer } from '@/components';
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 
+export interface TokenData {
+  org_uid: string;
+  warehouse_project_id: string;
+  vintage_year: number;
+  sequence_num: number;
+  warehouseUnitId: string;
+  amount: number;
+}
+
 interface FormProps {
   onSubmit: (walletAddress: string) => Promise<void>;
   onClearError?: () => void;

src/renderer/components/blocks/layout/LeftNav.tsx

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import { Card, Sidebar } from '@/components';
+import { Card, NoHomeOrgModal, Sidebar } from '@/components';
 import ROUTES from '@/routes/route-constants';
 import { RiTokenSwapLine } from 'react-icons/ri';
-import { NoHomeOrgModal } from '@/components/blocks/modals/NoHomeOrgModal';
 
 const LeftNav = () => {
   const navigate = useNavigate();

src/renderer/components/blocks/layout/PageCounter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RECORDS_PER_PAGE } from '@/api/cadt/v1';
+import { RECORDS_PER_PAGE } from '@/api/tokenization-engine';
 
 // Define an interface for the component's props
 interface PageCounterProps {

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

@@ -1,31 +1,32 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ComponentCenteredSpinner, CreateTokenForm, Modal, Table } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useGetProjectQuery, useGetUnitQuery, useTokenizeUnitMutation } from '@/api';
 import { Alert } from 'flowbite-react';
 import { HiInformationCircle } from 'react-icons/hi';
+import { useWildCardUrlHash } from '@/hooks';
 
 interface UpsertModalProps {
-  tokenizeUrlFragment: string;
+  onTokenizationSuccess: () => void;
   onClose: () => void;
 }
 
-const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, tokenizeUrlFragment }: UpsertModalProps) => {
+const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, onTokenizationSuccess }: UpsertModalProps) => {
+  const [tokenizeUrlFragment] = useWildCardUrlHash('tokenize');
   const urlHashValues: string[] = tokenizeUrlFragment?.replace('tokenize-', '')?.split('^');
   const warehouseUnitId = urlHashValues?.length >= 1 ? urlHashValues[0] : '';
   const warehouseProjectId = urlHashValues?.length >= 2 ? urlHashValues[1] : '';
-  const { data: unit, isFetching: unitLoading } = useGetUnitQuery({ warehouseUnitId });
-  const { data: project, isFetching: projectLoading } = useGetProjectQuery({ warehouseProjectId });
-  const [triggerTokenizeUnit, { isLoading: tokenizationLoading, error: tokenizationError }] = useTokenizeUnitMutation();
-  const [showTokenizationFailure, setShowTokenizationFailure] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (tokenizationError) {
-      setShowTokenizationFailure(true);
-    } else if (tokenizationLoading) {
-      setShowTokenizationFailure(false);
-    }
-  }, [tokenizationError, tokenizationLoading]);
+  const [showTokenizationFailure, setShowTokenizationFailure] = useState<boolean>(false);
+  const { data: unit, isLoading: unitLoading } = useGetUnitQuery(
+    { warehouseUnitId },
+    { skip: showTokenizationFailure },
+  );
+  const { data: project, isLoading: projectLoading } = useGetProjectQuery(
+    { warehouseProjectId },
+    { skip: showTokenizationFailure },
+  );
+  const [triggerTokenizeUnit, { error: tokenizationError }] = useTokenizeUnitMutation();
 
   const requiredFieldsPresent =
     unit &&
@@ -38,7 +39,9 @@ const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, tokenizeUrlFrag
     unit?.unitBlockEnd &&
     unit?.unitCount;
 
-  const onSumbitTokenization = async (walletAddress: string) => {
+  const onSubmitTokenization = async (walletAddress: string) => {
+    setShowTokenizationFailure(false);
+
     if (unit && project) {
       const submitData = {
         org_uid: unit?.orgUid,
@@ -51,8 +54,11 @@ const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, tokenizeUrlFrag
       };
 
       const result = await triggerTokenizeUnit(submitData);
-      if (result?.error) {
+      if (result?.error || tokenizationError) {
         setShowTokenizationFailure(true);
+      } else {
+        onClose();
+        onTokenizationSuccess();
       }
     }
   };
@@ -162,7 +168,7 @@ const CreateTokenModal: React.FC<UpsertModalProps> = ({ onClose, tokenizeUrlFrag
             </Table>
           </div>
           <div>
-            <CreateTokenForm onSubmit={onSumbitTokenization} />
+            <CreateTokenForm onSubmit={onSubmitTokenization} />
           </div>
         </div>
       );

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

@@ -0,0 +1,32 @@
+import { Modal } from '@/components';
+import { FormattedMessage } from 'react-intl';
+import React from 'react';
+
+const TokenizationSuccessModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  return (
+    <Modal show={true} onClose={onClose}>
+      <Modal.Header>
+        <p className="capitalize">
+          <FormattedMessage id="unit-tokenization-success" />
+        </p>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="space-y-2.5">
+          <p className="sentence-case">
+            <FormattedMessage id="the-unit-has-been-successfully-submitted-for-tokenization-and-is-pending-confirmation-on-the-blockchain" />
+            .
+          </p>
+          <p className="sentence-case">
+            <FormattedMessage id="this-process-will-take-a-few-minutes" />.
+          </p>
+          <p className="sentence-case">
+            <FormattedMessage id="please-check-your-wallet-for-transactions-and-refresh-this-page-when-a-new-transaction-is-confirmed" />
+            .
+          </p>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export { TokenizationSuccessModal };

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

@@ -1,2 +1,4 @@
 export * from './ConnectModal';
 export * from './CreateTokenModal';
+export * from './TokenizationSuccessModal';
+export * from './NoHomeOrgModal';