ICVR - Canister

This is a template for deploying immersive experiences on the Internet Computer, configured for use with the ICVR framework.

This project connects Unity's C# functionality (user interaction) to React and TypeScript, allowing you to pass signed messages from Unity to the Internet Computer. This project aims to be widely compatible, facilitating many flavours of immersive experience on the Internet Computer. It is built with:

• TypeScript everywhere, but with JavaScript compatibility.
• Node.js: Easily add JavaScript packages to extend functionality.
• Rust: Add crates with Cargo.
• Motoko: Connects to the mops package manager, for Web 3.0 functionality.

This repo also uses Internet Identity, a WebAuthn solution configured for the Internet Computer. The implementation provides a secure context to pass messages to the blockchain, enabling crypto transactions and secure messaging, from inside Unity.

  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <UnityProvider>
          <App />
        </UnityProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>

📦 Creating a New Project

Make sure that Node.js >= 20 and dfx >= 0.14 are installed on your system.

Beginning with a new, empty project directory:

Import the project and start dfx with the following commands:

npx degit willguest/icvr-react # Download this starter project
dfx start --clean --background # Run dfx in the background

Add the Unity build:

• Currently only supports uncompressed builds.
  Support for gzip will be added soon.

• Make sure the Unity build is called unity_build.
  If another name is used, update UnityInterface.tsx.

• Copy the files from the 'Build' folder into src/assets/build.

Enter the following commands, which reference NPM scripts:

npm run setup # Install packages, deploy canisters, and generate type bindings
npm run build # Compiles TypeScript files and builds the webpack.
npm run start # Deploys local dependency canisters and runs the front- and back-end in parallel.

You can then open a new browser window at the location prompted by the terminal. http://127.0.0.1:4943/?canisterId=<local-canister-id>

When ready, run dfx deploy --network ic to deploy your application to the Internet Computer.

🛠️ Technology Stack

• ICVR: Interactive, immersive Unity toolkit for the World Computer.
• React: a component-based UI library
• TypeScript: JavaScript extended with syntax for types
• Prettier: code formatting for a wide range of supported languages
• Motoko: a safe and simple programming language for the Internet Computer
• Mops: an on-chain community package manager for Motoko
• mo-dev: a live reload development server for Motoko

📚 Documentation

• ICVR documentation
• React quick start guide
• Internet Computer docs
• dfx.json reference schema
• Motoko developer docs
• Mops usage instructions

💡 Tips and Tricks

• Customize your project's code style by editing the .prettierrc file and then running npm run format.
• Reduce the latency of update calls by passing the --emulator flag to dfx start.
• Install a Motoko package by running npx ic-mops add <package-name>. Here is a list of available packages.
• Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

💛 Sponsorship

The framework is open-source and was initially funded by non-dilutive grants from the Internet Computer. I welcome sponsorship in all forms and look forward to scaling this project as more resources become available. Please visit my sponsorship page for more information.

🙏 Acknowledgements

Thanks to DFINTY for building out the World Computer.

Thanks to Ryan Vandersmith for the original vite-react-motoko template, on which this is based.