+
+ )
+}
+
+export default HomePage
diff --git a/apps/learneth/src/pages/Logo/index.tsx b/apps/learneth/src/pages/Logo/index.tsx
new file mode 100644
index 0000000000..6fcb816633
--- /dev/null
+++ b/apps/learneth/src/pages/Logo/index.tsx
@@ -0,0 +1,20 @@
+import React, {useEffect} from 'react'
+import {useAppDispatch} from '../../redux/hooks'
+
+const LogoPage: React.FC = () => {
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch({type: 'remixide/connect'})
+ }, [])
+
+ return (
+
+ {Object.keys(selectedRepo.group).map((level) => (
+
+ )}
+
+
+ ))}
+ {levelMap[level]}:
+ {selectedRepo.group[level].map((item: any) => (
+
+
+ ))}
+
+ {
+ handleClick(item.id)
+ }}
+ >
+
+
+ {
+ handleClick(item.id)
+ }}
+ >
+ {selectedRepo.entities[item.id].name}
+
+
+
+
+
+
+ {levelMap[level] &&
+
+ {levelMap[level]}
} + + {selectedRepo.entities[item.id].metadata.data.tags?.map((tag: string) => ( ++ {tag} +
+ ))} + + {selectedRepo.entities[item.id].steps &&{selectedRepo.entities[item.id].steps.length} step(s)
}
+
+
+
+ {selectedRepo.entities[item.id].description?.content}
+
+
+
+
+
+
+ )
+}
+
+export default LogoPage
diff --git a/apps/learneth/src/pages/StepDetail/index.scss b/apps/learneth/src/pages/StepDetail/index.scss
new file mode 100644
index 0000000000..5b59a87727
--- /dev/null
+++ b/apps/learneth/src/pages/StepDetail/index.scss
@@ -0,0 +1,54 @@
+step-view {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+}
+
+header, footer {
+ padding: 10px 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.errorloadingspacer{
+ padding-top: 44px;
+
+}
+
+.title{
+ pointer-events: none;
+}
+
+h1 {
+ text-align: left;
+ font-size: 1.2rem !important;
+ word-break: break-word;
+}
+
+markdown {
+ display: block;
+ flex: 1;
+ overflow: auto;
+ padding: 0px;
+
+ h1 {
+ font-size: 1.2rem !important;
+ }
+
+ h2 {
+ font-size: 1rem;
+ }
+
+ h3 {
+ font-size: 1rem;
+ }
+
+ h4 {
+ font-size: 1rem;
+ }
+}
+
+
diff --git a/apps/learneth/src/pages/StepDetail/index.tsx b/apps/learneth/src/pages/StepDetail/index.tsx
new file mode 100644
index 0000000000..2df3b9efe6
--- /dev/null
+++ b/apps/learneth/src/pages/StepDetail/index.tsx
@@ -0,0 +1,228 @@
+import React, {useEffect} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import BackButton from '../../components/BackButton'
+import {useAppSelector, useAppDispatch} from '../../redux/hooks'
+import './index.scss'
+
+function StepDetailPage() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const dispatch = useAppDispatch()
+ const queryParams = new URLSearchParams(location.search)
+ const id = queryParams.get('id') as string
+ const stepId = Number(queryParams.get('stepId'))
+ const {
+ workshop: {detail, selectedId},
+ remixide: {errorLoadingFile, errors, success},
+ } = useAppSelector((state: any) => state)
+ const entity = detail[selectedId].entities[id]
+ const steps = entity.steps
+ const step = steps[stepId]
+ console.log(step)
+
+ useEffect(() => {
+ dispatch({
+ type: 'remixide/displayFile',
+ payload: step,
+ })
+ dispatch({
+ type: 'remixide/save',
+ payload: {errors: [], success: false},
+ })
+ window.scrollTo(0, 0)
+ }, [step])
+
+ useEffect(() => {
+ if (errors.length > 0 || success) {
+ window.scrollTo(0, document.documentElement.scrollHeight)
+ }
+ }, [errors, success])
+
+ return (
+ <>
+
+ 
+
+
+
+
+
+ {errorLoadingFile ? (
+ <>
+
+
+
+ {step.name}
+ + + + ) : ( + <> + +{step.name}
+ + )} +
+ {step.markdown?.content}
+
+ {step.test?.content ? (
+ <>
+
+ {success && (
+
+ )}
+
+ {success && (
+
+
+ ) : (
+ <>
+
+ {stepId < steps.length - 1 && (
+
+ )}
+ {stepId === steps.length - 1 && (
+
+ )}
+
+ )}
+
+ )
+}
+
+export default StepDetailPage
diff --git a/apps/learneth/src/pages/StepList/index.scss b/apps/learneth/src/pages/StepList/index.scss
new file mode 100644
index 0000000000..eb56db2b90
--- /dev/null
+++ b/apps/learneth/src/pages/StepList/index.scss
@@ -0,0 +1,144 @@
+:host {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+header {
+ padding: 10px 5px;
+}
+
+.menuspacer{
+ margin-top: 52px;
+}
+
+.steplink {
+ text-decoration: none;
+}
+
+.title{
+ pointer-events: none;
+}
+
+h1 {
+ text-align: left;
+ font-size: 1.2rem !important;
+ word-break: break-word;
+}
+section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .start {
+ padding: 5px 25px;
+ animation: jittery 2s 0.5s infinite;
+ box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
+ color: white;
+ cursor: pointer;
+ }
+}
+
+footer {
+ padding: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+@keyframes jittery {
+ 5%,
+ 50% {
+ transform: scale(1);
+ box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
+ }
+ 10% {
+ transform: scale(0.9);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+ }
+ 15% {
+ transform: scale(1.15);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ 20% {
+ transform: scale(1.15) rotate(-5deg);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ 25% {
+ transform: scale(1.15) rotate(5deg);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ 30% {
+ transform: scale(1.15) rotate(-3deg);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ 35% {
+ transform: scale(1.15) rotate(2deg);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ 40% {
+ transform: scale(1.15) rotate(0);
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+}
+
+.slide-in {
+ animation: slideIn 0.5s forwards;
+ visibility: hidden;
+}
+
+@keyframes slideIn {
+ 0% {
+ transform: translateY(-100%);
+ visibility: visible;
+ }
+ 100% {
+ transform: translateY(0);
+ visibility: visible;
+ }
+}
+
+@-moz-keyframes slideIn {
+ 0% {
+ transform: translateY(-100%);
+ visibility: visible;
+ }
+ 100% {
+ transform: translateY(0);
+ visibility: visible;
+ }
+}
+
+@-webkit-keyframes slideIn {
+ 0% {
+ transform: translateY(-100%);
+ visibility: visible;
+ }
+ 100% {
+ transform: translateY(0);
+ visibility: visible;
+ }
+}
+
+@-o-keyframes slideIn {
+ 0% {
+ transform: translateY(-100%);
+ visibility: visible;
+ }
+ 100% {
+ transform: translateY(0);
+ visibility: visible;
+ }
+}
+
+@-ms-keyframes slideIn {
+ 0% {
+ transform: translateY(-100%);
+ visibility: visible;
+ }
+ 100% {
+ transform: translateY(0);
+ visibility: visible;
+ }
+}
diff --git a/apps/learneth/src/pages/StepList/index.tsx b/apps/learneth/src/pages/StepList/index.tsx
new file mode 100644
index 0000000000..1c05930e24
--- /dev/null
+++ b/apps/learneth/src/pages/StepList/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {Link, useLocation} from 'react-router-dom'
+import Markdown from 'react-markdown'
+import BackButton from '../../components/BackButton'
+import SlideIn from '../../components/SlideIn'
+import {useAppSelector} from '../../redux/hooks'
+import './index.scss'
+
+function StepListPage(): JSX.Element {
+ const location = useLocation()
+ const queryParams = new URLSearchParams(location.search)
+ const id = queryParams.get('id') as string
+ const {detail, selectedId} = useAppSelector((state) => state.workshop)
+ const entity = detail[selectedId].entities[id]
+
+ return (
+ <>
+
+ Well done! No errors.
+
+ )}
+ {errors.length > 0 && (
+ <>
+ {!success && (
+
+ Errors
+
+ )}
+ {errors.map((error: string, index: number) => (
+
+ {error}
+
+ ))}
+
+ )}
+
+
+
+
+
+ {entity.name}
+
+ {entity.text}
+
+ Please activate it using the `SOLIDITY` button in the `Featured Plugins` section of the homepage.
"],
+ },
+ })
+ }
+ },
+ },
+}
+
+export default Model
diff --git a/apps/learneth/src/redux/models/workshop.ts b/apps/learneth/src/redux/models/workshop.ts
new file mode 100644
index 0000000000..daf41b5ff9
--- /dev/null
+++ b/apps/learneth/src/redux/models/workshop.ts
@@ -0,0 +1,164 @@
+import axios from 'axios'
+import {toast} from 'react-toastify'
+import groupBy from 'lodash/groupBy'
+import pick from 'lodash/pick'
+import {type ModelType} from '../store'
+import remixClient from '../../remix-client'
+import {router} from '../../App'
+
+// const apiUrl = 'http://localhost:3001';
+const apiUrl = 'https://static.220.14.12.49.clients.your-server.de:3000'
+
+const Model: ModelType = {
+ namespace: 'workshop',
+ state: {
+ list: [],
+ detail: {},
+ selectedId: '',
+ },
+ reducers: {
+ save(state, {payload}) {
+ return {...state, ...payload}
+ },
+ },
+ effects: {
+ *init(_, {put}) {
+ const cache = localStorage.getItem('workshop.state')
+
+ if (cache) {
+ const workshopState = JSON.parse(cache)
+ yield put({
+ type: 'workshop/save',
+ payload: workshopState,
+ })
+ } else {
+ yield put({
+ type: 'workshop/loadRepo',
+ payload: {
+ name: 'ethereum/remix-workshops',
+ branch: 'master',
+ },
+ })
+ }
+ },
+ *loadRepo({payload}, {put, select}) {
+ toast.info(`loading ${payload.name}/${payload.branch}`)
+
+ yield put({
+ type: 'loading/save',
+ payload: {
+ screen: true,
+ },
+ })
+
+ const {list, detail} = yield select((state) => state.workshop)
+
+ const url = `${apiUrl}/clone/${encodeURIComponent(payload.name)}/${payload.branch}?${Math.random()}`
+ console.log('loading ', url)
+ const {data} = yield axios.get(url)
+ console.log(data)
+ const repoId = `${payload.name}-${payload.branch}`
+
+ for (let i = 0; i < data.ids.length; i++) {
+ const {
+ steps,
+ metadata: {
+ data: {steps: metadataSteps},
+ },
+ } = data.entities[data.ids[i]]
+
+ let newSteps = []
+
+ if (metadataSteps) {
+ newSteps = metadataSteps.map((step: any) => {
+ return {
+ ...steps.find((item: any) => item.name === step.path),
+ name: step.name,
+ }
+ })
+ } else {
+ newSteps = steps.map((step: any) => ({
+ ...step,
+ name: step.name.replace('_', ' '),
+ }))
+ }
+
+ const stepKeysWithFile = ['markdown', 'solidity', 'test', 'answer', 'js', 'vy']
+
+ for (let j = 0; j < newSteps.length; j++) {
+ const step = newSteps[j]
+ for (let k = 0; k < stepKeysWithFile.length; k++) {
+ const key = stepKeysWithFile[k]
+ if (step[key]) {
+ try {
+ step[key].content = (yield remixClient.call('contentImport', 'resolve', step[key].file)).content
+ } catch (error) {
+ console.error(error)
+ }
+ }
+ }
+ }
+ data.entities[data.ids[i]].steps = newSteps
+ }
+
+ const workshopState = {
+ detail: {
+ ...detail,
+ [repoId]: {
+ ...data,
+ group: groupBy(
+ data.ids.map((id: string) => pick(data.entities[id], ['level', 'id'])),
+ (item: any) => item.level
+ ),
+ ...payload,
+ },
+ },
+ list: detail[repoId] ? list : [...list, payload],
+ selectedId: repoId,
+ }
+ yield put({
+ type: 'workshop/save',
+ payload: workshopState,
+ })
+ localStorage.setItem('workshop.state', JSON.stringify(workshopState))
+
+ toast.dismiss()
+ yield put({
+ type: 'loading/save',
+ payload: {
+ screen: false,
+ },
+ })
+
+ if (payload.id) {
+ const {detail, selectedId} = workshopState
+ const {ids, entities} = detail[selectedId]
+ for (let i = 0; i < ids.length; i++) {
+ const entity = entities[ids[i]]
+ if (entity.metadata.data.id === payload.id || i + 1 === payload.id) {
+ yield router.navigate(`/list?id=${ids[i]}`)
+ break
+ }
+ }
+ }
+ },
+ *resetAll(_, {put}) {
+ yield put({
+ type: 'workshop/save',
+ payload: {
+ list: [],
+ detail: {},
+ selectedId: '',
+ },
+ })
+
+ localStorage.removeItem('workshop.state')
+
+ yield put({
+ type: 'workshop/init',
+ })
+ },
+ },
+}
+
+export default Model
diff --git a/apps/learneth/src/redux/store.ts b/apps/learneth/src/redux/store.ts
new file mode 100644
index 0000000000..5092828cc6
--- /dev/null
+++ b/apps/learneth/src/redux/store.ts
@@ -0,0 +1,97 @@
+import {configureStore, createSlice, type PayloadAction, type Reducer} from '@reduxjs/toolkit'
+import createSagaMiddleware from 'redux-saga'
+import {call, put, takeEvery, delay, select, all, fork, type ForkEffect} from 'redux-saga/effects'
+
+// @ts-expect-error
+const context = require.context('./models', false, /\.ts$/)
+const models = context.keys().map((key: any) => context(key).default)
+
+export type StateType = Record