no message

public/index.html

@@ -38,11 +38,54 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="text/javascript">
+      function setThemeColor(){
+        var meta = document.querySelector('meta[name=theme-color]');
+        if (meta) {
+          var color="#1b1c20";
+          var preferences=localStorage.getItem('preferences');
+          if (preferences!=null){
+            var json=JSON.parse(preferences);
+            if (json&&json.theme==="light"){
+              color="#FAFAF8";
+            }
+          }
+          meta.setAttribute('content', color);
+        }
+      }
+      function reProgressiermeta(){
+        let v=progressier.meta;
+        if (v){
+          progressier.meta.createAndroidMeta = async function() {
+            var e = await v.getData("toolbarColor");
+            var t = await v.getData("wrapperOnlyMode");
+            if (!e || t) {
+              e = await v.getData("themeColor")
+            }
+            let i = await v.getData("currentlyOnEmbeddablePage");
+            if (i && t) {
+              return
+            }
+            v.createMeta("meta", "name", "mobile-web-app-capable", {
+              content: "yes"
+            });
+            // v.createMeta("meta", "name", "theme-color", {
+            //   content: e
+            // })
+          }
+        }
+      }
+      function initProgressier(){
         window.addEventListener("load", function(){
-          progressier.add({
-            id: "pDy0w3lGo3j9gL2zwK"
-          });
+          if (progressier!=null){
+            progressier.add({
+              id: "pDy0w3lGo3j9gL2zwK"
+            });
+            reProgressiermeta();
+          }
         });
+      }
+      initProgressier();
+      setThemeColor();
     </script>
   </body>
 </html>

src/App.js

