Merge pull request #155 from ChainSafe/v3-updates

Explaining how devs themselves can use our SDK with their custom webGL template and with react-unity-webgl

Author: kantagara

dictionary.txt

@@ -187,6 +187,7 @@ Mainnet
 mainnets
 mainnetgoerli
 metamask
+Majiick
 MetaMask
 Metamask
 Multicall
@@ -231,6 +232,7 @@ RPC
 RPCs
 Reown
 reown
+react-unity-webgl
 SampleLoginMetamask
 SampleMain
 scalable
@@ -325,6 +327,7 @@ web3auth
 Web3GL
 web3unity
 Web3Unity
+web3UnityInstance
 web3authwallet
 web3wallet
 Web3Initialized

docs/v2.6/18_faq.md

@@ -140,3 +140,66 @@ IndexOutOfRangeException: Index was outside the bounds of the array.
 ```
 
 When building to WebGL you could run into this issue on some Unity versions. To fix this, simply open your project's _Player Settings_ then navigate to _Resolution and Presentation_ and pick **Web3.Unity** under _WebGL Template_. Even if it was already selected your project should be able to build to WebGL now.
+
+### I cannot use your WebGL template to build for WebGL since I already have my own template with other dependencies
+No problem! Our WebGL template primarily ensures that the web3UnityInstance is assigned after the Unity instance is fully loaded and injected into the HTML. Here's how this is typically handled:
+```js
+script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          web3UnityInstance = unityInstance;
+          loadingBar.style.display = "none";
+          fullscreenButton.onclick = () => {
+            unityInstance.SetFullscreen(1);
+          };
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+```
+This assignment is critical for web3.unity to function properly. Regardless of how or where you are initializing the Unity instance, ensure that the web3UnityInstance is explicitly assigned to your Unity instance during the initialization process.
+
+
+ <details>
+  <summary>Example how to do it with react-unity-webgl</summary>
+
+  In react-unity-webgl add this: 
+  ```js
+  const { unityProvider, sendMessage, isLoaded, loadingProgression } =
+      useUnityContext({
+          loaderUrl: 'build/build.loader.js',
+          dataUrl: 'build/build.data',
+          frameworkUrl: 'build/build.framework.js',
+          codeUrl: 'build/build.wasm'
+      })
+
+     useEffect(() => {
+     window.web3UnityInstance = {
+          SendMessage: (gameObjectName, methodName, parameter) => {
+               if (!gameObjectName || !methodName) {
+                    console.error(
+                         "SendMessage requires at least 'gameObjectName' and 'methodName'."
+                    )
+                    return
+               }
+
+               // Call the sendMessage function
+               sendMessage(gameObjectName, methodName, parameter)
+
+               // Log for debugging
+               console.log(
+                    'SendMessage called with:',
+                    gameObjectName,
+                    methodName,
+                    parameter
+               )
+          }
+     }
+     }, [isLoaded])
+
+  ```
+   Big thanks to Majiick for this solution.
+
+</details> 
+