feat: add companion download link in addAccount prompt (#2515)

* fix: add message about companion app for TOR users * fix: colors * fix: translations, download links, os detection
getAlby · Jun 28, 2023 · 7ff07d8 · 7ff07d8
1 parent 84fc93a
commit 7ff07d8
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/src/app/components/CompanionDownloadInfo.tsx b/src/app/components/CompanionDownloadInfo.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import getOS from "~/common/utils/os";
 
 type Props = {
   hasTorCallback: (hasTor: boolean) => void;
@@ -11,14 +12,6 @@ function CompanionDownloadInfo({ hasTorCallback }: Props) {
     keyPrefix: "companion_download_info",
   });
 
-  function getOS() {
-    const userAgent = navigator.userAgent;
-    if (userAgent.indexOf("Win") !== -1) return "Windows";
-    if (userAgent.indexOf("Mac") !== -1) return "MacOS";
-    if (userAgent.indexOf("X11") !== -1) return "UNIX";
-    if (userAgent.indexOf("Linux") !== -1) return "Linux";
-  }
-
   function onChangeConnectionMode(isTor: boolean) {
     setIsTor(isTor);
     hasTorCallback(isTor);

diff --git a/src/app/components/Hyperlink/index.tsx b/src/app/components/Hyperlink/index.tsx
@@ -6,13 +6,15 @@ type Props = {
   onClick?: () => void;
   children: ReactNode;
   className?: string;
+  target?: "_blank" | undefined;
 };
 
 export default function Hyperlink({
   onClick,
   children,
   href,
   className,
+  target,
 }: Props) {
   return (
     <a
@@ -22,6 +24,7 @@ export default function Hyperlink({
       )}
       href={href}
       onClick={onClick}
+      target={target}
     >
       {children}
     </a>

diff --git a/src/app/screens/ConfirmAddAccount/index.tsx b/src/app/screens/ConfirmAddAccount/index.tsx
@@ -5,10 +5,12 @@ import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
+import Hyperlink from "~/app/components/Hyperlink";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import { useNavigationState } from "~/app/hooks/useNavigationState";
 import { USER_REJECTED_ERROR } from "~/common/constants";
 import msg from "~/common/lib/msg";
+import getOS from "~/common/utils/os";
 import type { OriginData } from "~/types";
 
 function ConfirmAddAccount() {
@@ -23,6 +25,7 @@ function ConfirmAddAccount() {
   const config = navState.args?.config as unknown;
   const origin = navState.origin as OriginData;
   const [loading, setLoading] = useState(false);
+  const isTor = connector.startsWith("native");
 
   async function confirm() {
     try {
@@ -56,6 +59,22 @@ function ConfirmAddAccount() {
             image={origin.icon}
             url={origin.host}
           />
+          {/* TODO: Replace with Alert component */}
+          {isTor && (
+            <div className="mt-4 rounded-md font-medium p-4 text-blue-700 bg-blue-50 dark:text-blue-200 dark:bg-blue-900">
+              <p>
+                {t("tor_info")}
+                <br />
+                <br />
+                <Hyperlink
+                  className="text-white hover:text-gray-300"
+                  href={`https://getalby.com/install/companion/${getOS()}`}
+                >
+                  ⬇️ {tCommon("actions.download")}
+                </Hyperlink>
+              </p>
+            </div>
+          )}
           <ContentMessage
             heading={t("content", {
               connector: tCommon(

diff --git a/src/common/utils/os.ts b/src/common/utils/os.ts
@@ -0,0 +1,9 @@
+function getOS() {
+  const userAgent = navigator.userAgent;
+  if (userAgent.indexOf("Win") !== -1) return "Windows";
+  if (userAgent.indexOf("Mac") !== -1) return "MacOS";
+  if (userAgent.indexOf("X11") !== -1) return "UNIX";
+  if (userAgent.indexOf("Linux") !== -1) return "Linux";
+}
+
+export default getOS;
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -750,7 +750,8 @@
     },
     "confirm_add_account": {
       "title": "Add account",
-      "content": "This website wants to add an account ({{connector}}):"
+      "content": "This website wants to add an account ({{connector}}):",
+      "tor_info": "In order to connect through the TOR network you need to first install the Alby companion app:"
     },
     "nostr": {
       "title": "Nostr",
@@ -849,7 +850,8 @@
       "copy_invoice": "Copy Invoice",
       "log_in": "Log in",
       "remember": "Remember my choice and don't ask again",
-      "more": "More"
+      "more": "More",
+      "download": "Download"
     },
     "connectors": {
       "lnd": "LND",