update: ICP Ninja docs (#3986)

* update evm rpc * icp ninja docs updates * icp ninja docs updates * icp ninja docs updates * icp ninja docs updates * icp ninja docs updates * Update docs/developer-docs/developer-tools/ide/icp-ninja.mdx Co-authored-by: Jennifer K. Tran <[email protected]> * Update docs/developer-docs/developer-tools/ide/icp-ninja.mdx Co-authored-by: Jennifer K. Tran <[email protected]> * fix merge --------- Co-authored-by: Jennifer K. Tran <[email protected]>
dfinity · Jan 28, 2025 · de59f3e · de59f3e
1 parent b506c07
commit de59f3e
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 116 deletions.
diff --git a/docs/developer-docs/developer-tools/ide/icp-ninja.mdx b/docs/developer-docs/developer-tools/ide/icp-ninja.mdx
@@ -9,26 +9,76 @@ import '/src/components/CenterImages/center.scss';
 
 <MarkdownChipRow labels={["Beginner", "IDE", "Tutorial"]} />
 
+[ICP Ninja](https://icp.ninja) is a web-based integrated development environment (IDE) for creating and deploying decentralized applications on the Internet Computer.
 
+ICP Ninja provides a gallery of example projects you can explore to learn about different application types, architectures, and use cases. Each project can be edited, and then deployed to the mainnet directly from your web browser. Once deployed, you can open the application's frontend in your browser or make calls directly to the backend through the [Candid UI](/docs/current/developer-docs/smart-contracts/candid/candid-concepts).
 
-[ICP Ninja](https://icp.ninja/) is a web-based code editor and deployment environment for ICP canister smart contracts. Users can choose from a gallery of example projects, then edit and deploy the project directly to ICP without downloading `dfx` or obtaining cycles. Projects will be live for 20 minutes unless redeployed. The deployment timer resets on each deployment.
+From the [ICP Ninja homepage](https://icp.ninja), select an example project to get started. You can filter the project gallery by project type, language, and skill level. Project variations are available for Motoko and Rust backend source code. Each ICP Ninja project uses the React framework for the application frontend.
 
-Currently, ICP Ninja supports writing and deploying Motoko backend canisters and React frontend canisters.
+The "Hello, World!" example is the most beginner-oriented project available. It resembles the default project template generated by the CLI tool [`dfx`](/docs/current/developer-docs/getting-started/install).
 
-## Limitations
+Once a project is open in the ICP Ninja code editor, you can:
 
-ICP Ninja is currently undergoing active development and currently implements a few limitations that should be noted. These limitations will be removed and changed as the platform develops.
+- Learn more about the project's functionality, features, and structure by reading the project's `README.md` file.
 
-- **Chain Fusion**: ICP Ninja currently does not support ICP's Chain Fusion features, such as signing and submitting transactions on other chains or making calls to the EVM RPC canister.
+- Revise the project's frontend by editing files in the `frontend` folder. Some files will be intentionally immutable.
+
+- Review or edit the backend code in the `backend/main.mo` (Motoko projects) or `backend/lib.rs` (Rust projects) file.
+
+- Add a new file to either the frontend or backend canister.
+
+- Ask the AI learning assistant questions about ICP or get help with your project's code.
+
+:::danger
+
+ICP Ninja is not designed to replace tooling like the [IC SDK](/docs/current/developer-docs/getting-started/install).
+
+:::
+
+
+Select the "Deploy" button. At the bottom of the screen, the "Build Logs" tab will show output that describes the project's deployment progress, such as:
+
+```
+→ Reserving canisters
+→ Building backend
+→ Generating backend declarations
+→ Building frontend
+...
+```
 
-- **System calls**: ICP Ninja projects cannot make calls that require cycles, including inter-canister calls or system API calls such as `ic0.call_cycles_add`, `ic0.call_cycles_add128`, `ic0.cycles_burn128`, `sign_with_ecdsa`, `sign_with_schnorr`, and `http_request`.
+Once deployed, you will receive two URLs:
 
-- **Supported packages**: Only certain npm packages are supported by ICP Ninja projects. The `package.json` file in each project contains the supported list. This list cannot be edited.
+```
+Backend canister smart contract:
+https://a4gq6-oaaaa-aaaab-qaa4q-cai.icp1.io/?id=ts425-saaaa-aaaab-qbksq-cai
+🥷🚀🎉 Frontend is available at:
+https://2drrs-wqaaa-aaaab-qblbq-cai.icp1.io
+```
 
-- **Project structure**: Projects created and deployed on ICP Ninja must follow a specific project structure. They can only contain two canisters, a backend and a frontend. The backend canister can only use a single source code file, and the frontend source code folder may only contain one subfolder, `frontend/src`.
+The **backend canister** URL will open the [Candid UI](/docs/current/developer-docs/smart-contracts/candid/candid-concepts) which can interact directly with the backend canister's methods. A **method** is a function exposed by the canister that can be called by a user, another canister, or the application's frontend.
 
-## Developing ICP Ninja projects with dfx
+The **frontend** URL will open the application's frontend user interface. To create this frontend, the project's React files (shown in the ICP Ninja code editor within the `frontend/` folder) have been compiled and deployed as an [asset canister](/docs/current/developer-docs/web-apps/application-frontends/overview).
+
+A preview of both the frontend UI and backend Candid interface will be shown on the right of the code editor.
+
+:::info
+This application will be live for 20 minutes. A timer will be displayed next to the 'Deploy' button that indicates how much longer the project's canisters will be available. After 20 minutes, they will expire, and the URLs will become invalid. The project code will still be accessible, and you can redeploy the application at any time to view it for another 20 minutes.
+:::
+
+To edit the project after it has been deployed, edit the code within the ICP Ninja code editor, then select "Redeploy." Redeploying the project will reset the 20-minute deployment timer and apply any changes you made to the project's files since the last deployment.
+
+## Download and develop locally
+
+To continue developing an ICP Ninja project or to add features to the project that exceed the IDE's current limitations, you can download the project's files and use `dfx`. From the ICP Ninja IDE, select the project's option menu, then select 'Download files'.
+
+Then, read the `BUILD.md` file included in the downloaded files. It contains further instructions for downloading and using `dfx` with your ICP Ninja project.
+
+## Limitations
+
+ICP Ninja is currently undergoing active development and has implemented a few limitations that should be noted. These limitations will be removed and changed as the platform develops.
+
+- **Chain Fusion**: ICP Ninja currently does not support ICP's Chain Fusion features, such as signing and submitting transactions on other chains or making calls to the EVM RPC canister.
 
-To continue developing an ICP Ninja project or to add features to the project that exceed the IDE's current limitations, you can download the project's files and use `dfx`. From the ICP Ninja IDE, select 'Download files' to download a `.zip` folder containing the project's code files.
+- **Supported packages**: Only certain npm packages are supported by ICP Ninja projects. The `package-lock.json` file in each project contains the supported list. This list cannot be edited.
 
-Then, read the `BUILD.md` file included in the downloaded files. It contains further instructions for downloading and using `dfx` with your ICP Ninja project.
+- **Project structure**: Projects created and deployed on ICP Ninja must follow a specific project structure. They can only contain at maximum two canisters, a backend and a frontend. The frontend source code folder may only contain one subfolder, `frontend/src`.
diff --git a/docs/developer-docs/getting-started/explore-examples.mdx b/docs/developer-docs/getting-started/explore-examples.mdx
diff --git a/docs/developer-docs/getting-started/write-smart-contracts.mdx b/docs/developer-docs/getting-started/write-smart-contracts.mdx
@@ -48,7 +48,7 @@ Before writing canister code, you need to create a project.
 <AdornedTabs>
 <TabItem value="create-new" label="Create a new project" default={true}>
 
-If you did not download an [ICP Ninja](/docs/current/developer-docs/getting-started/explore-examples) project, or if you would like to create a new project, run:
+If you did not download an [ICP Ninja](/docs/current/developer-docs/developer-tools/ide/icp-ninja) project, or if you would like to create a new project, run:
 
 ```
 dfx new PROJECT_NAME --type=motoko
@@ -64,7 +64,7 @@ Using [Rust](/docs/current/developer-docs/backend/rust/dev-env), [Azle](/docs/cu
 </TabItem>
 <TabItem value="use-ninja" label="Use an ICP Ninja project">
 
-Navigate into the directory where you downloaded your [ICP Ninja](/docs/current/developer-docs/getting-started/explore-examples) project using a command like:
+Navigate into the directory where you downloaded your [ICP Ninja](/docs/current/developer-docs/developer-tools/ide/icp-ninja) project using a command like:
 
 ```
 cd /path/to/icp/ninja/project
@@ -373,7 +373,7 @@ use ic_cdk::api::management_canister::main::raw_rand;
 // highlight-start
 // Import time duration for timers.
 use std::time::Duration;
-// highlight-end 
+// highlight-end
 
 thread_local! {
     static CURRENT_RANDOM_NUMBER: std::cell::RefCell<Nat> = std::cell::RefCell::new(Nat::from(0u8));
@@ -386,8 +386,8 @@ const N: Duration = Duration::from_secs(5);
 #[ic_cdk::init]
 async fn init() {
     let _timer_id = ic_cdk_timers::set_timer_interval(N, generate_new_number);
-}   
-// highlight-end 
+}
+// highlight-end
 
 // Define a method to generate a new random number.
 #[ic_cdk::update]
@@ -579,7 +579,7 @@ const N: Duration = Duration::from_secs(5);
 #[ic_cdk::init]
 async fn init() {
     let _timer_id = ic_cdk_timers::set_timer_interval(N, generate_new_number);
-}   
+}
 
 // Define a method to generate a new random number.
 #[ic_cdk::update]

diff --git a/docs/developer-docs/multi-chain/ethereum/evm-rpc/how-it-works.mdx b/docs/developer-docs/multi-chain/ethereum/evm-rpc/how-it-works.mdx
@@ -166,4 +166,4 @@ In many cases, these JSON-RPC methods work without canonicalization for HTTPS ou
 
 ## Next steps
 
-[Learn how to use the EVM RPC canister](evm-rpc-canister.mdx).
+[Learn how to use the EVM RPC canister](evm-rpc-canister.mdx).
diff --git a/docs/developer-docs/smart-contracts/development-workflow.mdx b/docs/developer-docs/smart-contracts/development-workflow.mdx
@@ -56,7 +56,7 @@ There are several different environments that can be used to write, deploy, and
 
 - [`dfx`](/docs/current/developer-docs/getting-started/install): `dfx` is the 'native' way to develop smart contracts. It is a command-line tool that enables canister creation and deployment on macOS and Linux systems. `dfx` is developed and maintained by DFINITY, with new features and improvements being released regularly.
 
-- [ICP Ninja](/docs/current/developer-docs/getting-started/explore-examples): A web IDE and education hub designed for deploying ICP applications. ICP Ninja provides a gallery of example projects you can choose from, then you can edit and deploy the project directly to ICP from your browser. It currently supports Motoko and Rust projects.
+- [ICP Ninja](/docs/current/developer-docs/developer-tools/ide/icp-ninja): A web IDE and education hub designed for deploying ICP applications. ICP Ninja provides a gallery of example projects you can choose from, then you can edit and deploy the project directly to ICP from your browser. It currently supports Motoko and Rust projects.
 
 - [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/install): `dfx` does not natively support Windows operating systems. To use `dfx` locally on a Windows machine, you can install the Windows Subsystem for Linux. Since this workflow isn't the primary development testing environment that `dfx` is designed for, there may be bugs or errors when using `dfx` on WSL. [Learn more about common WSL errors and troubleshooting](/docs/current/developer-docs/getting-started/wsl-troubleshoot).
 

diff --git a/plugins/utils/redirects.js b/plugins/utils/redirects.js
@@ -661,6 +661,7 @@ const redirects = `
   /docs/current/developer-docs/build/cdks/motoko-dfinity/* /docs/current/motoko/main/getting-started/motoko-introduction
   /docs/current/developer-docs/web-apps/application-frontends/add-stylesheet /docs/current/developer-docs/web-apps/application-frontends/overview
   /docs/current/developer-docs/web-apps/application-frontends/default-frontend /docs/current/developer-docs/web-apps/application-frontends/overview
+  /docs/current/developer-docs/getting-started/explore-examples /docs/current/developer-docs/developer-tools/ide/icp-ninja
   `
   .split(/[\r\n]+/)
   .map((line) => line.trim().replace(/^#.*$/, "").trim())

diff --git a/sidebars.js b/sidebars.js
@@ -28,11 +28,6 @@ const sidebars = {
   type: "category",
   label: "Essentials",
   items: [
-    {
-      type: "doc",
-      label: "Explore examples",
-      id: "developer-docs/getting-started/explore-examples",
-    },
     {
       type: "doc",
       label: "Installing developer tools",

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -24,7 +24,7 @@ const languagesTiles: TileDescriptor[] = [
     ),
     action: (
       <Link
-        href="/docs/current/developer-docs/getting-started/explore-examples"
+        href="/docs/current/developer-docs/developer-tools/ide/icp-ninja"
         className="button button-ghost bg-white/90 rounded-2xl text-infinite"
         title="Get started with ICP Ninja"
       >
Original file line number	Diff line number	Diff line change
Expand Up		@@ -166,4 +166,4 @@ In many cases, these JSON-RPC methods work without canonicalization for HTTPS ou

		## Next steps

		[Learn how to use the EVM RPC canister](evm-rpc-canister.mdx).
		[Learn how to use the EVM RPC canister](evm-rpc-canister.mdx).