@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/NamespaceItem/NamespaceItem.tsx

@@ -0,0 +1,117 @@
+import type { PropTypes } from './NamespaceItem.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Divider,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './NamespaceItem.helpers';
+import {
+  NamespaceAccountAddress,
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceItemError,
+  NamespaceItemErrorDropdownToggle,
+  NamespaceItemInfo,
+  NamespaceItemInnerContent,
+  NamespaceLogo,
+} from './NamespaceItem.styles';
+import { SupportedChainsList } from './SupportedChainsList';
+
+export function NamespaceItem(props: PropTypes) {
+  const { namespace, error, suffix, connected, address, onClick } = props;
+
+  const [errorIsExpanded, setErrorIsExpanded] = useState(false);
+  const blockchains = useAppStore().blockchains();
+
+  useEffect(() => setErrorIsExpanded(false), [error]);
+
+  const supportedChains = namespace.getSupportedChains(blockchains);
+  const isSupportedChainsDisplayed =
+    !error && !connected && supportedChains.length > 1;
+
+  return (
+    <NamespaceItemContainer
+      hasError={!!error}
+      clickable={!!onClick}
+      onClick={onClick}>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+        />
+        <NamespaceItemInnerContent
+          showSupportedChains={
+            isSupportedChainsDisplayed || connected || !!error
+          }>
+          <NamespaceItemInfo>
+            <Typography variant="label" size="large">
+              {namespace.label}
+            </Typography>
+            {connected && (
+              <Typography variant="body" size="small" color="success500">
+                {i18n.t('Connected')}
+              </Typography>
+            )}
+            {!!error && (
+              <Typography variant="body" size="small" color="error500">
+                {i18n.t('Connection failed')}
+              </Typography>
+            )}
+          </NamespaceItemInfo>
+          {isSupportedChainsDisplayed && (
+            <SupportedChainsList chains={supportedChains} />
+          )}
+          {connected && (
+            <NamespaceAccountAddress
+              variant="body"
+              size="small"
+              color="neutral700">
+              {address}
+            </NamespaceAccountAddress>
+          )}
+          {error && (
+            <NamespaceItemErrorDropdownToggle
+              onClick={() =>
+                setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
+              }>
+              <Typography
+                variant="body"
+                size="small"
+                color="neutral700"
+                style={{
+                  textDecoration: 'underline',
+                  userSelect: 'none',
+                  textDecorationSkipInk: 'none',
+                }}>
+                {i18n.t('See why')}
+              </Typography>
+              {errorIsExpanded ? (
+                <ChevronUpIcon size={12} color="gray" />
+              ) : (
+                <ChevronDownIcon size={12} color="gray" />
+              )}
+            </NamespaceItemErrorDropdownToggle>
+          )}
+        </NamespaceItemInnerContent>
+        {suffix}
+      </NamespaceItemContent>
+      {!!error && errorIsExpanded && (
+        <>
+          <Divider size={4} />
+          <NamespaceItemError>
+            <Typography variant="body" size="small" color="neutral700">
+              {error}
+            </Typography>
+          </NamespaceItemError>
+        </>
+      )}
+    </NamespaceItemContainer>
+  );
+}

package/src/components/NamespaceItem/NamespaceItem.types.ts

@@ -0,0 +1,14 @@
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+
+export type PropTypes = {
+  namespace: LegacyNamespaceMeta;
+  error?: string;
+  suffix?: React.ReactNode;
+  connected?: boolean;
+  address?: string | null;
+  onClick?: () => void;
+};
+
+export type NamespaceUnsupportedItemPropTypes = {
+  namespace: LegacyNamespaceMeta;
+};

package/src/components/NamespaceItem/NamespaceUnsupportedItem.tsx

