Untitled

    {Popup ?
      <div className="Max_Box">
        <div className="Min_Box">
        <div onClick={() => PopupClick()} className="close"><img src={GuanImg} alt="" width="14px"/></div>
        <PAYSTATUS isPay={isPay} openIsPayTime={openIsPayTime} isOpen={isOpen} busdAmount={busdAmount} idoBalance={idoBalance}/>
        </div>
      </div>
      : null}


  </div>
}


const PAYSTATUS=({idoBalance,isPay,isOpen,busdAmount,openIsPayTime})=>{
  console.error({
    sss:isPay === true,
    isPay
  })
  if(openIsPayTime === true){
    return <PadingBaiMingDan_Box title={'ITO whitelist updating, please stay tuned with notice in the telegram group'}/>
  }
  if(idoBalance === null || isOpen === null){
    return <Pading_Box/>
  }else if(isOpen === false){
    return <PadingBaiMingDan_Box title={''}/>
  }else if(isPay === true){
    
    return <PadingBaiMingDan_Box title={'Purchased'}/>
  }else if(idoBalance >0){
    return <Inp_Box busdAmount={busdAmount} idoBalance={idoBalance}/>
  }else {
    return <PadingBaiMingDan_Box/>
  }
}
//输入框组件
function Inp_Box({idoBalance,busdAmount}) {
  const { provider, address, connected, connect, chainID,disconnect } = useWeb3Context();
  const dispatch = useDispatch();

  const pendingTransactions = useSelector(state => {
    return state.pendingTransactions;
  });
  
  const stakeAllowance = useSelector(state => {
    return state.account.ido && state.account.ido.idoAllowance;
  });
  const hasAllowance = useCallback(
    () => {
      console.error(stakeAllowance > 0)
      return stakeAllowance > 0;
    },
    [stakeAllowance],
  )
  const onSeekApproval = async token => {
    await dispatch(changeApproval({ address, token, provider, networkID: chainID }));
  }
  const onChangeStake = async action => {
    // eslint-disable-next-line no-restricted-globals
    await dispatch(changeStake({ address, action, provider, networkID: chainID }));
  };
  const onClick=()=>{

  }
  return <MinInp_Box>
    <div className="Content_Box1">
      <span>Your ITO Quota</span>
    </div>
    <div className="Content_Box2">
      <div>ITO Quota</div>
      <input type="text" placeholder={`${idoBalance}PID`} className="InpStyle" />
    </div>
    <div className="Content_Box2">
      <div>Purchase</div>
      <input type="text" placeholder={`${busdAmount}BUSD`} disabled className="InpStyle" />
    </div>
    <div className="Content_Box3">
     project will launch on 12:00 8th Nov. 2021, you will be able to claim your  token manually on the website. 
    </div>

    {address && hasAllowance() ? (
      <div onClick={onClick} 
      disabled={isPendingTxn(pendingTransactions, "staking")}
        onClick={() => {
          onChangeStake("stake");
        }}
      className="Content_Box4">
        {txnButtonText(pendingTransactions, "buy", "Purchase")}
    </div>
    ) : (
      <Button
        className="stake-button"
        variant="contained"
        color="primary"
        disabled={isPendingTxn(pendingTransactions, "approve_staking")}
        onClick={() => {
          onSeekApproval();
        }}
      >
        {txnButtonText(pendingTransactions, "approve", "Approve")}
      </Button>
    )}
    
  </MinInp_Box>
}

const MinInp_Box = styled.div`
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
`

//判定等待组件
function Pading_Box (){
  return<PadingBox>
    <PandingImg src={PdImg}/>
    <PandingContent>Evaluating, please wait a moment～</PandingContent>
  </PadingBox>
}
//判定白名单
function PadingBaiMingDan_Box ({title="You are not on the whitelist"}){
  return<PadingBox>
    <PandingImg src={WuImg}/>
    <PandingContent>{title}</PandingContent>
  </PadingBox>
}
const PadingBox = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`
const PandingImg = styled.img`
  /* width: 100%; */
  max-width: 332px;
`
const PandingContent = styled.div`
  color: #afb0b3;
  margin-top: 43px;
`