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:

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

$3

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


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
`

$3

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:

`bash
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:
`typescript

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

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

$3

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:

`typescript
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.

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

function App() {
return (

{ / ... /}

);
}

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

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

``