diff --git a/apps/tx-builder/package.json b/apps/tx-builder/package.json index 4f59aedf6..57fca853c 100644 --- a/apps/tx-builder/package.json +++ b/apps/tx-builder/package.json @@ -9,7 +9,7 @@ "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.60", "@safe-global/safe-apps-provider": "^0.18.0", - "@safe-global/safe-deployments": "^1.26.0", + "@safe-global/safe-deployments": "^1.27.0", "@safe-global/safe-gateway-typescript-sdk": "^3.19.0", "axios": "^1.6.0", "evm-proxy-detection": "1.0.0", diff --git a/apps/tx-builder/src/assets/add-new-batch.svg b/apps/tx-builder/src/assets/add-new-batch.svg deleted file mode 100644 index 274ee0969..000000000 --- a/apps/tx-builder/src/assets/add-new-batch.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/apps/tx-builder/src/assets/arrowtotheblock.svg b/apps/tx-builder/src/assets/arrowtotheblock.svg new file mode 100644 index 000000000..54436b814 --- /dev/null +++ b/apps/tx-builder/src/assets/arrowtotheblock.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/tx-builder/src/assets/empty-library-dark.svg b/apps/tx-builder/src/assets/empty-library-dark.svg new file mode 100644 index 000000000..487d38fd7 --- /dev/null +++ b/apps/tx-builder/src/assets/empty-library-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/empty-library-light.svg b/apps/tx-builder/src/assets/empty-library-light.svg new file mode 100644 index 000000000..649f8dc7a --- /dev/null +++ b/apps/tx-builder/src/assets/empty-library-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/empty-library.svg b/apps/tx-builder/src/assets/empty-library.svg deleted file mode 100644 index 7e6198d63..000000000 --- a/apps/tx-builder/src/assets/empty-library.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/tx-builder/src/assets/new-batch-dark.svg b/apps/tx-builder/src/assets/new-batch-dark.svg new file mode 100644 index 000000000..f80dc18a4 --- /dev/null +++ b/apps/tx-builder/src/assets/new-batch-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/new-batch-light.svg b/apps/tx-builder/src/assets/new-batch-light.svg new file mode 100644 index 000000000..82b946d2d --- /dev/null +++ b/apps/tx-builder/src/assets/new-batch-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx index 883069928..e1ae18f63 100644 --- a/apps/tx-builder/src/components/CreateNewBatchCard.tsx +++ b/apps/tx-builder/src/components/CreateNewBatchCard.tsx @@ -1,15 +1,18 @@ -import { useRef } from 'react' +import { useContext, useRef } from 'react' import { alpha } from '@material-ui/core' import Hidden from '@material-ui/core/Hidden' import styled from 'styled-components' import { useTheme } from '@material-ui/core/styles' -import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg' +import { ReactComponent as CreateNewBatchLightSvg } from '../assets/new-batch-light.svg' +import { ReactComponent as CreateNewBatchDarkSvg } from '../assets/new-batch-dark.svg' +import { ReactComponent as ArrowBlock } from '../assets/arrowtotheblock.svg' import useDropZone from '../hooks/useDropZone' import { useMediaQuery } from '@material-ui/core' import { Icon } from './Icon' import Text from './Text' import ButtonLink from './buttons/ButtonLink' +import { EModes, ThemeModeContext } from '../theme/SafeThemeProvider' type CreateNewBatchCardProps = { onFileSelected: (file: File | null) => void @@ -17,6 +20,7 @@ type CreateNewBatchCardProps = { const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { const theme = useTheme() + const mode = useContext(ThemeModeContext) const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')) const fileRef = useRef(null) @@ -40,36 +44,42 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { return ( - + {mode === EModes.DARK ? : } + - - {isAcceptError ? ( - - The uploaded file is not a valid JSON file - - ) : ( - <> - - Drag and drop a JSON file or - - choose a file - - - )} - - + + + Start creating a new batch + or + + {isAcceptError ? ( + + The uploaded file is not a valid JSON file + + ) : ( + <> + + Drag and drop a JSON file or + + choose a file + + + )} + + + ) } @@ -77,28 +87,48 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { export default CreateNewBatchCard const Wrapper = styled.div<{ isSmallScreen: boolean }>` + text-align: center; + position: relative; margin-top: ${({ isSmallScreen }) => (isSmallScreen ? '0' : '64px')}; ` +const StyledArrowBlock = styled(ArrowBlock)` + position: absolute; + left: -2px; + top: 7rem; +` + +const StyledCreateBatchContent = styled.div` + margin-top: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +` + const StyledDragAndDropFileContainer = styled.div<{ dragOver: Boolean fullWidth: boolean error: Boolean }>` box-sizing: border-box; - max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')}; + max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '430px')}; + width: 100%; border: 2px dashed ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)}; border-radius: 8px; background-color: ${({ theme, error }) => error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background}; padding: 24px; - margin: 24px auto 0 auto; + margin: 6px auto; display: flex; justify-content: center; align-items: center; + svg { + margin-right: 4px; + } + ${({ dragOver, error, theme }) => { if (dragOver) { return ` @@ -118,7 +148,6 @@ const StyledDragAndDropFileContainer = styled.div<{ const StyledText = styled(Text)<{ error?: Boolean }>` && { - margin-left: 4px; color: ${({ error, theme }) => error ? theme.palette.common.white : theme.palette.text.secondary}; } @@ -127,9 +156,13 @@ const StyledText = styled(Text)<{ error?: Boolean }>` const StyledButtonLink = styled(ButtonLink)` margin-left: 0.3rem; padding: 0; - text-decoration: none; && > p { - color: ${({ theme }) => theme.palette.secondary.dark}; + color: ${({ theme }) => theme.palette.upload.primary}; + text-decoration: underline; + + &:hover { + color: ${({ theme }) => theme.palette.backdrop.main}; + } } ` diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx index 918605a6f..65c33bba6 100644 --- a/apps/tx-builder/src/components/FixedIcon/index.tsx +++ b/apps/tx-builder/src/components/FixedIcon/index.tsx @@ -61,13 +61,14 @@ export type IconTypes = keyof IconType type Props = { type: IconTypes + className?: string } /** * The `FixedIcon` renders an icon */ -function FixedIcon({ type }: Props): React.ReactElement { - return {icons[type]} +function FixedIcon({ type, className }: Props): React.ReactElement { + return {icons[type]} } export default FixedIcon diff --git a/apps/tx-builder/src/components/Tooltip.tsx b/apps/tx-builder/src/components/Tooltip.tsx index 8aadc667c..5ab31a717 100644 --- a/apps/tx-builder/src/components/Tooltip.tsx +++ b/apps/tx-builder/src/components/Tooltip.tsx @@ -59,7 +59,7 @@ const customTooltip = ({ backgroundColor, textColor, size = 'md' }: TooltipProps backgroundColor: backgroundColor && theme.palette[backgroundColor] ? (theme.palette[backgroundColor] as PaletteColor).main - : '#E8E7E6', + : theme.palette.primary.main, boxShadow: `1px 2px 10px ${alpha('#28363D', 0.18)}`, border: getBorderBySize(size), color: textColor diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx index 2f1a587a8..34f7dd808 100644 --- a/apps/tx-builder/src/components/TransactionBatchListItem.tsx +++ b/apps/tx-builder/src/components/TransactionBatchListItem.tsx @@ -172,7 +172,7 @@ const TransactionBatchListItem = memo( size="medium" aria-label="Expand transaction details" > - + )} @@ -224,7 +224,17 @@ const TransactionListItem = styled.li` margin-bottom: 8px; ` -// transaction postion dot styles +const StyledArrow = styled(FixedIcon)<{ isTxExpanded: boolean }>` + .icon-color { + fill: #b2b5b2; + } + ${({ isTxExpanded }) => + isTxExpanded && + ` + transform: rotateZ(180deg); + + `} +` const PositionWrapper = styled.div` display: flex; diff --git a/apps/tx-builder/src/components/Wrapper/index.tsx b/apps/tx-builder/src/components/Wrapper/index.tsx index 8b98c33d8..dc033d004 100644 --- a/apps/tx-builder/src/components/Wrapper/index.tsx +++ b/apps/tx-builder/src/components/Wrapper/index.tsx @@ -1,25 +1,27 @@ import React from 'react' import styled from 'styled-components' -function Wrapper({ children }: { children: React.ReactNode }) { +function Wrapper({ children, centered }: { children: React.ReactNode; centered?: boolean }) { return ( - +
{children}
 ) } -const StyledWrapper = styled.main` +const StyledWrapper = styled.main<{ centered?: boolean }>` width: 100%; min-height: 100%; + display: flex; background: ${({ theme }) => theme.palette.background.main}; color: ${({ theme }) => theme.palette.text.primary}; > section { - padding: 120px 48px 48px; + width: 100%; + padding: 120px 4rem 48px; box-sizing: border-box; - max-width: 1024px; margin: 0 auto; + max-width: ${({ centered }) => (centered ? '1000px' : '1500px')}; } ` diff --git a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx index 6accf41d2..feed76d69 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx @@ -21,7 +21,7 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr body={ - {batch.transactions.length} + {batch.transactions.length} {`${batch.name} batch will be permanently deleted`} @@ -58,7 +58,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx index 9e5950316..78e5bc7c6 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx @@ -19,7 +19,7 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) => body={ - {count} + {count} {`transaction${count > 1 ? 's' : ''}`} will be cleared @@ -55,7 +55,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx index fb64d4af3..b610ea845 100644 --- a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx @@ -26,7 +26,7 @@ const DeleteTransactionModal = ({ body={ - {positionLabel} + {positionLabel} {`${txDescription} will be permanently deleted from the batch`} @@ -62,7 +62,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx index 9f2b0e86b..9980ceaf0 100644 --- a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx +++ b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx @@ -35,7 +35,7 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea {/* Text */} - {count} + {count} Transaction Batch in the queue. @@ -76,8 +76,6 @@ const StyledModalDot = styled(Dot)` width: 24px; min-width: 24px; top: -1px; - - background-color: #566976; ` const StyledModalText = styled(Text)` diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx index b8cb7d3c1..db164ceba 100644 --- a/apps/tx-builder/src/pages/CreateTransactions.tsx +++ b/apps/tx-builder/src/pages/CreateTransactions.tsx @@ -112,7 +112,7 @@ export default CreateTransactions const TransactionsSectionWrapper = styled(Grid)` position: sticky; - top: 40px; + top: 80px; align-self: flex-start; ` diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx index 71df62f5a..f28802b5e 100644 --- a/apps/tx-builder/src/pages/Dashboard.tsx +++ b/apps/tx-builder/src/pages/Dashboard.tsx @@ -106,7 +106,7 @@ const Dashboard = (): ReactElement => { return ( - + diff --git a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx index eceb7af5e..f61c384a3 100644 --- a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx +++ b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx @@ -77,7 +77,7 @@ const ReviewAndConfirm = () => { return ( <> - + Review and Confirm { const { batches, removeBatch, executeBatch, downloadBatch, renameBatch } = useTransactionLibrary() const navigate = useNavigate() + const mode = useContext(ThemeModeContext) const { open: showDeleteBatchModal, openModal: openDeleteBatchModal, @@ -37,14 +38,8 @@ const TransactionLibrary = () => { } = useModal() const [batchToRemove, setBatchToRemove] = useState() - const hrefToHome = useHref(HOME_PATH) - const internalOnClick = useLinkClickHandler(HOME_PATH) - const redirectToHome = (event: React.MouseEvent) => { - internalOnClick(event) - } - return ( - + Your transaction library {batches.length > 0 ? ( @@ -143,22 +138,23 @@ const TransactionLibrary = () => { )) ) : ( - + {/* Empty library Screen */} - - You don't have any saved batches. - - Safe a batch by{' '} - - + {mode === EModes.DARK ? : } + + You don't have any saved batches. + + Safe a batch by{' '} + in transaction list view. - - + + )} {showDeleteBatchModal && batchToRemove && ( @@ -265,27 +261,16 @@ const StyledIconButton = styled(IconButton)` const StyledEmptyLibraryText = styled(Text)` && { max-width: 320px; - margin-top: 32px; - font-size: 20px; - color: #566976; - } -` - -const StyledEmptyLibraryTextLink = styled(Text)` - && { - margin-top: 8px; - color: #566976; - text-decoration: none; + margin-bottom: 8px; + color: ${({ theme }) => theme.palette.text.secondary}; } ` const StyledLinkIcon = styled(Icon)` vertical-align: middle; margin-right: 2px; -` -const StyledEmptyLibraryLink = styled(Link)` - && { - text-decoration: none; + .icon-color { + fill: ${({ theme }) => theme.palette.text.secondary}; } ` diff --git a/apps/tx-builder/src/theme/SafeThemeProvider.tsx b/apps/tx-builder/src/theme/SafeThemeProvider.tsx index fdb5f8886..af0f837eb 100644 --- a/apps/tx-builder/src/theme/SafeThemeProvider.tsx +++ b/apps/tx-builder/src/theme/SafeThemeProvider.tsx @@ -1,17 +1,24 @@ -import { useEffect, useMemo, useState, type FC } from 'react' +import React, { useEffect, useMemo, useState, type FC } from 'react' import { type Theme } from '@mui/material' import { ThemeProvider } from '@material-ui/core' import createSafeTheme from './safeTheme' import { getSDKVersion } from '@safe-global/safe-apps-sdk' +export enum EModes { + DARK = 'dark', + LIGHT = 'light', +} + type SafeThemeProviderProps = { children: (theme: Theme) => React.ReactNode } +export const ThemeModeContext = React.createContext(EModes.LIGHT) + const SafeThemeProvider: FC = ({ children }) => { - const [isDarkMode, setDarkMode] = useState(false) + const [mode, setMode] = useState(EModes.LIGHT) - const theme = useMemo(() => createSafeTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode]) + const theme = useMemo(() => createSafeTheme(mode), [mode]) useEffect(() => { window.parent.postMessage( @@ -26,11 +33,15 @@ const SafeThemeProvider: FC = ({ children }) => { window.addEventListener('message', function ({ data: eventData }) { if (!eventData?.data?.hasOwnProperty('darkMode')) return - setDarkMode(eventData?.data.darkMode) + setMode(eventData?.data.darkMode ? EModes.DARK : EModes.LIGHT) }) }, []) - return {children(theme)} + return ( + + {children(theme)} + + ) } export default SafeThemeProvider diff --git a/apps/tx-builder/src/theme/darkPalette.ts b/apps/tx-builder/src/theme/darkPalette.ts index 5e1b9b123..3ed7ebf00 100644 --- a/apps/tx-builder/src/theme/darkPalette.ts +++ b/apps/tx-builder/src/theme/darkPalette.ts @@ -57,6 +57,9 @@ const darkPalette = { main: '#FFFFFF', background: '#303033', }, + upload: { + primary: '#fff', + }, static: { main: '#121312', }, diff --git a/apps/tx-builder/src/theme/lightPalette.ts b/apps/tx-builder/src/theme/lightPalette.ts index c9983511c..413a65dfd 100644 --- a/apps/tx-builder/src/theme/lightPalette.ts +++ b/apps/tx-builder/src/theme/lightPalette.ts @@ -57,6 +57,9 @@ const lightPalette = { main: '#121312', background: '#EEEFF0', }, + upload: { + primary: '#12FF80', + }, static: { main: '#121312', }, diff --git a/yarn.lock b/yarn.lock index 24a7ed952..f37a9a315 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2922,12 +2922,12 @@ "@safe-global/safe-gateway-typescript-sdk" "^3.5.3" viem "^1.0.0" -"@safe-global/safe-deployments@^1.26.0": - version "1.26.0" - resolved "https://registry.yarnpkg.com/@safe-global/safe-deployments/-/safe-deployments-1.26.0.tgz#b83615b3b5a66e736e08f8ecf2801ed988e9e007" - integrity sha512-Tw89O4/paT19ieMoiWQbqRApb0Bef/DxweS9rxodXAM5EQModkbyFXGZca+YxXE67sLvWjLr2jJUOxwze8mhGw== +"@safe-global/safe-deployments@^1.27.0": + version "1.37.10" + resolved "https://registry.yarnpkg.com/@safe-global/safe-deployments/-/safe-deployments-1.37.10.tgz#2f61a25bd479332821ba2e91a575237d77406ec3" + integrity sha512-lcxX9CV+xdcLs4dF6Cx18zDww5JyqaX6RdcvU0o/34IgJ4Wjo3J/RNzJAoMhurCAfTGr+0vyJ9V13Qo50AR6JA== dependencies: - semver "^7.3.7" + semver "^7.6.2" "@safe-global/safe-gateway-typescript-sdk@^3.19.0": version "3.22.2" @@ -13933,6 +13933,11 @@ semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: dependencies: lru-cache "^6.0.0" +semver@^7.6.2: + version "7.6.3" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143" + integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A== + send@0.17.2: version "0.17.2" resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"