feat: update website to show case v5 token registry (#959)

* feat: ui update (#954) * feat: ui update * fix: align text * fix: v5 contract get escrow address (#957) * fix: resolve v5 renamed function error * chore: update comment * chore: resolve package-lock * fix: update v5 url (#958) --------- Co-authored-by: rongquan1 <[email protected]>
TradeTrust · Dec 3, 2024 · 5bee4bc · 5bee4bc
1 parent 220e4d1
commit 5bee4bc
Show file tree

Hide file tree

Showing 31 changed files with 353 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@reduxjs/toolkit": "^1.6.1",
     "@tradetrust-tt/decentralized-renderer-react-components": "^3.14.1",
     "@tradetrust-tt/document-store": "^3.2.0",
-    "@tradetrust-tt/token-registry": "^4.12.1",
+    "@tradetrust-tt/token-registry": "^4.14.0",
     "@tradetrust-tt/tradetrust": "^6.9.4",
     "@tradetrust-tt/tradetrust-ui-components": "^2.22.2",
     "@tradetrust-tt/tradetrust-utils": "^1.14.1",

diff --git a/src/AppContainer.tsx b/src/AppContainer.tsx
@@ -1,9 +1,11 @@
-import { Overlay } from "@tradetrust-tt/tradetrust-ui-components";
+import { Button, ButtonSize, Overlay } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Footer } from "./components/Layout/Footer";
 import { NavigationBar, rightNavItems } from "./components/Layout/NavigationBar";
 import { Routes, routes } from "./routes";
+import PopupMessage from "./components/PopupMessage";
+import { URLS } from "./constants";
 
 const AppContainer = (): React.ReactElement => {
   const location = useLocation();
@@ -22,6 +24,31 @@ const AppContainer = (): React.ReactElement => {
         leftItems={[]}
         rightItems={rightNavItems}
       />
+      <PopupMessage />
+      <div className="bg-cerulean-800 text-white py-2 px-0" data-testid="new-verifier-banner">
+        <div className="container">
+          <div className="flex flex-wrap">
+            <div className="col-auto flex items-center justify-between w-full">
+              <p className="mb-0 w-full sm:w-2/3">
+                To serve our community better, we are upgrading to a newer version that has new capabilities to your
+                transferable documents.
+              </p>
+              <div className="w-full sm:w-1/3 flex gap-2">
+                <a href={URLS.DOCS} target="_blank" rel="noopener noreferrer" className="flex-1 flex">
+                  <Button className="bg-cerulean-500 text-white hover:bg-cerulean-800 w-full" size={ButtonSize.SM}>
+                    Learn More
+                  </Button>
+                </a>
+                <a href={URLS.REF_V5TR} target="_blank" rel="noopener noreferrer" className="flex-1 flexß">
+                  <Button className="bg-white text-cerulean-500 hover:bg-cloud-100 w-full" size={ButtonSize.SM}>
+                    Try New Verifier
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <main
         className="bg-cerulean-50 bg-cover"
         style={{ backgroundImage: "url('/static/images/common/wave-lines.png')" }}

diff --git a/src/common/contexts/TokenInformationContext/TokenInformationContext.tsx b/src/common/contexts/TokenInformationContext/TokenInformationContext.tsx
@@ -69,6 +69,11 @@ interface TokenInformationContextProviderProps {
   children: React.ReactNode;
 }
 
+export const TitleEscrowInterface = {
+  V4: "0x079dff60",
+  V5: "0x3e143f7b",
+};
+
 export const TokenInformationContextProvider: FunctionComponent<TokenInformationContextProviderProps> = ({
   children,
 }) => {

diff --git a/src/common/utils/getDropzoneBoxUi.ts b/src/common/utils/getDropzoneBoxUi.ts
@@ -15,6 +15,7 @@ interface GetDropzoneBoxUi {
   isVerificationPending: boolean;
   isVerificationError: boolean | null;
   isActionError?: boolean | null;
+  isTokenRegistryV5?: boolean;
 }
 
 export const getDropzoneBoxUi = ({
@@ -24,6 +25,7 @@ export const getDropzoneBoxUi = ({
   isVerificationPending,
   isVerificationError,
   isActionError,
+  isTokenRegistryV5,
 }: GetDropzoneBoxUi): string => {
   switch (true) {
     case isDragReject:
@@ -35,6 +37,7 @@ export const getDropzoneBoxUi = ({
     case isVerificationPending:
       return DropzoneBoxUiState.VERIFICATION_PENDING;
     case isVerificationError:
+    case isTokenRegistryV5:
       return DropzoneBoxUiState.VERIFICATION_ERROR;
     case isActionError:
       return DropzoneBoxUiState.ACTION_ERROR;

diff --git a/src/components/AssetManagementPanel/AssetManagementApplication/index.tsx b/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;
@@ -79,7 +80,17 @@ export const AssetManagementApplication: FunctionComponent<AssetManagementApplic
       {assetManagementAction === AssetManagementActions.None && (
         // 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 />
         </>
       )}

diff --git a/...entPanel/AssetManagementForm/FormVariants/AcceptSurrenderedForm/AcceptSurrenderedForm.tsx b/...entPanel/AssetManagementForm/FormVariants/AcceptSurrenderedForm/AcceptSurrenderedForm.tsx
@@ -7,7 +7,7 @@ import {
 } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { FunctionComponent, useContext, useEffect } 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";
@@ -58,9 +58,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-4xl">Surrendered To Issuer</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">Surrendered To Issuer</h5>
+              </TagBorderedSm>
             </div>
           </div>
         </div>

diff --git a/...agementPanel/AssetManagementForm/FormVariants/ActionSelectionForm/ActionSelectionForm.tsx b/...agementPanel/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";
@@ -34,7 +33,6 @@ interface ActionSelectionFormProps {
 
 export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> = ({
   onSetFormAction,
-  tokenRegistryAddress,
   beneficiary,
   holder,
   account,
@@ -48,7 +46,6 @@ export const ActionSelectionForm: FunctionComponent<ActionSelectionFormProps> =
   isTokenBurnt,
   canNominateBeneficiary,
   canEndorseTransfer,
-  setShowEndorsementChain,
   isTitleEscrow,
 }) => {
   const [tooltipMessage, setTooltipMessage] = useState("Copy");
@@ -105,29 +102,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>
+        {(isSurrendered || isTokenBurnt) && (
+          <div className="w-full px-4 lg:w-1/3">
+            <div className="py-4" />
+          </div>
+        )}
         {isSurrendered && (
           <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-4xl" data-testid="surrenderToIssuer">
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold" data-testid="surrenderToIssuer">
                   Surrendered To Issuer
-                </h3>
-              </TagBorderedLg>
+                </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-4xl">Surrendered</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrendered-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">Surrendered</h5>
+              </TagBorderedSm>
             </div>
           </div>
         )}
@@ -139,6 +135,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>

diff --git a/...anagementPanel/AssetManagementForm/FormVariants/EditableAssetTitle/EditableAssetTitle.tsx b/...anagementPanel/AssetManagementForm/FormVariants/EditableAssetTitle/EditableAssetTitle.tsx
@@ -43,7 +43,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()}`}

diff --git a/...anagementPanel/AssetManagementForm/FormVariants/EndorseBeneficiary/EndorseBeneficiary.tsx b/...anagementPanel/AssetManagementForm/FormVariants/EndorseBeneficiary/EndorseBeneficiary.tsx
@@ -74,12 +74,15 @@ export const EndorseBeneficiaryForm: FunctionComponent<EndorseBeneficiaryProps>
             tokenRegistryAddress={tokenRegistryAddress}
           />
         </div>
+      </div>
+      <div className="flex flex-wrap justify-between mb-4 -mx-4">
         <div className="w-full px-4 lg:w-1/3">
           <EditableAssetTitle role="Nominee" value={nominee} isEditable={false} />
         </div>
         <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>
       {beneficiaryEndorseState === FormState.ERROR && (
         <div className="text-scarlet-500 my-2" data-testid="error-msg">

diff --git a/...agementPanel/AssetManagementForm/FormVariants/EndorseTransferForm/EndorseTransferForm.tsx b/...agementPanel/AssetManagementForm/FormVariants/EndorseTransferForm/EndorseTransferForm.tsx
@@ -68,6 +68,8 @@ export const EndorseTransferForm: FunctionComponent<EndorseTransferFormProps> =
             tokenRegistryAddress={tokenRegistryAddress}
           />
         </div>
+      </div>
+      <div className="flex flex-wrap justify-between mb-4 -mx-4">
         <div className="w-full px-4 lg:w-1/3">
           <EditableAssetTitle
             role="Owner"
@@ -88,6 +90,7 @@ export const EndorseTransferForm: FunctionComponent<EndorseTransferFormProps> =
             isError={transferOwnersState === FormState.ERROR}
           />
         </div>
+        <div className="w-full px-4 lg:w-1/3" />
       </div>
       <div className="flex flex-wrap pb-4">
         <div className="w-auto lg:ml-auto">

diff --git a/...agementPanel/AssetManagementForm/FormVariants/NominateBeneficiary/NominateBeneficiary.tsx b/...agementPanel/AssetManagementForm/FormVariants/NominateBeneficiary/NominateBeneficiary.tsx
@@ -68,6 +68,8 @@ export const NominateBeneficiaryForm: FunctionComponent<NominateBeneficiaryFormP
             tokenRegistryAddress={tokenRegistryAddress}
           />
         </div>
+      </div>
+      <div className="flex flex-wrap justify-between mb-4 -mx-4">
         <div className="w-full px-4 lg:w-1/3">
           <EditableAssetTitle
             role="Owner"
@@ -81,6 +83,7 @@ export const NominateBeneficiaryForm: FunctionComponent<NominateBeneficiaryFormP
         <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>
       <div className="flex flex-wrap pb-4">
         <div className="w-auto lg:ml-auto">

diff --git a/...entPanel/AssetManagementForm/FormVariants/RejectSurrenderedForm/RejectSurrenderedForm.tsx b/...entPanel/AssetManagementForm/FormVariants/RejectSurrenderedForm/RejectSurrenderedForm.tsx
@@ -7,7 +7,7 @@ import {
 } from "@tradetrust-tt/tradetrust-ui-components";
 import React, { FunctionComponent, useContext, useEffect } 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";
@@ -73,9 +73,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-4xl">Surrendered To Issuer</h3>
-              </TagBorderedLg>
+              <TagBorderedSm id="surrender-sign" className="bg-white rounded-xl text-scarlet-500 border-scarlet-500">
+                <h5 className="font-bold">Surrendered To Issuer</h5>
+              </TagBorderedSm>
             </div>
           </div>
         </div>

diff --git a/...nts/AssetManagementPanel/AssetManagementForm/FormVariants/SurrenderForm/SurrenderForm.tsx b/...nts/AssetManagementPanel/AssetManagementForm/FormVariants/SurrenderForm/SurrenderForm.tsx
@@ -59,12 +59,15 @@ export const SurrenderForm: FunctionComponent<SurrenderFormProps> = ({
             tokenRegistryAddress={tokenRegistryAddress}
           />
         </div>
+      </div>
+      <div className="flex flex-wrap justify-between mb-4 -mx-4">
         <div className="w-full px-4 lg:w-1/3">
           <EditableAssetTitle role="Owner" value={beneficiary} isEditable={false} />
         </div>
         <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>
       <div className="flex flex-wrap pb-4">
         <div className="w-auto lg:ml-auto">

diff --git a/...anagementPanel/AssetManagementForm/FormVariants/TransferHolderForm/TransferHolderForm.tsx b/...anagementPanel/AssetManagementForm/FormVariants/TransferHolderForm/TransferHolderForm.tsx
@@ -72,6 +72,8 @@ export const TransferHolderForm: FunctionComponent<TransferHolderProps> = ({
             tokenRegistryAddress={tokenRegistryAddress}
           />
         </div>
+      </div>
+      <div className="flex flex-wrap justify-between mb-4 -mx-4">
         <div className="w-full px-4 lg:w-1/3">
           <EditableAssetTitle role="Owner" value={beneficiary} isEditable={false} />
         </div>
@@ -85,6 +87,7 @@ export const TransferHolderForm: FunctionComponent<TransferHolderProps> = ({
             isError={holderTransferringState === FormState.ERROR}
           />
         </div>
+        <div className="w-full px-4 lg:w-1/3" />
       </div>
       <div className="flex flex-wrap pb-4">
         <div className="w-auto lg:ml-auto">