Skip to main content

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.