fix: demo config file flow with automatic login

TradeTrust · Jun 6, 2024 · f7c99c0 · f7c99c0
1 parent 5001534
commit f7c99c0
Show file tree

Hide file tree

Showing 9 changed files with 939 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -144,7 +144,7 @@
     "shelljs": "^0.8.5",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.4.3",
     "testcafe": "^2.3.0",
     "tmp": "^0.2.1",
     "ts-node": "^10.4.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,13 +11,17 @@ import { history } from "./history";
 
 export const App: React.FunctionComponent = () => {
   const { configFile } = usePersistedConfigFile();
-  const { setConfig, config } = useConfigContext();
+  const { setConfig, config, setIsDemo, isDemo } = useConfigContext();
   const { setForms, setActiveFormIndex } = useFormsContext();
-
+  const { setConfigFile } = usePersistedConfigFile();
   const logout = (): void => {
     setForms([]);
     setActiveFormIndex(undefined);
     setConfig(undefined);
+    if (isDemo) {
+      setIsDemo(false);
+      setConfigFile(undefined);
+    }
   };
 
   return (

diff --git a/src/common/context/config/index.tsx b/src/common/context/config/index.tsx
@@ -4,23 +4,29 @@ import { Config } from "../../../types";
 interface ConfigContext {
   config?: Config;
   setConfig: (config?: Config) => void;
+  isDemo: boolean;
+  setIsDemo: (isDemo: boolean) => void;
 }
 
 export const ConfigContext = createContext<ConfigContext>({
   config: undefined,
   setConfig: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  isDemo: false,
+  setIsDemo: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
 });
 
 export const useConfigContext = (): ConfigContext => useContext<ConfigContext>(ConfigContext);
 
 export const ConfigContextProvider: FunctionComponent = ({ children }) => {
   const [config, setConfig] = useState<Config>();
-
+  const [isDemo, setIsDemo] = useState<boolean>(false);
   return (
     <ConfigContext.Provider
       value={{
         config,
         setConfig,
+        isDemo,
+        setIsDemo,
       }}
     >
       {children}

diff --git a/src/components/Home/ConfigFileDropZone/ConfigFileDropZone.tsx b/src/components/Home/ConfigFileDropZone/ConfigFileDropZone.tsx
@@ -5,7 +5,8 @@ import { ConfigFile } from "../../../types";
 import { getLogger } from "../../../utils/logger";
 import { ContentFrame } from "../../UI/ContentFrame";
 import { StyledDropZone } from "../../UI/StyledDropZone";
-
+import { DEMO_CONFIG } from "../../../constants/demo-config";
+import { useConfigContext } from "../../../common/context/config";
 const { stack } = getLogger("ConfigFileDropZone");
 interface ConfigFileDropZone {
   errorMessage?: string;
@@ -14,7 +15,7 @@ interface ConfigFileDropZone {
 
 export const ConfigFileDropZone: FunctionComponent<ConfigFileDropZone> = ({ onConfigFile, errorMessage }) => {
   const [fileErrors, setFileErrors] = useState<Error[]>([]);
-
+  const { setIsDemo } = useConfigContext();
   useEffect(() => {
     if (errorMessage) {
       const malformedError = new Error(errorMessage);
@@ -62,21 +63,40 @@ export const ConfigFileDropZone: FunctionComponent<ConfigFileDropZone> = ({ onCo
           dropzoneIcon={"/dropzone-graphic.png"}
           dataTestId="config-file-dropzone"
         >
-          <h4 data-testid="home-description">Drag and drop your configuration file here</h4>
-          <p className="my-4">or</p>
-          <Button className="bg-cerulean-500 text-white hover:bg-cerulean-800 border-cloud-800 block mx-auto mb-5">
-            Select Document
-          </Button>
-          <a
-            onClick={(e) => e.stopPropagation()}
-            className="text-cerulean-300 mt-8 hover:text-cerulean-500"
-            href="https://docs.tradetrust.io/docs/reference/document-creator/config-file"
-            target="_blank"
-            rel="noopener noreferrer"
-            data-testid="no-config-file-button"
-          >
-            <h5>Don’t have a config file? Learn how to create one</h5>
-          </a>
+          <>
+            <h4 data-testid="home-description">Drag and drop your configuration file here</h4>
+            <p className="my-4">or</p>
+            <Button className="bg-cerulean-500 text-white hover:bg-cerulean-800 border-cloud-800 block mx-auto mb-12">
+              Select Document
+            </Button>
+            <h5>{`Don't have config file?`}</h5>
+            <div className="inline-flex sm:flex justify-between flex-col sm:flex-row mt-8">
+              <div className="flex items-center flex-col sm:flex-row">
+                <a
+                  onClick={(e) => e.stopPropagation()}
+                  className="text-cerulean-300 hover:text-cerulean-500"
+                  href="https://docs.tradetrust.io/docs/reference/document-creator/config-file"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  data-testid="no-config-file-button"
+                >
+                  <h5>Learn how to create one</h5>
+                </a>
+              </div>
+              <div className="border-2 border-gray-200 border-dashed h-10 hidden sm:block" />
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setFileErrors([]);
+                  onConfigFile(DEMO_CONFIG as ConfigFile);
+                  setIsDemo(true);
+                }}
+                className="bg-tangerine-500 text-white hover:bg-tangerine-800 rounded-xl sm:mt-0 mt-4"
+              >
+                Load Demo Config
+              </Button>
+            </div>
+          </>
         </StyledDropZone>
       </ContentFrame>
     </>

diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
@@ -6,9 +6,9 @@ import { ConfigFileDropZoneContainer } from "./ConfigFileDropZone";
 import { WalletDecryptionContainer } from "./WalletDecryption/WalletDecryptionContainer";
 
 export const HomeContainer: FunctionComponent = () => {
-  const { config } = useConfigContext();
+  const { config, isDemo } = useConfigContext();
   const { configFile } = usePersistedConfigFile();
-
+  console.log(`Isdemo from Home Container: ${isDemo}`);
   // If wallet has been decrypted, redirect to forms
   if (config) return <Redirect to="/forms-selection" />;
 

diff --git a/src/components/Home/WalletDecryption/WalletDecryptionContainer.tsx b/src/components/Home/WalletDecryption/WalletDecryptionContainer.tsx
@@ -1,14 +1,15 @@
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useCallback, useEffect, useState } from "react";
 import { decryptWalletOrSigner } from "../../../common/config/decrypt";
 import { useConfigContext } from "../../../common/context/config";
 import { usePersistedConfigFile } from "../../../common/hook/usePersistedConfigFile";
 import { WalletDecryption } from "./WalletDecryption";
 import { getLogger } from "../../../utils/logger";
+import { DEMO_PASSWD } from "../../../constants/demo-config";
 
 const { stack } = getLogger("Wallet Decryption Container");
 
 export const WalletDecryptionContainer: FunctionComponent = () => {
-  const { setConfig } = useConfigContext();
+  const { setConfig, isDemo } = useConfigContext();
   const [isIncorrectPassword, setIsIncorrectPassword] = useState(false);
   const { configFile, setConfigFile } = usePersistedConfigFile();
   const [decryptProgress, setDecryptProgress] = useState<number>(0);
@@ -17,27 +18,34 @@ export const WalletDecryptionContainer: FunctionComponent = () => {
     setConfigFile();
   };
 
-  const onDecryptConfigFile = async (password: string): Promise<void> => {
-    if (!configFile) return;
-    try {
-      setIsIncorrectPassword(false);
-      const walletOrSigner = await decryptWalletOrSigner(configFile, password, (progress) => {
-        setDecryptProgress(progress);
-      });
-      setConfig({
-        network: configFile.network,
-        wallet: walletOrSigner,
-        forms: configFile.forms,
-        documentStorage: configFile.documentStorage,
-      });
-    } catch (e) {
-      if (e instanceof Error) {
-        setIsIncorrectPassword(true);
-        stack(e);
+  const onDecryptConfigFile = useCallback(
+    async (password: string): Promise<void> => {
+      if (!configFile) return;
+      try {
+        setIsIncorrectPassword(false);
+        const walletOrSigner = await decryptWalletOrSigner(configFile, password, (progress) => {
+          setDecryptProgress(progress);
+        });
+        setConfig({
+          network: configFile.network,
+          wallet: walletOrSigner,
+          forms: configFile.forms,
+          documentStorage: configFile.documentStorage,
+        });
+      } catch (e) {
+        if (e instanceof Error) {
+          setIsIncorrectPassword(true);
+          stack(e);
+        }
       }
+    },
+    [configFile, setConfig, setDecryptProgress, setIsIncorrectPassword]
+  );
+  useEffect(() => {
+    if (isDemo && configFile) {
+      onDecryptConfigFile(DEMO_PASSWD);
     }
-  };
-
+  }, [isDemo, configFile, onDecryptConfigFile]);
   return (
     <WalletDecryption
       decryptProgress={decryptProgress}

diff --git a/src/components/UI/StyledDropZone/StyledDropZone.tsx b/src/components/UI/StyledDropZone/StyledDropZone.tsx
@@ -74,7 +74,7 @@ export const StyledDropZone: FunctionComponent<DropZoneProps> = ({
   }, [isDragActive, activeStyle, isDragAccept, acceptStyle, isDragReject, rejectStyle]);
 
   return (
-    <div className={`${baseStyle} ${dragStyle || currentStyle} `} data-testid={dataTestId} {...getRootProps()}>
+    <div className={` ${baseStyle} ${dragStyle || currentStyle} `} data-testid={dataTestId} {...getRootProps()}>
       <input {...getInputProps()} />
       {dropzoneIcon && <img className="mx-auto mb-8" src={dropzoneIcon} />}
       {error && <p className="max-w-lg text-scarlet-500 text-lg leading-none font-gilroy-bold mb-2">Error</p>}
@@ -102,7 +102,6 @@ export const StyledDropZone: FunctionComponent<DropZoneProps> = ({
         fileErrors.map((fileError, index: number) => {
           return <ErrorMessage key={`file-errors-${index}`} id="file-error" message={fileError.message} />;
         })}
-
       <div className={error ? "mt-10" : ""}>{children}</div>
     </div>
   );