Merge branch 'development' of github.com:gnosis/safe-react into empty-space-validator

.env.example

@@ -29,4 +29,3 @@ REACT_APP_APP_VERSION=$npm_package_version
 
 # For Apps
 REACT_APP_GNOSIS_APPS_URL=https://safe-apps.staging.gnosisdev.com
-REACT_APP_APPS_DISABLED=false

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/Layout/Tabs/index.tsx

@@ -100,17 +100,15 @@ const TabsComponent = (props: Props) => {
         label={TransactionsLabel}
         value={`${match.url}/transactions`}
       />
-      {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
+      <Tab
-        <Tab
+        classes={{
-          classes={{
+          selected: classes.tabWrapperSelected,
-            selected: classes.tabWrapperSelected,
+          wrapper: classes.tabWrapper,
-            wrapper: classes.tabWrapper,
+        }}
-          }}
+        data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
-          data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
+        label={AppsLabel}
-          label={AppsLabel}
+        value={`${match.url}/apps`}
-          value={`${match.url}/apps`}
+      />
-        />
-      )}
       <Tab
         classes={{
           selected: classes.tabWrapperSelected,

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

@@ -89,13 +89,11 @@ const Layout = (props: Props) => {
       <Switch>
         <Route exact path={`${match.path}/balances/:assetType?`} render={() => wrapInSuspense(<Balances />, null)} />
         <Route exact path={`${match.path}/transactions`} render={() => wrapInSuspense(<TxsTable />, null)} />
-        {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
+        <Route
-          <Route
+          exact
-            exact
+          path={`${match.path}/apps`}
-            path={`${match.path}/apps`}
+          render={() => wrapInSuspense(<Apps closeModal={closeGenericModal} openModal={openGenericModal} />, null)}
-            render={() => wrapInSuspense(<Apps closeModal={closeGenericModal} openModal={openGenericModal} />, null)}
+        />
-          />
-        )}
         <Route exact path={`${match.path}/settings`} render={() => wrapInSuspense(<Settings />, null)} />
         <Route exact path={`${match.path}/address-book`} render={() => wrapInSuspense(<AddressBookTable />, null)} />
         <Redirect to={`${match.path}/balances`} />

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: {

src/theme/mui.ts

@@ -108,6 +108,7 @@ const theme = createMuiTheme({
     MuiStepper: {
       root: {
         padding: `${lg} 0 0 15px`,
+        background: 'transparent',
       },
     },
     MuiIconButton: {