@@ -0,0 +1,42 @@
+import type { NamespaceUnsupportedItemPropTypes } from './NamespaceItem.types';
+
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { getBlockchainLogo } from './NamespaceItem.helpers';
+import {
+  NamespaceItemContainer,
+  NamespaceItemContent,
+  NamespaceLogo,
+  UnsupportedNamespaceItemInnerContent,
+} from './NamespaceItem.styles';
+
+export function NamespaceUnsupportedItem(
+  props: NamespaceUnsupportedItemPropTypes
+) {
+  const { namespace } = props;
+  const blockchains = useAppStore().blockchains();
+
+  return (
+    <NamespaceItemContainer unsupported>
+      <NamespaceItemContent>
+        <NamespaceLogo
+          src={getBlockchainLogo(blockchains, namespace.id)}
+          size={40}
+          disabled
+        />
+        <UnsupportedNamespaceItemInnerContent>
+          <Typography variant="label" size="large">
+            {namespace.label}
+          </Typography>
+          <Typography variant="body" size="xsmall">
+            {i18n.t('(Currently not supported)')}
+          </Typography>
+        </UnsupportedNamespaceItemInnerContent>
+      </NamespaceItemContent>
+    </NamespaceItemContainer>
+  );
+}

package/src/components/NamespaceItem/SupportedChainsList.styles.ts

