fix: v5 UI update

src/AppContainer.tsx

@@ -31,7 +31,11 @@ const AppContainer = (): React.ReactElement => {
             <div className="col-auto flex items-center justify-between w-full">
               <p className="mb-0">Welcome to our upgraded verifier!</p>
               <a href={URLS.REF} target="_blank" rel="noopener noreferrer">
-                <Button className="bg-white text-cerulean-500 hover:bg-cloud-100 px-6" size={ButtonSize.MD}>
+                <Button
+                  className="bg-white text-cerulean-500 hover:bg-cloud-100"
+                  style={{ paddingLeft: "4rem", paddingRight: "4rem" }}
+                  size={ButtonSize.SM}
+                >
                   Use Previous Verifier
                 </Button>
               </a>

src/common/utils/getDropzoneBoxUi.ts

@@ -15,6 +15,7 @@ interface GetDropzoneBoxUi {
   isVerificationPending: boolean;
   isVerificationError: boolean | null;
   isActionError?: boolean | null;
+  isTokenRegistryV4?: boolean;
 }
 
 export const getDropzoneBoxUi = ({
@@ -24,6 +25,7 @@ export const getDropzoneBoxUi = ({
   isVerificationPending,
   isVerificationError,
   isActionError,
+  isTokenRegistryV4,
 }: GetDropzoneBoxUi): string => {
   switch (true) {
     case isDragReject:
@@ -35,6 +37,7 @@ export const getDropzoneBoxUi = ({
     case isVerificationPending:
       return DropzoneBoxUiState.VERIFICATION_PENDING;
     case isVerificationError:
+    case isTokenRegistryV4:
       return DropzoneBoxUiState.VERIFICATION_ERROR;
     case isActionError:
       return DropzoneBoxUiState.ACTION_ERROR;

src/components/AssetManagementPanel/AssetManagementApplication/index.tsx

@@ -8,6 +8,7 @@ import { AssetManagementTags } from "../AssetManagementTags";
 import { DocumentStatus } from "../../DocumentStatus";
 import { constants } from "@tradetrust-tt/token-registry";
 import { useTokenRegistryRole } from "../../../common/hooks/useTokenRegistryRole";
+import { AssetInformationPanel } from "../AssetInformationPanel";
 
 interface AssetManagementApplicationProps {
   isMagicDemo?: boolean;
@@ -91,7 +92,17 @@ export const AssetManagementApplication: FunctionComponent<AssetManagementApplic
         assetManagementAction === AssetManagementActions.RejectTransferOwner) && (
         // ui design requirement, to not show DocumentStatus & AssetManagementTags when user is on other actions
         <>
-          <DocumentStatus isMagicDemo={isMagicDemo} />
+          <div className="container flex justify-between">
+            <div className="w-2/3">
+              <DocumentStatus isMagicDemo={isMagicDemo} />
+            </div>
+            <div className="w-auto mt-8">
+              <AssetInformationPanel
+                setShowEndorsementChain={setShowEndorsementChain}
+                tokenRegistryAddress={tokenRegistryAddress}
+              />
+            </div>
+          </div>
           <AssetManagementTags />
         </>
       )}

src/components/AssetManagementPanel/AssetManagementForm/AssetManagementForm.tsx

@@ -106,8 +106,16 @@ export const AssetManagementForm: FunctionComponent<AssetManagementFormProps> =
     - documentOwner is the tokenRegistry
     - currentUser === tokenRegistryMinter
   */
-  const canHandleRestore = isTitleEscrow && isRestorer && isReturnedToIssuer && documentOwner === tokenRegistryAddress;
-  const canHandleShred = isTitleEscrow && isAcceptor && isReturnedToIssuer && documentOwner === tokenRegistryAddress;
+  const canHandleRestore =
+    isTitleEscrow &&
+    isRestorer &&
+    isReturnedToIssuer &&
+    documentOwner?.toLowerCase() === tokenRegistryAddress?.toLowerCase();
+  const canHandleShred =
+    isTitleEscrow &&
+    isAcceptor &&
+    isReturnedToIssuer &&
+    documentOwner?.toLowerCase() === tokenRegistryAddress?.toLowerCase();
 
   // canEndorseBeneficiary
   // function transferBeneficiary(address beneficiaryNominee) external;

src/components/AssetManagementPanel/AssetManagementForm/FormVariants/AcceptSurrenderedForm/AcceptSurrenderedForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { FunctionComponent, useContext, useEffect, useState } from "react";
 import { FormState } from "../../../../../constants/FormState";
-import { TagBorderedLg } from "../../../../UI/Tag";
+import { TagBorderedSm } from "../../../../UI/Tag";
 import { AssetInformationPanel } from "../../../AssetInformationPanel";
 import { AssetManagementActions } from "../../../AssetManagementActions";
 import { AssetManagementTitle } from "../../AssetManagementTitle";
@@ -62,9 +62,9 @@ export const AcceptSurrenderedForm: FunctionComponent<AcceptSurrenderedFormProps
           </div>
           <div className="w-full lg:w-auto self-end">
             <div className="py-4">
-              <TagBorderedLg id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
-                <h3 className="text-xl">ETR returned to issuer</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">ETR returned to Issuer</h5>
+              </TagBorderedSm>
             </div>
           </div>
         </div>

src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.test.tsx

@@ -136,7 +136,7 @@ describe("ActionSelectionForm", () => {
     await act(async () => {
       const container = render(<ActionSelectionForm {...defaultProps} isReturnedToIssuer={true} />);
 
-      expect(container.queryByText("ETR returned to issuer")).not.toBeNull();
+      expect(container.queryByText("ETR returned to Issuer")).not.toBeNull();
     });
   });
 

src/components/AssetManagementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx

@@ -5,8 +5,7 @@ import {
   showDocumentTransferMessage,
 } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { FunctionComponent, useContext, useRef, useState } from "react";
-import { TagBorderedLg } from "../../../../UI/Tag";
-import { AssetInformationPanel } from "../../../AssetInformationPanel";
+import { TagBorderedSm } from "../../../../UI/Tag";
 import { AssetManagementActions } from "../../../AssetManagementActions";
 import { AssetManagementDropdown } from "../../AssetManagementDropdown";
 import { EditableAssetTitle } from "./../EditableAssetTitle";
@@ -20,7 +19,6 @@ interface ActionSelectionFormProps {
   account?: string;
   canReturnToIssuer: boolean;
   canHandleShred?: boolean;
-
   canHandleRestore?: boolean;
   onConnectToWallet: () => void;
   canChangeHolder: boolean;
@@ -39,7 +37,6 @@ interface ActionSelectionFormProps {
 
 export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> = ({
   onSetFormAction,
-  tokenRegistryAddress,
   beneficiary,
   holder,
   account,
@@ -56,7 +53,6 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
   isTokenBurnt,
   canNominateBeneficiary,
   canEndorseTransfer,
-  setShowEndorsementChain,
   isTitleEscrow,
   isRejectPendingConfirmation,
 }) => {
@@ -117,29 +113,28 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
   return (
     <>
       <div className="flex flex-wrap justify-between pb-4 -mx-4">
-        <div className="w-full px-4 lg:w-1/3">
-          <AssetInformationPanel
-            tokenRegistryAddress={tokenRegistryAddress}
-            setShowEndorsementChain={setShowEndorsementChain}
-          />
-        </div>
+        {(isReturnedToIssuer || isTokenBurnt) && (
+          <div className="w-full px-4 lg:w-1/3">
+            <div className="py-4" />
+          </div>
+        )}
         {isReturnedToIssuer && (
           <div className="w-full px-4 lg:w-auto self-end">
             <div className="py-4">
-              <TagBorderedLg id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
-                <h3 className="text-xl" data-testid="surrenderToIssuer">
-                  ETR returned to issuer
-                </h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold" data-testid="surrenderToIssuer">
+                  ETR returned to Issuer
+                </h5>
+              </TagBorderedSm>
             </div>
           </div>
         )}
         {isTokenBurnt && (
           <div className="w-full px-4 lg:w-auto self-end">
             <div className="py-4">
-              <TagBorderedLg id="surrendered-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
-                <h3 className="text-xl">Taken out of circulation</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrendered-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">Taken out of circulation</h5>
+              </TagBorderedSm>
             </div>
           </div>
         )}
@@ -151,6 +146,7 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
             <div className="w-full px-4 lg:w-1/3">
               <EditableAssetTitle role="Holder" value={holder} isEditable={false} />
             </div>
+            <div className="w-full px-4 lg:w-1/3" />
           </>
         )}
       </div>

src/components/AssetManagementPanel/AssetManagementForm/FormVariants/EditableAssetTitle/EditableAssetTitle.tsx

@@ -84,7 +84,7 @@ export const EditableAssetTitle: FunctionComponent<EditableAssetTitleProps> = ({
   return (
     <AssetTitle role={role} address={newValue || ""}>
       <div className="flex items-start">
-        <div className="w-72 mr-2">
+        <div className="w-full mr-2">
           <Input
             className="w-full rounded-xl font-normal py-2.5 border-cloud-100"
             data-testid={`editable-input-${role.toLowerCase()}`}

src/components/AssetManagementPanel/AssetManagementForm/FormVariants/RejectSurrenderedForm/RejectSurrenderedForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { FunctionComponent, useContext, useEffect, useState } from "react";
 import { FormState } from "../../../../../constants/FormState";
-import { TagBorderedLg } from "../../../../UI/Tag";
+import { TagBorderedSm } from "../../../../UI/Tag";
 import { AssetInformationPanel } from "../../../AssetInformationPanel";
 import { AssetManagementActions } from "../../../AssetManagementActions";
 import { AssetManagementTitle } from "../../AssetManagementTitle";
@@ -78,9 +78,9 @@ export const RejectSurrenderedForm: FunctionComponent<RejectSurrenderedFormProps
           </div>
           <div className="w-full lg:w-auto self-end">
             <div className="py-4">
-              <TagBorderedLg id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
-                <h3 className="text-xl">ETR returned to issuer</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">ETR returned to Issuer</h5>
+              </TagBorderedSm>
             </div>
           </div>
         </div>

src/components/CertificateDropZone/CertificateDropZone.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useMemo } from "react";
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../reducers";
@@ -16,6 +16,7 @@ import { useProviderContext } from "../../common/contexts/provider";
 import { getChainId } from "../../utils/shared";
 import { CONSTANTS } from "@tradetrust-tt/tradetrust-utils";
 import { useNetworkSelect } from "./../../common/hooks/useNetworkSelect";
+import { ViewTokenRegistryMismatch } from "../DocumentDropzone/Views/ViewTokenRegistryMismatch";
 
 const { TYPES } = CONSTANTS;
 
@@ -26,11 +27,16 @@ interface CertificateDropzoneProps {
 export const CertificateDropZone: FunctionComponent<CertificateDropzoneProps> = (props) => {
   const { toggleQrReaderVisible } = props;
   const dispatch = useDispatch();
-  const { verificationPending, retrieveCertificateByActionState, verificationStatus, verificationError } = useSelector(
-    (state: RootState) => state.certificate
-  );
+  const {
+    verificationPending,
+    retrieveCertificateByActionState,
+    verificationStatus,
+    verificationError,
+    tokenRegistryV4,
+  } = useSelector((state: RootState) => state.certificate);
 
   const isVerificationPending = verificationPending;
+  const isTokenRegistryV4 = tokenRegistryV4;
   const isVerificationError = useMemo(() => {
     if (verificationError) return true;
     if (verificationStatus && !isValid(verificationStatus)) return true;
@@ -56,10 +62,19 @@ export const CertificateDropZone: FunctionComponent<CertificateDropzoneProps> =
           try {
             const json = JSON.parse(reader.result as string);
             const chainId = getChainId(json);
-            if (chainId && currentChainId !== chainId) {
+
+            if (!chainId) {
+              dispatch(updateCertificate(json));
+              return;
+            }
+
+            if (currentChainId === chainId) {
+              dispatch(updateCertificate(json));
+            } else {
               await switchNetwork(chainId);
+              setTargetChainId(chainId);
+              setPendingCertificateData(json);
             }
-            dispatch(updateCertificate(json));
           } catch (e) {
             if (e instanceof Error) {
               dispatch(verifyingCertificateCompleted([e.message]));
@@ -74,6 +89,18 @@ export const CertificateDropZone: FunctionComponent<CertificateDropzoneProps> =
     [currentChainId, dispatch, switchNetwork]
   );
 
+  const [targetChainId, setTargetChainId] = useState<number | null>(null);
+  const [pendingCertificateData, setPendingCertificateData] = useState<any | null>(null);
+
+  // Effect to dispatch once currentChainId matches targetChainId
+  useEffect(() => {
+    if (targetChainId && currentChainId === targetChainId && pendingCertificateData) {
+      dispatch(updateCertificate(pendingCertificateData));
+      setTargetChainId(null);
+      setPendingCertificateData(null);
+    }
+  }, [currentChainId, targetChainId, pendingCertificateData, dispatch]);
+
   const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
     onDrop,
     multiple: false,
@@ -88,8 +115,17 @@ export const CertificateDropZone: FunctionComponent<CertificateDropzoneProps> =
       isVerificationPending,
       isVerificationError,
       isActionError,
+      isTokenRegistryV4,
     });
-  }, [isDragReject, isDragActive, isDragAccept, isVerificationPending, isVerificationError, isActionError]);
+  }, [
+    isDragReject,
+    isDragActive,
+    isDragAccept,
+    isVerificationPending,
+    isVerificationError,
+    isActionError,
+    isTokenRegistryV4,
+  ]);
 
   return (
     <div data-testid="certificate-dropzone" {...getRootProps()}>
@@ -101,6 +137,8 @@ export const CertificateDropZone: FunctionComponent<CertificateDropzoneProps> =
           switch (true) {
             case isVerificationPending:
               return <ViewVerificationPending />;
+            case isTokenRegistryV4:
+              return <ViewTokenRegistryMismatch />;
             case isVerificationError:
               return <ViewVerificationError resetData={resetData} />;
             case isActionError:

src/components/CertificateViewer.tsx

@@ -157,7 +157,13 @@ export const CertificateViewer: FunctionComponent<CertificateViewerProps> = ({ i
   const renderedCertificateViewer = (
     <>
       <div className="no-print">
-        {!isTransferableDocument && <DocumentStatus isMagicDemo={isMagicDemo} />}
+        {!isTransferableDocument && (
+          <div className="container flex justify-between">
+            <div className="w-2/3">
+              <DocumentStatus isMagicDemo={isMagicDemo} />
+            </div>
+          </div>
+        )}
         {renderBanner(isSampleDocument, isMagicDemo)}
         <ObfuscatedMessage document={document} />
         {isTransferableDocument && (

src/components/DocumentDropzone/Views/View.test.tsx

@@ -42,6 +42,6 @@ describe("View", () => {
       </RenderWithStore>
     );
 
-    expect(screen.getByText("Drop your TradeTrust file to view its contents")).toBeInTheDocument();
+    expect(screen.getByText("Drop your TradeTrust Document to view its contents")).toBeInTheDocument();
   });
 });

src/components/DocumentDropzone/Views/View.tsx

@@ -17,7 +17,7 @@ export const View: FunctionComponent<ViewProps> = ({ toggleQrReaderVisible }) =>
         alt="Document Dropzone TradeTrust"
         src="/static/images/dropzone/dropzone_illustration.svg"
       />
-      <h4>Drop your TradeTrust file to view its contents</h4>
+      <h4>Drop your TradeTrust Document to view its contents</h4>
       <p className="my-6">Or</p>
       <Button className="bg-cerulean-500 text-white hover:bg-cerulean-800 mr-2 md:mr-0" size={ButtonSize.SM}>
         Select Document