@rango-dev/ui 0.35.1-next.5 → 0.35.1-next.6

package/dist/widget/ui/src/containers/Notifications/Notifications.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/Notifications.styles.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgBpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASjB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEzB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQf,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAWnB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQ5B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKxB,CAAC"}

package/dist/widget/ui/src/containers/Notifications/Notifications.types.d.ts

@@ -0,0 +1,23 @@
+import type { CSS } from '../../theme';
+import type { Asset } from 'rango-sdk';
+type Notification = {
+    route: {
+        from: Asset;
+        to: Asset;
+    };
+    event: {
+        messageSeverity: string;
+        message: string;
+    };
+    requestId: string;
+};
+export type PropTypes = {
+    list: Notification[];
+    getBlockchainImage: (blockchain: string) => string;
+    getTokenImage: (token: Asset) => string;
+    onClickItem: (requestId: string) => void;
+    onClearAll: () => void;
+    containerStyles?: CSS;
+};
+export {};
+//# sourceMappingURL=Notifications.types.d.ts.map

package/dist/widget/ui/src/containers/Notifications/Notifications.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/Notifications.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,KAAK,EAAE;QAAE,eAAe,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IACxC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from './ConnectWalletsModal';
 export * from './Warnings';
 export * from './SwapInput';
+export * from './Notifications';
 //# 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,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.35.1-next.5",
+  "version": "0.35.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -60,4 +60,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/containers/Notifications/NotificationNotFound.tsx

@@ -0,0 +1,19 @@
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Typography } from '../../components';
+import { NoNotificationIcon } from '../../icons';
+
+import { NotFoundContainer } from './Notifications.styles';
+
+export function NotificationNotFound() {
+  return (
+    <NotFoundContainer>
+      <NoNotificationIcon color="secondary" size={26} />
+      <Divider size={12} />
+      <Typography variant="body" size="medium" color="neutral700">
+        {i18n.t('There are no notifications.')}
+      </Typography>
+    </NotFoundContainer>
+  );
+}

package/src/containers/Notifications/Notifications.styles.ts

@@ -0,0 +1,82 @@
+import { Button, ListItemButton } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  borderRadius: '$sm',
+  padding: '0 $10 $10 $10',
+  width: '350px',
+  maxWidth: '90vw',
+  minHeight: '150px',
+  maxHeight: '207px',
+  overflowY: 'auto',
+  background: 'inherit',
+  variants: {
+    equalPadding: {
+      true: {
+        padding: '$10',
+      },
+    },
+  },
+});
+
+export const Header = styled('div', {
+  padding: '$10 $10 0 $10',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  background: 'inherit',
+  position: 'sticky',
+  top: '0',
+  zIndex: 999,
+});
+
+export const ClearAllButton = styled(Button, {
+  padding: '$5 !important',
+});
+
+export const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+
+  '.to-chain-token': {
+    transform: 'translateX(-3px)',
+  },
+});
+
+export const ListItem = styled(ListItemButton, {
+  variants: {
+    actionRequired: {
+      true: {
+        backgroundColor: '$error300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$error600',
+        },
+      },
+    },
+  },
+});
+
+export const Images = styled('div', {
+  display: 'flex',
+  padding: '0 0 0 $5',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const NotFoundContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  padding: '$10',
+  width: '100%',
+  height: '150px',
+});
+
+export const IconContainer = styled('span', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingRight: '$8',
+});

package/src/containers/Notifications/Notifications.tsx

@@ -0,0 +1,108 @@
+import type { PropTypes } from './Notifications.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { ChainToken, Divider, Typography } from '../../components';
+import { ChevronRightIcon } from '../../icons';
+
+import { NotificationNotFound } from './NotificationNotFound';
+import {
+  ClearAllButton,
+  Container,
+  Header,
+  IconContainer,
+  Images,
+  List,
+  ListItem,
+} from './Notifications.styles';
+
+export function Notifications(props: PropTypes) {
+  const {
+    list,
+    getBlockchainImage,
+    getTokenImage,
+    onClickItem,
+    onClearAll,
+    containerStyles,
+  } = props;
+  return (
+    <Container equalPadding={list.length === 0} css={containerStyles}>
+      {list.length > 0 && (
+        <>
+          <Header>
+            <Typography variant="label" size="medium">
+              {i18n.t('Notifications')}
+            </Typography>
+            <ClearAllButton variant="ghost" size="xsmall" onClick={onClearAll}>
+              <Typography variant="body" size="xsmall" color="neutral700">
+                {i18n.t('Clear all')}
+              </Typography>
+            </ClearAllButton>
+          </Header>
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
+      {list.length ? (
+        <List>
+          {list.map((notificationItem, index) => {
+            const { route, requestId, event } = notificationItem;
+            const fromTokenImage = getTokenImage(route.from);
+
+            const fromBlockchainImage = getBlockchainImage(
+              route.from.blockchain
+            );
+
+            const toTokenImage = getTokenImage(route.to);
+
+            const toBlockchainImage = getBlockchainImage(route.to.blockchain);
+
+            return (
+              <React.Fragment key={requestId}>
+                {index > 0 && <Divider size={4} />}
+                <ListItem
+                  onClick={() => onClickItem(requestId)}
+                  actionRequired={event.messageSeverity === 'warning'}
+                  title={
+                    <Typography
+                      variant="body"
+                      size="small"
+                      color={
+                        event.messageSeverity === 'warning'
+                          ? '$foreground'
+                          : '$neutral700'
+                      }>
+                      {i18n.t(event.message)}
+                    </Typography>
+                  }
+                  id={requestId}
+                  start={
+                    <Images>
+                      <ChainToken
+                        tokenImage={fromTokenImage}
+                        chainImage={fromBlockchainImage}
+                        size="small"
+                      />
+                      <ChainToken
+                        tokenImage={toTokenImage}
+                        chainImage={toBlockchainImage}
+                        size="small"
+                      />
+                    </Images>
+                  }
+                  end={
+                    <IconContainer>
+                      <ChevronRightIcon size={12} color="gray" />
+                    </IconContainer>
+                  }
+                />
+              </React.Fragment>
+            );
+          })}
+        </List>
+      ) : (
+        <NotificationNotFound />
+      )}
+    </Container>
+  );
+}

package/src/containers/Notifications/Notifications.types.ts

@@ -0,0 +1,17 @@
+import type { CSS } from '../../theme';
+import type { Asset } from 'rango-sdk';
+
+type Notification = {
+  route: { from: Asset; to: Asset };
+  event: { messageSeverity: string; message: string };
+  requestId: string;
+};
+
+export type PropTypes = {
+  list: Notification[];
+  getBlockchainImage: (blockchain: string) => string;
+  getTokenImage: (token: Asset) => string;
+  onClickItem: (requestId: string) => void;
+  onClearAll: () => void;
+  containerStyles?: CSS;
+};

package/src/containers/Notifications/index.ts

@@ -0,0 +1 @@
+export * from './Notifications';

package/src/containers/index.ts

@@ -1,3 +1,4 @@
 export * from './ConnectWalletsModal';
 export * from './Warnings';
 export * from './SwapInput';
+export * from './Notifications';