fix: dependencies version and SSR lottie rendering

components/UI/confirmationTx.tsx

@@ -2,7 +2,9 @@ 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 dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 type ConfirmationTxProps = {
   closeModal: () => void;

components/UI/isSendingTx.tsx

@@ -2,9 +2,10 @@
 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 dynamic from "next/dynamic";
 
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 const IsSendingTx: FunctionComponent = () => {
   return (
     <div className={modalStyles.menu}>

components/UI/modalMessage.tsx

@@ -2,7 +2,9 @@ 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 dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 type ModalMessageProps = {
   title: string;

components/UI/registerConfirmationModal.tsx

@@ -1,8 +1,10 @@
 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 dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 type RegisterConfirmationModalProps = {
   txHash?: string;

components/UI/screens/successScreen.tsx

@@ -1,7 +1,9 @@
 import React, { FunctionComponent } from "react";
 import Button from "../button";
-import Lottie from "lottie-react";
 import verifiedLottie from "../../../public/visuals/verifiedLottie.json";
+import dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 type SuccessScreenProps = {
   buttonText: string;

components/UI/txConfirmationModal.tsx

@@ -1,8 +1,10 @@
 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 dynamic from "next/dynamic";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 type TxConfirmationModalProps = {
   txHash?: string;