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

(Fix) - #1554 Send collectible crash on addressBook (#1559) 

* Type TokenSelectField

* Type collectibleSelectField
Remove anys in SendCollectibleTxInfo
Fix cast in SendModal

* Replace cast to toString

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustin Pane 2020-11-04 10:37:26 -03:00 committed by GitHub
parent f69bffd089
commit c9fb7fcc10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/safe/components/Balances/SendModal/index.tsx
View File

@ -161,7 +161,7 @@ const SendModal = ({
onClose={onClose}
onNext={handleSendCollectible}
recipientAddress={recipientAddress}
selectedToken={selectedToken as NFTToken}
selectedToken={selectedToken as NFTToken | undefined}
/>
)}
{activeScreen === 'reviewCollectible' && (

19
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx
View File

@ -13,10 +13,16 @@ import Img from 'src/components/layout/Img'
import Paragraph from 'src/components/layout/Paragraph'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { textShortener } from 'src/utils/strings'
import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
const useSelectedCollectibleStyles = makeStyles(selectedTokenStyles)
const SelectedCollectible = ({ tokenId, tokens }) => {
type SelectedCollectibleProps = {
tokenId?: number | string
tokens: NFTToken[]
}
const SelectedCollectible = ({ tokenId, tokens }: SelectedCollectibleProps): React.ReactElement => {
const classes = useSelectedCollectibleStyles()
const token = tokenId && tokens ? tokens.find(({ tokenId: id }) => tokenId === id) : null
const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
@ -31,7 +37,7 @@ const SelectedCollectible = ({ tokenId, tokens }) => {
<ListItemText
className={classes.tokenData}
primary={shortener(token.name)}
secondary={`token ID: ${shortener(token.tokenId)}`}
secondary={`token ID: ${shortener(token.tokenId.toString())}`}
/>
</>
) : (
@ -45,7 +51,12 @@ const SelectedCollectible = ({ tokenId, tokens }) => {
const useCollectibleSelectFieldStyles = makeStyles(selectStyles)
const CollectibleSelectField = ({ initialValue, tokens }) => {
type CollectibleSelectFieldProps = {
initialValue?: number | string
tokens: NFTToken[]
}
export const CollectibleSelectField = ({ initialValue, tokens }: CollectibleSelectFieldProps): React.ReactElement => {
const classes = useCollectibleSelectFieldStyles()
return (
@ -69,5 +80,3 @@ const CollectibleSelectField = ({ initialValue, tokens }) => {
</Field>
)
}
export default CollectibleSelectField

5
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts
View File

@ -1,6 +1,7 @@
import { sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const selectedTokenStyles = () => ({
export const selectedTokenStyles = createStyles({
container: {
minHeight: '55px',
padding: 0,
@ -16,7 +17,7 @@ export const selectedTokenStyles = () => ({
},
})
export const selectStyles = () => ({
export const selectStyles = createStyles({
selectMenu: {
paddingRight: 0,
},

19
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx
View File

@ -14,10 +14,16 @@ import Paragraph from 'src/components/layout/Paragraph'
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { textShortener } from 'src/utils/strings'
import { NFTAssets } from 'src/logic/collectibles/sources/collectibles'
const useSelectedTokenStyles = makeStyles(selectedTokenStyles)
const SelectedToken = ({ assetAddress, assets }) => {
type SelectedTokenProps = {
assetAddress?: string
assets: NFTAssets
}
const SelectedToken = ({ assetAddress, assets }: SelectedTokenProps): React.ReactElement => {
const classes = useSelectedTokenStyles()
const asset = assetAddress ? assets[assetAddress] : null
const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
@ -32,7 +38,7 @@ const SelectedToken = ({ assetAddress, assets }) => {
<ListItemText
className={classes.tokenData}
primary={shortener(asset.name)}
secondary={`${formatAmount(asset.numberOfTokens)} ${asset.symbol}`}
secondary={`${formatAmount(asset.numberOfTokens.toString())} ${asset.symbol}`}
/>
</>
) : (
@ -46,7 +52,12 @@ const SelectedToken = ({ assetAddress, assets }) => {
const useTokenSelectFieldStyles = makeStyles(selectStyles)
const TokenSelectField = ({ assets, initialValue }) => {
type TokenSelectFieldProps = {
assets: NFTAssets
initialValue?: string
}
const TokenSelectField = ({ assets, initialValue }: TokenSelectFieldProps): React.ReactElement => {
const classes = useTokenSelectFieldStyles()
const assetsAddresses = Object.keys(assets)
@ -70,7 +81,7 @@ const TokenSelectField = ({ assets, initialValue }) => {
</ListItemIcon>
<ListItemText
primary={asset.name}
secondary={`Count: ${formatAmount(asset.numberOfTokens)} ${asset.symbol}`}
secondary={`Count: ${formatAmount(asset.numberOfTokens.toString())} ${asset.symbol}`}
/>
</MenuItem>
)

5
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts
View File

@ -1,6 +1,7 @@
import { sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const selectedTokenStyles = () => ({
export const selectedTokenStyles = createStyles({
container: {
minHeight: '55px',
padding: 0,
@ -16,7 +17,7 @@ export const selectedTokenStyles = () => ({
},
})
export const selectStyles = () => ({
export const selectStyles = createStyles({
selectMenu: {
paddingRight: 0,
},

8
src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
View File

@ -20,7 +20,7 @@ import { getNameFromAddressBook } from 'src/logic/addressBook/utils'
import { nftTokensSelector, safeActiveSelectorMap } from 'src/logic/collectibles/store/selectors'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
import CollectibleSelectField from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField'
import { CollectibleSelectField } from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField'
import TokenSelectField from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField'
import { sm } from 'src/theme/variables'
@ -50,7 +50,7 @@ type SendCollectibleProps = {
onClose: () => void
onNext: (txInfo: SendCollectibleTxInfo) => void
recipientAddress?: string
selectedToken: NFTToken
selectedToken?: NFTToken
}
export type SendCollectibleTxInfo = {
@ -220,7 +220,7 @@ const SendCollectible = ({
</Row>
<Row margin="sm">
<Col>
<TokenSelectField assets={nftAssets} initialValue={(selectedToken as any).assetAddress} />
<TokenSelectField assets={nftAssets} initialValue={selectedToken?.assetAddress} />
</Col>
</Row>
<Row margin="xs">
@ -232,7 +232,7 @@ const SendCollectible = ({
</Row>
<Row margin="md">
<Col>
<CollectibleSelectField initialValue={(selectedToken as any).tokenId} tokens={selectedNFTTokens} />
<CollectibleSelectField initialValue={selectedToken?.tokenId} tokens={selectedNFTTokens} />
</Col>
</Row>
</Block>