fixes(app): updates verifyButton Logic & drawercloseButton bg (passpo…

…rtxyz#1173) Co-authored-by: Michael Green <[email protected]>
dcictalireza · Apr 21, 2023 · 5da7b9a · 5da7b9a
1 parent 10c4489
commit 5da7b9a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/app/components/CardList.tsx b/app/components/CardList.tsx
@@ -81,7 +81,7 @@ export const CardList = ({ isLoading = false, cardClassName }: CardListProps): J
       const platformProps = allPlatforms.get(currentPlatform.platform);
       if (platformProps) {
         return (
-          <GenericPlatform platform={platformProps.platform} platFormGroupSpec={platformProps.platFormGroupSpec} />
+          <GenericPlatform platform={platformProps.platform} platFormGroupSpec={platformProps.platFormGroupSpec} onClose={onClose} />
         );
       }
     }

diff --git a/app/components/GenericPlatform.tsx b/app/components/GenericPlatform.tsx
@@ -40,6 +40,7 @@ import { NoStampModal } from "./NoStampModal";
 export type PlatformProps = {
   platFormGroupSpec: PlatformGroupSpec[];
   platform: PlatformClass;
+  onClose: ()=>void;
 };
 
 enum VerificationStatuses {
@@ -57,12 +58,13 @@ const rpcUrl = process.env.NEXT_PUBLIC_PASSPORT_MAINNET_RPC_URL;
 
 const checkIcon = "../../assets/check-icon.svg";
 
-export const GenericPlatform = ({ platFormGroupSpec, platform }: PlatformProps): JSX.Element => {
+export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: PlatformProps): JSX.Element => {
   const { address, signer } = useContext(UserContext);
   const { handleAddStamps, handleDeleteStamps, allProvidersState, userDid } = useContext(CeramicContext);
   const [isLoading, setLoading] = useState(false);
   const [canSubmit, setCanSubmit] = useState(false);
   const [showNoStampModal, setShowNoStampModal] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   // --- Chakra functions
   const toast = useToast();
@@ -88,9 +90,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform }: PlatformProps):
 
   // any time we change selection state...
   useEffect(() => {
-    if (selectedProviders.length !== verifiedProviders.length) {
-      setCanSubmit(true);
-    }
+      setCanSubmit(selectedProviders.length !== verifiedProviders.length);
   }, [selectedProviders, verifiedProviders]);
 
   const waitForRedirect = (timeout?: number): Promise<ProviderPayload> => {
@@ -281,13 +281,14 @@ export const GenericPlatform = ({ platFormGroupSpec, platform }: PlatformProps):
       );
     } finally {
       setLoading(false);
+      setSubmitted(true);
     }
   };
 
   // --- Done Toast Helper
   const doneToast = (title: string, body: string, icon: string, platformId: PLATFORM_ID) => {
     toast({
-      duration: 5000,
+      duration: 9000,
       isClosable: true,
       render: (result: any) => (
         <DoneToastContent title={title} body={body} icon={icon} platformId={platformId} result={result} />
@@ -399,12 +400,12 @@ export const GenericPlatform = ({ platFormGroupSpec, platform }: PlatformProps):
         verifyButton={
           <>
             <button
-              disabled={!canSubmit}
-              onClick={handleFetchCredential}
+              disabled={!submitted && !canSubmit}
+              onClick={canSubmit ? handleFetchCredential : onClose}
               data-testid={`button-verify-${platform.platformId}`}
               className="sidebar-verify-btn"
             >
-              {verifiedProviders.length > 0 ? "Save" : "Verify"}
+              {submitted && !canSubmit ? "Close" : (verifiedProviders.length > 0 ? "Save" : "Verify")}
             </button>
           </>
         }

diff --git a/app/components/SideBarContent.tsx b/app/components/SideBarContent.tsx
@@ -56,7 +56,7 @@ export const SideBarContent = ({
         borderRadius: "6px",
       }}
     >
-      <DrawerCloseButton disabled={isLoading} className={`z-10`} />
+      <DrawerCloseButton disabled={isLoading} className={`z-10 bg-muted`} _hover={{backgroundColor:"var(--color-accent)"}} />
       {currentPlatform && currentProviders ? (
         <div className="overflow-auto">
           <DrawerHeader style={{ fontWeight: "inherit" }}>