Fix: Prevent Family Wallet Connection Pop-up from Being Blocked

[GianlucaMinoprio]

This PR addresses an issue where the Family Wallet connection pop-up was being blocked by browsers due to it not being triggered by a direct user interaction.

Changes Made

• Improved the connection flow to ensure pop-ups are triggered properly

🎥 Demo

ScreenRecording_05-13-2025.20-10-06_1.MP4

A video has been created showing the difference between:

• ❌ The old flow — where pop-ups could be blocked
• ✅ The new flow — where the connection works seamlessly

🔍 Testing

Tested across:

• Chrome
• Safari

[vercel]

@GianlucaMinoprio is attempting to deploy a commit to the Avara Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
connectkit-testbench	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2025 0:05am

[lochie]

hey @GianlucaMinoprio, thanks for the PR!
this looks to have some regression on desktop due to it calling connect() again once the route has changed. we would need an isMobile check wrapped around this for this logic to work

example:

if(isMobile) {
   connect({ connector });
} else {
  context.setRoute(routes.CONNECT);
} 

CleanShot.2025-05-21.at.23.20.34.mp4

[GianlucaMinoprio]

Because connect is being called twice in this case, I recommend moving the logic into a useEffectof ConnectWithInjector like this:

    if (wallet?.connector.id !== 'familyAccountsProvider') {
      connectTimeout = setTimeout(runConnect, 600);
    }

Familyreject.mp4

For the familyAccountsProvider, I believe the connection should remain tied to the button click. This ensures consistent behavior across the Apple ecosystem and helps avoid the pop-up being blocked. On both iOS and desktop Safari, pop-ups triggered outside of a direct user interaction (like a button click) are blocked, resulting in a failed connection attempt. It’s frustrating UX when a smooth pop-up could have worked.

Right now, the only issue is that I’m unable to detect the error message that rejects the connection inside ConnectWithinjector. Other than that, everything is working well.

[GianlucaMinoprio]

Pushed the update @lochie, if you’re able to find a way to detect when the connection is canceled, that would be awesome. Let me know if I can help debug!

[GianlucaMinoprio]

I've added a small change so that the direct connect from the button only work for Family Account:

                if (connector.id === 'familyAccountsProvider') {
                  connect({ connector: connector });
                }

In the useConnect() of Connectors we should add the management of the User rejected request and sync with the UI using the context.