Skip to content

[WIP] AppKit React Native - Multichain #432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

[WIP] AppKit React Native - Multichain #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a93fe4
chore: adding new docs for react native multichain
ignaciosantise May 20, 2025
e6694de
chore: added migration guide
ignaciosantise May 20, 2025
93067f0
chore: added alpha tags to new packages
ignaciosantise May 20, 2025
fa29b59
chore: added storage & phantom support
ignaciosantise Jun 10, 2025
3ce7470
chore: added storage config
ignaciosantise Jun 10, 2025
d30d19c
Merge branch 'main' into chore/rn-multichain
ignaciosantise Jul 11, 2025
e1f18be
chore: improvements
ignaciosantise Jul 11, 2025
ef4eb25
Update appkit/react-native/core/components.mdx
rtomas Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions appkit/react-native/core/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,36 @@
title: Components
---

# Components
AppKit comes with a set of pre-built UI components to help you quickly integrate wallet connection and display functionalities into your React Native application. You can import them directly from `@reown/appkit-react-native`.

AppKit comes with a set of components in case you want to integrate fast.
You can import them from `@reown/appkit-wagmi-react-native` or `@reown/appkit-ethers-react-native`

### List of components available in AppKit package

### `<AppKitButton />`

The `AppKitButton` is a versatile component that intelligently adapts its appearance and behavior based on the current connection status.
- When no wallet is connected, it functions as a "Connect Wallet" button.
- When a wallet is connected, it functions as an "Account" button, typically displaying account information and a disconnect option.

| Variable | Description | Type |
| -------------- | ---------------------------------------------------- | ------------------ |
| `disabled` | Enable or disable the button. | `boolean` |
| `balance` | Show or hide the user's balance. | `'show' \| 'hide'` |
| `size` | Default size for the button. | `'md' \| 'sm'` |
| `label` | The text shown in the button. | `string` |
| `label` | The text shown in the button (primarily when disconnected). | `string` |
| `loadingLabel` | The text shown in the button when the modal is open. | `string` |

### `<AccountButton />`

This button is specifically designed to display when a user is connected. It typically shows account information and provides a way to disconnect or manage the connected account.

| Variable | Description | Type |
| ---------- | -------------------------------- | ------------------ |
| `disabled` | Enable or disable the button. | `boolean` |
| `balance` | Show or hide the user's balance. | `'show' \| 'hide'` |

### `<ConnectButton />`

This button is primarily used to initiate the connection process when no user is connected.

| Variable | Description | Type |
| -------------- | ---------------------------------------------------- | -------------- |
| `size` | Default size for the button. | `'md' \| 'sm'` |
Expand All @@ -36,6 +40,8 @@ You can import them from `@reown/appkit-wagmi-react-native` or `@reown/appkit-et

### `<NetworkButton />`

This button displays the currently active network of the connection. When pressed, it opens the network selection view within the AppKit modal, allowing users to switch networks.

| Variable | Description | Type |
| ---------- | ----------------------------- | --------- |
| `disabled` | Enable or disable the button. | `boolean` |
30 changes: 8 additions & 22 deletions appkit/react-native/core/email.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
title: Email & Socials
---

import WagmiImplementation from "/snippets/appkit/react-native/wagmi/email.mdx";
import EthersImplementation from "/snippets/appkit/react-native/ethers/email.mdx";
<Warning>
Feature not available yet
</Warning>

AppKit enables passwordless Web3 onboarding and authentication, allowing your users interact with your application by creating a non-custodial wallet with just their emails or social network.

Expand All @@ -15,27 +16,12 @@ Due to Safari’s strict third-party cookie policies, the SDK is not preserving

## Integration

<Tabs>
### Update your Cloud settings
1. Go to your [Cloud](https://cloud.reown.com) project
2. Open Dashboard and scroll down to Mobile Application IDs menu
3. Add your iOS Bundle ID and/or your Android Package Name
* Changes might take some minutes to impact

<Tab title="Wagmi">
### Update your Cloud settings
1. Go to your [Cloud](https://cloud.reown.com) project
2. Open Dashboard and scroll down to Mobile Application IDs menu
3. Add your iOS Bundle ID and/or your Android Package Name
* Changes might take some minutes to impact

<WagmiImplementation />
</Tab>

<Tab title="Ethers">
### Update your Cloud settings 1. Go to your [Cloud](https://cloud.reown.com)
project 2. Open Dashboard and scroll down to Mobile Application IDs menu 3.
Add your iOS Bundle ID and/or your Android Package Name * Changes might take
some minutes to impact
<EthersImplementation />
</Tab>

</Tabs>

## Options

Expand Down
Loading