部分军团长

src/views/Referral/components/BuyNftModal.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
+import { useReferralNormalConfigInfo } from 'state/referral/hooks'
 import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
 import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
-import { useBuyTransaction } from '../hooks'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
@@ -50,11 +50,8 @@ const ImageDiv = styled(Image)`
 
 const BuyNftModal: React.FC = () => {
   const { t } = useTranslation()
-  const sendBuyTransaction = useBuyTransaction()
+  const referralRewardInfo = useReferralNormalConfigInfo()
   // const onDismiss = () => {}
-  const handleBuy = () => {
-    sendBuyTransaction()
-  }
   return (
     <ModalDiv title={t('Buy commander NFT')}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
@@ -66,8 +63,8 @@ const BuyNftModal: React.FC = () => {
           />
           <TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
           <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
-          <FlexCom name={t('First stage sharing ratio')} value="10％" />
+          <FlexCom name={t('First stage sharing ratio')} value={`${referralRewardInfo.dividendFirst}%`} />
-          <FlexCom name={t('Secondary split ratio')} value="5％" />
+          <FlexCom name={t('Secondary split ratio')} value={`${referralRewardInfo.dividendSecond}%`} />
           <FlexCom name={t('Contract address')} value={t('Contract address')} />
           <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
           <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
@@ -75,7 +72,7 @@ const BuyNftModal: React.FC = () => {
       </Flex>
 
       <Flex>
-        <UpBtn onClick={handleBuy}>{t('Buy It Now')}</UpBtn>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
       </Flex>
     </ModalDiv>
   )

src/views/Referral/components/Connected.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Button, useModal, Text } from '@pancakeswap/uikit'
+import { inviteReceive } from 'services/referral'
+import { useReferralNormalConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
 import HeaderMain from './HeaderMain'
@@ -13,6 +15,13 @@ const ButtonDiv = styled(Button)`
   border: 1px solid ${({ theme }) => theme.colors.textDisabled};
   color: ${({ theme }) => theme.colors.textDisabled};
 `
+const ButtonGet = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid #1fc7d4;
+  color: #1fc7d4;
+`
 
 const UpBtn = styled(Button)`
   width: 100%;
@@ -41,17 +50,34 @@ const TextDiv = styled(Text)`
 const ConnectedCom: React.FC = () => {
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
-
+  const referralNormalConfigInfo = useReferralNormalConfigInfo()
+  console.log('referralNormalConfigInfo:', referralNormalConfigInfo)
+  const referralRewardInfo = useReferralRewardInfo()
+  console.log('referralRewardInfo:', referralRewardInfo)
+  const getInviteReceive = async () => {
+    await inviteReceive()
+  }
   return (
     <MainDiv>
       <HeaderMain title={t('recommend')} />
       <>
-        <FlexCom name={t('The lower the number of')} value="100000(人)" />
+        <FlexCom name={t('The lower the number of')} value={`${referralRewardInfo.inviteNum}(人)`} />
-        <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
-        <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+        <FlexCom
+          name={t('To get profit')}
+          value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+        />
       </>
       <FooterBtn>
+        {referralNormalConfigInfo.receiveLimit <=
+        referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+          <ButtonGet onClick={getInviteReceive} variant="secondary">
+            {t('Claim now')}
+          </ButtonGet>
+        ) : (
           <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+        )}
+
         <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
       </FooterBtn>
       <FooterDiv>

src/views/Referral/components/Regimental.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
+import { inviteReceive } from 'services/referral'
+import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
 import { Text, Image, Button } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import HeaderMain from './HeaderMain'
@@ -12,6 +14,13 @@ const ButtonDiv = styled(Button)`
   border: 1px solid ${({ theme }) => theme.colors.textDisabled};
   color: ${({ theme }) => theme.colors.textDisabled};
 `
+const ButtonGet = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid #1fc7d4;
+  color: #1fc7d4;
+`
 
 const UpBtn = styled(Button)`
   width: 100%;
@@ -65,6 +74,12 @@ const LogoImage = styled.div`
 
 const RegimentalCom: React.FC = () => {
   const { t } = useTranslation()
+  const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
+  console.log(referralCommanderConfigInfo)
+  const referralRewardInfo = useReferralRewardInfo()
+  const getInviteReceive = async () => {
+    await inviteReceive()
+  }
   return (
     <ContentDiv>
       <MainDiv>
@@ -79,7 +94,7 @@ const RegimentalCom: React.FC = () => {
             name={t('HCC total revenue percentage :10%')}
             paddings="0 10px"
             leftColor="textSubtle"
-            value="100000.00(HCC)"
+            value={`${referralCommanderConfigInfo.dividendFirst}%`}
           />
           <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
           <FlexCom
@@ -88,13 +103,24 @@ const RegimentalCom: React.FC = () => {
             leftColor="textSubtle"
             value="100000.00(HCC)"
           />
-          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('HCC total revenue')} value={`${referralRewardInfo.inviteReward}(HCC)`} />
-          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          <FlexCom
+            name={t('To get profit')}
+            value={`${referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive}(HCC)`}
+          />
         </>
 
         <FooterBtn>
+          {referralCommanderConfigInfo.receiveLimit <=
+          referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+            <ButtonGet variant="secondary" onClick={getInviteReceive}>
+              {t('Claim now')}
+            </ButtonGet>
+          ) : (
             <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
-          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
+          )}
+
+          {/* <UpBtn>{t('Upgrade commander')}</UpBtn> */}
         </FooterBtn>
         <FooterDiv>
           <TextDiv color="textSubtle">{t('each time')}</TextDiv>

src/views/Referral/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { fetchReferralInfoAsync } from 'state/actions'
 import { useAccount } from 'state/userInfo/hooks'
-import { useReferralCommanderConfigInfo } from 'state/referral/hooks'
+import { useReferralIsCommander } from 'state/referral/hooks'
 import { useDispatch } from 'react-redux'
 import UnunitedCom from './components/UnunitedCom'
 import ConnectedCom from './components/Connected'
@@ -37,20 +37,30 @@ const ContentDiv = styled.div`
 `
 
 const Nft: React.FC = () => {
-  //  邀请false普通邀请 true军团长邀请
-  const [type, setType] = useState(false)
   const dispatch = useDispatch()
   const account = useAccount()
 
-  const referralConfigInfo = useReferralCommanderConfigInfo()
+  const referralIsCommander = useReferralIsCommander()
-  console.log(referralConfigInfo)
+  // const referralIsCommander = true
   useEffect(() => {
     dispatch(fetchReferralInfoAsync(account))
   }, [account])
 
   return (
     <MainDiv>
-      {type ? <RegimentalCom /> : <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
+      {referralIsCommander ? (
+        <>
+          {account ? (
+            <RegimentalCom />
+          ) : (
+            <ContentDiv>
+              <UnunitedCom />
+            </ContentDiv>
+          )}
+        </>
+      ) : (
+        <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>
+      )}
     </MainDiv>
   )
 }