Chore: change new app recommandation (#176)

When a gnonative user wants to create a new app using gnonative, he can
use the make rule `new-app` like that: `APP_NAME=test make new-app`.
This rule now uses the gnonative expo module hosted in the NPM's
registry. This approach hides a lot of complexity to let the user
concentrate to his app development, and makes gnonative updates easier.

This PR does other things:
- updates gnoboard to Expo v51 to be compatible with Xcode 15.3 or
above.
- fixes the ios build caused by the uppercase of the first letter of the
app name `gnoboard`.
- uses a copy of the Expo's gnonative-provider file instead of use-gno
file. So make updates of gnonative in gnoboard would be easier.

---------

Signed-off-by: D4ryl00 <[email protected]>

Author: D4ryl00

Makefile

@@ -13,6 +13,7 @@ APP_NAME ?= gnoboard
 make_dir := $(realpath $(dir $(abspath $(lastword $(MAKEFILE_LIST)))))
 cache_dir := $(make_dir)/.cache
 gnoboard_dir := $(make_dir)/examples/js/react-native/gnoboard
+expo_dir := $(make_dir)/expo
 
 # Argument Defaults
 APP_OUTPUT_DIR ?= $(make_dir)/examples/js/react-native/$(APP_NAME)
@@ -188,91 +189,35 @@ asdf.install_tools: asdf.add_plugins
 ########################################
 # Script to create a new app
 
-npm_basic_dependencies := @bufbuild/protobuf @connectrpc/connect @connectrpc/connect-web react-native-polyfill-globals react-native-url-polyfill [email protected] react-native-get-random-values text-encoding base-64 react-native-fetch-api
-npm_basic_dev_dependencies = @tsconfig/react-native babel-plugin-module-resolver
+npm_basic_dependencies := @gnolang/gnonative
 OUTPUT_DIR := $(make_dir)/examples/js/react-native
 
 new-app:
 ifndef APP_NAME
 	$(error APP_NAME is undefined. Please set APP_NAME to the name of your app)
 endif
+	$(call check-program, npm)
+	npm config set @buf:registry https://buf.build/gen/npm/v1/
 	$(MAKE) new-react-native-app OUTPUT_DIR=$(make_dir)/examples/js/react-native
-	$(MAKE) add-app-json-entry APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(make_dir)/examples/js/react-native
 	$(MAKE) copy-js-files APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(make_dir)/examples/js/react-native
-	$(MAKE) new-app-build-android APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(make_dir)/examples/js/react-native
-ifeq ($(OS),Darwin)
-	$(MAKE) new-app-build-ios APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(make_dir)/examples/js/react-native
-	$(MAKE) copy-ios-project-pbxproj
-endif
 
 # creates a new react native app using Expo script. Also creates ios and android folders
 new-react-native-app:
+	$(call check-program, npm)
 	$(call check-program, npx)
 	@mkdir -p $(OUTPUT_DIR)
 	@echo "creating a new gno awesome project at: $(OUTPUT_DIR)"
 	cd $(OUTPUT_DIR) && npx create-expo-app@latest $(APP_NAME) --template expo-template-blank-typescript
 	@echo "Creating ios and android folders"
-	cd $(OUTPUT_DIR)/$(APP_NAME) && npm expo prebuild
+	cd $(OUTPUT_DIR)/$(APP_NAME) && npx expo prebuild
 	@echo "Installing npm dependencies"
-	cd $(OUTPUT_DIR)/$(APP_NAME) && npm install ${npm_basic_dependencies} && npm install -D ${npm_basic_dev_dependencies}
+	cd $(OUTPUT_DIR)/$(APP_NAME) && npm install ${npm_basic_dependencies}
 	@echo "Building GnoCore.xcframework for the new app"
 	$(MAKE) build.ios APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(OUTPUT_DIR)/$(APP_NAME)
 
 # copy js files from gnoboard to the new app
 copy-js-files:
-	$(call check-program, jq)
 	@echo "Copying js files"
-	@mkdir -p $(OUTPUT_DIR)/$(APP_NAME)/src/grpc
-	@mkdir -p $(OUTPUT_DIR)/$(APP_NAME)/src/hooks
-	@cp -r $(gnoboard_dir)/src/grpc $(OUTPUT_DIR)/$(APP_NAME)/src
-	@cp -r $(gnoboard_dir)/src/hooks $(OUTPUT_DIR)/$(APP_NAME)/src
-	@cp -r $(gnoboard_dir)/src/native_modules $(OUTPUT_DIR)/$(APP_NAME)/src
-	@cp -r $(gnoboard_dir)/Makefile $(OUTPUT_DIR)/$(APP_NAME)
-	@cp -r $(gnoboard_dir)/android/.gitignore $(OUTPUT_DIR)/$(APP_NAME)/android
-	@cp -r $(gnoboard_dir)/ios/.gitignore $(OUTPUT_DIR)/$(APP_NAME)/ios
-	@cp $(make_dir)/templates/tsconfig.json $(OUTPUT_DIR)/$(APP_NAME)/tsconfig.json
-	@cp $(make_dir)/templates/babel.config.js $(OUTPUT_DIR)/$(APP_NAME)/babel.config.js
-	@cp $(make_dir)/templates/metro.config.js $(OUTPUT_DIR)/$(APP_NAME)/metro.config.js
-	@cp $(make_dir)/templates/App.tsx $(OUTPUT_DIR)/$(APP_NAME)/App.tsx
-
-# build GnoCore.xcframework for the new app
-new-app-build-ios:
-	@echo "Copying ios files"
-	@mkdir -p $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME)/Sources
-	@cp -r $(gnoboard_dir)/ios/gnoboard/Sources $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME)/
-	@cp $(gnoboard_dir)/ios/gnoboard/gnoboard-Bridging-Header.h $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME)/$(APP_NAME)-Bridging-Header.h
-	@cp -r $(gnoboard_dir)/ios/Sources $(OUTPUT_DIR)/$(APP_NAME)/ios/
-	@cd $(OUTPUT_DIR)/$(APP_NAME) && $(MAKE) ios/$(APP_NAME).xcworkspace TEMPLATE_PROJECT=$(APP_NAME)
-
-# build the Android project files for the new app
-new-app-build-android:
-	@echo "Copying Android project files"
-	@$(eval MAIN_APP_PATH := $(shell find $(OUTPUT_DIR)/$(APP_NAME)/android/app/src/main/java -name 'MainApplication.kt')) # ./android/app/src/main/java/com/anonymous/<APP_NAME>/MainApplication.kt
-	@$(eval MAIN_APP_FILE := $(shell basename $(MAIN_APP_PATH))) # MainApplication.kt
-	@$(eval MAIN_APP_DIR := $(shell dirname $(MAIN_APP_PATH))) # ./android/app/src/main/java/com/anonymous/<APP_NAME>
-	@$(eval PACKAGE_PREFIX := $(shell sed -n 's/package \(.*\)\.$(APP_NAME)/\1/'p $(MAIN_APP_DIR)/$(MAIN_APP_FILE))) # e.g. com.anonymous
-	@cp -r $(gnoboard_dir)/android/app/src/main/java/land/gno/gobridge $(MAIN_APP_DIR)/.. # copy gobridge directory
-	@cp -r $(gnoboard_dir)/android/app/src/main/java/land/gno/rootdir $(MAIN_APP_DIR)/.. # copy rootdir directory
-	@perl -pi -e "s/land\.gno/$(PACKAGE_PREFIX)/" $(MAIN_APP_DIR)/../gobridge/* # in gobridge, replace land.gno by PACKAGE_PREFIX (e.g. com.anonymous)
-	@perl -pi -e "s/land\.gno/$(PACKAGE_PREFIX)/" $(MAIN_APP_DIR)/../rootdir/* # in rootdir, replace land.gno by PACKAGE_PREFIX (e.g. com.anonymous)
-	@perl -pi -e '/^package ./ and $$_.="\nimport '"$(PACKAGE_PREFIX)"'.gobridge.GoBridgePackage"' $(MAIN_APP_DIR)/$(MAIN_APP_FILE) # add the right import path for gobridge (e.g. import com.anonymous.gobridge.GoBridgePackage)
-	@perl -pi -e '/^package ./ and $$_.="\nimport '"$(PACKAGE_PREFIX)"'.rootdir.RootDirPackage"' $(MAIN_APP_DIR)/$(MAIN_APP_FILE) # add the right import path for rootdir (e.g. import com.anonymous.rootdir.RootDirPackage)
-	@perl -pi -e 's/return PackageList\(this\)\.packages/return PackageList\(this\)\.packages.apply \{\n\t\t\t\tadd(RootDirPackage())\n\t\t\t\tadd(GoBridgePackage())\n\t\t\t\}/' $(MAIN_APP_DIR)/$(MAIN_APP_FILE) # replace the default package list by one adding gobridge and rootdir
-	@perl -pi -e '/^def projectRoot/ and $$_.="def frameworkDir = \"\$$\{rootDir\.getAbsoluteFile\(\)\.getParentFile\(\)\.getParentFile\(\)\.getParentFile\(\)\.getParentFile\(\)\.getParentFile\(\)\.getAbsolutePath\(\)\}/framework\"\n"' $(OUTPUT_DIR)/$(APP_NAME)/android/app/build.gradle # add the projectRoot variable in build.gradle
-	@perl -pi -e '/^dependencies/ and $$_.="\timplementation fileTree(dir: \"\$$\{frameworkDir\}/android\", include: \[\"\*\.jar\", \"\*\.aar\"\]\)\n"' $(OUTPUT_DIR)/$(APP_NAME)/android/app/build.gradle # add the framework dependency in build.gradle
-	@cd $(OUTPUT_DIR)/$(APP_NAME) && $(MAKE) node_modules TEMPLATE_PROJECT=$(APP_NAME)
-
-JSON_FILE := $(OUTPUT_DIR)/$(APP_NAME)/app.json
-# add tsconfigPaths entry to app.json
-add-app-json-entry:
-	@echo "Adding tsconfigPaths entry to app.json"
-	jq '.expo.experiments = {"tsconfigPaths": true}'  $(JSON_FILE) > $(JSON_FILE).tmp && mv $(JSON_FILE).tmp  $(JSON_FILE)
-
-# copy ios project.pbxproj from gnoboard to the new app and replace 'gnoboard' with the new app name
-copy-ios-project-pbxproj:
-	@echo "Copying ios project.pbxproj"
-	@cp $(gnoboard_dir)/ios/gnoboard.xcodeproj/project.pbxproj $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME).xcodeproj/project.pbxproj
-	@cd $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME).xcodeproj
-	@sed -i.pbxproj 's/gnoboard/$(APP_NAME)/g' $(OUTPUT_DIR)/$(APP_NAME)/ios/$(APP_NAME).xcodeproj/project.pbxproj
-
-.PHONY: new-app new-react-native-app copy-js-files new-app-build-ios add-app-json-entry copy-ios-project-pbxproj
+	@cp $(expo_dir)/example/App.tsx $(OUTPUT_DIR)/$(APP_NAME)/App.tsx
+
+.PHONY: new-app configure-npm new-react-native-app copy-js-files

README.md

@@ -2,7 +2,7 @@
 
 Gno Native Kit is a framework that allows developers to build and port gno.land (d)apps written in the (d)app's native language.
 
-Current Gno (d)apps run on desktop/laptop computers which have Go installed. To run on mobile, the (d)app would need to bundle the Go runtime, which is complicated for most developers. 
+Current Gno (d)apps run on desktop/laptop computers which have Go installed. To run on mobile, the (d)app would need to bundle the Go runtime, which is complicated for most developers.
 
 However, Gno Native Kit helps bypass this complexity by using gRPC to make [calls to the Gno core API](https://buf.build/gnolang/gnonative/docs/main:land.gno.gnonative.v1) and access the blockchain's realm functions on a remote Gno.land node.
 These API calls are a programming language-independent wrapper on top of the core supported APIs like [gnoclient](https://github.com/gnolang/gno/tree/master/gno.land/pkg/gnoclient) and [crypto/keys](https://github.com/gnolang/gno/tree/master/tm2/pkg/crypto/keys).
@@ -76,12 +76,12 @@ cd gnonative
 
 #### Set up the Android NDK
 
-* Launch Android Studio and accept the default startup options. Create a new
-  default project (so that we get the main screen).
-* On the Tools menu, open the SDK Manager.
-* In the "SDK Tools" tab, click "Show Package Details". Expand
-  "NDK (Side by side)" and check "23.1.7779620".
-* Click OK to install and close the SDK Manager.
+-   Launch Android Studio and accept the default startup options. Create a new
+    default project (so that we get the main screen).
+-   On the Tools menu, open the SDK Manager.
+-   In the "SDK Tools" tab, click "Show Package Details". Expand
+    "NDK (Side by side)" and check "23.1.7779620".
+-   Click OK to install and close the SDK Manager.
 
 #### Install the tools with asdf (only need to do once)
 
@@ -101,7 +101,7 @@ make build.android
 
 ```console
 cd examples/js/react-native/gnoboard
-yarn start
+npm start
 ```
 
 #### Connect your Android phone/emulator and bind its port to metro
@@ -125,6 +125,7 @@ If you prefer the CLI option:
 ```console
 android-studio ./android
 ```
+
 Once done, bind the port to metro:
 
 ```console
@@ -145,7 +146,7 @@ See more: https://developer.android.com/studio/run#basic-build-run
 make asdf.install_tools
 ```
 
-If you get an error like "https://github.com/CocoaPods/CLAide.git (at master@97b765e) is not yet checked out" then reinstall cocoapods like this: 
+If you get an error like "https://github.com/CocoaPods/CLAide.git (at master@97b765e) is not yet checked out" then reinstall cocoapods like this:
 
 ```console
 asdf uninstall cocoapods
@@ -162,7 +163,7 @@ make build.ios
 
 ```console
 cd examples/js/react-native/gnoboard
-yarn start
+npm start
 ```
 
 #### Open Xcode and connect your iOS device

docs/getting-started/create-new-app.md

@@ -28,16 +28,7 @@ To run the app, run the following command:
 
 ```console
 cd examples/js/react-native/MyApp
-make android.reverse_tcp # for Android, after you have connected an Android device (simulator or real device)
-yarn start
-```
-
-and then run the following command in another terminal in the repo folder:
-
-```console
-cd $(go list -m -f '{{.Dir}}') # go to the root of the repo
-cd examples/js/react-native/MyApp
-npx react-native [run-android|run-ios]
+npx expo [run:android|run-ios]
 ```
 
 ## Using Gno in your App
@@ -46,25 +37,30 @@ To use Gno in your app, you can import the `useGno` hook from
 `@gno/hooks/use-gno`:
 
 ```ts
-import { useGno } from '@gno/hooks/use-gno';
-
-export default function App() {
-  const gno = useGno();
-
-  React.useEffect(() => {
-    gno.getRemote()
-    .then(res => console.log(res))
-    .catch(err => console.log(err));
-  }, []);
-
-...
-```
+import { GnoNativeProvider, useGnoNativeContext } from '@gnolang/gnonative';
 
-## Regenerate dependencies
+const config = {
+  remote: 'https://gno.berty.io',
+  chain_id: 'dev',
+};
 
-If you changed some Go code, or updated the React-Native dependencies, you have to build them again:
-```console
-cd $(go list -m -f '{{.Dir}}') # go to the root of the repo
-APP_NAME=MyApp make build.ios # for iOS
-APP_NAME=MyApp make build.android # for Android
+export default function App() {
+  return (
+    <GnoNativeProvider config={config}>
+      <InnerApp />
+    </GnoNativeProvider>
+  );
+}
+
+const InnerApp = () => {
+  const { gnonative } = useGnoNativeContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const remote = await gnonative.getRemote();
+        const chainId = await gnonative.getChainID();
+        console.log('Remote %s ChainId %s', remote, chainId);
+        ...
+}
 ```

examples/js/react-native/gnoboard/App.tsx

@@ -1,16 +1,21 @@
 // order of imports is important
 import 'react-native-polyfill-globals/auto';
 
-import { GnoNativeProvider } from '@gno/provider/gnonative/gnonative-provider';
+import { GnoNativeProvider } from '@gno/provider/gnonative-provider';
 import CustomRouter from '@gno/router/custom-router';
 
 // Polyfill async.Iterator. For some reason, the Babel presets and plugins are not doing the trick.
 // Code from here: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html#caveats
 (Symbol as any).asyncIterator = Symbol.asyncIterator || Symbol.for('Symbol.asyncIterator');
 
 function App() {
+  const defaultConfig = {
+    remote: 'gno.land:26657',
+    chain_id: 'portal-loop',
+  };
+
   return (
-    <GnoNativeProvider>
+    <GnoNativeProvider config={defaultConfig}>
       <CustomRouter />
     </GnoNativeProvider>
   );

examples/js/react-native/gnoboard/app.json

@@ -1,8 +1,8 @@
 {
   "expo": {
-    "name": "Gnoboard",
-    "slug": "Gnoboard",
+    "name": "gnoboard",
     "version": "1.0.0",
+    "slug": "gnoboard",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

examples/js/react-native/gnoboard/ios/Podfile

@@ -34,7 +34,7 @@ install! 'cocoapods',
 
 prepare_react_native_project!
 
-target 'Gnoboard' do
+target 'gnoboard' do
   use_expo_modules!
   config = use_native_modules!
 

examples/js/react-native/gnoboard/ios/Podfile.lock

@@ -1567,6 +1567,6 @@ SPEC CHECKSUMS:
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
 
-PODFILE CHECKSUM: c23220d69a4743259f4edbb814b43a3d63d83bb6
+PODFILE CHECKSUM: 4bc5bbe35d066cc8497f62a7178ffb47e1f91315
 
 COCOAPODS: 1.15.2