From eacc356631c3f357d1c51d276b98ea7c6b679f6a Mon Sep 17 00:00:00 2001 From: Fricoben Date: Mon, 2 Dec 2024 12:32:08 +0800 Subject: [PATCH] fix: add lottie wrapper --- components/UI/confirmationTx.tsx | 7 ++-- components/UI/isSendingTx.tsx | 6 ++-- components/UI/lottieWrapper.tsx | 39 +++++++++++++++++++++ components/UI/modalMessage.tsx | 4 +-- components/UI/registerConfirmationModal.tsx | 11 +++--- components/UI/screens/successScreen.tsx | 4 +-- components/UI/txConfirmationModal.tsx | 11 +++--- 7 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 components/UI/lottieWrapper.tsx diff --git a/components/UI/confirmationTx.tsx b/components/UI/confirmationTx.tsx index ac2159b6..0aba7223 100644 --- 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 = ({ Your Transaction is on it's way !

- {" "} + {" "}

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 index c9bf11f9..c75970d2 100644 --- 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 !

- +
-
diff --git a/components/UI/lottieWrapper.tsx b/components/UI/lottieWrapper.tsx new file mode 100644 index 00000000..6cbcebd5 --- /dev/null +++ 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 = ({ + animationData, + className, + loop = false, + autoplay = true, + style, + onClick, + ...props +}) => { + const Lottie = dynamic(() => import('lottie-react'), { + ssr: false + }); + + return ( + + ) +} + +export default LottieWrapper \ No newline at end of file diff --git a/components/UI/modalMessage.tsx b/components/UI/modalMessage.tsx index c5378796..2e0369b9 100644 --- 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 = ({

{title}

{lottie ? (
- +
) : null} diff --git a/components/UI/registerConfirmationModal.tsx b/components/UI/registerConfirmationModal.tsx index e346efd6..75663b4d 100644 --- 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={
- 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 index 7e25d9ca..9e63fbb8 100644 --- 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 = ({ }) => { return (
- +

{successMessage}

diff --git a/components/UI/txConfirmationModal.tsx b/components/UI/txConfirmationModal.tsx index 18412943..bf82eb05 100644 --- 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 = ({ closeModal={() => closeModal()} message={
- = ({ 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}` ) }