feat: onramp

.changeset/slimy-apricots-complain.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': minor
+'@reown/appkit-common-react-native': minor
+'@reown/appkit-core-react-native': minor
+'@reown/appkit-siwe-react-native': minor
+'@reown/appkit-ui-react-native': minor
+'@reown/appkit-auth-ethers-react-native': minor
+'@reown/appkit-auth-wagmi-react-native': minor
+'@reown/appkit-coinbase-ethers-react-native': minor
+'@reown/appkit-coinbase-wagmi-react-native': minor
+'@reown/appkit-ethers-react-native': minor
+'@reown/appkit-ethers5-react-native': minor
+'@reown/appkit-scaffold-utils-react-native': minor
+'@reown/appkit-wagmi-react-native': minor
+'@reown/appkit-wallet-react-native': minor
+---
+
+feat: added onramp feature

.cursor/rules/appkit-react-native.mdc

@@ -0,0 +1,130 @@
+---
+description: This rule gives the overall context of the appkit react native project
+globs: 
+---
+React Native SDK Engineering Context:
+You are a **world-class Staff Software Engineer** specializing in **React Native SDKs**, with expertise in **performance, modularity, maintainability, and developer experience**.
+
+For every request, you must:
+
+### **1️⃣ Enforce SDK Best Practices**
+
+- **Function-based Component Architecture**: Use functional components with hooks exclusively (e.g., `useState`, `useEffect`) for all UI and logic.
+- **TypeScript-first Approach**: Enforce strict TypeScript with `@types/react-native`, adhering to the `tsconfig.json` rules (e.g., `noUncheckedIndexedAccess`, `strict` mode).
+- **Valtio or Controller-based State Management**: Use Valtio’s proxy-based reactivity for state management where applicable (e.g., `proxy({ address: '' })`). If using custom controllers (e.g., `AccountController.ts`), document their proxy-based implementation explicitly as the preferred pattern.
+- **Follow the SDK package structure**, keeping utilities, controllers, and UI components separate.
+
+### **2️⃣ Optimize for Performance & SDK Usability**
+
+  - Ensure efficient rendering with:
+    - **Efficient Rendering**: Apply `React.memo`, `useCallback`, and `useMemo` to prevent unnecessary re-renders in UI components and hooks.
+  - **FlatList for Lists**: Use `FlatList` with `keyExtractor` for rendering large datasets (e.g., wallet lists), avoiding array mapping with `map`.
+  - **Native Animations**: Use React Native’s `Animated` API for animations; avoid external libraries like `react-native-reanimated` to minimize dependencies.
+  - **Debounce expensive operations** (like API calls) using `lodash.debounce`.
+
+### **3️⃣ Code Consistency & SDK Structure**
+
+- **Directory structure must remain modular**:
+  ```
+  packages/
+    core/
+      src/
+        controllers/
+        utils/
+        index.ts
+    ui/
+      src/
+        components/
+        hooks/
+        index.ts
+    auth/
+      src/
+        index.ts
+  ```
+- Prefer `@reown/appkit-ui-react-native` components over `react-native` defaults:
+  - ✅ Use `<Text />` from `@reown/appkit-ui-react-native` instead of `<Text />`
+  - ✅ Use `<Button />` instead of `<TouchableOpacity />`
+  - ✅ **Use `FlatList` for rendering lists**, do not wrap it in `<List />`
+- **Sort imports**:
+  1. **External Libraries** (`react`, `valtio`, `viem`)
+  2. **Internal SDK Modules** (`@reown/appkit-ui-react-native`)
+  3. **Relative Imports** (`./controllers/RouterController.ts`)
+
+```typescript
+import React from 'react';
+import { Text } from '@reown/appkit-ui-react-native';
+import { RouterController } from './controllers/RouterController';
+```
+
+### **4️⃣ Secure & Scalable SDK API**
+
+- Design **developer-friendly APIs** with:
+  - Strongly typed method signatures (`(config: AppKitConfig) => void`).
+  - Proper validation on input parameters.
+  - Error handling to prevent crashes (`try-catch`).
+- **Use AsyncStorage sparingly**, only for:
+  - Caching non-sensitive data (e.g., user preferences, session data).
+  - Persisting lightweight app settings.
+- **Do not store sensitive data in AsyncStorage** (e.g., auth tokens, private keys).
+
+### **5️⃣ Comprehensive Testing & Error Handling**
+
+- **Unit Tests**: Implement tests using Jest and React Native Testing Library for all public APIs, controllers, and UI components, targeting **80%+ coverage**.
+
+```typescript
+import { render } from '@testing-library/react-native';
+test('renders button', () => {
+  const { getByText } = render(<Button>Click</Button>);
+  expect(getByText('Click')).toBeTruthy();
+});
+```
+
+- **Graceful Failure**: Ensure SDK methods fail safely:
+  - Use `try-catch` in all async functions (e.g., `connectWallet`).
+  - Throw `Error` objects with descriptive messages (e.g., `throw new Error('Failed to fetch wallet data')`).
+  - Leverage `ErrorUtil.ts` for consistent error formatting.
+
+```typescript
+import { ErrorUtil } from '../utils/ErrorUtil';
+async function connectWallet() {
+  try {
+    // Connection logic
+  } catch (error) {
+    throw ErrorUtil.formatError(error, 'Wallet connection failed');
+  }
+}
+```
+
+### **6️⃣ Maintain High Code Readability & Documentation**
+
+- **Enforce ESLint & Prettier rules** (`.eslintrc.json`).
+- **Use JSDoc comments** for:
+  - Public API methods (`@param`, `@returns`).
+  - Complex logic explanations.
+- **No inline styles**, prefer `@reown/appkit-ui-react-native`’s styling approach.
+
+### **7️⃣ SDK Navigation & Routing**
+
+- **No `react-navigation`** → Use internal SDK router:
+  - ✅ **Use `RouterController.ts` for navigation**.
+  - ✅ Use programmatic navigation (`router.push()`, `router.goBack()`).
+  - ✅ Avoid **deep linking dependencies**.
+
+### **8️⃣ Optimize SDK Extensibility**
+
+- **Make SDK modules easily extendable** via:
+  - **Hooks & Context API** (`useAccount()`, `useNetwork()`).
+  - **Custom Configurations** (e.g., passing options in `init()`).
+  - **Event-driven architecture** (`onConnect`, `onDisconnect`).
+- **Separate UI from logic**:
+  - Business logic → `controllers/`
+  - UI components → `packages/ui/`
+
+### **🔹 Outcome:**
+
+By following these principles, ensure **a world-class React Native SDK** that is:
+✅ Highly performant  
+✅ Modular & scalable  
+✅ Secure with blockchain-specific safeguards  
+✅ Developer-friendly with robust APIs, testing, and documentation  
+✅ Aligned with AppKit conventions by leveraging its UI kit and controllers.

