7740841168
* Initial preview & upload logic * Refactor image & metadata selection & preview logic * Refactor image & metadata selection & preview logic - 2 * Establish metadata-modal connection * Metadata attribute manipulation * Successful metadata attribute removal & update * Successful metadata attribute addition & update * Update existing attributes success * Display image uri among metadata following the upload * Fix: buttons being displayed without an image overlay * Separate upload logic & incorporate useRefs * Clean up: removed unused imports and structures * Add radio buttons for upload service selection * Remove package-lock.json (duplicate .lock files) * Refactor upload logic & metadata modal * Utilize serviceType enum in upload logic * Utilize serviceType enum in upload logic - 2 * Implement user input for NFT.Storage & Pinata API keys * Update use an existing URI text * Remove upload_old.tsx * Fix: reset main metadata fields on metadata modal refresh * Fix: reset main metadata fields on metadata modal refresh - 2 * Make linter happy * Make linter happy - 2 * Move upload file under collections * Post-review update - 1 * Source Pinata endpoint URL from environment variables * Replace regular file arrays with states Co-authored-by: findolor <anakisci@gmail.com>
106 lines
2.5 KiB
TypeScript
106 lines
2.5 KiB
TypeScript
import { FormControl } from 'components/FormControl'
|
|
import { StyledInput } from 'components/forms/StyledInput'
|
|
import type { ComponentPropsWithRef } from 'react'
|
|
import { forwardRef } from 'react'
|
|
|
|
interface BaseProps {
|
|
id: string
|
|
name: string
|
|
title: string
|
|
subtitle?: string
|
|
isRequired?: boolean
|
|
}
|
|
|
|
type SlicedInputProps = Omit<ComponentPropsWithRef<'input'>, keyof BaseProps>
|
|
|
|
export type FormInputProps = BaseProps & SlicedInputProps
|
|
|
|
export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function FormInput(props, ref) {
|
|
const { id, name, title, subtitle, isRequired, ...rest } = props
|
|
return (
|
|
<FormControl htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
|
|
<StyledInput id={id} name={name} ref={ref} {...rest} />
|
|
</FormControl>
|
|
)
|
|
},
|
|
//
|
|
)
|
|
|
|
export const AddressInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function AddressInput(props, ref) {
|
|
return (
|
|
<FormInput
|
|
{...props}
|
|
placeholder={props.placeholder || 'stars1234567890abcdefghijklmnopqrstuvwxyz...'}
|
|
ref={ref}
|
|
type="text"
|
|
/>
|
|
)
|
|
},
|
|
//
|
|
)
|
|
|
|
export const ValidatorAddressInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function ValidatorAddressInput(props, ref) {
|
|
return (
|
|
<FormInput
|
|
{...props}
|
|
placeholder={props.placeholder || 'starsvaloper1234567890abcdefghijklmnopqrstuvwxyz...'}
|
|
ref={ref}
|
|
type="text"
|
|
/>
|
|
)
|
|
},
|
|
//
|
|
)
|
|
|
|
export const NumberInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function NumberInput(props, ref) {
|
|
return <FormInput {...props} ref={ref} type="number" />
|
|
},
|
|
//
|
|
)
|
|
|
|
export const TextInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function TextInput(props, ref) {
|
|
return <FormInput {...props} ref={ref} type="text" />
|
|
},
|
|
//
|
|
)
|
|
|
|
export const UrlInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function UrlInput(props, ref) {
|
|
return <FormInput {...props} ref={ref} type="url" />
|
|
},
|
|
//
|
|
)
|
|
|
|
export const TraitTypeInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function TraitTypeInput(props, ref) {
|
|
return (
|
|
<FormInput
|
|
{...props}
|
|
placeholder={props.placeholder || 'Trait Type'}
|
|
ref={ref}
|
|
type="text"
|
|
/>
|
|
)
|
|
},
|
|
//
|
|
)
|
|
|
|
export const TraitValueInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|
function TraitValueInput(props, ref) {
|
|
return (
|
|
<FormInput
|
|
{...props}
|
|
placeholder={props.placeholder || 'Trait Value'}
|
|
ref={ref}
|
|
type="text"
|
|
/>
|
|
)
|
|
},
|
|
//
|
|
)
|