Connect to mobile wallet
Connecting to a mobile wallet is a bit more complex than an extension wallet, since it can either be done in a desktop or mobile environment. In a desktop environment its common to use a qr code that the mobile app reads. In a mobile environment we want to redirect to the wallet mobile app.
For this reason shuttle exposes a different method, mobileConnect
that matches the different flow in order to connect to mobile wallets.
import { useState } from "react";import QRCode from "react-qr-code";import { useShuttle } from "@delphi-labs/shuttle";import { isAndroid, isIOS, isMobile } from "./utils/device";function Header() { const { mobileProviders, mobileConnect } = useShuttle(); const [walletconnectUrl, setWalletconnectUrl] = useState(""); return ( <> {mobileProviders.map((mobileProvider) => { return ( <button key={mobileProvider.id} onClick={async () => { const urls = await mobileConnect({ mobileProviderId: mobileProvider.id, chainId: "mars-1", callback: () => { setWalletconnectUrl(""); }, }); if (isMobile()) { if (isAndroid()) { window.location.href = urls.androidUrl; } else if (isIOS()) { window.location.href = urls.iosUrl; } else { window.location.href = urls.androidUrl; } } else { setWalletconnectUrl(urls.walletconnectUrl); } }} disabled={!mobileProvider.initialized} > {mobileProvider.name} </button> ); })} {walletconnectUrl && ( <> <QRCode value={walletconnectUrl} /> </> )} </> );}
We are hardcoding the chainId
we want to connect to, if your dApp is multi-chain we leave the approach you want to use to you. Just as a hint, the provider
object has all the enabled networks if you access provider.networks
you could iterate through them to display all possible provider and network combinations.