feat: migrate set buy now

src/features/set-buy-now/SetBuyNowButton/SetBuyNowButton.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+
+import { SetBuyNowModal } from '..';
+
+interface SetBuyNowButtonProps {
+	zna: string;
+	trigger: ReactNode;
+}
+
+export const SetBuyNowButton: FC<SetBuyNowButtonProps> = ({ zna, trigger }) => {
+	return <SetBuyNowModal zna={zna} trigger={trigger} />;
+};

src/features/set-buy-now/SetBuyNowButton/index.ts

@@ -0,0 +1 @@
+export * from './SetBuyNowButton';

src/features/set-buy-now/SetBuyNowForm/FormSteps/Complete/Complete.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import { Step } from '../hooks';
+
+import { NFTDetails } from '../ui';
+import { FormTextContent } from '../../../../ui';
+import { Wizard } from '@zero-tech/zui/components';
+
+import styles from '../FormSteps.module.scss';
+
+export interface CompleteProps {
+	zna: string;
+	step: Step;
+	onClose: () => void;
+}
+
+export const Complete: FC<CompleteProps> = ({ zna, step, onClose }) => {
+	return (
+		<>
+			<NFTDetails zna={zna} step={step} />
+
+			<div className={styles.Container}>
+				<FormTextContent variant={'success'} textContent={'Success!'} />
+
+				<Wizard.Buttons
+					className={styles.Button}
+					isPrimaryButtonActive
+					primaryButtonText={'Finish'}
+					onClickPrimaryButton={onClose}
+				/>
+			</div>
+		</>
+	);
+};

src/features/set-buy-now/SetBuyNowForm/FormSteps/Complete/index.ts

@@ -0,0 +1 @@
+export * from './Complete';

src/features/set-buy-now/SetBuyNowForm/FormSteps/Confirm/Confirm.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+
+import { Step } from '../hooks';
+import { useSetBuyNowData } from '../../../useSetBuyNowData';
+
+import { NFTDetails } from '../ui';
+import { FormTextContent } from '../../../../ui';
+import { Wizard, ButtonsProps } from '@zero-tech/zui/components/Wizard';
+
+import styles from '../FormSteps.module.scss';
+
+export interface ConfirmProps {
+	zna: string;
+	step: Step;
+	errorText: string;
+	buyNowAmount: string;
+	onConfirmSetBuyNow: () => void;
+	onClose: () => void;
+}
+
+export const Confirm: FC<ConfirmProps> = ({
+	zna,
+	step,
+	errorText,
+	buyNowAmount,
+	onConfirmSetBuyNow,
+	onClose,
+}) => {
+	const { paymentTokenSymbol } = useSetBuyNowData(zna);
+
+	const primaryButtonText: ButtonsProps['primaryButtonText'] = errorText
+		? 'Retry'
+		: 'Confirm';
+
+	return (
+		<>
+			<NFTDetails zna={zna} step={step} />
+
+			<div className={styles.Container}>
+				<FormTextContent
+					textContent={
+						buyNowAmount !== ''
+							? `Are you sure you want to set a buy now price of ${buyNowAmount} ${paymentTokenSymbol} for ${zna}?`
+							: `Are you sure you want to turn off and remove the buy now price for ${zna}?`
+					}
+					errorText={errorText}
+				/>
+
+				<Wizard.Buttons
+					className={styles.Button}
+					isPrimaryButtonActive
+					isSecondaryButtonActive
+					secondaryButtonText="Cancel"
+					primaryButtonText={primaryButtonText}
+					onClickPrimaryButton={onConfirmSetBuyNow}
+					onClickSecondaryButton={onClose}
+				/>
+			</div>
+		</>
+	);
+};

src/features/set-buy-now/SetBuyNowForm/FormSteps/Confirm/index.ts

@@ -0,0 +1 @@
+export * from './Confirm';

src/features/set-buy-now/SetBuyNowForm/FormSteps/Details/Details.tsx

