@rango-dev/widget-embedded 0.12.1-next.7 → 0.12.1-next.8

package/src/components/NoRoutes/NoRoutes.helper.ts

@@ -0,0 +1,50 @@
+import type { Info } from './NoRoutes.types';
+
+import { errorMessages } from '../../constants/errors';
+
+export function makeInfo(
+  diagnosisMessage: string | null,
+  disabledLiquiditySources: string[],
+  hasError: boolean,
+  toggleAllLiquiditySources: (shouldReset: boolean) => void,
+  refetchBestRoute: () => void
+): Info {
+  if (hasError) {
+    return {
+      alert: {
+        type: 'warning',
+        text: errorMessages.genericServerError,
+        action: {
+          onClick: refetchBestRoute,
+          title: 'Retry',
+        },
+      },
+      description: '',
+    };
+  } else if (diagnosisMessage) {
+    return {
+      alert: {
+        type: 'error',
+        text: diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
+  } else if (disabledLiquiditySources.length) {
+    return {
+      alert: {
+        type: 'warning',
+        text: errorMessages.liquiditySourcesError.title,
+        action: {
+          onClick: () => toggleAllLiquiditySources(true),
+          title: 'Reset',
+        },
+      },
+      description: errorMessages.liquiditySourcesError.description,
+    };
+  }
+  return {
+    alert: null,
+    description: errorMessages.noRoutesError.description,
+  };
+}

package/src/components/NoRoutes/NoRoutes.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const Footer = styled('div', {
+  width: '100%',
+});
+
+export const PrefixIcon = styled('div', {
+  padding: '$6 $0',
+});

package/src/components/NoRoutes/NoRoutes.tsx

@@ -0,0 +1,81 @@
+import type { PropTypes } from './NoRoutes.types';
+
+import {
+  Alert,
+  Button,
+  Divider,
+  NoRouteIcon,
+  RefreshIcon,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useMetaStore } from '../../store/meta';
+import { useSettingsStore } from '../../store/settings';
+
+import { makeInfo } from './NoRoutes.helper';
+import { Container, Footer, PrefixIcon } from './NoRoutes.styles';
+
+export function NoRoutes(props: PropTypes) {
+  const { diagnosisMessage, fetch, error } = props;
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const toggleAllLiquiditySources =
+    useSettingsStore.use.toggleAllLiquiditySources();
+
+  const hasError = error || loadingMetaStatus === 'failed';
+
+  const info = makeInfo(
+    diagnosisMessage ?? null,
+    disabledLiquiditySources,
+    hasError,
+    toggleAllLiquiditySources,
+    fetch
+  );
+
+  return (
+    <Container>
+      <NoRouteIcon size={24} color="gray" />
+      <Divider size={4} />
+      <Typography variant="title" size="small">
+        {errorMessages.noRoutesError.title}
+      </Typography>
+      {!!info.description && (
+        <Typography
+          variant="body"
+          size="small"
+          align="center"
+          color="neutral900">
+          {info.description}
+        </Typography>
+      )}
+      <Divider size={4} />
+      {!!info.alert && (
+        <Footer>
+          <Alert
+            type={info.alert.type}
+            title={info.alert.text}
+            action={
+              info.alert.action && (
+                <Button
+                  size="xsmall"
+                  type={info.alert.type}
+                  prefix={
+                    <PrefixIcon>
+                      <RefreshIcon size={8} />
+                    </PrefixIcon>
+                  }
+                  onClick={info.alert.action.onClick}>
+                  {info.alert.action.title}
+                </Button>
+              )
+            }
+            variant="alarm"
+          />
+        </Footer>
+      )}
+    </Container>
+  );
+}

package/src/components/NoRoutes/NoRoutes.types.ts

@@ -0,0 +1,21 @@
+export interface PropTypes {
+  fetch: () => void;
+  error: boolean;
+  diagnosisMessage?: string;
+}
+
+type AlertAction = {
+  title: string;
+  onClick: () => void;
+};
+
+type NotFoundAlert = {
+  type: 'error' | 'warning';
+  text: string;
+  action: AlertAction | null;
+};
+
+export interface Info {
+  alert: NotFoundAlert | null;
+  description: string;
+}

package/src/components/NoRoutes/index.ts

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

package/src/components/NotificationContent/NotificationContent.styles.ts

@@ -0,0 +1,34 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  padding: '$10',
+  width: '350px',
+  minHeight: '150px',
+});
+
+export const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+
+  '.to-chain-token': {
+    transform: 'translateX(-3px)',
+  },
+});
+
+export const Images = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const NotFoundContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  padding: '$10',
+  width: '100%',
+  height: '150px',
+});

