diff --git a/package.json b/package.json index e2aaef5..3665803 100644 --- a/package.json +++ b/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", diff --git a/src/components/atoms/CurrencyLine/CurrencyLine.tsx b/src/components/atoms/CurrencyLine/CurrencyLine.tsx index fed3eb7..0d9a895 100644 --- a/src/components/atoms/CurrencyLine/CurrencyLine.tsx +++ b/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() { diff --git a/src/components/atoms/TxAddress/styles.ts b/src/components/atoms/TxAddress/styles.ts index ff935d1..3d0ae92 100644 --- a/src/components/atoms/TxAddress/styles.ts +++ b/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 { diff --git a/src/components/molecules/Panel/Panel.tsx b/src/components/molecules/Panel/Panel.tsx index c91ce5c..41e7141 100644 --- a/src/components/molecules/Panel/Panel.tsx +++ b/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 ( <> - props.handleClose()}> + props.handleClose()} + > {props.header && ( diff --git a/src/components/molecules/Panel/types.ts b/src/components/molecules/Panel/types.ts index 17a1dff..e3dc96c 100644 --- a/src/components/molecules/Panel/types.ts +++ b/src/components/molecules/Panel/types.ts @@ -6,4 +6,5 @@ export interface IProps { children: React.ReactNode; open: boolean; width?: number; + closeHandlerDisabled?: boolean; } diff --git a/src/helpers/language.ts b/src/helpers/language.ts index 6c8bfee..590bca1 100644 --- a/src/helpers/language.ts +++ b/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`, diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index fc6a7fb..c9f59d1 100644 --- a/src/routes/Routes.tsx +++ b/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 ( diff --git a/src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx b/src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx index 76a896b..e389f55 100644 --- a/src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx +++ b/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 = (

- {language.sellerFee}{' '} + ยท {language.sellerFee}{' '} {language.learnMore} @@ -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 ( - - orderProcessed && orderSuccess - ? handleAssetUpdate() - : orderProcessed - ? handleOrderErrorClose() - : setShowConfirmation(false) - } + handleClose={handleClose} + closeHandlerDisabled={orderLoading || orderProcessed} > @@ -732,19 +749,20 @@ export default function AssetActionMarketOrders(props: IProps) { {props.type !== 'transfer' && ( -

{language.orderConfirmationDetails}

+

{confirmationHeader}

{orderId ? ( -

{`${language.orderId}: `}

+

{`${language.orderId}: `}