@@ -0,0 +1,25 @@
+import { styled } from '@rango-dev/ui';
+
+export const SupportedChainsContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  padding: 0,
+  margin: 0,
+});
+
+export const SupportedChainItem = styled('div', {
+  marginLeft: '-5px',
+  listStyleType: 'none',
+  backgroundColor: '$background',
+  borderRadius: '$lg',
+  minWidth: '15px',
+  height: '15px',
+  variants: {
+    firstItem: {
+      true: { marginLeft: 0 },
+    },
+  },
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/NamespaceItem/SupportedChainsList.tsx

@@ -0,0 +1,58 @@
+import type { PropTypes } from './SupportedChainsList.types';
+
+import { Image, Tooltip, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import {
+  SupportedChainItem,
+  SupportedChainsContainer,
+} from './SupportedChainsList.styles';
+
+const SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER = 3;
+
+export function SupportedChainsList(props: PropTypes) {
+  const { chains } = props;
+  return (
+    <SupportedChainsContainer id="widget-supported-chains-container">
+      {chains
+        .slice(0, SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER)
+        .map((chain, index) => (
+          <Tooltip
+            key={chain.name}
+            container={getContainer()}
+            side="bottom"
+            align="start"
+            content={chain.name}
+            sideOffset={4}>
+            <SupportedChainItem firstItem={index === 0}>
+              <Image src={chain.logo} size={15} />
+            </SupportedChainItem>
+          </Tooltip>
+        ))}
+      {chains.length > SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER && (
+        <Tooltip
+          container={getContainer()}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          content={
+            <SupportedChainsContainer>
+              {chains.map((chain, index) => (
+                <SupportedChainItem key={chain.name} firstItem={index === 0}>
+                  <Image src={chain.logo} size={15} />
+                </SupportedChainItem>
+              ))}
+            </SupportedChainsContainer>
+          }>
+          <SupportedChainItem>
+            <Typography variant="body" size="xsmall">
+              +{chains.length - SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER}
+            </Typography>
+          </SupportedChainItem>
+        </Tooltip>
+      )}
+    </SupportedChainsContainer>
+  );
+}

package/src/components/NamespaceItem/SupportedChainsList.types.ts

@@ -0,0 +1,5 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export type PropTypes = {
+  chains: BlockchainMeta[];
+};

package/src/components/NamespaceItem/index.ts

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

package/src/components/NoResult/NoResult.helpers.ts

@@ -0,0 +1,69 @@
+import type { Info } from './NoResult.types';
+import type { NoResultError, QuoteRequestFailed } from '../../types';
+
+import { i18n } from '@lingui/core';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType } from '../../types';
+
+const SMALL_NO_ROUTE__ICON_SIZE = 24;
+const LARGE_NO_ROUTE_ICON_SIZE = 60;
+
+export function makeInfo(
+  error: NoResultError | QuoteRequestFailed | null,
+  disabledLiquiditySources: string[],
+  toggleAllLiquiditySources: (shouldReset: boolean) => void,
+  refetchQuote: () => void
+): Info {
+  if (error?.type === QuoteErrorType.REQUEST_FAILED) {
+    return {
+      alert: {
+        type: 'warning',
+        text: errorMessages().genericServerError,
+        action: {
+          onClick: refetchQuote,
+          title: i18n.t('Retry'),
+        },
+      },
+      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,
+    };
+  } else if (
+    error?.type === QuoteErrorType.NO_RESULT &&
+    error.diagnosisMessage
+  ) {
+    return {
+      alert: {
+        type: 'error',
+        text: error.diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
+  }
+  return {
+    alert: null,
+    description: errorMessages().noResultError.description,
+  };
+}
+
+export enum NoRouteIconSize {
+  small = SMALL_NO_ROUTE__ICON_SIZE,
+  large = LARGE_NO_ROUTE_ICON_SIZE,
+}
+
+export enum NoRouteTitleSize {
+  small = 'small',
+  large = 'medium',
+}

package/src/components/NoResult/NoResult.styles.ts

@@ -0,0 +1,33 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const ErrorDescription = styled('div', {
+  variants: {
+    size: {
+      small: {},
+      large: {
+        maxWidth: '316px',
+      },
+    },
+  },
+});
+
+export const Footer = styled('div', {
+  variants: {
+    size: {
+      small: {
+        width: '100%',
+      },
+      large: {},
+    },
+  },
+});
+
+export const PrefixIcon = styled('div', {
+  padding: '$6 $0',
+});

package/src/components/NoResult/NoResult.tsx

@@ -0,0 +1,93 @@
+import type { PropTypes } from './NoResult.types';
+
+import {
+  Alert,
+  Button,
+  Divider,
+  NoRouteIcon,
+  RefreshIcon,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useAppStore } from '../../store/AppStore';
+
+import {
+  makeInfo,
+  NoRouteIconSize,
+  NoRouteTitleSize,
+} from './NoResult.helpers';
+import {
+  Container,
+  ErrorDescription,
+  Footer,
+  PrefixIcon,
+} from './NoResult.styles';
+
+export function NoResult(props: PropTypes) {
+  const { fetch, error, size = 'small', skipAlerts } = props;
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
+
+  const swappers = useAppStore().swappers();
+  const info = makeInfo(
+    error,
+    disabledLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
+    fetch
+  );
+  if (skipAlerts) {
+    info.alert = null;
+  }
+
+  return (
+    <Container id="widget-no-result-container">
+      <NoRouteIcon size={NoRouteIconSize[size]} color="gray" />
+      <Divider size={4} />
+      <Typography variant="title" size={NoRouteTitleSize[size]}>
+        {errorMessages().noResultError.title}
+      </Typography>
+      {size === 'large' && <Divider size={4} />}
+      {!!info.description && (
+        <ErrorDescription size={size}>
+          <Typography
+            variant="body"
+            size="small"
+            align="center"
+            color="neutral700">
+            {info.description}
+          </Typography>
+        </ErrorDescription>
+      )}
+      <Divider size={size === 'large' ? '24' : '4'} />
+      {!!info.alert && (
+        <Footer size={size}>
+          <Alert
+            id="widget-no-result-alert"
+            type={info.alert.type}
+            title={info.alert.text}
+            titleAlign={'left'}
+            action={
+              info.alert.action && (
+                <Button
+                  size="xsmall"
+                  id="widget-no-result-alert-btn"
+                  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/NoResult/NoResult.types.ts

@@ -0,0 +1,24 @@
+import type { NoResultError, QuoteRequestFailed } from '../../types';
+
+export interface PropTypes {
+  fetch: () => void;
+  error: NoResultError | QuoteRequestFailed | null;
+  size?: 'small' | 'large';
+  skipAlerts?: boolean;
+}
+
+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/NoResult/index.ts

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

package/src/components/NotificationContent/NotificationContent.tsx

@@ -0,0 +1,37 @@
+import type { Notification } from '../../types/notification';
+
+import { Notifications } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { getBlockchainImage } from '../../utils/meta';
+
+export function NotificationContent() {
+  const navigate = useNavigate();
+
+  const { getNotifications, clearNotifications } = useNotificationStore();
+
+  const notifications: Notification[] = getNotifications();
+  const blockchains = useAppStore().blockchains();
+  const { findToken } = useAppStore();
+
+  const onClickItem = (requestId: Notification['requestId']) => {
+    navigate(`${navigationRoutes.swaps}/${requestId}`);
+  };
+
+  return (
+    <Notifications
+      id="widget-notifications-container"
+      list={notifications}
+      getBlockchainImage={(blockchain) =>
+        getBlockchainImage(blockchain, blockchains)
+      }
+      getTokenImage={(token) => findToken(token)?.image}
+      onClickItem={onClickItem}
+      onClearAll={clearNotifications}
+    />
+  );
+}

package/src/components/NotificationContent/index.ts

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