fix: add lottie wrapper

lfglabs-dev · Dec 2, 2024 · eacc356 · eacc356
1 parent 365e157
commit eacc356
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 23 deletions.
diff --git a/components/UI/confirmationTx.tsx b/components/UI/confirmationTx.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 import modalStyles from "../../styles/components/modalMessage.module.css";
 import Button from "./button";
 import verifiedLottie from "../../public/visuals/verifiedLottie.json";
-import Lottie from "lottie-react";
+import LottieWrapper from "./lottieWrapper";
 
 type ConfirmationTxProps = {
   closeModal: () => void;
@@ -29,13 +29,12 @@ const ConfirmationTx: FunctionComponent<ConfirmationTxProps> = ({
         Your Transaction is on it&apos;s way !
       </p>
       <div className="mt-7 flex flex-col items-center justify-center text-center">
-        <Lottie className="w-48" animationData={verifiedLottie} loop={false} />{" "}
+        <LottieWrapper className="w-48" animationData={verifiedLottie} loop={false} />{" "}
         <p
           className="text-sm underline cursor-pointer"
           onClick={() =>
             window.open(
-              `https://${
-                process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "sepolia." : ""
+              `https://${process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "sepolia." : ""
               }starkscan.co/tx/${txHash}`
             )
           }

diff --git a/components/UI/isSendingTx.tsx b/components/UI/isSendingTx.tsx
@@ -2,8 +2,8 @@
 import React, { FunctionComponent } from "react";
 import modalStyles from "../../styles/components/modalMessage.module.css";
 import sendingLottie from "../../public/visuals/sendingLottie.json";
-import Lottie from "lottie-react";
 import Button from "./button";
+import LottieWrapper from "./lottieWrapper";
 
 const IsSendingTx: FunctionComponent = () => {
   return (
@@ -12,10 +12,10 @@ const IsSendingTx: FunctionComponent = () => {
         Confirm the transaction in your wallet !
       </p>
       <div className="flex flex-col items-center justify-center text-center -mt-20 -mb-16">
-        <Lottie style={{ width: "500px" }} animationData={sendingLottie} loop />
+        <LottieWrapper style={{ width: "500px" }} animationData={sendingLottie} loop />
       </div>
       <div className="w-auto">
-        <Button onClick={() => {}} disabled>
+        <Button onClick={() => { }} disabled>
           Sending transaction
         </Button>
       </div>

diff --git a/components/UI/lottieWrapper.tsx b/components/UI/lottieWrapper.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+interface LottieWrapperProps {
+    animationData: unknown;
+    className?: string;
+    loop?: boolean;
+    autoplay?: boolean;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+
+const LottieWrapper: React.FC<LottieWrapperProps> = ({
+    animationData,
+    className,
+    loop = false,
+    autoplay = true,
+    style,
+    onClick,
+    ...props
+}) => {
+    const Lottie = dynamic(() => import('lottie-react'), {
+        ssr: false
+    });
+
+    return (
+        <Lottie
+            animationData={animationData}
+            className={className}
+            loop={loop}
+            autoplay={autoplay}
+            style={style}
+            onClick={onClick}
+            {...props}
+        />
+    )
+}
+
+export default LottieWrapper
diff --git a/components/UI/modalMessage.tsx b/components/UI/modalMessage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "../../styles/components/modalMessage.module.css";
 import { FunctionComponent, ReactNode } from "react";
 import { Modal } from "@mui/material";
-import Lottie from "lottie-react";
+import LottieWrapper from "./lottieWrapper";
 
 type ModalMessageProps = {
   title: string;
@@ -41,7 +41,7 @@ const ModalMessage: FunctionComponent<ModalMessageProps> = ({
         <p className={styles.menu_title}>{title}</p>
         {lottie ? (
           <div className="flex flex-col items-center justify-center sm:-mb-20 sm:-mt-20 -mb-8 -mt-8">
-            <Lottie className="w-68" animationData={lottie} loop={false} />
+            <LottieWrapper className="w-68" animationData={lottie} loop={false} />
           </div>
         ) : null}
 

diff --git a/components/UI/registerConfirmationModal.tsx b/components/UI/registerConfirmationModal.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
-import Lottie from "lottie-react";
 import ModalMessage from "../UI/modalMessage";
 import verifiedLottie from "../../public/visuals/verifiedLottie.json";
 import Button from "./button";
+import LottieWrapper from "./lottieWrapper";
 
 type RegisterConfirmationModalProps = {
   txHash?: string;
@@ -21,7 +21,7 @@ const RegisterConfirmationModal: FunctionComponent<
       message={
         <div className="flex items-center justify-center text-center py-5 gap-2 flex-wrap lg:flex-nowrap">
           <div className="flex flex-col">
-            <Lottie
+            <LottieWrapper
               className="w-52"
               animationData={verifiedLottie}
               loop={false}
@@ -30,10 +30,9 @@ const RegisterConfirmationModal: FunctionComponent<
               className="text-xs underline cursor-pointer"
               onClick={() =>
                 window.open(
-                  `https://${
-                    process.env.NEXT_PUBLIC_IS_TESTNET === "true"
-                      ? "sepolia."
-                      : ""
+                  `https://${process.env.NEXT_PUBLIC_IS_TESTNET === "true"
+                    ? "sepolia."
+                    : ""
                   }starkscan.co/tx/${txHash}`
                 )
               }

diff --git a/components/UI/screens/successScreen.tsx b/components/UI/screens/successScreen.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import Button from "../button";
-import Lottie from "lottie-react";
 import verifiedLottie from "../../../public/visuals/verifiedLottie.json";
+import LottieWrapper from "../lottieWrapper";
 
 type SuccessScreenProps = {
   buttonText: string;
@@ -16,7 +16,7 @@ const SuccessScreen: FunctionComponent<SuccessScreenProps> = ({
 }) => {
   return (
     <div className="sm:w-2/3 w-5/5 flex flex-col justify-center items-center">
-      <Lottie className="w-60" animationData={verifiedLottie} loop={false} />
+      <LottieWrapper className="w-60" animationData={verifiedLottie} loop={false} />
       <h1 className="sm:text-5xl text-3xl">{successMessage}</h1>
       <div className="mt-8 flex justify-center">
         <Button onClick={onClick}>{buttonText}</Button>

diff --git a/components/UI/txConfirmationModal.tsx b/components/UI/txConfirmationModal.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
-import Lottie from "lottie-react";
 import ModalMessage from "../UI/modalMessage";
 import verifiedLottie from "../../public/visuals/verifiedLottie.json";
 import Button from "./button";
+import LottieWrapper from "./lottieWrapper";
 
 type TxConfirmationModalProps = {
   txHash?: string;
@@ -24,7 +24,7 @@ const TxConfirmationModal: FunctionComponent<TxConfirmationModalProps> = ({
       closeModal={() => closeModal()}
       message={
         <div className="mt-7 flex flex-col items-center justify-center text-center">
-          <Lottie
+          <LottieWrapper
             className="w-52"
             animationData={verifiedLottie}
             loop={false}
@@ -33,10 +33,9 @@ const TxConfirmationModal: FunctionComponent<TxConfirmationModalProps> = ({
             className="text-sm underline cursor-pointer"
             onClick={() =>
               window.open(
-                `https://${
-                  process.env.NEXT_PUBLIC_IS_TESTNET === "true"
-                    ? "sepolia."
-                    : ""
+                `https://${process.env.NEXT_PUBLIC_IS_TESTNET === "true"
+                  ? "sepolia."
+                  : ""
                 }starkscan.co/tx/${txHash}`
               )
             }