.eslintrc.json

@@ -4,7 +4,7 @@
   "ignorePatterns": ["node_modules/", "build/", "lib/", "dist/", ".turbo", ".expo", "out/"],
   "rules": {
     "react/react-in-jsx-scope": 0,
-    "no-duplicate-imports": "off",
+    "no-duplicate-imports": "error",
     "react-hooks/exhaustive-deps": "warn",
     "no-console": ["error", { "allow": ["warn"] }],
     "newline-before-return": "error",

apps/gallery/utils/PresetUtils.ts

@@ -129,6 +129,7 @@ export const iconOptions: IconType[] = [
   'arrowRight',
   'arrowTop',
   'browser',
+  'card',
   'checkmark',
   'chevronBottom',
   'chevronLeft',
@@ -142,6 +143,7 @@ export const iconOptions: IconType[] = [
   'copy',
   'copySmall',
   'cursor',
+  'currencyDollar',
   'desktop',
   'disconnect',
   'discord',
@@ -165,6 +167,7 @@ export const iconOptions: IconType[] = [
   'qrCode',
   'refresh',
   'search',
+  'settings',
   'swapHorizontal',
   'swapVertical',
   'telegram',

apps/native/App.tsx

@@ -21,7 +21,6 @@ import { siweConfig } from './src/utils/SiweUtils';
 
 import { AccountView } from './src/views/AccountView';
 import { ActionsView } from './src/views/ActionsView';
-import { getCustomWallets } from './src/utils/misc';
 import { chains } from './src/utils/WagmiUtils';
 import { OpenButton } from './src/components/OpenButton';
 import { DisconnectButton } from './src/components/DisconnectButton';
@@ -34,9 +33,8 @@ const metadata = {
   url: 'https://reown.com/appkit',
   icons: ['https://avatars.githubusercontent.com/u/179229932'],
   redirect: {
-    native: 'redirect://',
-    universal: 'https://appkit-lab.reown.com/rn_appkit',
-    linkMode: true
+    native: 'host.exp.exponent://',
+    universal: 'https://appkit-lab.reown.com/rn_appkit'
   }
 };
 
@@ -63,14 +61,11 @@ const wagmiConfig = defaultWagmiConfig({
 
 const queryClient = new QueryClient();
 
-const customWallets = getCustomWallets();
-
 createAppKit({
   projectId,
   wagmiConfig,
   siweConfig,
   clipboardClient,
-  customWallets,
   enableAnalytics: true,
   metadata,
   debug: true,
@@ -79,6 +74,7 @@ createAppKit({
     socials: ['x', 'discord', 'apple'],
     emailShowWallets: true,
     swaps: true
+    // onramp: true
   }
 });
 

apps/native/package.json

@@ -13,7 +13,7 @@
     "eas:build": "eas build --platform all",
     "eas:build:local": "eas build --local --platform all",
     "eas:update": "eas update --branch preview",
-    "playwright:test": "./scripts/replace-ep-test.sh && playwright test",
+    "playwright:test": "./scripts/replace-ep-test.sh && playwright test tests/basic-tests.spec.ts && playwright test tests/wallet.spec.ts && playwright test tests/onramp.spec.ts",
     "playwright:install": "playwright install chromium",
     "deploy": "gh-pages --nojekyll -d dist",
     "build:web": "expo export -p web"