From eafbbf31a0599d4b10a664a990fba1c9080899b8 Mon Sep 17 00:00:00 2001 From: billy Date: Tue, 21 Dec 2021 15:31:25 +0800 Subject: [PATCH 1/7] fix: buy now temp && collectible loading in the container --- .../Collectible/SNSAdaptor/ActionBar.tsx | 16 +++++------ .../Collectible/SNSAdaptor/Collectible.tsx | 28 ++++++++++++++----- .../SNSAdaptor/HistoryTab/index.tsx | 9 ++++-- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx index bde36cc658c0..32132acc06d3 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx @@ -41,28 +41,28 @@ export function ActionBar(props: ActionBarProps) { } = useControlledDialog() if (!asset.value) return null - return ( - {!asset.value.is_owner && asset.value.is_auction ? ( + {!asset.value.is_owner && asset.value.is_auction && assetOrder.value ? ( - {t('plugin_collectible_place_bid')} + onClick={onOpenCheckoutDialog}> + {t('plugin_collectible_buy_now')} ) : null} - {!asset.value.is_owner && !asset.value.is_auction && assetOrder.value ? ( + {!asset.value.is_owner && asset.value.is_auction ? ( - {t('plugin_collectible_buy_now')} + onClick={onOpenOfferDialog}> + {t('plugin_collectible_place_bid')} ) : null} + {!asset.value.is_owner && !asset.value.is_auction ? ( { return { @@ -131,6 +131,13 @@ const useStyles = makeStyles()((theme) => { backgroundColor: '#eb5757', padding: theme.spacing(0.5, 2), }, + loading: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: '100%', + padding: theme.spacing(8, 0), + }, } }) @@ -157,7 +164,6 @@ export function Collectible(props: CollectibleProps) { ) //#endregion - if (asset.loading) return if (!asset.value) return ( @@ -262,11 +268,19 @@ export function Collectible(props: CollectibleProps) { {tabs} - {tabIndex === CollectibleTab.ARTICLE ? : null} - {tabIndex === CollectibleTab.TOKEN ? : null} - {tabIndex === CollectibleTab.OFFER ? : null} - {tabIndex === CollectibleTab.LISTING ? : null} - {tabIndex === CollectibleTab.HISTORY ? : null} + {(asset.loading && ( +
+ +
+ )) || ( +
+ {tabIndex === CollectibleTab.ARTICLE ? : null} + {tabIndex === CollectibleTab.TOKEN ? : null} + {tabIndex === CollectibleTab.OFFER ? : null} + {tabIndex === CollectibleTab.LISTING ? : null} + {tabIndex === CollectibleTab.HISTORY ? : null} +
+ )} diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx index 168a2c5a6e36..63615776a749 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx @@ -7,7 +7,7 @@ import { CollectibleState } from '../../hooks/useCollectibleState' import { Row } from './Row' import { CollectibleProvider } from '../../types' import { TableListPagination } from '../Pagination' -import { LoadingTable } from '../LoadingTable' +import { LoadingAnimation } from '@masknet/shared' const useStyles = makeStyles()((theme) => { return { @@ -49,7 +49,12 @@ export function HistoryTab(props: HistoryTabProps) { }, [events.value, provider]) //#endregion - if (events.loading) return + if (events.loading) + return ( +
+ +
+ ) if (!events.value || events.error || !events.value?.data.length) return ( From 2a44a8953a6fcdc872573b8e38faa6ec2cc2ad70 Mon Sep 17 00:00:00 2001 From: billy Date: Tue, 21 Dec 2021 16:19:09 +0800 Subject: [PATCH 2/7] style: componentize collectible tabs --- .../Collectible/SNSAdaptor/Collectible.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index 9994e50b09b2..3fdbdd3b0b74 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { FC, ReactElement, useCallback } from 'react' import { Avatar, Box, @@ -195,6 +195,18 @@ export function Collectible(props: CollectibleProps) { , ] + const CollectibleTabsRouter: FC<{ tabIndex: number }> = ({ tabIndex }) => { + const tabMap: { [index: number]: ReactElement } = { + [CollectibleTab.ARTICLE]: , + [CollectibleTab.TOKEN]: , + [CollectibleTab.OFFER]: , + [CollectibleTab.LISTING]: , + [CollectibleTab.HISTORY]: , + } + + return tabMap[tabIndex] || null + } + const endDate = asset.value?.end_time return ( <> @@ -280,15 +292,7 @@ export function Collectible(props: CollectibleProps) {
- )) || ( -
- {tabIndex === CollectibleTab.ARTICLE ? : null} - {tabIndex === CollectibleTab.TOKEN ? : null} - {tabIndex === CollectibleTab.OFFER ? : null} - {tabIndex === CollectibleTab.LISTING ? : null} - {tabIndex === CollectibleTab.HISTORY ? : null} -
- )} + )) ||
{CollectibleTabsRouter({ tabIndex })}
} From e255e895fe8bad603ab58ce54bb85afb3958ee52 Mon Sep 17 00:00:00 2001 From: BillyS <52899576+BillySh1@users.noreply.github.com> Date: Tue, 21 Dec 2021 16:38:34 +0800 Subject: [PATCH 3/7] Update packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx Co-authored-by: septs --- .../mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index 3fdbdd3b0b74..4c8d7183c34d 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -196,7 +196,7 @@ export function Collectible(props: CollectibleProps) { ] const CollectibleTabsRouter: FC<{ tabIndex: number }> = ({ tabIndex }) => { - const tabMap: { [index: number]: ReactElement } = { + const tabMap: Record = { [CollectibleTab.ARTICLE]: , [CollectibleTab.TOKEN]: , [CollectibleTab.OFFER]: , From a435bf76ef5afbccc0ad54371318faad28621a31 Mon Sep 17 00:00:00 2001 From: BillyS <52899576+BillySh1@users.noreply.github.com> Date: Tue, 21 Dec 2021 18:19:27 +0800 Subject: [PATCH 4/7] Update packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx Co-authored-by: septs --- .../mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index 4c8d7183c34d..302550b3e414 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -195,7 +195,7 @@ export function Collectible(props: CollectibleProps) { , ] - const CollectibleTabsRouter: FC<{ tabIndex: number }> = ({ tabIndex }) => { + const renderTab = (tabIndex: number) => { const tabMap: Record = { [CollectibleTab.ARTICLE]: , [CollectibleTab.TOKEN]: , From 708d0dd18bdaba1de7ec0743c3e5eff514eab822 Mon Sep 17 00:00:00 2001 From: BillyS <52899576+BillySh1@users.noreply.github.com> Date: Tue, 21 Dec 2021 18:19:35 +0800 Subject: [PATCH 5/7] Update packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx Co-authored-by: septs --- .../mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index 302550b3e414..d9eb7122af5d 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -292,7 +292,7 @@ export function Collectible(props: CollectibleProps) {
- )) ||
{CollectibleTabsRouter({ tabIndex })}
} + )) ||
{renderTab(tabIndex)}
} From ce2f90faa145ce7e839210dba0bf8ab5cff9a807 Mon Sep 17 00:00:00 2001 From: BillyS <52899576+BillySh1@users.noreply.github.com> Date: Wed, 22 Dec 2021 18:48:15 +0800 Subject: [PATCH 6/7] Update packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> --- .../mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index ac5468407597..c843257a5fe8 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -292,7 +292,7 @@ export function Collectible(props: CollectibleProps) {
- )) ||
{renderTab(tabIndex)}
} + )) || <>{renderTab(tabIndex)}} From 854a84a5a96d8ec9570973f2857cf40be85873aa Mon Sep 17 00:00:00 2001 From: BillyS <52899576+BillySh1@users.noreply.github.com> Date: Wed, 22 Dec 2021 18:49:11 +0800 Subject: [PATCH 7/7] Update packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> --- .../mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx index c843257a5fe8..dc474bf874d8 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx @@ -195,8 +195,8 @@ export function Collectible(props: CollectibleProps) { , ] - const renderTab = (tabIndex: number) => { - const tabMap: Record = { + const renderTab = (tabIndex: CollectibleTab) => { + const tabMap: Record = { [CollectibleTab.ARTICLE]: , [CollectibleTab.TOKEN]: , [CollectibleTab.OFFER]: ,