improve hot order updates

permaweb · Jun 21, 2024 · 5bae325 · 5bae325
1 parent 48c3da7
commit 5bae325
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 76 deletions.
diff --git a/src/components/atoms/Notification/Notification.tsx b/src/components/atoms/Notification/Notification.tsx
@@ -20,6 +20,16 @@ export default function Notification(props: IProps) {
 		props.callback();
 	}
 
+	React.useEffect(() => {
+		if (show) {
+			const timer = setTimeout(() => {
+				handleClose();
+			}, 5000);
+
+			return () => clearTimeout(timer);
+		}
+	}, []);
+
 	return show ? (
 		<Portal node={DOM.notification}>
 			<S.Wrapper warning={props.type === 'warning'}>

diff --git a/src/components/organisms/AssetsTable/AssetsTable.tsx b/src/components/organisms/AssetsTable/AssetsTable.tsx
@@ -53,16 +53,18 @@ export default function AssetsTable(props: IProps) {
 		if (props.ids && !props.ids.length) {
 			setAssets([]);
 		} else {
-			setAssetIdGroups(
-				getAssetIdGroups({
-					ids: props.ids || null,
-					groupCount: props.pageCount || PAGINATORS.default,
-					filterListings: assetFilterListings,
-					sortType: assetSortType.id as AssetSortType,
-				})
-			);
+			if (!props.loadingIds) {
+				setAssetIdGroups(
+					getAssetIdGroups({
+						ids: props.ids || null,
+						groupCount: props.pageCount || PAGINATORS.default,
+						filterListings: assetFilterListings,
+						sortType: assetSortType.id as AssetSortType,
+					})
+				);
+			}
 		}
-	}, [assetFilterListings, assetSortType, props.ids]);
+	}, [assetFilterListings, assetSortType, props.ids, props.loadingIds]);
 
 	React.useEffect(() => {
 		(async function () {
@@ -166,7 +168,7 @@ export default function AssetsTable(props: IProps) {
 	}
 
 	function getData() {
-		if (assetsLoading) {
+		if ((assetsLoading || props.loadingIds) && viewType) {
 			let Wrapper: any;
 			let Element: any;
 

diff --git a/src/components/organisms/AssetsTable/types.ts b/src/components/organisms/AssetsTable/types.ts
@@ -1,5 +1,6 @@
 export interface IProps {
 	ids?: string[];
+	loadingIds?: boolean;
 	type: 'list' | 'grid';
 	pageCount?: number;
 }
diff --git a/src/components/organisms/OrderCancel/OrderCancel.tsx b/src/components/organisms/OrderCancel/OrderCancel.tsx
@@ -65,11 +65,6 @@ export default function OrderCancel(props: IProps) {
 						});
 					}
 
-					setCancelProcessed(true);
-
-					arProvider.setToggleTokenBalanceUpdate(!arProvider.toggleTokenBalanceUpdate);
-					props.toggleUpdate();
-
 					const existingUCM = { ...ucmReducer };
 					const maxTries = 10;
 					let tries = 0;
@@ -98,7 +93,14 @@ export default function OrderCancel(props: IProps) {
 					};
 
 					await fetchUntilChange();
+
+					setCancelProcessed(true);
+
+					arProvider.setToggleTokenBalanceUpdate(!arProvider.toggleTokenBalanceUpdate);
+					props.toggleUpdate();
+
 					setShowConfirmation(false);
+					setCancelProcessed(false);
 					windowUtils.scrollTo(0, 0, 'smooth');
 				}
 			} catch (e: any) {

diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -53,6 +53,7 @@ export const language = {
 		errorUpdatingProfile: `Error updating profile`,
 		executing: `Executing`,
 		fetching: `Fetching`,
+		fetchingAsset: `Fetching asset`,
 		floorPrice: `Floor price`,
 		goTo: `Go to`,
 		implements: `Implements`,

diff --git a/src/views/Asset/AssetAction/AssetAction.tsx b/src/views/Asset/AssetAction/AssetAction.tsx
@@ -160,53 +160,55 @@ export default function AssetAction(props: IProps) {
 		return listing.creator === arProvider.profile.id;
 	}
 
-	function getCurrentOwners() {
-		return (
-			<>
-				{!mobile && (
-					<GS.DrawerHeaderWrapper>
-						<GS.DrawerContentFlex>
-							{language.owner.charAt(0).toUpperCase() + language.owner.slice(1)}
-						</GS.DrawerContentFlex>
-						<GS.DrawerContentDetail>{language.quantity}</GS.DrawerContentDetail>
-						<GS.DrawerContentDetail>{language.percentage}</GS.DrawerContentDetail>
-					</GS.DrawerHeaderWrapper>
-				)}
-				{currentOwners.map((owner: OwnerType, index: number) => {
-					return (
-						<S.DrawerContentLine key={index}>
-							{mobile && (
-								<S.MDrawerHeader>
-									<GS.DrawerContentHeader>
-										{language.owner.charAt(0).toUpperCase() + language.owner.slice(1)}
-									</GS.DrawerContentHeader>
-								</S.MDrawerHeader>
-							)}
-							<S.DrawerContentFlex>
-								<OwnerLine owner={owner} callback={() => setShowCurrentOwnersModal(false)} />
-							</S.DrawerContentFlex>
-							{mobile && (
-								<S.MDrawerHeader>
-									<GS.DrawerContentHeader>{language.quantity}</GS.DrawerContentHeader>
-								</S.MDrawerHeader>
-							)}
-							<S.DrawerContentDetailAlt>
-								{getDenominatedTokenValue(owner.ownerQuantity, props.asset.data.id)}
-							</S.DrawerContentDetailAlt>
-							{mobile && (
-								<S.MDrawerHeader>
-									<GS.DrawerContentHeader>{language.percentage}</GS.DrawerContentHeader>
-								</S.MDrawerHeader>
-							)}
-							<S.DrawerContentDetailAlt>{formatPercentage(owner.ownerPercentage)}</S.DrawerContentDetailAlt>
-						</S.DrawerContentLine>
-					);
-				})}
-			</>
-		);
-	}
+	const getCurrentOwners = React.useMemo(() => {
+		if (currentOwners) {
+			return (
+				<>
+					{!mobile && (
+						<GS.DrawerHeaderWrapper>
+							<GS.DrawerContentFlex>
+								{language.owner.charAt(0).toUpperCase() + language.owner.slice(1)}
+							</GS.DrawerContentFlex>
+							<GS.DrawerContentDetail>{language.quantity}</GS.DrawerContentDetail>
+							<GS.DrawerContentDetail>{language.percentage}</GS.DrawerContentDetail>
+						</GS.DrawerHeaderWrapper>
+					)}
+					{currentOwners.map((owner: OwnerType, index: number) => {
+						return (
+							<S.DrawerContentLine key={index}>
+								{mobile && (
+									<S.MDrawerHeader>
+										<GS.DrawerContentHeader>
+											{language.owner.charAt(0).toUpperCase() + language.owner.slice(1)}
+										</GS.DrawerContentHeader>
+									</S.MDrawerHeader>
+								)}
+								<S.DrawerContentFlex>
+									<OwnerLine owner={owner} callback={() => setShowCurrentOwnersModal(false)} />
+								</S.DrawerContentFlex>
+								{mobile && (
+									<S.MDrawerHeader>
+										<GS.DrawerContentHeader>{language.quantity}</GS.DrawerContentHeader>
+									</S.MDrawerHeader>
+								)}
+								<S.DrawerContentDetailAlt>
+									{getDenominatedTokenValue(owner.ownerQuantity, props.asset.data.id)}
+								</S.DrawerContentDetailAlt>
+								{mobile && (
+									<S.MDrawerHeader>
+										<GS.DrawerContentHeader>{language.percentage}</GS.DrawerContentHeader>
+									</S.MDrawerHeader>
+								)}
+								<S.DrawerContentDetailAlt>{formatPercentage(owner.ownerPercentage)}</S.DrawerContentDetailAlt>
+							</S.DrawerContentLine>
+						);
+					})}
+				</>
+			);
+		} else return null;
+	}, [currentOwners, mobile]);
 
-	function getCurrentListings() {
+	const getCurrentListings = React.useMemo(() => {
 		if (currentListings) {
 			return (
 				<>
@@ -274,7 +276,7 @@ export default function AssetAction(props: IProps) {
 				</>
 			);
 		} else return null;
-	}
+	}, [currentListings, showCurrentListingsModal, mobile]);
 
 	function getCurrentTab() {
 		switch (currentTab) {
@@ -345,13 +347,13 @@ export default function AssetAction(props: IProps) {
 			{showCurrentOwnersModal && currentOwners && currentOwners.length > 0 && (
 				<Modal header={language.currentlyOwnedBy} handleClose={() => setShowCurrentOwnersModal(false)}>
 					<S.DrawerContent transparent className={'modal-wrapper'}>
-						{getCurrentOwners()}
+						{getCurrentOwners}
 					</S.DrawerContent>
 				</Modal>
 			)}
 			{showCurrentListingsModal && currentListings && currentListings.length > 0 && (
 				<Modal header={language.currentlyBeingSoldBy} handleClose={() => setShowCurrentListingsModal(false)}>
-					<S.DrawerContent className={'modal-wrapper'}>{getCurrentListings()}</S.DrawerContent>
+					<S.DrawerContent className={'modal-wrapper'}>{getCurrentListings}</S.DrawerContent>
 				</Modal>
 			)}
 		</>

diff --git a/src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarket.tsx b/src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarket.tsx
@@ -86,7 +86,7 @@ export default function AssetActionMarket(props: IProps) {
 					<Drawer
 						title={language.activeSaleOrders}
 						icon={ASSETS.orders}
-						content={<S.DrawerContent>{props.getCurrentListings()}</S.DrawerContent>}
+						content={<S.DrawerContent>{props.getCurrentListings}</S.DrawerContent>}
 					/>
 				</GS.DrawerWrapper>
 			)}

diff --git a/...s/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx b/...s/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx
@@ -476,7 +476,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 		return false;
 	}
 
-	function getTotals() {
+	const getTotals = React.useMemo(() => {
 		let balanceHeader: string | null = null;
 		let percentageHeader: string | null = null;
 		let quantity: number | null = null;
@@ -515,7 +515,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 				</S.TotalQuantityLine>
 			</>
 		);
-	}
+	}, [props.asset, props.type, totalAssetBalance, totalSalesQuantity, connectedBalance, ucmReducer]);
 
 	function getTotalPriceDisplay() {
 		let amount = getTotalOrderAmount();
@@ -664,7 +664,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 							<span>{formatCount(totalAssetBalance.toString())}</span>
 						</p>
 					</S.TotalQuantityLine>
-					{getTotals()}
+					{getTotals}
 				</S.TotalsWrapper>
 				{maxOrderQuantity > 0 && (
 					<S.InputWrapper>
@@ -801,7 +801,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 			</S.Wrapper>
 			{showConfirmation && getConfirmation()}
 			{updating && (
-				<Notification message={`${language.updatingAsset}...`} type={'success'} callback={() => setUpdating(false)} />
+				<Notification message={`${language.fetchingAsset}...`} type={'success'} callback={() => setUpdating(false)} />
 			)}
 		</>
 	) : null;

diff --git a/src/views/Asset/index.tsx b/src/views/Asset/index.tsx
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { getAssetById } from 'api';
 
 import { Loader } from 'components/atoms/Loader';
+import { Notification } from 'components/atoms/Notification';
 import { URLS } from 'helpers/config';
 import { AssetDetailType } from 'helpers/types';
 import { checkValidAddress } from 'helpers/utils';
@@ -79,6 +80,7 @@ export default function Asset() {
 					<S.ActionWrapper>
 						<AssetAction asset={asset} toggleUpdate={() => setToggleUpdate(!toggleUpdate)} />
 					</S.ActionWrapper>
+					{loading && <Notification message={`${language.updatingAsset}...`} type={'success'} callback={null} />}
 				</>
 			);
 		} else {

diff --git a/src/views/Profile/ProfileAssets/ProfileAssets.tsx b/src/views/Profile/ProfileAssets/ProfileAssets.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { getAssetIdsByUser } from 'api';
 
-import { Loader } from 'components/atoms/Loader';
 import { AssetsTable } from 'components/organisms/AssetsTable';
 import { PAGINATORS } from 'helpers/config';
 
@@ -20,13 +19,11 @@ const ProfileAssets = React.memo((props: IProps) => {
 		})();
 	}, [props.address]);
 
-	return props.address && assetIds ? (
+	return props.address ? (
 		<S.Wrapper>
-			<AssetsTable ids={assetIds} type={'grid'} pageCount={PAGINATORS.profile.assets} />
+			<AssetsTable ids={assetIds} loadingIds={!assetIds} type={'grid'} pageCount={PAGINATORS.profile.assets} />
 		</S.Wrapper>
-	) : (
-		<Loader />
-	);
+	) : null;
 });
 
 export default ProfileAssets;
diff --git a/src/wallet/WalletConnect/WalletConnect.tsx b/src/wallet/WalletConnect/WalletConnect.tsx
@@ -77,7 +77,7 @@ export default function WalletConnect(_props: { callback?: () => void }) {
 
 	function handleProfileAction() {
 		if (arProvider.profile && arProvider.profile.id) {
-			navigate(`${URLS.profile}${arProvider.profile.id}`);
+			navigate(URLS.profileAssets(arProvider.profile.id));
 			setShowWalletDropdown(false);
 		} else {
 			setShowProfileManage(true);