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

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';

package/src/components/UpdateUrl.tsx

@@ -4,10 +4,11 @@ import {
   useLocation,
   useSearchParams,
 } from 'react-router-dom';
+
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
-import { SearchParams } from '../constants/searchParams';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
 import { searchParamsToToken } from '../utils/routing';
 
@@ -17,13 +18,13 @@ export function UpdateUrl() {
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
+  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
+  const toBlockchain = useBestRouteStore.use.toBlockchain();
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
   const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
   const setToToken = useBestRouteStore.use.setToToken();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
@@ -41,7 +42,9 @@ export function UpdateUrl() {
     searchParamsRef.current = params;
     const requestId =
       location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
-    if (requestId) setSelectedSwap(requestId);
+    if (requestId) {
+      setSelectedSwap(requestId);
+    }
   }, []);
 
   useEffect(() => {
@@ -59,12 +62,14 @@ export function UpdateUrl() {
         fromAmount =
           searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
-        if (location.state === 'redirect') return;
-        fromChainString = fromChain?.name || '';
+        if (location.state === 'redirect') {
+          return;
+        }
+        fromChainString = fromBlockchain?.name || '';
         fromTokenString =
           (fromToken?.symbol || '') +
           (fromToken?.address ? `--${fromToken?.address}` : '');
-        toChainString = toChain?.name || '';
+        toChainString = toBlockchain?.name || '';
         toTokenString =
           (toToken?.symbol || '') +
           (toToken?.address ? `--${toToken?.address}` : '');
@@ -88,7 +93,14 @@ export function UpdateUrl() {
       );
     }
     firstRender.current = false;
-  }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
 
   useEffect(() => {
     if (loadingStatus === 'success') {
@@ -97,31 +109,37 @@ export function UpdateUrl() {
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
       const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
       const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromChain = blockchains.find(
+      const fromBlockchain = blockchains.find(
         (blockchain) => blockchain.name === fromChainString
       );
       const fromToken = searchParamsToToken(
         tokens,
         fromTokenString,
-        fromChain || null
+        fromBlockchain || null
       );
-      const toChain = blockchains.find(
+      const toBlockchain = blockchains.find(
         (blockchain) => blockchain.name === toChainString
       );
       const toToken = searchParamsToToken(
         tokens,
         toTokenString,
-        toChain || null
+        toBlockchain || null
       );
-      if (!!fromChain) {
-        setFromChain(fromChain);
-        if (!!fromToken) setFromToken(fromToken);
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken(fromToken);
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken(toToken);
+        }
       }
-      if (!!toChain) {
-        setToChain(toChain);
-        if (!!toToken) setToToken(toToken);
+      if (fromAmount) {
+        setInputAmount(fromAmount);
       }
-      if (fromAmount) setInputAmount(fromAmount);
     }
   }, [loadingStatus]);
 

package/src/components/WalletModal/WalletModal.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './WalletModal.types';
+
+import { Divider, Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { ModalContent } from './WalletModalContent';
+
+export function WalletModal(props: PropTypes) {
+  const { open, onClose, ...otherProps } = props;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      <ModalContent {...otherProps} />
+      <Divider direction="vertical" size={32} />
+    </Modal>
+  );
+}

package/src/components/WalletModal/WalletModal.types.ts

@@ -0,0 +1,11 @@
+import type { WalletState } from '@rango-dev/ui';
+
+export interface PropTypes {
+  open: boolean;
+  onClose: () => void;
+  image: string;
+  state: WalletState;
+  error?: string;
+}
+
+export type ModalContentProps = Pick<PropTypes, 'state' | 'error' | 'image'>;

package/src/components/WalletModal/WalletModalContent.styles.ts

@@ -0,0 +1,44 @@
+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,
+});
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});

package/src/components/WalletModal/WalletModalContent.tsx

@@ -0,0 +1,54 @@
+import type { ModalContentProps } from './WalletModal.types';
+
+import { i18n } from '@lingui/core';
+import { Image, MessageBox, WalletState } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from './WalletModalContent.styles';
+
+export function ModalContent(props: ModalContentProps) {
+  const { state, image, error } = props;
+  if (state === WalletState.CONNECTED) {
+    return (
+      <MessageBox
+        type="success"
+        title={i18n.t('Wallet Connected')}
+        description={i18n.t(
+          'Your wallet is connected, you can use it to swap.'
+        )}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <MessageBox
+        type="error"
+        title={i18n.t('Failed to Connect')}
+        description={
+          error || i18n.t('Your wallet is not connected. Please try again.')
+        }
+      />
+    );
+  }
+
+  return (
+    <MessageBox
+      type="loading"
+      title={i18n.t('Connecting to your wallet')}
+      description={i18n.t('Click connect in your wallet popup.')}
+      icon={
+        <LogoContainer>
+          <WalletImageContainer>
+            <Image src={image} size={45} />
+          </WalletImageContainer>
+          <Spinner />
+        </LogoContainer>
+      }
+    />
+  );
+}