@mui/material#Stack TypeScript Examples

function SelectedNodeEditor({ node }: SelectedNodeEditorProps) {
  const dom = useDom();
  const { viewState } = usePageEditorState();
  const nodeError = viewState.nodes[node.id]?.error;
  const componentConfig = viewState.nodes[node.id]?.componentConfig || { argTypes: {} };

  const component = useToolpadComponent(dom, getElementNodeComponentId(node));

  return (
    <Stack direction="column" gap={1}>
      <Typography variant="subtitle1">
        Component: {component?.displayName || '<unknown>'}
      </Typography>
      <Typography variant="subtitle2" sx={{ mb: 2 }}>
        ID: {node.id}
      </Typography>
      <NodeNameEditor node={node} />
      {nodeError ? <ErrorAlert error={nodeError} /> : null}
      {node ? (
        <React.Fragment>
          <Typography variant="subtitle1" sx={{ mt: 2 }}>
            Properties:
          </Typography>
          <ComponentPropsEditor componentConfig={componentConfig} node={node} />
        </React.Fragment>
      ) : null}
    </Stack>
  );
}

function BeatmapBackgroundSettings() {
  const theater = useCommonManagers();
  const { beatmapBackgroundSettingsStore } = theater;
  const settings = useObservable(() => beatmapBackgroundSettingsStore.settings$, { blur: 0, enabled: false, dim: 0 });
  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Beatmap Background</Typography>
        <Stack>
          <Typography>Blur</Typography>
          <Slider
            value={Math.round(settings.blur * 100)}
            onChange={(_, v) => beatmapBackgroundSettingsStore.setBlur((v as number) / 100)}
            valueLabelDisplay={"auto"}
            valueLabelFormat={formatToPercent}
          />
          <Typography>Dim</Typography>
          <Slider
            value={Math.round(settings.dim * 100)}
            onChange={(_, v) => beatmapBackgroundSettingsStore.setDim((v as number) / 100)}
            valueLabelDisplay={"auto"}
            valueLabelFormat={formatToPercent}
          />
        </Stack>
      </Stack>
    </Paper>
  );
}

export default function CallNotificationOutgoing(props: {
	callee?: string,
	onCancel?: VoidFunction,
	loading?: boolean
}) {
	return (
		<Paper sx={{
			padding: 2,
			width: 400,
			boxSizing: "border-box"
		}} elevation={3}>
			<Stack direction="column" alignItems="stretch" spacing={2}>
				<Typography>Calling {props.callee} on FaceTime&#8230;</Typography>
				<Stack direction="row" spacing={2}>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="error" disabled={props.loading} onClick={props.onCancel}>Cancel</Button>
				</Stack>
			</Stack>
		</Paper>
	);
}

export function ConnectedStatus({ state }: IConnectedStatusProps) {
	const {environment} = useContext(EnvironmentContext)
	return (
		<Stack direction="row" alignItems="center" spacing={2}>
			<Tooltip title="SDK Connection Environment" placement="bottom">
				<Chip
					size="small"
					color="info"
					label={getEnvironmentName(environment)}
					sx={{
						lineHeight: 1.1,
						height: "20px",
						fontSize: "0.8125rem"
					}}
				/>
			</Tooltip>
			<Box sx={{ display: "inline" }}>
				<Typography variant="subtitle1" >Connected </Typography>
				<Typography variant="subtitle2">
					<Address address={state.connection.address}/>
				</Typography>
			</Box>
			<IconButton
				color="inherit"
				title="Disconnect"
				onClick={state.disconnect}
			>
				<Icon icon={faLinkSlash}/>
			</IconButton>
		</Stack>
	)
}

export default function Index() {
  const [values, setValues] = useState<FormProps>()
  const onSubmit = (data: FormProps) => {
    setValues(data)
  }
  let defaultValues: FormProps = { hallo: '' }
  return (
    <Box sx={{
      maxWidth: 300,
      margin: '30px auto 0 auto'
    }}>
      <FormContainer defaultValues={defaultValues} onSuccess={onSubmit}>
        <Stack direction={'column'}>
          <TextFieldElement name={'hallo'} label={'hallo'} /> <br />
          <TextFieldElement color={'primary'} name={'primary'} label={'Primary'} /><br />
          <TextFieldElement color={'secondary'} name={'secondary'} label={'Secondary'} />
          <br />
          <Button type={'submit'} variant={'contained'} color={'primary'}>Submit</Button>
        </Stack>
      </FormContainer>
      <div>
        Data:<br />
        {JSON.stringify(values)}
      </div>
    </Box>
  )
}

