@procivis/one-react-native-components 0.1.63 → 0.3.22

package/src/ui-components/pin/pin-lock-animation.tsx

@@ -0,0 +1,500 @@
+import { ColorValue } from 'react-native';
+
+import { colorArray } from '../../utils/color';
+
+const pinLockAnimation = (color: ColorValue) => {
+  const cArray = colorArray(color);
+  return {
+    assets: [],
+    ddd: 0,
+    fr: 29.9700012207031,
+    h: 130,
+    ip: 0,
+    layers: [
+      {
+        ao: 0,
+        bm: 0,
+        ddd: 0,
+        ef: [
+          {
+            ef: [
+              {
+                ix: 1,
+                mn: 'ADBE Radial Wipe-0001',
+                nm: 'Transition Completion',
+                ty: 0,
+                v: { a: 0, ix: 1, k: 0 },
+              },
+              {
+                ix: 2,
+                mn: 'ADBE Radial Wipe-0002',
+                nm: 'Start Angle',
+                ty: 0,
+                v: { a: 0, ix: 2, k: 0 },
+              },
+              {
+                ix: 3,
+                mn: 'ADBE Radial Wipe-0003',
+                nm: 'Wipe Center',
+                ty: 3,
+                v: { a: 0, ix: 3, k: [65, 65] },
+              },
+              {
+                ix: 4,
+                mn: 'ADBE Radial Wipe-0004',
+                nm: 'Wipe',
+                ty: 7,
+                v: { a: 0, ix: 4, k: 1 },
+              },
+              {
+                ix: 5,
+                mn: 'ADBE Radial Wipe-0005',
+                nm: 'Feather',
+                ty: 0,
+                v: { a: 0, ix: 5, k: 0 },
+              },
+            ],
+            en: 1,
+            ix: 1,
+            mn: 'ADBE Radial Wipe',
+            nm: 'Radial Wipe',
+            np: 7,
+            ty: 26,
+          },
+        ],
+        ind: 1,
+        ip: 0,
+        ks: {
+          a: { a: 0, ix: 1, k: [0, 0, 0] },
+          o: { a: 0, ix: 11, k: 100 },
+          p: { a: 0, ix: 2, k: [64.75, 65, 0] },
+          r: { a: 0, ix: 10, k: 0 },
+          s: { a: 0, ix: 6, k: [100, 100, 100] },
+        },
+        nm: 'body',
+        op: 1832.00007461889,
+        shapes: [
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                d: 1,
+                hd: false,
+                mn: 'ADBE Vector Shape - Ellipse',
+                nm: 'Ellipse Path 1',
+                p: { a: 0, ix: 3, k: [0, 0] },
+                s: { a: 0, ix: 2, k: [86.041, 86.041] },
+                ty: 'el',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: [0, 0, 0, 1] },
+                hd: false,
+                lc: 1,
+                lj: 1,
+                ml: 4,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 6 },
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [0.25, 0] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [100, 100] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 1,
+            mn: 'ADBE Vector Group',
+            nm: 'Ellipse 1',
+            np: 2,
+            ty: 'gr',
+          },
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                d: 1,
+                hd: false,
+                mn: 'ADBE Vector Shape - Ellipse',
+                nm: 'Ellipse Path 1',
+                p: { a: 0, ix: 3, k: [0, 0] },
+                s: { a: 0, ix: 2, k: [9.352, 9.352] },
+                ty: 'el',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: [0, 0, 0, 1] },
+                hd: false,
+                lc: 1,
+                lj: 1,
+                ml: 4,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 0 },
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 4, k: [0, 0, 0, 1] },
+                hd: false,
+                mn: 'ADBE Vector Graphic - Fill',
+                nm: 'Fill 1',
+                o: { a: 0, ix: 5, k: 100 },
+                r: 1,
+                ty: 'fl',
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [0, -1.5] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [100, 100] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 2,
+            mn: 'ADBE Vector Group',
+            nm: 'Ellipse 2',
+            np: 3,
+            ty: 'gr',
+          },
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                d: 1,
+                hd: false,
+                mn: 'ADBE Vector Shape - Ellipse',
+                nm: 'Ellipse Path 1',
+                p: { a: 0, ix: 3, k: [0, 0] },
+                s: { a: 0, ix: 2, k: [8.805, 8.805] },
+                ty: 'el',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: [0, 0, 0, 1] },
+                hd: false,
+                lc: 1,
+                lj: 1,
+                ml: 4,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 0 },
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 4, k: [0, 0, 0, 1] },
+                hd: false,
+                mn: 'ADBE Vector Graphic - Fill',
+                nm: 'Fill 1',
+                o: { a: 0, ix: 5, k: 100 },
+                r: 1,
+                ty: 'fl',
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [31.518, -36.291] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [100, 100] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 3,
+            mn: 'ADBE Vector Group',
+            nm: 'Ellipse 3',
+            np: 3,
+            ty: 'gr',
+          },
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                d: 1,
+                hd: false,
+                mn: 'ADBE Vector Shape - Rect',
+                nm: 'Rectangle Path 1',
+                p: { a: 0, ix: 3, k: [0, 0] },
+                r: { a: 0, ix: 4, k: 0 },
+                s: { a: 0, ix: 2, k: [9.703, 8.758] },
+                ty: 'rc',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: [0, 0, 0, 1] },
+                hd: false,
+                lc: 2,
+                lj: 2,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 5 },
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [-0.145, -48.791] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [100, 100] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 4,
+            mn: 'ADBE Vector Group',
+            nm: 'Rectangle 1',
+            np: 3,
+            ty: 'gr',
+          },
+        ],
+        sr: 1,
+        st: 0,
+        ty: 4,
+      },
+      {
+        ao: 0,
+        bm: 0,
+        ddd: 0,
+        ind: 2,
+        ip: 0,
+        ks: {
+          a: { a: 0, ix: 1, k: [0, 0, 0] },
+          o: { a: 0, ix: 11, k: 100 },
+          p: { a: 0, ix: 2, k: [65, 65, 0] },
+          r: {
+            a: 1,
+            ix: 10,
+            k: [
+              {
+                i: { x: [0.833], y: [0.833] },
+                o: { x: [0.167], y: [0.167] },
+                s: [0],
+                t: 0,
+              },
+              { s: [360], t: 1797.00007319331 },
+            ],
+          },
+          s: { a: 0, ix: 6, k: [100, 100, 100] },
+        },
+        nm: 'arrow',
+        op: 1798.00007323404,
+        shapes: [
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                hd: false,
+                ind: 0,
+                ix: 1,
+                ks: {
+                  a: 0,
+                  ix: 2,
+                  k: {
+                    c: false,
+                    i: [
+                      [0, 0],
+                      [0, 0],
+                    ],
+                    o: [
+                      [0, 0],
+                      [0, 0],
+                    ],
+                    v: [
+                      [-0.25, 2.745],
+                      [-0.25, -27.755],
+                    ],
+                  },
+                },
+                mn: 'ADBE Vector Shape - Group',
+                nm: 'Path 1',
+                ty: 'sh',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: [0, 0, 0, 1] },
+                hd: false,
+                lc: 2,
+                lj: 1,
+                ml: 4,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 6 },
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [0, 5] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [-62.71, 157.64] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 1,
+            mn: 'ADBE Vector Group',
+            nm: 'Shape 1',
+            np: 3,
+            ty: 'gr',
+          },
+        ],
+        sr: 1,
+        st: 0,
+        ty: 4,
+      },
+      {
+        ao: 0,
+        bm: 0,
+        ddd: 0,
+        ind: 3,
+        ip: 0,
+        ks: {
+          a: { a: 0, ix: 1, k: [0, 0, 0] },
+          o: { a: 0, ix: 11, k: 100 },
+          p: { a: 0, ix: 2, k: [65.75, 65, 0] },
+          r: { a: 0, ix: 10, k: 0 },
+          s: { a: 0, ix: 6, k: [109.34, 109.34, 100] },
+        },
+        nm: 'yellow',
+        op: 1798.00007323404,
+        shapes: [
+          {
+            bm: 0,
+            cix: 2,
+            hd: false,
+            it: [
+              {
+                hd: false,
+                ind: 0,
+                ix: 1,
+                ks: {
+                  a: 0,
+                  ix: 2,
+                  k: {
+                    c: true,
+                    i: [
+                      [-2.232, 0],
+                      [0, -2.232],
+                      [2.232, 0],
+                      [0, 2.232],
+                    ],
+                    o: [
+                      [2.232, 0],
+                      [0, 2.232],
+                      [-2.232, 0],
+                      [0, -2.232],
+                    ],
+                    v: [
+                      [0, -4.042],
+                      [4.042, 0],
+                      [0, 4.042],
+                      [-4.042, 0],
+                    ],
+                  },
+                },
+                mn: 'ADBE Vector Shape - Group',
+                nm: 'Path 1',
+                ty: 'sh',
+              },
+              {
+                bm: 0,
+                c: { a: 0, ix: 3, k: cArray },
+                hd: false,
+                lc: 1,
+                lj: 1,
+                ml: 4,
+                mn: 'ADBE Vector Graphic - Stroke',
+                nm: 'Stroke 1',
+                o: { a: 0, ix: 4, k: 100 },
+                ty: 'st',
+                w: { a: 0, ix: 5, k: 7 },
+              },
+              {
+                a: { a: 0, ix: 1, k: [0, 0] },
+                nm: 'Transform',
+                o: { a: 0, ix: 7, k: 100 },
+                p: { a: 0, ix: 2, k: [-0.874, -0.013] },
+                r: { a: 0, ix: 6, k: 0 },
+                s: { a: 0, ix: 3, k: [533.496, 533.496] },
+                sa: { a: 0, ix: 5, k: 0 },
+                sk: { a: 0, ix: 4, k: 0 },
+                ty: 'tr',
+              },
+            ],
+            ix: 1,
+            mn: 'ADBE Vector Group',
+            nm: 'Ellipse 2',
+            np: 3,
+            ty: 'gr',
+          },
+          {
+            e: {
+              a: 1,
+              ix: 2,
+              k: [
+                {
+                  i: { x: [0.833], y: [0.833] },
+                  o: { x: [0.167], y: [0.167] },
+                  s: [0],
+                  t: 0,
+                },
+                { s: [100], t: 1797.00007319331 },
+              ],
+            },
+            hd: false,
+            ix: 2,
+            m: 1,
+            mn: 'ADBE Vector Filter - Trim',
+            nm: 'Trim Paths 1',
+            o: { a: 0, ix: 3, k: 0 },
+            s: { a: 0, ix: 1, k: 0 },
+            ty: 'tm',
+          },
+        ],
+        sr: 1,
+        st: 0,
+        ty: 4,
+      },
+    ],
+    markers: [{ cm: '1', dr: 0, tm: 86.0000035028518 }],
+    nm: 'Comp 1',
+    op: 1798.00007323404,
+    v: '5.5.1',
+    w: 130,
+  };
+};
+
+export default pinLockAnimation;

