Merge branch 'development' into 536-notifications-status-labels-sync

# Conflicts:
#	src/routes/safe/container/index.tsx

src/routes/safe/components/Balances/index.tsx

@@ -15,10 +15,10 @@ import Row from 'src/components/layout/Row'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import CurrencyDropdown from 'src/routes/safe/components/CurrencyDropdown'
-import { useFetchTokens } from 'src/routes/safe/container/hooks/useFetchTokens'
 import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
 import { history } from 'src/store/index'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
+import { useFetchTokens } from '../../container/Hooks/useFetchTokens'
 const Collectibles = React.lazy(() => import('src/routes/safe/components/Balances/Collectibles'))
 const Coins = React.lazy(() => import('src/routes/safe/components/Balances/Coins'))
 

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

@@ -135,22 +135,14 @@ const SettingsDescription = ({ action, addedOwner, newThreshold, removedOwner })
   )
 }
 
-const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
+const TxData = (props) => {
+  const { classes, data } = props
   const [showTxData, setShowTxData] = useState(false)
-  const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
+  const showExpandBtn = data.length > 20
   return (
-    <>
-      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
-        <Bold>Send {amount} to:</Bold>
-        {recipientName ? (
-          <OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
-        ) : (
-          <EtherscanLink knownAddress={false} type="address" value={recipient} />
-        )}
-      </Block>
-      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
-        <Bold>Data (hex encoded):</Bold>
-        <Paragraph className={classes.txDataParagraph} noMargin size="md">
+    <Paragraph className={classes.txDataParagraph} noMargin size="md">
+      {showExpandBtn ? (
+        <>
           {showTxData ? (
             <>
               {data}{' '}
@@ -178,7 +170,29 @@ const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
               </LinkWithRef>
             </>
           )}
-        </Paragraph>
+        </>
+      ) : (
+        data
+      )}
+    </Paragraph>
+  )
+}
+
+const CustomDescription = ({ amount = 0, classes, data, recipient }: any) => {
+  const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
+  return (
+    <>
+      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+        <Bold>Send {amount} to:</Bold>
+        {recipientName ? (
+          <OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
+        ) : (
+          <EtherscanLink knownAddress={false} type="address" value={recipient} />
+        )}
+      </Block>
+      <Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
+        <Bold>Data (hex encoded):</Bold>
+        <TxData classes={classes} data={data} />
       </Block>
     </>
   )

src/routes/safe/container/index.tsx

@@ -5,9 +5,10 @@ import { useSelector } from 'react-redux'
 import Page from 'src/components/layout/Page'
 
 import Layout from 'src/routes/safe/components/Layout'
+
+import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
 import { useCheckForUpdates } from './hooks/useCheckForUpdates'
 import { useLoadSafe } from './hooks/useLoadSafe'
-import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
 
 const INITIAL_STATE = {
   sendFunds: {