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

package/src/components/ImportCustomToken/ImportCustomToken.types.ts

@@ -0,0 +1,18 @@
+import type {
+  CustomTokenError,
+  UseFetchCustomToken,
+} from '../../hooks/useFetchCustomToken';
+import type { TokenData } from '../TokenList/TokenList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+export type PropTypes = {
+  token: TokenData | null;
+  error?: CustomTokenError;
+  blockchain?: BlockchainMeta;
+  address: string;
+  fetchCustomToken?: UseFetchCustomToken['fetchCustomToken'];
+  onCloseErrorModal?: () => void;
+  onImport: () => void;
+  onExitErrorModal: () => void;
+  onExitImportModal: () => void;
+};

package/src/components/ImportCustomToken/index.ts

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

package/src/components/Layout/Layout.constants.ts

@@ -0,0 +1,5 @@
+export const WIDGET_MAX_HEIGHT = '700px';
+export const WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS = '425px';
+export const WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS = '550px';
+export const COMPACT_TOKEN_SELECTOR_THRESHOLD = '640px';
+export const LARGE_SCREEN_MIN_HEIGHT = '800px';

package/src/components/Layout/Layout.helpers.ts

@@ -0,0 +1,16 @@
+import { getContainer } from '../../utils/common';
+
+export function onScrollContentAttachStatusToContainer(e: Event) {
+  const contentElement = e.target as HTMLElement | null;
+
+  if (contentElement) {
+    const fromTop = contentElement.scrollTop;
+    const container = getContainer();
+
+    if (fromTop > 1) {
+      container.classList.add('rng-scrolled');
+    } else {
+      container.classList.remove('rng-scrolled');
+    }
+  }
+}

package/src/components/Layout/Layout.styles.ts