LabelValuePair = ({
  label = null,
  value = "-",
  orientation = "column",
  stkProps = {},
  lblProps = {},
  valProps = {},
}: LabelValuePairProps) => {
  return (
    <Stack direction={{ xs: "column", sm: orientation }} {...stkProps}>
      <label style={{ marginRight: 5, fontWeight: 600 }} {...lblProps}>
        {label}
      </label>
      <label style={{ marginRight: 5, fontWeight: 500 }} {...valProps}>
        {value}
      </label>
    </Stack>
  );
}

export default function CallNotificationIncoming(props: {
	caller?: string,
	onDecline?: VoidFunction,
	onAccept?: VoidFunction,
	loading?: boolean
}) {
	return (
		<Paper sx={{
			padding: 2,
			width: 400,
			boxSizing: "border-box"
		}} elevation={3}>
			<Stack direction="column" alignItems="stretch" spacing={2}>
				<Typography>Incoming FaceTime call from {props.caller}</Typography>
				<Stack direction="row" spacing={2}>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="error" disabled={props.loading} onClick={props.onDecline}>Decline</Button>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="success" disabled={props.loading} onClick={props.onAccept}>Accept</Button>
				</Stack>
			</Stack>
		</Paper>
	);
}

export default function PageOptionsPanel() {
  const state = usePageEditorState();
  const pageNodeId = state.nodeId;
  const dom = useDom();

  const page = appDom.getNode(dom, pageNodeId, 'page');

  return (
    <div>
      <Stack spacing={1} alignItems="start">
        <Typography variant="subtitle1">Page:</Typography>
        <NodeNameEditor node={page} />
        <Button
          startIcon={<PageIcon />}
          color="inherit"
          component="a"
          href={`/app/${state.appId}/preview/pages/${pageNodeId}`}
        >
          Preview
        </Button>
        <Divider variant="middle" sx={{ alignSelf: 'stretch' }} />
        <Typography variant="subtitle1">Page State:</Typography>
        <UrlQueryEditor pageNodeId={pageNodeId} />
        <QueryStateEditor />
        <QueryEditor />
      </Stack>
    </div>
  );
}

export function DisconnectedStatus() {
	return (
		<Stack direction="row" alignItems="center" spacing={2}>
			<Button
				startIcon={<Icon icon={faLink}/>}
				color="inherit"
				variant="outlined"
				component={Link}
				to="/connect"
			>
				Connect
			</Button>
		</Stack>
	)
}

function ParamsEditor<Q>({ node, argTypes }: ParamsEditorProps<Q>) {
  return (
    <Stack spacing={1}>
      {(Object.entries(argTypes) as ExactEntriesOf<ArgTypeDefinitions<Q>>).map(
        ([propName, propTypeDef]) =>
          propTypeDef ? (
            <div key={propName}>
              <NodeAttributeEditor
                node={node}
                namespace="params"
                name={propName}
                argType={propTypeDef}
              />
            </div>
          ) : null,
      )}
    </Stack>
  );
}

export function ConnectStatus({ status }: { status: string }) {
	return (
		<Stack direction="row" alignItems="center" spacing={2}>
			<Box sx={{ display: "inline" }}>
				<Typography variant="subtitle1">{ status }</Typography>
			</Box>
		</Stack>
	)
}

function PageRow({ spacing, children, alignItems, justifyContent }: PageRowProps) {
  return (
    <Stack
      direction="row"
      sx={{
        gap: spacing,
        alignItems,
        justifyContent,
        width: '100%',
      }}
    >
      {children}
    </Stack>
  );
}

export function Analyzer() {
  // Short cuts will then only be available when this page is <Analyzer/> is open
  useShortcuts();

  return (
    <SettingsModalProvider>
      <SettingsModal />
      <Stack
        sx={{
          p: 2,
          flexGrow: 1,
          height: "100%",
        }}
        gap={2}
      >
        <GameCanvas />
        <Paper elevation={1} sx={{ boxShadow: "none" }}>
          <PlayBar />
        </Paper>
      </Stack>
    </SettingsModalProvider>
  );
}

