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

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 (21) hide show
  1. package/dist/containers/History/History.d.ts +5 -12
  2. package/dist/containers/History/SwapsGroup.d.ts +13 -0
  3. package/dist/containers/History/index.d.ts +2 -1
  4. package/dist/ui.cjs.development.js +60 -48
  5. package/dist/ui.cjs.development.js.map +1 -1
  6. package/dist/ui.cjs.production.min.js +1 -1
  7. package/dist/ui.cjs.production.min.js.map +1 -1
  8. package/dist/ui.esm.js +60 -49
  9. package/dist/ui.esm.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Alert/Alert.tsx +2 -2
  12. package/src/components/BlockchainSelector/BlockchainSelector.tsx +23 -21
  13. package/src/components/Settings/Settings.tsx +3 -3
  14. package/src/components/TextField/TextField.tsx +7 -0
  15. package/src/components/TokenSelector/TokenSelector.tsx +1 -1
  16. package/src/components/Typography/Typography.tsx +3 -3
  17. package/src/containers/History/History.tsx +27 -66
  18. package/src/containers/History/SwapsGroup.tsx +59 -0
  19. package/src/containers/History/index.ts +2 -1
  20. package/src/containers/SwapHistory/SwapHistory.tsx +6 -4
  21. 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.8",
3
+ "version": "0.1.11",
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/BlockchainSelector/BlockchainSelector.tsx CHANGED
@@ -61,32 +61,34 @@ export function BlockchainSelector(props: PropTypes) {
61
61
  {(searchedFor) => {
62
62
  const filteredBlockchains = filterBlockchains(list, searchedFor);
63
63
  return (
64
- <ListContainer style={listContainerStyle} key="1">
64
+ <>
65
65
  {loadingStatus === 'loading' && (
66
66
  <LoaderContainer>
67
67
  <Spinner size={24} />
68
68
  </LoaderContainer>
69
69
  )}
70
- {loadingStatus === 'failed' && <LoadingFailedAlert />}
71
- {loadingStatus === 'success' && (
72
- <>
73
- {filteredBlockchains.length ? (
74
- <BlockchainsList
75
- list={filteredBlockchains}
76
- selected={selected}
77
- multiSelect={multiSelect}
78
- selectedList={selectedList}
79
- onChange={onChange}
80
- />
81
- ) : (
82
- <NotFoundAlert
83
- catergory="Blockchain"
84
- searchedFor={searchedFor}
85
- />
86
- )}
87
- </>
88
- )}
89
- </ListContainer>
70
+ <ListContainer style={listContainerStyle} key="1">
71
+ {loadingStatus === 'failed' && <LoadingFailedAlert />}
72
+ {loadingStatus === 'success' && (
73
+ <>
74
+ {filteredBlockchains.length ? (
75
+ <BlockchainsList
76
+ list={filteredBlockchains}
77
+ selected={selected}
78
+ multiSelect={multiSelect}
79
+ selectedList={selectedList}
80
+ onChange={onChange}
81
+ />
82
+ ) : (
83
+ <NotFoundAlert
84
+ catergory="Blockchain"
85
+ searchedFor={searchedFor}
86
+ />
87
+ )}
88
+ </>
89
+ )}
90
+ </ListContainer>
91
+ </>
90
92
  );
91
93
  }}
92
94
  </SecondaryPage>
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/TextField/TextField.tsx CHANGED
@@ -77,6 +77,13 @@ const Input = styled('input', {
77
77
  '&:disabled': {
78
78
  cursor: 'not-allowed',
79
79
  },
80
+ '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
81
+ '-webkit-appearance': 'none',
82
+ margin: 0,
83
+ },
84
+ '&[type="number"]': {
85
+ '-moz-appearance': 'textfield',
86
+ },
80
87
  });