package/src/components/NotificationContent/NotificationContent.tsx

@@ -0,0 +1,112 @@
+import type { Notification } from '../../types/notification';
+
+import {
+  ChainToken,
+  ChevronRightIcon,
+  ListItemButton,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useMetaStore } from '../../store/meta';
+import { useNotificationStore } from '../../store/notification';
+import { useUiStore } from '../../store/ui';
+
+import { Container, Images, List } from './NotificationContent.styles';
+import { NotificationNotFound } from './NotificationNotFound';
+
+const MAX_NOTIFICATIONS_DISPLAYED = 4;
+
+export function NotificationContent() {
+  const navigate = useNavigate();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+
+  const getUnreadNotifications =
+    useNotificationStore.use.getUnreadNotifications();
+
+  const notifications: Notification[] = getUnreadNotifications();
+
+  const setAsRead = useNotificationStore.use.setAsRead();
+
+  const { tokens, blockchains } = useMetaStore.use.meta();
+  const sortedNotification = notifications
+    .sort((a, b) => b.creationTime - a.creationTime)
+    .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
+
+  const handleOnClick = (requestId: Notification['requestId']) => {
+    setAsRead(requestId);
+    setSelectedSwap(requestId);
+    navigate(`/swaps/${requestId}`);
+  };
+
+  return (
+    <Container>
+      {sortedNotification.length ? (
+        <List>
+          {sortedNotification.map((notificationItem) => {
+            const fromToken = tokens.find(
+              (tokenItem) =>
+                tokenItem.address ===
+                  notificationItem.route.from.tokenAddress &&
+                tokenItem.blockchain ===
+                  notificationItem.route.from.blockchain &&
+                tokenItem.symbol === notificationItem.route.from.tokenSymbol
+            );
+
+            const fromBlockchain = blockchains.find(
+              (blockchainItem) =>
+                blockchainItem.name === notificationItem.route.from.blockchain
+            );
+
+            const toToken = tokens.find(
+              (tokenItem) =>
+                tokenItem.address === notificationItem.route.to.tokenAddress &&
+                tokenItem.blockchain === notificationItem.route.to.blockchain &&
+                tokenItem.symbol === notificationItem.route.to.tokenSymbol
+            );
+
+            const toBlockchain = blockchains.find(
+              (blockchainItem) =>
+                blockchainItem.name === notificationItem.route.to.blockchain
+            );
+
+            return (
+              <ListItemButton
+                key={notificationItem.requestId}
+                onClick={() => handleOnClick(notificationItem.requestId)}
+                title={
+                  <Typography variant="body" size="small" color="$neutral900">
+                    {notificationItem.event.message}
+                  </Typography>
+                }
+                id={notificationItem.requestId}
+                start={
+                  <Images>
+                    <div className="from-chain-token">
+                      <ChainToken
+                        tokenImage={fromToken ? fromToken.image : ''}
+                        chainImage={fromBlockchain ? fromBlockchain.logo : ''}
+                        size="small"
+                      />
+                    </div>
+                    <div className="to-chain-token">
+                      <ChainToken
+                        tokenImage={toToken ? toToken.image : ''}
+                        chainImage={toBlockchain ? toBlockchain.logo : ''}
+                        size="small"
+                      />
+                    </div>
+                  </Images>
+                }
+                end={<ChevronRightIcon size={12} color="gray" />}
+              />
+            );
+          })}
+        </List>
+      ) : (
+        <NotificationNotFound />
+      )}
+    </Container>
+  );
+}

package/src/components/NotificationContent/NotificationNotFound.tsx

