@magmamath/students-features 0.6.12 → 0.6.13

package/dist/typescript/module/features/exampleSolution/hooks/useExampleSolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExampleSolution.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/hooks/useExampleSolution.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAItD,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,uBAAuB,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,uBAAuB,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,kBAAkB,kCAI5B,0BAA0B,KAAG,wBAiD/B,CAAA"}

package/dist/typescript/module/features/exampleSolution/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ExampleSolutionModal';
+export * from './model/ExampleSolution.model';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/features/exampleSolution/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/exampleSolution/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA"}

package/dist/typescript/module/features/exampleSolution/model/ExampleSolution.model.d.ts

@@ -0,0 +1,9 @@
+import { GifCelebrationsModelProps } from '../types';
+import { ExampleSolutionsApi } from './ExampleSolutionApi';
+import { ExampleSolutionCache } from './ExampleSolutionCache';
+export declare class ExampleSolutionModel {
+    readonly api: ExampleSolutionsApi;
+    readonly cache: ExampleSolutionCache;
+    constructor({ api, errorHandler }: GifCelebrationsModelProps);
+}
+//# sourceMappingURL=ExampleSolution.model.d.ts.map

package/dist/typescript/module/features/exampleSolution/model/ExampleSolution.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSolution.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/model/ExampleSolution.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,qBAAa,oBAAoB;IAC/B,SAAgB,GAAG,sBAAA;IACnB,SAAgB,KAAK,uBAA6B;gBAEtC,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,yBAAyB;CAG7D"}

package/dist/typescript/module/features/exampleSolution/model/ExampleSolutionApi.d.ts

@@ -0,0 +1,13 @@
+import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types';
+type ExampleSolutionApiProps = {
+    api: ExampleSolutionApiRequests;
+    errorHandler?: ExampleSolutionErrorHandler;
+};
+export declare class ExampleSolutionsApi {
+    readonly generateExampleSolutionFx: import("./../../../lib/effector/createControllerEffect").ControlledEffect<import("../types").ExampleSolutionPayload, import("../types").ExampleSolutionResponse>;
+    readonly errorHandlerFx?: ExampleSolutionErrorHandler;
+    readonly errorHandlingFx: import("effector").Effect<void, void, Error>;
+    constructor({ api, errorHandler }: ExampleSolutionApiProps);
+}
+export {};
+//# sourceMappingURL=ExampleSolutionApi.d.ts.map

package/dist/typescript/module/features/exampleSolution/model/ExampleSolutionApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSolutionApi.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/model/ExampleSolutionApi.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AAIlF,KAAK,uBAAuB,GAAG;IAC7B,GAAG,EAAE,0BAA0B,CAAA;IAC/B,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C,CAAA;AAED,qBAAa,mBAAmB;IAC9B,SAAgB,yBAAyB,mKAAA;IACzC,SAAgB,cAAc,CAAC,EAAE,2BAA2B,CAAA;IAE5D,SAAgB,eAAe,+CAO7B;gBAEU,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,uBAAuB;CAS3D"}

package/dist/typescript/module/features/exampleSolution/model/ExampleSolutionCache.d.ts

@@ -0,0 +1,11 @@
+import { ExampleSolutionResponse } from '../types';
+type AddExampleSolution = {
+    cacheKey: string;
+    response: ExampleSolutionResponse;
+};
+export declare class ExampleSolutionCache {
+    readonly addExampleSolution: import("effector").EventCallable<AddExampleSolution>;
+    readonly $state: import("effector").StoreWritable<Record<string, ExampleSolutionResponse>>;
+}
+export {};
+//# sourceMappingURL=ExampleSolutionCache.d.ts.map

package/dist/typescript/module/features/exampleSolution/model/ExampleSolutionCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleSolutionCache.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/model/ExampleSolutionCache.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAElD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,uBAAuB,CAAA;CAClC,CAAA;AAED,qBAAa,oBAAoB;IAC/B,SAAgB,kBAAkB,uDAAoC;IACtE,SAAgB,MAAM,4EAQrB;CACF"}

package/dist/typescript/module/features/exampleSolution/types.d.ts

