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 = ({
-
+