+
+ );
+}
+
+export default HomePage;
diff --git a/apps/learneth/src/pages/Logo/index.css b/apps/learneth/src/pages/Logo/index.css
new file mode 100644
index 0000000000..7a827cacb8
--- /dev/null
+++ b/apps/learneth/src/pages/Logo/index.css
@@ -0,0 +1,5 @@
+.remixLogo {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+}
diff --git a/apps/learneth/src/pages/Logo/index.tsx b/apps/learneth/src/pages/Logo/index.tsx
new file mode 100644
index 0000000000..e62a814798
--- /dev/null
+++ b/apps/learneth/src/pages/Logo/index.tsx
@@ -0,0 +1,26 @@
+import React, {useEffect} from 'react'
+// import remixClient from '../../remix-client';
+import {useAppDispatch} from '../../redux/hooks'
+import logo from '../../assets/logo-background.svg'
+import './index.css'
+
+const LogoPage: React.FC = () => {
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch({type: 'remixide/connect'})
+ // remixClient.on('theme', 'themeChanged', (theme: any) => {
+ // dispatch({ type: 'remixide/save', payload: { theme: theme.quality } });
+ // });
+ }, [])
+
+ return (
+
+ {Object.keys(selectedRepo.group).map((level) => (
+
+ )}
+
+
+ ))}
+ {levelMap[level]}:
+ {selectedRepo.group[level].map((item: any) => (
+
+
+ ))}
+
+ {
+ handleClick(item.id);
+ }}
+ >
+
+
+ {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..e135826c8f
--- /dev/null
+++ b/apps/learneth/src/pages/StepDetail/index.scss
@@ -0,0 +1,59 @@
+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;
+}
+
+.menuspacer{
+ // padding-top: 48px;
+
+}
+
+.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..38ec41cec7
--- /dev/null
+++ b/apps/learneth/src/pages/StepDetail/index.tsx
@@ -0,0 +1,246 @@
+import React, { useEffect } from 'react';
+import { 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 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..fcccaf4142
--- /dev/null
+++ b/apps/learneth/src/pages/StepList/index.scss
@@ -0,0 +1,152 @@
+: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..cba5fc583d
--- /dev/null
+++ b/apps/learneth/src/pages/StepList/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } 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 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..eadd44e5e5
--- /dev/null
+++ b/apps/learneth/src/redux/models/workshop.ts
@@ -0,0 +1,179 @@
+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..5bd2929a61
--- /dev/null
+++ b/apps/learneth/src/redux/store.ts
@@ -0,0 +1,117 @@
+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