@rango-dev/ui 0.1.11-next.5 → 0.1.11-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/components/SwapDetail/Token.d.ts +1 -0
  2. package/dist/components/TextField/TextField.d.ts +1 -1
  3. package/dist/components/Typography/Typography.d.ts +1 -1
  4. package/dist/containers/ConfirmSwap/ConfirmSwap.d.ts +4 -2
  5. package/dist/ui.cjs.development.js +97 -72
  6. package/dist/ui.cjs.development.js.map +1 -1
  7. package/dist/ui.cjs.production.min.js +1 -1
  8. package/dist/ui.cjs.production.min.js.map +1 -1
  9. package/dist/ui.esm.js +97 -72
  10. package/dist/ui.esm.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/Alert/Alert.tsx +1 -1
  13. package/src/components/BlockchainSelector/BlockchainSelector.tsx +1 -0
  14. package/src/components/Drawer/Drawer.tsx +1 -1
  15. package/src/components/LiquiditySourceList/LiquiditySourceList.tsx +1 -0
  16. package/src/components/Settings/Settings.tsx +4 -3
  17. package/src/components/StepDetail/StepDetail.tsx +7 -4
  18. package/src/components/SwapContainer/SwapContainer.tsx +1 -2
  19. package/src/components/SwapDetail/SwapDetail.tsx +4 -14
  20. package/src/components/SwapDetail/Token.tsx +14 -8
  21. package/src/components/TextField/TextField.tsx +1 -0
  22. package/src/components/Typography/Typography.tsx +8 -0
  23. package/src/containers/ConfirmSwap/ConfirmSwap.tsx +9 -9
  24. package/src/containers/History/History.tsx +2 -6
  25. package/src/containers/SwapHistory/SwapHistory.tsx +60 -63
  26. package/src/containers/SwapHistory/SwapMessages.tsx +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.1.11-next.5",
3
+ "version": "0.1.11-next.8",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/Alert/Alert.tsx CHANGED
@@ -87,7 +87,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
87
87
  >
