b4af090 · bridge · git.iko.soy

git.iko.soy/bridge

add browser warning recommending chromium-based browser

commitb4af090eb7bd44999c530c976be1aca6af35b69c author~sarlev-sarsen <tlatfcp@protonmail.com> dateThu 11 Dec 2025, 18:27 (1 year ago) parentb40e5c6

3 files changed+71−5

compare with master

unifiedsplit

src/Bridge.tsx+12−5 src/components/BrowserWarning.tsx+27 src/lib/useBrowser.ts+32

src/Bridge.tsx+12−5

@@ -20,6 +20,9 @@ import light from '@tlon/indigo-light';

2020

2121import WithErrorBoundary from 'components/WithErrorBoundary';

2222import GlobalErrorBoundary from 'components/GlobalErrorBoundary';

23+import { useBrowser } from 'lib/useBrowser';

24+import { BrowserWarning } from 'components/BrowserWarning';

25+

2326import Modal from 'components/L2/Modal';

2427import { useRollerStore } from 'store/rollerStore';

2528import { Box } from '@tlon/indigo-react';

@@ -29,8 +32,8 @@ import { useRollerPoller } from 'lib/useRollerPoller';

2932const INITIAL_NETWORK_TYPE = isGoerli

3033 ? NETWORK_TYPES.GOERLI

3134 : isDevelopment && !isMainnet

32− ? NETWORK_TYPES.LOCAL

33− : NETWORK_TYPES.MAINNET;

35+ ? NETWORK_TYPES.LOCAL

36+ : NETWORK_TYPES.MAINNET;

3437

3538// NB(shrugs): modify these variables to change the default local state.

3639const SHOULD_STUB_LOCAL = import.meta.env.VITE_STUB_LOCAL === 'true';

@@ -38,9 +41,9 @@ const IS_STUBBED = isDevelopment && SHOULD_STUB_LOCAL;

3841

3942const INITIAL_WALLET = IS_STUBBED

4043 ? walletFromMnemonic(

41− import.meta.env.VITE_DEV_MNEMONIC as string,

42− import.meta.env.VITE_HD_PATH as string

43− )

44+ import.meta.env.VITE_DEV_MNEMONIC as string,

45+ import.meta.env.VITE_HD_PATH as string

46+ )

4447 : undefined;

4548const INITIAL_MNEMONIC = IS_STUBBED

4649 ? Just(import.meta.env.VITE_DEV_MNEMONIC)

@@ -82,6 +85,9 @@ function Bridge() {

8285 const initialRoutes = useInitialRoutes();

8386 const { loading, modalText, setModalText } = useRollerStore();

8487

88+ const browser = useBrowser();

89+ const showBrowserWarning = browser && !browser.isChromium;

90+

8591 // full reload if the user changes their selected network in Metamask

8692 //

8793 useEffect(() => {

@@ -103,6 +109,7 @@ function Bridge() {

103109 initialWallet={INITIAL_WALLET}

104110 initialMnemonic={INITIAL_MNEMONIC}

105111 initialPointCursor={INITIAL_POINT_CURSOR}>

112+ <BrowserWarning show={!!showBrowserWarning} />

106113 <IndigoApp>

107114 <ThemeProvider theme={light}>

108115 <Router />

src/components/BrowserWarning.tsxnew file+27

@@ -0,0 +1,27 @@

1+import React from 'react';

2+import { Box } from '@tlon/indigo-react';

3+import styled from 'styled-components';

5+const WarningBox = styled(Box)`

6+ background: #fff4e5;

7+ color: #663c00;

8+ border: 1px solid #ffb74d;

9+ padding: 0.75rem 1rem;

10+ text-align: center;

11+ font-weight: 600;

12+ margin-bottom: 1rem;

13+`;

14+

15+interface Props {

16+ show: boolean;

17+}

18+export const BrowserWarning: React.FC<Props> = ({ show }) => {

19+ if (!show) return null;

20+ return (

21+ <WarningBox role="alert">

22+ For the best experience we recommend using a Chromium‑based browser

23+ (Chrome, Brave, etc.).

24+ </WarningBox>

25+ );

26+};

27+

src/lib/useBrowser.tsnew file+32

@@ -0,0 +1,32 @@

1+import { useEffect, useState } from 'react';

3+export function useBrowser() {

4+ const [browser, setBrowser] = useState<{

6+ isChromium: boolean;

7+ } | null>(null);

9+ useEffect(() => {

10+ const ua = navigator.userAgent;

11+ const vendor = navigator.vendor ?? '';

12+

13+ const isChromium = !!(window as any).chrome;

14+ const isBrave = !!(navigator as any).brave;

15+ const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua);

16+ const isFirefox = /Firefox/.test(ua);

17+ const isEdge = /Edg/.test(ua);

18+ const isChrome = isChromium && !isBrave && !isEdge && /Chrome/.test(ua);

19+

20+ let name: typeof browser['name'] = 'other';

21+ if (isBrave) name = 'brave';

22+ else if (isChrome) name = 'chrome';

23+ else if (isSafari) name = 'safari';

24+ else if (isFirefox) name = 'firefox';

25+ else if (isEdge) name = 'edge';

26+

27+ setBrowser({ name, isChromium });

28+ }, []);

29+

30+ return browser;

31+}

32+