export function EthereumDeployForm({ form }: IEthereumDeployFormProps) {
	return (
		<>
			<Stack spacing={2}>
				<FormSelect
					form={form}
					defaultValue={"ERC721"}
					name="contract"
					label="Contract Type"
				>
					<MenuItem value={"ERC721"}>{"ERC721"}</MenuItem>
					<MenuItem value={"ERC1155"}>{"ERC1155"}</MenuItem>
				</FormSelect>
				<FormTextInput form={form} name="name" label="Name"/>
				<FormTextInput form={form} name="symbol" label="Symbol"/>
				<FormTextInput form={form} name="baseURI" label="Base URI"/>
				<FormTextInput form={form} name="contractURI" label="Contract URI"/>
				<FormCheckbox form={form} name="private" label="Private Collection"/>
			</Stack>
		</>
	)
}

function sortsTab(currentTab: number) {
    const { options: { sorts, sortDesc }, setOption } = useLibraryOptionsContext();

    const handleChange = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
        if (sorts === index) {
            setOption('sortDesc', (sortDes) => !sortDes);
        } else {
            setOption('sortDesc', false);
        }
        setOption('sorts', index);
    };

    return (
        <>
            <TabPanel index={1} currentIndex={currentTab}>
                <Stack direction="column">
                    {
                        ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
                            let icon;
                            if (sorts === e) {
                                icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
                                    : (<ArrowDownwardIcon color="primary" />);
                            }
                            icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
                            return (
                                <ListItem disablePadding>
                                    <ListItemButton onClick={(event) => handleChange(event, e)}>
                                        <ListItemIcon>{icon}</ListItemIcon>
                                        <ListItemText primary={e} />
                                    </ListItemButton>
                                </ListItem>
                            );
                        })
                    }
                </Stack>
            </TabPanel>
        </>
    );
}

export function HomeScreen() {
  const { appVersion } = useAppInfo();
  return (
    <Stack gap={4} sx={{ justifyContent: "center", alignItems: "center", margin: "auto", height: "100%" }}>
      <Stack alignItems={"center"}>
        <FastRewind sx={{ height: "2em", width: "2em" }} />
        <Typography fontSize={"1em"} sx={{ userSelect: "none", marginBottom: 2 }}>
          REWIND
        </Typography>
        <Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
          Rewind {appVersion} by{" "}
          <Link href={RewindLinks.OsuPpyShAbstrakt} target={"_blank"} color={"text.secondary"}>
            abstrakt
          </Link>
        </Typography>
        <Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
          osu! University
          <IconButton href={discordUrl} target={"_blank"} size={"small"}>
            <FaDiscord />
          </IconButton>
          <IconButton href={twitterUrl} target={"_blank"} size={"small"}>
            <FaTwitter />
          </IconButton>
          <IconButton href={youtubeUrl} target={"_blank"} size={"small"}>
            <FaYoutube />
          </IconButton>
        </Typography>
      </Stack>
    </Stack>
  );
}

export function SolanaDeployForm({ form }: ISolanaDeployFormProps) {
	return (
		<>
			<Stack spacing={2}>
				<FormTextInput form={form} name="metadataURI" label="Metadata URI"/>
			</Stack>
		</>
	)
}

