chore(tx-builder): use the tx-builder new components instead the safe…

…-react-components fix #820
safe-global · Sep 25, 2024 · 9b830de · 9b830de
1 parent 248e46b
commit 9b830de
Show file tree

Hide file tree

Showing 28 changed files with 374 additions and 390 deletions.
diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx
@@ -1,5 +1,4 @@
 import { useRef } from 'react'
-import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components'
 import { alpha } from '@material-ui/core'
 import Hidden from '@material-ui/core/Hidden'
 import styled from 'styled-components'
@@ -8,6 +7,9 @@ import { useTheme } from '@material-ui/core/styles'
 import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.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'
 
 type CreateNewBatchCardProps = {
   onFileSelected: (file: File | null) => void
@@ -47,14 +49,14 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
         error={isAcceptError}
       >
         {isAcceptError ? (
-          <StyledText size={'xl'} error={isAcceptError}>
+          <StyledText variant="body1" error={isAcceptError}>
             The uploaded file is not a valid JSON file
           </StyledText>
         ) : (
           <>
             <Icon type="termsOfUse" size="sm" />
-            <StyledText size={'xl'}>Drag and drop a JSON file or</StyledText>
-            <StyledButtonLink color="primary" onClick={handleBrowse}>
+            <StyledText variant="body1">Drag and drop a JSON file or</StyledText>
+            <StyledButtonLink color="secondary" onClick={handleBrowse}>
               choose a file
             </StyledButtonLink>
           </>
@@ -85,9 +87,11 @@ const StyledDragAndDropFileContainer = styled.div<{
 }>`
   box-sizing: border-box;
   max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')};
-  border: 2px dashed ${({ theme, error }) => (error ? theme.colors.error : '#008c73')};
+  border: 2px dashed
+    ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)};
   border-radius: 8px;
-  background-color: ${({ theme, error }) => (error ? alpha(theme.colors.error, 0.7) : '#eaf7f4')};
+  background-color: ${({ theme, error }) =>
+    error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background};
   padding: 24px;
   margin: 24px auto 0 auto;
 
@@ -104,22 +108,28 @@ const StyledDragAndDropFileContainer = styled.div<{
     }
 
     return `
-      border-color: ${error ? theme.colors.error : '#008c73'};
-      background-color: ${error ? alpha(theme.colors.error, 0.7) : '#eaf7f4'};
+      border-color: ${error ? theme.palette.error.main : theme.palette.secondary.dark};
+      background-color: ${
+        error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background
+      };
     `
   }}
 `
 
 const StyledText = styled(Text)<{ error?: Boolean }>`
-  margin-left: 4px;
-  color: ${({ error }) => (error ? '#FFF' : '#566976')};
+  && {
+    margin-left: 4px;
+    color: ${({ error, theme }) =>
+      error ? theme.palette.common.white : theme.palette.text.secondary};
+  }
 `
 
 const StyledButtonLink = styled(ButtonLink)`
+  margin-left: 0.3rem;
   padding: 0;
   text-decoration: none;
 
   && > p {
-    font-size: 16px;
+    color: ${({ theme }) => theme.palette.secondary.dark};
   }
 `
diff --git a/apps/tx-builder/src/components/Header.tsx b/apps/tx-builder/src/components/Header.tsx
@@ -1,4 +1,3 @@
-import { FixedIcon, Icon, Text, Title, Tooltip } from '@gnosis.pm/safe-react-components'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
@@ -12,6 +11,11 @@ import {
 import { useTransactionLibrary } from '../store'
 import ChecksumWarning from './ChecksumWarning'
 import ErrorAlert from './ErrorAlert'
+import { Tooltip } from './Tooltip'
+import { Icon } from './Icon'
+import FixedIcon from './FixedIcon'
+import { Typography } from '@material-ui/core'
+import Text from './Text'
 
 const HELP_ARTICLE_LINK = 'https://help.safe.global/en/articles/40841-transaction-builder'
 
@@ -51,31 +55,25 @@ const Header = () => {
         {showTitle ? (
           <>
             {/* Transaction Builder Title */}
-            <StyledTitle size="xl">Transaction Builder</StyledTitle>
-            <Tooltip
-              placement="top"
-              title="Help Article"
-              backgroundColor="primary"
-              textColor="white"
-              arrow
-            >
-              <a href={HELP_ARTICLE_LINK} target="_blank" rel="noreferrer">
+            <StyledTitle>Transaction Builder</StyledTitle>
+            <Tooltip placement="top" title="Help Article" backgroundColor="primary" arrow>
+              <StyledIconLink href={HELP_ARTICLE_LINK} target="_blank" rel="noreferrer">
                 <Icon size="md" type="info" />
-              </a>
+              </StyledIconLink>
             </Tooltip>
           </>
         ) : (
           <StyledLink to={HOME_PATH} onClick={goBack}>
             {/* Go Back link */}
             <FixedIcon type={'chevronLeft'} />
-            <StyledLeftLinkLabel size="xl">{goBackLabel[previousUrl]}</StyledLeftLinkLabel>
+            <StyledLeftLinkLabel>{goBackLabel[previousUrl]}</StyledLeftLinkLabel>
           </StyledLink>
         )}
 
         {showLinkToLibrary && (
           <RigthLinkWrapper>
             <StyledLink to={TRANSACTION_LIBRARY_PATH}>
-              <StyledRightLinkLabel size="xl">{`(${batches.length}) Your transaction library`}</StyledRightLinkLabel>
+              <StyledRightLinkLabel>{`(${batches.length}) Your transaction library`}</StyledRightLinkLabel>
               <FixedIcon type={'chevronRight'} />
             </StyledLink>
           </RigthLinkWrapper>
@@ -102,21 +100,35 @@ const HeaderWrapper = styled.header`
   box-sizing: border-box;
 `
 
-const StyledTitle = styled(Title)`
-  font-size: 20px;
-  margin: 0 10px 0 0;
+const StyledTitle = styled(Typography)`
+  && {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 10px 0 0;
+  }
 `
 
 const StyledLink = styled(Link)`
   display: flex;
   align-items: center;
-  color: #000000;
+  color: ${({ theme }) => theme.palette.common.black};
   font-size: 16px;
   text-decoration: none;
+
+  > span {
+    padding-top: 3px;
+
+    path {
+      fill: ${({ theme }) => theme.palette.common.black};
+    }
+  }
 `
 
 const StyledLeftLinkLabel = styled(Text)`
-  margin-left: 8px;
+  && {
+    margin-left: 8px;
+    font-weight: 700;
+  }
 `
 
 const RigthLinkWrapper = styled.div`
@@ -126,5 +138,13 @@ const RigthLinkWrapper = styled.div`
 `
 
 const StyledRightLinkLabel = styled(Text)`
-  margin-right: 8px;
+  && {
+    font-weight: 700;
+    margin-right: 8px;
+  }
+`
+
+const StyledIconLink = styled.a`
+  display: flex;
+  align-items: center;
 `
diff --git a/apps/tx-builder/src/components/QuickTip.tsx b/apps/tx-builder/src/components/QuickTip.tsx
@@ -1,8 +1,7 @@
-import { Icon } from '@gnosis.pm/safe-react-components'
 import MuiAlert from '@material-ui/lab/Alert'
 import MuiAlertTitle from '@material-ui/lab/AlertTitle'
-import React from 'react'
 import styled from 'styled-components'
+import { Icon } from './Icon'
 
 type QuickTipProps = {
   onClose: () => void
@@ -23,10 +22,9 @@ const QuickTip = ({ onClose }: QuickTipProps) => {
 
 const StyledAlert = styled(MuiAlert)`
   && {
-    font-family: 'Averta';
     font-size: 14px;
     padding: 24px;
-    background: #eaf7f4;
+    background: ${({ theme }) => theme.palette.secondary.background};
     color: #566976;
     border-radius: 8px;
 

diff --git a/apps/tx-builder/src/components/ShowMoreText.tsx b/apps/tx-builder/src/components/ShowMoreText.tsx
@@ -1,5 +1,5 @@
 import { useState, SyntheticEvent } from 'react'
-import { Link } from '@gnosis.pm/safe-react-components'
+import Link from './Link'
 
 type ShowMoreTextProps = {
   children: string

diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx
@@ -1,13 +1,3 @@
-import {
-  Accordion,
-  AccordionSummary,
-  Dot,
-  EthHashInfo,
-  FixedIcon,
-  Icon,
-  Text,
-  Tooltip,
-} from '@gnosis.pm/safe-react-components'
 import { AccordionDetails, IconButton } from '@material-ui/core'
 import { memo, useState } from 'react'
 import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd'
@@ -16,6 +6,13 @@ import DragIndicatorIcon from '@material-ui/icons/DragIndicator'
 import { ProposedTransaction } from '../typings/models'
 import TransactionDetails from './TransactionDetails'
 import { getTransactionText } from '../utils'
+import Text from './Text'
+import { Accordion, AccordionSummary } from './Accordion'
+import { Tooltip } from './Tooltip'
+import EthHashInfo from './ETHHashInfo'
+import { Icon } from './Icon'
+import FixedIcon from './FixedIcon'
+import Dot from './Dot'
 
 const UNKNOWN_POSITION_LABEL = '?'
 const minArrowSize = '12'
@@ -86,8 +83,8 @@ const TransactionBatchListItem = memo(
       <TransactionListItem ref={provided.innerRef} {...provided.draggableProps}>
         {/* Transacion Position */}
         <PositionWrapper>
-          <PositionDot color="tag" isDragging={isThisTxBeingDragging}>
-            <Text size="xl">{displayedTxPosition}</Text>
+          <PositionDot color="primary" isDragging={isThisTxBeingDragging}>
+            <Text>{displayedTxPosition}</Text>
           </PositionDot>
           {showArrowAdornment && <ArrowAdornment />}
         </PositionWrapper>
@@ -107,33 +104,27 @@ const TransactionBatchListItem = memo(
             >
               {/* Drag & Drop Indicator */}
               {reorderTransactions && (
-                <Tooltip
-                  placement="top"
-                  title="Drag and Drop"
-                  backgroundColor="primary"
-                  textColor="white"
-                  arrow
-                >
+                <Tooltip placement="top" title="Drag and Drop" backgroundColor="primary" arrow>
                   <DragAndDropIndicatorIcon fontSize="small" />
                 </Tooltip>
               )}
 
               {/* Destination Address label */}
-              <EthHashInfo
+              <StyledEthHashInfo
                 shortName={networkPrefix || ''}
                 hash={to}
                 shortenHash={4}
                 shouldShowShortName
               />
 
               {/* Transaction Description label */}
-              <TransactionsDescription size="lg">{transactionDescription}</TransactionsDescription>
+              <TransactionsDescription>{transactionDescription}</TransactionsDescription>
 
               {/* Transaction Actions */}
 
               {/* Edit transaction */}
               {replaceTransaction && (
-                <Tooltip title="Edit transaction" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip title="Edit transaction" backgroundColor="primary" arrow>
                   <TransactionActionButton
                     size="medium"
                     aria-label="Edit transaction"
@@ -150,13 +141,7 @@ const TransactionBatchListItem = memo(
 
               {/* Delete transaction */}
               {removeTransaction && (
-                <Tooltip
-                  placement="top"
-                  title="Delete transaction"
-                  backgroundColor="primary"
-                  textColor="white"
-                  arrow
-                >
+                <Tooltip placement="top" title="Delete transaction" backgroundColor="primary" arrow>
                   <TransactionActionButton
                     onClick={event => {
                       event.stopPropagation()
@@ -177,7 +162,6 @@ const TransactionBatchListItem = memo(
                   placement="top"
                   title="Expand transaction details"
                   backgroundColor="primary"
-                  textColor="white"
                   arrow
                 >
                   <TransactionActionButton
@@ -255,7 +239,8 @@ const PositionDot = styled(Dot).withConfig({
   height: 24px;
   width: 24px;
   min-width: 24px;
-  background-color: ${({ isDragging }) => (isDragging ? '#92c9be' : ' #e2e3e3')};
+  background-color: ${({ isDragging, theme }) =>
+    isDragging ? theme.palette.primary.light : ' #e2e3e3'};
   transition: background-color 0.5s linear;
 `
 
@@ -301,14 +286,15 @@ const StyledAccordion = styled(Accordion).withConfig({
 
   &.MuiAccordion-root {
     margin-bottom: 0;
-    border-color: ${({ isDragging, expanded }) => (isDragging || expanded ? '#92c9be' : '#e8e7e6')};
+    border-color: #e8e7e6;
     transition: border-color 0.5s linear;
   }
 
   .MuiAccordionSummary-root {
     height: 52px;
     padding: 0px 8px;
-    background-color: ${({ isDragging }) => (isDragging ? '#EFFAF8' : '#FFFFFF')};
+
+    background-color: #ffffff;
 
     &:hover {
       background-color: #ffffff;
@@ -319,9 +305,7 @@ const StyledAccordion = styled(Accordion).withConfig({
     }
 
     &.Mui-expanded {
-      background-color: #effaf8;
-      border-color: ${({ isDragging, expanded }) =>
-        isDragging || expanded ? '#92c9be' : '#e8e7e6'};
+      background-color: #fff;
     }
   }
 
@@ -338,17 +322,26 @@ const TransactionActionButton = styled(IconButton)`
 `
 
 const TransactionsDescription = styled(Text)`
-  flex-grow: 1;
-  padding-left: 24px;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  && {
+    flex-grow: 1;
+    padding-left: 24px;
+    font-size: 14px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `
 
 const DragAndDropIndicatorIcon = styled(DragIndicatorIcon)`
   color: #b2bbc0;
   margin-right: 4px;
 `
 
+const StyledEthHashInfo = styled(EthHashInfo)`
+  p {
+    font-size: 14px;
+  }
+`
+
 export default TransactionBatchListItem