@rango-dev/ui 0.1.11-next.10 → 0.1.11-next.12

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 (12) hide show
  1. package/dist/ui.cjs.development.js +21 -23
  2. package/dist/ui.cjs.development.js.map +1 -1
  3. package/dist/ui.cjs.production.min.js +1 -1
  4. package/dist/ui.cjs.production.min.js.map +1 -1
  5. package/dist/ui.esm.js +21 -23
  6. package/dist/ui.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Alert/Alert.tsx +2 -2
  9. package/src/components/Settings/Settings.tsx +3 -3
  10. package/src/components/Typography/Typography.tsx +3 -3
  11. package/src/containers/SwapHistory/SwapHistory.tsx +5 -4
  12. 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.10",
3
+ "version": "0.1.11-next.12",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/Alert/Alert.tsx CHANGED
@@ -72,7 +72,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
72
72
  {type === 'success' && <CheckCircleIcon color={type} size={24} />}
73
73
  {type === 'warning' && <WarningIcon color={type} size={24} />}
74
74
  {type === 'error' && <InfoCircleIcon color={type} size={24} />}
75
- <Spacer size={8} />
75
+ <Spacer size={4} />
76
76
  </div>
77
77
  </>
78
78
  )}
@@ -90,7 +90,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
90
90
  <Typography className="title" variant="title" color={type}>
91
91
  {title}
92
92
  </Typography>
93
- {!!children && <Spacer size={8} direction="vertical" />}
93
+ {!!children && <Spacer size={4} direction="vertical" />}
94
94
  </>
95
95
  )}
96
96
  {children}
package/src/components/Settings/Settings.tsx CHANGED
@@ -108,7 +108,7 @@ export function Settings(props: PropTypes) {
108
108
  <>
109
109
  <BaseContainer>
110
110
  <Head>
111
- <Typography variant="body1">Slippage tolerance per swap</Typography>
111
+ <Typography variant="body2">Slippage tolerance</Typography>
112
112
  {customSlippage ? (
113
113
  <Typography variant="caption" color="error">
114
114
  {customSlippage}% Custom
@@ -168,7 +168,7 @@ export function Settings(props: PropTypes) {
168
168
  />
169
169
  </ThemesContainer>
170
170
  <InfiniteContainer>
171
- <Typography variant="body1">Infinite Approval</Typography>
171
+ <Typography variant="body2">Infinite Approval</Typography>
172
172
  <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
173
173
  </InfiniteContainer>
174
174
  <LiquiditySourceContainer>
@@ -195,7 +195,7 @@ export function Settings(props: PropTypes) {
195
195
  </LiquiditySourceNumber>
196
196
  }
197
197
  >
198
- <Typography variant="body1">Liquidity Sources</Typography>
198
+ <Typography variant="body2">Liquidity Sources</Typography>
199
199
  </Button>
200
200
  </LiquiditySourceContainer>
201
201
  </>
package/src/components/Typography/Typography.tsx CHANGED
@@ -81,9 +81,9 @@ const TypographyContainer = styled('span', {
81
81
  body2: {
82
82
  fontSize: '$14',
83
83
  fontWeight: '$400',
84
- '@lg': {
85
- fontSize: '$16',
86
- },
84
+ // '@lg': {
85
+ // fontSize: '$14',
86
+ // },
87
87
  },
88
88
  body3: {
89
89
  fontSize: '$12',
package/src/containers/SwapHistory/SwapHistory.tsx CHANGED
@@ -53,6 +53,7 @@ export const ErrorMsg = styled(Typography, {
53
53
 
54
54
  export const FeeContainer = styled('div', {
55
55
  paddingLeft: '$16',
56
+ color: '$neutrals800'
56
57
  });
57
58
 
58
59
  export const Fee = styled('div', {
@@ -298,13 +299,13 @@ export function SwapHistory(props: PropTypes) {
298
299
  />
299
300
 
300
301
  <FeeContainer>
301
- <Typography variant="caption">
302
+ <Typography variant="body2">
302
303
  {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
303
304
  {step.swapperId}
304
305
  </Typography>
305
306
  <Fee>
306
307
  <GasIcon />
307
- <Typography variant="caption">
308
+ <Typography variant="body2">
308
309
  &nbsp; ${step.feeInUsd} estimated gas fee
309
310
  </Typography>
310
311
  </Fee>
@@ -325,7 +326,7 @@ export function SwapHistory(props: PropTypes) {
325
326
  <DescriptionContainer>
326
327
  <Divider size={4} />
327
328
  <CheckCircleIcon color="primary" />
328
- <Description variant="body3">
329
+ <Description variant="body2">
329
330
  <StyledAnchor
330
331
  href={item.url}
331
332
  target="_blank"
@@ -353,7 +354,7 @@ export function SwapHistory(props: PropTypes) {
353
354
  <InternalDetail>
354
355
  <DescriptionContainer>
355
356
  <InfoCircleIcon color="error" />
356
- <Description variant="body3" color="$error500">
357
+ <Description variant="body2" color="$error500">
357
358
  Step failed
358
359
  </Description>
359
360
  </DescriptionContainer>
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="body3">
78
+ <Typography variant="body2">
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="body3">
89
+ <Typography variant="body2">
90
90
  Don't worry, your fund is&nbsp;
91
91
  </Typography>
92
- <SuccessText variant="body3">
92
+ <SuccessText variant="body2">
93
93
  <b>Safe</b>
94
94
  </SuccessText>
95
95
  </p>
96
96
 
97
97
  <p>
98
- <Typography variant="body3">
98
+ <Typography variant="body2">
99
99
  It is converted to &nbsp;
100
100
  <u>{lastConvertedTokenInFailedSwap.outputAmount}</u>
101
101
  &nbsp;
102
102
  </Typography>
103
- <SuccessText variant="body3">
103
+ <SuccessText variant="body2">
104
104
  <b>{lastConvertedTokenInFailedSwap.symbol}&nbsp;</b>
105
105
  </SuccessText>
106
- <Typography variant="body3">on your&nbsp;</Typography>
107
- <SuccessText variant="body3">
106
+ <Typography variant="body2">on your&nbsp;</Typography>
107
+ <SuccessText variant="body2">
108
108
  <b>{lastConvertedTokenInFailedSwap.blockchain}&nbsp;</b>
109
109
  </SuccessText>
110
- <Typography variant="body3">wallet</Typography>
110
+ <Typography variant="body2">wallet</Typography>
111
111
  </p>
112
112
  </>
113
113
  )}