diff --git a/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.module.scss73e0 b/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.module.scss73e0 new file mode 100644 index 0000000000..0db94de753 --- /dev/null +++ b/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.module.scss73e0 @@ -0,0 +1,2 @@ +// extracted by mini-css-extract-plugin +export default {"root":"j82N","clock":"sYj9"}; \ No newline at end of file diff --git a/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.tsx b/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.tsx new file mode 100644 index 0000000000..0d6cf1be61 --- /dev/null +++ b/data/mini_app/wallet/src/components/animations/SandClockAnimation/SandClockAnimation.tsx @@ -0,0 +1,32 @@ +import classNames from 'classnames'; +import Lottie, { LottieRefCurrentProps } from 'lottie-react'; +import { FC, useEffect, useRef } from 'react'; + +import styles from './SandClockAnimation.module.scss'; +import animationData from './sand_clock.json'; + +const SandClockAnimation: FC<{ className?: string }> = ({ className }) => { + const clockRef = useRef(null); + + const play = () => { + clockRef.current?.goToAndPlay(0); + }; + + useEffect(() => { + play(); + }, []); + + return ( +
+ +
+ ); +}; + +export default SandClockAnimation;