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

Refactor send funds token select field to surpress mui warnings

This commit is contained in:
mmv 2019-10-15 14:26:39 +04:00
parent 849ed0a9ee
commit f13cf6d083
5 changed files with 88 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.jsx
View File

@ -1,5 +1,5 @@
// @flow // @flow
import React, { useEffect, useState } from 'react' import React from 'react'
import { List } from 'immutable' import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import MenuItem from '@material-ui/core/MenuItem' import MenuItem from '@material-ui/core/MenuItem'
@ -22,63 +22,57 @@ type SelectFieldProps = {
} }
type SelectedTokenProps = { type SelectedTokenProps = {
token?: Token, tokenAddress?: string,
classes: Object, classes: Object,
tokens: List<Token>,
} }
const SelectedToken = ({ token, classes }: SelectedTokenProps) => ( const SelectedToken = ({ tokenAddress, tokens, classes }: SelectedTokenProps) => {
<MenuItem className={classes.container}> const token = tokens.find(({ address }) => address === tokenAddress)
{token ? (
<>
<ListItemIcon className={classes.tokenImage}>
<Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
</ListItemIcon>
<ListItemText
className={classes.tokenData}
primary={token.name}
secondary={`${formatAmount(token.balance)} ${token.symbol}`}
/>
</>
) : (
<Paragraph color="disabled" size="lg" weight="light" style={{ opacity: 0.5 }}>
Select an asset*
</Paragraph>
)}
</MenuItem>
)
const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
type InitialTokenType = Token | string
const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => {
const [initialToken, setInitialToken] = useState<InitialTokenType>('')
useEffect(() => {
const selectedToken = tokens.find((token) => token.name === initialValue)
setInitialToken(selectedToken || '')
}, [initialValue])
return ( return (
<Field <MenuItem className={classes.container}>
name="token" {token ? (
component={SelectField} <>
classes={{ selectMenu: classes.selectMenu }} <ListItemIcon className={classes.tokenImage}>
validate={required}
renderValue={(token) => <SelectedTokenStyled token={token} />}
initialValue={initialToken}
displayEmpty
>
{tokens.map((token) => (
<MenuItem key={token.address} value={token}>
<ListItemIcon>
<Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} /> <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={token.name} secondary={`${formatAmount(token.balance)} ${token.symbol}`} /> <ListItemText
</MenuItem> className={classes.tokenData}
))} primary={token.name}
</Field> secondary={`${formatAmount(token.balance)} ${token.symbol}`}
/>
</>
) : (
<Paragraph color="disabled" size="lg" weight="light" style={{ opacity: 0.5 }}>
Select an asset*
</Paragraph>
)}
</MenuItem>
) )
} }
const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => (
<Field
name="token"
component={SelectField}
classes={{ selectMenu: classes.selectMenu }}
validate={required}
renderValue={(tokenAddress) => <SelectedTokenStyled tokenAddress={tokenAddress} tokens={tokens} />}
initialValue={initialValue}
displayEmpty
>
{tokens.map((token) => (
<MenuItem key={token.address} value={token.address}>
<ListItemIcon>
<Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
</ListItemIcon>
<ListItemText primary={token.name} secondary={`${formatAmount(token.balance)} ${token.symbol}`} />
</MenuItem>
))}
</Field>
)
export default withStyles(selectStyles)(TokenSelectField) export default withStyles(selectStyles)(TokenSelectField)

9
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
View File

