@rango-dev/widget-embedded 0.8.0 → 0.8.1-next.1

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 (34) hide show
  1. package/CHANGELOG.md +0 -37
  2. package/dist/components/ConfirmSwapErrors.d.ts.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +4 -4
  5. package/dist/pages/ConfirmSwapPage.d.ts.map +1 -1
  6. package/dist/pages/Home.d.ts.map +1 -1
  7. package/package.json +8 -10
  8. package/src/components/ConfirmSwapErrors.tsx +6 -2
  9. package/src/pages/ConfirmSwapPage.tsx +12 -5
  10. package/src/pages/Home.tsx +11 -3
  11. package/dist/components/BottomLogo.d.ts +0 -3
  12. package/dist/components/BottomLogo.d.ts.map +0 -1
  13. package/dist/components/ChangeSlippageButton.d.ts +0 -3
  14. package/dist/components/ChangeSlippageButton.d.ts.map +0 -1
  15. package/dist/components/Footer.d.ts +0 -112
  16. package/dist/components/Footer.d.ts.map +0 -1
  17. package/dist/components/HeaderButtons.d.ts +0 -7
  18. package/dist/components/HeaderButtons.d.ts.map +0 -1
  19. package/dist/components/warnings/BalanceErrors.d.ts +0 -7
  20. package/dist/components/warnings/BalanceErrors.d.ts.map +0 -1
  21. package/dist/components/warnings/ConfirmSwapExtraMessages.d.ts +0 -7
  22. package/dist/components/warnings/ConfirmSwapExtraMessages.d.ts.map +0 -1
  23. package/dist/components/warnings/HighSlippageWarning.d.ts +0 -7
  24. package/dist/components/warnings/HighSlippageWarning.d.ts.map +0 -1
  25. package/dist/components/warnings/MinRequiredSlippage.d.ts +0 -7
  26. package/dist/components/warnings/MinRequiredSlippage.d.ts.map +0 -1
  27. package/src/components/BottomLogo.tsx +0 -47
  28. package/src/components/ChangeSlippageButton.tsx +0 -19
  29. package/src/components/Footer.tsx +0 -8
  30. package/src/components/HeaderButtons.tsx +0 -52
  31. package/src/components/warnings/BalanceErrors.tsx +0 -47
  32. package/src/components/warnings/ConfirmSwapExtraMessages.tsx +0 -20
  33. package/src/components/warnings/HighSlippageWarning.tsx +0 -25
  34. package/src/components/warnings/MinRequiredSlippage.tsx +0 -30
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":";AAoCA,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,eA8MA"}
1
+ {"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":";AAyCA,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,eAgNA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AAoEA,wBAAgB,IAAI,gBA6JnB"}
1
+ {"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AA0EA,wBAAgB,IAAI,gBA+JnB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/widget-embedded",
3
- "version": "0.8.0",
3
+ "version": "0.8.1-next.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -17,15 +17,13 @@
17
17
  "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
18
18
  },
