From 0b1133755dba57458edfa0677b06d24c6acae9df Mon Sep 17 00:00:00 2001
From: nacho <25931366+ignaciosantise@users.noreply.github.com>
Date: Tue, 20 May 2025 15:58:16 -0300
Subject: [PATCH 1/2] chore: added onramp and swaps docs

---
 appkit/react-native/core/options.mdx        | 15 ++++-
 appkit/react-native/transactions/onramp.mdx | 63 ++++++++++++++++++++
 appkit/react-native/transactions/swaps.mdx  | 66 +++++++++++++++++++++
 docs.json                                   |  7 +++
 4 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 appkit/react-native/transactions/onramp.mdx
 create mode 100644 appkit/react-native/transactions/swaps.mdx

diff --git a/appkit/react-native/core/options.mdx b/appkit/react-native/core/options.mdx
index 392d117de..b6a042ba2 100644
--- a/appkit/react-native/core/options.mdx
+++ b/appkit/react-native/core/options.mdx
@@ -171,7 +171,7 @@ Allows you to toggle (enable or disable) additional features provided by AppKit.
 
 ### swaps
 
-Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react/transactions/swaps) feature is enabled by default.
+Enable or disable the swap feature in your AppKit. [Swaps](/appkit/react-native/transactions/swaps) feature is enabled by default.
 
 ```ts
 createAppKit({
@@ -182,6 +182,19 @@ createAppKit({
 });
 ```
 
+### onramp
+
+Enable or disable the On-Ramp feature in your AppKit. [On-Ramp](/appkit/react-native/transactions/onramp) feature is enabled by default.
+
+```ts
+createAppKit({
+  //...
+  features: {
+    onramp: true,
+  },
+});
+```
+
 ### email
 
 This boolean defines whether you want to enable email login. This feature is enabled by default.
diff --git a/appkit/react-native/transactions/onramp.mdx b/appkit/react-native/transactions/onramp.mdx
new file mode 100644
index 000000000..564c0c282
--- /dev/null
+++ b/appkit/react-native/transactions/onramp.mdx
@@ -0,0 +1,63 @@
+---
+title: On-Ramp
+---
+
+Enable users to purchase crypto with fiat directly within your React Native app using AppKit's On-Ramp feature. This integration allows users to securely access over 100 cryptocurrencies and purchase tokens to support in-app activity and transactions across multiple chains.
+
+## Configuration
+
+The On-Ramp feature is enabled by default in AppKit. Here's how to configure it in your app:
+
+```typescript
+import { createAppKit } from '@reown/appkit...'; // Ensure this import path is correct for your project
+
+createAppKit({
+  projectId: 'YOUR_PROJECT_ID',
+  // ... other config options
+  features: {
+    onramp: true, // Optional - true by default
+  }
+});
+```
+
+If you want to disable the On-Ramp feature, you can set `onramp: false` in the features configuration.
+
+## Usage
+
+### Opening the On-Ramp View
+
+You can programmatically open the On-Ramp view using the `useAppKit` hook:
+
+```typescript
+import { useAppKit } from '@reown/appkit-...'; // Ensure this import path is correct for your project
+
+function OnRampButton() {
+  const { open } = useAppKit();
+
+  const handleOnRampPress = () => {
+    open({ view: 'OnRamp' });
+  };
+
+  return (
+    <Button
+      title="Buy Crypto"
+      onPress={handleOnRampPress}
+    />
+  );
+}
+```
+
+### User Flow
+
+1. When users tap the "Buy Crypto" button or select it from the account view, they'll be presented with the On-Ramp interface.
+
+2. In the On-Ramp interface, users can:
+   - Select the fiat currency they want to use
+   - Select the cryptocurrency they want to purchase
+   - Enter the amount they want to purchase
+   - Choose a payment method (e.g., credit card, bank transfer)
+   - Review the transaction details including fees and exchange rates
+
+3. After reviewing the transaction details, users can confirm the purchase.
+
+4. Once confirmed, the transaction will be processed, and the cryptocurrency will be added to their wallet. 
\ No newline at end of file
diff --git a/appkit/react-native/transactions/swaps.mdx b/appkit/react-native/transactions/swaps.mdx
new file mode 100644
index 000000000..b4285e5f2
--- /dev/null
+++ b/appkit/react-native/transactions/swaps.mdx
@@ -0,0 +1,66 @@
+---
+title: Swaps
+---
+
+Enable users to swap cryptocurrencies directly within your React Native app using AppKit's Swaps feature. This integration allows users to securely trade between a wide variety of tokens across multiple chains.
+
+## Configuration
+
+The Swaps feature is enabled by default in AppKit. Here's how to configure it in your app:
+
+```typescript
+import { createAppKit } from '@reown/appkit...'; // Ensure this import path is correct for your project
+
+createAppKit({
+  projectId: 'YOUR_PROJECT_ID',
+  // ... other config options
+  features: {
+    swaps: true, // Optional - true by default
+  }
+});
+```
+
+If you want to disable the Swaps feature, you can set `swaps: false` in the features configuration.
+
+## Usage
+
+### Opening the Swaps View
+
+You can programmatically open the Swaps view using the `useAppKit` hook:
+
+```typescript
+import { useAppKit } from '@reown/appkit-...'; // Ensure this import path is correct for your project
+
+function SwapButton() {
+  const { open } = useAppKit();
+
+  const handleSwapPress = () => {
+    open({ view: 'Swap' });
+  };
+
+  return (
+    <Button
+      title="Swap Tokens"
+      onPress={handleSwapPress}
+    />
+  );
+}
+```
+
+### User Flow
+
+1. When users tap the "Swap Tokens" button or select it from the account view, they'll be presented with the Swaps interface.
+
+2. In the Swaps interface, users can:
+   - Select the token they want to swap from
+   - Select the token they want to swap to
+   - Enter the amount they want to swap
+   - Review the transaction details including:
+     - Price impact
+     - Network cost
+     - Slippage tolerance
+     - Provider fee
+
+3. After reviewing the transaction details, users can confirm the swap.
+
+4. Once confirmed, the transaction will be processed and the tokens will be swapped in their wallet. 
\ No newline at end of file
diff --git a/docs.json b/docs.json
index a680b8975..45fd56322 100644
--- a/docs.json
+++ b/docs.json
@@ -646,6 +646,13 @@
                   "appkit/react-native/core/resources"
                 ]
               },
