@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -0,0 +1,41 @@
+import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepContainer } from './LoadingSwapDetails.styles';
+
+export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
+  const { extraInfo } = props;
+  return (
+    <StepContainer>
+      <div className="step-title">
+        <Skeleton height={28} width={28} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <div className="step-tokens">
+        <Divider direction="horizontal" size={20} />
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+        <div className="step-icon-container">
+          <NextIcon color="gray" size={16} />
+        </div>
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+      </div>
+      {extraInfo && (
+        <div className="extra-info">
+          <Divider direction="horizontal" size={20} />
+          <Skeleton height={22} width={297} variant="rectangular" />
+        </div>
+      )}
+    </StepContainer>
+  );
+}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -0,0 +1,78 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  width: '100%',
+  height: '100%',
+  padding: '$0 $20',
+
+  '.cost': {
+    paddingTop: '$15',
+    display: 'flex',
+  },
+
+  '.route-summary': {
+    padding: '$15 $0',
+  },
+
+  '.route-summary-item': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.token-amount': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.route-summary-separator': {
+    width: '0px',
+    height: '$16',
+    borderLeft: '1px solid $neutral400',
+    marginLeft: '13px',
+  },
+
+  '.swaps-steps': {
+    paddingBottom: '$10',
+  },
+});
+
+export const StepContainer = styled('div', {
+  backgroundColor: '$neutral100',
+  borderRadius: '$xm',
+  padding: '$10 $15',
+
+  '.step-title': {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+  },
+  '.step-tokens': {
+    paddingTop: '$5',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-token-info': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-icon-container': {
+    padding: '$4 $6',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  '.extra-info': {
+    display: 'flex',
+    paddingTop: '$10',
+    paddingBottom: '$5',
+  },
+});
+export const StepSeparator = styled('div', {
+  width: '0px',
+  height: '$20',
+  borderLeft: '1px dashed $neutral900',
+  marginLeft: '25px',
+});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -0,0 +1,53 @@
+import { i18n } from '@lingui/core';
+import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { Container, StepSeparator } from './LoadingSwapDetails.styles';
+import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
+
+export function LoadingSwapDetails() {
+  const routeSummary = (
+    <div className="route-summary-item">
+      <div className="token-amount">
+        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <Divider size={8} direction="horizontal" />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </div>
+  );
+
+  return (
+    <Container>
+      <div className="cost">
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+      </div>
+
+      <div className="route-summary">
+        {routeSummary}
+        <div className="route-summary-separator"></div>
+        {routeSummary}
+      </div>
+
+      <div className="swaps-steps">
+        <Typography variant="title" size="small">
+          {i18n.t('Swaps steps')}
+        </Typography>
+      </div>
+
+      <div className="step-container">
+        <LoadingSwapDetailStep extraInfo />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+      </div>
+    </Container>
+  );
+}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -0,0 +1,3 @@
+export interface StepSkeletonPropsTypes {
+  extraInfo?: boolean;
+}

package/src/components/LoadingSwapDetails/index.ts

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

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,107 @@
+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();
+
+  const notifications: Notification[] = getUnreadNotifications();
+  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']) => {
+    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,28 @@
+import { styled } from '@rango-dev/ui';
+
+export const Alerts = styled('div', {
+  width: '100%',
+  paddingTop: '$10',
+});
+
+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',
+  cursor: 'pointer',
+});

package/src/components/RouteErrors/RouteErrors.tsx

@@ -0,0 +1,79 @@
+import type { PropTypes } from './RouteErrors.types';
+
+import { Alert, Divider, 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,
+    loading,
+    extraSpace,
+  } = props;
+  const error = hasLimitError(bestRoute);
+  const { recommendation } = LimitErrorMessage(bestRoute);
+
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
+  return (
+    <>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <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,29 @@
+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;
+  loading: boolean;
+  extraSpace: boolean;
+}
+
+type ModalPropTypesKeys = keyof Omit<
+  PropTypes,
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
+>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}