@@ -0,0 +1,79 @@
+import { css, styled } from '@rango-dev/ui';
+
+import {
+  LARGE_SCREEN_MIN_HEIGHT,
+  WIDGET_MAX_HEIGHT,
+  WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+  WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+} from './Layout.constants';
+
+export const LayoutContainer = css({
+  borderRadius: '$primary',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  boxShadow: '$mainContainer',
+});
+
+export const Container = styled('div', {
+  position: 'relative',
+  width: '100vw',
+  minWidth: '300px',
+  maxWidth: '390px',
+  backgroundColor: '$background',
+  maxHeight: WIDGET_MAX_HEIGHT,
+  variants: {
+    height: {
+      auto: {
+        height: 'auto',
+      },
+      fixed: {
+        height: '100%',
+        minHeight: WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+        [`@media screen and (min-height: ${LARGE_SCREEN_MIN_HEIGHT})`]: {
+          minHeight: WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+        },
+      },
+    },
+    showBanner: {
+      true: {
+        overflow: 'visible',
+      },
+    },
+  },
+});
+
+export const Content = styled('div', {
+  position: 'relative',
+  overflow: 'hidden',
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 0,
+  overflowY: 'auto',
+});
+
+export const Footer = styled('div', {
+  padding: '0 $20 $10',
+  '& .footer__alert': {
+    paddingTop: '$10',
+  },
+  '& .footer__logo': {
+    opacity: 0,
+    transition: 'opacity 1s ease-in-out',
+    '&.logo__show': {
+      opacity: 1,
+    },
+    '&.logo__hidden': {
+      visibility: 'hidden',
+    },
+  },
+});
+
+export const BannerContainer = styled('div', {
+  width: '100%',
+  position: 'absolute',
+  bottom: '-$10',
+  transform: 'translateY(100%)',
+  overflow: 'hidden',
+});

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,226 @@
+import type { PropTypes } from './Layout.types';
+import type { PendingSwap } from 'rango-types';
+import type { PropsWithChildren } from 'react';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import { BottomLogo, Divider, Header } from '@rango-dev/ui';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { WIDGET_UI_ID } from '../../constants';
+import { useIframe } from '../../hooks/useIframe';
+import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { tabManager, useUiStore } from '../../store/ui';
+import { getContainer } from '../../utils/common';
+import { getPendingSwaps } from '../../utils/queue';
+import { isFeatureHidden } from '../../utils/settings';
+import { ActivateTabAlert } from '../common/ActivateTabAlert';
+import { ActivateTabModal } from '../common/ActivateTabModal';
+import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
+import { RefreshModal } from '../RefreshModal';
+
+import { COMPACT_TOKEN_SELECTOR_THRESHOLD } from './Layout.constants';
+import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
+import {
+  BannerContainer,
+  Container,
+  Content,
+  Footer,
+  LayoutContainer,
+} from './Layout.styles';
+
+function Layout(props: PropsWithChildren<PropTypes>) {
+  const { connectHeightObserver, disconnectHeightObserver } = useIframe();
+  const { children, header, footer, height = 'fixed' } = props;
+  const {
+    fetchStatus,
+    connectedWallets,
+    config: { __UNSTABLE_OR_INTERNAL__ },
+  } = useAppStore();
+  const [openRefreshModal, setOpenRefreshModal] = useState(false);
+  const {
+    config: { features, theme },
+  } = useAppStore();
+  const { watermark } = useUiStore();
+
+  const hasWatermark = watermark === 'FULL';
+  const { activeTheme } = useTheme(theme || {});
+  const [showBanner, setShowBanner] = useState(false);
+
+  const isConnectWalletHidden = isFeatureHidden(
+    'connectWalletButton',
+    features
+  );
+
+  const {
+    isActiveTab,
+    tabManagerInitiated,
+    showActivateTabModal,
+    setShowActivateTabModal,
+    activateCurrentTab,
+    setShowCompactTokenSelector,
+  } = useUiStore();
+  const navigateBack = useNavigateBack();
+  const { manager } = useManager();
+  const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
+    ({ swap }) => swap
+  );
+  const hasRunningSwap = pendingSwaps.some((swap) => swap.status === 'running');
+
+  const onActivateTab = () =>
+    activateCurrentTab(tabManager.forceClaim, hasRunningSwap);
+
+  const onConnectWallet = () => {
+    header.onWallet?.();
+  };
+
+  const showBackButton =
+    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
+
+  const scrollViewRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const noRoutesAvailable =
+      (__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.length ?? 0) === 0;
+    const routesMatched =
+      !!__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.some((route) =>
+        location.pathname.endsWith(route)
+      );
+
+    setShowBanner(
+      !!__UNSTABLE_OR_INTERNAL__?.swapBoxBanner &&
+        (noRoutesAvailable || routesMatched)
+    );
+  }, [
+    __UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.toString(),
+    location.pathname,
+  ]);
+
+  useEffect(() => {
+    const isIframe = isAppLoadedIntoIframe();
+
+    // This feature only will be available in an iframe context.
+    if (isIframe && containerRef.current) {
+      connectHeightObserver(containerRef.current);
+    }
+
+    return () => {
+      disconnectHeightObserver();
+    };
+  }, []);
+
+  useEffect(() => {
+    scrollViewRef.current?.addEventListener(
+      'scroll',
+      onScrollContentAttachStatusToContainer
+    );
+    return () => {
+      scrollViewRef.current?.removeEventListener(
+        'scroll',
+        onScrollContentAttachStatusToContainer
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    setOpenRefreshModal(fetchStatus === 'failed');
+  }, [fetchStatus]);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect) {
+          setShowCompactTokenSelector(
+            entry.contentRect.height <
+              parseInt(COMPACT_TOKEN_SELECTOR_THRESHOLD)
+          );
+        }
+      }
+    });
+
+    observer.observe(containerRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <Container
+      height={height}
+      id={WIDGET_UI_ID.SWAP_BOX_ID}
+      className={`${activeTheme()} ${LayoutContainer()}`}
+      ref={containerRef}
+      showBanner={showBanner}>
+      <Header
+        prefix={
+          showBackButton ? (
+            <BackButton
+              onClick={() => {
+                navigateBack();
+                // As an example, used in routes page to add a custom logic when navigating back to the home page.
+                header.onBack?.();
+              }}
+            />
+          ) : null
+        }
+        title={header.title}
+        suffix={
+          <>
+            {header.suffix}
+            {header.onWallet && !isConnectWalletHidden && (
+              <WalletButton
+                container={getContainer()}
+                onClick={onConnectWallet}
+                isConnected={!!connectedWallets?.length}
+              />
+            )}
+            {header.onCancel && <CancelButton onClick={header.onCancel} />}
+          </>
+        }
+      />
+      <Content ref={scrollViewRef}>{children}</Content>
+      <ActivateTabModal
+        open={showActivateTabModal}
+        onClose={() => setShowActivateTabModal(false)}
+        onConfirm={onActivateTab}
+      />
+
+      <Footer>
+        <div className="footer__content">
+          {tabManagerInitiated && !isActiveTab && (
+            <div className="footer__alert">
+              <ActivateTabAlert onActivateTab={onActivateTab} />
+              <Divider size={10} />
+            </div>
+          )}
+          {footer}
+        </div>
+
+        <Divider size={12} />
+
+        <div
+          className={`footer__logo ${
+            hasWatermark ? 'logo__show' : 'logo__hidden'
+          }`}>
+          <BottomLogo />
+        </div>
+      </Footer>
+      {showBanner && (
+        <BannerContainer>
+          {__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.element}
+        </BannerContainer>
+      )}
+      <RefreshModal
+        open={openRefreshModal}
+        onClose={() => setOpenRefreshModal(false)}
+      />
+    </Container>
+  );
+}
+export { Layout };

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