+              {
+                "group": "Transactions",
+                "pages": [
+                  "appkit/react-native/transactions/swaps",
+                  "appkit/react-native/transactions/onramp"
+                ]
+              },
               {
                 "group": "Notifications",
                 "pages": [

From 5fc4dc89d207b2fe833a600b9d4937ff1f21db57 Mon Sep 17 00:00:00 2001
From: nacho <25931366+ignaciosantise@users.noreply.github.com>
Date: Wed, 23 Jul 2025 11:01:51 -0300
Subject: [PATCH 2/2] chore: minor changes

---
 appkit/react-native/transactions/onramp.mdx | 10 +++-------
 appkit/react-native/transactions/swaps.mdx  |  8 ++------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/appkit/react-native/transactions/onramp.mdx b/appkit/react-native/transactions/onramp.mdx
index 564c0c282..56047e766 100644
--- a/appkit/react-native/transactions/onramp.mdx
+++ b/appkit/react-native/transactions/onramp.mdx
@@ -8,9 +8,7 @@ Enable users to purchase crypto with fiat directly within your React Native app
 
 The On-Ramp feature is enabled by default in AppKit. Here's how to configure it in your app:
 
-```typescript
-import { createAppKit } from '@reown/appkit...'; // Ensure this import path is correct for your project
-
+```typescript {4-6}
 createAppKit({
   projectId: 'YOUR_PROJECT_ID',
   // ... other config options
@@ -28,9 +26,7 @@ If you want to disable the On-Ramp feature, you can set `onramp: false` in the f
 
 You can programmatically open the On-Ramp view using the `useAppKit` hook:
 
-```typescript
-import { useAppKit } from '@reown/appkit-...'; // Ensure this import path is correct for your project
-
+```typescript {2, 5}
 function OnRampButton() {
   const { open } = useAppKit();
 
@@ -58,6 +54,6 @@ function OnRampButton() {
    - Choose a payment method (e.g., credit card, bank transfer)
    - Review the transaction details including fees and exchange rates
 
-3. After reviewing the transaction details, users can confirm the purchase.
+3. After reviewing the transaction details, users will be redirected to the provider's platform to finish the purchase
 
 4. Once confirmed, the transaction will be processed, and the cryptocurrency will be added to their wallet. 
\ No newline at end of file
diff --git a/appkit/react-native/transactions/swaps.mdx b/appkit/react-native/transactions/swaps.mdx
index b4285e5f2..96d9344be 100644
--- a/appkit/react-native/transactions/swaps.mdx
+++ b/appkit/react-native/transactions/swaps.mdx
@@ -8,9 +8,7 @@ Enable users to swap cryptocurrencies directly within your React Native app usin
 
 The Swaps feature is enabled by default in AppKit. Here's how to configure it in your app:
 
-```typescript
-import { createAppKit } from '@reown/appkit...'; // Ensure this import path is correct for your project
-
+```typescript {4-6}
 createAppKit({
   projectId: 'YOUR_PROJECT_ID',
   // ... other config options
@@ -28,9 +26,7 @@ If you want to disable the Swaps feature, you can set `swaps: false` in the feat
 
 You can programmatically open the Swaps view using the `useAppKit` hook:
 
-```typescript
-import { useAppKit } from '@reown/appkit-...'; // Ensure this import path is correct for your project
-
+```typescript {2, 5}
 function SwapButton() {
   const { open } = useAppKit();