@@ -0,0 +1,26 @@
+import { ExampleSolutionModel } from './model/ExampleSolution.model';
+export type ExampleSolutionPayload = {
+    question: string;
+    answer: string;
+    language: string;
+    altText?: string;
+    imageCdnId?: string;
+};
+export type ExampleSolutionResponse = {
+    question: string;
+    answer: string;
+};
+export type ExampleSolutionApiRequests = {
+    generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>;
+};
+export type ExampleSolutionErrorHandler = (errorMessage: string) => void;
+export type GifCelebrationsModelProps = {
+    api: ExampleSolutionApiRequests;
+    errorHandler?: ExampleSolutionErrorHandler;
+};
+export type ExampleSolutionModalParams = {
+    cacheKey: string;
+    payload: ExampleSolutionPayload;
+    model: ExampleSolutionModel;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/module/features/exampleSolution/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/exampleSolution/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,uBAAuB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAA;CAC5F,CAAA;AACD,MAAM,MAAM,2BAA2B,GAAG,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;AACxE,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,0BAA0B,CAAA;IAC/B,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,sBAAsB,CAAA;IAC/B,KAAK,EAAE,oBAAoB,CAAA;CAC5B,CAAA"}

package/dist/typescript/module/index.d.ts

@@ -7,4 +7,6 @@ export * from './features/endOfAssignment';
 export * from './features/formulaSheet';
 export * from './features/problemSelector';
 export * from './features/gifCelebrations';
+export * from './features/exampleSolution';
+export * from './shared/icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gBAAgB,CAAA"}

package/dist/typescript/module/shared/icons/ExcitedLavaIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './icon.types';
+export declare const ExcitedLavaIcon: ({ width, height }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=ExcitedLavaIcon.d.ts.map

package/dist/typescript/module/shared/icons/ExcitedLavaIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExcitedLavaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/ExcitedLavaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,eAAe,sBAAkC,SAAS,sBAwhBtE,CAAA"}

package/dist/typescript/module/shared/icons/LavaIconInGlasses.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './icon.types';
+export declare const LavaIconInGlasses: ({ width, height }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=LavaIconInGlasses.d.ts.map

package/dist/typescript/module/shared/icons/LavaIconInGlasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LavaIconInGlasses.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/LavaIconInGlasses.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,iBAAiB,sBAAkC,SAAS,sBA4dxE,CAAA"}

package/dist/typescript/module/shared/icons/index.d.ts

@@ -0,0 +1,19 @@
+export * from './ArrowRightIcon';
+export * from './ChatbotIcon';
+export * from './CloseIcon';
+export * from './ExcitedLavaIcon';
+export * from './GlobeIcon';
+export * from './Halloween';
+export * from './HighlighterIcon';
+export * from './LavaIconInGlasses';
+export * from './MessageBubbleIcon';
+export * from './PauseIcon';
+export * from './Pi';
+export * from './PlayIcon';
+export * from './SpeakerIcon';
+export * from './Star';
+export * from './StopIcon';
+export * from './Valentine';
+export * from './Winter';
+export * from './XCloseIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/shared/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,MAAM,CAAA;AACpB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA"}

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -25,6 +25,12 @@ export declare const LOCALIZATION_CONFIGS: {
             onTheWay: string;
             almostThere: string;
         };
+        exampleSolution: {
+            exampleSolution: string;
+            letMeThink: string;
+            aha: string;
+            errorMessage: string;
+        };
     };
     "en-GB": {
         "teacherFeedback.noComments": string;
@@ -52,6 +58,12 @@ export declare const LOCALIZATION_CONFIGS: {
             onTheWay: string;
             almostThere: string;
         };
+        exampleSolution: {
+            exampleSolution: string;
+            letMeThink: string;
+            aha: string;
+            errorMessage: string;
+        };
     };
     "sv-SE": {
         "teacherFeedback.noComments": string;
@@ -79,6 +91,12 @@ export declare const LOCALIZATION_CONFIGS: {
             onTheWay: string;
             almostThere: string;
         };
+        exampleSolution: {
+            exampleSolution: string;
+            letMeThink: string;
+            aha: string;
+            errorMessage: string;
+        };
     };
     "en-CA": {
         "teacherFeedback.noComments": string;
@@ -106,6 +124,12 @@ export declare const LOCALIZATION_CONFIGS: {
             onTheWay: string;
             almostThere: string;
         };
+        exampleSolution: {
+            exampleSolution: string;
+            letMeThink: string;
+            aha: string;
+            errorMessage: string;
+        };
     };
     "en-SCT": {
         "teacherFeedback.noComments": string;
@@ -133,6 +157,12 @@ export declare const LOCALIZATION_CONFIGS: {
             onTheWay: string;
             almostThere: string;
         };
+        exampleSolution: {
+            exampleSolution: string;
+            letMeThink: string;
+            aha: string;
+            errorMessage: string;
+        };
     };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMhC,CAAA"}

package/dist/typescript/module/shared/translation/model.d.ts

@@ -26,6 +26,12 @@ export declare const setLocalization: import("effector").EventCallable<{
         onTheWay: string;
         almostThere: string;
     };
+    exampleSolution: {
+        exampleSolution: string;
+        letMeThink: string;
+        aha: string;
+        errorMessage: string;
+    };
 } | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
 export declare const $localization: import("effector").StoreWritable<{
     "teacherFeedback.noComments": string;
@@ -53,5 +59,11 @@ export declare const $localization: import("effector").StoreWritable<{
         onTheWay: string;
         almostThere: string;
     };
+    exampleSolution: {
+        exampleSolution: string;
+        letMeThink: string;
+        aha: string;
+        errorMessage: string;
+    };
 }>;
 //# sourceMappingURL=model.d.ts.map

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -24,10 +24,12 @@
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=0.3.16",
-    "react-native-svg": "^15.10.0"
+    "react-native-svg": "^15.10.0",
+    "react-native-gesture-handler": "*",
+    "react-native-modalfy": "*"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.37",
+    "@magmamath/react-native-ui": "0.4.22",
     "effector": "^23.2.3",
     "effector-react": "^23.2.1",
     "@react-native/eslint-config": "^0.73.1",
@@ -45,6 +47,8 @@
     "react-native-builder-bob": "^0.33.3",
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-modalfy": "^3.7.0",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },

package/src/features/exampleSolution/ExampleSolutionModal.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { BaseModal, SPACING } from '@magmamath/react-native-ui'
+import { ExampleSolutionModalContent } from './components/ExampleSolutionModalContent'
+import { ExampleSolutionModalParams } from './types'
+
+type ExampleSolutionModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: ExampleSolutionModalParams
+  }
+}
+
+export const ExampleSolutionModal = ({
+  modal: { closeModal, params },
+}: ExampleSolutionModalComponentProps) => (
+  <BaseModal
+    style={{
+      container: { paddingHorizontal: SPACING[800] },
+    }}
+    onClose={closeModal}
+    content={
+      <ExampleSolutionModalContent
+        model={params.model}
+        payload={params.payload}
+        cacheKey={params.cacheKey}
+      />
+    }
+  />
+)

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -0,0 +1,71 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import { MessageBlock } from './MessageBlock'
+import { LavaIcon } from './LavaIcon'
+import { ExampleSolutionModalParams } from '../types'
+import { QuestionSection } from './QuestionSection'
+import { SolutionSection } from './SolutionSection'
+import { useExampleSolution } from '../hooks/useExampleSolution'
+
+export const ExampleSolutionModalContent = ({
+  model,
+  payload,
+  cacheKey,
+}: ExampleSolutionModalParams) => {
+  const { result, status } = useExampleSolution({ model, payload, cacheKey })
+  const localization = useUnit($localization)
+
+  return (
+    <View style={styles.container}>
+      <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
+        {localization.exampleSolution.exampleSolution}
+      </Typography>
+      <View style={styles.content}>
+        <QuestionSection status={status} question={result?.question} />
+        <SolutionSection status={status} answer={result?.answer} />
+      </View>
+      <MessageBlock status={status} style={styles.messageBlock} />
+      <LavaIcon status={status} style={styles.lavaIconContainer} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 880,
+    height: 593,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+  },
+  solutionContainer: {
+    width: 351,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  lavaIconContainer: {
+    position: 'absolute',
+    bottom: -54,
+    right: -50,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  messageBlock: {
+    position: 'absolute',
+    right: 38,
+    bottom: -22,
+  },
+})

package/src/features/exampleSolution/components/LavaIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ExcitedLavaIcon } from '../../../shared/icons/ExcitedLavaIcon'
+import { LavaIconInGlasses } from '../../../shared/icons'
+import Animated, { FadeIn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { StyleProp, ViewStyle } from 'react-native'
+import { ExampleSolutionStatuses } from '../constants'
+
+const LAVA_ICON_HEIGHT = 112
+
+type LavaIconProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const LavaIcon = ({ status, style }: LavaIconProps) => {
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 500 }),
+    }
+  }, [status])
+
+  return (
+    <>
+      <Animated.View style={[style, opacityAnimation]}>
+        <LavaIconInGlasses height={112} />
+      </Animated.View>
+
+      {status !== ExampleSolutionStatuses.LOADING && (
+        <Animated.View style={style} entering={FadeIn}>
+          <ExcitedLavaIcon height={LAVA_ICON_HEIGHT} />
+        </Animated.View>
+      )}
+    </>
+  )
+}

