From 72b2623a224a46c47d47d3b23bd2f6b8d2b7df86 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 29 Mar 2022 14:38:25 +0800 Subject: [PATCH 1/2] refactor: ito card footer button --- .../mask/src/plugins/ITO/SNSAdaptor/ITO.tsx | 337 ++++++++++-------- 1 file changed, 195 insertions(+), 142 deletions(-) diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx index d35d84c6d41a..78f7b4d5ec29 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx @@ -552,6 +552,75 @@ export function ITO(props: ITO_Props) { [footerEndTime, footerStartTime, limit, listOfStatus, token.decimals, token.symbol], ) + const footerBuyerLockedButton = useMemo(() => { + if (!availability?.claimed) { + return ( + + {claimState.type === TransactionStateType.HASH ? t('plugin_ito_claiming') : t('plugin_ito_claim')} + + ) + } + + if (canWithdraw) { + return ( + + {t('plugin_ito_withdraw')} + + ) + } + return null + }, [availability?.claimed, canWithdraw, claimState]) + + const footerBuyerWithLockTimeButton = useMemo( + () => ( + + {(() => { + if (isUnlocked) return footerBuyerLockedButton + + return ( + undefined} + variant="contained" + disabled + size="large" + className={classNames(classes.actionButton, classes.textInOneLine)}> + {t('plugin_ito_claim')} + + ) + })()} + + ), + [noRemain, listOfStatus, isUnlocked], + ) + + const footerBuyerButton = useMemo( + () => ( + + {(() => { + if (hasLockTime) return footerBuyerWithLockTimeButton + if (canWithdraw) { + return ( + + {t('plugin_ito_withdraw')} + + ) + } + return null + })()} + + ), + [hasLockTime, canWithdraw], + ) + return (
@@ -623,163 +692,147 @@ export function ITO(props: ITO_Props) { - {loadingRegion && isRegionRestrict ? null : !isRegionAllow ? ( - undefined} - variant="contained" - size="large" - className={classes.actionButton}> - {t('plugin_ito_region_ban')} - - ) : (noRemain || listOfStatus.includes(ITO_Status.expired)) && - !canWithdraw && - ((availability?.claimed && hasLockTime) || !hasLockTime) ? null : loadingTradeInfo || - loadingAvailability ? ( - undefined} - variant="contained" - size="large" - className={classes.actionButton}> - {t('plugin_ito_loading')} - - ) : !account || !chainIdValid ? ( - - {t('plugin_wallet_connect_a_wallet')} - - ) : isBuyer ? ( - - {hasLockTime ? ( - - {isUnlocked ? ( - !availability?.claimed ? ( - - {claimState.type === TransactionStateType.HASH - ? t('plugin_ito_claiming') - : t('plugin_ito_claim')} - - ) : canWithdraw ? ( - - {t('plugin_ito_withdraw')} - - ) : null - ) : ( - undefined} - variant="contained" - disabled - size="large" - className={classNames(classes.actionButton, classes.textInOneLine)}> - {t('plugin_ito_claim')} - - )} - - ) : canWithdraw ? ( - - - {t('plugin_ito_withdraw')} - - - ) : null} - {noRemain || listOfStatus.includes(ITO_Status.expired) ? null : ( - - - {t('plugin_ito_share')} - - - )} - - ) : canWithdraw ? ( - - {t('plugin_ito_withdraw')} - - ) : (!ifQualified || !(ifQualified as Qual_V2).qualified) && - !isNativeTokenAddress(qualificationAddress) ? ( - - {loadingIfQualified - ? t('plugin_ito_qualification_loading') - : !ifQualified - ? t('plugin_ito_qualification_failed') - : !(ifQualified as Qual_V2).qualified - ? startCase((ifQualified as Qual_V2).errorMsg) - : null} - - ) : listOfStatus.includes(ITO_Status.expired) ? null : listOfStatus.includes(ITO_Status.waited) ? ( - - + {(() => { + if (loadingRegion && isRegionRestrict) return null + + if (!isRegionAllow) { + return ( undefined} variant="contained" size="large" className={classes.actionButton}> - {t('plugin_ito_unlock_in_advance')} + {t('plugin_ito_region_ban')} - - {shareText ? ( - - - {t('plugin_ito_share')} - - - ) : undefined} - - ) : listOfStatus.includes(ITO_Status.started) ? ( - - + ) + } + + if ( + (noRemain || listOfStatus.includes(ITO_Status.expired)) && + !canWithdraw && + ((availability?.claimed && hasLockTime) || !hasLockTime) + ) { + return null + } + + if (loadingTradeInfo || loadingAvailability) { + return ( undefined} variant="contained" size="large" className={classes.actionButton}> - {t('plugin_ito_enter')} + {t('plugin_ito_loading')} - - + ) + } + + if (!account || !chainIdValid) { + return ( - {t('plugin_ito_share')} + {t('plugin_wallet_connect_a_wallet')} - - - ) : null} + ) + } + + if (isBuyer) return footerBuyerButton + + if (canWithdraw) { + return ( + + {t('plugin_ito_withdraw')} + + ) + } + + if ( + (!ifQualified || !(ifQualified as Qual_V2).qualified) && + !isNativeTokenAddress(qualificationAddress) + ) { + return ( + + {loadingIfQualified + ? t('plugin_ito_qualification_loading') + : !ifQualified + ? t('plugin_ito_qualification_failed') + : !(ifQualified as Qual_V2).qualified + ? startCase((ifQualified as Qual_V2).errorMsg) + : null} + + ) + } + + if (listOfStatus.includes(ITO_Status.expired)) return null + + if (listOfStatus.includes(ITO_Status.waited)) { + return ( + + + + {t('plugin_ito_unlock_in_advance')} + + + {shareText ? ( + + + {t('plugin_ito_share')} + + + ) : undefined} + + ) + } + + if (listOfStatus.includes(ITO_Status.started)) { + return ( + + + + {t('plugin_ito_enter')} + + + + + {t('plugin_ito_share')} + + + + ) + } + + return null + })()} Date: Tue, 29 Mar 2022 18:07:08 +0800 Subject: [PATCH 2/2] chore: rename component --- .../mask/src/plugins/ITO/SNSAdaptor/ITO.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx index 78f7b4d5ec29..2e910ff9d7fb 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx @@ -493,7 +493,7 @@ export function ITO(props: ITO_Props) { tradeInfo?.buyInfo?.token.symbol, ]) - const footerStartTime = useMemo(() => { + const FooterStartTime = useMemo(() => { return ( {t('plugin_ito_list_start_date', { date: formatDateTime(startTime, 'yyyy-MM-dd HH:mm') })} @@ -501,7 +501,7 @@ export function ITO(props: ITO_Props) { ) }, [startTime]) - const footerEndTime = useMemo( + const FooterEndTime = useMemo( () => ( {t('plugin_ito_swap_end_date', { date: formatDateTime(endTime, 'yyyy-MM-dd HH:mm') })} @@ -510,13 +510,13 @@ export function ITO(props: ITO_Props) { [endTime, t], ) - const footerSwapInfo = useMemo( + const FooterSwapInfo = useMemo( () => ( <> {swapResultText} - {footerEndTime} + {FooterEndTime} {hasLockTime && !isUnlocked && unlockTime > Date.now() && @@ -529,10 +529,10 @@ export function ITO(props: ITO_Props) { ) : null} ), - [footerEndTime, swapResultText], + [FooterEndTime, swapResultText], ) - const footerNormal = useMemo( + const FooterNormal = useMemo( () => ( <> @@ -543,16 +543,16 @@ export function ITO(props: ITO_Props) { {listOfStatus.includes(ITO_Status.waited) - ? footerStartTime + ? FooterStartTime : listOfStatus.includes(ITO_Status.started) - ? footerEndTime + ? FooterEndTime : null} ), - [footerEndTime, footerStartTime, limit, listOfStatus, token.decimals, token.symbol], + [FooterEndTime, FooterStartTime, limit, listOfStatus, token.decimals, token.symbol], ) - const footerBuyerLockedButton = useMemo(() => { + const FooterBuyerLockedButton = useMemo(() => { if (!availability?.claimed) { return ( ( {(() => { - if (isUnlocked) return footerBuyerLockedButton + if (isUnlocked) return FooterBuyerLockedButton return ( ( {(() => { - if (hasLockTime) return footerBuyerWithLockTimeButton + if (hasLockTime) return FooterBuyerWithLockTimeButton if (canWithdraw) { return (
{isBuyer - ? footerSwapInfo + ? FooterSwapInfo : listOfStatus.includes(ITO_Status.expired) - ? footerEndTime - : footerNormal} + ? FooterEndTime + : FooterNormal}
From: @{sellerName} @@ -741,7 +741,7 @@ export function ITO(props: ITO_Props) { ) } - if (isBuyer) return footerBuyerButton + if (isBuyer) return FooterBuyerButton if (canWithdraw) { return (