diff --git a/packages/gui/src/components/nfts/NFTCard.tsx b/packages/gui/src/components/nfts/NFTCard.tsx index ca1e3893e9..766dd6d169 100644 --- a/packages/gui/src/components/nfts/NFTCard.tsx +++ b/packages/gui/src/components/nfts/NFTCard.tsx @@ -1,6 +1,7 @@ -import { IconButton, Flex } from '@chia-network/core'; +import { Color, IconButton, Flex } from '@chia-network/core'; import { MoreVert } from '@mui/icons-material'; import { Card, CardActionArea, CardContent, Checkbox, Typography } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import React, { useMemo, memo } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -38,6 +39,7 @@ function NFTCard(props: NFTCardProps) { const nftId = useMemo(() => getNFTId(id), [id]); const [isNFTHidden] = useHiddenNFTs(); + const theme = useTheme(); const navigate = useNavigate(); const { nft, isLoading } = useNFT(nftId); @@ -58,7 +60,14 @@ function NFTCard(props: NFTCardProps) { return ( - + {onSelect && ( 0 ? expirationValues[0] : null; + const displayDaysText = displayDays ? plural(displayDays, { one: 'day', other: 'days' }) : null; + const displayHours = Number(expirationValues[1]) > 0 ? expirationValues[1] : null; + const displayHoursText = displayHours ? plural(displayHours, { one: 'hour', other: 'hours' }) : null; + const displayMinutes = Number(expirationValues[2]) > 0 ? expirationValues[2] : null; + const displayMinutesText = displayMinutes ? plural(displayMinutes, { one: 'minute', other: 'minutes' }) : null; + const hoursComma = displayDays && (displayHours || displayMinutes) ? ', ' : null; + const minutesComma = displayHours && displayMinutes ? ', ' : null; + const displayText = willExpirationBeEnabled + ? t`This offer will expire in ${displayDays} ${displayDaysText}${hoursComma} ${displayHours} ${displayHoursText}${minutesComma} ${displayMinutes} ${displayMinutesText}` + : t`This offer will not expire`; + return ( + + {displayText} + + ); +} + export default function OfferBuilderExpirationSection(props: OfferExpirationProps) { const theme = useTheme(); + const navigate = useNavigate(); const { isViewing, canCounter, @@ -76,7 +88,7 @@ export default function OfferBuilderExpirationSection(props: OfferExpirationProp }); const willExpirationBeEnabled = expirationValues.map((value) => Number(value)).some((value) => value > 0); - const [isExpirationExpanded, setIsExpirationExpanded] = React.useState(willExpirationBeEnabled); + const [isExpirationExpanded, setIsExpirationExpanded] = React.useState(false); const isExpired = expirationTime < currentTime; @@ -86,6 +98,10 @@ export default function OfferBuilderExpirationSection(props: OfferExpirationProp { name: 'minutes', label: t`Minutes`, max: 60 }, ]; + async function handleNavToSettings() { + navigate('/dashboard/settings/general'); + } + function setExpirationTime() { const formatTime = { days: expirationValues[0], hours: expirationValues[1], minutes: expirationValues[2] }; const timeInSeconds = getOfferExpirationTimeInSeconds(formatTime); @@ -116,7 +132,8 @@ export default function OfferBuilderExpirationSection(props: OfferExpirationProp item border={1} borderColor={theme.palette.mode === 'light' ? Color.Neutral[300] : Color.Neutral[600]} - borderRadius={1} + borderRadius={2} + overflow="hidden" > } @@ -144,48 +161,69 @@ export default function OfferBuilderExpirationSection(props: OfferExpirationProp }} invisible={wasOfferExpirationVisited} > - - Add option to set expiration time {canCounter ? ' to counteroffer' : null} - + + + + + + + + - - - - Set a time after which the offer expires. -
- An expiring offer can only be claimed prior to the expiration time. - - - - {fields.map((field) => ( - - ))} - {willExpirationBeEnabled && ( + + + Offer Expiration + + + Set a time after which this offer expires. +
+ + Change default timing. + + + + + {fields.map((field) => ( + + ))} - )} + - {willExpirationBeEnabled && ( - }> - - - Expiration time will be {isViewing && canCounter ? 'applied to counteroffer.' : 'applied.'} - - - - )} - {!willExpirationBeEnabled && ( - - This offer will never expire. {' '} - - )} diff --git a/packages/icons/src/Hourglass.tsx b/packages/icons/src/Hourglass.tsx new file mode 100644 index 0000000000..b18aaf82fb --- /dev/null +++ b/packages/icons/src/Hourglass.tsx @@ -0,0 +1,8 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; +import React from 'react'; + +import HourglassIcon from './images/Hourglass.svg'; + +export default function Hourglass(props: SvgIconProps) { + return ; +} diff --git a/packages/icons/src/images/Hourglass.svg b/packages/icons/src/images/Hourglass.svg new file mode 100644 index 0000000000..98792e32d4 --- /dev/null +++ b/packages/icons/src/images/Hourglass.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index 0b445abc86..67d26e1c45 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -8,6 +8,7 @@ export { default as Fees } from './Fees'; export { default as FullNode } from './FullNode'; export { default as Harvest } from './Harvest'; export { default as Home } from './Home'; +export { default as Hourglass } from './Hourglass'; export { default as Keys } from './Keys'; export { default as LinkSmall } from './Link'; export { default as MyContacts } from './MyContacts';