@rango-dev/ui 0.8.0 → 0.8.1-next.0

package/dist/widget/ui/src/components/BottomLogo/BottomLogo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function BottomLogo(): JSX.Element;
+//# sourceMappingURL=BottomLogo.d.ts.map

package/dist/widget/ui/src/components/BottomLogo/BottomLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomLogo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BottomLogo/BottomLogo.tsx"],"names":[],"mappings":";AA0BA,wBAAgB,UAAU,gBAoBzB"}

package/dist/widget/ui/src/components/BottomLogo/index.d.ts

@@ -0,0 +1,2 @@
+export { BottomLogo } from './BottomLogo';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/BottomLogo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BottomLogo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/widget/ui/src/components/ChangeSlippageButton/ChangeSlippageButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface PropTypes {
+    onClick: () => void;
+}
+export declare function ChangeSlippageButton(props: PropTypes): JSX.Element;
+export {};
+//# sourceMappingURL=ChangeSlippageButton.d.ts.map

package/dist/widget/ui/src/components/ChangeSlippageButton/ChangeSlippageButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeSlippageButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ChangeSlippageButton/ChangeSlippageButton.tsx"],"names":[],"mappings":";AAIA,UAAU,SAAS;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,eAQpD"}

package/dist/widget/ui/src/components/ChangeSlippageButton/index.d.ts

@@ -0,0 +1,2 @@
+export { ChangeSlippageButton } from './ChangeSlippageButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/ChangeSlippageButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ChangeSlippageButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/widget/ui/src/components/HeaderButtons/HeaderButtons.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface PropTypes {
+    onClickRefresh?: () => void;
+    onClickHistory?: () => void;
+    onClickSettings?: () => void;
+}
+export declare function HeaderButtons(props: PropTypes): JSX.Element;
+export {};
+//# sourceMappingURL=HeaderButtons.d.ts.map

package/dist/widget/ui/src/components/HeaderButtons/HeaderButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderButtons.d.ts","sourceRoot":"","sources":["../../../../../../src/components/HeaderButtons/HeaderButtons.tsx"],"names":[],"mappings":";AASA,UAAU,SAAS;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,eAyB7C"}

package/dist/widget/ui/src/components/HeaderButtons/index.d.ts

@@ -0,0 +1,2 @@
+export { HeaderButtons } from './HeaderButtons';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/HeaderButtons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/HeaderButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/widget/ui/src/components/index.d.ts

@@ -1,10 +1,20 @@
 export * from './I18nManager';
+export * from './Alert';
 export * from './BestRoute';
+export * from './BottomLogo';
 export * from './Button';
+export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
+export * from './common';
+export * from './ColorPicker';
+export * from './Divider';
+export * from './Drawer';
+export * from './Header';
+export * from './HeaderButtons';
 export * from './Icon';
 export * from './Modal';
+export * from './Radio';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Spinner';
@@ -13,15 +23,8 @@ export * from './SwapContainer';
 export * from './SwapDetail';
 export * from './Switch';
 export * from './TextField';
+export * from './TokenList';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';
-export * from './Alert';
-export * from './ColorPicker';
-export * from './Radio';
-export * from './TokenList';
-export * from './common';
-export * from './Drawer';
-export * from './Header';
-export * from './Divider';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/dist/widget/ui/src/containers/Warnings/BalanceErrors.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface PropTypes {
+    messages: string[];
+}
+export declare function BalanceErrors({ messages }: PropTypes): JSX.Element;
+export {};
+//# sourceMappingURL=BalanceErrors.d.ts.map

package/dist/widget/ui/src/containers/Warnings/BalanceErrors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceErrors.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/BalanceErrors.tsx"],"names":[],"mappings":";AAIA,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAwBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,eAiBpD"}

package/dist/widget/ui/src/containers/Warnings/HighSlippageWarning.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface PropTypes {
+    selectedSlippage: number;
+    highSlippage: boolean;
+    changeSlippage: () => void;
+}
+export declare function HighSlippageWarning(props: PropTypes): JSX.Element;
+export {};
+//# sourceMappingURL=HighSlippageWarning.d.ts.map

package/dist/widget/ui/src/containers/Warnings/HighSlippageWarning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/HighSlippageWarning.tsx"],"names":[],"mappings":";AAKA,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,eAqBnD"}

