@rango-dev/widget-embedded 0.31.1-next.2 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.31.1-next.2",
+  "version": "0.32.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,12 +25,12 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.36.1-next.0",
+    "@rango-dev/provider-all": "^0.36.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
     "@rango-dev/queue-manager-rango-preset": "^0.36.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.31.1-next.0",
-    "@rango-dev/ui": "^0.37.1-next.0",
+    "@rango-dev/signer-solana": "^0.31.0",
+    "@rango-dev/ui": "^0.38.0",
     "@rango-dev/wallets-react": "^0.22.0",
     "@rango-dev/wallets-shared": "^0.36.0",
     "bignumber.js": "^9.1.1",

package/src/components/AppRoutes.tsx

@@ -4,7 +4,9 @@ import { useRoutes } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
+import { AddCustomTokenPage } from '../pages/AddCustomTokenPage';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
+import { CustomTokensPage } from '../pages/CustomTokensPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
 import { LanguagePage } from '../pages/LanguagePage';
@@ -80,8 +82,36 @@ export function AppRoutes() {
           path: navigationRoutes.bridges,
           element: <LiquiditySourcePage sourceType="Bridges" />,
         },
+        {
+          path: navigationRoutes.customTokens,
+          children: [
+            {
+              index: true,
+              element: <CustomTokensPage />,
+            },
+            {
+              path: navigationRoutes.addCustomTokens,
+              children: [
+                {
+                  index: true,
+                  element: <AddCustomTokenPage />,
+                },
+                {
+                  path: navigationRoutes.blockchains,
+                  element: (
+                    <SelectBlockchainPage
+                      hideCategory={true}
+                      type="custom-token"
+                    />
+                  ),
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
+
     {
       path: navigationRoutes.swaps,
       children: [

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -2,10 +2,12 @@ import { ImageContainer, styled } from '@rango-dev/ui';
 
 import { ScrollableArea } from '../Layout';
 
-export const Container = styled('div', {
+export const BlockchainListContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
+  height: '100%',
+  justifyContent: 'center',
 });
 
 export const List = styled(ScrollableArea, {

package/src/components/BlockchainList/BlockchainList.tsx

@@ -14,11 +14,17 @@ import React, { useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
-import { Container, List } from './BlockchainList.styles';
+import { BlockchainListContainer, List } from './BlockchainList.styles';
 import { LoadingBlockchainList } from './LoadingBlockchainList';
 
 export function BlockchainList(props: PropTypes) {
-  const { list, searchedFor, onChange, blockchainCategory } = props;
+  const {
+    list,
+    searchedFor,
+    onChange,
+    blockchainCategory,
+    showTitle = true,
+  } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
   const { fetchStatus } = useAppStore();
 
@@ -31,13 +37,10 @@ export function BlockchainList(props: PropTypes) {
   const renderList = () => {
     if (!blockchains.length && !!searchedFor) {
       return (
-        <>
-          <Divider size={32} />
-          <NotFound
-            title={i18n.t('No results found')}
-            description={i18n.t('Try using different keywords')}
-          />
-        </>
+        <NotFound
+          title={i18n.t('No results found')}
+          description={i18n.t('Try using different keywords')}
+        />
       );
     }
     return (
@@ -61,13 +64,19 @@ export function BlockchainList(props: PropTypes) {
   };
 
   return (
-    <Container>
-      <Typography variant="label" size="large">
-        {i18n.t('Select Blockchain')}
-      </Typography>
-      <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingBlockchainList />}
-      {fetchStatus === 'success' && renderList()}
-    </Container>
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Blockchain')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+      <BlockchainListContainer>
+        {fetchStatus === 'loading' && <LoadingBlockchainList />}
+        {fetchStatus === 'success' && renderList()}
+      </BlockchainListContainer>
+    </>
   );
 }

package/src/components/BlockchainList/BlockchainList.types.ts

@@ -5,4 +5,5 @@ export interface PropTypes {
   searchedFor: string;
   blockchainCategory: string;
   onChange: (blockchain: BlockchainMeta) => void;
+  showTitle?: boolean;
 }

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts

@@ -0,0 +1,49 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const InputContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: '$40',
+  padding: '$4 $10',
+  borderRadius: '$sm',
+  cursor: 'pointer',
+  alignItems: 'center',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral500',
+    },
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'default',
+        '&:hover': {
+          borderColor: '$neutral300',
+          '& svg': {
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  '.title_typography': {
+    textTransform: 'capitalize',
+  },
+});
+
+export const FlexContainer = styled('div', {
+  display: 'flex',
+});

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx

@@ -0,0 +1,47 @@
+import type { PropTypes } from './BlockchainSelectorButton.types';
+
+import { ChevronRightIcon, Divider, Image, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  Container,
+  FlexContainer,
+  InputContainer,
+} from './BlockchainSelectorButton.styles';
+
+export function BlockchainSelectorButton(props: PropTypes) {
+  const { onClick, value, title, hasLogo, placeholder, disabled } = props;
+
+  return (
+    <Container>
+      <Typography size="large" variant="label">
+        {title}
+      </Typography>
+      <Divider size={10} />
+      <InputContainer
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}>
+        <FlexContainer>
+          {hasLogo && (
+            <>
+              <Image
+                src={value?.logo}
+                size={16}
+                useAsPlaceholder={!value?.logo}
+                type="circular"
+              />
+              <Divider size={4} direction="horizontal" />
+            </>
+          )}
+          <Typography
+            className="title_typography"
+            size="medium"
+            variant="label">
+            {value?.name || placeholder}
+          </Typography>
+        </FlexContainer>
+        <ChevronRightIcon size={12} color="black" />
+      </InputContainer>
+    </Container>
+  );
+}

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts

@@ -0,0 +1,11 @@
+export interface PropTypes {
+  onClick: () => void;
+  value?: {
+    name: string;
+    logo: string;
+  };
+  title: string;
+  placeholder: string;
+  hasLogo?: boolean;
+  disabled?: boolean;
+}

package/src/components/BlockchainSelectorButton/index.ts

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

package/src/components/CustomDestination/CustomDestination.tsx

@@ -16,8 +16,10 @@ import React, { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { getBlockchainDisplayNameFor } from '../../utils/meta';
-import { isValidAddress } from '../ConfirmWalletsModal/ConfirmWallets.helpers';
+import {
+  getBlockchainDisplayNameFor,
+  isValidTokenAddress,
+} from '../../utils/meta';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
@@ -44,7 +46,7 @@ export function CustomDestination(props: PropTypes) {
   const isFirefox = navigator?.userAgent.includes('Firefox');
   const isAddressChecked = open && !!customDestination && blockchain;
   const isAddressInvalid =
-    isAddressChecked && !isValidAddress(blockchain, customDestination);
+    isAddressChecked && !isValidTokenAddress(blockchain, customDestination);
   const handleClear = () => {
     setCustomDestination('');
   };

package/src/components/CustomTokenModal/CustomTokenModal.helpers.ts

@@ -0,0 +1,19 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export function generateExplorerLink(
+  address: string | null,
+  blockchain: BlockchainMeta
+): string {
+  // We don't have Cosmos explorer url in API.
+  if (blockchain.type === 'COSMOS') {
+    return '';
+  }
+
+  const explorerLinkPattern = blockchain.info?.addressUrl;
+
+  if (!explorerLinkPattern || !address) {
+    return '';
+  }
+
+  return explorerLinkPattern.replace('{wallet}', address);
+}

package/src/components/CustomTokenModal/CustomTokenModal.styles.ts

@@ -0,0 +1,57 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const StyledLink = styled('a', {
+  textDecoration: 'none',
+  color: '$colors$neutral700',
+  [`.${darkTheme} &`]: {
+    color: '$colors$neutral900',
+  },
+
+  '& svg': {
+    marginLeft: '$4',
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+
+  variants: {
+    hasHover: {
+      true: {
+        '&:hover': {
+          color: '$colors$secondary550',
+          [`.${darkTheme} &`]: {
+            color: '$colors$secondary500',
+          },
+          '& svg': {
+            color: '$colors$secondary550',
+            [`.${darkTheme} &`]: {
+              color: '$colors$secondary500',
+            },
+          },
+        },
+      },
+      false: {},
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  '& ._blockchain-name, & ._coin-source': {
+    color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral800',
+    },
+  },
+  '& ._coin-source-name, & ._custom-token-description': {
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+});

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -0,0 +1,92 @@
+import type { PropTypes } from './CustomTokenModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { generateExplorerLink } from './CustomTokenModal.helpers';
+import { Container, StyledLink } from './CustomTokenModal.styles';
+
+export function CustomTokenModal(props: PropTypes) {
+  const { open, onClose, token, onSubmitClick, blockchain } = props;
+
+  const explorerLink = generateExplorerLink(token.address, blockchain);
+
+  return (
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      container={getContainer()}>
+      <Container>
+        <Image src={token.image} size={45} type="circular" />
+        <Typography variant="title" size="medium">
+          {token.name}
+        </Typography>
+        <Typography variant="body" size="small" className="_blockchain-name">
+          {blockchain.displayName}
+        </Typography>
+        <Divider size={4} />
+
+        <Typography variant="body" size="medium">
+          {!!explorerLink ? (
+            <StyledLink
+              hasHover
+              href={explorerLink}
+              target="_blank"
+              rel="nofollow noreferrer">
+              {token.address}
+              <ExternalLinkIcon size={12} color="gray" />
+            </StyledLink>
+          ) : (
+            <StyledLink>{token.address}</StyledLink>
+          )}
+        </Typography>
+
+        <Divider size={4} />
+
+        {token.coinSource && (
+          <Typography className="_coin-source" variant="body" size="xsmall">
+            {i18n.t('via')}{' '}
+            <Typography
+              className="_coin-source-name"
+              variant="body"
+              size="xsmall">
+              {token.coinSource}
+            </Typography>
+          </Typography>
+        )}
+        <Divider size={'32'} />
+
+        <Typography
+          size="medium"
+          variant="body"
+          className="_custom-token-description">
+          {i18n.t(
+            `This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade.`
+          )}
+        </Typography>
+      </Container>
+      <Divider size={40} />
+      <Divider size={10} />
+
+      <Button
+        variant="contained"
+        size="large"
+        type="primary"
+        fullWidth
+        onClick={onSubmitClick}>
+        {i18n.t('Import')}
+      </Button>
+    </WatermarkedModal>
+  );
+}

package/src/components/CustomTokenModal/CustomTokenModal.types.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onSubmitClick: () => void;
+  token: Token;
+  blockchain: BlockchainMeta;
+};

package/src/components/CustomTokenModal/index.ts

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

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

@@ -53,6 +53,7 @@ export const Container = styled('div', {
   flexDirection: 'column',
   flexGrow: 1,
   overflow: 'hidden',
+  justifyContent: 'center',
 });
 
 export const Title = styled('div', {

package/src/components/TokenList/TokenList.tsx

@@ -92,7 +92,14 @@ const renderDesc = (props: RenderDescProps) => {
 };
 
 export function TokenList(props: PropTypes) {
-  const { list, searchedFor = '', onChange, selectedBlockchain } = props;
+  const {
+    list,
+    searchedFor = '',
+    onChange,
+    selectedBlockchain,
+    showTitle = true,
+    action,
+  } = props;
 
   const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
@@ -118,24 +125,48 @@ export function TokenList(props: PropTypes) {
     setTokens(list.slice(0, PAGE_SIZE));
   }, [list.length, selectedBlockchain, balanceKey]);
 
-  const renderList = () => {
-    if (!tokens.length && !!searchedFor) {
+  const endRenderer = (token: Token) => {
+    const tokenBalance = formatBalance(getBalanceFor(token));
+
+    if (action) {
+      return action(token);
+    }
+    if (loadingWallet) {
       return (
-        <>
-          <Divider size={32} />
-          <NotFound
-            title={i18n.t('No results found')}
-            description={i18n.t('Try using different keywords')}
-          />
-        </>
+        <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
         endReached={hasNextPage ? loadNextPage : undefined}
         itemContent={(index) => {
           const token = tokens[index];
-          const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
@@ -172,15 +203,16 @@ export function TokenList(props: PropTypes) {
                 key={`${token.symbol}${token.address}`}
                 id={`${token.symbol}${token.address}`}
                 hasDivider
-                onClick={() => onChange(tokens[index])}
+                onClick={() => onChange && onChange(tokens[index])}
                 start={
                   <ImageSection>
                     <Image src={token.image} size={30} />
-                    {isTokenPinned(token, props.type) && (
-                      <Pin>
-                        <PinIcon size={12} color="gray" />
-                      </Pin>
-                    )}
+                    {props.type !== 'custom-token' &&
+                      isTokenPinned(token, props.type) && (
+                        <Pin>
+                          <PinIcon size={12} color="gray" />
+                        </Pin>
+                      )}
                   </ImageSection>
                 }
                 title={
@@ -219,32 +251,7 @@ export function TokenList(props: PropTypes) {
                       })
                     : token.name || undefined
                 }
-                end={
-                  loadingWallet ? (
-                    <End>
-                      <Skeleton variant="text" size="large" width={70} />
-                      <Divider size={4} />
-                      <Skeleton variant="text" size="medium" width={50} />
-                    </End>
-                  ) : (
-                    tokenBalance && (
-                      <BalanceContainer>
-                        <TokenBalance variant="title" size="small">
-                          {tokenBalance.amount}
-                        </TokenBalance>
-                        <div />
-                        {tokenBalance.usdValue && (
-                          <Typography
-                            variant="body"
-                            className={usdValueStyles()}
-                            size="xsmall">
-                            {`$${tokenBalance.usdValue}`}
-                          </Typography>
-                        )}
-                      </BalanceContainer>
-                    )
-                  )
-                }
+                end={endRenderer(token)}
               />
             </div>
           );
@@ -256,13 +263,31 @@ export function TokenList(props: PropTypes) {
   };
 
   return (
-    <Container>
-      <Typography variant="label" size="large">
-        {i18n.t('Select Token')}
-      </Typography>
-      <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List as="ul">{renderList()}</List>}
-    </Container>
+    <>
+      {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 ? (
+            <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

@@ -1,11 +1,14 @@
 import type { Token } from 'rango-sdk';
+import type { ReactElement } from 'react';
 
 export interface PropTypes {
   list: Token[];
   searchedFor?: string;
-  onChange: (token: Token) => void;
+  onChange?: (token: Token) => void;
   selectedBlockchain?: string;
-  type: 'source' | 'destination';
+  type: 'source' | 'destination' | 'custom-token';
+  action?: (token: Token) => ReactElement;
+  showTitle?: boolean;
 }
 
 export interface LoadingTokenListProps {