@openfort/react-native 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# Openfort React native SDK
+
+## Install required packages:
+
+Using the package manager of your preference, install the openfort-js react native library, e.g. with yarn: `yarn add @openfort/react-native`.
+
+Since react native requires installing native dependencies directly, you also have to install these required dependencies
+```
+yarn add buffer react-native-crypto react-native-get-random-values react-native-randombytes stream-browserify react-native-mmkv
+```
+
+## Setup your metro config 
+
+If you do not already have a `metro.config.js`, create one with those required extra node modules:
+```
+// sample metro.config.js
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+
+  // Add shims for Node.js modules like crypto and stream
+  config.resolver.extraNodeModules = {
+    crypto: require.resolve('react-native-crypto'),
+    stream: require.resolve('stream-browserify'),
+    buffer: require.resolve('buffer'),
+  };
+
+  return config;
+})();
+
+```
+## Import `Openfort` at the top of your app
+The first file loaded should be Openfort-js polyfills: 
+```
+import  "@openfort/react-native/polyfills";
+```
+This will ensure the correct modules are imported and will ensure `openfort-js` works properly.
+
+## Render secure WebView
+
+Openfort uses a `WebView` (from `react-native-webview`) to operate as a secure environment, managing the private key and executing wallet operations. [Learn more](https://www.openfort.xyz/docs/security#embedded-self-custodial-signer).
+
+This WebView needs to always be displayed, it is recommended to put it on top of your app. It is wrapped inside a view with `flex: 0`
+
+Simply import it from `@openfort/react-native`
+
+```
+// Sample app/_layout.tsx using expo router
+import { OpenfortCommunicationWebView } from  '@openfort/react-native';
+
+export default function RootLayout() {
+
+  return (
+    <>
+      <OpenfortCommunicationWebView />
+      <Slot />
+    </>
+  );
+}
+```
+## Notes
+
+Because we are using `mmkv` storage, expo-go will not work. To run your app use `expo run:ios` or `expo run:android`.
+ 
+# Sample
+
+You can check out the [React native auth sample](https://github.com/openfort-xyz/react-native-auth-sample) to get your app running.

package/dist/Iframe.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import WebView from "react-native-webview";
+const injectedCode = `
+  window.parent = {};
+  window.parent.postMessage = (msg) =>  window.ReactNativeWebView.postMessage(JSON.stringify(msg))
+  `;
+export default function Iframe({ customUri }) {
+    const webViewRef = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fnCallbackRef = useRef(null); // Ref to store the callback
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        global.openfortListener = (fn) => {
+            fnCallbackRef.current = fn; // Store the callback in the ref
+        };
+        global.openfortPostMessage = (message) => {
+            webViewRef?.current?.postMessage(JSON.stringify(message));
+            setLoaded(true);
+        };
+    }, [webViewRef?.current]);
+    const handleMessage = (event) => {
+        // Trigger the stored callback, if any
+        if (fnCallbackRef.current) {
+            const origin = event.nativeEvent.url.endsWith('/') ? event.nativeEvent.url.slice(0, -1) : event.nativeEvent.url;
+            fnCallbackRef.current({ origin, data: event.nativeEvent.data });
+        }
+    };
+    if (!loaded)
+        return null;
+    const uri = customUri ? customUri : "https://embedded.openfort.xyz";
+    return (React.createElement(View, { style: { flex: 0 } },
+        React.createElement(WebView, { ref: webViewRef, source: { uri: uri }, onMessage: handleMessage, injectedJavaScript: injectedCode })));
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Iframe } from './Iframe';

package/dist/types/Iframe.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Iframe({ customUri }: {
+    customUri?: string;
+}): React.JSX.Element | null;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default as Iframe } from './Iframe';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@openfort/react-native",
+  "main": "dist/index.js",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "lint": "eslint . --ignore-pattern dist"
+  },
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "polyfills"
+  ],
+  "dependencies": {
+    "events": "^3.3.0",
+    "react-native-get-random-values": "^1.11.0",
+    "react-native-mmkv": "^3.2.0",
+    "react-native-randombytes": "^3.6.1",
+    "react-native-webview": "13.12.5",
+    "text-encoding": "^0.7.0"
+  },
+  "peerDependencies": {
+    "@openfort/openfort-js": "^0.8.15",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@openfort/openfort-js": "^0.8.15",
+    "react": "18.3.1",
+    "react-native": "0.76.5",
+    "@eslint/js": "^9.17.0",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.3",
+    "globals": "^15.14.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.19.0"
+  },
+  "private": false,
+  "packageManager": "yarn@1.22.17"
+}

package/polyfills/index.ts

@@ -0,0 +1,78 @@
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions"
+
+// This is a workaround to fix the issue with process.version
+if (process.version === undefined) {
+  Object.defineProperty(process, 'version', {
+    value: "",  // Set the desired version (you can use any string)
+    writable: false,
+  });
+}
+
+// Crypto module needs getRandomValues
+import 'react-native-get-random-values';
+
+const MMKVStorage = require("react-native-mmkv").MMKV;
+
+// Initialize MMKVStorage
+const MMKV = new MMKVStorage();
+
+const localStorage: Storage = {
+  getItem: (key: string): string | null => {
+    try {
+      const value = MMKV.getString(key);
+      // console.log("getItem", key, value);
+      return value !== undefined ? value : null;  // Ensure it returns string or null
+    } catch (e) {
+      console.error('Error reading value from localStorage polyfill', e);
+      return null;
+    }
+  },
+  setItem: (key: string, value: string) => {
+    try {
+      // console.log("setItem", key, value);
+      MMKV.set(key, value);  // Sets value synchronously
+    } catch (e) {
+      console.error('Error saving value to localStorage polyfill', e);
+    }
+  },
+  removeItem: (key: string) => {
+    try {
+      // console.log("removeItem", key);
+      MMKV.delete(key);  // Removes item synchronously
+    } catch (e) {
+      console.error('Error removing value from localStorage polyfill', e);
+    }
+  },
+  clear: () => {
+    try {
+      // console.log("clear");
+      MMKV.clearAll();  // Clears store synchronously
+    } catch (e) {
+      console.error('Error clearing localStorage polyfill', e);
+    }
+  },
+  key: (index: number): string | null => {
+    return MMKV.getAllKeys()[index] || null;
+  },
+  get length(): number {
+    try {
+      return MMKV.getAllKeys().length;
+    } catch {
+      console.error('Error: localStorage.length is not supported');
+      return -1;
+    }
+  }
+};
+
+global.localStorage = localStorage;
+global.sessionStorage = localStorage;
+
+// for TextEncoder and TextDecoder
+const applyGlobalPolyfills = () => {
+  const { TextEncoder, TextDecoder } = require("text-encoding")
+
+  polyfillGlobal("TextEncoder", () => TextEncoder)
+  polyfillGlobal("TextDecoder", () => TextDecoder)
+}
+
+applyGlobalPolyfills()