Merge pull request #2737 from getAlby/feat/onboarding-prompt

feat: move onboarding prompt to enable screen
getAlby · Sep 18, 2023 · c9e165d · c9e165d
2 parents 8da1278 + 8aa5748
commit c9e165d
Show file tree

Hide file tree

Showing 30 changed files with 942 additions and 110 deletions.
diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
@@ -0,0 +1,99 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function AlbyEnableComponent(props: Props) {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "alby_enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = () => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{tCommon("enable.allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default AlbyEnableComponent;
diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
@@ -0,0 +1,99 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function LiquidEnableComponent(props: Props) {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "liquid_enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = () => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{tCommon("enable.allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default LiquidEnableComponent;
diff --git a/src/app/screens/Enable/index.tsx → src/app/components/Enable/NostrEnable.tsx b/src/app/screens/Enable/index.tsx → src/app/components/Enable/NostrEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -13,16 +13,14 @@ import type { OriginData } from "~/types";
 type Props = {
   origin: OriginData;
 };
-
-function Enable(props: Props) {
-  const hasFetchedData = useRef(false);
+function NostrEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "nostr_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -35,7 +33,7 @@ function Enable(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -48,32 +46,10 @@ function Enable(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -87,7 +63,7 @@ function Enable(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -112,12 +88,12 @@ function Enable(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
     </div>
   );
 }
 
-export default Enable;
+export default NostrEnableComponent;
diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
@@ -0,0 +1,99 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function WebbtcEnableComponent(props: Props) {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "webbtc_enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = () => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{tCommon("enable.allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default WebbtcEnableComponent;