Skip to content

Commit 279c06a

Browse files
committed
Inital edits for the React Native steps.
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
1 parent 97859c6 commit 279c06a

File tree

10 files changed

+66
-81
lines changed

10 files changed

+66
-81
lines changed
Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
### Making Blockchain Calls
1+
### Make blockchain calls
22

3-
While using the Web3Auth React Native SDK, you get the private key within the user scope. This means that you can use it with any blockchain with their corresponding library within the React Native environment.
3+
With the Embedded Wallets React Native SDK, you can derive the user's private key in memory for the
4+
current session. Use that key for any blockchain using their corresponding library in the React
5+
Native environment.
46

5-
:::tip Reference
7+
:::info Connect any blockchain
68

7-
Have a look at our [Connect Blockchain](/connect-blockchain/) section of the documentation and choose your blockchain to get started.
9+
Refer to the [blockchain documentation](/embedded-wallets/connect-blockchain/) to learn more about making calls on
10+
any supported blockchain.
811

9-
In this example, we are using the [Ethers](https://docs.ethers.org/v5/cookbook/react-native/) library to make calls to the Ethereum blockchain. You can check out our [Ethereum in React Native](/connect-blockchain/evm/ethereum/react-native) guide of the documentation to get started.
12+
This example uses the [Ethers](https://docs.ethers.org/v5/cookbook/react-native/) library
13+
to make calls to the Ethereum blockchain. Refer to the
14+
[Ethereum in React Native](/embedded-wallets/connect-blockchain/evm/ethereum/react-native/) documentation
15+
for more information.
1016

11-
:::
17+
:::
Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
### Initialize Web3Auth
1+
### Initialize the `Web3Auth` instance
22

3-
Web3Auth needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialization is the step where you can pass on all the configurations for Web3Auth you want.
3+
[Initialize the `Web3Auth` instance](/embedded-wallets/sdk/react-native#initialize-web3auth) when your
4+
app starts so users can sign in. During this step you'll pass the configuration options you need.
45

5-
For initializing Web3Auth React Native SDK, you need to provide your Client ID, the Web3Auth Network of your project and the `redirectUrl` for your application. Make sure to set up Deep Linking so that the Web3Auth SDK can redirect the user back to your application after authentication.
6-
7-
:::tip SDK Reference
8-
9-
- [Initializing Web3Auth React Native SDK](/embedded-wallets/sdk/react-native#initialize-web3auth).
10-
- [DeepLinking In React Native](/embedded-wallets/sdk/react-native/install#configuration).
11-
12-
:::
6+
You'll need your client ID, the network you want to use, and the `redirectUrl` for your application.
7+
Set up [deep linking](/embedded-wallets/sdk/react-native#setup) so the MetaMask Embedded
8+
Wallets SDK can redirect users back to your app after authentication.
Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
### Install MetaMask Embedded Wallet SDK
1+
### Install the MetaMask Embedded Wallets React Native SDK
22

3-
Install the Web3Auth React Native SDK package in your React Native project.
3+
Install the SDK package in your React Native project.
44

55
```bash npm2yarn
66
npm install --save @web3auth/react-native-sdk @web3auth/base @web3auth/ethereum-provider
77
```
8+
Refer to the [installation instructions](/embedded-wallets/sdk/react-native/install) page for more
9+
information.
810

911
[![Npm package monthly downloads](https://badgen.net/npm/dm/@web3auth/react-native-sdk)](https://www.npmjs.com/package/@web3auth/react-native-sdk) [![](https://data.jsdelivr.com/v1/package/npm/@web3auth/react-native-sdk/badge)](https://www.jsdelivr.com/package/npm/@web3auth/react-native-sdk)
10-
11-
:::tip SDK Reference
12-
13-
- [Installing Web3Auth](/embedded-wallets/sdk/react-native/install).
14-
15-
:::
Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
### Logging in your User
1+
### Sign in your user
22

3-
Use the `login` function in the Web3Auth Instance to log in the user. Just create a button that triggers the `login` for the user of the login method of their choice.
3+
Use the `Web3Auth` instance [`login`](embedded-wallets/sdk/react-native/usage#logging-in-a-user) function
4+
to sign in the user. You can create a button that triggers the `login` function for the sign in
5+
method of their choice.
46

5-
After a successful user login, Web3Auth will redirect back to your app, with a payload stored in the state of the Web3Auth Instance.
6-
7-
:::info SDK Reference
8-
9-
- [`login()` function](/embedded-wallets/sdk/react-native/usage#logging-in-a-user).
10-
11-
:::
7+
After a successful sign-in, the SDK stores the session state internally, and the user is redirected
8+
back to your app.
Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
### Log the user out
1+
### Sign out the user
22

3-
Use the `logout` function of the Web3Auth Instance to log the user out.
4-
5-
:::info SDK Reference
6-
7-
- [`logout()` function](/embedded-wallets/sdk/react-native/usage#logging-out-a-user).
8-
9-
:::
3+
Use the [`logout`](/embedded-wallets/sdk/react-native/usage#logging-out-a-user) function to sign the user out.
Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
### Fixing Bundler Issues
1+
### Troubleshoot bundler issues
22

3-
While using Web3Auth in React Native, you may run into issues building. This issue occurs because some core packages like `eccrypto` have certain dependencies which are not present within the Metro build environment.
3+
You might see build or bundle errors when you use MetaMask Embedded Wallets in React Native. Some core
4+
packages (for example, eccrypto) depend on modules that Metro doesn't provide.
45

5-
:::tip Troubleshooting
6-
7-
To solve this, please have a look at our troubleshooting page:
8-
9-
- [React Native Metro Bundler Issues](/troubleshooting/metro-issues)
10-
11-
:::
6+
Refer to the [troubleshooting section](/embedded-wallets/troubleshooting/metro-issues) for more
7+
information.
Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
:::note Requirements Android
1+
### Android prerequisites
22

3-
- Android API version `23` or newer is required.
4-
- `compileSdk` should be `34` or newer.
5-
- Check `android/app/build.gradle` in your React Native project to change it.
6-
7-
:::
3+
- Android API version 23, or later.
4+
- `compileSdk` version 34, or later
5+
- Refer to the `android/app/build.gradle` file in your React Native project to update it.
Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
:::note Requirements iOS
1+
### iOS prerequisites
22

3-
- iOS 14+
4-
- Xcode 11.4+ / 12.x
5-
- Swift 4.x / 5.x
6-
- `platform :ios` needs to be `14.0`.
7-
- Check `ios/Podfile` in your React Native project to change it.
3+
- iOS 14, or later
4+
- Xcode 12, or later
5+
- Swift 5, or later
6+
- `platform :ios` version 14.0
7+
- Refer to the `ios/Podfile` in your React Native project to update it.
88

9-
:::
Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
### MetaMask Embedded Wallets React Native Quick Start
1+
### MetaMask Embedded Wallets React Native quickstart
22

3-
This guide is designed to help you quickly integrate a basic instance of MetaMask Embedded Wallet SDKs in your React Native app.
3+
This quickstart is designed to help you quickly integrate MetaMask Embedded Wallets SDK in your React
4+
Native app.
45

5-
If you face any problem anytime, you can always find help in the [Web3Auth Community](https://web3auth.io/community/c/help-pnp/pnp-rn/19).
6+
Build the project locally:
67

7-
:::tip building locally
8+
1. Clone the MetaMask Embedded Wallets React Native quickstart application:
89

9-
- Clone the MetaMask Embedded Wallets React Native Quick Start Application
10+
```shell npm2yarn
11+
npx degit Web3Auth/web3auth-react-native-examples/rn-bare-quick-start w3a-quick-start
12+
```
1013

11-
```shell npm2yarn
12-
npx degit Web3Auth/web3auth-react-native-examples/rn-bare-quick-start w3a-quick-start
13-
```
14-
15-
- Install & Run
14+
1. Change to the quickstart directory, then install an run the application:
1615

1716
```shell npm2yarn
1817
cd w3a-quick-start
1918
npm install
2019
npm run ios ### or npm run android
2120
```
2221

23-
:::
22+
If you need help, visit the [Web3Auth community](https://web3auth.io/community/c/help-pnp/pnp-rn/19).
2423

2524
:::caution
2625

27-
The MetaMask Web3Auth React Native SDK is not compatible with "Expo Go" app. It is compatible only with Custom Dev Client and EAS builds. Please refer to the [troubleshooting section](/troubleshooting/metro-issues#update-your-metroconfigjs) for more on this.
26+
The MetaMask Embedded Wallets React Native SDK is not compatible with Expo Go. Use an Expo Custom Dev
27+
Client or an EAS build instead. See the
28+
[troubleshooting section](embedded-wallets/troubleshooting/metro-issues#update-your-metroconfigjs)
29+
for more information.
2830

2931
:::
Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
### Whitelist Package & Bundle ID
1+
### Whitelist your bundle ID
22

3-
To whitelist, you'll need to create a project or use an existing one in the [Developer Dashboard](https://dashboard.web3auth.io).
3+
To whitelist your app:
44

5-
- Create or Select a Web3Auth project.
5+
1. In the [Web3Auth dashboard](https://dashboard.web3auth.io), select your project.
66

7-
- To **Whitelist URLs** section:
8-
- Add `{SCHEME}://{YOUR_APP_PACKAGE_NAME}` for `Android`,
9-
- and, `{bundleId}://auth` for `iOS` to
7+
1. Select the **Domains** tab, In **Whitelist URLs**, add:
8+
9+
1. `<bundleId>://auth` for iOS
10+
1. `{SCHEME}://{YOUR_APP_PACKAGE_NAME}` for Android

0 commit comments

Comments
 (0)