From 3a117c51bf24654a4606cadd980e1b685e80b62a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 14 Apr 2021 04:02:07 -0300 Subject: [PATCH] Replace Loader by component from SRC (#2119) * Table: replace CircularProgress compontent * ScanQR: replace CircularProgress component * Send Modal: replace CircularProgress component * infinite scroll loader fix (scroll bounce) * update the SRC dependency and replace CircularProgress component with Loader --- package.json | 2 +- src/components/Loader/index.tsx | 16 ---------------- src/components/Root/index.tsx | 13 ++++++++++--- src/components/ScanQRModal/index.tsx | 4 ++-- src/components/Table/index.tsx | 4 ++-- src/routes/index.tsx | 9 +++++++-- .../safe/components/Balances/SendModal/index.tsx | 4 ++-- src/routes/safe/components/Settings/index.tsx | 8 +++++--- .../Transactions/TxList/TxCollapsed.tsx | 5 ++--- .../components/Transactions/TxList/styled.tsx | 2 +- yarn.lock | 4 ++-- 11 files changed, 34 insertions(+), 37 deletions(-) delete mode 100644 src/components/Loader/index.tsx diff --git a/package.json b/package.json index 9dbaf2d4..1c6490ca 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "@gnosis.pm/safe-apps-sdk": "1.0.3", "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2", "@gnosis.pm/safe-contracts": "1.1.1-dev.2", - "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2e427ee", + "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#b281238", "@gnosis.pm/util-contracts": "2.0.6", "@ledgerhq/hw-transport-node-hid-singleton": "5.45.0", "@material-ui/core": "^4.11.0", diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx deleted file mode 100644 index 03147bae..00000000 --- a/src/components/Loader/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import CircularProgress from '@material-ui/core/CircularProgress' -import * as React from 'react' - -import Page from 'src/components/layout/Page' - -const centerStyle = { - margin: 'auto 0', -} - -const Loader = () => ( - - - -) - -export default Loader diff --git a/src/components/Root/index.tsx b/src/components/Root/index.tsx index 4c5937d0..0e2a9048 100644 --- a/src/components/Root/index.tsx +++ b/src/components/Root/index.tsx @@ -1,4 +1,4 @@ -import { theme as styledTheme } from '@gnosis.pm/safe-react-components' +import { theme as styledTheme, Loader } from '@gnosis.pm/safe-react-components' import { MuiThemeProvider } from '@material-ui/core/styles' import { ConnectedRouter } from 'connected-react-router' import React from 'react' @@ -6,7 +6,7 @@ import { Provider } from 'react-redux' import { ThemeProvider } from 'styled-components' import * as Sentry from '@sentry/react' -import Loader from 'src/components/Loader' +import { LoadingContainer } from 'src/components/LoaderContainer' import App from 'src/components/App' import GlobalErrorBoundary from 'src/components/GlobalErrorBoundary' import AppRoutes from 'src/routes' @@ -23,7 +23,14 @@ const Root = (): React.ReactElement => ( - {wrapInSuspense(, )} + + {wrapInSuspense( + , + + + , + )} + diff --git a/src/components/ScanQRModal/index.tsx b/src/components/ScanQRModal/index.tsx index 737ea4e2..3abaa4bb 100644 --- a/src/components/ScanQRModal/index.tsx +++ b/src/components/ScanQRModal/index.tsx @@ -1,4 +1,4 @@ -import CircularProgress from '@material-ui/core/CircularProgress' +import { Loader } from '@gnosis.pm/safe-react-components' import IconButton from '@material-ui/core/IconButton' import { makeStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' @@ -83,7 +83,7 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem {error} {useWebcam === null ? ( - + ) : ( { )} {isEmpty && ( - + )} {!disablePagination && ( diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 6f038e12..b36bde65 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -4,10 +4,11 @@ import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-route import { LOAD_ADDRESS, OPEN_ADDRESS, SAFELIST_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS } from './routes' -import Loader from 'src/components/Loader' +import { Loader } from '@gnosis.pm/safe-react-components' import { defaultSafeSelector } from 'src/logic/safe/store/selectors' import { useAnalytics } from 'src/utils/googleAnalytics' import { DEFAULT_SAFE_INITIAL_STATE } from 'src/logic/safe/store/reducer/safe' +import { LoadingContainer } from 'src/components/LoaderContainer' const Welcome = React.lazy(() => import('./welcome/container')) @@ -60,7 +61,11 @@ const Routes = (): React.ReactElement => { } if (defaultSafe === DEFAULT_SAFE_INITIAL_STATE) { - return + return ( + + + + ) } if (defaultSafe) { diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx index 8c317ff8..f29cc74a 100644 --- a/src/routes/safe/components/Balances/SendModal/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/index.tsx @@ -1,4 +1,4 @@ -import CircularProgress from '@material-ui/core/CircularProgress' +import { Loader } from '@gnosis.pm/safe-react-components' import { makeStyles } from '@material-ui/core/styles' import React, { Suspense, useEffect, useState } from 'react' @@ -116,7 +116,7 @@ const SendModal = ({ - + } > diff --git a/src/routes/safe/components/Settings/index.tsx b/src/routes/safe/components/Settings/index.tsx index e3b2f703..a5fbcedd 100644 --- a/src/routes/safe/components/Settings/index.tsx +++ b/src/routes/safe/components/Settings/index.tsx @@ -1,4 +1,5 @@ -import { IconText } from '@gnosis.pm/safe-react-components' +import { IconText, Loader } from '@gnosis.pm/safe-react-components' +import { LoadingContainer } from 'src/components/LoaderContainer' import Badge from '@material-ui/core/Badge' import { makeStyles } from '@material-ui/core/styles' import cn from 'classnames' @@ -15,7 +16,6 @@ import ThresholdSettings from './ThresholdSettings' import RemoveSafeIcon from './assets/icons/bin.svg' import { styles } from './style' -import Loader from 'src/components/Loader' import Block from 'src/components/layout/Block' import ButtonLink from 'src/components/layout/ButtonLink' import Col from 'src/components/layout/Col' @@ -60,7 +60,9 @@ const Settings: React.FC = () => { const { menuOptionIndex, showRemoveSafe } = state return !owners ? ( - + + + ) : ( <> diff --git a/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx b/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx index 4e12f101..724393c9 100644 --- a/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx +++ b/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx @@ -1,6 +1,5 @@ -import { Dot, IconText as IconTextSrc, Text, Tooltip } from '@gnosis.pm/safe-react-components' +import { Dot, IconText as IconTextSrc, Loader, Text, Tooltip } from '@gnosis.pm/safe-react-components' import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme' -import CircularProgress from '@material-ui/core/CircularProgress' import React, { ReactElement, useContext, useRef } from 'react' import styled from 'styled-components' @@ -171,7 +170,7 @@ export const TxCollapsed = ({
{transaction?.txStatus === 'PENDING' || transaction?.txStatus === 'PENDING_FAILED' ? ( - + ) : ( (transaction?.txStatus === 'AWAITING_EXECUTION' || transaction?.txStatus === 'AWAITING_CONFIRMATIONS') && ( diff --git a/src/routes/safe/components/Transactions/TxList/styled.tsx b/src/routes/safe/components/Transactions/TxList/styled.tsx index 9058bc80..f7c80df3 100644 --- a/src/routes/safe/components/Transactions/TxList/styled.tsx +++ b/src/routes/safe/components/Transactions/TxList/styled.tsx @@ -516,7 +516,7 @@ export const Centered = styled.div<{ padding?: number }>` export const HorizontallyCentered = styled(Centered)<{ isVisible: boolean }>` visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')}; - height: auto; + height: 100px; ` export const StyledAccordionSummary = styled(AccordionSummary)` diff --git a/yarn.lock b/yarn.lock index 79aa2e77..9582523f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1596,9 +1596,9 @@ solc "0.5.14" truffle "^5.1.21" -"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2e427ee": +"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#b281238": version "0.5.0" - resolved "https://github.com/gnosis/safe-react-components.git#2e427ee36694c7964301fc155b0c080101a34bed" + resolved "https://github.com/gnosis/safe-react-components.git#b2812381a265e9b0a17abbc11392986e6c1c74b8" dependencies: classnames "^2.2.6" react-media "^1.10.0"