@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,74 @@
+import type { PropTypes, Ref } from './Layout.types';
+import type { PropsWithChildren } from 'react';
+
+import { BottomLogo, Divider, Header } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
+import { getContainer } from '../../utils/common';
+import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
+
+import { Container, Content, Footer } from './Layout.styles';
+
+function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
+  const {
+    children,
+    header,
+    footer,
+    noPadding,
+    hasLogo = true,
+    fixedHeight = true,
+  } = props;
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+
+  const connectWalletsButtonDisabled =
+    useUiStore.use.connectWalletsButtonDisabled();
+  const navigate = useNavigate();
+
+  const onConnectWallet = () => {
+    if (!connectWalletsButtonDisabled) {
+      navigate('/' + navigationRoutes.wallets);
+    }
+  };
+  return (
+    <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
+      <Header
+        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        title={header.title}
+        suffix={
+          <>
+            {header.suffix}
+            {header.hasConnectWallet && (
+              <WalletButton
+                container={getContainer()}
+                onClick={onConnectWallet}
+                isConnected={!!connectedWallets?.length}
+              />
+            )}
+            {header.onCancel && <CancelButton onClick={header.onCancel} />}
+          </>
+        }
+      />
+      <Content noPadding={noPadding}>{children}</Content>
+      {(hasLogo || footer) && (
+        <Footer>
+          <div className="footer__content">{footer}</div>
+          {hasLogo && (
+            <div className="footer__logo">
+              <Divider size={12} />
+              <BottomLogo />
+            </div>
+          )}
+        </Footer>
+      )}
+    </Container>
+  );
+}
+
+const Layout = React.forwardRef(LayoutComponent);
+Layout.displayName = 'Layout';
+
+export { Layout };

package/src/components/Layout/Layout.types.ts

@@ -0,0 +1,20 @@
+export interface PropTypes {
+  header: {
+    title: string;
+    hasConnectWallet?: boolean;
+    hasSettings?: boolean;
+    suffix?: React.ReactNode;
+    onBack?: () => void;
+    onCancel?: () => void;
+  };
+  hasLogo?: boolean;
+  footer?: React.ReactNode;
+  noPadding?: boolean;
+  fixedHeight?: boolean;
+}
+
+export type Ref =
+  | ((instance: HTMLDivElement | null) => void)
+  | React.RefObject<HTMLDivElement>
+  | null
+  | undefined;

package/src/components/Layout/index.ts

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

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.styles.ts

@@ -0,0 +1,5 @@
+import { ListItem, styled } from '@rango-dev/ui';
+
+export const CustomeListItem = styled(ListItem, {
+  height: 61,
+});

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.tsx

@@ -0,0 +1,23 @@
+import { Checkbox, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { LiquiditySourceList } from '../SettingsContainer';
+
+import { CustomeListItem } from './LoadingLiquiditySourceList.styles';
+
+const ITEM_SKELETON_COUNT = 30;
+export function LoadingLiquiditySourceList() {
+  return (
+    <LiquiditySourceList>
+      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
+        <CustomeListItem
+          hasDivider
+          key={e}
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          title={<Skeleton variant="text" size="large" width={90} />}
+          end={<Checkbox checked={false} />}
+        />
+      ))}
+    </LiquiditySourceList>
+  );
+}

package/src/components/LoadingLiquiditySourceList/index.ts

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

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,52 @@
+import type { Info } from './NoRoutes.types';
+
+import { i18n } from '@lingui/core';
+
+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: i18n.t('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: i18n.t('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,108 @@
+import type { Notification } from '../../types/notification';
+
+import { i18n } from '@lingui/core';
+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">
+                    {i18n.t(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',
+});