{"id":21850481,"url":"https://github.com/circlefin/w3s-react-native-sample-app-wallets","last_synced_at":"2026-04-15T10:02:46.070Z","repository":{"id":234239258,"uuid":"763581909","full_name":"circlefin/w3s-react-native-sample-app-wallets","owner":"circlefin","description":"Explore React Native mobile sample applications to learn and understand the capabilities of Circle's Web3 Services. This sample application provides a practical way to test the integration of Circle's User-Controlled Wallets SDK into your mobile projects.","archived":false,"fork":false,"pushed_at":"2025-03-21T05:30:07.000Z","size":2934,"stargazers_count":5,"open_issues_count":4,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T03:51:08.975Z","etag":null,"topics":["web3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/circlefin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-26T15:06:14.000Z","updated_at":"2025-03-21T05:28:47.000Z","dependencies_parsed_at":"2024-08-28T19:35:05.613Z","dependency_job_id":"de37e9cd-e76e-4bb4-9637-61b9a767ca82","html_url":"https://github.com/circlefin/w3s-react-native-sample-app-wallets","commit_stats":null,"previous_names":["circlefin/w3s-react-native-sample-app-wallets"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/circlefin%2Fw3s-react-native-sample-app-wallets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/circlefin%2Fw3s-react-native-sample-app-wallets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/circlefin%2Fw3s-react-native-sample-app-wallets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/circlefin%2Fw3s-react-native-sample-app-wallets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/circlefin","download_url":"https://codeload.github.com/circlefin/w3s-react-native-sample-app-wallets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248903553,"owners_count":21180828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["web3"],"created_at":"2024-11-28T00:17:47.310Z","updated_at":"2026-04-15T10:02:46.021Z","avatar_url":"https://github.com/circlefin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Circle User-Controlled Wallets React Native Sample App\n\n\u003e Expo sample app demonstrating Circle's user-controlled wallet integration using React Native SDK\n\nThis sample app supports three authentication methods:\n\n\u003cimg src=\"readme_images/running_app_pin.png\" alt=\"PIN Authentication\" width=\"200\"/\u003e\u0026nbsp;\u0026nbsp;\u003cimg src=\"readme_images/running_app_email.png\" alt=\"Email OTP Authentication\" width=\"200\"/\u003e\u0026nbsp;\u0026nbsp;\u003cimg src=\"readme_images/running_app_social.png\" alt=\"Social Login Authentication\" width=\"200\"/\u003e\n\n### 1. PIN Code (Recommended for quick start)\n\n- **Simplest setup** - Only requires Circle App ID\n\n### 2. Email OTP\n\n- **Backend configuration** - Requires email service setup on Circle developer console\n- No additional client-side configuration needed\n\n### 3. Social Login (Google, Facebook, Apple)\n\n- **Advanced setup** - Requires OAuth provider accounts and platform-specific configuration\n- Additional setup for iOS and Android\n\n---\n\n## Table of Contents\n\n- [Requirements](#requirements)\n- [Quick Start (PIN Mode)](#quick-start-pin-mode)\n- [Email OTP Setup](#email-otp-setup)\n- [Social Login Setup](#social-login-setup)\n- [Troubleshooting](#troubleshooting)\n- [Migrating from SDK v1](#migrating-from-sdk-v1-bare-react-native)\n\n---\n\n## Requirements\n\n### Development Environment\n\n- Node.js 20.19.4 or higher\n- npm\n- Expo CLI\n\n### Android\n\n- Java 17 (JDK 17 recommended)\n- Android Studio and Android SDK\n- Android SDK Platform 36 (Android 16 Baklava)\n- Android SDK Build-Tools 36.0.0\n- Android device or emulator (API level 36+)\n\n### iOS\n\n- macOS with Xcode 16.3+ (Xcode 26 is recommended)\n- Xcode Command Line Tools\n- CocoaPods\n- iOS device (iOS 15.1+) or Simulator\n- Apple Developer account (for physical device testing)\n\n---\n\n## Quick Start (PIN Mode)\n\n### Prerequisites\n\n1. **Circle Developer Console Account** - [Sign up here](https://console.circle.com)\n2. **App ID** - Get from [Circle Developer Console](https://console.circle.com/wallets/user/configurator) → Wallets → User Controlled → Configurator\n3. **GitHub PAT** (Android only) - [Create token](https://github.com/settings/tokens) with `read:packages` permission\n\n### Install and Run\n\n**Step 1: Install dependencies**\n\n```bash\nnpm install\n```\n\n**Step 2: Configure .env (Android only)**\n\n```bash\ncp .env.example .env\n```\n\nEdit `.env` and add your `PWSDK_MAVEN_USERNAME` and `PWSDK_MAVEN_PASSWORD`\n\n**Step 3: Configure App ID**\n\nEdit `src/config.json` and set your App ID:\n\n```json\n{\n  \"pw_app_id\": \"YOUR_APP_ID\"\n}\n```\n\n**Step 4: Generate native projects**\n\n```bash\nnpx expo prebuild\n```\n\n**Step 5: Run the app**\n\nFor iOS:\n\n```bash\nnpm run ios\n```\n\nFor Android:\n\n```bash\nnpm run android\n```\n\n**That's it!** Open the app, go to the **PIN** tab, and start testing.\n\n\u003e [!NOTE]\n\u003e Want to add Email OTP or Social Login? See [Email OTP Setup](#email-otp-setup-optional) or [Social Login Setup](#social-login-setup-optional) below.\n\n---\n\n## Email OTP Setup\n\n\u003e [!IMPORTANT]\n\u003e **Prerequisite:** Complete the [Quick Start](#quick-start-pin-mode) setup first before adding Email OTP.\n\n### Backend Configuration\n\nEmail OTP authentication requires an SMTP email service configured on your backend to send one-time passcodes to users. No additional client-side configuration is needed.\n\nFollow [our tutorial](https://developers.circle.com/wallets/user-controlled/create-user-wallets-with-email#step-1-get-mailtrap-smtp-credentials) to configure your SMTP credentials. The tutorial uses [Mailtrap](https://mailtrap.io/) for testing.\n\nThe tutorial covers:\n\n- **Step 1:** Getting SMTP credentials from your email provider\n- **Step 2:** Configuring SMTP settings in Circle Developer Console\n\n---\n\n## Social Login Setup\n\n\u003e [!IMPORTANT]\n\u003e **Prerequisite:** Complete the [Quick Start](#quick-start-pin-mode) setup first before adding Social Login.\n\nSocial Login requires configuration for each provider (Google, Facebook, Apple) on both iOS and Android.\n\n\u003e [!NOTE]\n\u003e It's not necessary to configure all providers. Follow only the sections for the providers you want to support.\n\n#### Prerequisites: Obtain Provider IDs\n\nBefore configuring your app, you need to obtain IDs from each social provider.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eGoogle\u003c/b\u003e\u003c/summary\u003e\n\n**What you need:**\n\n- Web Client ID\n- `google-services.json` file from Firebase (for Android)\n- iOS Client ID (extracted from `GoogleService-Info.plist`)\n\n**Steps:**\n\n1. Visit [Firebase Console](https://console.firebase.google.com/) and create a Firebase project.\n\n2. Add an **Android app** to your project:\n   - Go to Project Settings → Your apps\n   - Click \"Add app\" → Select Android\n   - Package name: `com.circle.w3s.rn.sample.wallet`\n   - Download the `google-services.json` file\n\n   For detailed Android setup steps, see [Firebase Android setup guide](https://firebase.google.com/docs/android/setup#create-firebase-project)\n\n3. Add an **iOS app** to your project:\n   - Go to Project Settings → Your apps\n   - Click \"Add app\" → Select iOS\n   - Bundle ID: `com.circle.w3s.rn.sample.wallet`\n   - Download the `GoogleService-Info.plist` file\n   - Open the file and copy the value of the `CLIENT_ID` key (this will be used in `app.json`)\n\n4. Enable Google Sign-In:\n   - Navigate to **Build** → **Authentication** → **Sign-in method** tab\n   - Select **Google**, enable it, and click **Save**\n\n5. Get your **Web Client ID**:\n   - Open the **Google** provider again\n   - In the **Web SDK configuration** panel, copy the **Web client ID**\n\n**Save these values:**\n\n```\n✓ Web Client ID: xxxxx.apps.googleusercontent.com\n✓ google-services.json: Downloaded\n✓ CLIENT_ID from GoogleService-Info.plist: xxxxx.apps.googleusercontent.com\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eFacebook\u003c/b\u003e\u003c/summary\u003e\n\n**What you need:**\n\n- Facebook App ID\n- Facebook Client Token\n- Facebook Display Name\n\n**Steps:**\n\n1. Go to [Meta for Developers](https://developers.facebook.com/)\n2. Create a new Facebook app\n3. In app settings, add both **iOS** and **Android** platforms\n4. Note down the following values:\n   - **Facebook App ID** (in Settings → Basic)\n   - **Facebook Client Token** (in Settings → Advanced)\n   - **Facebook Display Name** (your app name)\n\n**Save these values:**\n\n```\n✓ Facebook App ID: xxxxxxxxxxxx\n✓ Facebook Client Token: xxxxxxxxxxxxxxxx\n✓ Facebook Display Name: Your App Name\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eApple\u003c/b\u003e\u003c/summary\u003e\n\n**What you need:**\n\n- Service ID (for Sign in with Apple on Android)\n\n**Steps:**\n\n1. Follow Apple's guide: [Register a Services ID](https://developer.apple.com/help/account/identifiers/register-a-services-id)\n2. Note down your **Service ID**\n\n**Save this value:**\n\n```\n✓ Apple Service ID: com.yourcompany.yourapp\n```\n\n\u003c/details\u003e\n\n#### Configure Social Logins in Circle Developer Console\n\nAfter obtaining provider IDs, configure them in Circle Developer Console:\n\n1. Go to [Circle Developer Console → Social Logins](https://console.circle.com/wallets/user/configurator/authentication-methods/social-logins)\n2. Enter the provider IDs you obtained above\n3. Save your configuration\n\n---\n\n#### iOS Configuration\n\nThis project uses Expo config plugins to automatically configure iOS settings during `expo prebuild`.\n\n**Step 1:** Update the plugin configuration in `app.json`\n\nReplace the placeholder values with your actual credentials:\n\n```json\n{\n  \"expo\": {\n    \"plugins\": [\n      \"@circle-fin/w3s-pw-react-native-sdk/plugins/apple-signin-entitlements\",\n      [\n        \"@circle-fin/w3s-pw-react-native-sdk/plugins/infoplist-config\",\n        {\n          \"facebookAppId\": \"YOUR_FACEBOOK_APP_ID\",\n          \"facebookClientToken\": \"YOUR_FACEBOOK_CLIENT_TOKEN\",\n          \"facebookDisplayName\": \"YOUR_FACEBOOK_DISPLAY_NAME\",\n          \"googleClientId\": \"YOUR_GOOGLE_IOS_CLIENT_ID\"\n        }\n      ]\n    ]\n  }\n}\n```\n\n**Step 2:** Run prebuild to apply configuration:\n\n```bash\nnpx expo prebuild --clean\n```\n\nDone! The plugins will automatically configure Sign in with Apple capability and `Info.plist` settings.\n\n---\n\n#### Android Configuration\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eGoogle Configuration\u003c/b\u003e\u003c/summary\u003e\n\n**Step 1:** Add `google-services.json`\n\nPlace your `google-services.json` file in `prebuild-sync-src/android/app/google-services.json`\n\n**Step 2:** Configure `strings.xml`\n\nEdit `prebuild-sync-src/android/app/src/main/res/values/strings.xml`:\n\n```xml\n\u003c!-- Google --\u003e\n\u003cstring name=\"google_web_client_id\" translatable=\"false\"\u003eYOUR_GOOGLE_WEB_CLIENT_ID\u003c/string\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eFacebook Configuration\u003c/b\u003e\u003c/summary\u003e\n\nEdit `prebuild-sync-src/android/app/src/main/res/values/strings.xml`:\n\n```xml\n\u003c!-- Facebook --\u003e\n\u003cstring name=\"facebook_app_id\"\u003eYOUR_FACEBOOK_APP_ID\u003c/string\u003e\n\u003cstring name=\"fb_login_protocol_scheme\"\u003efbYOUR_FACEBOOK_APP_ID\u003c/string\u003e\n\u003cstring name=\"facebook_client_token\"\u003eYOUR_FACEBOOK_CLIENT_TOKEN\u003c/string\u003e\n```\n\nReplace:\n\n- `YOUR_FACEBOOK_APP_ID` with your Facebook App ID\n- `YOUR_FACEBOOK_CLIENT_TOKEN` with your Facebook Client Token\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eApple Configuration\u003c/b\u003e\u003c/summary\u003e\n\nEdit `prebuild-sync-src/android/app/build.gradle` under `defaultConfig`:\n\n```gradle\nandroid {\n    defaultConfig {\n        manifestPlaceholders = [appAuthRedirectScheme: 'YOUR_APPLE_SERVICE_ID']\n    }\n}\n```\n\nReplace `YOUR_APPLE_SERVICE_ID` with your Apple Service ID (e.g., `com.yourcompany.yourapp`)\n\n\u003c/details\u003e\n\n---\n\n## Troubleshooting\n\nIf you encounter build or Metro bundler errors:\n\n1. **Clean install and rebuild:**\n\n   ```sh\n   rm -rf node_modules package-lock.json android ios .expo\n   npm install\n   npx expo prebuild --clean\n   ```\n\n2. **Clear Metro bundler cache:**\n\n   ```sh\n   npx expo start --clear\n   ```\n\n3. **Ensure you're using npm (not yarn):**\n   - Check that `package-lock.json` exists (not `yarn.lock`)\n   - If yarn was used, remove `yarn.lock` and reinstall with npm\n\n---\n\n## Migrating from SDK v1 (Bare React Native)\n\nIf you have an existing bare React Native project using SDK v1 and want to upgrade to SDK v2, see the [Complete Migration Guide](MIGRATION_GUIDE.md).\n\nFor reference, the SDK v1 sample app is preserved on the [sdk-v1](https://github.com/circlefin/w3s-react-native-sample-app-wallets/tree/sdk-v1) branch.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcirclefin%2Fw3s-react-native-sample-app-wallets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcirclefin%2Fw3s-react-native-sample-app-wallets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcirclefin%2Fw3s-react-native-sample-app-wallets/lists"}