add typing for TxDescription components

src/logic/contracts/methodIds.ts

@@ -56,7 +56,7 @@ const METHOD_TO_ID = {
   '0xe009cfde': SAFE_METHODS_NAMES.DISABLE_MODULE,
 }
 
-type SafeMethods = typeof SAFE_METHODS_NAMES[keyof typeof SAFE_METHODS_NAMES]
+export type SafeMethods = typeof SAFE_METHODS_NAMES[keyof typeof SAFE_METHODS_NAMES]
 type TokenMethods = 'transfer' | 'transferFrom' | 'safeTransferFrom'
 
 type DecodedValues = Array<{

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.tsx

@@ -10,7 +10,7 @@ import Bold from 'src/components/layout/Bold'
 import LinkWithRef from 'src/components/layout/Link'
 import Paragraph from 'src/components/layout/Paragraph'
 import { getNameFromAddressBook } from 'src/logic/addressBook/store/selectors'
-import { SAFE_METHODS_NAMES } from 'src/logic/contracts/methodIds'
+import { SAFE_METHODS_NAMES, SafeMethods } from 'src/logic/contracts/methodIds'
 import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
 import OwnerAddressTableCell from 'src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell'
 import { getTxAmount } from 'src/routes/safe/components/Transactions/TxsTable/columns'
@@ -45,7 +45,12 @@ export const styles = () => ({
   },
 })
 
-const TransferDescription = ({ amount = '', recipient }) => {
+interface TransferDescriptionProps {
+  amount: string
+  recipient: string
+}
+
+const TransferDescription = ({ amount = '', recipient }: TransferDescriptionProps): React.ReactElement => {
   const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
   return (
     <Block data-testid={TRANSACTIONS_DESC_SEND_TEST_ID}>
@@ -59,7 +64,11 @@ const TransferDescription = ({ amount = '', recipient }) => {
   )
 }
 
-const RemovedOwner = ({ removedOwner }) => {
+interface RemovedOwnerProps {
+  removedOwner: string
+}
+
+const RemovedOwner = ({ removedOwner }: RemovedOwnerProps): React.ReactElement => {
   const ownerChangedName = useSelector((state) => getNameFromAddressBook(state, removedOwner))
 
   return (
@@ -74,7 +83,11 @@ const RemovedOwner = ({ removedOwner }) => {
   )
 }
 
-const AddedOwner = ({ addedOwner }) => {
+interface AddedOwnerProps {
+  addedOwner: string
+}
+
+const AddedOwner = ({ addedOwner }: AddedOwnerProps): React.ReactElement => {
   const ownerChangedName = useSelector((state) => getNameFromAddressBook(state, addedOwner))
 
   return (
@@ -89,7 +102,11 @@ const AddedOwner = ({ addedOwner }) => {
   )
 }
 
-const NewThreshold = ({ newThreshold }) => (
+interface NewThresholdProps {
+  newThreshold: string
+}
+
+const NewThreshold = ({ newThreshold }: NewThresholdProps): React.ReactElement => (
   <Block data-testid={TRANSACTIONS_DESC_CHANGE_THRESHOLD_TEST_ID}>
     <Bold>Change required confirmations:</Bold>
     <Paragraph noMargin size="md">
@@ -98,21 +115,43 @@ const NewThreshold = ({ newThreshold }) => (
   </Block>
 )
 
-const AddModule = ({ module }) => (
+interface AddModuleProps {
+  module: string
+}
+
+const AddModule = ({ module }: AddModuleProps): React.ReactElement => (
   <Block data-testid={TRANSACTIONS_DESC_ADD_MODULE_TEST_ID}>
     <Bold>Add module:</Bold>
     <EtherscanLink value={module} knownAddress={false} type="address" />
   </Block>
 )
 
-const RemoveModule = ({ module }) => (
+interface RemoveModuleProps {
+  module: string
+}
+
+const RemoveModule = ({ module }: RemoveModuleProps): React.ReactElement => (
   <Block data-testid={TRANSACTIONS_DESC_REMOVE_MODULE_TEST_ID}>
     <Bold>Remove module:</Bold>
     <EtherscanLink value={module} knownAddress={false} type="address" />
   </Block>
 )
 
-const SettingsDescription = ({ action, addedOwner, newThreshold, removedOwner, module }) => {
+interface SettingsDescriptionProps {
+  action: SafeMethods
+  addedOwner?: string
+  newThreshold?: string
+  removedOwner?: string
+  module?: string
+}
+
+const SettingsDescription = ({
+  action,
+  addedOwner,
+  newThreshold,
+  removedOwner,
+  module,
+}: SettingsDescriptionProps): React.ReactElement => {
   if (action === SAFE_METHODS_NAMES.REMOVE_OWNER && removedOwner && newThreshold) {
     return (
       <>