81
88
  const Label = styled('label', {
82
89
  display: 'inline-block',
package/src/components/TokenSelector/TokenSelector.tsx CHANGED
@@ -13,7 +13,7 @@ export const LoaderContainer = styled('div', {
13
13
  display: 'flex',
14
14
  justifyContent: 'center',
15
15
  width: '100%',
16
- paddingTop: '5%',
16
+ paddingTop: '33%',
17
17
  flex: 1,
18
18
  });
19
19
  export interface PropTypes {
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/History/History.tsx CHANGED
@@ -1,18 +1,12 @@
1
1
  import React, { PropsWithChildren } from 'react';
2
- import { Divider } from '../../components';
2
+ import { Spinner } from '../../components';
3
3
  import { SecondaryPage } from '../../components/SecondaryPage';
4
- import { SwapDetail } from '../../components/SwapDetail';
5
- import { Typography } from '../../components/Typography';
6
4
  import { containsText } from '../../helper';
7
5
  import { styled } from '../../theme';
8
6
  import { PendingSwap } from './types';
9
7
  import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
10
-
11
- const Group = styled('div', {
12
- '.group-title': {
13
- textTransform: 'uppercase',
14
- },
15
- });
8
+ import { LoaderContainer } from '../../components/TokenSelector/TokenSelector';
9
+ import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
16
10
 
17
11
  const Container = styled('div', {
18
12
  overflowY: 'auto',
@@ -34,55 +28,11 @@ const filteredHistory = (
34
28
  });
35
29
  };
36
30
 
37
- export type GroupBy = (list: PendingSwap[]) => {
38
- title: string;
39
- swaps: PendingSwap[];
40
- }[];
41
- export interface PropTypes {
42
- list: PendingSwap[];
43
- onBack: () => void;
44
- onSwapClick: (requestId: string) => void;
45
- groupBy?: GroupBy;
46
- }
47
- const SwapsGroup = (props: Omit<PropTypes, 'onBack'>) => {
48
- const { list, onSwapClick, groupBy } = props;
49
- const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
31
+ export type PropTypes = SwapsGroupPropTypes & { loading: boolean };
50
32
 
51
- return (
52
- <>
53
- {groups
54
- .filter((group) => group.swaps.length > 0)
55
- .map((group, index) => (
56
- <>
57
- <Group key={index}>
58
- <Typography variant="body2" className="group-title">
59
- {group.title}
60
- </Typography>
61
- {group.swaps.map((swap: PendingSwap, index: number) => (
62
- <>
63
- <SwapDetail
64
- key={index}
65
- swap={swap}
66
- status={swap.status}
67
- onClick={onSwapClick}
68
- />
69
- <Divider size={12} />
70
- </>
71
- ))}
72
- </Group>
73
- <Divider size={24} />
74
- </>
75
- ))}
76
- </>
77
- );
78
- };
33
+ export function History(props: PropsWithChildren<PropTypes>) {
34
+ const { list = [], onBack, onSwapClick, groupBy, loading } = props;
79
35
 
80
- export function History({
81
- list = [],
82
- onBack,
83
- onSwapClick,
84
- groupBy,
85
- }: PropsWithChildren<PropTypes>) {
86
36
  return (
87
37
  <SecondaryPage
88
38
  onBack={onBack}
@@ -93,17 +43,28 @@ export function History({
93
43
  {(searchedFor) => {
94
44
  const filterSwaps = filteredHistory(list, searchedFor);
95
45
  return (
96
- <Container>
97
- {filterSwaps.length ? (
98
- <SwapsGroup
99
- list={filterSwaps}
100
- onSwapClick={onSwapClick}
101
- groupBy={groupBy}
102
- />
103
- ) : (
104
- <NotFoundAlert catergory="Swap" />
46
+ <>
47
+ {loading && (
48
+ <LoaderContainer>
49
+ <Spinner size={24} />
50
+ </LoaderContainer>
105
51
  )}
106
- </Container>
52
+ <Container>
53
+ {!loading && (
54
+ <>
55
+ {filterSwaps.length ? (
56
+ <SwapsGroup
57
+ list={filterSwaps}
58
+ onSwapClick={onSwapClick}
59
+ groupBy={groupBy}
60
+ />
61
+ ) : (
62
+ <NotFoundAlert catergory="Swap" />
63
+ )}
64
+ </>
65
+ )}
66
+ </Container>
67
+ </>
107
68
  );
108
69
  }}
109
70
  </SecondaryPage>
package/src/containers/History/SwapsGroup.tsx ADDED
@@ -0,0 +1,59 @@
1
+ import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
2
+ import React from 'react';
3
+ import { Typography, SwapDetail, Divider } from '../../components';
4
+ import { styled } from '../../theme';
5
+
6
+ const Group = styled('div', {
7
+ '.group-title': {
8
+ textTransform: 'uppercase',
9
+ },
10
+ });
11
+
12
+ export type GroupBy = (list: PendingSwap[]) => {
13
+ title: string;
14
+ swaps: PendingSwap[];
15
+ }[];
16
+
17
+ export interface PropTypes {
18
+ list: PendingSwap[];
19
+ onBack: () => void;
20
+ onSwapClick: (requestId: string) => void;
21
+ groupBy?: GroupBy;
22
+ }
23
+
24
+ export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
25
+ const { list, onSwapClick, groupBy } = props;
26
+ const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
27
+
28
+ return (
29
+ <>
30
+ {groups
31
+ .filter((group) => group.swaps.length > 0)
32
+ .map((group, index) => (
33
+ <>
34
+ <Group key={index}>
35
+ <Typography
36
+ variant="body2"
37
+ color="neutrals600"
38
+ className="group-title"
39
+ >
40
+ {group.title}
41
+ </Typography>
42
+ {group.swaps.map((swap: PendingSwap, index: number) => (
43
+ <>
44
+ <SwapDetail
45
+ key={index}
46
+ swap={swap}
47
+ status={swap.status}
48
+ onClick={onSwapClick}
49
+ />
50
+ <Divider size={12} />
51
+ </>
52
+ ))}
53
+ </Group>
54
+ <Divider size={24} />
55
+ </>
56
+ ))}
57
+ </>
58
+ );
59
+ }
package/src/containers/History/index.ts CHANGED
@@ -1 +1,2 @@
1
- export { History, GroupBy } from './History';
1
+ export { History } from './History';
2
+ export { SwapsGroup, GroupBy } from './SwapsGroup';
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', {
@@ -157,6 +158,7 @@ const Row = styled('div', {
157
158
  });
158
159
 
159
160
  const RequestId = styled('div', {
161
+ width: '150px',
160
162
  whiteSpace: 'nowrap',
161
163
  overflow: 'hidden',
162
164
  textOverflow: 'ellipsis',
@@ -297,13 +299,13 @@ export function SwapHistory(props: PropTypes) {
297
299
  />
298
300
 
299
301
  <FeeContainer>
300
- <Typography variant="caption">
302
+ <Typography variant="body2">
301
303
  {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
302
304
  {step.swapperId}
303
305
  </Typography>
304
306
  <Fee>
305
307
  <GasIcon />
306
- <Typography variant="caption">
308
+ <Typography variant="body2">
307
309
  &nbsp; ${step.feeInUsd} estimated gas fee
308
310
  </Typography>
309
311
  </Fee>
@@ -324,7 +326,7 @@ export function SwapHistory(props: PropTypes) {
324
326
  <DescriptionContainer>
325
327
  <Divider size={4} />
326
328
  <CheckCircleIcon color="primary" />
327
- <Description variant="body3">
329
+ <Description variant="body2">
328
330
  <StyledAnchor
329
331
  href={item.url}
330
332
  target="_blank"
@@ -352,7 +354,7 @@ export function SwapHistory(props: PropTypes) {
352
354
  <InternalDetail>
353
355
  <DescriptionContainer>
354
356
  <InfoCircleIcon color="error" />
355
- <Description variant="body3" color="$error500">
357
+ <Description variant="body2" color="$error500">
356
358
  Step failed
357
359
  </Description>
358
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
  )}