19
19
  "dependencies": {
20
- "@lingui/core": "4.2.1",
21
- "@lingui/react": "4.2.1",
22
- "@rango-dev/provider-all": "^0.7.0",
23
- "@rango-dev/queue-manager-core": "^0.7.0",
24
- "@rango-dev/queue-manager-rango-preset": "^0.7.0",
25
- "@rango-dev/queue-manager-react": "^0.6.0",
26
- "@rango-dev/ui": "^0.7.0",
27
- "@rango-dev/wallets-core": "^0.7.0",
28
- "@rango-dev/wallets-shared": "^0.6.0",
20
+ "@rango-dev/provider-all": "^0.8.1-next.0",
21
+ "@rango-dev/queue-manager-core": "^0.5.1-next.1",
22
+ "@rango-dev/queue-manager-rango-preset": "^0.8.1-next.0",
23
+ "@rango-dev/queue-manager-react": "^0.5.1-next.1",
24
+ "@rango-dev/ui": "^0.8.1-next.0",
25
+ "@rango-dev/wallets-core": "^0.8.1-next.0",
26
+ "@rango-dev/wallets-shared": "^0.8.0",
29
27
  "bignumber.js": "^9.1.1",
30
28
  "copy-to-clipboard": "^3.3.3",
31
29
  "dayjs": "^1.11.7",
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
+ import { BalanceErrors, MinRequiredSlippage } from '@rango-dev/ui';
2
3
  import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../types';
3
- import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
4
- import { BalanceErrors } from './warnings/BalanceErrors';
4
+ import { useNavigate } from 'react-router-dom';
5
+ import { navigationRoutes } from '../constants/navigationRoutes';
5
6
 
6
7
  export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
8
+ const navigate = useNavigate();
9
+
7
10
  return errors.flatMap((error) => {
8
11
  switch (error.type) {
9
12
  case ConfirmSwapErrorTypes.NO_ROUTE:
@@ -19,6 +22,7 @@ export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
19
22
  return (
20
23
  <MinRequiredSlippage
21
24
  minRequiredSlippage={error.minRequiredSlippage}
25
+ changeSlippage={() => navigate('/' + navigationRoutes.settings)}
22
26
  />
23
27
  );
24
28
  case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
@@ -21,7 +21,12 @@ import { useMetaStore } from '../store/meta';
21
21
  import { WalletType } from '@rango-dev/wallets-shared';
22
22
  import { useNavigateBack } from '../hooks/useNavigateBack';
23
23
  import { TokenPreview } from '../components/TokenPreview';
24
- import { Divider, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
24
+ import {
25
+ Divider,
26
+ ConfirmSwap,
27
+ LoadingFailedAlert,
28
+ HighSlippageWarning,
29
+ } from '@rango-dev/ui';
25
30
  import RoutesOverview from '../components/RoutesOverview';
26
31
  import { useManager } from '@rango-dev/queue-manager-react';
27
32
  import { useConfirmSwap } from '../hooks/useConfirmSwap';
@@ -30,7 +35,7 @@ import { useUiStore } from '../store/ui';
30
35
  import { ConfirmSwapErrorTypes } from '../types';
31
36
  import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
32
37
  import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
33
- import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
38
+ import { HIGH_SLIPPAGE } from '../constants/swapSettings';
34
39
  import { getBestRouteStatus } from '../utils/routing';
35
40
  import { PercentageChange } from '../components/PercentageChange';
36
41
 
@@ -232,9 +237,11 @@ export function ConfirmSwapPage({
232
237
  {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
233
238
  <Divider />
234
239
  )}
235
- {showHighSlippageWarning && (
236
- <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
237
- )}
240
+ <HighSlippageWarning
241
+ selectedSlippage={selectedSlippage}
242
+ highSlippage={selectedSlippage >= HIGH_SLIPPAGE}
243
+ changeSlippage={() => navigate('/' + navigationRoutes.settings)}
244
+ />
238
245
  </>
239
246
  }
240
247
  confirmButtonTitle={
@@ -1,20 +1,20 @@
1
1
  import {
2
2
  Alert,
3
3
  BestRoute,
4
+ BottomLogo,
4
5
  Button,
5
6
  styled,
6
7
  Typography,
7
8
  VerticalSwapIcon,
8
9
  Header,
10
+ HeaderButtons,
9
11
  } from '@rango-dev/ui';
10
12
  import React, { useEffect, useState } from 'react';
11
13
  import { i18n } from '@lingui/core';
12
14
  import { useInRouterContext, useNavigate } from 'react-router-dom';
13
15
  import { TokenInfo } from '../components/TokenInfo';
14
16
  import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
15
- import { BottomLogo } from '../components/BottomLogo';
16
17
  import { SwithFromAndTo } from '../components/SwitchFromAndTo';
17
- import { Footer } from '../components/Footer';
18
18
  import { navigationRoutes } from '../constants/navigationRoutes';
19
19
  import { useMetaStore } from '../store/meta';
20
20
  import { useWalletsStore } from '../store/wallets';
@@ -35,7 +35,6 @@ import {
35
35
  totalArrivalTime,
36
36
  } from '../utils/numbers';
37
37
  import BigNumber from 'bignumber.js';
38
- import { HeaderButtons } from '../components/HeaderButtons';
39
38
  import { useUiStore } from '../store/ui';
40
39
  import { getFormatedBestRoute } from '../utils/routing';
41
40
 
@@ -66,6 +65,13 @@ const Alerts = styled('div', {
66
65
  paddingTop: '$16',
67
66
  });
68
67
 
68
+ const Footer = styled('div', {
69
+ display: 'flex',
70
+ flexDirection: 'column',
71
+ width: '100%',
72
+ paddingTop: '$16',
73
+ });
74
+
69
75
  export function Home() {
70
76
  const isRouterInContext = useInRouterContext();
71
77
  const navigate = useNavigate();
@@ -143,6 +149,8 @@ export function Home() {
143
149
  onClickRefresh={
144
150
  !!bestRoute || bestRouteError ? fetchBestRoute : undefined
145
151
  }
152
+ onClickHistory={() => navigate(navigationRoutes.swaps)}
153
+ onClickSettings={() => navigate(navigationRoutes.settings)}
146
154
  />
147
155
  }
148
156
  />
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function BottomLogo(): JSX.Element;
3
- //# sourceMappingURL=BottomLogo.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomLogo.d.ts","sourceRoot":"","sources":["../../src/components/BottomLogo.tsx"],"names":[],"mappings":";AA0BA,wBAAgB,UAAU,gBAoBzB"}
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function ChangeSlippageButton(): JSX.Element;
3
- //# sourceMappingURL=ChangeSlippageButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChangeSlippageButton.d.ts","sourceRoot":"","sources":["../../src/components/ChangeSlippageButton.tsx"],"names":[],"mappings":";AAMA,wBAAgB,oBAAoB,gBAYnC"}
@@ -1,112 +0,0 @@
1
- export declare const Footer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
2
- sm: string;
3
- md: string;
4
- lg: string;
5
- }, import("@stitches/react/types/css-util").CSS<{
6
- sm: string;
7
- md: string;
8
- lg: string;
9
- }, {
10
- colors: {
11
- primary: string;
12
- primary100: string;
13
- primary200: string;
14
- primary300: string;
15
- primary400: string;
16
- primary500: string;
17
- primary600: string;
18
- primary700: string;
19
- primary800: string;
20
- primary900: string;
21
- surface: string;
22
- neutral100: string;
23
- neutral200: string;
24
- neutral300: string;
25
- neutral400: string;
26
- neutral500: string;
27
- neutral600: string;
28
- neutral700: string;
29
- neutral800: string;
30
- neutral900: string;
31
- background: string;
32
- foreground: string;
33
- success: string;
34
- success100: string;
35
- success300: string;
36
- success500: string;
37
- success700: string;
38
- warning: string;
39
- warning100: string;
40
- warning300: string;
41
- warning500: string;
42
- warning700: string;
43
- error: string;
44
- error100: string;
45
- error300: string;
46
- error500: string;
47
- error700: string;
48
- white: string;
49
- };
50
- space: {
51
- 2: string;
52
- 4: string;
53
- 6: string;
54
- 8: string;
55
- 10: string;
56
- 12: string;
57
- 16: string;
58
- 20: string;
59
- 24: string;
60
- 28: string;
61
- 30: string;
62
- 32: string;
63
- };
64
- fontSizes: {
65
- 10: string;
66
- 12: string;
67
- 14: string;
68
- 16: string;
69
- 18: string;
70
- 20: string;
71
- 24: string;
72
- 32: string;
73
- 36: string;
74
- 40: string;
75
- 48: string;
76
- };
77
- fonts: {};
78
- fontWeights: {
79
- 400: string;
80
- 500: string;
81
- 600: string;
82
- 700: string;
83
- };
84
- lineHeights: {};
85
- letterSpacings: {};
86
- sizes: {
87
- 4: string;
88
- 6: string;
89
- 8: string;
90
- 12: string;
91
- 16: string;
92
- 20: string;
93
- 24: string;
94
- 28: string;
95
- 32: string;
96
- 36: string;
97
- 40: string;
98
- 48: string;
99
- };
100
- borderWidths: {};
101
- borderStyles: {};
102
- radii: {
103
- 5: string;
104
- 10: string;
105
- };
106
- shadows: {
107
- s: string;
108
- };
109
- zIndices: {};
110
- transitions: {};
111
- }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
112
- //# sourceMappingURL=Footer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKjB,CAAC"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface PropTypes {
3
- onClickRefresh?: () => void;
4
- }
5
- export declare function HeaderButtons(props: PropTypes): JSX.Element;
6
- export {};
7
- //# sourceMappingURL=HeaderButtons.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderButtons.d.ts","sourceRoot":"","sources":["../../src/components/HeaderButtons.tsx"],"names":[],"mappings":";AAiBA,UAAU,SAAS;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,eA8B7C"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface PropTypes {
3
- messages: string[];
4
- }
5
- export declare function BalanceErrors({ messages }: PropTypes): JSX.Element;
6
- export {};
7
- //# sourceMappingURL=BalanceErrors.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BalanceErrors.d.ts","sourceRoot":"","sources":["../../../src/components/warnings/BalanceErrors.tsx"],"names":[],"mappings":";AAGA,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAwBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,eAiBpD"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface PropTypes {
3
- selectedSlippage: number;
4
- }
5
- export declare function ConfirmSwapExtraMessages(props: PropTypes): JSX.Element;
6
- export {};
7
- //# sourceMappingURL=ConfirmSwapExtraMessages.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ConfirmSwapExtraMessages.d.ts","sourceRoot":"","sources":["../../../src/components/warnings/ConfirmSwapExtraMessages.tsx"],"names":[],"mappings":";AAIA,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,SAAS,eAWxD"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface PropTypes {
3
- selectedSlippage: number;
4
- }
5
- export declare function HighSlippageWarning(props: PropTypes): JSX.Element;
6
- export {};
7
- //# sourceMappingURL=HighSlippageWarning.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../src/components/warnings/HighSlippageWarning.tsx"],"names":[],"mappings":";AAKA,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,eAenD"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface PropTypes {
3
- minRequiredSlippage: string | null;
4
- }
5
- export declare function MinRequiredSlippage({ minRequiredSlippage }: PropTypes): JSX.Element;
6
- export {};
7
- //# sourceMappingURL=MinRequiredSlippage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../src/components/warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":";AAKA,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAMD,wBAAgB,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,EAAE,SAAS,eAgBrE"}
@@ -1,47 +0,0 @@
1
- import React from 'react';
2
- import { styled } from '@rango-dev/ui';
3
- import { Typography } from '@rango-dev/ui';
4
- import { i18n } from '@lingui/core';
5
-
6
- const Container = styled('div', {
7
- display: 'flex',
8
- width: '100%',
9
- justifyContent: 'end',
10
- alignItems: 'center',
11
- paddingTop: '$16',
12
- });
13
-
14
- const Logo = styled('svg', {
15
- fill: '$foreground',
16
- width: '$24',
17
- margin: '0 $8 0 $16',
18
- });
19
-
20
- const StyledAnchor = styled('a', {
21
- display: 'flex',
22
- justifyContent: 'center',
23
- alignItems: 'center',
24
- textDecoration: 'none',
25
- });
26
-
27
- export function BottomLogo() {
28
- return (
29
- <Container>
30
- <Typography variant="caption" color="$neutral600">
31
- {i18n.t('Powered By')}
32
- </Typography>
33
- <StyledAnchor href="https://rango.exchange" target="_blank">
34
- <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
35
- <defs></defs>
36
- <g id="Layer_2" data-name="Layer 2">
37
- <g id="Layer_1-2" data-name="Layer 1">
38
- <path d="M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z" />
39
- <path d="M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z" />
40
- </g>
41
- </g>
42
- </Logo>
43
- <Typography variant="body2">RANGO</Typography>
44
- </StyledAnchor>
45
- </Container>
46
- );
47
- }
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
- import { Button } from '@rango-dev/ui';
3
- import { useNavigate } from 'react-router-dom';
4
- import { navigationRoutes } from '../constants/navigationRoutes';
5
- import { i18n } from '@lingui/core';
6
-
7
- export function ChangeSlippageButton() {
8
- const navigate = useNavigate();
9
-
10
- return (
11
- <Button
12
- type="primary"
13
- variant="outlined"
14
- size="small"
15
- onClick={() => navigate('/' + navigationRoutes.settings)}>
16
- {i18n.t('Change Slippage')}
17
- </Button>
18
- );
19
- }
@@ -1,8 +0,0 @@
1
- import { styled } from '@rango-dev/ui';
2
-
3
- export const Footer = styled('div', {
4
- display: 'flex',
5
- flexDirection: 'column',
6
- width: '100%',
7
- paddingTop: '$16',
8
- });
@@ -1,52 +0,0 @@
1
- import React from 'react';
2
- import {
3
- SettingsIcon,
4
- Tooltip,
5
- styled,
6
- Button,
7
- HistoryIcon,
8
- RetryIcon,
9
- } from '@rango-dev/ui';
10
- import { useNavigate } from 'react-router-dom';
11
- import { navigationRoutes } from '../constants/navigationRoutes';
12
- import { i18n } from '@lingui/core';
13
-
14
- const ButtonsContainer = styled('div', {
15
- display: 'flex',
16
- });
17
-
18
- interface PropTypes {
19
- onClickRefresh?: () => void;
20
- }
21
-
22
- export function HeaderButtons(props: PropTypes) {
23
- const { onClickRefresh } = props;
24
- const navigate = useNavigate();
25
-
26
- return (
27
- <ButtonsContainer>
28
- <Tooltip content={i18n.t('Refresh')}>
29
- <Button
30
- variant="ghost"
31
- onClick={onClickRefresh}
32
- disabled={!onClickRefresh}>
33
- <RetryIcon size={24} disabled={!onClickRefresh} />
34
- </Button>
35
- </Tooltip>
36
- <Tooltip content={i18n.t('Transactions History')}>
37
- <Button
38
- variant="ghost"
39
- onClick={() => navigate(navigationRoutes.swaps)}>
40
- <HistoryIcon size={24} />
41
- </Button>
42
- </Tooltip>
43
- <Tooltip content={i18n.t('Settings')}>
44
- <Button
45
- variant="ghost"
46
- onClick={() => navigate(navigationRoutes.settings)}>
47
- <SettingsIcon size={24} />
48
- </Button>
49
- </Tooltip>
50
- </ButtonsContainer>
51
- );
52
- }
@@ -1,47 +0,0 @@
1
- import { Divider, styled, Typography } from '@rango-dev/ui';
2
- import React from 'react';
3
- import { i18n } from '@lingui/core';
4
- interface PropTypes {
5
- messages: string[];
6
- }
7
-
8
- const List = styled('ul', {
9
- padding: 0,
10
- margin: 0,
11
- variants: {
12
- showListStyle: {
13
- true: { paddingLeft: '$24' },
14
- },
15
- },
16
- });
17
-
18
- const ListItem = styled('li', {
19
- variants: {
20
- showListStyle: {
21
- true: { listStyleType: 'disc', listStylePosition: 'outside' },
22
- },
23
- },
24
- });
25
-
26
- const Message = styled(Typography, {
27
- display: 'block',
28
- });
29
-
30
- export function BalanceErrors({ messages }: PropTypes) {
31
- const showListStyle = messages.length > 1;
32
- return (
33
- <>
34
- <Typography className="title" variant="title" color={'error'}>
35
- {i18n.t('Insufficent Balance:')}
36
- </Typography>
37
- <Divider size={8} />
38
- <List showListStyle={showListStyle}>
39
- {messages.map((warning, index) => (
40
- <ListItem showListStyle={showListStyle} key={index}>
41
- <Message variant="body2">{warning}</Message>
42
- </ListItem>
43
- ))}
44
- </List>
45
- </>
46
- );
47
- }
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import { HIGH_SLIPPAGE } from '../../constants/swapSettings';
3
- import { HighSlippageWarning } from './HighSlippageWarning';
4
-
5
- interface PropTypes {
6
- selectedSlippage: number;
7
- }
8
-
9
- export function ConfirmSwapExtraMessages(props: PropTypes) {
10
- const { selectedSlippage } = props;
11
- const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
12
-
13
- return (
14
- <>
15
- {highSlippage && (
16
- <HighSlippageWarning selectedSlippage={selectedSlippage} />
17
- )}
18
- </>
19
- );
20
- }
@@ -1,25 +0,0 @@
1
- import { Alert } from '@rango-dev/ui';
2
- import React from 'react';
3
- import { ChangeSlippageButton } from '../ChangeSlippageButton';
4
- import { i18n } from '@lingui/core';
5
-
6
- interface PropTypes {
7
- selectedSlippage: number;
8
- }
9
-
10
- export function HighSlippageWarning(props: PropTypes) {
11
- const { selectedSlippage } = props;
12
-
13
- return (
14
- <Alert type="warning" footer={<ChangeSlippageButton />}>
15
- {i18n.t(
16
- 'highSlippage',
17
- { selectedSlippage },
18
- {
19
- message:
20
- ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
21
- }
22
- )}
23
- </Alert>
24
- );
25
- }
@@ -1,30 +0,0 @@
1
- import { Divider, Typography, styled } from '@rango-dev/ui';
2
- import React from 'react';
3
- import { ChangeSlippageButton } from '../ChangeSlippageButton';
4
- import { i18n } from '@lingui/core';
5
-
6
- interface PropTypes {
7
- minRequiredSlippage: string | null;
8
- }
9
-
10
- const StyledMessage = styled(Typography, {
11
- color: '$error500 !important',
12
- });
13
-
14
- export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
15
- return (
16
- <StyledMessage variant="body2">
17
- {i18n.t(
18
- 'increaseSlippage',
19
- { minRequiredSlippage },
20
- {
21
- message:
22
- 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
23
- }
24
- )}
25
-
26
- <Divider size={8} />
27
- <ChangeSlippageButton />
28
- </StyledMessage>
29
- );
30
- }