793b522487
* 🚧 New Market Form * use dev-5 as default * Additional UI work * Add mock data * 💄 More UI items * 💄 add preview step * 💄 Disable proposal button if not enough native tokens * ✏️ Add disclaimer * ✏️ fix combobox search * 🚧 clean up components * Add filters, modify, button * ✨ feat: Add details to New Market Dialog * add assetName * add helper method - spagetti code * Update NewMarketMessageDetailsDialog, attempt to hook up client call * 🚨 fix mobile safari overflow * update init deposit to 10_001 whole token * reduce delay block to 5 * Update mock data * 🚧 SO FRIGGIN CLOSE * 💄 style/ux nits * add gov to registry * PLS * IT FUCKING WORKS * Add assets * FIX TICKER * ADD NEW ASSETICON * button width * change default env to dev * Remove mention of Impersonation dialog * Market Search entry point * uncomment feature * Clean up NewMarketStep components * Restore env.json * Add space T.T * useGlobalCommands fix types * 🚧 feat: useNextClobPairId hook WIP * Add potentialMarkets hook to parse CSV and hide new market entrypoints * Use updated stringKeys * Update localization, import nits * bump v4-client * add gov vars * new useGovernanceVariables * Add validator client calls: proposal fetch/submission * Update token usage, utilize gov vars * remove console log * import nits * NewMarketMessageDetailsDialog: Fix initial_deposit_amount * NewMarketAgreement Dialog * confirm flow * Remove initialDepositAmount from mainnet env * NewMarket: Add stringParams to step3 * Update csv * update env.json add localization changes * cleanup initialDepositAmountBN and decimals * ^ * use undefined in place of 0 for DiffOutput * remove hardcoded string * Remove potentialMarket from csv * Ensure user is out of liquidity tier modification * bump localization, add additional details to receipts * feedback addressed * Add margin instead of space * margin/padding nits, shorten filter method, remove ?. chaining * additional feedback --------- Co-authored-by: Taehoon Lee <19664986+ttl33@users.noreply.github.com>
96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import styled, { AnyStyledComponent, css } from 'styled-components';
|
|
|
|
import { AlertType } from '@/constants/alerts';
|
|
import { layoutMixins } from '@/styles/layoutMixins';
|
|
import { formMixins } from '@/styles/formMixins';
|
|
|
|
import { AlertMessage } from '@/components/AlertMessage';
|
|
import { Input, InputProps } from '@/components/Input';
|
|
import { WithLabel } from '@/components/WithLabel';
|
|
|
|
type StyleProps = {
|
|
className?: string;
|
|
};
|
|
|
|
type ElementProps = {
|
|
label: React.ReactNode;
|
|
slotRight?: React.ReactNode;
|
|
validationConfig?: {
|
|
attached?: boolean;
|
|
type: AlertType;
|
|
message: string;
|
|
};
|
|
};
|
|
|
|
export type FormInputProps = ElementProps & StyleProps & InputProps;
|
|
|
|
export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
({ id, label, slotRight, className, validationConfig, ...otherProps }, ref) => (
|
|
<Styled.FormInputContainer
|
|
className={className}
|
|
isValidationAttached={validationConfig?.attached}
|
|
>
|
|
<Styled.InputContainer hasSlotRight={!!slotRight}>
|
|
<Styled.WithLabel label={label} inputID={id} disabled={otherProps?.disabled}>
|
|
<Input ref={ref} id={id} {...otherProps} />
|
|
</Styled.WithLabel>
|
|
{slotRight}
|
|
</Styled.InputContainer>
|
|
{validationConfig && (
|
|
<Styled.AlertMessage type={validationConfig.type}>
|
|
{validationConfig.message}
|
|
</Styled.AlertMessage>
|
|
)}
|
|
</Styled.FormInputContainer>
|
|
)
|
|
);
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.AlertMessage = styled(AlertMessage)``;
|
|
|
|
Styled.FormInputContainer = styled.div<{ isValidationAttached?: boolean }>`
|
|
${layoutMixins.flexColumn}
|
|
gap: 0.5rem;
|
|
|
|
${({ isValidationAttached }) =>
|
|
isValidationAttached &&
|
|
css`
|
|
--input-radius: 0.5em 0.5em 0 0;
|
|
|
|
${Styled.AlertMessage} {
|
|
border-left: none;
|
|
margin: 0;
|
|
border-radius: 0 0 0.5em 0.5em;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
Styled.InputContainer = styled.div<{ hasSlotRight?: boolean }>`
|
|
${formMixins.inputContainer}
|
|
|
|
input {
|
|
padding: var(--form-input-paddingY) var(--form-input-paddingX);
|
|
padding-top: 0;
|
|
}
|
|
|
|
${({ hasSlotRight }) =>
|
|
hasSlotRight &&
|
|
css`
|
|
padding-right: var(--form-input-paddingX);
|
|
input {
|
|
padding-right: 0;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
Styled.WithLabel = styled(WithLabel)<{ disabled?: boolean }>`
|
|
${formMixins.inputLabel}
|
|
|
|
label {
|
|
${({ disabled }) => !disabled && 'cursor: text;'}
|
|
padding: var(--form-input-paddingY) var(--form-input-paddingX) 0;
|
|
}
|
|
`;
|