export function SplashScreen({ status }: Props) {
  const showSpinner =
    status === "LOADING" || status === "NOT_STARTED" || status === "SETUP_MISSING" || status === "READY";
  const loadingText = text(status);
  return (
    <Stack
      sx={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
      gap={2}
    >
      {/*Hardcoding white not good*/}
      <HashLoader color={"white"} loading={showSpinner} />
      <div>{loadingText}</div>
    </Stack>
  );
}

LoadingPage = () => {
  return (
    <Box 
      sx={{
        p: 2,
        display: 'flex',
        flexDirection: 'column',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Stack spacing={2}>
        <img 
          src="/splash.png" 
          alt="grand theft auto 5 logo" 
          height="225"
          style={{ objectFit: 'contain' }}
        />
        <Typography 
          variant="h2" 
          component="h1"
          align="center"
          gutterBottom
        >
          Loading Natives
        </Typography>
        <LinearProgress />
      </Stack>
    </Box>
  )
}

function EmptyState() {
  return (
    <Stack gap={2} alignItems={"center"}>
      <Stack gap={1} alignItems={"center"}>
        <InfoIcon sx={{ height: "2em", width: "2em" }} />
        <Typography>No replay loaded</Typography>
      </Stack>
      <Stack gap={1} alignItems={"center"} direction={"row"}>
        <Box component={LightningBoltIcon} sx={{ height: "1em", color: "text.secondary" }} />
        <Typography color={"text.secondary"}>
          In osu! press F2 while being at a score/fail screen to load the replay
        </Typography>
      </Stack>
      <Stack gap={1} alignItems={"center"} direction={"row"}>
        <Box component={LightningBoltIcon} sx={{ height: "1em", color: "text.secondary" }} />
        <Typography color={"text.secondary"}>
          You can also load a replay with the menu action "File &gt; Open Replay (Ctrl+O)"
        </Typography>
      </Stack>
    </Stack>
  );
}

export function BuyPrepareForm({ orderId, disabled, onComplete }: IBuyPrepareFormProps) {
	const navigate = useNavigate()
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.buy({
						orderId: toOrderId(formData.orderId)
					}))
					navigate(`/buy/${formData.orderId}`, {})
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} defaultValue={orderId} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function AcceptBidForm({ prepare, disabled, onComplete }: IAcceptBidFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}

				try {
					onComplete(await prepare.submit({
						amount: parseInt(formData.amount)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput
						type="number"
						inputProps={{ min: 1, max: prepare.maxAmount, step: 1 }}
						form={form}
						options={{
							min: 1,
							max: Number(prepare.maxAmount)
						}}
						name="amount"
						label="Amount"
					/>
					<Box>
						<FormSubmit form={form} label="Submit" state={resultToState(result.type)} disabled={disabled}/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function DeployPage() {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setComplete, setError } = useRequestResult()
	const blockchain = connection.sdk?.wallet?.blockchain

	return (
		<Page header="Deploy Collection">
			{
				!validateConditions(blockchain) && (
					<CommentedBlock sx={{ my: 2 }}>
						<UnsupportedBlockchainWarning blockchain={blockchain}/>
					</CommentedBlock>
				)
			}
			<CommentedBlock sx={{ my: 2 }} comment={<CollectionDeployComment/>}>
				<form
					onSubmit={handleSubmit(async (formData) => {
						try {
							setComplete(await connection.sdk?.nft.deploy(getDeployRequest(formData)))
						} catch (e) {
							setError(e)
						}
					})}
				>
					<Stack spacing={2}>
						{
							blockchain &&
							<FormSelect
								form={form}
								defaultValue={blockchain}
								name="blockchain"
								label="Blockchain"
							>
								<MenuItem value={BlockchainGroup.ETHEREUM}>
									{Blockchain.ETHEREUM} / {Blockchain.POLYGON}
								</MenuItem>
								<MenuItem value={BlockchainGroup.TEZOS}>{BlockchainGroup.TEZOS}</MenuItem>
								<MenuItem value={Blockchain.SOLANA}>{Blockchain.SOLANA}</MenuItem>
								{ /*<MenuItem value={Blockchain.FLOW}>{Blockchain.FLOW}</MenuItem>*/ }
							</FormSelect>
						}
						<DeployForm form={form}/>
						<Box>
							<FormSubmit
								form={form}
								label="Deploy"
								state={resultToState(result.type)}
								disabled={!validateConditions(blockchain)}
							/>
						</Box>
					</Stack>
				</form>
			</CommentedBlock>

			<CommentedBlock sx={{ my: 2 }} comment={result.type === "complete" ? <CollectionResultComment/> : null}>
				<RequestResult
					result={result}
					completeRender={(data) =>
						<>
							<Box sx={{ my: 2 }}>
								<Typography variant="overline">Collection Address:</Typography>
								<div>
									<InlineCode>{data?.address}</InlineCode> <CopyToClipboard value={data?.address}/>
								</div>
							</Box>
							<Box sx={{ my: 2 }}>
								<TransactionInfo transaction={data?.tx}/>
							</Box>
						</>
					}
				/>
			</CommentedBlock>
		</Page>
	)
}

// Remove this when FAQ is ready

export default function FaqPage({ section }: { section: string }) {
  const { t } = useTranslation()
  const [value, setValue] = useState(section)

  if (faqOnHold) {
    return (
      <Layout title={t('nav.campaigns.faq')}>
        <OnHold />
      </Layout>
    )
  }
  return (
    <Layout title={t('nav.campaigns.faq')}>
      <FaqIntro />
      <TabContext value={value}>
        <Stack direction={{ xs: 'column', md: 'row' }}>
          <VerticalTabs setValue={setValue} />
          <TabPanel value="common-questions" sx={{ p: 0 }}>
            {COMMON_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="campaigns" sx={{ p: 0 }}>
            {CAMPAIGN_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="donations" sx={{ p: 0 }}>
            {DONATION_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="recurring-donations" sx={{ p: 0 }}>
            {MONTHLY_DONATION_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="potential-fraud" sx={{ p: 0 }}>
            {POTENTION_SCAM_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="attracting-donators" sx={{ p: 0 }}>
            {ATTRACTING_DONATORS_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
          <TabPanel value="corporate-partnership" sx={{ p: 0 }}>
            {PARTNERSHIPS_QUESTIONS.flatMap(({ header, content, visible }) =>
              visible ? <ExpandableListItem key={header} header={header} content={content} /> : [],
            )}
          </TabPanel>
        </Stack>
      </TabContext>
      <ContactUs />
      <ScrollToTop />
    </Layout>
  )
}

export function MintForm({ prepare, disabled, onComplete }: IMintFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}

				try {
					onComplete(await prepare.submit({
						uri: formData.metadataUri,
						supply: parseFloat(formData.supply) ?? 1,
						lazyMint: formData.lazy ?? false,
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="metadataUri" label="Metadata URI"/>
					<FormTextInput
						type="number"
						form={form}
						name="supply"
						label="Supply"
						defaultValue={1}
						disabled={!prepare.multiple}
						helperText={!prepare.multiple ? "Collection does not support multiple mint" : null}
					/>
					<FormCheckbox
						form={form}
						name="lazy"
						label="Lazy-mint"
						disabled={!prepare.supportsLazyMint}
						//helperText={!prepareResponse.multiple ? "Collection does not support multiple mint" : null}
					/>
					<Box>
						<FormSubmit
							form={form}
							label="Submit"
							state={resultToState(result.type)}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

function ConnectionParamsInput({
  value,
  onChange,
}: ConnectionEditorProps<PostgresConnectionParams>) {
  const { handleSubmit, register, formState, reset } = useForm({
    defaultValues: withDefaults(value),
    reValidateMode: 'onChange',
    mode: 'all',
  });
  React.useEffect(() => reset(withDefaults(value)), [reset, value]);

  const doSubmit = handleSubmit((connectionParams) => onChange(connectionParams));

  return (
    <Stack direction="column" gap={1}>
      <Toolbar disableGutters>
        <Button onClick={doSubmit} disabled={!formState.isDirty || !formState.isValid}>
          Save
        </Button>
      </Toolbar>
      <TextField
        label="host"
        {...register('host', { required: true })}
        {...validation(formState, 'host')}
      />
      <TextField
        label="port"
        {...register('port', { required: true })}
        {...validation(formState, 'port')}
      />
      <TextField
        label="user"
        {...register('user', { required: true })}
        {...validation(formState, 'user')}
      />
      <TextField
        label="password"
        type="password"
        {...register('password', { required: true })}
        {...validation(formState, 'password')}
      />
      <TextField
        label="database"
        {...register('database', { required: true })}
        {...validation(formState, 'database')}
      />
    </Stack>
  );
}

export function SellForm({ prepare, disabled, onComplete }: ISellFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}

				try {
					onComplete(await prepare.submit({
						price: toBigNumber(formData.price),
						amount: parseInt(formData.amount),
						currency: getCurrency(prepare.supportedCurrencies[0])
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput
						type="number"
						inputProps={{ min: 0, step: "any" }}
						form={form}
						options={{
							min: 0
						}}
						name="price"
						label="Price"
					/>
					<FormTextInput
						type="number"
						inputProps={{ min: 1, max: prepare.maxAmount, step: 1 }}
						form={form}
						options={{
							min: 1,
							max: Number(prepare.maxAmount)
						}}
						defaultValue={Math.min(1, Number(prepare.maxAmount))}
						name="amount"
						label="Amount"
					/>
					<Box>
						<FormSubmit
							form={form}
							label="Submit"
							state={resultToState(result.type)}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function AcceptBidPrepareForm({ disabled, onComplete }: IAcceptBidPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.acceptBid({
						orderId: toOrderId(formData.orderId)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function BuyForm({
													prepare,
													disabled,
													onComplete,
												}: IBuyFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const {
		result,
		setError,
	} = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}

				try {
					onComplete(await prepare.submit({
						amount: parseInt(formData.amount),
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput
						type="number"
						inputProps={{
							min: 1,
							max: prepare.maxAmount,
							step: 1,
						}}
						form={form}
						options={{
							min: 1,
							max: Number(prepare.maxAmount),
						}}
						name="amount"
						label="Amount"
					/>
					<Box>
						<FormSubmit
							form={form}
							label="Submit"
							state={resultToState(result.type)}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}