diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx index ded4b980..5cdb7eb0 100644 --- a/src/routes/safe/components/Balances/SendModal/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/index.tsx @@ -161,7 +161,7 @@ const SendModal = ({ onClose={onClose} onNext={handleSendCollectible} recipientAddress={recipientAddress} - selectedToken={selectedToken as NFTToken} + selectedToken={selectedToken as NFTToken | undefined} /> )} {activeScreen === 'reviewCollectible' && ( diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx index e073e9d3..9bb111e9 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx @@ -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 }) => { ) : ( @@ -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 }) => { ) } - -export default CollectibleSelectField diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts index 0f608dcf..890830fa 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts @@ -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, }, diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx index b0eca55a..d276caca 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx @@ -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 }) => { ) : ( @@ -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 }) => { ) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts index 0f608dcf..890830fa 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts @@ -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, }, diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx index 9af42f79..c39b17de 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx @@ -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 = ({ - + @@ -232,7 +232,7 @@ const SendCollectible = ({ - +