Fix types + improve form values
This commit is contained in:
parent
f21913d84a
commit
0587bb9139
|
@ -40,7 +40,7 @@ export const greaterThan = (min: number | string) => (value: string) => {
|
||||||
return `Should be greater than ${min}`
|
return `Should be greater than ${min}`
|
||||||
}
|
}
|
||||||
|
|
||||||
export const equalOrGreaterThan = (min: number | string) => (value: string) => {
|
export const equalOrGreaterThan = (min: number | string) => (value: string): undefined | string => {
|
||||||
if (Number.isNaN(Number(value)) || Number.parseFloat(value) >= Number(min)) {
|
if (Number.isNaN(Number(value)) || Number.parseFloat(value) >= Number(min)) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,17 +15,18 @@ import { getAddressFromENS } from 'src/logic/wallets/getWeb3'
|
||||||
import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
|
import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
|
||||||
|
|
||||||
export interface AddressBookProps {
|
export interface AddressBookProps {
|
||||||
classes: any
|
|
||||||
fieldMutator: (address: string) => void
|
fieldMutator: (address: string) => void
|
||||||
isCustomTx?: boolean
|
isCustomTx?: boolean
|
||||||
pristine: boolean
|
pristine: boolean
|
||||||
recipientAddress?: string
|
recipientAddress?: string
|
||||||
setSelectedEntry: (
|
setSelectedEntry: (
|
||||||
entry: { address?: string; name?: string } | React.SetStateAction<{ address: any; name: string }>,
|
entry: { address?: string; name?: string } | React.SetStateAction<{ address: string; name: string }>,
|
||||||
) => void
|
) => void
|
||||||
setIsValidAddress: (valid?: boolean) => void
|
setIsValidAddress: (valid?: boolean) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const useStyles = makeStyles(styles)
|
||||||
|
|
||||||
const textFieldLabelStyle = makeStyles(() => ({
|
const textFieldLabelStyle = makeStyles(() => ({
|
||||||
root: {
|
root: {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
@ -42,7 +43,9 @@ const textFieldInputStyle = makeStyles(() => ({
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const filterAddressBookWithContractAddresses = async (addressBook: Array<any>): Promise<any> => {
|
const filterAddressBookWithContractAddresses = async (
|
||||||
|
addressBook: List<{ address: string }>,
|
||||||
|
): Promise<List<{ address: string }>> => {
|
||||||
const abFlags = await Promise.all(
|
const abFlags = await Promise.all(
|
||||||
addressBook.map(
|
addressBook.map(
|
||||||
async ({ address }: { address: string }): Promise<boolean> => {
|
async ({ address }: { address: string }): Promise<boolean> => {
|
||||||
|
@ -50,11 +53,11 @@ const filterAddressBookWithContractAddresses = async (addressBook: Array<any>):
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
return addressBook.filter((_, index) => abFlags[index])
|
return addressBook.filter((_, index) => abFlags[index])
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddressBookInput = ({
|
const AddressBookInput = ({
|
||||||
classes,
|
|
||||||
fieldMutator,
|
fieldMutator,
|
||||||
isCustomTx,
|
isCustomTx,
|
||||||
pristine,
|
pristine,
|
||||||
|
@ -62,12 +65,13 @@ const AddressBookInput = ({
|
||||||
setIsValidAddress,
|
setIsValidAddress,
|
||||||
setSelectedEntry,
|
setSelectedEntry,
|
||||||
}: AddressBookProps) => {
|
}: AddressBookProps) => {
|
||||||
|
const classes = useStyles()
|
||||||
const addressBook = useSelector(getAddressBookListSelector)
|
const addressBook = useSelector(getAddressBookListSelector)
|
||||||
const [isValidForm, setIsValidForm] = useState(true)
|
const [isValidForm, setIsValidForm] = useState(true)
|
||||||
const [validationText, setValidationText] = useState<any>('')
|
const [validationText, setValidationText] = useState<string>('')
|
||||||
const [inputTouched, setInputTouched] = useState(false)
|
const [inputTouched, setInputTouched] = useState(false)
|
||||||
const [blurred, setBlurred] = useState(pristine)
|
const [blurred, setBlurred] = useState(pristine)
|
||||||
const [adbkList, setADBKList] = useState(List([]))
|
const [adbkList, setADBKList] = useState<List<{ address: string }>>(List([]))
|
||||||
|
|
||||||
const [inputAddValue, setInputAddValue] = useState(recipientAddress)
|
const [inputAddValue, setInputAddValue] = useState(recipientAddress)
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
export const styles = () => ({
|
import { createStyles } from '@material-ui/core'
|
||||||
|
|
||||||
|
export const styles = createStyles({
|
||||||
itemOptionList: {
|
itemOptionList: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import { useFormState, useField } from 'react-final-form'
|
||||||
|
|
||||||
import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
|
import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
|
||||||
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
|
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
|
||||||
|
@ -17,14 +18,12 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
const useStyles = makeStyles(styles)
|
||||||
|
|
||||||
export interface EthAddressProps {
|
export interface AddressBookInputProps {
|
||||||
isContract?: boolean
|
isContract?: boolean
|
||||||
isRequired?: boolean
|
isRequired?: boolean
|
||||||
name: string
|
name: string
|
||||||
onScannedValue: (scannedValue: string) => void
|
onScannedValue: (scannedValue: string) => void
|
||||||
text: string
|
text: string
|
||||||
value?: string
|
|
||||||
pristine: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const EthAddressInput = ({
|
const EthAddressInput = ({
|
||||||
|
@ -33,12 +32,14 @@ const EthAddressInput = ({
|
||||||
name,
|
name,
|
||||||
onScannedValue,
|
onScannedValue,
|
||||||
text,
|
text,
|
||||||
value,
|
}: AddressBookInputProps) => {
|
||||||
pristine,
|
|
||||||
}: EthAddressProps) => {
|
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const validatorsList = [isRequired && required, mustBeEthereumAddress, isContract && mustBeEthereumContractAddress]
|
const validatorsList = [isRequired && required, mustBeEthereumAddress, isContract && mustBeEthereumContractAddress]
|
||||||
const validate = composeValidators(...validatorsList.filter((_) => _))
|
const validate = composeValidators(...validatorsList.filter((_) => _))
|
||||||
|
const { pristine } = useFormState({ subscription: { pristine: true } })
|
||||||
|
const {
|
||||||
|
input: { value },
|
||||||
|
} = useField('contractAddress', { subscription: { value: true } })
|
||||||
const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
|
const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
|
||||||
address: value,
|
address: value,
|
||||||
name: '',
|
name: '',
|
||||||
|
@ -59,7 +60,7 @@ const EthAddressInput = ({
|
||||||
<>
|
<>
|
||||||
<Row margin="md">
|
<Row margin="md">
|
||||||
<Col xs={11}>
|
<Col xs={11}>
|
||||||
{selectedEntry && selectedEntry.address ? (
|
{selectedEntry?.address ? (
|
||||||
<Field
|
<Field
|
||||||
component={TextField}
|
component={TextField}
|
||||||
name={name}
|
name={name}
|
||||||
|
|
|
@ -106,10 +106,8 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
|
||||||
<SafeInfo />
|
<SafeInfo />
|
||||||
<FormDivisor />
|
<FormDivisor />
|
||||||
<EthAddressInput
|
<EthAddressInput
|
||||||
value={rest.values.contractAddress}
|
|
||||||
name="contractAddress"
|
name="contractAddress"
|
||||||
onScannedValue={mutators.setContractAddress}
|
onScannedValue={mutators.setContractAddress}
|
||||||
pristine={rest.pristine}
|
|
||||||
text="Contract Address*"
|
text="Contract Address*"
|
||||||
/>
|
/>
|
||||||
<ContractABI />
|
<ContractABI />
|
||||||
|
|
Loading…
Reference in New Issue