Enabled React Native dapps to interact with Aptos Connect through an in-app browser modal.
npm install @aptos-connect/react-native-dapp-sdkEnabled React Native dapps to interact with Aptos Connect through an in-app browser modal.
First, install the package with your package manager of choice:
``bash`
pnpm add @aptos-connect/react-native-dapp-sdk
Make sure you're also adding the required peer dependencies to your React Native app:
`bashUsed to persist the client's state
pnpm add @react-native-async-storage/async-storage
$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 decodingIf 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();
// ...
}
``