Circle Programmable Wallet SDK for React Native - Sample

Sample app for integrating Circle Programmable Wallet React Native SDK.

• Bookmark
  • Requirement
  • Authenticate the npm registry
  • Installation
  • New Architecture Support
  • Run the Sample App

---

Requirement

Android

• Java 17 is required for the sample app.

iOS

• Xcode 14.1+
  Install Apple’s Xcode development software: Xcode in the Apple App Store.

• CocoaPods
  CocoaPods is a dependency manager for iOS projects. Install CocoaPods by Homebrew. (suggestion)

  Check if Homebrew is installed:

  $ brew

  How to install Homebrew on MacOS: Link

Authenticate the npm registry

Create a Personal Access Token (PAT) in your GitHub setting. Use the Configure SSO button next to your created token to authorize circlefin organization. More instructions can be found here, and check below links for creating GitHub PAT:

• Creating a fine-grained personal access token
• Creating a personal access token (classic)

Installation

yarn add @circle-fin/w3s-pw-react-native-sdk

Android

Add the maven repository to your android/build.gradle. It's suggested that load settings from the local.properties:

repositories {
	...
	maven {
        	Properties properties = new Properties()
		// Load local.properties.
        	properties.load(new File(rootDir.absolutePath + "/local.properties").newDataInputStream())

		url properties.getProperty('pwsdk.maven.url')
		credentials {
        		username properties.getProperty('pwsdk.maven.username')
        		password properties.getProperty('pwsdk.maven.password')
		}
	}
}

Add the maven setting values in the local.properties file.

pwsdk.maven.url=https://maven.pkg.github.com/circlefin/w3s-android-sdk
pwsdk.maven.username=<GITHUB_USERNAME>
pwsdk.maven.password=<GITHUB_PAT>

Note When pasting the values above for <GITHUB_USERNAME> and <GITHUB_PAT>, make sure to not surround the values with quotes.

iOS

Run the command under ios/:

pod install

New Architecture Support

The SDK is supporting both React Native old and new architectures. You can enable or disable the new architecture by changing the project setting.

Android

Set the android/gradle.properties file as below to enable new architecture or false to disable.

newArchEnabled=true

iOS

Reinstall your pods by running pod install with the right flag:

bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

Or run without flag to use old architecture:

pod install

Run the Sample App

1. Edit src/config.json ➜ pw_app_id to fill in your APP ID.

2. (Optional) Open the project in Android Studio and see if there's any build error.

   • File ➜ Open ➜ choose android folder.
   • File ➜ Sync Project with Files.
   • Build ➜ Rebuild Project.

3. (Optional) Open the project in Xcode and build to see if there's any build error.

   • Open W3sSampleWallet.xcworkspace in Xcode.
   • Product ➜ Build.
   • If the Metro server does not launch by Xcode, please run the command on project folder.

     yarn start

4. Run on device
   You can simply run the command below or find more detail on reactnative.dev.

   • Android

     yarn android

   • iOS

     yarn ios

5. Fill in the App ID and execute it along with User Token, Encryption Key and Challenge ID.