Skip to content

Commit 7afb2fe

Browse files
bumibumi
authored
Merge pull request #2190 from getAlby/fix/tor-info-during-setup
feat: improve TOR connection setup
2 parents 05ea791 + 3e9b025 commit 7afb2fe

File tree

11 files changed

+98
-57
lines changed

11 files changed

+98
-57
lines changed

‎src/app/components/CompanionDownloadInfo.tsx

Lines changed: 70 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { ReceiveIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
21
import { useState } from "react";
32
import { useTranslation } from "react-i18next";
43

54
type Props = {
6-
hasTorCallback: () => void;
5+
hasTorCallback: (hasTor: boolean) => void;
76
};
87

98
function CompanionDownloadInfo({ hasTorCallback }: Props) {
10-
const [hasTorSupport, setHasTorSupport] = useState(false);
9+
const [isTor, setIsTor] = useState(false);
1110
const { t } = useTranslation("components", {
1211
keyPrefix: "companion_download_info",
1312
});
@@ -20,40 +19,76 @@ function CompanionDownloadInfo({ hasTorCallback }: Props) {
2019
if (userAgent.indexOf("Linux") !== -1) return "Linux";
2120
}
2221

22+
function onChangeConnectionMode(isTor: boolean) {
23+
setIsTor(isTor);
24+
hasTorCallback(isTor);
25+
}
26+
2327
// TODO: check if the companion app is already installed
2428
return (
25-
<>
26-
{!hasTorSupport && (
27-
<div className="dark:text-white">
28-
<p className="mb-2">{t("description")} </p>
29-
<p className="mb-2">
30-
<a
31-
href={`https://getalby.com/install/companion/${getOS()}`}
32-
target="_blank"
33-
rel="noreferrer noopener"
34-
className="font-bold"
35-
>
36-
{t("download_here")}
37-
<ReceiveIcon className="w-6 h-6 inline" />
38-
</a>
39-
</p>
40-
<p>
41-
{t("or")}{" "}
42-
<a
43-
href="#"
44-
className="font-bold"
45-
onClick={(e) => {
46-
e.preventDefault();
47-
setHasTorSupport(true);
48-
hasTorCallback();
49-
}}
50-
>
51-
{t("using_tor")}
52-
</a>
53-
</p>
54-
</div>
55-
)}
56-
</>
29+
<div className="dark:text-white">
30+
<h3 className="mb-2 font-medium text-gray-800 dark:text-white">
31+
{t("heading")}
32+
</h3>
33+
<ul className="grid w-full gap-3 md:grid-cols-2">
34+
<li>
35+
<input
36+
type="radio"
37+
id="mode-companion"
38+
name="mode"
39+
value="companion"
40+
className="hidden peer"
41+
checked={!isTor}
42+
onChange={() => onChangeConnectionMode(false)}
43+
/>
44+
<label
45+
htmlFor="mode-companion"
46+
className="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-orange-bitcoin peer-checked:border-orange-bitcoin peer-checked:text-orange-bitcoin hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"
47+
>
48+
<div className="block">
49+
<div className="text-md font-semibold mb-2">
50+
{t("companion.title")}
51+
</div>
52+
<div className="text-sm mb-2">{t("companion.description")}</div>
53+
<div className="text-sm">
54+
<a
55+
className="text-sky-500 hover:text-sky-300"
56+
href={`https://getalby.com/install/companion/${getOS()}`}
57+
target="_blank"
58+
rel="noreferrer"
59+
>
60+
{t("download")} &raquo;
61+
</a>
62+
</div>
63+
</div>
64+
</label>
65+
</li>
66+
<li>
67+
<input
68+
type="radio"
69+
id="mode-tor"
70+
name="mode"
71+
value="tor"
72+
className="hidden peer"
73+
checked={isTor}
74+
onChange={() => onChangeConnectionMode(true)}
75+
/>
76+
<label
77+
htmlFor="mode-tor"
78+
className="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-orange-bitcoin peer-checked:border-orange-bitcoin peer-checked:text-orange-bitcoin hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"
79+
>
80+
<div className="block">
81+
<div className="w-full font-semibold mb-2">
82+
{t("tor_native.title")}
83+
</div>
84+
<div className="w-full text-sm mb-2">
85+
{t("tor_native.description")}
86+
</div>
87+
</div>
88+
</label>
89+
</li>
90+
</ul>
91+
</div>
5792
);
5893
}
5994

‎src/app/screens/connectors/ConnectBtcpay/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ export default function ConnectBtcpay() {
130130
{formData.url.match(/\.onion/i) && (
131131
<div className="mb-6">
132132
<CompanionDownloadInfo
133-
hasTorCallback={() => {
134-
setHasTorSupport(true);
133+
hasTorCallback={(hasTor: boolean) => {
134+
setHasTorSupport(hasTor);
135135
}}
136136
/>
137137
</div>

‎src/app/screens/connectors/ConnectCitadel/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ export default function ConnectCitadel() {
144144
{formData.url.match(/\.onion/i) && (
145145
<div className="mb-6">
146146
<CompanionDownloadInfo
147-
hasTorCallback={() => {
148-
setHasTorSupport(true);
147+
hasTorCallback={(hasTor: boolean) => {
148+
setHasTorSupport(hasTor);
149149
}}
150150
/>
151151
</div>

‎src/app/screens/connectors/ConnectLnbits/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,8 @@ export default function ConnectLnbits() {
124124
{formData.url.match(/\.onion/i) && (
125125
<div className="mb-6">
126126
<CompanionDownloadInfo
127-
hasTorCallback={() => {
128-
setHasTorSupport(true);
127+
hasTorCallback={(hasTor: boolean) => {
128+
setHasTorSupport(hasTor);
129129
}}
130130
/>
131131
</div>

‎src/app/screens/connectors/ConnectLnd/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,8 @@ export default function ConnectLnd() {
160160
{formData.url.match(/\.onion/i) && (
161161
<div className="mb-6">
162162
<CompanionDownloadInfo
163-
hasTorCallback={() => {
164-
setHasTorSupport(true);
163+
hasTorCallback={(hasTor: boolean) => {
164+
setHasTorSupport(hasTor);
165165
}}
166166
/>
167167
</div>

‎src/app/screens/connectors/ConnectLndHub/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ export default function ConnectLndHub({
121121
{formData.uri.match(/\.onion/i) && (
122122
<div className="mb-6">
123123
<CompanionDownloadInfo
124-
hasTorCallback={() => {
125-
setHasTorSupport(true);
124+
hasTorCallback={(hasTor: boolean) => {
125+
setHasTorSupport(hasTor);
126126
}}
127127
/>
128128
</div>

‎src/app/screens/connectors/ConnectMyNode/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ export default function ConnectMyNode() {
139139
{formData.url.match(/\.onion/i) && (
140140
<div className="mt-6">
141141
<CompanionDownloadInfo
142-
hasTorCallback={() => {
143-
setHasTorSupport(true);
142+
hasTorCallback={(hasTor: boolean) => {
143+
setHasTorSupport(hasTor);
144144
}}
145145
/>
146146
</div>

‎src/app/screens/connectors/ConnectRaspiBlitz/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ export default function ConnectRaspiBlitz() {
139139
</div>
140140
{formData.url.match(/\.onion/i) && (
141141
<CompanionDownloadInfo
142-
hasTorCallback={() => {
143-
setHasTorSupport(true);
142+
hasTorCallback={(hasTor: boolean) => {
143+
setHasTorSupport(hasTor);
144144
}}
145145
/>
146146
)}

‎src/app/screens/connectors/ConnectStart9/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export default function ConnectStart9() {
140140
{formData.url.match(/\.onion/i) && (
141141
<div className="mt-6">
142142
<CompanionDownloadInfo
143-
hasTorCallback={() => {
144-
setHasTorSupport(true);
143+
hasTorCallback={(hasTor: boolean) => {
144+
setHasTorSupport(hasTor);
145145
}}
146146
/>
147147
</div>

‎src/app/screens/connectors/ConnectUmbrel/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ export default function ConnectUmbrel() {
137137
{formData.url.match(/\.onion/i) && (
138138
<div className="mt-6">
139139
<CompanionDownloadInfo
140-
hasTorCallback={() => {
141-
setHasTorSupport(true);
140+
hasTorCallback={(hasTor: boolean) => {
141+
setHasTorSupport(hasTor);
142142
}}
143143
/>
144144
</div>

‎src/i18n/locales/en/translation.json

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -882,10 +882,16 @@
882882
}
883883
},
884884
"companion_download_info": {
885-
"description": "You are trying to connect to a node behind Tor. To do this you either need to have the Alby companion app installed or have Tor running. (When you're unsure, we recommend the Alby companion app.)",
886-
"download_here": "Download the Alby companion here!",
887-
"using_tor": "click here to continue if you use the Tor Browser",
888-
"or": "Or:"
885+
"heading": "How do you want to connect to the TOR network?",
886+
"download": "Download",
887+
"companion": {
888+
"title": "Companion App",
889+
"description": "Lightweight app that connects your browser to the TOR network."
890+
},
891+
"tor_native": {
892+
"title": "TOR (native)",
893+
"description": "Select this option if this browser is already connected to the TOR network."
894+
}
889895
},
890896
"toasts": {
891897
"connection_error": {

0 commit comments

Comments
 (0)