package/src/ui-components/pin/pin-lock.tsx

@@ -0,0 +1,82 @@
+import { useIsFocused } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
+import React, { FC, useEffect, useRef } from 'react';
+import { Modal, StatusBar, StyleSheet, View } from 'react-native';
+
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import pinLockAnimation from './pin-lock-animation';
+
+const styles = StyleSheet.create({
+  icon: {
+    height: 70,
+    marginBottom: 20,
+    width: 70,
+  },
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.9)',
+    flex: 1,
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+});
+
+export type PinLockModalLabels = {
+  title: (attempts: number) => string;
+  subtitle: (minutes: number, seconds: number) => string;
+};
+
+interface PinLockModalProps {
+  attempts: number;
+  labels: PinLockModalLabels;
+  open: boolean;
+  seconds: number;
+}
+
+const PinLockModal: FC<PinLockModalProps> = ({ attempts, labels, seconds, open }) => {
+  const colorScheme = useAppColorScheme();
+  const lottie = useRef<LottieView>(null);
+  const isFocused = useIsFocused();
+
+  useEffect(() => {
+    const currentLottie = lottie.current;
+    if (!currentLottie) {
+      return;
+    }
+    if (isFocused) {
+      currentLottie.play();
+    } else {
+      currentLottie.pause();
+    }
+    return () => {
+      currentLottie.reset();
+    };
+  }, [isFocused]);
+
+  const content = (
+    <LottieView
+      autoPlay={true}
+      loop={true}
+      ref={lottie}
+      resizeMode="cover"
+      source={pinLockAnimation(colorScheme.accent)}
+      style={styles.icon}
+    />
+  );
+
+  return (
+    <Modal animationType="slide" statusBarTranslucent={true} transparent={true} visible={open}>
+      <View style={styles.overlay}>
+        <StatusBar backgroundColor={'#00000000'} barStyle={'dark-content'} translucent={true} />
+        {content}
+        <Typography color={colorScheme.text} preset="m/heading">
+          {labels.title(attempts)}
+        </Typography>
+        <Typography color={colorScheme.text}>{labels.subtitle(Math.floor(seconds / 60), seconds % 60)}</Typography>
+      </View>
+    </Modal>
+  );
+};
+
+export default PinLockModal;

