status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1064 from gnosis/feature/address-book-suggestions 

Address Book Suggestions
This commit is contained in:
Mati Dastugue 2020-07-03 16:17:29 -03:00 committed by GitHub
parent 36e78e00b4 72a13f8c74
commit 3fdac537ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/forms/validator.ts
View File

@ -40,6 +40,14 @@ export const greaterThan = (min: number | string) => (value: string) => {
return `Should be greater than ${min}`
}
export const equalOrGreaterThan = (min: number | string) => (value: string): undefined | string => {
if (Number.isNaN(Number(value)) || Number.parseFloat(value) >= Number(min)) {
return undefined
}
return `Should be equal or greater than ${min}`
}
const regexQuery = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
const url = new RegExp(regexQuery)
export const mustBeUrl = (value: string) => {

40
src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
View File

@ -14,6 +14,19 @@ import { getAddressBookListSelector } from 'src/logic/addressBook/store/selector
import { getAddressFromENS } from 'src/logic/wallets/getWeb3'
import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
export interface AddressBookProps {
fieldMutator: (address: string) => void
isCustomTx?: boolean
pristine: boolean
recipientAddress?: string
setSelectedEntry: (
entry: { address?: string; name?: string } | React.SetStateAction<{ address: string; name: string }>,
) => void
setIsValidAddress: (valid?: boolean) => void
}
const useStyles = makeStyles(styles)
const textFieldLabelStyle = makeStyles(() => ({
root: {
overflow: 'hidden',
@ -30,34 +43,39 @@ const textFieldInputStyle = makeStyles(() => ({
},
}))
const filterAddressBookWithContractAddresses = async (addressBook) => {
const filterAddressBookWithContractAddresses = async (
addressBook: List<{ address: string }>,
): Promise<List<{ address: string }>> => {
const abFlags = await Promise.all(
addressBook.map(async ({ address }) => {
return (await mustBeEthereumContractAddress(address)) === undefined
}),
addressBook.map(
async ({ address }: { address: string }): Promise<boolean> => {
return (await mustBeEthereumContractAddress(address)) === undefined
},
),
)
return addressBook.filter((adbkEntry, index) => abFlags[index])
return addressBook.filter((_, index) => abFlags[index])
}
const AddressBookInput = ({
classes,
fieldMutator,
isCustomTx,
pristine,
recipientAddress,
setIsValidAddress,
setSelectedEntry,
}: any) => {
}: AddressBookProps) => {
const classes = useStyles()
const addressBook = useSelector(getAddressBookListSelector)
const [isValidForm, setIsValidForm] = useState(true)
const [validationText, setValidationText] = useState<any>(true)
const [validationText, setValidationText] = useState<string>('')
const [inputTouched, setInputTouched] = useState(false)
const [blurred, setBlurred] = useState(pristine)
const [adbkList, setADBKList] = useState(List([]))
const [adbkList, setADBKList] = useState<List<{ address: string }>>(List([]))
const [inputAddValue, setInputAddValue] = useState(recipientAddress)
const onAddressInputChanged = async (addressValue) => {
const onAddressInputChanged = async (addressValue: string): Promise<void> => {
setInputAddValue(addressValue)
let resolvedAddress = addressValue
let isValidText
@ -99,7 +117,7 @@ const AddressBookInput = ({
}
useEffect(() => {
const filterAdbkContractAddresses = async () => {
const filterAdbkContractAddresses = async (): Promise<void> => {
if (!isCustomTx) {
setADBKList(addressBook)
return

4
src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts
View File

@ -1,4 +1,6 @@
export const styles = () => ({
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
itemOptionList: {
display: 'flex',
},

50
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx
View File

@ -1,7 +1,9 @@
import { makeStyles } from '@material-ui/core/styles'
import React from 'react'
import React, { useState } from 'react'
import { useFormState, useField } from 'react-final-form'
import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
import Field from 'src/components/forms/Field'
import TextField from 'src/components/forms/TextField'
import {
@ -16,7 +18,7 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co
const useStyles = makeStyles(styles)
export interface EthAddressProps {
export interface EthAddressInputProps {
isContract?: boolean
isRequired?: boolean
name: string
@ -24,10 +26,24 @@ export interface EthAddressProps {
text: string
}
const EthAddressInput = ({ isContract = true, isRequired = true, name, onScannedValue, text }: EthAddressProps) => {
const EthAddressInput = ({
isContract = true,
isRequired = true,
name,
onScannedValue,
text,
}: EthAddressInputProps) => {
const classes = useStyles()
const validatorsList = [isRequired && required, mustBeEthereumAddress, isContract && mustBeEthereumContractAddress]
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>({
address: value,
name: '',
})
const handleScan = (value, closeQrModal) => {
let scannedAddress = value
@ -44,15 +60,25 @@ const EthAddressInput = ({ isContract = true, isRequired = true, name, onScanned
<>
<Row margin="md">
<Col xs={11}>
<Field
component={TextField}
name={name}
placeholder={text}
testId={name}
text={text}
type="text"
validate={validate}
/>
{selectedEntry?.address ? (
<Field
component={TextField}
name={name}
placeholder={text}
testId={name}
text={text}
type="text"
validate={validate}
/>
) : (
<AddressBookInput
setSelectedEntry={setSelectedEntry}
setIsValidAddress={() => {}}
fieldMutator={onScannedValue}
isCustomTx
pristine={pristine}
/>
)}
</Col>
<Col center="xs" className={classes} middle="xs" xs={1}>
<ScanQRWrapper handleScan={handleScan} />

4
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
View File

@ -19,7 +19,7 @@ import Field from 'src/components/forms/Field'
import GnoForm from 'src/components/forms/GnoForm'
import TextField from 'src/components/forms/TextField'
import TextareaField from 'src/components/forms/TextareaField'
import { composeValidators, maxValue, mustBeFloat, greaterThan } from 'src/components/forms/validator'
import { composeValidators, maxValue, mustBeFloat, equalOrGreaterThan } from 'src/components/forms/validator'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import ButtonLink from 'src/components/layout/ButtonLink'
@ -230,7 +230,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
placeholder="Value*"
text="Value*"
type="text"
validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))}
validate={composeValidators(mustBeFloat, maxValue(ethBalance), equalOrGreaterThan(0))}
/>
</Col>
</Row>

1
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
View File

@ -100,7 +100,6 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
>
{(submitting, validating, rest, mutators) => {
setCallResults = mutators.setCallResults
return (
<>
<Block className={classes.formContainer}>