+ {step === Step.DETAILS && (
+
+ {
+ setToggledValue(!toggledValue);
+ setBuyNowAmount('');
+ }}
+ />
+
+ setBuyNowAmount(value)}
+ />
+
+ {bidAmountConversionString}
+
+
+ {hasExistingBuyNow
+ ? `This NFT has an existing buy now price of ${buyNowPriceAsString}`
+ : 'This NFT does not have an existing buy now price'}
+
+
+ )}
+
+
+
+ >
+ );
+};
diff --git a/src/features/set-buy-now/SetBuyNowForm/FormSteps/Details/index.ts b/src/features/set-buy-now/SetBuyNowForm/FormSteps/Details/index.ts
new file mode 100644
index 00000000..2201d1f1
--- /dev/null
+++ b/src/features/set-buy-now/SetBuyNowForm/FormSteps/Details/index.ts
@@ -0,0 +1 @@
+export * from './Details';
diff --git a/src/features/set-buy-now/SetBuyNowForm/FormSteps/FormSteps.module.scss b/src/features/set-buy-now/SetBuyNowForm/FormSteps/FormSteps.module.scss
new file mode 100644
index 00000000..b37ba30d
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/index.ts b/src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/index.ts
new file mode 100644
index 00000000..668d54f2
--- /dev/null
+++ b/src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useFormSteps';
diff --git a/src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/useFormSteps.tsx b/src/features/set-buy-now/SetBuyNowForm/FormSteps/hooks/useFormSteps.tsx
new file mode 100644
index 00000000..4c47af17
--- /dev/null
+++ b/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 = (
+