Skip to content

Commit a096772

Browse files
clovisdasilvanetoclovisdasilvaneto
committed
chore(tx-builder): use the tx-builder new components instead the safe-react-components
fix #820
1 parent f0a67ea commit a096772

28 files changed

+374
-390
lines changed

‎apps/tx-builder/src/components/CreateNewBatchCard.tsx

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useRef } from 'react'
2-
import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components'
32
import { alpha } from '@material-ui/core'
43
import Hidden from '@material-ui/core/Hidden'
54
import styled from 'styled-components'
@@ -8,6 +7,9 @@ import { useTheme } from '@material-ui/core/styles'
87
import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg'
98
import useDropZone from '../hooks/useDropZone'
109
import { useMediaQuery } from '@material-ui/core'
10+
import { Icon } from './Icon'
11+
import Text from './Text'
12+
import ButtonLink from './buttons/ButtonLink'
1113

1214
type CreateNewBatchCardProps = {
1315
onFileSelected: (file: File | null) => void
@@ -47,14 +49,14 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
4749
error={isAcceptError}
4850
>
4951
{isAcceptError ? (
50-
<StyledText size={'xl'} error={isAcceptError}>
52+
<StyledText variant="body1" error={isAcceptError}>
5153
The uploaded file is not a valid JSON file
5254
</StyledText>
5355
) : (
5456
<>
5557
<Icon type="termsOfUse" size="sm" />
56-
<StyledText size={'xl'}>Drag and drop a JSON file or</StyledText>
57-
<StyledButtonLink color="primary" onClick={handleBrowse}>
58+
<StyledText variant="body1">Drag and drop a JSON file or</StyledText>
59+
<StyledButtonLink color="secondary" onClick={handleBrowse}>
5860
choose a file
5961
</StyledButtonLink>
6062
</>
@@ -85,9 +87,11 @@ const StyledDragAndDropFileContainer = styled.div<{
8587
}>`
8688
box-sizing: border-box;
8789
max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')};
88-
border: 2px dashed ${({ theme, error }) => (error ? theme.colors.error : '#008c73')};
90+
border: 2px dashed
91+
${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)};
8992
border-radius: 8px;
90-
background-color: ${({ theme, error }) => (error ? alpha(theme.colors.error, 0.7) : '#eaf7f4')};
93+
background-color: ${({ theme, error }) =>
94+
error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background};
9195
padding: 24px;
9296
margin: 24px auto 0 auto;
9397
@@ -104,22 +108,28 @@ const StyledDragAndDropFileContainer = styled.div<{
104108
}
105109
106110
return `
107-
border-color: ${error ? theme.colors.error : '#008c73'};
108-
background-color: ${error ? alpha(theme.colors.error, 0.7) : '#eaf7f4'};
111+
border-color: ${error ? theme.palette.error.main : theme.palette.secondary.dark};
112+
background-color: ${
113+
error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background
114+
};
109115
`
110116
}}
111117
`
112118

113119
const StyledText = styled(Text)<{ error?: Boolean }>`
114-
margin-left: 4px;
115-
color: ${({ error }) => (error ? '#FFF' : '#566976')};
120+
&& {
121+
margin-left: 4px;
122+
color: ${({ error, theme }) =>
123+
error ? theme.palette.common.white : theme.palette.text.secondary};
124+
}
116125
`
117126

118127
const StyledButtonLink = styled(ButtonLink)`
128+
margin-left: 0.3rem;
119129
padding: 0;
120130
text-decoration: none;
121131
122132
&& > p {
123-
font-size: 16px;
133+
color: ${({ theme }) => theme.palette.secondary.dark};
124134
}
125135
`

‎apps/tx-builder/src/components/Header.tsx

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { FixedIcon, Icon, Text, Title, Tooltip } from '@gnosis.pm/safe-react-components'
21
import { Link, useLocation, useNavigate } from 'react-router-dom'
32
import styled from 'styled-components'
43

@@ -12,6 +11,11 @@ import {
1211
import { useTransactionLibrary } from '../store'
1312
import ChecksumWarning from './ChecksumWarning'
1413
import ErrorAlert from './ErrorAlert'
14+
import { Tooltip } from './Tooltip'
15+
import { Icon } from './Icon'
16+
import FixedIcon from './FixedIcon'
17+
import { Typography } from '@material-ui/core'
18+
import Text from './Text'
1519

1620
const HELP_ARTICLE_LINK = 'https://help.safe.global/en/articles/40841-transaction-builder'
1721

@@ -51,31 +55,25 @@ const Header = () => {
5155
{showTitle ? (
5256
<>
5357
{/* Transaction Builder Title */}
54-
<StyledTitle size="xl">Transaction Builder</StyledTitle>
55-
<Tooltip
56-
placement="top"
57-
title="Help Article"
58-
backgroundColor="primary"
59-
textColor="white"
60-
arrow
61-
>
62-
<a href={HELP_ARTICLE_LINK} target="_blank" rel="noreferrer">
58+
<StyledTitle>Transaction Builder</StyledTitle>
59+
<Tooltip placement="top" title="Help Article" backgroundColor="primary" arrow>
60+
<StyledIconLink href={HELP_ARTICLE_LINK} target="_blank" rel="noreferrer">
6361
<Icon size="md" type="info" />
64-
</a>
62+
</StyledIconLink>
6563
</Tooltip>
6664
</>
6765
) : (
6866
<StyledLink to={HOME_PATH} onClick={goBack}>
6967
{/* Go Back link */}
7068
<FixedIcon type={'chevronLeft'} />
71-
<StyledLeftLinkLabel size="xl">{goBackLabel[previousUrl]}</StyledLeftLinkLabel>
69+
<StyledLeftLinkLabel>{goBackLabel[previousUrl]}</StyledLeftLinkLabel>
7270
</StyledLink>
7371
)}
7472

7573
{showLinkToLibrary && (
7674
<RigthLinkWrapper>
7775
<StyledLink to={TRANSACTION_LIBRARY_PATH}>
78-
<StyledRightLinkLabel size="xl">{`(${batches.length}) Your transaction library`}</StyledRightLinkLabel>
76+
<StyledRightLinkLabel>{`(${batches.length}) Your transaction library`}</StyledRightLinkLabel>
7977
<FixedIcon type={'chevronRight'} />
8078
</StyledLink>
8179
</RigthLinkWrapper>
@@ -102,21 +100,35 @@ const HeaderWrapper = styled.header`
102100
box-sizing: border-box;
103101
`
104102

105-
const StyledTitle = styled(Title)`
106-
font-size: 20px;
107-
margin: 0 10px 0 0;
103+
const StyledTitle = styled(Typography)`
104+
&& {
105+
font-size: 20px;
106+
font-weight: 700;
107+
margin: 0 10px 0 0;
108+
}
108109
`
109110

110111
const StyledLink = styled(Link)`
111112
display: flex;
112113
align-items: center;
113-
color: #000000;
114+
color: ${({ theme }) => theme.palette.common.black};
114115
font-size: 16px;
115116
text-decoration: none;
117+
118+
> span {
119+
padding-top: 3px;
120+
121+
path {
122+
fill: ${({ theme }) => theme.palette.common.black};
123+
}
124+
}
116125
`
117126

118127
const StyledLeftLinkLabel = styled(Text)`
119-
margin-left: 8px;
128+
&& {
129+
margin-left: 8px;
130+
font-weight: 700;
131+
}
120132
`
121133

122134
const RigthLinkWrapper = styled.div`
@@ -126,5 +138,13 @@ const RigthLinkWrapper = styled.div`
126138
`
127139

128140
const StyledRightLinkLabel = styled(Text)`
129-
margin-right: 8px;
141+
&& {
142+
font-weight: 700;
143+
margin-right: 8px;
144+
}
145+
`
146+
147+
const StyledIconLink = styled.a`
148+
display: flex;
149+
align-items: center;
130150
`

‎apps/tx-builder/src/components/QuickTip.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { Icon } from '@gnosis.pm/safe-react-components'
21
import MuiAlert from '@material-ui/lab/Alert'
32
import MuiAlertTitle from '@material-ui/lab/AlertTitle'
4-
import React from 'react'
53
import styled from 'styled-components'
4+
import { Icon } from './Icon'
65

76
type QuickTipProps = {
87
onClose: () => void
@@ -23,10 +22,9 @@ const QuickTip = ({ onClose }: QuickTipProps) => {
2322

2423
const StyledAlert = styled(MuiAlert)`
2524
&& {
26-
font-family: 'Averta';
2725
font-size: 14px;
2826
padding: 24px;
29-
background: #eaf7f4;
27+
background: ${({ theme }) => theme.palette.secondary.background};
3028
color: #566976;
3129
border-radius: 8px;
3230

‎apps/tx-builder/src/components/ShowMoreText.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, SyntheticEvent } from 'react'
2-
import { Link } from '@gnosis.pm/safe-react-components'
2+
import Link from './Link'
33

44
type ShowMoreTextProps = {
55
children: string

‎apps/tx-builder/src/components/TransactionBatchListItem.tsx

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
import {
2-
Accordion,
3-
AccordionSummary,
4-
Dot,
5-
EthHashInfo,
6-
FixedIcon,
7-
Icon,
8-
Text,
9-
Tooltip,
10-
} from '@gnosis.pm/safe-react-components'
111
import { AccordionDetails, IconButton } from '@material-ui/core'
122
import { memo, useState } from 'react'
133
import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd'
@@ -16,6 +6,13 @@ import DragIndicatorIcon from '@material-ui/icons/DragIndicator'
166
import { ProposedTransaction } from '../typings/models'
177
import TransactionDetails from './TransactionDetails'
188
import { getTransactionText } from '../utils'
9+
import Text from './Text'
10+
import { Accordion, AccordionSummary } from './Accordion'
11+
import { Tooltip } from './Tooltip'
12+
import EthHashInfo from './ETHHashInfo'
13+
import { Icon } from './Icon'
14+
import FixedIcon from './FixedIcon'
15+
import Dot from './Dot'
1916

2017
const UNKNOWN_POSITION_LABEL = '?'
2118
const minArrowSize = '12'
@@ -86,8 +83,8 @@ const TransactionBatchListItem = memo(
8683
<TransactionListItem ref={provided.innerRef} {...provided.draggableProps}>
8784
{/* Transacion Position */}
8885
<PositionWrapper>
89-
<PositionDot color="tag" isDragging={isThisTxBeingDragging}>
90-
<Text size="xl">{displayedTxPosition}</Text>
86+
<PositionDot color="primary" isDragging={isThisTxBeingDragging}>
87+
<Text>{displayedTxPosition}</Text>
9188
</PositionDot>
9289
{showArrowAdornment && <ArrowAdornment />}
9390
</PositionWrapper>
@@ -107,33 +104,27 @@ const TransactionBatchListItem = memo(
107104
>
108105
{/* Drag & Drop Indicator */}
109106
{reorderTransactions && (
110-
<Tooltip
111-
placement="top"
112-
title="Drag and Drop"
113-
backgroundColor="primary"
114-
textColor="white"
115-
arrow
116-
>
107+
<Tooltip placement="top" title="Drag and Drop" backgroundColor="primary" arrow>
117108
<DragAndDropIndicatorIcon fontSize="small" />
118109
</Tooltip>
119110
)}
120111

121112
{/* Destination Address label */}
122-
<EthHashInfo
113+
<StyledEthHashInfo
123114
shortName={networkPrefix || ''}
124115
hash={to}
125116
shortenHash={4}
126117
shouldShowShortName
127118
/>
128119

129120
{/* Transaction Description label */}
130-
<TransactionsDescription size="lg">{transactionDescription}</TransactionsDescription>
121+
<TransactionsDescription>{transactionDescription}</TransactionsDescription>
131122

132123
{/* Transaction Actions */}
133124

134125
{/* Edit transaction */}
135126
{replaceTransaction && (
136-
<Tooltip title="Edit transaction" backgroundColor="primary" textColor="white" arrow>
127+
<Tooltip title="Edit transaction" backgroundColor="primary" arrow>
137128
<TransactionActionButton
138129
size="medium"
139130
aria-label="Edit transaction"
@@ -150,13 +141,7 @@ const TransactionBatchListItem = memo(
150141

151142
{/* Delete transaction */}
152143
{removeTransaction && (
153-
<Tooltip
154-
placement="top"
155-
title="Delete transaction"
156-
backgroundColor="primary"
157-
textColor="white"
158-
arrow
159-
>
144+
<Tooltip placement="top" title="Delete transaction" backgroundColor="primary" arrow>
160145
<TransactionActionButton
161146
onClick={event => {
162147
event.stopPropagation()
@@ -177,7 +162,6 @@ const TransactionBatchListItem = memo(
177162
placement="top"
178163
title="Expand transaction details"
179164
backgroundColor="primary"
180-
textColor="white"
181165
arrow
182166
>
183167
<TransactionActionButton
@@ -255,7 +239,8 @@ const PositionDot = styled(Dot).withConfig({
255239
height: 24px;
256240
width: 24px;
257241
min-width: 24px;
258-
background-color: ${({ isDragging }) => (isDragging ? '#92c9be' : ' #e2e3e3')};
242+
background-color: ${({ isDragging, theme }) =>
243+
isDragging ? theme.palette.primary.light : ' #e2e3e3'};
259244
transition: background-color 0.5s linear;
260245
`
261246

@@ -301,14 +286,15 @@ const StyledAccordion = styled(Accordion).withConfig({
301286
302287
&.MuiAccordion-root {
303288
margin-bottom: 0;
304-
border-color: ${({ isDragging, expanded }) => (isDragging || expanded ? '#92c9be' : '#e8e7e6')};
289+
border-color: #e8e7e6;
305290
transition: border-color 0.5s linear;
306291
}
307292
308293
.MuiAccordionSummary-root {
309294
height: 52px;
310295
padding: 0px 8px;
311-
background-color: ${({ isDragging }) => (isDragging ? '#EFFAF8' : '#FFFFFF')};
296+
297+
background-color: #ffffff;
312298
313299
&:hover {
314300
background-color: #ffffff;
@@ -319,9 +305,7 @@ const StyledAccordion = styled(Accordion).withConfig({
319305
}
320306
321307
&.Mui-expanded {
322-
background-color: #effaf8;
323-
border-color: ${({ isDragging, expanded }) =>
324-
isDragging || expanded ? '#92c9be' : '#e8e7e6'};
308+
background-color: #fff;
325309
}
326310
}
327311
@@ -338,17 +322,26 @@ const TransactionActionButton = styled(IconButton)`
338322
`
339323

340324
const TransactionsDescription = styled(Text)`
341-
flex-grow: 1;
342-
padding-left: 24px;
343-
344-
white-space: nowrap;
345-
overflow: hidden;
346-
text-overflow: ellipsis;
325+
&& {
326+
flex-grow: 1;
327+
padding-left: 24px;
328+
font-size: 14px;
329+
330+
white-space: nowrap;
331+
overflow: hidden;
332+
text-overflow: ellipsis;
333+
}
347334
`
348335

349336
const DragAndDropIndicatorIcon = styled(DragIndicatorIcon)`
350337
color: #b2bbc0;
351338
margin-right: 4px;
352339
`
353340

341+
const StyledEthHashInfo = styled(EthHashInfo)`
342+
p {
343+
font-size: 14px;
344+
}
345+
`
346+
354347
export default TransactionBatchListItem

0 commit comments

Comments
 (0)