package/dist/widget/ui/src/containers/Warnings/MinRequiredSlippage.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface PropTypes {
+    minRequiredSlippage: string | null;
+    changeSlippage: () => void;
+}
+export declare function MinRequiredSlippage({ minRequiredSlippage, changeSlippage, }: PropTypes): JSX.Element;
+export {};
+//# sourceMappingURL=MinRequiredSlippage.d.ts.map

package/dist/widget/ui/src/containers/Warnings/MinRequiredSlippage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":";AAKA,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,cAAc,GACf,EAAE,SAAS,eAeX"}

package/dist/widget/ui/src/containers/Warnings/index.d.ts

@@ -0,0 +1,4 @@
+export { HighSlippageWarning } from './HighSlippageWarning';
+export { MinRequiredSlippage } from './MinRequiredSlippage';
+export { BalanceErrors } from './BalanceErrors';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/containers/Warnings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/widget/ui/src/containers/index.d.ts

@@ -6,4 +6,5 @@ export * from './ConnectWalletsModal';
 export * from './LiquiditySourcesSelector';
 export * from './TokenSelector';
 export * from './Settings';
+export * from './Warnings';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/containers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.8.0",
+  "version": "0.8.1-next.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -54,13 +54,11 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "@lingui/core": "4.2.1",
-    "@lingui/react": "4.2.1",
     "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.6.0",
+    "@rango-dev/wallets-shared": "^0.5.1-next.18",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.35",

package/src/components/BottomLogo/BottomLogo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { i18n } from '@lingui/core';
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+  paddingTop: '$16',
+});
+
+const Logo = styled('svg', {
+  fill: '$foreground',
+  width: '$24',
+  margin: '0 $8 0 $16',
+});
+
+const StyledAnchor = styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none',
+});
+
+export function BottomLogo() {
+  return (
+    <Container>
+      <Typography variant="caption" color="$neutral600">
+        {i18n.t('Powered By')}
+      </Typography>
+      <StyledAnchor href="https://rango.exchange" target="_blank">
+        <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
+          <defs></defs>
+          <g id="Layer_2" data-name="Layer 2">
+            <g id="Layer_1-2" data-name="Layer 1">
+              <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" />
+              <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" />
+            </g>
+          </g>
+        </Logo>
+        <Typography variant="body2">RANGO</Typography>
+      </StyledAnchor>
+    </Container>
+  );
+}

package/src/components/BottomLogo/index.ts

@@ -0,0 +1 @@
+export { BottomLogo } from './BottomLogo';

package/src/components/ChangeSlippageButton/ChangeSlippageButton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '../Button';
+import { i18n } from '@lingui/core';
+
+interface PropTypes {
+  onClick: () => void;
+}
+
+export function ChangeSlippageButton(props: PropTypes) {
+  const { onClick } = props;
+
+  return (
+    <Button type="primary" variant="outlined" size="small" onClick={onClick}>
+      {i18n.t('Change Slippage')}
+    </Button>
+  );
+}

package/src/components/ChangeSlippageButton/index.ts

@@ -0,0 +1 @@
+export { ChangeSlippageButton } from './ChangeSlippageButton';

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { i18n } from '@lingui/core';
+import { SettingsIcon, Tooltip, Button, HistoryIcon, RetryIcon } from '..';
+import { styled } from '../../theme';
+
+const ButtonsContainer = styled('div', {
+  display: 'flex',
+});
+
+interface PropTypes {
+  onClickRefresh?: () => void;
+  onClickHistory?: () => void;
+  onClickSettings?: () => void;
+}
+
+export function HeaderButtons(props: PropTypes) {
+  const { onClickRefresh, onClickHistory, onClickSettings } = props;
+
+  return (
+    <ButtonsContainer>
+      <Tooltip content={i18n.t('Refresh')}>
+        <Button
+          variant="ghost"
+          onClick={onClickRefresh}
+          disabled={!onClickRefresh}>
+          <RetryIcon size={24} disabled={!onClickRefresh} />
+        </Button>
+      </Tooltip>
+      <Tooltip content={i18n.t('Transactions History')}>
+        <Button variant="ghost" onClick={onClickHistory}>
+          <HistoryIcon size={24} />
+        </Button>
+      </Tooltip>
+      <Tooltip content={i18n.t('Settings')}>
+        <Button variant="ghost" onClick={onClickSettings}>
+          <SettingsIcon size={24} />
+        </Button>
+      </Tooltip>
+    </ButtonsContainer>
+  );
+}

package/src/components/HeaderButtons/index.ts

@@ -0,0 +1 @@
+export { HeaderButtons } from './HeaderButtons';

