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

package/src/components/TokenList/TokenList.styles.ts

@@ -0,0 +1,211 @@
+import {
+  css,
+  darkTheme,
+  ImageContainer,
+  ListItemButton,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
+
+export const tokenNameStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: 100,
+  overflow: 'hidden',
+});
+export const descriptionStyles = css({
+  position: 'relative',
+  height: 12,
+  width: '30%',
+  maxWidth: '150px',
+});
+export const tokenTitleStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  bottom: '-8px',
+});
+export const tokenAddressStyles = css({
+  transform: 'translateY(12px)',
+  visibility: 'hidden',
+  display: 'flex',
+  '& a': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '$12',
+    lineHeight: '$16',
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+    textDecoration: 'none',
+  },
+});
+export const tokenWithoutNameStyles = css({});
+export const usdValueStyles = css();
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  overflow: 'hidden',
+  justifyContent: 'center',
+});
+
+export const Title = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  '._typography': {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    maxWidth: 100,
+    overflow: 'hidden',
+  },
+});
+export const List = styled('ul', {
+  flexGrow: 1,
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  display: 'flex',
+  flexDirection: 'column',
+  listStyle: 'none',
+
+  '& li': {
+    alignItems: 'none',
+
+    '&:hover': {
+      [`& .${descriptionStyles}`]: {
+        [`& .${tokenAddressStyles}`]: {
+          position: 'absolute',
+          transform: 'none',
+          transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+          visibility: 'visible',
+        },
+
+        [`& .${tokenWithoutNameStyles}`]: {
+          bottom: '-15px',
+        },
+        [`& .${tokenNameStyles}`]: {
+          position: 'absolute',
+          transform: 'translateY(-12px)',
+          visibility: 'hidden',
+        },
+        [`& .${tokenTitleStyles}`]: {
+          position: 'absolute',
+          transform: 'translateY(-12px)',
+          bottom: '-10px',
+        },
+      },
+    },
+  },
+});
+
+export const StyledListItemButton = styled(ListItemButton, {
+  variants: {
+    customToken: {
+      true: {
+        '&:hover': {
+          cursor: 'unset',
+        },
+      },
+    },
+  },
+});
+
+export const Tag = styled('div', {
+  paddingLeft: '$5',
+  paddingRight: '$5',
+  borderRadius: '$md',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const TagTitle = styled(Typography, {});
+
+export const BalanceContainer = styled('div', {
+  textAlign: 'right',
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  [`& .${usdValueStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+});
+
+export const End = styled('div', {
+  display: 'flex',
+  alignItems: 'end',
+  flexDirection: 'column',
+});
+
+export const Description = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+export const ImageSection = styled('div', {
+  position: 'relative',
+  [`& ${ImageContainer}`]: {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+});
+export const Pin = styled('div', {
+  position: 'absolute',
+  backgroundColor: '$neutral100',
+  padding: '$4',
+  borderRadius: '50%',
+  bottom: -6,
+  right: -6,
+});
+
+export const TokenBalance = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const StyledLink = styled('a', {
+  '& svg:hover': {
+    color: '$colors$info',
+  },
+});
+
+export const ListItemContainer = styled('div', {
+  paddingRight: '$5',
+
+  '& .widget-token-list-item-btn': {
+    width: '100%',
+    overflow: 'hidden',
+    height: '60px',
+  },
+
+  '& .widget-token-list-item-import-btn': {
+    height: '$20',
+    padding: '0 $10',
+
+    '& ._text': {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    '& ._typography': {
+      [`.${darkTheme} &`]: {
+        color: '$foreground',
+      },
+    },
+  },
+});

package/src/components/TokenList/TokenList.tsx

@@ -0,0 +1,390 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes, RenderDescProps, TokenData } from './TokenList.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  CustomTokenWarning,
+  darkTheme,
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  ListItem,
+  NotFound,
+  PinIcon,
+  Skeleton,
+  Typography,
+  VirtualizedList,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { createTintsAndShades } from '../../utils/colors';
+import { getContainer } from '../../utils/common';
+import { findBlockchain } from '../../utils/meta';
+import { formatBalance } from '../../utils/wallets';
+import { ImportCustomToken } from '../ImportCustomToken';
+
+import { LoadingTokenList } from './LoadingTokenList';
+import {
+  BalanceContainer,
+  Container,
+  descriptionStyles,
+  End,
+  ImageSection,
+  List,
+  ListItemContainer,
+  Pin,
+  StyledLink,
+  StyledListItemButton,
+  Tag,
+  TagTitle,
+  Title,
+  tokenAddressStyles,
+  TokenBalance,
+  tokenNameStyles,
+  tokenTitleStyles,
+  tokenWithoutNameStyles,
+  usdValueStyles,
+} from './TokenList.styles';
+
+const PAGE_SIZE = 20;
+
+const renderDesc = (props: RenderDescProps) => {
+  const { address, name, url, token, customCssForTag, customCssForTagTitle } =
+    props;
+  const length = address.length;
+
+  return (
+    <div className={descriptionStyles()}>
+      {name ? (
+        <div className={tokenNameStyles()}>{name}</div>
+      ) : (
+        <Title className={tokenTitleStyles()}>
+          <Typography variant="title" size="xmedium">
+            {token.symbol}
+          </Typography>
+          <Divider direction="horizontal" size={4} />
+          <Tag css={customCssForTag}>
+            <TagTitle variant="body" size="xsmall" css={customCssForTagTitle}>
+              {token.blockchain}
+            </TagTitle>
+          </Tag>
+        </Title>
+      )}
+
+      {!!address && (
+        <div
+          className={`${tokenAddressStyles()} ${
+            !name && tokenWithoutNameStyles()
+          }`}>
+          {length > 10
+            ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
+            : address}{' '}
+          <Divider size={4} direction="horizontal" />
+          <StyledLink
+            href={url}
+            target="_blank"
+            rel="nofollow noreferrer"
+            onClick={(e) => e.stopPropagation()}>
+            <ExternalLinkIcon size={12} />
+          </StyledLink>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export function TokenList(props: PropTypes) {
+  const {
+    list: tokens,
+    searchedFor = '',
+    onChange,
+    selectedBlockchain,
+    showTitle = true,
+    action,
+    type,
+    showWarning = true,
+  } = props;
+
+  const fetchStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
+  const { isTokenPinned } = useAppStore();
+  const { setFromToken, setToToken } = useQuoteStore()();
+  const { t } = useTranslation();
+  const navigateBack = useNavigateBack();
+
+  const [customToken, setCustomToken] = useState<TokenData | null>(null);
+
+  const updateToken = () => {
+    if (type === 'source') {
+      setFromToken({ token: customToken, meta: { blockchains } });
+    } else {
+      setToToken({ token: customToken, meta: { blockchains } });
+    }
+  };
+
+  const handleImportToken = () => {
+    updateToken();
+    navigateBack();
+  };
+
+  const endRenderer = (token: TokenData) => {
+    if (token.customToken) {
+      const { customToken, ...otherProps } = token;
+      const handleClick: React.MouseEventHandler<HTMLButtonElement> = (
+        event
+      ) => {
+        event.stopPropagation();
+        setCustomToken({ ...otherProps, warning: true });
+      };
+
+      return (
+        // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
+        <Button
+          variant="contained"
+          type="primary"
+          size="small"
+          className="widget-token-list-item-import-btn"
+          onClick={handleClick}>
+          <Typography variant="body" size="xsmall" color="background">
+            {t('import')}
+          </Typography>
+        </Button>
+      );
+    }
+    const tokenBalance = formatBalance(getBalanceFor(token));
+
+    if (action) {
+      return action(token);
+    }
+    if (loadingWallet) {
+      return (
+        <End>
+          <Skeleton variant="text" size="large" width={70} />
+          <Divider size={4} />
+          <Skeleton variant="text" size="medium" width={50} />
+        </End>
+      );
+    }
+
+    return (
+      tokenBalance && (
+        <BalanceContainer>
+          <TokenBalance variant="title" size="small">
+            {tokenBalance.amount}
+          </TokenBalance>
+          <div />
+          {tokenBalance.usdValue && (
+            <Typography
+              variant="body"
+              className={usdValueStyles()}
+              size="xsmall">
+              {`$${tokenBalance.usdValue}`}
+            </Typography>
+          )}
+        </BalanceContainer>
+      )
+    );
+  };
+  const renderList = () => {
+    return (
+      <VirtualizedList
+        style={{
+          // See note on https://github.com/rango-exchange/rango-client/pull/1284
+          flexGrow: 1,
+          minHeight: 0,
+        }}
+        itemContent={(index) => {
+          const token = tokens[index];
+          if (token === 'skeleton') {
+            return (
+              <ListItem
+                hasDivider
+                start={<Skeleton variant="circular" width={35} height={35} />}
+                end={
+                  <End>
+                    <Skeleton variant="text" size="large" width={70} />
+                    <Divider size={4} />
+                    <Skeleton variant="text" size="medium" width={50} />
+                  </End>
+                }
+                title={
+                  <div>
+                    <Skeleton variant="text" size="large" width={90} />
+                    <Divider size={4} />
+                    <Skeleton variant="text" size="medium" width={90} />
+                  </div>
+                }
+              />
+            );
+          }
+          const blockchain = blockchains.find(
+            (blockchain) => blockchain.name === token?.blockchain
+          );
+
+          /**
+           * This block is added to satisfy TypeScript without using assertions and to prevent any errors that could break the app.
+           * Be cautious, as Virtuoso warns us if we return empty elements.
+           * If you need to exclude any items, do so before passing them to the virtual list.
+           */
+          if (!blockchain || !token) {
+            return null;
+          }
+
+          const address = token.address;
+
+          const colors = createTintsAndShades(blockchain.color, 'main');
+          const customCssForTag = {
+            $$color: colors.main150,
+            [`.${darkTheme} &`]: {
+              $$color: colors.main750,
+            },
+            backgroundColor: '$$color',
+          };
+
+          const customCssForTagTitle = {
+            $$color: colors.main750,
+            [`.${darkTheme} &`]: {
+              $$color: colors.main150,
+            },
+            color: '$$color',
+          };
+
+          const handleClick = () => {
+            if (typeof token !== 'string' && !token.customToken) {
+              onChange?.(token);
+            }
+          };
+
+          return (
+            <ListItemContainer>
+              <StyledListItemButton
+                tab-index={index}
+                key={`${token.symbol}${address}`}
+                id={`${token.symbol}${address}`}
+                className="widget-token-list-item-btn"
+                hasDivider
+                customToken={token?.customToken}
+                onClick={handleClick}
+                start={
+                  <ImageSection>
+                    <Image
+                      src={
+                        token.image === ''
+                          ? DEFAULT_TOKEN_IMAGE_SRC
+                          : token.image
+                      }
+                      size={30}
+                    />
+                    {props.type !== 'custom-token' &&
+                      token &&
+                      isTokenPinned(token, props.type) && (
+                        <Pin>
+                          <PinIcon size={12} color="gray" />
+                        </Pin>
+                      )}
+                  </ImageSection>
+                }
+                title={
+                  blockchain.type === 'COSMOS' ||
+                  !!token.name ||
+                  (!token.name && !address) ? (
+                    <Title>
+                      <Typography variant="title" size="xmedium">
+                        {token.symbol}
+                      </Typography>
+                      <Divider direction="horizontal" size={4} />
+                      <Tag css={customCssForTag}>
+                        <TagTitle
+                          variant="body"
+                          size="xsmall"
+                          css={customCssForTagTitle}>
+                          {token.blockchain}
+                        </TagTitle>
+                      </Tag>
+                      {showWarning && token.warning && (
+                        <>
+                          <Divider direction="horizontal" size={4} />
+                          <CustomTokenWarning container={getContainer()} />
+                        </>
+                      )}
+                    </Title>
+                  ) : undefined
+                }
+                description={
+                  typeof token !== 'string' &&
+                  !!blockchain.info &&
+                  !!address &&
+                  blockchain.type !== 'COSMOS'
+                    ? renderDesc({
+                        address,
+                        token,
+                        customCssForTag,
+                        customCssForTagTitle,
+                        name: token.name,
+                        url: blockchain.info.addressUrl
+                          .split('{wallet}')
+                          .join(address),
+                      })
+                    : token.name || undefined
+                }
+                end={endRenderer(token)}
+              />
+            </ListItemContainer>
+          );
+        }}
+        totalCount={tokens.length}
+        key={`${selectedBlockchain}-${searchedFor}`}
+      />
+    );
+  };
+
+  const customTokenBlockchain = customToken
+    ? findBlockchain(customToken?.blockchain, blockchains)
+    : null;
+
+  return (
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Token')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+
+      <Container>
+        <Divider size={4} />
+        {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+        {fetchStatus === 'success' &&
+          (tokens.length ? (
+            <>
+              <ImportCustomToken
+                token={customToken}
+                address={customToken?.address ?? ''}
+                blockchain={customTokenBlockchain ?? undefined}
+                onImport={handleImportToken}
+                onExitErrorModal={() => setCustomToken(null)}
+                onExitImportModal={() => setCustomToken(null)}
+              />
+              <List as="ul">{renderList()}</List>
+            </>
+          ) : (
+            !!searchedFor && (
+              <NotFound
+                title={i18n.t('No results found')}
+                description={i18n.t('Try using different keywords')}
+              />
+            )
+          ))}
+      </Container>
+    </>
+  );
+}

package/src/components/TokenList/TokenList.types.ts

@@ -0,0 +1,51 @@
+import type { Token } from 'rango-sdk';
+import type { ReactElement } from 'react';
+
+export type TokenData = Token &
+  (Token & { customToken?: boolean; warning?: boolean });
+
+export interface PropTypes {
+  list: (TokenData | 'skeleton')[];
+  searchedFor?: string;
+  onChange?: (token: Token) => void;
+  selectedBlockchain?: string;
+  type: 'source' | 'destination' | 'custom-token';
+  action?: (token: Token) => ReactElement;
+  showTitle?: boolean;
+  showWarning?: boolean;
+}
+
+export interface LoadingTokenListProps {
+  size: number;
+}
+
+export interface RenderDescProps {
+  name?: string | null;
+  address: string;
+  url: string;
+  token: Token;
+  customCssForTag: TagCSS;
+  customCssForTagTitle: TitleCSS;
+}
+
+type TagCSS = {
+  [x: string]:
+    | string
+    | {
+        $$color?: string;
+      }
+    | undefined;
+  $$color?: string;
+  backgroundColor: string;
+};
+
+type TitleCSS = {
+  [x: string]:
+    | string
+    | {
+        $$color?: string;
+      }
+    | undefined;
+  $$color?: string;
+  color: string;
+};

package/src/components/TokenList/index.ts

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

package/src/components/WalletStatefulConnect/ConnectStatus.styles.ts

@@ -0,0 +1,38 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const IconContainer = styled('div', {
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  backgroundColor: '$success300',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LogoContainer = styled('div', {
+  position: 'relative',
+});
+
+const spin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const Spinner = styled('div', {
+  position: 'absolute',
+  border: '2px solid rgba(0, 0, 0, 0.1)',
+  borderTop: '2px solid $info500',
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  animation: `${spin} 1s linear infinite`,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+});