@@ -0,0 +1,110 @@
+import { FC, useState } from 'react';
+
+import { Step } from '../hooks';
+import { formatNumber } from '../../../../../lib/util';
+import { useSetBuyNowData } from '../../../useSetBuyNowData';
+
+import { NFTDetails } from '../ui';
+import { ToggleButton } from '../../../../ui';
+import { Input } from '@zero-tech/zui/components/Input';
+import { Wizard, ButtonsProps } from '@zero-tech/zui/components/Wizard';
+
+import styles from '../FormSteps.module.scss';
+
+export interface DetailsProps {
+	zna: string;
+	step: Step;
+	errorText: string;
+	buyNowAmount: string;
+	setBuyNowAmount: (bid: string) => void;
+	onCheckZAuction: () => void;
+	onClose: () => void;
+}
+
+export const Details: FC<DetailsProps> = ({
+	zna,
+	step,
+	errorText,
+	buyNowAmount,
+	setBuyNowAmount,
+	onCheckZAuction,
+	onClose,
+}) => {
+	const {
+		hasExistingBuyNow,
+		buyNowPriceAsString,
+		paymentTokenLabel,
+		paymentTokenSymbol,
+		paymentTokenPriceInUsd,
+	} = useSetBuyNowData(zna);
+
+	const [toggledValue, setToggledValue] = useState<boolean>(hasExistingBuyNow);
+
+	const isInputValueValid =
+		Number(buyNowAmount) &&
+		!Number.isNaN(parseFloat(buyNowAmount)) &&
+		Number(buyNowAmount) !== 0;
+
+	const isError = buyNowAmount?.length > 0 && !isInputValueValid;
+	const primaryButtonText: ButtonsProps['primaryButtonText'] = errorText
+		? 'Retry'
+		: 'Next';
+
+	const bidAmountConversionString =
+		paymentTokenSymbol && buyNowAmount
+			? `$${formatNumber(
+					Number(paymentTokenPriceInUsd) * Number(buyNowAmount),
+			  )}`
+			: '-';
+
+	return (
+		<>
+			<NFTDetails zna={zna} step={step} />
+
+			<div className={styles.Container}>
+				{step === Step.DETAILS && (
+					<div className={styles.InputWrapper}>
+						<ToggleButton
+							label={'Enable Buy Now price?'}
+							toggled={toggledValue}
+							onClick={() => {
+								setToggledValue(!toggledValue);
+								setBuyNowAmount('');
+							}}
+						/>
+
+						<Input
+							type="number"
+							error={isError}
+							inputMode="numeric"
+							value={buyNowAmount}
+							isDisabled={!toggledValue}
+							placeholder={`Buy Now Price ${paymentTokenLabel}`}
+							onChange={(value: string) => setBuyNowAmount(value)}
+						/>
+
+						<span className={styles.Subtext}>{bidAmountConversionString}</span>
+
+						<span className={styles.Subtext}>
+							{hasExistingBuyNow
+								? `This NFT has an existing buy now price of ${buyNowPriceAsString}`
+								: 'This NFT does not have an existing buy now price'}
+						</span>
+					</div>
+				)}
+
+				<Wizard.Buttons
+					className={styles.Button}
+					isPrimaryButtonActive={
+						isInputValueValid || (!toggledValue && hasExistingBuyNow)
+					}
+					isSecondaryButtonActive
+					secondaryButtonText="Cancel"
+					primaryButtonText={primaryButtonText}
+					onClickPrimaryButton={onCheckZAuction}
+					onClickSecondaryButton={onClose}
+				/>
+			</div>
+		</>
+	);
+};

src/features/set-buy-now/SetBuyNowForm/FormSteps/Details/index.ts

@@ -0,0 +1 @@
+export * from './Details';

src/features/set-buy-now/SetBuyNowForm/FormSteps/FormSteps.module.scss

@@ -0,0 +1,25 @@
+@import '../../../../../node_modules/@zero-tech/zui/styles/_colors.scss';
+@import '../../../../../node_modules/@zero-tech/zui/styles/_typography.scss';
+
+.Container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+
+	.Button {
+		margin-top: 2.5rem;
+	}
+
+	.InputWrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+	}
+
+	.Subtext {
+		font-size: $size-tiny;
+		color: $grey-lighter-2;
+	}
+}

src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useFormSteps';

src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/useFormSteps.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+
+import { Complete, Confirm, Details } from '..';
+import { ApproveZAuction } from '../../../../ui';
+import { Wizard } from '@zero-tech/zui/components';
+
+export enum Step {
+	DETAILS,
+	ZAUCTION_APPROVE,
+	CONFIRM,
+	COMPLETE,
+	LOADING,
+}
+
+interface UseFormStepsReturn {
+	content: ReactNode;
+}
+
+export interface useFormStepsProps {
+	zna: string;
+	step: Step;
+	error: string;
+	statusText: string;
+	buyNowAmount: string;
+	setBuyNowAmount: (bid: string) => void;
+	onCheckZAuction: () => void;
+	onApproveZAuction: () => void;
+	onConfirmSetBuyNow: () => void;
+	onClose: () => void;
+}
+
+export const useFormSteps = ({
+	zna,
+	step,
+	error,
+	statusText,
+	buyNowAmount,
+	setBuyNowAmount,
+	onCheckZAuction,
+	onApproveZAuction,
+	onConfirmSetBuyNow,
+	onClose,
+}: useFormStepsProps): UseFormStepsReturn => {
+	let content: ReactNode;
+
+	switch (step) {
+		case Step.DETAILS:
+			content = (
+				<Details
+					zna={zna}
+					step={step}
+					errorText={error}
+					buyNowAmount={buyNowAmount}
+					setBuyNowAmount={setBuyNowAmount}
+					onCheckZAuction={onCheckZAuction}
+					onClose={onClose}
+				/>
+			);
+			break;
+
+		case Step.ZAUCTION_APPROVE:
+			content = (
+				<ApproveZAuction
+					action={'set buy now'}
+					errorText={error}
+					onClose={onClose}
+					onApproveZAuction={onApproveZAuction}
+				/>
+			);
+			break;
+
+		case Step.CONFIRM:
+			content = (
+				<Confirm
+					zna={zna}
+					step={step}
+					errorText={error}
+					buyNowAmount={buyNowAmount}
+					onConfirmSetBuyNow={onConfirmSetBuyNow}
+					onClose={onClose}
+				/>
+			);
+			break;
+
+		case Step.COMPLETE:
+			content = <Complete zna={zna} step={step} onClose={onClose} />;
+			break;
+
+		case Step.LOADING:
+			content = <Wizard.Loading message={statusText} />;
+			break;
+	}
+
+	return { content };
+};

src/features/set-buy-now/SetBuyNowForm/FormSteps/index.ts

@@ -0,0 +1,3 @@
+export * from './Complete';
+export * from './Confirm';
+export * from './Details';