feat: add target configs for multiple platforms, add deep links and refactor social connection list

[kuruk-mm]

PR Summary

In our alternative explorer on Android and iOS platforms, we've updated our login methods to streamline the sign-in process and reduce the need to switch tabs when signing actions are required.

Android:

• We now use a WebView for Web3 login and a Chrome Custom Tab for social login, both optimized for secure credential handling.

iOS:

• We implemented WebKit for credential handling, as mandated by the Apple Review team during our app review process.

These features are secure since they leverage the official Android and iOS SDKs.

Adaptations Needed on the auth Frontend

To support these changes, some modifications are required in the auth front. When using WebKit and Chrome Custom Tabs, we lose control on our end (Explorer) since the OS takes over the application's runtime. The only way to return to our app is via a deep link. This PR adds the option to include a deep link parameter, enabling a callback that directs users back to our app.

For example:

• When a deep link is provided, it opens a designated link, which is handled by a callback in our app. This is the standard way on Android and iOS to return users to the app.

Trust Wallet Integration

Additionally, we are using WebView to open Trust Wallet, as it does not require credentials. Attempts to integrate Trust Wallet with Chrome Custom Tabs encountered limitations (e.g., changing the app closes the view). Therefore, for Wallet Connect logins, the target configuration will be set to androidWeb3. A new UI has been added to the mobile app to allow users to select the appropriate configuration.

Summary of Changes

• Added ios, android, androidSocial, and androidWeb3 to targetConfigIds.
• Added deep link support.
• Refactored: Unified web3Options and socialOptions into a new connectionOption for simplicity.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
auth	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2024 10:53pm

[cyaiox]

Suggested change

	{showMore && hasExtraOptions && connectionOptions.extraOptions && (
	{showMore && hasExtraOptions && (

[kuruk-mm]

I know that I'm already considering it in hasExtraOptions, but the compiler doesn't realize and it throws an error

npm run build, removing the connectionOptions.extraOptions &&:

src/components/Connection/Connection.tsx:163:13 - error TS2322: Type 'ConnectionOptionType[] | undefined' is not assignable to type 'ConnectionOptionType[]'.
  Type 'undefined' is not assignable to type 'ConnectionOptionType[]'.

163             options={connectionOptions.extraOptions}
                ~~~~~~~

  src/components/Connection/Connection.tsx:58:3
    58   options: ConnectionOptionType[]
         ~~~~~~~
    The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & { options: ConnectionOptionType[]; tooltipDirection: "top center" | "bottom center"; testId?: string | undefined; loadingOption?: ConnectionOptionType | undefined; onConnect: (wallet: ConnectionOptionType) => unknown; }'


Found 1 error in src/components/Connection/Connection.tsx:163