@@ -53,6 +53,7 @@ import {useBlocker} from "react-router";
 import FontFaceObserver from 'fontfaceobserver';
 import {getTurnplate} from "@features/turnplateSlice";
 import {LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
+import LoadingFull from "@components/Loading/LoadingFull";
 const App = () => {
     const dispatch = useDispatch();
     const fetchStatus=useSelector(getFetchStatus);
@@ -174,7 +175,7 @@ const App = () => {
         return (
             <>
                 {
-                    fetchStatus===REQ_STATUS.IDLE?<Layout />:(<LoadingScreen />)
+                    fetchStatus===REQ_STATUS.IDLE?<Layout />:(<LoadingFull />)
                 }
             </>
         )

src/api/config.js

@@ -36,7 +36,7 @@ export const APP_RECHARGE_CONFIG=BASE_PREFIX+"recharge/gear";
 export const APP_FIRSTPAY_CONFIG=BASE_PREFIX+"recharge/firstPayConfig";
 export const APP_ACCOUNTS_PAY_INFO=BASE_PREFIX+"api/get_accounts_pay_info";
 export const APP_PAYMENT_ORDER=BASE_PREFIX+"payment_entry/pay";
-export const APP_PAY_ORDER_LIST="api/pay/orderList";
+export const APP_PAY_ORDER_LIST=BASE_PREFIX+"pay/orderList";
 //pay
 //withdraw
 export const APP_WITHDRAW_TAX="api/api/withDrawTax";

src/assets/singlesvg/failed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#f44336" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><path fill="#fff" d="M29.656,15.516l2.828,2.828l-14.14,14.14l-2.828-2.828L29.656,15.516z"/><path fill="#fff" d="M32.484,29.656l-2.828,2.828l-14.14-14.14l2.828-2.828L32.484,29.656z"/></svg>

src/assets/singlesvg/pending.svg

@@ -0,0 +1,5 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg" class="s-ion-icon">
+<rect width="55" height="55" rx="27.5" fill="#EDC921"></rect>
+<rect width="3" height="21" rx="1.5" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 29 10)" fill="white"></rect>
+<rect width="3" height="21" rx="1.5" transform="matrix(1.31134e-07 -1 -1 -1.31134e-07 47 31)" fill="white"></rect>
+</svg>

src/components/Loading/LoadingFull.jsx

@@ -0,0 +1,10 @@
+import LoadingScreen from "@components/LoadingScreen";
+
+const LoadingFull=()=>{
+    return (
+        <div className="loading-full">
+            <LoadingScreen/>
+        </div>
+    )
+}
+export default LoadingFull;

src/components/Loading/LoadingIn.jsx

@@ -0,0 +1,11 @@
+import LoadingScreen from "@components/LoadingScreen";
+import React from "react";
+
+const LoadingIn=()=>{
+    return (
+        <div className={"loading-in"}>
+            <LoadingScreen></LoadingScreen>
+        </div>
+    )
+}
+export default LoadingIn;

src/components/LoadingScreen.jsx

@@ -3,12 +3,14 @@ import Lottie from 'lottie-react';
 import Spring from '@components/Spring';
 
 // assets
-import ball from '@assets/logo.json';
+// import ball from '@assets/logo.json';
+import logo from '@assets/logo.json';
 
-const LoadingScreen = () => {
+const LoadingScreen = ({...props}) => {
     return (
-        <Spring className="d-flex align-items-center justify-content-center flex-1 w-100 h-100">
-            <Lottie animationData={ball} />
+        <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100">
+            {/*<Lottie animationData={ball} />*/}
+            <Lottie animationData={logo} />
         </Spring>
     )
 }

src/db/routes.js

@@ -291,7 +291,7 @@ export const routes=[
         icon:"",
         fill:";;",//icon 颜色 默认 选中 本身颜色
         component:"mail",
-        login:0,//0,1 检不检查登录
+        login:1,//0,1 检不检查登录
         lpath:"#/signin",//登录path
         subs:[]
     },
@@ -304,7 +304,7 @@ export const routes=[
         icon:"",
         fill:";;",//icon 颜色 默认 选中 本身颜色
         component:"mailDetail",
-        login:0,//0,1 检不检查登录
+        login:1,//0,1 检不检查登录
         lpath:"#/signin",//登录path
         subs:[]
     },

src/features/paySlice.js

@@ -89,11 +89,14 @@ const paymentOrderStatus=(state,status,arg)=>{
 const reducerPayOrderList=(state,action,arg)=>{
     let payload=action.payload;
     if (payload!=null&&payload.code===200){
-
+        let data=payload.data;
+        if (data){
+            state.payOrderList=data.data;
+        }
     }
 }
 const payOrderListStatus=(state,status,arg)=>{
-
+    state.status.PayOrderList=status;
 }
 const reducerWithdrawTax=(state,action,arg)=>{
     let payload=action.payload;
@@ -244,6 +247,9 @@ export const getChangePayPassStatus=(state)=>{
 export const getPayOrderStatus=(state)=>{
     return state.pay.status.PayOrderList;
 }
+export const getPayOrderList=(state)=>{
+    return state.pay.payOrderList;
+}
 export default Pay.reducer;
 
 export const reqPayConfig=(dispatch,userInfo)=>{

src/layout/Layout.jsx

@@ -23,6 +23,7 @@ import MsgBox from "@components/MsgBox";
 import WDPassPrompt from "@widgets/WWithdraw/PassPrompt/WDPassPrompt";
 import useAuthLockRoute from "@hooks/useAuthLockRoute";
 import WHallWheel from "@widgets/WCashWheel/WHallWheel/WHallWheel";
+import LoadingIn from "@components/Loading/LoadingIn";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=()=>{
@@ -52,7 +53,7 @@ const Layout=()=>{
                 {isMobile() && <BottomNav/>}
                 <AppContainer>
                     <div className="app_container-content d-flex flex-column flex-1">
-                        <Suspense fallback={<LoadingScreen/>}>
+                        <Suspense fallback={<LoadingIn />}>
                             <CBrowserRouter isLogin={isLogin} routes={inRoutes}/>
                         </Suspense>
                     </div>

src/locales/languages/en_US.json

@@ -177,7 +177,18 @@
       "source": "Source",
       "orderNumber": "Order number",
       "status": "Status",
-      "time": "Time"
+      "time": "Time",
+      "status_0": "Pending",
+      "status_1": "Success",
+      "status_2": "Failed",
+      "details": {
+        "title": "Recharge Details",
+        "label_create": "Creation time",
+        "label_complete": "Complete time",
+        "label_transtype": "Transaction Type",
+        "label_number": "Request number",
+        "btn_confirm": "Confirm"
+      }
     }
   },
   "game": {

src/styles/_global.scss

@@ -204,3 +204,11 @@ input, input::placeholder {
 .progressier_bar_open{
     margin-top: 65px;
 }
+.loading-in{
+    width: 100%;
+    height: 75vh;
+}
+.loading-full{
+    width: 100vw;
+    height: 100vh;
+}

src/styles/_utils.scss

@@ -3,10 +3,15 @@
 .w-100 {
   width: 100%;
 }
-
+.w-100vw{
+    width: 100vw;
+}
 .h-100 {
   height: 100%;
 }
+.h-100vh{
+    height: 100vh;
+}
 
 .d-block {
     display: block;

src/widgets/ModuleGroup/index.jsx

@@ -9,7 +9,7 @@ import AllWidgets from "@widgets/index";
 import styles from "./styles.module.scss";
 import BreadCrumb from "@layout/BreadCrumb";
 import Spring from "@components/Spring";
-
+import LoadingIn from "@components/Loading/LoadingIn";
 const ModuleGroup=({pageID})=>{
     const dispatch = useDispatch();
     const status=useSelector(getFetchStatus);
@@ -24,7 +24,7 @@ const ModuleGroup=({pageID})=>{
         if (status===REQ_STATUS.IDLE){
             if (modules==null)return (<></>)
             return (
-                <Suspense fallback={<LoadingScreen />}>
+                <Suspense fallback={<LoadingIn />}>
                     <Spring type={"slideUp"}>
                         <div className={`${styles.container} ${isMobile()?'':'page-max-width-wrap'}`}>
                             <BreadCrumb />
@@ -46,7 +46,7 @@ const ModuleGroup=({pageID})=>{
         }
         else
         {
-            return (<LoadingScreen />)
+            return (<LoadingIn />)
         }
     }
     return (

src/widgets/WDeposit/WRechargeHistory/WRechargeHistory.jsx

@@ -1,15 +1,28 @@
 import styles from "./styles.module.scss";
 import Spring from "@components/Spring";
-import {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {useDispatch, useSelector} from "react-redux";
-import {getPayOrderStatus} from "@features/paySlice";
+import {getPayOrderList, getPayOrderStatus} from "@features/paySlice";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
 import {reqPayOrderList} from "@features/api";
+import {formatCash} from "@utils/helpers";
+import {toast} from "react-toastify";
+import {CopyToClipboard} from "react-copy-to-clipboard";
+import SvgIcon from "@components/SvgIcon";
+import {ReactComponent as PixLogo} from '@assets/singlesvg/pix.svg';
+import Popup from "@components/Popup";
+import {ReactComponent as SuccssLogo} from '@assets/singlesvg/succss.svg';
+import {ReactComponent as PendingLogo} from '@assets/singlesvg/pending.svg';
+import {ReactComponent as FailedLogo} from '@assets/singlesvg/failed.svg';
+
 const i18n=global.i18n;
 const WRechargeHistory = ({ close }) => {
     const status=useSelector(getPayOrderStatus);
+    const orderList=useSelector(getPayOrderList);
     const dispatch=useDispatch();
+    const [showDetails,setShowDetails]=useState(false);
+    const [detailInfo,setDetailInfo]=useState(null);
     useEffect(()=>{
         dispatch(reqPayOrderList());
     },[])
@@ -17,14 +30,148 @@ const WRechargeHistory = ({ close }) => {
         if (status===REQ_STATUS.LOADING){
             return (<SmallLoading></SmallLoading>)
         }
+        if (orderList==null)return (<></>);
         return (
             <Spring type="slideUp" className={styles.content}>
+                {
+                    orderList.map((item,index)=>{
+                        let amount=Number(item.amount);
+                        amount=formatCash(amount);
+                        let time=item.created_at;
+                        if (item.finished_at!=null&&item.finished_at!==""){
+                            time=item.finished_at;
+                        }
+                        let statusTxt=i18n.t("deposit.HistoryListPanel.status_2");
+                        let status_cls=styles.status_failed;
+                        let status=parseInt(item.pay_status);
+                        if (status===0){
+                            statusTxt=i18n.t("deposit.HistoryListPanel.status_0");
+                            status_cls=styles.status_pending;
+                        }
+                        else if (status===1){
+                            statusTxt=i18n.t("deposit.HistoryListPanel.status_1");
+                            status_cls=styles.status_success;
+                        }
+                        return (
+                            <button key={index} className={styles.item_con} onClick={()=>{
+                                setDetailInfo(item);
+                                setShowDetails(true);
+                            }}>
+                                <div className={styles.item}>
+                                    <div className={`${styles.pay_type_con} ${styles.title}`}>
+                                        <PixLogo className={styles.logo}></PixLogo>
+                                        PIX
+                                    </div>
+                                    <div className={styles.title}>{global.DOLLAR+amount}</div>
+                                </div>
+                                <div className={styles.item}>
+                                    <div>{time}</div>
+                                </div>
+                                <div className={styles.item}>
+                                    <CopyToClipboard text={item.payment_sn} onCopy={() => {
+                                        toast.success(i18n.t("copy_success"));
+                                    }}>
+                                        <div className={styles.payment_sn_con} onClick={(event)=>{
+                                            event.stopPropagation();
+                                        }}>
+                                            {item.payment_sn}
+                                            <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                                        </div>
+                                    </CopyToClipboard>
+                                    <div className={status_cls}>
+                                        {statusTxt}
+                                    </div>
+                                </div>
+                            </button>
+                        )
+                    })
+                }
             </Spring>
         )
     }
+    const renderDetails=()=>{
+        let item=detailInfo;
+        if (item==null)return (<></>);
+        let amount=Number(item.amount);
+        amount=formatCash(amount);
+        let status=parseInt(item.pay_status);
+        // status=2
+        let statusTxt=i18n.t("deposit.HistoryListPanel.status_2");
+        let status_cls=styles.detail_failed;
+        let Logo=FailedLogo;
+        if (status===0){
+            statusTxt=i18n.t("deposit.HistoryListPanel.status_0");
+            status_cls=styles.detail_pending;
+            Logo=PendingLogo;
+        }
+        else if (status===1){
+            statusTxt=i18n.t("deposit.HistoryListPanel.status_1");
+            status_cls=styles.detail_success;
+            Logo=SuccssLogo;
+        }
+        return (
+            <Popup onClose={()=>{
+                setShowDetails(false)
+            }} open={showDetails}>
+                <div className={styles.detail}>
+                    <div className={styles.top}>
+                        <div>{i18n.t("deposit.HistoryListPanel.details.title")}</div>
+                        <div className={styles.status}>
+                            <Logo className={styles.logo}></Logo>
+                            <div className={status_cls}>
+                                {statusTxt}
+                            </div>
+                        </div>
+                        <div>{global.DOLLAR + amount}</div>
+                    </div>
+                    <div className={styles.line}></div>
+                    <div className={styles.bottom}>
+                        <div className={styles.item}>
+                            <div
+                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_create")}</div>
+                            <div>{item.created_at}</div>
+                        </div>
+                        {
+                            item.finished_at != null && item.finished_at !== "" ? (
+                                <div className={styles.item}>
+                                    <div
+                                        className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_complete")}</div>
+                                    <div>{item.finished_at}</div>
+                                </div>
+                            ) : (<></>)
+                        }
+                        <div className={styles.item}>
+                            <div
+                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_transtype")}</div>
+                            <div>PIX</div>
+                        </div>
+                        <div className={styles.item}>
+                            <div
+                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_number")}</div>
+                            <CopyToClipboard text={item.payment_sn} onCopy={() => {
+                                toast.success(i18n.t("copy_success"));
+                            }}>
+                                <div className={styles.number}>
+                                    {item.payment_sn}
+                                    <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
+                                </div>
+                            </CopyToClipboard>
+                        </div>
+                    </div>
+                    <div className={styles.line}></div>
+                    <button className={"button-green"} onClick={()=>{
+                        setShowDetails(false);
+                    }}>
+                        {i18n.t("deposit.HistoryListPanel.details.btn_confirm")}
+                    </button>
+                </div>
+            </Popup>
+        )
+    }
     return (
         <div className={styles.container}>
             {renderContent()}
+            {renderDetails()}
         </div>
     )
 }

src/widgets/WDeposit/WRechargeHistory/styles.module.scss

@@ -13,7 +13,128 @@
   font-size: 0.9rem;
 }
 .content{
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  & .item_con{
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    gap: 0.2rem;
+    & .item{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--text);
+      width: 100%;
+      & .pay_type_con{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.2rem;
+        & .logo{
+          width: 1.4rem;
+          height: 1.4rem;
+          fill: var(--primary-color);
+        }
+      }
+      & .title{
+        font-size: 1rem;
+        color: var(--header);
+      }
+      & .payment_sn_con{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        user-select: text;
+        & .logo{
+          width: 1.2rem;
+          height: 1.2rem;
+          fill: var(--text);
+        }
+      }
+      & .status{
+        &_success{
+          color: var(--primary-color);
+        }
+        &_failed{
+          color: var(--red);
+        }
+        &_pending{
+          color: var(--coin-yellow);
+        }
+      }
+    }
+  }
+}
+.detail{
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  width: 100%;
+  &_success{
+    color: var(--primary-color);
+  }
+  &_failed{
+    color: var(--red);
+  }
+  &_pending{
+    color: var(--coin-yellow);
+  }
+  & .top{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: 1rem;
+    color: var(--header);
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    & .status{
+      display: flex;
+      flex-direction: column;
+      font-size: 0.875rem;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      & .logo{
+        width: 3.5rem;
+        height: 3.5rem;
+      }
+    }
+  }
+  & .line{
+    border-top: 1px dashed var(--card-line);
+  }
+  & .bottom{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0.25rem;
+    font-size: 0.825rem;
+    color: var(--header);
+    & .label{
+      color: var(--text);
+    }
+    & .item{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    & .number{
+      display: flex;
+      align-items: center;
+      gap: 0.2rem;
+      user-select: text;
+      & .logo{
+        width: 1.2rem;
+        height: 1.2rem;
+        fill: var(--header);
+      }
+    }
+  }
 }