fix(web): appUrl query was getting lost while switching network in safeApp

[chiranjeev13]

What it solves

Resolves #4980

How this PR fixes it

In File apps/web/src/components/common/NetworkSelector/index.tsx

export const getNetworkLink = (router: NextRouter, safeAddress: string, networkShortName: string) => {
  const isSafeOpened = safeAddress !== ''

  const query = (
    isSafeOpened
      ? {
          safe: `${networkShortName}:${safeAddress}`,
        }
      : { chain: networkShortName }
  ) as {
    safe?: string
    chain?: string
    safeViewRedirectURL?: string
    appUrl?: string // Added this to the query
  }

  const route = {
    pathname: router.pathname,
    query,
  }

  if (router.query?.safeViewRedirectURL) {
    route.query.safeViewRedirectURL = router.query?.safeViewRedirectURL.toString()
  }

  if (router.query?.appUrl) {
    route.query.appUrl = router.query.appUrl.toString()
  } // if present then appUrl should be populated

  return route
}

How to test it

yarn workspace @safe-global/web start

create a safe multi chain account
go inside a safeApp
switch network in there

Screenshots

Screen.Recording.2025-02-23.at.1.40.51.AM.mov

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[chiranjeev13]

I have read the CLA Document and I hereby sign the CLA

[katspaugh]

This preserves the query indeed but ignores the fact that a Safe App might be not enabled on all chains.

From the original issue requirements:

Providing the Safe App is present on the destination chain, the Safe App should remain open, otherwise the dashboard navigated to, for example.

[chiranjeev13]

Yes, I was thinking the same. However, in the case of other EOAs, when we switch to a different network within an app, it's the app that indicates it as an unsupported network.

Since we're displaying the app within Safe's dashboard, I guess it's a better user experience for Safe to indicate an unsupported network. Working on this fix !!

[chiranjeev13]

Updated the unsupported chain handling logic in apps/web/src/pages/apps/open.tsx:

In this commit 8211879

Key Modifications:

• Refined the condition to check when safeApp.chainIds is empty
• Maintained 3-second redirect timeout
• ensured the remoteSafeAppsLoading is false before we check for chainIds

Video Preview

Screen.Recording.2025-02-23.at.10.11.45.PM.mov

Let me know if any thing else needs to be updated @katspaugh

[katspaugh]

Good idea!

[katspaugh]

This should be done in a useEffect.

[katspaugh]

Can we display chainName here? It can be taken from useCurrentChain().

[chiranjeev13]

Sure let me just do that instead!

[chiranjeev13]

Updated fix:

• Using useEffect for routing back to safeApp Dashboard
• Displaying chain name instead of chainId using useCurrentChain()

check it out here: c288de4

[katspaugh]

Thanks so much!
Sending to our QA.

[chiranjeev13]

Not sure why the cypress tests failed @katspaugh

[katspaugh]

@chiranjeev13 that's normal, they can't run on external forks.