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

package/src/components/SwitchFromAndTo.tsx

@@ -1,60 +1,42 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useInRouterContext, useSearchParams } from 'react-router-dom';
-import { styled, Button, VerticalSwapIcon } from '@rango-dev/ui';
-import { SearchParams } from '../constants/searchParams';
-import { useBestRouteStore } from '../store/bestRoute';
-
-function SwithFromAndTo({ count }: { count: number }) {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
+import { ReverseIcon, styled } from '@rango-dev/ui';
+import React from 'react';
 
-  useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      setSearchParams({
-        ...(toChainString && { [SearchParams.FROM_CHAIN]: toChainString }),
-        ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
-        ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
-        ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString(),
-        }),
-      });
-    } else {
-      firstRender.current = false;
-    }
-  }, [count]);
-
-  return null;
-}
+import { useBestRouteStore } from '../store/bestRoute';
 
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
   bottom: '-12px',
   left: '50%',
   transform: 'translate(-50%, 10%)',
+  cursor: 'pointer',
+});
+
+const StyledButton = styled('div', {
+  borderRadius: '$md',
+  border: '3px solid $background',
+  background: '$neutral100',
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '$foreground',
+  '&:hover': {
+    color: '$secondary500',
+  },
 });
 
-export function SwithFromAndToButton() {
+export function SwitchFromAndToButton() {
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
-  const isRouterInContext = useInRouterContext();
-  const [count, setCount] = useState(0);
 
   return (
     <SwitchButtonContainer>
-      <Button
-        variant="ghost"
+      <StyledButton
         onClick={() => {
           switchFromAndTo();
-          setCount((prev) => prev + 1);
         }}>
-        <VerticalSwapIcon size={32} />
-        {isRouterInContext && <SwithFromAndTo count={count} />}
-      </Button>
+        <ReverseIcon size={12} />
+      </StyledButton>
     </SwitchButtonContainer>
   );
 }

package/src/components/TokenList/LoadingTokenList.tsx

@@ -0,0 +1,34 @@
+import type { LoadingTokenListProps } from './TokenList.types';
+
+import { Divider, ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { End, List } from './TokenList.styles';
+
+export function LoadingTokenList(props: LoadingTokenListProps) {
+  return (
+    <List>
+      {Array.from(Array(props.size), (e) => (
+        <ListItem
+          key={e}
+          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>
+          }
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/TokenList/TokenList.helpers.ts

@@ -0,0 +1,13 @@
+import type { TokenWithBalance } from './TokenList.types';
+
+import { containsText } from '../../utils/common';
+
+export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
+  list
+    .filter(
+      (token) =>
+        containsText(token.symbol, searchedFor) ||
+        containsText(token.address || '', searchedFor) ||
+        containsText(token.name || '', searchedFor)
+    )
+    .sort((a, b) => (b.pin as any) - (a.pin as any));

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

@@ -0,0 +1,121 @@
+import { styled, Typography } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+});
+
+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,
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+  '& li': {
+    alignItems: 'none',
+    '.description': {
+      position: 'relative',
+      height: 12,
+      width: 150,
+      '.token-title': {
+        position: 'absolute',
+        transform: 'none',
+        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+        bottom: '-8px',
+      },
+
+      '.token-address': {
+        transform: 'translateY(12px)',
+        visibility: 'hidden',
+        '& a': {
+          fontSize: '$12',
+          lineHeight: '$16',
+          color: '$neutral800',
+          textDecoration: 'none',
+        },
+      },
+      '.token-name': {
+        position: 'absolute',
+        transform: 'none',
+        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: 100,
+        overflow: 'hidden',
+      },
+    },
+    '&:hover': {
+      '.description': {
+        '.token-address': {
+          position: 'absolute',
+          transform: 'none',
+          transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+          visibility: 'visible',
+        },
+        '.token-address-without-name': {
+          bottom: '-15px',
+        },
+        '.token-name': {
+          position: 'absolute',
+          transform: 'translateY(-12px)',
+          visibility: 'hidden',
+        },
+        '.token-title': {
+          position: 'absolute',
+          transform: 'translateY(-12px)',
+          bottom: '-10px',
+        },
+      },
+    },
+  },
+});
+
+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',
+});
+
+export const End = styled('ul', {
+  display: 'flex',
+  alignItems: 'end',
+  flexDirection: 'column',
+});
+
+export const Description = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+export const ImageSection = styled('div', {
+  position: 'relative',
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+});
+export const Pin = styled('div', {
+  position: 'absolute',
+  backgroundColor: '$neutral100',
+  padding: '$4',
+  borderRadius: '50%',
+  bottom: -6,
+  right: -6,
+});