88
88
  {title && (
89
89
  <>
90
- <Typography className="title" variant="h6" color={type}>
90
+ <Typography className="title" variant="title" color={type}>
91
91
  {title}
92
92
  </Typography>
93
93
  {!!children && <Spacer size={8} direction="vertical" />}
package/src/components/BlockchainSelector/BlockchainSelector.tsx CHANGED
@@ -13,6 +13,7 @@ import { LoaderContainer } from '../TokenSelector/TokenSelector';
13
13
 
14
14
  const ListContainer = styled('div', {
15
15
  overflowY: 'auto',
16
+ padding: '0 $4',
16
17
  });
17
18
 
18
19
  const filterBlockchains = (list: BlockchainMeta[], searchedFor: string) =>
package/src/components/Drawer/Drawer.tsx CHANGED
@@ -110,7 +110,7 @@ export function Drawer(props: PropTypes) {
110
110
  <BackDrop onClick={handleBackDropClick}>
111
111
  <DrawerContainer anchor={anchor} style={containerStyle}>
112
112
  <DrawerHeader>
113
- <Typography variant="h4">{title}</Typography>
113
+ <Typography variant="h6">{title}</Typography>
114
114
  {showClose && <CloseIcon size={24} onClick={onClose} />}
115
115
  </DrawerHeader>
116
116
  <Body>{content}</Body>
package/src/components/LiquiditySourceList/LiquiditySourceList.tsx CHANGED
@@ -28,6 +28,7 @@ const MainContainer = styled('div', {
28
28
  loaded: {
29
29
  true: {
30
30
  overflowY: 'auto',
31
+ padding: '0 $4',
31
32
  },
32
33
  },
33
34
  },
package/src/components/Settings/Settings.tsx CHANGED
@@ -27,13 +27,13 @@ const SlippageChipsContainer = styled('div', {
27
27
  const LiquiditySourceContainer = styled(BaseContainer, {
28
28
  display: 'flex',
29
29
  justifyContent: 'space-between',
30
- marginTop: '$32',
30
+ marginTop: '$16',
31
31
  cursor: 'pointer',
32
32
  });
33
33
  const InfiniteContainer = styled(BaseContainer, {
34
34
  display: 'flex',
35
35
  justifyContent: 'space-between',
36
- marginTop: '$32',
36
+ marginTop: '$16',
37
37
  });
38
38
 
39
39
  const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
@@ -45,8 +45,9 @@ const LiquiditySourceNumber = styled('div', {
45
45
  });
46
46
 
47
47
  const ThemesContainer = styled(BaseContainer, {
48
- marginTop: '$32',
48
+ marginTop: '$16',
49
49
  });
50
+
50
51
  const Head = styled('div', {
51
52
  display: 'flex',
52
53
  justifyContent: 'space-between',
package/src/components/StepDetail/StepDetail.tsx CHANGED
@@ -112,7 +112,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
112
112
  {amount && (
113
113
  <Typography
114
114
  noWrap
115
- variant={direction === 'vertical' ? 'body2' : 'h6'}
115
+ variant={direction === 'vertical' ? 'body2' : 'title'}
116
116
  >
117
117
  {amount}
118
118
  </Typography>
@@ -120,14 +120,17 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
120
120
  {!amount && estimatedAmount && (
121
121
  <Typography
122
122
  noWrap
123
- variant={direction === 'vertical' ? 'body2' : 'h6'}
124
- color={'$neutrals500'}
123
+ variant={direction === 'vertical' ? 'body2' : 'title'}
124
+ color={'$neutrals600'}
125
125
  >
126
126
  {estimatedAmount}
127
127
  </Typography>
128
128
  )}
129
129
  &nbsp;
130
- <Typography variant={direction === 'vertical' ? 'body2' : 'h6'} noWrap>
130
+ <Typography
131
+ variant={direction === 'vertical' ? 'body2' : 'title'}
132
+ noWrap
133
+ >
131
134
  {symbol}
132
135
  </Typography>
133
136
  <SubTitle noWrap variant="caption" color="$neutrals800">
package/src/components/SwapContainer/SwapContainer.tsx CHANGED
@@ -11,7 +11,6 @@ const MainContainer = styled('div', {
11
11
  width: '100%',
12
12
  minWidth: '375px',
13
13
  maxWidth: '512px',
14
- maxHeight: '595px',
15
14
  padding: '$16',
16
15
  boxSizing: 'border-box',
17
16
  backgroundColor: '$background',
@@ -19,6 +18,7 @@ const MainContainer = styled('div', {
19
18
  fixedHeight: {
20
19
  true: {
21
20
  height: '595px',
21
+ maxHeight: '595px',
22
22
  },
23
23
  false: {
24
24
  height: 'auto',
@@ -34,7 +34,6 @@ export interface PropTypes {
34
34
 
35
35
  export function SwapContainer(props: PropsWithChildren<PropTypes>) {
36
36
  const { children, style, fixedHeight = true } = props;
37
-
38
37
  return (
39
38
  <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
40
39
  {children}
package/src/components/SwapDetail/SwapDetail.tsx CHANGED
@@ -27,13 +27,6 @@ const Container = styled('div', {
27
27
  fontSize: '$12',
28
28
  },
29
29
 
30
- '&.running': {
31
- color: '$foreground',
32
- },
33
- '&.failed,&.success': {
34
- color: '$neutrals600',
35
- },
36
-
37
30
  '&.failed .status': {
38
31
  color: '$error',
39
32
  },
@@ -72,7 +65,6 @@ export function SwapDetail({
72
65
  symbol: firstStep.fromSymbol,
73
66
  },
74
67
  blockchain: {
75
- // @ts-ignore
76
68
  logo: firstStep.fromBlockchainLogo || '',
77
69
  name: firstStep.fromBlockchain,
78
70
  },
@@ -89,14 +81,12 @@ export function SwapDetail({
89
81
  symbol: lastStep.toSymbol,
90
82
  },
91
83
  blockchain: {
92
- // @ts-ignore
93
- logo: lastStep.toBlockchainLogo,
84
+ logo: lastStep.toBlockchainLogo || '',
94
85
  name: lastStep.toBlockchain,
95
86
  },
96
- amount: limitDecimalPlaces(
97
- lastStep.outputAmount ||
98
- lastStep.expectedOutputAmountHumanReadable ||
99
- ''
87
+ amount: limitDecimalPlaces(lastStep.outputAmount || ''),
88
+ estimatedAmount: limitDecimalPlaces(
89
+ lastStep.expectedOutputAmountHumanReadable || ''
100
90
  ),
101
91
  }}
102
92
  />
package/src/components/SwapDetail/Token.tsx CHANGED
@@ -11,6 +11,9 @@ const TokenContainer = styled('div', {
11
11
  '& .amount': {
12
12
  fontWeight: 'bold',
13
13
  },
14
+ '& .estimated': {
15
+ color: '$neutrals600',
16
+ },
14
17
  });
15
18
 
16
19
  const TokenImage = styled('div', {
@@ -43,25 +46,28 @@ interface PropTypes {
43
46
  name: string;
44
47
  };
45
48
  amount: string;
49
+ estimatedAmount?: string;
46
50
  };
47
51
  }
48
52
  export function Token(props: PropTypes) {
53
+ const {
54
+ data: { token, blockchain, amount, estimatedAmount },
55
+ } = props;
49
56
  return (
50
57
  <TokenContainer>
51
58
  <TokenImage>
52
- <Image src={props.data.token.logo} alt="" size={24} />
59
+ <Image src={token.logo} alt="" size={24} />
53
60
  <div className="overlay">
54
- <Image
55
- src={props.data.blockchain.logo}
56
- alt={props.data.blockchain.name}
57
- size={12}
58
- />
61
+ <Image src={blockchain.logo} alt={blockchain.name} size={12} />
59
62
  </div>
60
63
  </TokenImage>
61
64
  <Spacer size={8} />
62
- <span className="amount">{props.data.amount}</span>
65
+ {!!amount && <span className="amount">{props.data.amount}</span>}
66
+ {!amount && estimatedAmount && (
67
+ <span className="amount estimated">{props.data.estimatedAmount}</span>
68
+ )}
63
69
  <Spacer size={4} />
64
- {props.data.token.symbol}
70
+ {token.symbol}
65
71
  </TokenContainer>
66
72
  );
67
73
  }
package/src/components/TextField/TextField.tsx CHANGED
@@ -14,6 +14,7 @@ const InputContainer = styled('div', {
14
14
  position: 'relative',
15
15
  alignItems: 'center',
16
16
  color: '$foreground',
17
+ overflowX: 'hidden',
17
18
  transition: 'border-color ease .3s',
18
19
  '&:focus-within': {
19
20
  borderColor: '$success',
package/src/components/Typography/Typography.tsx CHANGED
@@ -61,6 +61,13 @@ const TypographyContainer = styled('span', {
61
61
  fontSize: '$18',
62
62
  },
63
63
  },
64
+ title: {
65
+ fontSize: '$14',
66
+ fontWeight: '$500',
67
+ '@md': {
68
+ fontSize: '$15',
69
+ }
70
+ },
64
71
  body1: {
65
72
  fontSize: '$14',
66
73
  fontWeight: '$400',
@@ -173,6 +180,7 @@ export interface PropTypes {
173
180
  | 'h4'
174
181
  | 'h5'
175
182
  | 'h6'
183
+ | 'title'
176
184
  | 'body1'
177
185
  | 'body2'
178
186
  | 'body3'
package/src/containers/ConfirmSwap/ConfirmSwap.tsx CHANGED
@@ -54,6 +54,8 @@ const Container = styled('div', {
54
54
 
55
55
  const Alerts = styled('div', { paddingBottom: '$16' });
56
56
 
57
+ type Message = string | ReactNode
58
+
57
59
  export interface PropTypes {
58
60
  onBack: () => void;
59
61
  onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -67,8 +69,8 @@ export interface PropTypes {
67
69
  previewInputs?: ReactNode;
68
70
  previewRoutes?: ReactNode;
69
71
  confirmButtonTitle: string;
70
- errors?: ReactNode[];
71
- warnings?: ReactNode[];
72
+ errors?: Message[];
73
+ warnings?: Message[];
72
74
  extraMessages?: ReactNode;
73
75
  }
74
76
  export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
@@ -115,17 +117,15 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
115
117
  {errors?.map((error, index) => (
116
118
  <>
117
119
  <Spacer direction="vertical" />
118
- <Alert type="error" key={index}>
119
- {error}
120
- </Alert>
120
+ <Alert type="error" key={index}
121
+ {...(typeof error === 'string') ? {title: error} : {children: error} }/>
121
122
  </>
122
123
  ))}
123
124
  {warnings?.map((warning, index) => (
124
125
  <>
125
126
  <Spacer direction="vertical" />
126
- <Alert type="warning" key={index}>
127
- {warning}
128
- </Alert>
127
+ <Alert type="warning" key={index}
128
+ {...(typeof warning === 'string') ? {title: warning} : {children: warning} }/>
129
129
  </>
130
130
  ))}
131
131
  </Alerts>
@@ -153,7 +153,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
153
153
  <>
154
154
  <AlertContainer>
155
155
  <Alert type="error">
156
- You need to connect a compatible wallet with {wallet}
156
+ You need to connect a compatible wallet with {wallet}.
157
157
  </Alert>
158
158
  </AlertContainer>
159
159
  {isExperimentalChain?.(wallet) && (
package/src/containers/History/History.tsx CHANGED
@@ -55,11 +55,7 @@ const SwapsGroup = (props: Omit<PropTypes, 'onBack'>) => {
55
55
  .map((group, index) => (
56
56
  <>
57
57
  <Group key={index}>
58
- <Typography
59
- variant="body2"
60
- color="neutrals600"
61
- className="group-title"
62
- >
58
+ <Typography variant="body2" className="group-title">
63
59
  {group.title}
64
60
  </Typography>
65
61
  {group.swaps.map((swap: PendingSwap, index: number) => (
@@ -91,7 +87,7 @@ export function History({
91
87
  <SecondaryPage
92
88
  onBack={onBack}
93
89
  textField={true}
94
- textFieldPlaceholder="Search by Blockchain/Token/Request Id"
90
+ textFieldPlaceholder="Search by Network, Token or Request ID"
95
91
  title="Swaps"
96
92
  >
97
93
  {(searchedFor) => {
package/src/containers/SwapHistory/SwapHistory.tsx CHANGED
@@ -52,7 +52,7 @@ export const ErrorMsg = styled(Typography, {
52
52
  });
53
53
 
54
54
  export const FeeContainer = styled('div', {
55
- paddingLeft: '$4',
55
+ paddingLeft: '$16',
56
56
  });
57
57
 
58
58
  export const Fee = styled('div', {
@@ -89,7 +89,6 @@ export const ArrowDown = styled('div', {
89
89
  const StyledAnchor = styled('a', {
90
90
  color: '$primary',
91
91
  fontWeight: '$600',
92
- marginLeft: '$12',
93
92
  });
94
93
 
95
94
  const SwapInfoContainer = styled('div', {
@@ -101,11 +100,14 @@ const SwapInfoContainer = styled('div', {
101
100
 
102
101
  const InternalDetailsContainer = styled('div', {
103
102
  display: 'flex',
103
+ '.details': {
104
+ padding: '$8 0',
105
+ },
104
106
  });
105
107
 
106
108
  const InternalDetail = styled('div', {
107
109
  display: 'flex',
108
- padding: '$10',
110
+ margin: '$12 0 $12 $20',
109
111
  });
110
112
 
111
113
  const DescriptionContainer = styled('div', {
@@ -115,7 +117,7 @@ const DescriptionContainer = styled('div', {
115
117
 
116
118
  const Description = styled(Typography, {
117
119
  color: '$success',
118
- marginLeft: '$8',
120
+ paddingLeft: '$4',
119
121
  });
120
122
 
121
123
  export const Line = styled('div', {
@@ -140,6 +142,7 @@ const Row = styled('div', {
140
142
  display: 'flex',
141
143
  alignItems: 'center',
142
144
  color: '$neutrals800',
145
+ justifyContent: 'flex-end',
143
146
  },
144
147
  '.status': {
145
148
  fontWeight: 'bold',
@@ -154,7 +157,6 @@ const Row = styled('div', {
154
157
  });
155
158
 
156
159
  const RequestId = styled('div', {
157
- width: '150px',
158
160
  whiteSpace: 'nowrap',
159
161
  overflow: 'hidden',
160
162
  textOverflow: 'ellipsis',
@@ -164,14 +166,14 @@ const RequestId = styled('div', {
164
166
  });
165
167
 
166
168
  const ExtraDetails = styled('div', {
167
- padding: '$8 0',
169
+ padding: '0',
168
170
  color: '$neutrals600',
169
- fontSize: '$12',
171
+ fontSize: '$10',
170
172
  });
171
173
 
172
174
  const SwapFlowContainer = styled('div', {
173
175
  overflowY: 'auto',
174
- paddingTop: '$8',
176
+ padding: '$8 $4 $2 $4',
175
177
  });
176
178
 
177
179
  export type PropTypes = {
@@ -232,28 +234,29 @@ export function SwapHistory(props: PropTypes) {
232
234
  <div>
233
235
  <SwapInfoContainer>
234
236
  <Row>
235
- <div className="name">Request ID:</div>
236
- <div
237
- className="value requestId"
238
- onClick={onCopy.bind(null, pendingSwap?.requestId)}
239
- >
240
- <RequestId>{pendingSwap?.requestId}</RequestId>
241
- <Spacer size={4} />
242
- <Button type="primary" variant="ghost" size="compact">
243
- {isCopied ? 'Copied!' : 'Copy'}
244
- </Button>
237
+ <div className="name">
238
+ Request Id:
239
+ <span
240
+ className="value requestId"
241
+ onClick={onCopy.bind(null, pendingSwap?.requestId)}
242
+ >
243
+ <RequestId>{pendingSwap?.requestId}</RequestId>
244
+ <Spacer size={4} />
245
+ <Button type="primary" variant="ghost" size="compact">
246
+ {isCopied ? 'Copied!' : 'Copy'}
247
+ </Button>
248
+ </span>
245
249
  </div>
246
- </Row>
247
- <Row>
248
- <div className="name">Status:</div>
249
- <div className={`value status ${pendingSwap?.status || ''}`}>
250
- {pendingSwap?.status}
251
- {pendingSwap?.status === 'running' && (
252
- <Spinner size={16} color="primary" />
253
- )}
250
+ <div className="name">
251
+ <span className={`value status ${pendingSwap?.status || ''}`}>
252
+ {pendingSwap?.status}
253
+ {pendingSwap?.status === 'running' && (
254
+ <Spinner size={16} color="primary" />
255
+ )}
256
+ </span>
257
+ <ExtraDetails>{date}</ExtraDetails>
254
258
  </div>
255
259
  </Row>
256
- <ExtraDetails>{date}</ExtraDetails>
257
260
  </SwapInfoContainer>
258
261
  {/* TODO: It was temporarily removed to find a better solution.
259
262
 
@@ -266,7 +269,7 @@ export function SwapHistory(props: PropTypes) {
266
269
  <SwapMessages {...extraMessageProps} />
267
270
  )}
268
271
 
269
- <Divider size={32} />
272
+ <Divider size={16} />
270
273
 
271
274
  {pendingSwap?.steps.map((step, index) => (
272
275
  <div key={index}>
@@ -295,8 +298,8 @@ export function SwapHistory(props: PropTypes) {
295
298
 
296
299
  <FeeContainer>
297
300
  <Typography variant="caption">
298
- {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
299
- &nbsp; via {step.swapperId}
301
+ {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
302
+ {step.swapperId}
300
303
  </Typography>
301
304
  <Fee>
302
305
  <GasIcon />
@@ -313,34 +316,34 @@ export function SwapHistory(props: PropTypes) {
313
316
  >
314
317
  <InternalDetailsContainer>
315
318
  <Line />
316
- <div>
319
+ <div className="details">
317
320
  {!!step.explorerUrl && (
318
321
  <div>
319
322
  {step.explorerUrl.map((item, index) => (
320
323
  <InternalDetail key={index}>
321
324
  <DescriptionContainer>
322
- <CheckCircleIcon color="success" />
323
- <Description variant="body2">
324
- {!item.description ? (
325
- <b>View transaction</b>
326
- ) : (
327
- <b>
328
- {item.description
329
- .substring(0, 1)
330
- .toUpperCase()}
331
- {item.description.substring(1)}
332
- </b>
333
- )}
325
+ <Divider size={4} />
326
+ <CheckCircleIcon color="primary" />
327
+ <Description variant="body3">
328
+ <StyledAnchor
329
+ href={item.url}
330
+ target="_blank"
331
+ rel="noreferrer"
332
+ key={index}
333
+ >
334
+ {!item.description ? (
335
+ <b>View transaction</b>
336
+ ) : (
337
+ <b>
338
+ {item.description
339
+ .substring(0, 1)
340
+ .toUpperCase()}
341
+ {item.description.substring(1)} Tx
342
+ </b>
343
+ )}
344
+ </StyledAnchor>
334
345
  </Description>
335
346
  </DescriptionContainer>
336
- <StyledAnchor
337
- href={item.url}
338
- target="_blank"
339
- rel="noreferrer"
340
- key={index}
341
- >
342
- TX-Link
343
- </StyledAnchor>
344
347
  </InternalDetail>
345
348
  ))}
346
349
  </div>
@@ -349,7 +352,7 @@ export function SwapHistory(props: PropTypes) {
349
352
  <InternalDetail>
350
353
  <DescriptionContainer>
351
354
  <InfoCircleIcon color="error" />
352
- <Description variant="body2" color="$error500">
355
+ <Description variant="body3" color="$error500">
353
356
  Step failed
354
357
  </Description>
355
358
  </DescriptionContainer>
@@ -381,17 +384,11 @@ export function SwapHistory(props: PropTypes) {
381
384
  title="Cancel Progress"
382
385
  content={
383
386
  <Alert type="warning">
384
- <p>
385
- Warning: Rango <u>neither reverts</u> your transaction&nbsp;
386
- <u>nor refunds</u> you if you've already signed and sent a
387
- transaction to the blockchain since it's out of Rango's control.
388
- Beware that "Cancel" only stops next steps from being executed.
389
- </p>
390
- <Spacer size={12} direction="vertical" />
391
- <p>
392
- If you have already signed your transaction to blockchain, you
393
- should wait for that to complete or rollback
394
- </p>
387
+ <Typography variant="body2">
388
+ Warning: Cancel <u>doesn't revert</u> your transaction if you've
389
+ already signed and sent a transaction to the blockchain. It only
390
+ stops next steps from being executed.
391
+ </Typography>
395
392
  </Alert>
396
393
  }
397
394
  footer={
package/src/containers/SwapHistory/SwapMessages.tsx CHANGED
@@ -75,7 +75,7 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
75
75
  >
76
76
  {!!detailedMessage.content ? (
77
77
  <DetailedMessage>
78
- <Typography variant="body2">
78
+ <Typography variant="body3">
79
79
  {shouldShowMoreDetailsButton && !expandedMessage
80
80
  ? detailedMessage.content.substring(0, allowedNumberOfChars) +
81
81
  (allowedNumberOfChars > 0 ? '...' : '')
@@ -86,28 +86,28 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
86
86
  {!!lastConvertedTokenInFailedSwap && (
87
87
  <>
88
88
  <p>
89
- <Typography variant="body2">
89
+ <Typography variant="body3">
90
90
  Don't worry, your fund is&nbsp;
91
91
  </Typography>
92
- <SuccessText variant="body2">
92
+ <SuccessText variant="body3">
93
93
  <b>Safe</b>
94
94
  </SuccessText>
95
95
  </p>
96
96
 
97
97
  <p>
98
- <Typography variant="body2">
98
+ <Typography variant="body3">
99
99
  It is converted to &nbsp;
100
100
  <u>{lastConvertedTokenInFailedSwap.outputAmount}</u>
101
101
  &nbsp;
102
102
  </Typography>
103
- <SuccessText variant="body2">
103
+ <SuccessText variant="body3">
104
104
  <b>{lastConvertedTokenInFailedSwap.symbol}&nbsp;</b>
105
105
  </SuccessText>
106
- <Typography variant="body2">on your&nbsp;</Typography>
107
- <SuccessText variant="body2">
106
+ <Typography variant="body3">on your&nbsp;</Typography>
107
+ <SuccessText variant="body3">
108
108
  <b>{lastConvertedTokenInFailedSwap.blockchain}&nbsp;</b>
109
109
  </SuccessText>
110
- <Typography variant="body2">wallet</Typography>
110
+ <Typography variant="body3">wallet</Typography>
111
111
  </p>
112
112
  </>
113
113
  )}