diff --git a/e2e/evm/noBrowserWallet.spec.ts b/e2e/evm/noBrowserWallet.spec.ts new file mode 100644 index 00000000..508fa976 --- /dev/null +++ b/e2e/evm/noBrowserWallet.spec.ts @@ -0,0 +1,25 @@ +import { test } from "@playwright/test"; + +import dict from "../../src/i18n/i18n"; + +test.describe("EVM no browser wallet", () => { + test("should show when no browser wallet is detected", async ({ page }) => { + await page.goto("/"); + + await page + .locator( + "div:nth-child(3) > .asset-wrap > .asset > .asset-selection", + ) + .click(); + await page.getByTestId("select-RBTC").click(); + + await page + .getByRole("button", { name: dict.en.connect_wallet }) + .click(); + + // Click it to make sure it exists + await page + .getByRole("heading", { name: dict.en.no_browser_wallet }) + .click(); + }); +}); diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx index 94d124e1..89900be2 100644 --- a/src/components/ConnectWallet.tsx +++ b/src/components/ConnectWallet.tsx @@ -13,7 +13,7 @@ import { import type { EIP6963ProviderInfo } from "../consts/Types"; import { useCreateContext } from "../context/Create"; import { useGlobalContext } from "../context/Global"; -import { customDerivationPathRdns, useWeb3Signer } from "../context/Web3"; +import { useWeb3Signer } from "../context/Web3"; import "../style/web3.scss"; import { formatError } from "../utils/errors"; import { cropString, isMobile } from "../utils/helper"; @@ -25,20 +25,13 @@ const Modal = (props: { setShow: Setter; }) => { const { t, notify } = useGlobalContext(); - const { providers, connectProvider } = useWeb3Signer(); + const { providers, connectProvider, hasBrowserWallet } = useWeb3Signer(); const [showDerivationPaths, setShowDerivationPaths] = createSignal(false); const [hardwareProvider, setHardwareProvider] = createSignal(undefined); - const hasBrowserWallet = createMemo(() => { - return Object.values(providers()).some( - (provider) => - !customDerivationPathRdns.includes(provider.info.rdns), - ); - }); - const Provider = (providerProps: { provider: EIP6963ProviderInfo }) => { return (
{ bolt12Offer, setBolt12Offer, } = useCreateContext(); - const { getEtherSwap, signer, providers } = useWeb3Signer(); + const { getEtherSwap, signer, providers, hasBrowserWallet } = + useWeb3Signer(); const [buttonDisable, setButtonDisable] = createSignal(false); const [buttonClass, setButtonClass] = createSignal("btn"); @@ -353,11 +354,15 @@ export const CreateButton = () => { setOnchainAddress(""); setAddressValid(false); + // Mobile EVM browsers struggle with downloading files + const isMobileEvmBrowser = () => isMobile() && hasBrowserWallet(); + // No backups needed for Reverse Swaps or when we send RBTC if ( isRecklessMode() || swapType() === SwapType.Reverse || - assetSend() === RBTC + assetSend() === RBTC || + isMobileEvmBrowser() ) { navigate("/swap/" + data.id); } else { diff --git a/src/context/Web3.tsx b/src/context/Web3.tsx index 263a1837..679676d1 100644 --- a/src/context/Web3.tsx +++ b/src/context/Web3.tsx @@ -65,11 +65,14 @@ const customDerivationPathRdns: string[] = [ const Web3SignerContext = createContext<{ providers: Accessor>; + hasBrowserWallet: Accessor; + connectProvider: (rdns: string) => Promise; connectProviderForAddress: ( address: string, derivationPath?: string, ) => Promise; + signer: Accessor; clearSigner: () => void; @@ -116,9 +119,12 @@ const Web3SignerProvider = (props: { const [rawProvider, setRawProvider] = createSignal< EIP1193Provider | undefined >(undefined); + const [hasBrowserWallet, setHasBrowserWallet] = + createSignal(false); onMount(() => { if (window.ethereum !== undefined) { + setHasBrowserWallet(true); setProviders({ ...providers(), [browserRdns]: { @@ -139,6 +145,8 @@ const Web3SignerProvider = (props: { log.debug( `Found EIP-6963 wallet: ${event.detail.info.rdns}: ${event.detail.info.name}`, ); + setHasBrowserWallet(true); + const existingProviders = { ...providers() }; // We should not show the browser provider when an EIP-6963 provider is found @@ -269,6 +277,7 @@ const Web3SignerProvider = (props: { getEtherSwap, switchNetwork, connectProvider, + hasBrowserWallet, connectProviderForAddress, getContracts: contracts, clearSigner: () => { diff --git a/src/utils/helper.ts b/src/utils/helper.ts index cacfe866..c2aa5016 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -15,6 +15,7 @@ import { ChainSwap, ReverseSwap, SomeSwap, SubmarineSwap } from "./swapCreator"; export const isIos = () => !!navigator.userAgent.match(/iphone|ipad/gi) || false; + export const isMobile = () => isIos() || !!navigator.userAgent.match(/android|blackberry/gi) || false;