package/src/components/index.ts

@@ -1,10 +1,20 @@
 export * from './I18nManager';
+export * from './Alert';
 export * from './BestRoute';
+export * from './BottomLogo';
 export * from './Button';
+export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
+export * from './common';
+export * from './ColorPicker';
+export * from './Divider';
+export * from './Drawer';
+export * from './Header';
+export * from './HeaderButtons';
 export * from './Icon';
 export * from './Modal';
+export * from './Radio';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Spinner';
@@ -13,14 +23,7 @@ export * from './SwapContainer';
 export * from './SwapDetail';
 export * from './Switch';
 export * from './TextField';
+export * from './TokenList';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';
-export * from './Alert';
-export * from './ColorPicker';
-export * from './Radio';
-export * from './TokenList';
-export * from './common';
-export * from './Drawer';
-export * from './Header';
-export * from './Divider';

package/src/containers/Warnings/BalanceErrors.tsx

@@ -0,0 +1,48 @@
+import { Divider, Typography } from '../../components';
+import { styled } from '../../theme';
+import React from 'react';
+import { i18n } from '@lingui/core';
+interface PropTypes {
+  messages: string[];
+}
+
+const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  variants: {
+    showListStyle: {
+      true: { paddingLeft: '$24' },
+    },
+  },
+});
+
+const ListItem = styled('li', {
+  variants: {
+    showListStyle: {
+      true: { listStyleType: 'disc', listStylePosition: 'outside' },
+    },
+  },
+});
+
+const Message = styled(Typography, {
+  display: 'block',
+});
+
+export function BalanceErrors({ messages }: PropTypes) {
+  const showListStyle = messages.length > 1;
+  return (
+    <>
+      <Typography className="title" variant="title" color={'error'}>
+        {i18n.t('Insufficent Balance:')}
+      </Typography>
+      <Divider size={8} />
+      <List showListStyle={showListStyle}>
+        {messages.map((warning, index) => (
+          <ListItem showListStyle={showListStyle} key={index}>
+            <Message variant="body2">{warning}</Message>
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+}

package/src/containers/Warnings/HighSlippageWarning.tsx

@@ -0,0 +1,33 @@
+import { Alert } from '../../components/Alert';
+import React from 'react';
+import { ChangeSlippageButton } from '../../components/ChangeSlippageButton';
+import { i18n } from '@lingui/core';
+
+interface PropTypes {
+  selectedSlippage: number;
+  highSlippage: boolean;
+  changeSlippage: () => void;
+}
+
+export function HighSlippageWarning(props: PropTypes) {
+  const { highSlippage, selectedSlippage, changeSlippage } = props;
+
+  return (
+    <>
+      {highSlippage && (
+        <Alert
+          type="warning"
+          footer={<ChangeSlippageButton onClick={changeSlippage} />}>
+          {i18n.t(
+            'highSlippage',
+            { selectedSlippage },
+            {
+              message:
+                ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+            }
+          )}
+        </Alert>
+      )}
+    </>
+  );
+}

package/src/containers/Warnings/MinRequiredSlippage.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { i18n } from '@lingui/core';
+import { Divider, Typography, ChangeSlippageButton } from '../../components';
+import { styled } from '../../theme';
+
+interface PropTypes {
+  minRequiredSlippage: string | null;
+  changeSlippage: () => void;
+}
+
+const StyledMessage = styled(Typography, {
+  color: '$error500 !important',
+});
+
+export function MinRequiredSlippage({
+  minRequiredSlippage,
+  changeSlippage,
+}: PropTypes) {
+  return (
+    <StyledMessage variant="body2">
+      {i18n.t(
+        'increaseSlippage',
+        { minRequiredSlippage },
+        {
+          message:
+            'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        }
+      )}
+      <Divider size={8} />
+      <ChangeSlippageButton onClick={changeSlippage} />
+    </StyledMessage>
+  );
+}

package/src/containers/Warnings/index.ts

@@ -0,0 +1,3 @@
+export { HighSlippageWarning } from './HighSlippageWarning';
+export { MinRequiredSlippage } from './MinRequiredSlippage';
+export { BalanceErrors } from './BalanceErrors';

package/src/containers/index.ts

@@ -5,4 +5,5 @@ export * from './BlockchainSelector';
 export * from './ConnectWalletsModal';
 export * from './LiquiditySourcesSelector';
 export * from './TokenSelector';
-export * from './Settings';
+export * from './Settings';
+export * from './Warnings';