package/src/features/exampleSolution/components/MessageBlock.tsx

@@ -0,0 +1,67 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import React from 'react'
+import { COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type MessageBlockProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const MessageBlock = ({ status, style }: MessageBlockProps) => {
+  const localization = useUnit($localization)
+
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withDelay(
+        2000,
+        withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 350 }),
+      ),
+    }
+  }, [status])
+
+  if (status === ExampleSolutionStatuses.CACHE) return null
+
+  return (
+    <Animated.View
+      layout={LinearTransition.duration(250)}
+      style={[styles.container, opacityAnimation, style]}
+    >
+      <Typography variant={'small'} numberOfLines={1}>
+        {status === ExampleSolutionStatuses.LOADING
+          ? localization.exampleSolution.letMeThink
+          : localization.exampleSolution.aha}
+      </Typography>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 44,
+    borderRadius: 12,
+    borderBottomRightRadius: 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: COLORS.NEUTRAL_5,
+
+    shadowColor: COLORS.NEUTRAL_10,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+
+    elevation: 3,
+  },
+})

package/src/features/exampleSolution/components/QuestionSection.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, View, ScrollView } from 'react-native'
+import React from 'react'
+import { COLORS, Loader, LoaderColor, SPACING, Typography } from '@magmamath/react-native-ui'
+import Animated, { FadeOut } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type QuestionSectionProps = {
+  question?: string
+  status: ExampleSolutionStatuses
+}
+
+export const QuestionSection = ({ question, status }: QuestionSectionProps) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        <Typography>{question}</Typography>
+      </ScrollView>
+      {status === ExampleSolutionStatuses.LOADING && (
+        <Animated.View exiting={FadeOut} style={styles.loaderContainer}>
+          <Loader size="large" color={LoaderColor.BLUE} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SPACING[400],
+  },
+  errorText: {
+    color: COLORS.PRIMARY_RED,
+    textAlign: 'center',
+  },
+})

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, Image, Text } from 'react-native'
+import React from 'react'
+import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+import gridImage from '../assets/grid.png'
+
+type SolutionSectionProps = {
+  answer?: string
+  status: ExampleSolutionStatuses
+}
+
+const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
+
+export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const shouldShowAnswer =
+    answer &&
+    (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: gridImagePath }}
+        style={[styles.gridImage, IS_WEB && styles.gridImageWeb]}
+      />
+      {shouldShowAnswer && (
+        <Animated.ScrollView
+          style={styles.solutionScroll}
+          contentContainerStyle={styles.solutionScrollContent}
+          entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+        >
+          <Text style={styles.solutionText}>{answer}</Text>
+        </Animated.ScrollView>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 500,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+    aspectRatio: 28 / 8,
+  },
+  gridImageWeb: {
+    transform: [{ scale: 3.5 }],
+  },
+  solutionScroll: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  solutionScrollContent: {
+    paddingHorizontal: SPACING[800],
+    paddingVertical: SPACING[400],
+  },
+  solutionText: {
+    fontFamily: 'PlaypenSans-Light',
+    fontSize: 22,
+  },
+})

package/src/features/exampleSolution/constants.ts

@@ -0,0 +1,5 @@
+export const enum ExampleSolutionStatuses {
+  LOADING = 'loading',
+  DONE_DATA = 'doneData',
+  CACHE = 'cache',
+}