feat(hooks): add checkIfExtensionIsDownloaded

common/hooks.js

@@ -485,3 +485,22 @@ export const useCache = () => {
   const setCache = ({ key, value }) => (cache[key] = value);
   return [cache, setCache];
 };
+
+// NOTE(amine): Slate extension will notify the app that it is installed, by injecting isDownloaded class to the element with browser_extension as its id
+const checkIfExtensionIsDownloaded = () => {
+  const extensionElement = document.getElementById("browser_extension");
+  if (!extensionElement) return false;
+  return extensionElement.className.includes("isDownloaded");
+};
+export const useCheckIfExtensionIsInstalled = () => {
+  const [isExtensionDownloaded, setExtensionDownload] = React.useState(false);
+
+  React.useEffect(() => {
+    if (document) {
+      const isExtensionDownloaded = checkIfExtensionIsDownloaded();
+      setExtensionDownload(isExtensionDownloaded);
+    }
+  }, []);
+
+  return { isExtensionDownloaded };
+};

components/core/ApplicationUserControls.js

@@ -180,7 +180,7 @@ export class ApplicationUserControlsPopup extends React.Component {
         {
           text: (
             <div css={Styles.MOBILE_HIDDEN}>
-              <DownloadExtensionButton style={{ marginTop: "4px", marginBottom: "28px" }} />
+              <DownloadExtensionButton full style={{ marginTop: "4px", marginBottom: "28px" }} />
             </div>
           ),
         },

components/core/Extension/DownloadExtensionButton.js

@@ -3,11 +3,7 @@ import * as Environment from "~/common/environment";
 import * as System from "~/components/system";
 import * as Constants from "~/common/constants";
 
-const checkIfExtensionIsDownloaded = () => {
-  const extensionElement = document.getElementById("browser_extension");
-  if (!extensionElement) return false;
-  return extensionElement.className.includes("isDownloaded");
-};
+import { useCheckIfExtensionIsInstalled } from "~/common/hooks";
 
 const getExtensionBrowserAndLink = () => {
   const testUserAgent = (regex) => regex.test(window.navigator.userAgent);
@@ -24,21 +20,14 @@ const getExtensionBrowserAndLink = () => {
 };
 
 export default function DownloadExtensionButton({ hideIfDownloaded = true, style, ...props }) {
-  const [isExtensionDownloaded, setExtensionDownload] = React.useState(false);
+  const { isExtensionDownloaded } = useCheckIfExtensionIsInstalled();
 
-  React.useEffect(() => {
-    if (document && hideIfDownloaded) {
-      const isExtensionDownloaded = checkIfExtensionIsDownloaded();
-      setExtensionDownload(isExtensionDownloaded);
-    }
-  }, []);
-
-  if (isExtensionDownloaded) return null;
+  if (hideIfDownloaded && isExtensionDownloaded) return null;
 
   const extension = getExtensionBrowserAndLink();
 
   return (
-    <System.ButtonPrimaryFull
+    <System.ButtonPrimary
       style={{
         padding: "0px 12px",
         minHeight: "30px",
@@ -49,6 +38,6 @@ export default function DownloadExtensionButton({ hideIfDownloaded = true, style
       {...props}
     >
       Install Slate for {extension.browser}
-    </System.ButtonPrimaryFull>
+    </System.ButtonPrimary>
   );
 }

components/core/Upload/Jumper.js

@@ -14,6 +14,7 @@ import { useUploadStore } from "~/components/core/Upload/store";
 import { useUploadOnboardingContext } from "~/components/core/Onboarding/Upload";
 
 import DownloadExtensionButton from "~/components/core/Extension/DownloadExtensionButton";
+import { useCheckIfExtensionIsInstalled } from "~/common/hooks";
 
 const STYLES_EXTENSION_BAR = (theme) => css`
   ${Styles.HORIZONTAL_CONTAINER_CENTERED};
@@ -28,10 +29,12 @@ const STYLES_EXTENSION_BAR = (theme) => css`
 `;
 
 function ExtensionBar() {
+  const { isExtensionDownloaded } = useCheckIfExtensionIsInstalled();
+
   const [isVisible, setVisibility] = React.useState(true);
   const hideExtensionBar = () => setVisibility(false);
 
-  if (!isVisible) return null;
+  if (isExtensionDownloaded || !isVisible) return null;
 
   return (
     <Jumper.Item css={STYLES_EXTENSION_BAR}>
@@ -124,7 +127,7 @@ export function UploadJumper({ data }) {
     setState((prev) => ({ ...prev, [e.target.name]: e.target.value, urlError: false }));
   };
 
-  const isOnboarding = onboardingContext.currentStep === onboardingContext.steps.jumperWalkthrough;
+  const isOnboarding = onboardingContext.currentStep === onboardingContext.steps.jumper;
 
   return (
     <Jumper.AnimatePresence>
@@ -133,8 +136,8 @@ export function UploadJumper({ data }) {
           <Jumper.Header>
             <System.H5 color="textBlack">Upload</System.H5>
           </Jumper.Header>
-          {isOnboarding && <ExtensionBar />}
           <Jumper.Divider />
+          {isOnboarding && <ExtensionBar />}
           <Jumper.Item css={STYLES_LINK_UPLOAD_WRAPPER}>
             <div css={Styles.HORIZONTAL_CONTAINER}>
               <System.Input