@rango-dev/ui 0.1.11-next.6 → 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 (30) 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/containers/History/History.d.ts +5 -12
  6. package/dist/containers/History/SwapsGroup.d.ts +13 -0
  7. package/dist/containers/History/index.d.ts +2 -1
  8. package/dist/ui.cjs.development.js +130 -95
  9. package/dist/ui.cjs.development.js.map +1 -1
  10. package/dist/ui.cjs.production.min.js +1 -1
  11. package/dist/ui.cjs.production.min.js.map +1 -1
  12. package/dist/ui.esm.js +130 -96
  13. package/dist/ui.esm.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/components/Alert/Alert.tsx +3 -3
  16. package/src/components/BlockchainSelector/BlockchainSelector.tsx +23 -21
  17. package/src/components/Drawer/Drawer.tsx +1 -1
  18. package/src/components/Settings/Settings.tsx +7 -6
  19. package/src/components/StepDetail/StepDetail.tsx +7 -4
  20. package/src/components/SwapContainer/SwapContainer.tsx +1 -2
  21. package/src/components/SwapDetail/SwapDetail.tsx +4 -14
  22. package/src/components/SwapDetail/Token.tsx +14 -8
  23. package/src/components/TextField/TextField.tsx +8 -0
  24. package/src/components/TokenSelector/TokenSelector.tsx +1 -1
  25. package/src/components/Typography/Typography.tsx +11 -3
  26. package/src/containers/ConfirmSwap/ConfirmSwap.tsx +9 -9
  27. package/src/containers/History/History.tsx +28 -71
  28. package/src/containers/History/SwapsGroup.tsx +59 -0
  29. package/src/containers/History/index.ts +2 -1
  30. package/src/containers/SwapHistory/SwapHistory.tsx +61 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.1.11-next.6",
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
  )}
@@ -87,10 +87,10 @@ 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
- {!!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/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/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',
@@ -107,7 +108,7 @@ export function Settings(props: PropTypes) {
107
108
  <>
108
109
  <BaseContainer>
109
110
  <Head>
110
- <Typography variant="body1">Slippage tolerance per swap</Typography>
111
+ <Typography variant="body2">Slippage tolerance</Typography>
111
112
  {customSlippage ? (
112
113
  <Typography variant="caption" color="error">
113
114
  {customSlippage}% Custom
@@ -167,7 +168,7 @@ export function Settings(props: PropTypes) {
167
168
  />
168
169
  </ThemesContainer>
169
170
  <InfiniteContainer>
170
- <Typography variant="body1">Infinite Approval</Typography>
171
+ <Typography variant="body2">Infinite Approval</Typography>
171
172
  <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
172
173
  </InfiniteContainer>
173
174
  <LiquiditySourceContainer>
@@ -194,7 +195,7 @@ export function Settings(props: PropTypes) {
194
195
  </LiquiditySourceNumber>
195
196
  }
196
197
  >
197
- <Typography variant="body1">Liquidity Sources</Typography>
198
+ <Typography variant="body2">Liquidity Sources</Typography>
198
199
  </Button>
199
200
  </LiquiditySourceContainer>
200
201
  </>
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',
@@ -76,6 +77,13 @@ const Input = styled('input', {
76
77
  '&:disabled': {
77
78
  cursor: 'not-allowed',
78
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
+ },
79
87
  });
80
88
  const Label = styled('label', {
81
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
@@ -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',
@@ -74,9 +81,9 @@ const TypographyContainer = styled('span', {
74
81
  body2: {
75
82
  fontSize: '$14',
76
83
  fontWeight: '$400',
77
- '@lg': {
78
- fontSize: '$16',
79
- },
84
+ // '@lg': {
85
+ // fontSize: '$14',
86
+ // },
80
87
  },
81
88
  body3: {
82
89
  fontSize: '$12',
@@ -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
@@ -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,80 +28,43 @@ 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
59
- variant="body2"
60
- color="neutrals600"
61
- className="group-title"
62
- >
63
- {group.title}
64
- </Typography>
65
- {group.swaps.map((swap: PendingSwap, index: number) => (
66
- <>
67
- <SwapDetail
68
- key={index}
69
- swap={swap}
70
- status={swap.status}
71
- onClick={onSwapClick}
72
- />
73
- <Divider size={12} />
74
- </>
75
- ))}
76
- </Group>
77
- <Divider size={24} />
78
- </>
79
- ))}
80
- </>
81
- );
82
- };
33
+ export function History(props: PropsWithChildren<PropTypes>) {
34
+ const { list = [], onBack, onSwapClick, groupBy, loading } = props;
83
35
 
84
- export function History({
85
- list = [],
86
- onBack,
87
- onSwapClick,
88
- groupBy,
89
- }: PropsWithChildren<PropTypes>) {
90
36
  return (
91
37
  <SecondaryPage
92
38
  onBack={onBack}
93
39
  textField={true}
94
- textFieldPlaceholder="Search by Blockchain/Token/Request Id"
40
+ textFieldPlaceholder="Search by Network, Token or Request ID"
95
41
  title="Swaps"
96
42
  >
97
43
  {(searchedFor) => {
98
44
  const filterSwaps = filteredHistory(list, searchedFor);
99
45
  return (
100
- <Container>
101
- {filterSwaps.length ? (
102
- <SwapsGroup
103
- list={filterSwaps}
104
- onSwapClick={onSwapClick}
105
- groupBy={groupBy}
106
- />
107
- ) : (
108
- <NotFoundAlert catergory="Swap" />
46
+ <>
47
+ {loading && (
48
+ <LoaderContainer>
49
+ <Spinner size={24} />
50
+ </LoaderContainer>
109
51
  )}
110
- </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
+ </>
111
68
  );
112
69
  }}
113
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';