Aptos Connect React Native Dapp SDK

Enabled React Native dapps to interact with Aptos Connect through an in-app browser modal.

Installation

First, install the package with your package manager of choice:

pnpm add @aptos-connect/react-native-dapp-sdk

Peer dependencies

Make sure you're also adding the required peer dependencies to your React Native app:

# Used to persist the client's state
pnpm add @react-native-async-storage/async-storage

# Used to display the in-app browser
pnpm add react-native-inappbrowser-reborn

Required polyfills

Internally, we depend on crypto and encoding features that are not available out of the box in React Native. Chances are you are already adding a polyfill to your project, but if not, please make sure to polyfill the following features:

• crypto.getRandomValues for generation of key pairs and nonces
• TextEncoder and TextDecoder for utf-8 encoding and decoding

If you don't have an opinion on which libraries to use, we recommend the following:

pnpm add fast-text-encoding
pnpm add react-native-get-random-values

Make sure you apply the polyfills before importing your application in your index.js:

// Polyfills
import 'react-native-get-random-values';
import 'fast-text-encoding';
// ...
import App from './src/App';

AppRegistry.registerComponent(appName, () => App);

Enable deep-linking

In order to for Aptos Connect to be able to talk back to your native Dapp, you need to enable deep-linking. Please follow this link for instructions on how to do so.

This link is also helpful as it walks you through the process of adding custom URL schemes to your Xcode and Android projects.

Usage

The quickest way to initialize an ACDappClient is to use the useReactNativeACDappClient hook:

import { useReactNativeACDappClient } from '@aptos-connect/react-native-dapp-sdk';

const acDappClientConfig = {
  dappName: 'My Example Dapp',
  dappImageURI: 'https://my-example-dapp.com/favicon.ico',
  defaultNetwork: Network.TESTNET,
  redirectUri: 'my-example-dapp://aptos-connect/callback',
};

function MyComponent() {
  const acDappClient = useReactNativeACDappClient(acDappClientConfig);
  
  const onConnect = async () => {
    const response = await acDappClient.connect();
    if (response.status === 'approved') {
      console.log('Connected!');
    }
  };
  
  // ...
}

If you want to share the ACDappClient instance across multiple components in your app, it's recommended you add ReactNativeACDappClientContextProvider at the top of your component hierarchy.

import { ReactNativeACDappClientContextProvider } from '@aptos-connect/react-native-dapp-sdk';

function App() {
  return (
    <ReactNativeACDappClientContextProvider config={acDappClientConfig}>
      { /* ... */}
    </ReactNativeACDappClientContextProvider>
  );
}

import { useACDappClient } from '@aptos-connect/react-native-dapp-sdk';

function Page() {
  // Any component under the provider can access the client instance
  const acDappClient = useACDappClient();
  // ...
}