Rust bindings wasm2js update for /wallet package

packages/rust-bindings/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- Added build script to convert `@concordium/rust-bindings/wallet` wasm code to js, for react-native platform.
+- Updated build scripts with `build-react-native-wallet`
+
 ## 3.2.1
 
 ### Fixed

packages/rust-bindings/package.json

@@ -52,7 +52,7 @@
         },
         "./wallet": {
             "types": "./lib/wallet/node/cjs/index.d.ts",
-            "react-native": null,
+            "react-native": "./lib/wallet/react-native/index.js",
             "node": {
                 "module": "./lib/wallet/node/umd/index.min.js",
                 "default": "./lib/wallet/node/cjs/index.js"
@@ -88,9 +88,9 @@
         "build-node": "wasm-pack build ./packages/$0 --target nodejs --out-dir $INIT_CWD/lib/$0/node/cjs --out-name index",
         "build-bundler": "wasm-pack build ./packages/$0 --target bundler --out-dir $INIT_CWD/lib/$0/bundler --out-name index",
         "build-all": "yarn build-web $0 && yarn build-node $0 && yarn build-bundler $0",
-        "build": "yarn build-all dapp && ts-node ./scripts/build-react-native.ts && yarn build-all wallet && webpack && yarn sanitize",
-        "build:rust-bindings-dapp": "yarn build-all dapp && webpack --env package=dapp && ts-node ./scripts/build-react-native.ts && yarn sanitize",
-        "build:rust-bindings-wallet": "yarn build-all wallet && webpack --env package=wallet && yarn sanitize",
+        "build": "yarn build-all dapp && ts-node ./scripts/build-react-native-dapp.ts && yarn build-all wallet && ts-node ./scripts/build-react-native-wallet.ts && webpack && yarn sanitize",
+        "build:rust-bindings-dapp": "yarn build-all dapp && webpack --env package=dapp && ts-node ./scripts/build-react-native-dapp.ts && yarn sanitize",
+        "build:rust-bindings-wallet": "yarn build-all wallet && webpack --env package=wallet && ts-node ./scripts/build-react-native-wallet.ts && yarn sanitize",
         "build:rust-bindings": "yarn build",
         "clean": "rimraf -- target lib .webpack-cache",
         "sanitize": "find ./lib -type f -name .gitignore -delete -o -name package.json -delete",

packages/rust-bindings/scripts/build-react-native-dapp.ts

@@ -0,0 +1,9 @@
+import path from 'node:path';
+
+import { convertWasmToJs, copyToFolder } from './build-scripts';
+
+const dappBundlerPath = path.join(__dirname, '../lib/dapp/bundler');
+const dappOutPath = path.join(__dirname, '../lib/dapp/react-native');
+
+copyToFolder(dappBundlerPath, dappOutPath);
+convertWasmToJs(dappOutPath);

packages/rust-bindings/scripts/build-react-native-wallet.ts

@@ -0,0 +1,9 @@
+import path from 'node:path';
+
+import { convertWasmToJs, copyToFolder } from './build-scripts';
+
+const walletBundlerPath = path.join(__dirname, '../lib/wallet/bundler');
+const walletOutPath = path.join(__dirname, '../lib/wallet/react-native');
+
+copyToFolder(walletBundlerPath, walletOutPath);
+convertWasmToJs(walletOutPath);

packages/rust-bindings/scripts/build-react-native.ts → packages/rust-bindings/scripts/build-scripts.ts

@@ -17,17 +17,15 @@ const exec = util.promisify(_exec);
 const WASM_FILENAME = 'index_bg.wasm';
 const WASM_FILENAME_JS = `${WASM_FILENAME}.js`;
 
-const bundlerPath = path.join(__dirname, '../lib/dapp/bundler');
-const outPath = path.join(__dirname, '../lib/dapp/react-native');
-
 // Copy files to react native folder
-copyfiles(
-    [`${bundlerPath}/index*`, `${bundlerPath}/package.json`, outPath],
-    { up: bundlerPath.split('/').length, flat: true },
-    () => {} // no-op
-);
-
-(async () => {
+export const copyToFolder = (bundlerPath: string, outPath: string) =>
+    copyfiles(
+        [`${bundlerPath}/index*`, `${bundlerPath}/package.json`, outPath],
+        { up: bundlerPath.split('/').length, flat: true },
+        () => {} // no-op
+    );
+
+export const convertWasmToJs = async (outPath: string) => {
     // Convert files using `wasm2js`
     await exec(`wasm2js ${path.join(outPath, WASM_FILENAME)} -o ${path.join(outPath, WASM_FILENAME_JS)}`);
 
@@ -42,4 +40,4 @@ copyfiles(
             content = content.replace(WASM_FILENAME, WASM_FILENAME_JS);
             fs.writeFileSync(file, content, 'utf-8');
         });
-})();
+};

packages/sdk/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+- Removed build entrypoint split for react-native
+- Removed wasm dir as separate path in package
+
 ## 9.0.0
 
 ### Breaking changes

packages/sdk/README.md

@@ -95,6 +95,20 @@ yarn add @concordium/web-sdk react-native-polyfill-globals react-native-get-rand
 npx pod-install # if building for ios, adds native modules from dependencies to project.
 ```
 
+### Building App
+
+Initial App build may take significant amount of RAM (up to 10Gb), due to converted wasm module to js code.
+If you're encountering error `Reached heap limit Allocation failed - JavaScript heap out of memory`
+You need to increase memory limit `NODE_OPTIONS=--max-old-space-size`
+
+Example of start script in `packaje.json`
+
+```json
+{
+    "start": "NODE_OPTIONS=--max-old-space-size=12288 react-native start"
+}
+```
+
 ### Adding polyfill to app
 
 ```js
@@ -121,9 +135,3 @@ AppRegistry.registerComponent(appName, () => App);
 ```
 
 This ensures the native modules required by the SDK are present.
-
-### Unsupported functionality
-
-Due to current lack of support for web assembly in react native, some aspects of the SDK are not supported on the platform.
-This is specifically scoped to the functionality exposed at the entrypoint `@concordium/web-sdk/wasm`. Everything else supported on web
-platforms should also be supported on react native.

packages/sdk/package.json

@@ -32,12 +32,6 @@
             "browser": null,
             "default": "./lib/esm/pub/nodejs.js"
         },
-        "./wasm": {
-            "types": "./lib/esm/pub/wasm.d.ts",
-            "bun": "./src/pub/wasm.ts",
-            "react-native": null,
-            "default": "./lib/esm/pub/wasm.js"
-        },
         "./*": {
             "types": "./lib/esm/pub/*.d.ts",
             "bun": "./src/pub/*.ts",

packages/sdk/webpack.config.ts

@@ -8,10 +8,7 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 function configFor(target: 'web' | 'node' | 'react-native'): webpack.Configuration {
     const t = target === 'react-native' ? 'web' : target;
-    const entry =
-        target === 'react-native'
-            ? resolve(__dirname, './src/index.react-native.ts')
-            : resolve(__dirname, './src/index.ts');
+    const entry = resolve(__dirname, './src/index.ts');
 
     const config: webpack.Configuration = {
         mode: 'production',