Skip to content

Commit cdd41cd

Browse files
johann-crabnebulajohann-crabnebula
authored
feat: add a warning after a failed connection for brave users (#312)
* feat: add a warning after a failed connection for brave users * fix: add brave warning to connection dialog * feat: beautfiy brave browser info * feat: add general troubleshooting tip * fix: assume that when `navigator.brave.isBrave()` is set and returns any promise, Brave browser is running * fix: update docs links * fix: make dialog more flexible and scrollable when overflowing on mobile for example
1 parent 60be226 commit cdd41cd

7 files changed

Lines changed: 139 additions & 2 deletions

File tree

‎clients/web/src/base-components/dialog.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type Props = {
77
children: JSXElement;
88
title: JSXElement;
99
buttons: JSXElement;
10+
belowTheFold?: JSXElement;
1011
defaultOpen?: boolean;
1112
open?: Signal<boolean>;
1213
};
@@ -39,14 +40,15 @@ function Content(props: Props) {
3940
<AlertDialog.Portal mount={document.getElementById("app") ?? undefined}>
4041
<AlertDialog.Overlay class="fixed h-screen w-screen grid place-items-center backdrop-blur-md z-50 top-0 left-0" />
4142
<div class="fixed inset-0 z-50 flex items-center justify-center text-xl">
42-
<AlertDialog.Content class="z-50 text-4xl max-w-prose md:max-w-96 border border-neutral-800 rounded-lg p-10 bg-navy-700 bg-opacity-80 shadow-lg shadow-navy-600 kb-expanded:animate-content-show kb-disabled:animate-content-hide">
43+
<AlertDialog.Content class="z-50 text-4xl max-h-full overflow-auto max-w-full md:max-w-2xl border border-neutral-800 rounded-lg p-10 bg-navy-700 bg-opacity-80 shadow-lg shadow-navy-600 kb-expanded:animate-content-show kb-disabled:animate-content-hide">
4344
<div class="flex items-baseline justify-between mb-3">
4445
{props.title}
4546
</div>
4647
<AlertDialog.Description class="text-base text-neutral-300">
4748
{props.children}
4849
</AlertDialog.Description>
49-
<div class="pt-8 flex gap-10 justify-center">{props.buttons}</div>
50+
<div class="py-8 flex gap-10 justify-center">{props.buttons}</div>
51+
{props.belowTheFold}
5052
</AlertDialog.Content>
5153
</div>
5254
</AlertDialog.Portal>

‎clients/web/src/components/dialogs/connection-failed-dialog.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Dialog } from "~/base-components/dialog";
22
import { AlertDialog } from "@kobalte/core";
33
import { Signal } from "solid-js";
4+
import { BraveWarning } from "../warnings/brave-warning";
5+
import { Troubleshooting } from "../warnings/troubleshooting";
46

57
type Props = {
68
host: string;
@@ -30,6 +32,7 @@ export function ConnectionFailedDialog(props: Props) {
3032
</AlertDialog.CloseButton>
3133
</>
3234
}
35+
belowTheFold={<BraveWarning />}
3336
>
3437
<p class="text-xl">
3538
You tried to connect to{" "}
@@ -41,6 +44,7 @@ export function ConnectionFailedDialog(props: Props) {
4144
<p class="text-xl">
4245
Are you sure your app is running and setup with the DevTools plugin?
4346
</p>
47+
<Troubleshooting />
4448
</Dialog>
4549
);
4650
}

‎clients/web/src/components/errors/connection-failed-error.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { Troubleshooting } from "../warnings/troubleshooting";
2+
import { BraveWarning } from "../warnings/brave-warning";
3+
14
export function ConnectionFailedError() {
25
return (
36
<>
@@ -11,6 +14,8 @@ export function ConnectionFailedError() {
1114
the correct ip and port.
1215
</p>
1316
</div>
17+
<BraveWarning />
18+
<Troubleshooting />
1419
</>
1520
);
1621
}

‎clients/web/src/components/icons/info.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export function Info() {
2+
return (
3+
<svg
4+
id="icon"
5+
xmlns="http://www.w3.org/2000/svg"
6+
width="32"
7+
height="32"
8+
viewBox="0 0 32 32"
9+
class="invert inline-block pr-1 align-bottom"
10+
>
11+
<polygon points="17 22 17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22" />
12+
<path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
13+
<path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z" />
14+
<rect
15+
id="_Transparent_Rectangle_"
16+
data-name="&lt;Transparent Rectangle&gt;"
17+
class="fill-none"
18+
width="32"
19+
height="32"
20+
/>
21+
</svg>
22+
);
23+
}

‎clients/web/src/components/icons/warning.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export function Warning() {
2+
return (
3+
<svg
4+
id="icon"
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 32 32"
7+
width="32"
8+
height="32"
9+
class="invert inline-block pr-1 align-bottom"
10+
>
11+
<title>warning</title>
12+
<path
13+
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
14+
transform="translate(0 0)"
15+
/>
16+
<rect x="15" y="8" width="2" height="11" />
17+
<path
18+
d="M16,22a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,22Z"
19+
transform="translate(0 0)"
20+
/>
21+
<rect
22+
id="_Transparent_Rectangle_"
23+
data-name="&lt;Transparent Rectangle&gt;"
24+
class="fill-none"
25+
width="32"
26+
height="32"
27+
/>
28+
</svg>
29+
);
30+
}

‎clients/web/src/components/warnings/brave-warning.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { JSXElement, Show } from "solid-js";
2+
import { Info } from "../icons/info";
3+
4+
// The Brave browser exports a navigator function to determine whether we are using it.
5+
declare global {
6+
interface Navigator {
7+
brave?: {
8+
isBrave: () => Promise<boolean>;
9+
};
10+
}
11+
}
12+
13+
export function BraveWarning() {
14+
const isBrave = !!navigator.brave?.isBrave();
15+
16+
return (
17+
<Show when={isBrave}>
18+
<section class="text-base border border-neutral-800 rounded-lg p-3 shadow-lg shadow-navy-600 my-2 break-words">
19+
<p class="text-2xl text-slate-200">
20+
<Info /> Info
21+
</p>
22+
<h1 class="text-slate-200 text-xl pb-2 font-semibold">
23+
We noticed you are using the <Highlight>Brave browser</Highlight>
24+
</h1>
25+
<p class="pb-2">
26+
Users have reported that requests to{" "}
27+
<Highlight>localhost will be blocked</Highlight> by the{" "}
28+
<Highlight>Brave browser shield</Highlight> by default.
29+
</p>
30+
<p>
31+
We have a little section in our docs on how to add an exception to
32+
this rule for <Highlight>DevTools Web</Highlight>:{" "}
33+
<Highlight>
34+
<a
35+
class="underline"
36+
href="https://docs.crabnebula.dev/devtools/troubleshoot/broken-connection/#brave-browser-shield"
37+
target="_blank"
38+
>
39+
docs.crabnebula.dev/devtools/troubleshoot/broken-connection/#brave-browser-shield
40+
</a>
41+
</Highlight>
42+
</p>
43+
</section>
44+
</Show>
45+
);
46+
}
47+
48+
function Highlight(props: { children: JSXElement }) {
49+
return <strong class="bg-slate-800 px-1 rounded-sm">{props.children}</strong>;
50+
}

‎clients/web/src/components/warnings/troubleshooting.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Warning } from "../icons/warning";
2+
3+
export function Troubleshooting() {
4+
return (
5+
<section class="text-base border border-neutral-800 rounded-lg p-3 shadow-lg shadow-navy-600 mt-8 break-words">
6+
<h1 class="text-2xl text-slate-200">
7+
<Warning /> Troubleshooting
8+
</h1>
9+
<p class="text-slate-200 text-base font-semibold">
10+
See our docs for help:{" "}
11+
<strong class="bg-slate-800 px-1 rounded-sm">
12+
<a
13+
class="underline"
14+
href="https://docs.crabnebula.dev/devtools/troubleshoot/broken-connection/"
15+
target="_blank"
16+
>
17+
docs.crabnebula.dev/devtools/troubleshoot/broken-connection/
18+
</a>
19+
</strong>
20+
</p>
21+
</section>
22+
);
23+
}

0 commit comments

Comments
 (0)