version 2 - beta

src/common/CustomLoader.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import './customloader.css'
+export const CustomLoader = () => {
+  return (
+    <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+  )
+}

src/common/LazyLoad.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+import CircularProgress from '@mui/material/CircularProgress'
+
+interface Props {
+  onLoadMore: () => Promise<void>
+}
+
+const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
+  const [isFetching, setIsFetching] = useState<boolean>(false)
+
+  const firstLoad = useRef(false)
+  const [ref, inView] = useInView({
+    threshold: 0.7
+  })
+
+  useEffect(() => {
+    if (inView) {
+      setIsFetching(true)
+      onLoadMore().finally(() => {
+        setIsFetching(false)
+        firstLoad.current = true
+      })
+    }
+  }, [inView])
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: '25px'
+      }}
+    >
+      <div
+        style={{
+          visibility: isFetching ? 'visible' : 'hidden'
+        }}
+      >
+        <CircularProgress />
+      </div>
+    </div>
+  )
+}
+
+export default LazyLoad

src/common/customloader.css

@@ -0,0 +1,64 @@
+
+.lds-ellipsis {
+    color: white
+  }
+.lds-ellipsis,
+.lds-ellipsis div {
+  box-sizing: border-box;
+}
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33.33333px;
+  width: 13.33333px;
+  height: 13.33333px;
+  border-radius: 50%;
+  background: currentColor;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+

src/common/useModal.tsx

@@ -0,0 +1,64 @@
+import { useRef, useState } from 'react';
+
+interface State {
+    isShow: boolean;
+}
+export const useModal = () => {
+    const [state, setState] = useState<State>({
+        isShow: false,
+    });
+    const [message, setMessage] = useState({
+        publishFee: "",
+        message: ""
+    });
+    const promiseConfig = useRef<any>(null);
+    const show = async (data) => {
+        setMessage(data)
+        return new Promise((resolve, reject) => {
+            promiseConfig.current = {
+                resolve,
+                reject,
+            };
+            setState({
+                isShow: true,
+            });
+        });
+    };
+
+    const hide = () => {
+        setState({
+            isShow: false,
+        });
+        setMessage({
+            publishFee: "",
+        message: ""
+        })
+    };
+
+    const onOk = (payload:any) => {
+        const { resolve } = promiseConfig.current;
+        setMessage({
+            publishFee: "",
+        message: ""
+        })
+        hide();
+        resolve(payload);
+    };
+
+    const onCancel = () => {
+        const { reject } = promiseConfig.current;
+        hide();
+        reject();
+        setMessage({
+            publishFee: "",
+        message: ""
+        })
+    };
+    return {
+        show,
+        onOk,
+        onCancel,
+        isShow: state.isShow,
+        message
+    };
+};