Implement tutorials page

packages/backend/src/Application.ts

@@ -65,6 +65,7 @@ import { LiveL2TransactionDownloader } from './core/sync/LiveL2TransactionDownlo
 import { SyncScheduler } from './core/sync/SyncScheduler'
 import { TransactionStatusService } from './core/TransactionStatusService'
 import { TransactionValidator } from './core/TransactionValidator'
+import { TutorialService } from './core/TutorialService'
 import { UserService } from './core/UserService'
 import { AssetRepository } from './peripherals/database/AssetRepository'
 import { BlockRepository } from './peripherals/database/BlockRepository'
@@ -206,6 +207,7 @@ export class Application {
       userTransactionRepository,
       logger
     )
+    const tutorialService = new TutorialService()
 
     const userRegistrationCollector = new UserRegistrationCollector(
       ethereumClient,
@@ -592,6 +594,7 @@ export class Application {
       pageContextService,
       assetDetailsService,
       forcedTradeOfferViewService,
+      tutorialService,
       userTransactionRepository,
       forcedTradeOfferRepository,
       l2TransactionRepository,
@@ -680,7 +683,10 @@ export class Application {
       config.starkex.contracts.perpetual
     )
 
-    const tutorialController = new TutorialController(pageContextService)
+    const tutorialController = new TutorialController(
+      pageContextService,
+      tutorialService
+    )
 
     const apiServer = new ApiServer(config.port, logger, {
       routers: [

packages/backend/src/api/controllers/HomeController.ts

@@ -11,6 +11,7 @@ import { L2TransactionTypesToExclude } from '../../config/starkex/StarkexConfig'
 import { AssetDetailsService } from '../../core/AssetDetailsService'
 import { ForcedTradeOfferViewService } from '../../core/ForcedTradeOfferViewService'
 import { PageContextService } from '../../core/PageContextService'
+import { TutorialService } from '../../core/TutorialService'
 import { PaginationOptions } from '../../model/PaginationOptions'
 import { ForcedTradeOfferRepository } from '../../peripherals/database/ForcedTradeOfferRepository'
 import { L2TransactionRepository } from '../../peripherals/database/L2TransactionRepository'
@@ -38,6 +39,7 @@ export class HomeController {
     private readonly pageContextService: PageContextService,
     private readonly assetDetailsService: AssetDetailsService,
     private readonly forcedTradeOfferViewService: ForcedTradeOfferViewService,
+    private readonly tutorialService: TutorialService,
     private readonly userTransactionRepository: UserTransactionRepository,
     private readonly forcedTradeOfferRepository: ForcedTradeOfferRepository,
     private readonly l2TransactionRepository: L2TransactionRepository,
@@ -96,6 +98,8 @@ export class HomeController {
         limit: stateUpdatesLimit,
       })
 
+    const tutorials = this.tutorialService.getTutorials()
+
     const assetDetailsMap = await this.assetDetailsService.getAssetDetailsMap({
       userTransactions: forcedUserTransactions,
     })
@@ -132,7 +136,7 @@ export class HomeController {
 
     const content = renderHomePage({
       context,
-      tutorials: [], // explicitly no tutorials
+      tutorials,
       l2Transactions: l2Transactions.map(l2TransactionToEntry),
       statistics,
       stateUpdates: stateUpdateEntries,

packages/backend/src/api/controllers/TutorialController.ts

@@ -1,12 +1,38 @@
-import { renderTutorialPage } from '@explorer/frontend'
+import { renderTutorialPage, renderTutorialsPage } from '@explorer/frontend'
 import { UserDetails } from '@explorer/shared'
 
 import { PageContextService } from '../../core/PageContextService'
+import { TutorialService } from '../../core/TutorialService'
 import { getHtmlFromMarkdown } from '../../utils/markdown/getHtmlFromMarkdown'
 import { ControllerResult } from './ControllerResult'
 
 export class TutorialController {
-  constructor(private readonly pageContextService: PageContextService) {}
+  constructor(
+    private readonly pageContextService: PageContextService,
+    private readonly tutorialsService: TutorialService
+  ) {}
+
+  async getTutorialsPage(
+    givenUser: Partial<UserDetails>
+  ): Promise<ControllerResult> {
+    const context = await this.pageContextService.getPageContext(givenUser)
+    const tutorials = this.tutorialsService.getTutorials()
+
+    if (!tutorials) {
+      return {
+        type: 'not found',
+        message: 'There are no tutorials available',
+      }
+    }
+
+    return {
+      type: 'success',
+      content: renderTutorialsPage({
+        context,
+        tutorials,
+      }),
+    }
+  }
 
   async getTutorialPage(
     givenUser: Partial<UserDetails>,

packages/backend/src/api/routers/FrontendRouter.ts

@@ -473,6 +473,11 @@ export function createFrontendRouter(
       )
     )
   }
+  router.get('/tutorials', async (ctx) => {
+    const givenUser = getGivenUser(ctx)
+    const result = await tutorialController.getTutorialsPage(givenUser)
+    applyControllerResult(ctx, result)
+  })
 
   router.get(
     '/tutorials/:slug',

packages/backend/src/content/tutorials/example.md

@@ -1,112 +0,0 @@
-<!-- THIS FILE SHOULD BE DELETED AS SOON AS WE ADD REAL TUTORIALS -->
-
-# h1 Heading
-
-## h2 Heading
-
-### h3 Heading
-
-#### h4 Heading
-
-##### h5 Heading
-
-###### h6 Heading
-
-## Horizontal Rules
-
----
-
----
-
----
-
-## Emphasis
-
-**This is bold text**
-
-**This is bold text**
-
-_This is italic text_
-
-_This is italic text_
-
-~~Strikethrough~~
-
-## Blockquotes
-
-> Blockquotes can also be nested...
->
-> > ...by using additional greater-than signs right next to each other...
-> >
-> > > ...or with spaces between arrows.
-
-## Lists
-
-Unordered
-
-- Create a list by starting a line with `+`, `-`, or `*`
-- Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    - Ac tristique libero volutpat at
-    * Facilisis in pretium nisl aliquet
-    - Nulla volutpat aliquam velit
-- Very easy!
-
-Ordered
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-
-4. You can use sequential numbers...
-5. ...or keep all the numbers as `1.`
-
-Start numbering with offset:
-
-57. foo
-1. bar
-
-## Code
-
-Inline `code`
-
-Indented code
-
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-## Tables
-
-| Option | Description                                                               |
-| ------ | ------------------------------------------------------------------------- |
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default.    |
-| ext    | extension to be used for dest files.                                      |
-
-Right aligned columns
-
-| Option |                                                               Description |
-| -----: | ------------------------------------------------------------------------: |
-|   data | path to data files to supply the data that will be passed into templates. |
-| engine |    engine to be used for processing templates. Handlebars is the default. |
-|    ext |                                      extension to be used for dest files. |
-
-## Links
-
-[link text](http://dev.nodeca.com)
-
-[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
-
-Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
-
-## Images
-
-![Minion](https://octodex.github.com/images/minion.png)

packages/backend/src/core/TutorialService.ts

@@ -0,0 +1,19 @@
+import { HomeTutorialEntry } from '@explorer/frontend'
+import fs from 'fs'
+
+export class TutorialService {
+  constructor() {}
+
+  getTutorials(): HomeTutorialEntry[] {
+    const files = fs.readdirSync('src/content/tutorials')
+
+    return files.map((filename) => {
+      const filenameWithoutExt = filename.replace('.md', '')
+      return {
+        title: filenameWithoutExt.replace('-', ' '),
+        imageUrl: `/images/${filenameWithoutExt}.jpg`,
+        slug: filenameWithoutExt.toLowerCase(),
+      }
+    })
+  }
+}

packages/frontend/src/preview/data/tutorial.ts

@@ -1,3 +1,5 @@
+import { HomeTutorialEntry } from '../../view'
+
 /* eslint-disable no-useless-escape */
 export const tutorial = `<h1 id="h1-heading-8"><a class="Heading-Title" href="#h1-heading-8">h1 Heading</a></h1>
 <h2 id="h2-heading"><a class="Heading-Title" href="#h2-heading">h2 Heading</a></h2>
@@ -132,3 +134,26 @@ line 3 of code
 <h2 id="images"><a class="Heading-Title" href="#images">Images</a></h2>
 <p><img src="https://octodex.github.com/images/minion.png" alt="Minion">
 `
+
+export const tutorials: HomeTutorialEntry[] = [
+  {
+    title: 'Learn how to use StarkEx Explorer efficiently',
+    imageUrl: '/images/tutorial.jpg',
+    slug: 'learn-how-to-use-starkex-explorer-efficiently',
+  },
+  {
+    title: 'All about forced transactions',
+    imageUrl: '/images/tutorial.jpg',
+    slug: 'all-about-forced-transactions',
+  },
+  {
+    title: 'Stark key registration',
+    imageUrl: '/images/tutorial.jpg',
+    slug: 'stark-key-registration',
+  },
+  {
+    title: 'Escape hatches explained',
+    imageUrl: '/images/tutorial.jpg',
+    slug: 'escape-hatch-explained',
+  },
+]

packages/frontend/src/preview/routes.ts

@@ -48,6 +48,7 @@ import { renderFreezeRequestActionPage } from '../view/pages/forced-actions/Free
 import { renderPerpetualL2TransactionDetailsPage } from '../view/pages/l2-transaction/PerpetualL2TransactionDetailsPage'
 import { renderStateUpdateL2TransactionsPage } from '../view/pages/state-update/StateUpdateL2TransactionsPage'
 import { renderInitializeEscapePage } from '../view/pages/transaction/InitializeEscapePage'
+import { renderTutorialsPage } from '../view/pages/tutorial/TutorialsPage'
 import { renderUserL2TransactionsPage } from '../view/pages/user/UserL2TransactionsPage'
 import { amountBucket, assetBucket } from './data/buckets'
 import { fakeCollateralAsset } from './data/collateralAsset'
@@ -85,7 +86,7 @@ import {
   randomRecipient,
   userParty,
 } from './data/transactions'
-import { tutorial } from './data/tutorial'
+import { tutorial, tutorials } from './data/tutorial'
 import {
   randomEscapableEntry,
   randomUserAssetEntry,
@@ -131,6 +132,7 @@ const routes: Route[] = [
 
       ctx.body = renderHomePage({
         context,
+        tutorials: tutorials,
         stateUpdates: repeat(10, randomHomeStateUpdateEntry),
         forcedTransactions: repeat(4, randomHomeForcedTransactionEntry),
         l2Transactions: [],
@@ -155,6 +157,7 @@ const routes: Route[] = [
 
       ctx.body = renderHomePage({
         context,
+        tutorials: tutorials,
         stateUpdates: repeat(22, randomHomeStateUpdateEntry),
         l2Transactions: repeat(8, randomPerpetualL2TransactionEntry),
         forcedTransactions: repeat(4, randomHomeForcedTransactionEntry),
@@ -1062,6 +1065,7 @@ const routes: Route[] = [
 
       ctx.body = renderHomePage({
         context,
+        tutorials: tutorials,
         stateUpdates: repeat(6, randomHomeStateUpdateEntry),
         forcedTransactions: repeat(6, randomHomeForcedTransactionEntry),
         l2Transactions: [],
@@ -1105,6 +1109,7 @@ const routes: Route[] = [
         context,
         stateUpdates: repeat(6, randomHomeStateUpdateEntry),
         forcedTransactions: repeat(6, randomHomeForcedTransactionEntry),
+        tutorials: tutorials,
         l2Transactions: [],
         statistics: {
           stateUpdateCount: 6315,
@@ -1883,7 +1888,19 @@ const routes: Route[] = [
   // #endregion
   // #region Tutorial
   {
-    path: '/tutorials/example',
+    path: '/tutorials',
+    description: 'List of all tutorials',
+    render: (ctx) => {
+      const context = getPerpetualPageContext(ctx)
+      ctx.body = renderTutorialsPage({
+        context,
+        tutorials: tutorials,
+      })
+    },
+  },
+  {
+    link: '/tutorials/example',
+    path: '/tutorials/:slug',
     description: 'Tutorial page',
     render: (ctx) => {
       const context = getPerpetualPageContext(ctx)