package/src/ui-components/screens/backup-screen.tsx

@@ -0,0 +1,92 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import BackButton from '../buttons/back-button';
+import { Button, ButtonType } from '../buttons/button';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import ScrollViewScreen from './scroll-view-screen';
+
+export enum BackupScreenMode {
+  Create = 'create',
+  Restore = 'restore',
+}
+
+export type BackupScreenProps = PropsWithChildren<{
+  cta: string;
+  description: string;
+  isCtaDisabled?: boolean;
+  onBack: () => void;
+  onCta: () => void;
+  testID: string;
+  title: string;
+}>;
+
+const BackupScreen: FC<BackupScreenProps> = ({
+  children,
+  cta,
+  description,
+  isCtaDisabled,
+  onBack,
+  onCta,
+  testID,
+  title,
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <ScrollViewScreen
+      header={{
+        backgroundColor: colorScheme.white,
+        leftItem: <BackButton onPress={onBack} testID={concatTestID(testID, 'back')} />,
+        title,
+      }}
+      scrollView={{
+        testID: concatTestID(testID, 'scroll'),
+      }}
+      style={{ backgroundColor: colorScheme.white }}
+      testID={testID}>
+      <View style={styles.contentWrapper}>
+        <View style={styles.content}>
+          <Typography color={colorScheme.text} style={styles.description}>
+            {description}
+          </Typography>
+
+          {children}
+        </View>
+
+        <View style={styles.bottom}>
+          <Button
+            disabled={isCtaDisabled}
+            onPress={onCta}
+            testID={concatTestID(testID, 'mainButton')}
+            title={cta}
+            type={isCtaDisabled ? ButtonType.Border : ButtonType.Primary}
+          />
+        </View>
+      </View>
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottom: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    minHeight: 84,
+  },
+  content: {
+    marginHorizontal: 8,
+  },
+  contentWrapper: {
+    flex: 1,
+    marginHorizontal: 12,
+  },
+  description: {
+    marginBottom: 24,
+    opacity: 0.7,
+  },
+});
+
+export default BackupScreen;

package/src/ui-components/screens/image-preview-screen.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta,StoryObj } from '@storybook/react';
+import React from 'react';
+
+import ImagePreviewScreen, { ImagePreviewScreenProps } from './image-preview-screen';
+
+const profileImage = require('../../../storybook/assets/ProfileImage.png');
+
+const Render = ({ ...args }: ImagePreviewScreenProps) => {
+  return <ImagePreviewScreen {...args} image={profileImage} />;
+};
+
+const Basic: StoryObj<typeof ImagePreviewScreen> = {
+  args: {
+    title: 'Title',
+  },
+  render: Render,
+};
+
+export { Basic as ImagePreviewScreen };
+
+export default {
+  title: 'screen/Image Preview Screen',
+  component: ImagePreviewScreen,
+  parameters: {
+    noSafeArea: true,
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=493-79444&m=dev',
+    },
+  },
+} as Meta<typeof ImagePreviewScreen>;