order response ui upgrades

package.json

@@ -25,7 +25,7 @@
 		"@othent/kms": "^1.0.7",
 		"@permaweb/aoconnect": "^0.0.45",
 		"@permaweb/stampjs": "^1.0.3",
-		"@permaweb/ucm": "0.0.4",
+		"@permaweb/ucm": "0.0.5",
 		"async-lock": "^1.4.1",
 		"jwt-decode": "^4.0.0",
 		"nprogress": "^0.2.0",

src/components/atoms/CurrencyLine/CurrencyLine.tsx

@@ -29,7 +29,7 @@ export default function CurrencyLine(props: IProps) {
 			const formattedAmount: string = (Math.round(amount) / factor).toFixed(denomination);
 			return formatCount(formattedAmount);
 		}
-		return `${language.fetching}...`;
+		return `${language.loading}...`;
 	}
 
 	function getCurrency() {

src/components/atoms/TxAddress/styles.ts

@@ -4,10 +4,10 @@ export const Wrapper = styled.div<{ disabled: boolean }>`
 	display: flex;
 	align-items: center;
 	p {
-		color: ${(props) => props.theme.colors.font.primary};
+		color: ${(props) => props.theme.colors.font.primary} !important;
 		font-size: ${(props) => props.theme.typography.size.base};
-		font-family: ${(props) => props.theme.typography.family.primary};
-		font-weight: ${(props) => props.theme.typography.weight.bold};
+		font-family: ${(props) => props.theme.typography.family.primary} !important;
+		font-weight: ${(props) => props.theme.typography.weight.bold} !important;
 		text-decoration: ${(props) => (props.disabled ? 'none' : 'underline')};
 
 		&:hover {

src/components/molecules/Panel/Panel.tsx

@@ -22,7 +22,7 @@ export default function Panel(props: IProps) {
 
 	const escFunction = React.useCallback(
 		(e: any) => {
-			if (e.key === 'Escape' && props.handleClose) {
+			if (e.key === 'Escape' && props.handleClose && !props.closeHandlerDisabled) {
 				props.handleClose();
 			}
 		},
@@ -41,7 +41,11 @@ export default function Panel(props: IProps) {
 		return (
 			<>
 				<S.Container noHeader={!props.header} width={props.width}>
-					<CloseHandler active={props.open} disabled={!props.open} callback={() => props.handleClose()}>
+					<CloseHandler
+						active={props.open && !props.closeHandlerDisabled}
+						disabled={!props.open || props.closeHandlerDisabled}
+						callback={() => props.handleClose()}
+					>
 						{props.header && (
 							<S.Header>
 								<S.LT>

src/components/molecules/Panel/types.ts

@@ -6,4 +6,5 @@ export interface IProps {
 	children: React.ReactNode;
 	open: boolean;
 	width?: number;
+	closeHandlerDisabled?: boolean;
 }

src/helpers/language.ts

@@ -97,7 +97,11 @@ export const language = {
 		noActivity: `No activity found`,
 		noListings: `No listings`,
 		nonTransferable: `This asset cannot be transferred`,
-		orderConfirmationDetails: `Order Confirmation Details`,
+		orderConfirmationDetailsListing: `Listing Confirmation Details`,
+		orderConfirmationDetailsPurchase: `Purchase Confirmation Details`,
+		orderConfirmationReviewListing: `Review your listing details above`,
+		orderConfirmationReviewPurchase: `Review your purchase details above`,
+		orderConfirmationReviewTransfer: `Review your transfer details above`,
 		orderConfirmationInfo: `Information related to your order will show here`,
 		orderId: `Order ID`,
 		orderProcessed: `Your order has been processed`,
@@ -128,12 +132,11 @@ export const language = {
 		removeAvatar: `Remove avatar`,
 		removeBanner: `Remove banner`,
 		return: `Return`,
-		reviewOrderDetails: `Review your order details above`,
 		runningUpdate: `Running update`,
 		save: `Save`,
 		sell: `Sell`,
 		seller: `Seller`,
-		sellerFee: `Please note: The UCM will take a 0.5% fee from the total sale.`,
+		sellerFee: `The UCM will take a 0.5% fee from the total sale.`,
 		setProfilePicture: `Set as profile picture`,
 		stamp: `Stamp`,
 		stampComment: `STAMP Comment`,
@@ -192,6 +195,7 @@ export const language = {
 		userConnectedVouched: `You are vouched`,
 		useDarkDisplay: `Use Dark Display`,
 		useLightDisplay: `Use Light Display`,
+		view: `View`,
 		viewAllCollections: `View all collections`,
 		viewFullBio: `View full bio`,
 		viewFullDescription: `View full description`,

src/routes/Routes.tsx

@@ -1,5 +1,5 @@
-import React, { lazy } from 'react';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { lazy } from 'react';
+import { Route, Routes } from 'react-router-dom';
 
 import { URLS } from 'helpers/config';
 const Asset = getLazyImport('Asset');
@@ -11,35 +11,35 @@ const Docs = getLazyImport('Docs');
 const Campaign = getLazyImport('Campaign');
 const NotFound = getLazyImport('NotFound');
 
-import NProgress from 'nprogress';
+// import NProgress from 'nprogress';
 
-import 'nprogress/nprogress.css';
+// import 'nprogress/nprogress.css';
 
-NProgress.configure({ showSpinner: false, speed: 400, trickleSpeed: 200, minimum: 0.3 });
+// NProgress.configure({ showSpinner: false, speed: 400, trickleSpeed: 200, minimum: 0.3 });
 
-const useNProgress = () => {
-	const location = useLocation();
+// const useNProgress = () => {
+// 	const location = useLocation();
 
-	React.useEffect(() => {
-		const startNProgress = async () => {
-			NProgress.start();
+// 	React.useEffect(() => {
+// 		const startNProgress = async () => {
+// 			NProgress.start();
 
-			const trickle = setInterval(() => {
-				NProgress.inc(0.05);
-			}, 200);
+// 			const trickle = setInterval(() => {
+// 				NProgress.inc(0.05);
+// 			}, 200);
 
-			await new Promise((resolve) => setTimeout(resolve, 275));
+// 			await new Promise((resolve) => setTimeout(resolve, 275));
 
-			clearInterval(trickle);
-			NProgress.done();
-		};
+// 			clearInterval(trickle);
+// 			NProgress.done();
+// 		};
 
-		startNProgress();
-	}, [location]);
-};
+// 		startNProgress();
+// 	}, [location]);
+// };
 
 export default function _Routes() {
-	useNProgress();
+	// useNProgress();
 
 	return (
 		<Routes>

src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx

@@ -12,7 +12,7 @@ import { CurrencyLine } from 'components/atoms/CurrencyLine';
 import { FormField } from 'components/atoms/FormField';
 import { Slider } from 'components/atoms/Slider';
 import { TxAddress } from 'components/atoms/TxAddress';
-import { Modal } from 'components/molecules/Modal';
+import { Panel } from 'components/molecules/Panel';
 import { AO, ASSETS, REDIRECTS, URLS } from 'helpers/config';
 import { AssetOrderType } from 'helpers/types';
 import {
@@ -391,7 +391,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 
 	function handleAssetUpdate() {
 		if (orderSuccess) {
-			appProvider.refreshUcm();
+			if (props.type !== 'transfer') appProvider.refreshUcm();
 			props.toggleUpdate();
 			setCurrentOrderQuantity('');
 			setUnitPrice('');
@@ -681,7 +681,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 					disabled={getActionDisabled()}
 					loading={false}
 					height={60}
-					fullWidth={true}
+					fullWidth={!finalizeOrder}
 					icon={icon}
 					iconLeftAlign
 				/>
@@ -691,17 +691,24 @@ export default function AssetActionMarketOrders(props: IProps) {
 
 	function getOrderWindow() {
 		let header: string | null = null;
+		let confirmationHeader: string | null = null;
+		let reviewMessage: string | null = null;
+
 		let footer: React.ReactNode | null = null;
 
 		switch (props.type) {
 			case 'buy':
 				header = language.confirmPurchase;
+				confirmationHeader = language.orderConfirmationDetailsPurchase;
+				reviewMessage = language.orderConfirmationReviewPurchase;
 				break;
 			case 'sell':
 				header = language.confirmListing;
+				confirmationHeader = language.orderConfirmationDetailsListing;
+				reviewMessage = language.orderConfirmationReviewListing;
 				footer = (
 					<p>
-						{language.sellerFee}{' '}
+						· {language.sellerFee}{' '}
 						<Link to={URLS.docs} target={'_blank'}>
 							{language.learnMore}
 						</Link>
@@ -710,19 +717,29 @@ export default function AssetActionMarketOrders(props: IProps) {
 				break;
 			case 'transfer':
 				header = language.confirmTransfer;
+				reviewMessage = language.orderConfirmationReviewTransfer;
 				break;
 		}
 
+		function handleClose() {
+			if (orderProcessed && orderSuccess) {
+				handleAssetUpdate();
+				return;
+			}
+			if (orderProcessed) {
+				handleOrderErrorClose();
+				return;
+			}
+			setShowConfirmation(false);
+		}
+
 		return (
-			<Modal
+			<Panel
+				open={true}
+				width={525}
 				header={header}
-				handleClose={() =>
-					orderProcessed && orderSuccess
-						? handleAssetUpdate()
-						: orderProcessed
-						? handleOrderErrorClose()
-						: setShowConfirmation(false)
-				}
+				handleClose={handleClose}
+				closeHandlerDisabled={orderLoading || orderProcessed}
 			>
 				<S.ConfirmationWrapper className={'modal-wrapper'}>
 					<S.ConfirmationHeader>
@@ -732,19 +749,20 @@ export default function AssetActionMarketOrders(props: IProps) {
 					{props.type !== 'transfer' && (
 						<S.ConfirmationDetails className={'border-wrapper-primary'}>
 							<S.ConfirmationDetailsHeader>
-								<p>{language.orderConfirmationDetails}</p>
+								<p>{confirmationHeader}</p>
 							</S.ConfirmationDetailsHeader>
 							<S.ConfirmationDetailsLineWrapper>
 								{orderId ? (
 									<S.ConfirmationDetailsFlex>
 										<S.ConfirmationDetailsLine>
-											<p>{`${language.orderId}: `}</p>
+											<p id={'id-line'}>{`${language.orderId}: `}</p>
 											<TxAddress address={orderId} wrap={false} />
 										</S.ConfirmationDetailsLine>
 										<Button
 											type={'alt1'}
-											label={'View'}
+											label={language.view}
 											handlePress={() => window.open(REDIRECTS.aoLink(orderId), '_blank')}
+											height={27.5}
 										/>
 									</S.ConfirmationDetailsFlex>
 								) : (
@@ -753,16 +771,14 @@ export default function AssetActionMarketOrders(props: IProps) {
 							</S.ConfirmationDetailsLineWrapper>
 						</S.ConfirmationDetails>
 					)}
+					{footer && <S.ConfirmationFooter className={'border-wrapper-primary'}>{footer}</S.ConfirmationFooter>}
 					<S.ConfirmationMessage success={orderProcessed && orderSuccess} warning={orderProcessed && !orderSuccess}>
-						<span>
-							{currentNotification ? currentNotification : orderLoading ? 'Processing...' : language.reviewOrderDetails}
-						</span>
+						<span>{currentNotification ? currentNotification : orderLoading ? 'Processing...' : reviewMessage}</span>
 					</S.ConfirmationMessage>
 					<S.Divider />
 					<S.ActionWrapperFull loading={orderLoading.toString()}>{getAction(true)}</S.ActionWrapperFull>
-					{footer && <S.ConfirmationFooter>{footer}</S.ConfirmationFooter>}
 				</S.ConfirmationWrapper>
-			</Modal>
+			</Panel>
 		);
 	}
 

src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/styles.ts

@@ -225,6 +225,17 @@ export const ActionWrapperFull = styled(ActionWrapper)`
 	margin: 20px 0 5px 0;
 `;
 
+// display: flex;
+// justify-content: flex-end;
+// margin: 20px 0 5px 0;
+
+// button {
+// 	min-width: 315px;
+// 	width: fit-content;
+// 	max-width: 100%;
+// 	padding: 0 60px;
+// }
+
 export const Divider = styled.div`
 	height: 1px;
 	width: 100%;
@@ -251,7 +262,9 @@ export const MessageWrapper = styled.div<{ warning?: boolean }>`
 	}
 `;
 
-export const ConfirmationWrapper = styled.div``;
+export const ConfirmationWrapper = styled.div`
+	max-width: 525px;
+`;
 
 export const ConfirmationHeader = styled.div`
 	margin: 0 0 7.5px 0;
@@ -264,7 +277,6 @@ export const ConfirmationHeader = styled.div`
 `;
 
 export const ConfirmationMessage = styled(MessageWrapper)<{ success?: boolean }>`
-	margin: 15px 0 10px 0;
 	width: fit-content;
 	margin: 35px auto;
 	padding: 4.5px 52.5px;
@@ -289,11 +301,11 @@ export const ConfirmationMessage = styled(MessageWrapper)<{ success?: boolean }>
 
 export const ConfirmationDetails = styled.div`
 	margin: 20px 0 0 0;
-	padding: 12.5px 15px;
+	padding: 12.5px 15px 15px 15px;
 `;
 
 export const ConfirmationDetailsHeader = styled.div`
-	margin: 0 0 12.5px 0;
+	margin: 0 0 8.5px 0;
 	p {
 		font-size: ${(props) => props.theme.typography.size.base};
 		font-family: ${(props) => props.theme.typography.family.alt1};
@@ -306,22 +318,32 @@ export const ConfirmationDetailsLineWrapper = styled.div`
 	p {
 		font-size: ${(props) => props.theme.typography.size.small};
 		font-family: ${(props) => props.theme.typography.family.primary};
-		font-weight: ${(props) => props.theme.typography.weight.bold};
-		color: ${(props) => props.theme.colors.font.primary};
+		font-weight: ${(props) => props.theme.typography.weight.medium};
+		color: ${(props) => props.theme.colors.font.alt1};
 	}
 	span {
 		font-size: ${(props) => props.theme.typography.size.small};
 		font-family: ${(props) => props.theme.typography.family.primary};
 		font-weight: ${(props) => props.theme.typography.weight.medium};
 		color: ${(props) => props.theme.colors.font.primary};
 	}
+
+	#id-line {
+		margin: 2.5px 0 0 0;
+	}
 `;
 
 export const ConfirmationDetailsFlex = styled.div`
 	width: 100%;
 	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
 	align-items: center;
 	justify-content: space-between;
+
+	button {
+		border-radius: ${STYLING.dimensions.radius.alt1};
+	}
 `;
 
 export const ConfirmationDetailsLine = styled.div`
@@ -331,8 +353,11 @@ export const ConfirmationDetailsLine = styled.div`
 `;
 
 export const ConfirmationFooter = styled.div`
-	margin: 15px 0 0 0;
-	width: 100%;
+	padding: 11.5px 10px;
+	margin: 22.5px 0 0 0;
+	display: flex;
+	flex-direction: column;
+	gap: 7.5px;
 	p {
 		font-size: ${(props) => props.theme.typography.size.xSmall};
 		font-family: ${(props) => props.theme.typography.family.primary};