@ -96,7 +96,8 @@ const SendFunds = ({
{(...args) => { {(...args) => {
const formState = args[2] const formState = args[2]
const mutators = args[3] const mutators = args[3]
const { token } = formState.values const { token: tokenAddress } = formState.values
const selectedTokenRecord = tokens.find((token) => token.address === tokenAddress)
const handleScan = (value) => { const handleScan = (value) => {
let scannedAddress = value let scannedAddress = value
@ -170,14 +171,14 @@ const SendFunds = ({
required, required,
mustBeFloat, mustBeFloat,
greaterThan(0), greaterThan(0),
maxValue(token && token.balance), maxValue(selectedTokenRecord && selectedTokenRecord.balance),
)} )}
placeholder="Amount*" placeholder="Amount*"
text="Amount*" text="Amount*"
className={classes.addressInput} className={classes.addressInput}
inputAdornment={ inputAdornment={
token && { selectedTokenRecord && {
endAdornment: <InputAdornment position="end">{token.symbol}</InputAdornment>, endAdornment: <InputAdornment position="end">{selectedTokenRecord.symbol}</InputAdornment>,
} }
} }
/> />

2
src/routes/safe/components/Balances/dataFetcher.js
View File

@ -18,7 +18,7 @@ export type BalanceRow = SortRow<BalanceData>
export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => { export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
const rows = activeTokens.map((token: Token) => ({ const rows = activeTokens.map((token: Token) => ({
[BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri }, [BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri, address: token.address },
[buildOrderFieldFrom(BALANCE_TABLE_ASSET_ID)]: token.name, [buildOrderFieldFrom(BALANCE_TABLE_ASSET_ID)]: token.name,
[BALANCE_TABLE_BALANCE_ID]: `${formatAmount(token.balance)} ${token.symbol}`, [BALANCE_TABLE_BALANCE_ID]: `${formatAmount(token.balance)} ${token.symbol}`,
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance), [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),

6
src/routes/safe/components/Balances/index.jsx
View File

@ -71,11 +71,11 @@ class Balances extends React.Component<Props, State> {
this.setState(() => ({ [`show${action}`]: false })) this.setState(() => ({ [`show${action}`]: false }))
} }
showSendFunds = (token: Token) => { showSendFunds = (tokenAddress: string) => {
this.setState({ this.setState({
sendFunds: { sendFunds: {
isOpen: true, isOpen: true,
selectedToken: token, selectedToken: tokenAddress,
}, },
}) })
} }
@ -174,7 +174,7 @@ class Balances extends React.Component<Props, State> {
size="small" size="small"
color="primary" color="primary"
className={classes.send} className={classes.send}
onClick={() => this.showSendFunds(row.asset.name)} onClick={() => this.showSendFunds(row.asset.address)}
testId="balance-send-btn" testId="balance-send-btn"
> >
<CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />

65
src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx
View File

@ -47,7 +47,7 @@ const ReviewRemoveOwner = ({
<> <>
<Row align="center" grow className={classes.heading}> <Row align="center" grow className={classes.heading}>
<Paragraph weight="bolder" className={classes.manage} noMargin> <Paragraph weight="bolder" className={classes.manage} noMargin>
Replace owner Replace owner
</Paragraph> </Paragraph>
<Paragraph className={classes.annotation}>2 of 2</Paragraph> <Paragraph className={classes.annotation}>2 of 2</Paragraph>
<IconButton onClick={onClose} disableRipple> <IconButton onClick={onClose} disableRipple>
@ -61,12 +61,12 @@ const ReviewRemoveOwner = ({
<Block className={classes.details}> <Block className={classes.details}>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="lg" color="primary" noMargin> <Paragraph size="lg" color="primary" noMargin>
Details Details
</Paragraph> </Paragraph>
</Block> </Block>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="sm" color="disabled" noMargin> <Paragraph size="sm" color="disabled" noMargin>
Safe name Safe name
</Paragraph> </Paragraph>
<Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}> <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
{safeName} {safeName}
@ -74,7 +74,7 @@ const ReviewRemoveOwner = ({
</Block> </Block>
<Block margin="lg"> <Block margin="lg">
<Paragraph size="sm" color="disabled" noMargin> <Paragraph size="sm" color="disabled" noMargin>
Any transaction requires the confirmation of: Any transaction requires the confirmation of:
</Paragraph> </Paragraph>
<Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}> <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
{`${threshold} out of ${owners.size} owner(s)`} {`${threshold} out of ${owners.size} owner(s)`}
@ -90,34 +90,35 @@ const ReviewRemoveOwner = ({
</Row> </Row>
<Hairline /> <Hairline />
{owners.map( {owners.map(
(owner) => owner.address !== ownerAddress && ( (owner) =>
<React.Fragment key={owner.address}> owner.address !== ownerAddress && (
<Row className={classes.owner}> <React.Fragment key={owner.address}>
<Col xs={1} align="center"> <Row className={classes.owner}>
<Identicon address={owner.address} diameter={32} /> <Col xs={1} align="center">
</Col> <Identicon address={owner.address} diameter={32} />
<Col xs={11}> </Col>
<Block className={classNames(classes.name, classes.userName)}> <Col xs={11}>
<Paragraph weight="bolder" size="lg" noMargin> <Block className={classNames(classes.name, classes.userName)}>
{owner.name} <Paragraph weight="bolder" size="lg" noMargin>
</Paragraph> {owner.name}
<Block justify="center" className={classes.user}>
<Paragraph size="md" color="disabled" className={classes.address} noMargin>
{owner.address}
</Paragraph> </Paragraph>
<CopyBtn content={owner.address} /> <Block justify="center" className={classes.user}>
<EtherscanBtn type="address" value={owner.address} /> <Paragraph size="md" color="disabled" className={classes.address} noMargin>
{owner.address}
</Paragraph>
<CopyBtn content={owner.address} />
<EtherscanBtn type="address" value={owner.address} />
</Block>
</Block> </Block>
</Block> </Col>
</Col> </Row>
</Row> <Hairline />
<Hairline /> </React.Fragment>
</React.Fragment> ),
),
)} )}
<Row className={classes.info} align="center"> <Row className={classes.info} align="center">
<Paragraph weight="bolder" noMargin color="primary" size="md"> <Paragraph weight="bolder" noMargin color="primary" size="md">
REMOVING OWNER &darr; REMOVING OWNER &darr;
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline /> <Hairline />
@ -142,7 +143,7 @@ const ReviewRemoveOwner = ({
</Row> </Row>
<Row className={classes.info} align="center"> <Row className={classes.info} align="center">
<Paragraph weight="bolder" noMargin color="primary" size="md"> <Paragraph weight="bolder" noMargin color="primary" size="md">
ADDING NEW OWNER &darr; ADDING NEW OWNER &darr;
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline /> <Hairline />
@ -170,9 +171,13 @@ const ReviewRemoveOwner = ({
</Row> </Row>
</Block> </Block>
<Hairline /> <Hairline />
<Row>
<Paragraph>Yooo</Paragraph>
</Row>
<Hairline />
<Row align="center" className={classes.buttonRow}> <Row align="center" className={classes.buttonRow}>
<Button minWidth={140} minHeight={42} onClick={onClickBack}> <Button minWidth={140} minHeight={42} onClick={onClickBack}>
Back Back
</Button> </Button>
<Button <Button
type="submit" type="submit"
@ -183,7 +188,7 @@ const ReviewRemoveOwner = ({
color="primary" color="primary"
testId={REPLACE_OWNER_SUBMIT_BTN_TEST_ID} testId={REPLACE_OWNER_SUBMIT_BTN_TEST_ID}
> >
Submit Submit
</Button> </Button>
</Row> </Row>
</> </>