temp

trezor · Nov 5, 2024 · a57b375 · a57b375
1 parent 78ba0c3
commit a57b375
Showing 1 changed file with 134 additions and 15 deletions.
diff --git a/suite-native/module-home/src/screens/HomeScreen/GreenCheckMark.tsx b/suite-native/module-home/src/screens/HomeScreen/GreenCheckMark.tsx
@@ -1,27 +1,128 @@
-import { useSharedValue, withSpring, withRepeat } from 'react-native-reanimated';
-import { useEffect } from 'react';
+import {
+    useSharedValue,
+    withSpring,
+    withRepeat,
+    useDerivedValue,
+    withTiming,
+    withDelay,
+} from 'react-native-reanimated';
+import { useEffect, useState, useMemo } from 'react';
+import { Platform } from 'react-native';
 
-import { Canvas, Path, Skia } from '@shopify/react-native-skia';
+import {
+    Canvas,
+    Path,
+    Skia,
+    Group,
+    Shadow,
+    Circle,
+    Text,
+    matchFont,
+    Fill,
+    listFontFamilies,
+    TextAlign,
+    Paragraph,
+    useSVG,
+    ImageSVG,
+} from '@shopify/react-native-skia';
 
-const p1 = Skia.Path.MakeFromSVGString(`M14.1 27.2l7.1 7.2 16.7-16.8`)!;
-const p2 = Skia.Path.Make()!;
-p2.lineTo(28.707, 9.708);
-p2.lineTo(12, 23.586);
-p2.lineTo(5.707, 17.293);
-p2.close();
+import { useNativeStyles } from '@trezor/styles';
 
-export const GreenCheckMark = () => {
+const CANVAS_SIZE = 160;
+const CIRCLE_RADIUS = 128;
+const CIRCLE_CENTER = CANVAS_SIZE / 2;
+
+const PROGRESS_STROKE_WIDTH = 3;
+
+const CHECKMARK_OFFSET_X = 10; // Adjust left/right position
+const CHECKMARK_OFFSET_Y = 0; // Adjust up/down position
+const CHECKMARK_SCALE = 1; // Adjust size
+const LONG_LEG_RATIO = 0.25; // Reduce from 0.33 (1/3) to make long leg shorter
+
+const checkmarkPath = Skia.Path.MakeFromSVGString(
+    `M${CIRCLE_CENTER - CIRCLE_RADIUS / 4 + CHECKMARK_OFFSET_X},${CIRCLE_CENTER + CHECKMARK_OFFSET_Y}` +
+        `l${(CIRCLE_RADIUS / 8) * CHECKMARK_SCALE},${(CIRCLE_RADIUS / 8) * CHECKMARK_SCALE}` +
+        `l${CIRCLE_RADIUS * LONG_LEG_RATIO * CHECKMARK_SCALE},-${CIRCLE_RADIUS * LONG_LEG_RATIO * CHECKMARK_SCALE}`,
+)!;
+
+const progressCirclePath = Skia.Path.MakeFromSVGString(
+    `M ${CIRCLE_CENTER},${CIRCLE_CENTER - (CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2} A ${(CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2},${(CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2} 0 1,1 ${CIRCLE_CENTER},${CIRCLE_CENTER + (CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2} A ${(CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2},${(CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2} 0 1,1 ${CIRCLE_CENTER},${CIRCLE_CENTER - (CIRCLE_RADIUS - PROGRESS_STROKE_WIDTH) / 2}`,
+)!;
+
+const fontStyle = {
+    fontFamily: Platform.select({ ios: 'Helvetica', default: 'serif' }),
+    fontSize: 34,
+    letterSpacing: -1.4,
+};
+
+export const GreenCheckMarkSkia = ({ progress }: { progress: number }) => {
     const animationProgress = useSharedValue(0);
+    const { utils } = useNativeStyles();
+    const progressEnd = useSharedValue(progress / 100);
+    const animatedRadius = useSharedValue(0);
+    const textOpacity = useSharedValue(1);
 
     useEffect(() => {
-        animationProgress.value = withRepeat(withSpring(1), -1, true);
-    }, []);
+        progressEnd.value = withSpring(progress / 100);
+
+        if (progress >= 100) {
+            animatedRadius.value = withSpring(CIRCLE_RADIUS / 2);
+            textOpacity.value = 0;
+            animationProgress.value = withDelay(150, withSpring(1));
+        }
+    }, [progress, progressEnd, animatedRadius, animationProgress, textOpacity]);
+
+    const paragraph = useMemo(() => {
+        if (progress >= 100) {
+            return null;
+        }
+
+        return Skia.ParagraphBuilder.Make({
+            textAlign: TextAlign.Center,
+        })
+            .pushStyle({ ...fontStyle, color: Skia.Color(utils.colors.textPrimaryDefault) })
+            .addText(`${progress}%`)
+            .pop()
+            .build();
+    }, [progress, utils.colors.textPrimaryDefault]);
 
     return (
-        <Canvas style={{ flex: 1, width: 100, height: 100, backgroundColor: 'blue' }}>
+        <Canvas style={{ width: CANVAS_SIZE, height: CANVAS_SIZE }}>
+            <Circle
+                cx={CIRCLE_CENTER}
+                cy={CIRCLE_CENTER}
+                r={CIRCLE_RADIUS / 2}
+                color={utils.colors.backgroundSurfaceElevation1}
+            ></Circle>
+            <Circle
+                cx={CIRCLE_CENTER}
+                cy={CIRCLE_CENTER}
+                r={animatedRadius}
+                color={utils.colors.textPrimaryDefault}
+            />
+            <Group>
+                <Path
+                    path={progressCirclePath}
+                    start={0}
+                    end={progressEnd}
+                    color={utils.colors.textPrimaryDefault}
+                    strokeCap="round"
+                    strokeJoin="round"
+                    strokeWidth={PROGRESS_STROKE_WIDTH}
+                    style="stroke"
+                >
+                    <Shadow dx={0} dy={2} blur={4} color="rgba(0,0,0,0.1)" />
+                </Path>
+            </Group>
+            <Paragraph
+                paragraph={paragraph}
+                x={0}
+                y={CIRCLE_CENTER - fontStyle.fontSize / 2}
+                width={CANVAS_SIZE}
+            />
             <Path
-                path={p1}
-                color="red"
+                path={checkmarkPath}
+                color={utils.colors.backgroundSurfaceElevation1}
                 start={0}
                 end={animationProgress}
                 strokeCap="round"
@@ -32,3 +133,21 @@ export const GreenCheckMark = () => {
         </Canvas>
     );
 };
+
+export const GreenCheckMark = () => {
+    const [progress, setProgress] = useState(70);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setProgress(prev => prev + 10);
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <>
+            <GreenCheckMarkSkia progress={progress} />
+        </>
+    );
+};