(Fix) - #623 Fixes short tx data (#928)

* Fixs short tx data

* Feedback

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 (
-    <>
+    <Paragraph className={classes.txDataParagraph} noMargin size="md">
-      <Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+      {showExpandBtn ? (
-        <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">
           {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.jsx

@@ -1,76 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { useSelector } from 'react-redux'
-
-import Page from 'src/components/layout/Page'
-
-import Layout from 'src/routes/safe/components/Layout'
-import { useCheckForUpdates } from 'src/routes/safe/container/Hooks/useCheckForUpdates'
-import { useLoadSafe } from 'src/routes/safe/container/Hooks/useLoadSafe'
-import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
-
-const INITIAL_STATE = {
-  sendFunds: {
-    isOpen: false,
-    selectedToken: undefined,
-  },
-  showReceive: false,
-}
-
-const SafeView = () => {
-  const [state, setState] = useState(INITIAL_STATE)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-
-  useLoadSafe(safeAddress)
-  useCheckForUpdates()
-
-  const onShow = (action) => () => {
-    setState((prevState) => ({
-      ...prevState,
-      [`show${action}`]: true,
-    }))
-  }
-
-  const onHide = (action) => () => {
-    setState((prevState) => ({
-      ...prevState,
-      [`show${action}`]: false,
-    }))
-  }
-
-  const showSendFunds = (token) => {
-    setState((prevState) => ({
-      ...prevState,
-      sendFunds: {
-        isOpen: true,
-        selectedToken: token,
-      },
-    }))
-  }
-
-  const hideSendFunds = () => {
-    setState((prevState) => ({
-      ...prevState,
-      sendFunds: {
-        isOpen: false,
-        selectedToken: undefined,
-      },
-    }))
-  }
-  const { sendFunds, showReceive } = state
-
-  return (
-    <Page>
-      <Layout
-        hideSendFunds={hideSendFunds}
-        onHide={onHide}
-        onShow={onShow}
-        sendFunds={sendFunds}
-        showReceive={showReceive}
-        showSendFunds={showSendFunds}
-      />
-    </Page>
-  )
-}
-
-export default SafeView

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 { useCheckForUpdates } from 'src/routes/safe/container/hooks/useCheckForUpdates'
+
-import { useLoadSafe } from 'src/routes/safe/container/hooks/useLoadSafe'
 import { safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors'
+import { useCheckForUpdates } from './Hooks/useCheckForUpdates'
+import { useLoadSafe } from './Hooks/useLoadSafe'
 
 const INITIAL_STATE = {
   sendFunds: {