[Development Tip] Deeplink retry

[christopherferreira9]

As you may know, when dealing with a mobile to mobile experience, the MetaMask SDK takes advantage of deeplinks in order to take the user from a dapp to the MetaMask mobile wallet.
The main inconvenience with this is that both Android and iOS present a default dialog on the device that the user needs to tap in order to jump from one place to another such as:

iOS	Android

If a user then dismisses the dialog above the deeplink action then gets lost which means that the user won't be able to be directed to the wallet.
Given this, it doesn't necessarily mean that an RPC call doesn't reach the wallet, it still travels via websocket and so if the wallet is already in the background and connected it will display the request without the user knowing. A connection start on the other hand strictly relies on the deeplink to happen.

🤔 How do we solve this? How can we allow the user to recover from this state? (for this explanation, react will be used as an example)

1. Set the openDeeplink option in the SDKOptions object such as:

sdkOptions={{
    ...sdkOptions,  // Your other SDKOptions
    openDeeplink: (url) => {
        setConnectionDeeplink({ url });  // This will be used to send the deeplink url to the child
        window.location.href = url;  // This tries to open the deeplink as soon as it happens
    },
}}

2. Provide the user with a button of some sort that can act as a trigger for the deeplink to happen such as:

<button onClick={retryDeeplink}>
    Try Again
</button>

3. Make the child receive the deeplink and handle the retry logic

interface ChildProps {
    deeplink: { url: string };
}

export const ChildDappComponent = ({ deeplink }: ChildProps) => {
    const { sdk, connected } = useSDK();
    const [hasPendingRequest, setHasPendingRequest] = useState(false);
    
    const retryDeeplink = () => {
        // This ensures that we're able to deeplink with the full deeplink url to establish the connection
        if (!connected && deeplink.url) {
            window.location.href = deeplink.url;
            return;
        };
        
        // At this point, the wallet may have received the deeplink or will receive upon reconnecting to the socket so we just need to jump into MetaMask with an empty deeplink
        window.location.href = `metamask://`
  }
};

4. Wrap your request around hasPendingRequest:

const connect = async () => {
    try {
        setHasPendingRequest(true);
        const accounts = await sdk?.connect();
        setHasPendingRequest(false);
    } catch (err) {
        console.warn(`Failed to connect: `, err);
    }
};

5. Render the retry button in ChildDappComponent

return (
    {hasPendingRequest && (
        <div>
            <button onClick={retryDeeplink}>
                Try Again
             </button>
        </div>
    )}
);

This will serve as a workaround but doesn't take a way the fact that the SDK can implement a retry mechanism. For the time being, this needs to be handled on the client 🙏