外链

src/App.tsx

@@ -8,7 +8,7 @@ import { usePollCoreFarmData, useFetchProfile, usePollBlockNumber } from 'state/
 import { DatePickerPortal } from 'components/DatePicker'
 import { initAxios } from 'utils/request'
 import useToast from 'hooks/useToast'
-import { fetchUserInfo, clearUserInfo } from 'state/actions'
+import { fetchUserInfo, clearUserInfo, fetchOutInfo } from 'state/actions'
 import { useAccount } from 'state/userInfo/hooks'
 import GlobalStyle from './style/Global'
 import Menu from './components/Menu'
@@ -70,6 +70,7 @@ const App: React.FC = () => {
   const account = useAccount()
 
   useEffect(() => {
+    // dispatch(fetchOutInfo())
     initAxios(() => {
       dispatch(clearUserInfo)
     }, toast)

src/components/Menu/index.tsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
+import { useDispatch } from 'react-redux'
 import { useWeb3React } from '@web3-react/core'
 import { languageList } from 'config/localization/languages'
 import { useTranslation } from 'contexts/Localization'
 import useTheme from 'hooks/useTheme'
 import useAuth from 'hooks/useAuth'
-import { useDispatch } from 'react-redux'
 import { usePriceHccUsdt, useProfile } from 'state/hooks'
-import { useUnactiveAccount, useSignLogin, useAccount, useUserInfo } from 'state/userInfo/hooks'
+import { useUnactiveAccount, useSignLogin, useAccount, useUserInfo, useOutLink } from 'state/userInfo/hooks'
 import useWeb3Provider from 'hooks/useActiveWeb3React'
-import { clearUserInfo } from 'state/actions'
+import { clearUserInfo, fetchOutInfo } from 'state/actions'
+import { uccnDetail } from 'services/user'
 import config from './config'
 
 const Menu = (props) => {
+  // const [detail, setDetail] = useState({ userNumb: 0, tradingVolume: 0, outsideChainVos: [] })
+  // const getDetail = async () => {
+  //   const data = await uccnDetail()
+  //   setDetail(data)
+  // }
   const account = useAccount()
   const { login, logout } = useAuth()
   const [hasWalletLogin, setHasWalletLogin] = useState(false)
@@ -23,6 +29,8 @@ const Menu = (props) => {
   const dispatch = useDispatch()
   const { profile } = useProfile()
   const userInfo = useUserInfo()
+  // const detail = useOutLink()
+  // console.log(userInfo)
   const { currentLanguage, setLanguage, t } = useTranslation()
   const inviteUrl = useMemo(() => {
     return userInfo?.inviteCode ? `${window.location.origin}?inviteCode=${userInfo.inviteCode}` : window.location.origin
@@ -43,6 +51,18 @@ const Menu = (props) => {
       sign()
     }
   }, [unActiveAccount, hasWalletLogin, library])
+  // dispatch(fetchOutInfo())
+  // const detail = useOutLink()
+  // console.log('detail123456:', detail.outsideChainVos)
+  useEffect(() => {
+    // dispatch(fetchOutInfo())
+    // getDetail()
+    // const detail = useOutLink()
+    dispatch(fetchOutInfo())
+  }, [])
+  const detail = useOutLink()
+  console.log(config(t))
+
   return (
     <UikitMenu
       account={account}
@@ -56,6 +76,7 @@ const Menu = (props) => {
       setLang={setLanguage}
       cakePriceUsd={hccPriceUsdt.toNumber()}
       links={config(t)}
+      outLink={detail.outsideChainVos}
       {...props}
     />
   )

src/state/actions.ts

@@ -10,7 +10,7 @@ export {
   updateUserPendingReward,
   updateUserStakedBalance,
 } from './pools'
-export { setUserInfo, clearUserInfo, fetchUserInfo } from './userInfo'
+export { setUserInfo, clearUserInfo, fetchUserInfo, fetchOutInfo } from './userInfo'
 export { fetchReferralInfoAsync } from './referral'
 export { fetchBoardsPublicDataAsync, fetchBoardUserDataAsync } from './boards'
 export { profileFetchStart, profileFetchSucceeded, profileFetchFailed } from './profile'

src/state/types.ts

@@ -12,7 +12,7 @@ import {
   Team,
   BoardConfig,
 } from 'config/constants/types'
-import { UserInfo } from 'types/user'
+import { UserInfo, OutLink } from 'types/user'
 import { ReferralConfigInfo, ReferralRewardInfo } from 'types/referral'
 
 export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, State, unknown, AnyAction>
@@ -481,6 +481,7 @@ export interface UserInfoState {
   userInfo: UserInfo
   token?: string
   account?: string
+  outLink?: OutLink
 }
 
 export interface ReferralState {

src/state/userInfo/hooks.ts

@@ -29,6 +29,9 @@ export const useToken = () => {
 export const useUserInfo = () => {
   return useSelector((state: State) => state.userInfo.userInfo)
 }
+export const useOutLink = () => {
+  return useSelector((state: State) => state.userInfo.outLink)
+}
 
 // 签名登录
 export const useSignLogin = () => {

src/state/userInfo/index.ts

@@ -1,11 +1,12 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
-import { queryUserInfo } from 'services/user'
+import { queryUserInfo, uccnDetail } from 'services/user'
 import { CACHE_TOKEN, CACHE_ACCOUNT, CACHE_USERINFO } from 'config/constants/cacheKey'
-import { UserInfo } from 'types/user'
+import { UserInfo, OutLink } from 'types/user'
 import { UserInfoState } from '../types'
 
 const initialState: UserInfoState = {
   userInfo: {},
+  outLink: {},
   token: localStorage.getItem(CACHE_TOKEN),
   account: localStorage.getItem(CACHE_ACCOUNT),
 }
@@ -15,6 +16,11 @@ export const fetchUserInfo = createAsyncThunk<UserInfo, null>('userInfo/fetchUse
   return result
 })
 
+export const fetchOutInfo = createAsyncThunk<OutLink, null>('uccn/detail', async () => {
+  const result = await uccnDetail()
+  return result
+})
+
 export const userInfoSlice = createSlice({
   name: 'userInfo',
   initialState,
@@ -22,6 +28,7 @@ export const userInfoSlice = createSlice({
     setUserInfo: (state, action) => {
       const info = action.payload
       state.userInfo = info
+      state.outLink = info.outLink
       state.account = info.address
       info.token && (state.token = info.token)
       localStorage.setItem(CACHE_TOKEN, state.token)
@@ -36,15 +43,22 @@ export const userInfoSlice = createSlice({
       localStorage.removeItem(CACHE_USERINFO)
       localStorage.removeItem(CACHE_ACCOUNT)
     },
+    setOutLinkInfo: (state, action) => {
+      state.outLink = action.payload.outLink
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchUserInfo.fulfilled, (state, action) => {
       state.userInfo = action.payload
       localStorage.setItem(CACHE_USERINFO, JSON.stringify(state.userInfo))
     })
+    builder.addCase(fetchOutInfo.fulfilled, (state, action) => {
+      localStorage.setItem('cs', 'cs')
+      state.outLink = action.payload
+    })
   },
 })
 
 // Actions
-export const { setUserInfo, clearUserInfo } = userInfoSlice.actions
+export const { setUserInfo, clearUserInfo, setOutLinkInfo } = userInfoSlice.actions
 export default userInfoSlice.reducer

src/types/user.ts

@@ -4,3 +4,24 @@ export interface UserInfo {
   name?: string
   address?: string
 }
+
+export interface OutLink {
+  outSideChainNumb?: string
+  outsideChainVos?: OUtLinkList[]
+  telegramNumb?: string
+  tradingVolume?: string
+  userNumb?: string
+}
+
+export interface OUtLinkList {
+  content?: string
+  cover?: string
+  createdAt?: string
+  enabled?: boolean
+  englishName?: string
+  id?: string
+  link?: string
+  name?: string
+  orderNumber?: string
+  updatedAt?: string
+}

src/views/Home/components/FristCom.tsx

@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
+import { useDispatch } from 'react-redux'
+import { useOutLink } from 'state/userInfo/hooks'
+import { fetchOutInfo } from 'state/actions'
 import { uccnDetail } from 'services/user'
 import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
+import { OutLink } from 'types/user'
 
 import FlexItemCom from './FlexItemCom'
 
@@ -128,23 +132,22 @@ const ScoreDiv = styled(Flex)`
   }
 `
 const InfoDiv = styled.div``
-
 const FristCom: React.FC = () => {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
   // const [burned, BurnedState] = useState([
   //   { id: 'userNumb', name: '持有人数量', value: '0' },
   //   { id: 'tradingVolume', name: '交易量', value: '0' },
   //   { id: 3, name: '市值', value: '62.55%' },
   // ])
-  const [detail, setDetail] = useState({ userNumb: 0, tradingVolume: 0, outsideChainVos: [] })
-  const getDetail = async () => {
-    const data = await uccnDetail()
-    setDetail(data)
-  }
-
-  useEffect(() => {
-    getDetail()
-  }, [])
+  // const [detail, setDetail] = useState({ userNumb: 0, tradingVolume: 0, outsideChainVos: [] })
+  // const getDetail = async () => {
+  //   const data = await uccnDetail()
+  //   setDetail(data)
+  // }
+  dispatch(fetchOutInfo())
+  const detail = useOutLink()
+  console.log('detail123:', detail)
   const openLink = (link) => {
     window.open(link)
   }
@@ -167,9 +170,10 @@ const FristCom: React.FC = () => {
                 </RadiusBtn>
                 {/* <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn> */}
                 <Flex>
-                  {detail.outsideChainVos.map((item) => {
+                  {detail.outsideChainVos?.map((item) => {
                     return (
                       <BtnImage
+                        key={item.id}
                         style={{ borderRadius: '50%' }}
                         src={item.cover}
                         alt={item.name}
@@ -186,8 +190,8 @@ const FristCom: React.FC = () => {
             </InfoDiv>
           </FlexDiv>
           <ScoreDiv>
-            <FlexItemCom name={t('Number of holders')} valueNum={detail.userNumb} />
-            <FlexItemCom name={t('Your volume')} valueNum={detail.tradingVolume} />
+            <FlexItemCom name={t('Number of holders')} valueNum={detail?.userNumb} />
+            <FlexItemCom name={t('Your volume')} valueNum={detail?.tradingVolume} />
             <FlexItemCom name={t('market value')} valueNum={0} />
             {/* {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />

src/views/Referral/components/Connected.tsx

@@ -86,8 +86,8 @@ const ConnectedCom: React.FC = () => {
         />
       </>
       <FooterBtn>
-        {referralNormalConfigInfo.receiveLimit <=
-        referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+        {referralNormalConfigInfo?.receiveLimit <=
+        referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
           <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
             {t('Claim now')}
           </ButtonGet>

src/views/Referral/components/Regimental.tsx

@@ -144,8 +144,8 @@ const RegimentalCom: React.FC = () => {
         </>
 
         <FooterBtn>
-          {referralCommanderConfigInfo.receiveLimit <=
-          referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+          {referralCommanderConfigInfo?.receiveLimit <=
+          referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
             <ButtonGet variant="secondary" disabled={loading} onClick={handleWithdraw}>
               {t('Claim now')}
             </ButtonGet>
@@ -158,7 +158,7 @@ const RegimentalCom: React.FC = () => {
         <FooterDiv>
           <TextDiv>{`${t(
             'By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins',
-          )}${formatDivNumber(referralCommanderConfigInfo.dividendFirst)}%${t('The commission')}`}</TextDiv>
+          )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${t('The commission')}`}</TextDiv>
           {/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
           <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
           <TextDiv color="textSubtle">{t('commission fee')}</TextDiv> */}