package/src/components/TokenList/TokenList.tsx

@@ -0,0 +1,271 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  PropTypes,
+  RenderDescProps,
+  TokenWithBalance,
+} from './TokenList.types';
+import type { CommonProps } from 'react-window';
+
+import { i18n } from '@lingui/core';
+import {
+  darkTheme,
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  ListItemButton,
+  NotFound,
+  PinIcon,
+  Skeleton,
+  Typography,
+  VirtualizedList,
+} from '@rango-dev/ui';
+import React, { forwardRef, useEffect, useState } from 'react';
+
+import { useMetaStore } from '../../store/meta';
+import { useWalletsStore } from '../../store/wallets';
+import { generateRangeColors } from '../../utils/common';
+
+import { LoadingTokenList } from './LoadingTokenList';
+import {
+  BalanceContainer,
+  Container,
+  End,
+  ImageSection,
+  List,
+  Pin,
+  Tag,
+  TagTitle,
+  Title,
+} 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="description">
+      {name ? (
+        <div className="token-name">{name}</div>
+      ) : (
+        <Title className="token-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>
+        </Title>
+      )}
+
+      {!!address && (
+        <div
+          className={`token-address ${!name && 'token-address-without-name'}`}>
+          <a
+            href={url}
+            target="_blank"
+            rel="nofollow noreferrer"
+            onClick={(e) => e.stopPropagation()}>
+            {length > 10
+              ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
+              : address}{' '}
+            <ExternalLinkIcon color="gray" size={12} />
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export function TokenList(props: PropTypes) {
+  const { list, searchedFor = '', onChange, selectedBlockchain } = props;
+
+  const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const [hasNextPage, setHasNextPage] = useState<boolean>(true);
+  const loadingWallet = useWalletsStore.use.loading();
+  const { blockchains } = useMetaStore.use.meta();
+
+  // eslint-disable-next-line react/display-name
+  const innerElementType: React.FC<CommonProps> = forwardRef((render, ref) => {
+    return (
+      <div
+        {...render}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        style={{
+          ...render.style,
+          height: `${parseFloat(render.style?.height as string) + 8 * 2}px`,
+        }}
+      />
+    );
+  });
+  const loadNextPage = () => {
+    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
+  };
+
+  useEffect(() => {
+    setHasNextPage(list.length > tokens.length);
+  }, [tokens.length]);
+
+  useEffect(() => {
+    setTokens(list.slice(0, PAGE_SIZE));
+  }, [list]);
+
+  const renderList = () => {
+    if (!tokens.length && !!searchedFor) {
+      return (
+        <>
+          <Divider size={32} />
+          <NotFound
+            title={i18n.t('No results found')}
+            description={i18n.t('Try using different keywords')}
+          />
+        </>
+      );
+    }
+    return (
+      <VirtualizedList
+        Item={({ index, style }) => {
+          const address = tokens[index].address || '';
+          const blockchain = blockchains.find(
+            (blockchain) => blockchain.name === tokens[index].blockchain
+          );
+          const color = generateRangeColors(
+            tokens[index].symbol,
+            blockchain?.color || ''
+          );
+
+          const customCssForTag = {
+            $$color: color[`${tokens[index].symbol}100`],
+            [`.${darkTheme} &`]: {
+              $$color: color[`${tokens[index].symbol}900`],
+            },
+            backgroundColor: '$$color',
+          };
+
+          const customCssForTagTitle = {
+            $$color: color[`${tokens[index].symbol}700`],
+            [`.${darkTheme} &`]: {
+              $$color: color[`${tokens[index].symbol}100`],
+            },
+            color: '$$color',
+          };
+
+          return (
+            <div
+              style={{
+                ...style,
+                paddingRight: 5,
+              }}>
+              <ListItemButton
+                style={{
+                  height: style?.height,
+                }}
+                tab-index={index}
+                key={`${tokens[index].symbol}${tokens[index].address}`}
+                id={`${tokens[index].symbol}${tokens[index].address}`}
+                hasDivider
+                onClick={() => onChange(tokens[index])}
+                start={
+                  <ImageSection>
+                    <Image src={tokens[index].image} size={30} />
+                    {tokens[index].pin && (
+                      <Pin>
+                        <PinIcon size={12} color="gray" />
+                      </Pin>
+                    )}
+                  </ImageSection>
+                }
+                title={
+                  blockchain?.type === 'COSMOS' ||
+                  !!tokens[index].name ||
+                  (!tokens[index].name && !address) ? (
+                    <Title>
+                      <Typography variant="title" size="xmedium">
+                        {tokens[index].symbol}
+                      </Typography>
+                      <Divider direction="horizontal" size={4} />
+                      <Tag css={customCssForTag}>
+                        <TagTitle
+                          variant="body"
+                          size="xsmall"
+                          css={customCssForTagTitle}>
+                          {tokens[index].blockchain}
+                        </TagTitle>
+                      </Tag>
+                    </Title>
+                  ) : undefined
+                }
+                description={
+                  !!blockchain?.info &&
+                  !!address &&
+                  blockchain.type !== 'COSMOS'
+                    ? renderDesc({
+                        address,
+                        token: tokens[index],
+                        customCssForTag,
+                        customCssForTagTitle,
+                        name: tokens[index].name,
+                        url: blockchain.info.addressUrl
+                          .split('{wallet}')
+                          .join(address),
+                      })
+                    : tokens[index].name || undefined
+                }
+                end={
+                  loadingWallet ? (
+                    <End>
+                      <Skeleton variant="text" size="large" width={70} />
+                      <Divider size={4} />
+                      <Skeleton variant="text" size="medium" width={50} />
+                    </End>
+                  ) : (
+                    tokens[index]?.balance && (
+                      <BalanceContainer>
+                        <Typography variant="title" size="small">
+                          {tokens[index].balance?.amount}
+                        </Typography>
+                        <div />
+                        {tokens[index].balance?.usdValue && (
+                          <Typography
+                            variant="body"
+                            color="neutral800"
+                            size="xsmall">
+                            {`$${tokens[index].balance?.usdValue}`}
+                          </Typography>
+                        )}
+                      </BalanceContainer>
+                    )
+                  )
+                }
+              />
+            </div>
+          );
+        }}
+        hasNextPage={hasNextPage}
+        itemCount={tokens.length}
+        loadNextPage={loadNextPage}
+        innerElementType={innerElementType}
+        size={60}
+        key={`${selectedBlockchain}-${searchedFor}`}
+      />
+    );
+  };
+
+  return (
+    <Container>
+      <Typography variant="label" size="large">
+        {i18n.t('Select Token')}
+      </Typography>
+      <Divider size={4} />
+      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {loadingStatus === 'success' && <List>{renderList()}</List>}
+    </Container>
+  );
+}

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

@@ -0,0 +1,48 @@
+import type { Token } from 'rango-sdk';
+
+export interface TokenWithBalance extends Token {
+  balance?: {
+    amount: string;
+    usdValue: string;
+  };
+  pin?: boolean;
+}
+
+export interface PropTypes {
+  list: TokenWithBalance[];
+  searchedFor?: string;
+  onChange: (token: TokenWithBalance) => void;
+  selectedBlockchain?: string;
+}
+
+export interface LoadingTokenListProps {
+  size: number;
+}
+
+export interface RenderDescProps {
+  name?: string | null;
+  address: string;
+  url: string;
+  token: TokenWithBalance;
+  customCssForTag: TagCSS;
+  customCssForTagTitle: TitleCSS;
+}
+
+type TagCSS = {
+  [x: string]:
+    | string
+    | {
+        $$color: string;
+      };
+  $$color: string;
+  backgroundColor: string;
+};
+type TitleCSS = {
+  [x: string]:
+    | string
+    | {
+        $$color: string;
+      };
+  $$color: string;
+  color: string;
+};

package/src/components/TokenList/index.ts

@@ -0,0 +1,2 @@
+export { TokenList } from './TokenList';
+export type { TokenWithBalance } from './TokenList.types';