@@ -0,0 +1,17 @@
+import { i18n } from '@lingui/core';
+import { Divider, NoNotificationIcon, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { NotFoundContainer } from './NotificationContent.styles';
+
+export function NotificationNotFound() {
+  return (
+    <NotFoundContainer>
+      <NoNotificationIcon color="secondary" size={26} />
+      <Divider size={12} />
+      <Typography variant="body" size="medium" color="neutral900">
+        {i18n.t('You have no notification')}
+      </Typography>
+    </NotFoundContainer>
+  );
+}

package/src/components/NotificationContent/index.ts

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

package/src/components/RouteErrors/RouteErrors.styles.ts

@@ -0,0 +1,27 @@
+import { styled } from '@rango-dev/ui';
+
+export const Alerts = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: 10,
+  width: '100%',
+});
+
+export const Item = styled('div', {
+  display: 'flex',
+  padding: '$5 0',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const Action = styled('div', {
+  padding: '$2',
+  alignSelf: 'flex-start',
+});

package/src/components/RouteErrors/RouteErrors.tsx

@@ -0,0 +1,68 @@
+import type { PropTypes } from './RouteErrors.types';
+
+import { Alert, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { hasLimitError, LimitErrorMessage } from '../../utils/swap';
+
+import { Action, Alerts } from './RouteErrors.styles';
+import { RouteErrorsModal } from './RouteErrorsModal';
+
+const WARNING_LEVEL_LIMIT = -10;
+
+export function RouteErrors(props: PropTypes) {
+  const { bestRoute } = useBestRouteStore();
+  const {
+    highValueLoss,
+    percentageChange,
+    priceImpactCanNotBeComputed,
+    openModal,
+    onToggle,
+    totalFeeInUsd,
+    outputUsdValue,
+    inputUsdValue,
+  } = props;
+  const error = hasLimitError(bestRoute);
+  const { recommendation } = LimitErrorMessage(bestRoute);
+
+  return (
+    <>
+      <Alerts>
+        {!error && (highValueLoss || priceImpactCanNotBeComputed) && (
+          <>
+            <Alert
+              title={
+                highValueLoss
+                  ? errorMessages.highValueLossError.title
+                  : errorMessages.unknownPriceError.title
+              }
+              type={
+                highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                  ? 'error'
+                  : 'warning'
+              }
+              variant="alarm"
+              action={
+                <Action onClick={() => onToggle(true)}>
+                  <InfoIcon size={12} color="gray" />
+                </Action>
+              }
+            />
+          </>
+        )}
+        {error && <Alert type="error" variant="alarm" title={recommendation} />}
+      </Alerts>
+      <RouteErrorsModal
+        highValueLoss={highValueLoss}
+        open={openModal}
+        onToggle={onToggle}
+        percentageChange={percentageChange}
+        inputUsdValue={inputUsdValue}
+        outputUsdValue={outputUsdValue}
+        totalFeeInUsd={totalFeeInUsd}
+      />
+    </>
+  );
+}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -0,0 +1,27 @@
+import type BigNumber from 'bignumber.js';
+
+export interface PropTypes {
+  openModal: boolean;
+  onToggle: (open: boolean) => void;
+  totalFeeInUsd: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+  inputUsdValue: BigNumber | null;
+  percentageChange: BigNumber | null;
+  highValueLoss: boolean;
+  priceImpactCanNotBeComputed: boolean;
+}
+
+type ModalPropTypesKeys = keyof Omit<
+  PropTypes,
+  'priceImpactCanNotBeComputed' | 'openModal'
+>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -0,0 +1,101 @@
+import type { ModalPropTypes } from './RouteErrors.types';
+
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { errorMessages } from '../../constants/errors';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { numberToString } from '../../utils/numbers';
+
+import { Flex } from './RouteErrors.styles';
+import { RouteErrorsModalItem } from './RouteErrorsModalItem';
+
+const WARNING_LEVEL_LIMIT = -10;
+const MAX_DECIMAL = 2;
+const MIN_DECIMAL = 0;
+
+export function RouteErrorsModal(props: ModalPropTypes) {
+  const {
+    highValueLoss,
+    open,
+    onToggle,
+    percentageChange,
+    inputUsdValue,
+    outputUsdValue,
+    totalFeeInUsd,
+  } = props;
+  const navigate = useNavigate();
+  const type =
+    highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+      ? 'error'
+      : 'warning';
+  const highValueLossData = [
+    { title: 'Swapping', value: numberToString(inputUsdValue) },
+    {
+      title: 'Gas cost',
+      value: numberToString(totalFeeInUsd, MIN_DECIMAL, MAX_DECIMAL),
+    },
+    { title: 'Receiving', value: numberToString(outputUsdValue) },
+    {
+      title: 'Price impact',
+      value: numberToString(percentageChange, MIN_DECIMAL, MAX_DECIMAL),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => onToggle(false)}
+      container={document.getElementById('swap-box') || document.body}>
+      {highValueLoss ? (
+        <MessageBox
+          type={type}
+          title={errorMessages.highValueLossError.impacTitle}
+          description={errorMessages.highValueLossError.description}
+        />
+      ) : (
+        <MessageBox
+          type={type}
+          title={errorMessages.unknownPriceError.impacTitle}
+          description={errorMessages.unknownPriceError.description}
+        />
+      )}
+      {highValueLoss && (
+        <Flex>
+          <Divider size={20} />
+          <Typography size="small" variant="title">
+            Details
+          </Typography>
+          <Flex>
+            {highValueLossData.map((item, index) => {
+              const key = index;
+              return <RouteErrorsModalItem key={key} {...item} />;
+            })}
+          </Flex>
+        </Flex>
+      )}
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={() => {
+          navigate(navigationRoutes.confirmSwap);
+        }}>
+        {highValueLoss
+          ? errorMessages.highValueLossError.confirmMessage
+          : errorMessages.unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/RouteErrors/RouteErrorsModalItem.tsx

@@ -0,0 +1,24 @@
+import type { ModalContentData } from './RouteErrors.types';
+
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { Item } from './RouteErrors.styles';
+
+export function RouteErrorsModalItem(props: ModalContentData) {
+  const { title, value, valueColor } = props;
+
+  return (
+    <Item>
+      <Typography size="medium" variant="label" color="neutral800">
+        {title}
+      </Typography>
+      <Typography
+        size="large"
+        variant="label"
+        color={valueColor || 'foreground'}>
+        {`${valueColor ? '%' : '$'}${value}`}
+      </Typography>
+    </Item>
+  );
+}

package/src/components/RouteErrors/index.ts

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

package/src/components/SearchInput/SearchInput.styles.ts

@@ -0,0 +1,9 @@
+import { styled } from '@rango-dev/ui';
+
+export const IconWrapper = styled('div', {
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,51 @@
+import type { PropTypes } from './SearchInput.types';
+
+import { CloseIcon, IconButton, SearchIcon, TextField } from '@rango-dev/ui';
+import React from 'react';
+
+import { IconWrapper } from './SearchInput.styles';
+
+export function SearchInput(props: PropTypes) {
+  const {
+    variant,
+    fullWidth,
+    color,
+    size,
+    onChange,
+    value,
+    setValue,
+    ...inputAttributes
+  } = props;
+
+  return (
+    <TextField
+      prefix={
+        <IconWrapper>
+          <SearchIcon color="black" />
+        </IconWrapper>
+      }
+      suffix={
+        !!value.length && (
+          <IconButton
+            variant="ghost"
+            onClick={() => setValue?.('')}
+            size="small">
+            <CloseIcon color="gray" size={10} />
+          </IconButton>
+        )
+      }
+      fullWidth={fullWidth}
+      color={color}
+      variant={variant}
+      style={{
+        padding: 10,
+        borderRadius: 25,
+        alignItems: 'center',
+      }}
+      size={size}
+      value={value}
+      onChange={onChange}
+      {...inputAttributes}
+    />
+  );
+}

package/src/components/SearchInput/SearchInput.types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export type PropTypes = {
+  variant?: 'contained' | 'outlined' | 'ghost';
+  fullWidth?: boolean;
+  color?: 'dark' | 'light';
+  size?: 'small' | 'large';
+  value: string;
+  setValue?: (value: string) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>;

package/src/components/SearchInput/index.ts

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