Headless SDK

[musnit]

We had a lot of issues integrating with the Modal - it freezes and causes issues and only seems to work properly on a few specific versions of React.

It would be great to fix that.

Meanwhile, we anyway wanted a Headless SDK so that we can use our own fully custom UI. This PR contains exactly that.

I've refactored and removed all the UI code from the SDK so that it exposes only headless hooks that apps can consume however they like.

This draft PR is just for reference - documentation and examples still would need to be fixed, but I would propose potentially releasing it as a separate library, and refactoring the main modal-react-native library to be a thin UI layer on top of this new headless library.

The implementation basically moves all state/logic into the main useWalletConnectModal hook, instead of in react components and then deletes all components, including the related modal, theming and routing logic systems. It exposes just the list of recommendedWallets with added deepLink and imageURL fields so that the image can be displayed and deepLink can be triggered however the consumer wants.

The intended way for this new library to be used is basically as follows:

import {
  useWalletConnectModal,
  WalletApp,
} from '@spinamp/walletconnect-react-native';

const config = {
  projectId:'PROJECT_ID',
  providerMetadata: providerMetadata
}

const App = () => {
  const {recommendedWallets, isConnected , address, provider} = useWalletConnectModal(config);

  return <>
    {recommendedWallets.slice(7).map((walletApp: WalletApp) => (
      <Touchable
        onPress={walletApp.deepLink}
        key={walletApp.id}
      >
      <Image
        source={{
          uri: walletApp.imageURL,
        }}
      />
      <Text>
        {walletApp.name}
      </Text>
    </Touchable>
    ))}
  </>;

A fuller example is here: https://github.com/musnit/broken_walletconnect

[ignaciosantise]

hey @musnit 👋 can you open an issue describing the modal problems?

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud