implemented frontend for interactive tutorials

continuation fixes fixes added tutorial text ашчуы fixes fixes fixes final fixes addressed latest comments fixes fixes lint fixes fixes addressed latest comments feature flag fixes fixes fixes
NilFoundation · Mar 4, 2025 · 449ae9e · 449ae9e
1 parent 75ae7e4
commit 449ae9e
Show file tree

Hide file tree

Showing 31 changed files with 1,387 additions and 1,254 deletions.
diff --git a/explorer_backend/routes/tutorials.ts b/explorer_backend/routes/tutorials.ts
diff --git a/explorer_backend/services/tutorials_db.ts b/explorer_backend/services/tutorials_db.ts
diff --git a/explorer_backend/start.ts b/explorer_backend/start.ts
@@ -7,7 +7,6 @@ import { config } from "./config.ts";
 import { nodeHTTPRequestHandler } from "@trpc/server/adapters/node-http";
 import { appRouter } from "./routes/index.ts";
 import { startCacheInterval } from "./services/cache.ts";
-import { generateTutorials } from "./services/tutorials_db.ts";
 
 const app = new App({
   noMatchHandler: (_, res) => void res.send("<h1>404 Not Found</h1>"),

diff --git a/explorer_backend/tutorials/spec.json b/explorer_backend/tutorials/spec.json
diff --git a/explorer_frontend/.env b/explorer_frontend/.env
@@ -1,2 +1,3 @@
 VITE_APP_TITLE="=nil; zkSharding"
-VITE_APP_DESCRIPTION="zkSharding for Ethereum"
+VITE_APP_DESCRIPTION="zkSharding for Ethereum"
+VITE_IS_TUTORIAL_ROUTE_ENABLED="false"
diff --git a/explorer_frontend/package.json b/explorer_frontend/package.json
@@ -56,6 +56,7 @@
     "react-error-boundary": "^4.0.11",
     "react-helmet": "^6.1.0",
     "react-hotkeys-hook": "^4.5.1",
+    "react-markdown": "^10.0.0",
     "react-resizable-panels": "^2.1.3",
     "react-swipeable": "^7.0.1",
     "styletron-engine-atomic": "^1.5.0",

diff --git a/explorer_frontend/src/features/code/Code.tsx b/explorer_frontend/src/features/code/Code.tsx
@@ -8,24 +8,29 @@ import {
   compile,
   compileCodeFx,
   fetchCodeSnippetFx,
+  сlickOnContractsButton,
+  сlickOnLogButton,
 } from "./model";
 import "./init";
 import { type Diagnostic, linter } from "@codemirror/lint";
 import type { EditorView } from "@codemirror/view";
 import { useStyletron } from "baseui";
 import { expandProperty } from "inline-style-expand-shorthand";
 import { memo, useMemo } from "react";
-import { LayoutComponent, setActiveComponent } from "../../pages/playground/model";
 import { fetchSolidityCompiler } from "../../services/compiler";
 import { getMobileStyles } from "../../styleHelpers";
 import { useMobile } from "../shared";
 import { SolidityCodeField } from "../shared/components/SolidityCodeField";
 import { CodeToolbar } from "./code-toolbar/CodeToolbar";
 import { useCompileButton } from "./hooks/useCompileButton";
 
+interface CodeProps {
+  additionalProp: JSX.Element | null;
+}
+
 const MemoizedCodeToolbar = memo(CodeToolbar);
 
-export const Code = () => {
+export const Code = ({ additionalProp }: CodeProps) => {
   const [isMobile] = useMobile();
   const [code, isDownloading, errors, fetchingCodeSnippet, compiling, warnings] = useUnit([
     $code,
@@ -78,7 +83,7 @@ export const Code = () => {
             height: "100%",
             ...getMobileStyles({
               width: "calc(100vw - 32px)",
-              height: "calc(100vh - 96px)",
+              height: "auto",
             }),
           },
         },
@@ -89,7 +94,7 @@ export const Code = () => {
             position: "relative",
             height: "100%",
             marginBottom: 0,
-            paddinBottom: "16px",
+            paddingBottom: "16px",
             ...getMobileStyles({
               gap: "8px",
             }),
@@ -229,7 +234,9 @@ export const Code = () => {
               }}
               kind={BUTTON_KIND.secondary}
               size={BUTTON_SIZE.large}
-              onClick={() => setActiveComponent(LayoutComponent.Logs)}
+              onClick={() => {
+                сlickOnLogButton();
+              }}
             >
               Logs
             </Button>
@@ -243,10 +250,13 @@ export const Code = () => {
               }}
               kind={BUTTON_KIND.secondary}
               size={BUTTON_SIZE.large}
-              onClick={() => setActiveComponent(LayoutComponent.Contracts)}
+              onClick={() => {
+                сlickOnContractsButton();
+              }}
             >
               Contracts
             </Button>
+            {isMobile && additionalProp && additionalProp}
           </div>
         )}
       </div>

diff --git a/explorer_frontend/src/features/code/init.ts b/explorer_frontend/src/features/code/init.ts
@@ -20,7 +20,6 @@ import {
   compileCodeFx,
   fetchCodeSnippetEvent,
   fetchCodeSnippetFx,
-  loadedPlaygroundPage,
   setCodeSnippetEvent,
   setCodeSnippetFx,
   updateRecentProjects,
@@ -182,12 +181,6 @@ sample({
   target: changeCode,
 });
 
-sample({
-  clock: loadedPlaygroundPage,
-  filter: $code.map((code) => !(code.trim().length === 0)),
-  target: compile,
-});
-
 $codeSnippetHash.on(fetchCodeSnippetFx.doneData, () => null);
 
 redirect({

diff --git a/explorer_frontend/src/features/code/model.ts b/explorer_frontend/src/features/code/model.ts
@@ -54,6 +54,8 @@ export const fetchCodeSnippetEvent = codeDomain.createEvent<string>();
 export const setCodeSnippetFx = codeDomain.createEffect<string, string>();
 export const fetchCodeSnippetFx = codeDomain.createEffect<string, string>();
 
+export const changeIsTutorial = codeDomain.createEvent<boolean>();
+
 setCodeSnippetFx.use((code) => {
   return setCodeSnippet(code);
 });
@@ -64,6 +66,16 @@ fetchCodeSnippetFx.use((hash) => {
 
 export const loadedPlaygroundPage = codeDomain.createEvent();
 
+export const loadedTutorialPage = codeDomain.createEvent();
+
+export const сlickOnLogButton = codeDomain.createEvent();
+
+export const сlickOnContractsButton = codeDomain.createEvent();
+
+export const сlickOnBackButton = codeDomain.createEvent();
+
+export const сlickOnTutorialButton = codeDomain.createEvent();
+
 export const $recentProjects = codeDomain.createStore<Record<string, string>>({});
 
 export const updateRecentProjects = codeDomain.createEvent();
diff --git a/explorer_frontend/src/features/contracts/components/Contracts/Contracts.tsx b/explorer_frontend/src/features/contracts/components/Contracts/Contracts.tsx
@@ -13,9 +13,8 @@ import {
 } from "@nilfoundation/ui-kit";
 import { memo } from "react";
 import { useStyletron } from "styletron-react";
-import { LayoutComponent, setActiveComponent } from "../../../../pages/playground/model";
 import { $smartAccount } from "../../../account-connector/model";
-import { compileCodeFx } from "../../../code/model";
+import { compileCodeFx, сlickOnBackButton } from "../../../code/model";
 import { $rpcIsHealthy } from "../../../healthcheck/model";
 import { useMobile } from "../../../shared";
 import { Contract } from "./Contract";
@@ -67,7 +66,7 @@ export const Contracts = () => {
             }}
             kind={BUTTON_KIND.secondary}
             size={BUTTON_SIZE.compact}
-            onClick={() => setActiveComponent(LayoutComponent.Code)}
+            onClick={() => сlickOnBackButton()}
           >
             <ArrowUpIcon
               size={12}

diff --git a/explorer_frontend/src/features/logs/components/Logs.tsx b/explorer_frontend/src/features/logs/components/Logs.tsx
@@ -14,8 +14,8 @@ import { useUnit } from "effector-react";
 import "../init";
 import { useStyletron } from "baseui";
 import { useCallback, useEffect, useRef } from "react";
-import { LayoutComponent, setActiveComponent } from "../../../pages/playground/model";
 import { getMobileStyles } from "../../../styleHelpers";
+import { сlickOnBackButton } from "../../code/model";
 import { ClearIcon, useMobile } from "../../shared";
 import { $logs, clearLogs } from "../model";
 import { LogsGreeting } from "./LogsGreeting";
@@ -70,7 +70,7 @@ export const Logs = () => {
             }}
             kind={BUTTON_KIND.secondary}
             size={BUTTON_SIZE.compact}
-            onClick={() => setActiveComponent(LayoutComponent.Code)}
+            onClick={() => сlickOnBackButton()}
           >
             <ArrowUpIcon
               size={12}

diff --git a/explorer_frontend/src/features/routing/components/RoutesView.tsx b/explorer_frontend/src/features/routing/components/RoutesView.tsx
@@ -5,11 +5,13 @@ import { BlockPage } from "../../../pages/block";
 import { ExplorerPage } from "../../../pages/explorer";
 import { PlaygroundPage } from "../../../pages/playground";
 import { TransactionPage } from "../../../pages/transaction";
+import { TutorialPage } from "../../../pages/tutorials/TutorialPage";
 import { addressRoute, addressTransactionsRoute } from "../routes/addressRoute";
 import { blockDetailsRoute, blockRoute } from "../routes/blockRoute";
 import { explorerRoute } from "../routes/explorerRoute";
 import { playgroundRoute, playgroundWithHashRoute } from "../routes/playgroundRoute";
 import { transactionRoute } from "../routes/transactionRoute";
+import { tutorialWithStageRoute } from "../routes/tutorialRoute";
 
 export const RoutesView = createRoutesView({
   routes: [
@@ -33,6 +35,10 @@ export const RoutesView = createRoutesView({
       route: playgroundWithHashRoute,
       view: PlaygroundPage,
     },
+    {
+      route: tutorialWithStageRoute,
+      view: TutorialPage,
+    },
   ],
   otherwise() {
     return (

diff --git a/explorer_frontend/src/features/routing/index.ts b/explorer_frontend/src/features/routing/index.ts
@@ -7,3 +7,4 @@ export * from "./routes/explorerRoute";
 export * from "./routes/playgroundRoute";
 export * from "./routes/transactionRoute";
 export * from "./routes/blockRoute";
+export * from "./routes/tutorialRoute";
diff --git a/explorer_frontend/src/features/routing/routes/routes.ts b/explorer_frontend/src/features/routing/routes/routes.ts
@@ -5,6 +5,8 @@ import { blockDetailsRoute, blockRoute } from "./blockRoute";
 import { explorerRoute } from "./explorerRoute";
 import { playgroundRoute, playgroundWithHashRoute } from "./playgroundRoute";
 import { transactionRoute } from "./transactionRoute";
+import { tutorialWithStageRoute } from "./tutorialRoute";
+const isTutorialEnabled = import.meta.env.VITE_IS_TUTORIAL_ROUTE_ENABLED === "true";
 
 export const notFoundRoute = createRoute();
 
@@ -41,6 +43,14 @@ export const routes = [
     path: "/playground/:snippetHash",
     route: playgroundWithHashRoute,
   },
+  ...(isTutorialEnabled
+    ? [
+        {
+          path: "/tutorial/:stage",
+          route: tutorialWithStageRoute,
+        },
+      ]
+    : []),
 ];
 
 export const router = createHistoryRouter({

diff --git a/explorer_frontend/src/features/routing/routes/tutorialRoute.ts b/explorer_frontend/src/features/routing/routes/tutorialRoute.ts
@@ -0,0 +1,3 @@
+import { createRoute } from "../utils/createRoute";
+
+export const tutorialWithStageRoute = createRoute<{ stage: string }>();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createRoute } from "../utils/createRoute";

		export const tutorialWithStageRoute = createRoute<{ stage: string }>();