@@ -0,0 +1,21 @@
+import type { Container } from './Layout.styles';
+import type * as Stitches from '@stitches/react';
+
+type ContainerProps = Stitches.VariantProps<typeof Container>;
+type ContainerHeightProp = NonNullable<
+  Exclude<ContainerProps['height'], object>
+>;
+
+export interface PropTypes {
+  header: {
+    title: string;
+    onWallet?: () => void;
+    hasSettings?: boolean;
+    suffix?: React.ReactNode;
+    hasBackButton?: boolean;
+    onCancel?: () => void;
+    onBack?: () => void;
+  };
+  footer?: React.ReactNode;
+  height?: ContainerHeightProp;
+}

package/src/components/Layout/PageContainer.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@rango-dev/ui';
+
+const PageContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '20px 20px 10px',
+  flexGrow: 1,
+
+  variants: {
+    view: {
+      true: {
+        flexGrow: 1,
+        overflow: 'hidden',
+      },
+    },
+    compact: {
+      true: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+export { PageContainer };

package/src/components/Layout/ScrollableArea.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@rango-dev/ui';
+
+const CONTENT_PADDING = '$20 $20 $10 $20';
+
+const ScrollableArea = styled('div', {
+  padding: CONTENT_PADDING,
+  overflowY: 'auto',
+  flexGrow: 1,
+});
+
+export { ScrollableArea, CONTENT_PADDING };

package/src/components/Layout/index.ts

@@ -0,0 +1,3 @@
+export { Layout } from './Layout';
+export { ScrollableArea, CONTENT_PADDING } from './ScrollableArea';
+export { PageContainer } from './PageContainer';

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

@@ -0,0 +1,5 @@
+import { ListItem, styled } from '@rango-dev/ui';
+
+export const CustomListItem = 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 { CustomListItem } from './LoadingLiquiditySourceList.styles';
+
+const ITEM_SKELETON_COUNT = 30;
+export function LoadingLiquiditySourceList() {
+  return (
+    <LiquiditySourceList>
+      {Array.from(Array(ITEM_SKELETON_COUNT), (_, index) => (
+        <CustomListItem
+          hasDivider
+          key={index}
+          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/LoadingSwapDetails.styles.ts

@@ -0,0 +1,76 @@
+import { css, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  width: '100%',
+  height: '100%',
+  padding: '$10 $20',
+});
+
+export const StepContainer = styled('div', {
+  backgroundColor: '$neutral100',
+  borderRadius: '$xm',
+  padding: '$10 $15',
+});
+
+export const StepSeparator = styled('div', {
+  width: '0px',
+  height: '$20',
+  borderLeft: '1px dashed $neutral700',
+  marginLeft: '25px',
+});
+
+export const quoteSummaryItemStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const costStyles = css({
+  paddingTop: '$15',
+  display: 'flex',
+});
+
+export const quoteSummaryStyles = css({
+  padding: '$15 $0',
+});
+
+export const quoteSummarySeparatorStyles = css({
+  width: '0px',
+  height: '$16',
+  borderLeft: '1px solid $neutral400',
+  marginLeft: '13px',
+});
+
+export const swapsStepsStyles = css({
+  paddingBottom: '$10',
+});
+
+export const stepTitleStyles = css({
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+});
+
+export const stepTokensStyles = css({
+  paddingTop: '$5',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepInfoStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepIconStyles = css({
+  padding: '$4 $6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const extraInfoStyles = css({
+  display: 'flex',
+  paddingTop: '$10',
+  paddingBottom: '$5',
+});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -0,0 +1,47 @@
+import { i18n } from '@lingui/core';
+import { Divider, Skeleton, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { QuoteSummarySkeleton, StepSkeleton } from '../QuoteSkeleton';
+
+import {
+  Container,
+  extraInfoStyles,
+  StepContainer,
+  StepSeparator,
+} from './LoadingSwapDetails.styles';
+
+export function LoadingSwapDetails() {
+  return (
+    <Container>
+      <QuoteSummarySkeleton type="swap-preview" />
+      <div className="swaps-steps">
+        <Typography variant="title" size="small">
+          {i18n.t('Swaps steps')}
+        </Typography>
+      </div>
+
+      <>
+        <StepContainer>
+          <StepSkeleton separator={false} />
+          <div className={extraInfoStyles()}>
+            <Divider direction="horizontal" size={20} />
+            <Skeleton height={22} variant="rectangular" />
+          </div>
+        </StepContainer>
+        <StepSeparator />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
+        <StepSeparator />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
+        <StepSeparator />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
+      </>
+    </Container>
+  );
+}

package/src/components/LoadingSwapDetails/index.ts

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

package/src/components/NamespaceItem/NamespaceItem.helpers.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export function getBlockchainLogo(
+  blockchains: BlockchainMeta[],
+  blockchainName: string
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+}

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

@@ -0,0 +1,93 @@
+import { darkTheme, Image, styled, Typography } from '@rango-dev/ui';
+
+export const NamespaceItemContainer = styled('li', {
+  backgroundColor: '$neutral200',
+  padding: '$16',
+  borderRadius: '$sm',
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+      },
+    },
+    hasError: {
+      true: {
+        background: '$error100',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$error700',
+        },
+      },
+    },
+    unsupported: {
+      true: {
+        cursor: 'not-allowed',
+        paddingTop: '$8',
+        paddingBottom: '$8',
+      },
+    },
+  },
+});
+
+export const NamespaceItemContent = styled('div', {
+  display: 'flex',
+  gap: '$8',
+  alignItems: 'center',
+});
+
+export const NamespaceItemInnerContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  height: '$40',
+  variants: {
+    showSupportedChains: {
+      true: {
+        justifyContent: 'space-between',
+      },
+      false: {
+        justifyContent: 'center',
+      },
+    },
+  },
+});
+
+export const UnsupportedNamespaceItemInnerContent = styled('div', {
+  flex: '1',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$4',
+  opacity: '0.5',
+});
+
+export const NamespaceItemInfo = styled('div', {
+  display: 'flex',
+  gap: '$6',
+  alignItems: 'center',
+});
+
+export const NamespaceItemError = styled('div', {
+  paddingLeft: '48px',
+});
+
+export const NamespaceItemErrorDropdownToggle = styled('div', {
+  display: 'flex',
+  gap: '$2',
+  cursor: 'pointer',
+  alignItems: 'center',
+  width: 'fit-content',
+});
+
+export const NamespaceAccountAddress = styled(Typography, {
+  maxWidth: '100px',
+});
+
+export const NamespaceLogo = styled(Image, {
+  variants: {
+    disabled: {
+      true: {
+        opacity: '0.5',
+      },
+    },
+  },
+});