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

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/HeaderButtons/WalletButton.tsx

@@ -14,7 +14,7 @@ import {
 } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
-  const { list } = useWalletList();
+  const { list } = useWalletList({});
   const connectedWallets = list.filter(
     (wallet) => wallet.state === 'connected'
   );

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,18 +1,33 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
-import type { WalletInfoWithExtra } from '../../types';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
-import { warn } from '@rango-dev/logging-core';
+import { debug } from '@rango-dev/logging-core';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
-import { useWalletList } from '../../hooks/useWalletList';
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
-import { StatefulConnectModal } from '../StatefulConnectModal';
+import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
+import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
+interface NamespacesModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
+
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const {
     type,
@@ -22,9 +37,11 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     showWalletButton,
     walletButtonDisabled,
   } = props;
-  const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
-  const { getWalletInfo, state } = useWallets();
+  const { connect, getWalletInfo, state } = useWallets();
+  const [namespacesModalState, setNamespacesModalState] =
+    useState<NamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
@@ -32,24 +49,87 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const walletInfo = walletType ? getWalletInfo(walletType) : null;
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
-  const { list } = useWalletList();
 
-  const handleWalletItemClick = () => {
-    if (!!walletType) {
-      const wallet = list.find((wallet) => wallet.type === walletType);
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
 
-      if (wallet) {
-        setSelectedWalletToConnect(wallet);
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleWalletItemClick = () => {
+    if (!!walletType && !!walletInfo) {
+      if (!!walletInfo.namespaces?.length) {
+        if (walletInfo.namespaces.length > 1) {
+          setNamespacesModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            availableNamespaces: walletInfo.namespaces,
+            singleNamespace: walletInfo.singleNamespace,
+          });
+        } else if (walletInfo.needsDerivationPath) {
+          setDerivationPathModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            namespace: walletInfo.namespaces[0],
+          });
+        } else {
+          connect(walletType).catch((error) => debug(error));
+        }
       } else {
-        warn(
-          new Error(
-            `It seems requested wallet to be connected is not available in the list. requested wallet: ${wallet}`
-          )
-        );
+        connect(walletType).catch((error) => debug(error));
       }
     }
   };
 
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    if (
+      !!walletInfo?.needsDerivationPath &&
+      walletInfo?.singleNamespace &&
+      selectedNamespaces[0] &&
+      walletType
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: walletType,
+        providerImage: walletInfo.img,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      connect(
+        namespacesModalState?.providerType as string,
+        undefined,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      ).catch((error) => debug(error));
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      connect(derivationPathModalState?.providerType, undefined, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]).catch((error) => debug(error));
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
@@ -68,11 +148,21 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
           />
         </WalletContainer>
       )}
-      <StatefulConnectModal
-        wallet={selectedWalletToConnect}
-        onClose={() => {
-          setSelectedWalletToConnect(undefined);
-        }}
+      <WalletNamespacesModal
+        open={!!namespacesModalState?.open}
+        onClose={handleCloseNamespaceModal}
+        onConfirm={handleConfirmNamespaces}
+        image={namespacesModalState?.providerImage}
+        availableNamespaces={namespacesModalState?.availableNamespaces}
+        singleNamespace={namespacesModalState?.singleNamespace}
+      />
+      <WalletDerivationPathModal
+        open={!!derivationPathModalState?.open}
+        selectedNamespace={derivationPathModalState?.namespace}
+        type={derivationPathModalState?.providerType}
+        image={derivationPathModalState?.providerImage}
+        onClose={handleCloseDerivationPathModal}
+        onConfirm={handleDerivationPathConfirm}
       />
     </>
   );

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 {

package/src/components/{WalletStatefulConnect/DerivationPath.tsx → WalletDerivationPathModal/WalletDerivationPathModal.tsx}

@@ -1,5 +1,5 @@
-import type { PropTypes } from './DerivationPath.types';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
+import type { PropTypes } from './WalletDerivationPathModal.types';
+import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import {
@@ -10,30 +10,43 @@ import {
   Select,
   TextField,
 } from '@rango-dev/ui';
+import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useEffect, useState } from 'react';
 
+import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import {
   LogoContainer,
   Spinner,
   WalletImageContainer,
-} from './ConnectStatus.styles';
-import {
-  CUSTOM_DERIVATION_PATH,
-  getDerivationPaths,
-} from './DerivationPath.helpers';
+} from '../WalletModal/WalletModalContent.styles';
+
 import {
   derivationPathInputStyles,
   InputLabel,
   InputsContainer,
-} from './DerivationPath.styles';
+} from './WalletDerivationPathModal.styles';
+
+const customDerivationPath: DerivationPath = {
+  id: 'custom',
+  label: 'Custom',
+  generateDerivationPath: (index: string) => index,
+};
+
+function getDerivationPaths(selectedNamespace?: Namespace) {
+  const selectedNamespaceDerivationPaths = selectedNamespace
+    ? namespaces[selectedNamespace].derivationPaths
+    : null;
+
+  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+    ? [...selectedNamespaceDerivationPaths, customDerivationPath]
+    : [];
+
+  return derivationPaths;
+}
 
-export function DerivationPath(props: PropTypes) {
-  const { onConfirm } = props;
-  const {
-    namespace: selectedNamespace,
-    providerImage: image,
-    providerType: type,
-  } = props.value;
+export function WalletDerivationPathModal(props: PropTypes) {
+  const { onClose, onConfirm, selectedNamespace, image, type, open } = props;
 
   const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
     string | null
@@ -41,7 +54,7 @@ export function DerivationPath(props: PropTypes) {
   const [derivationPathIndex, setDerivationPathIndex] = useState('0');
 
   const isCustomOptionSelected =
-    selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
+    selectedDerivationPathId === customDerivationPath.id;
 
   const derivationPaths = getDerivationPaths(selectedNamespace);
 
@@ -76,7 +89,12 @@ export function DerivationPath(props: PropTypes) {
   }, [selectedNamespace]);
 
   return (
-    <>
+    <WatermarkedModal
+      open={open}
+      onClose={onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       <Divider size={20} />
       <MessageBox
         type="info"
@@ -131,6 +149,6 @@ export function DerivationPath(props: PropTypes) {
         }>
         {i18n.t('Confirm')}
       </Button>
-    </>
+    </WatermarkedModal>
   );
 }

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.types.tsx

@@ -0,0 +1,10 @@
+import type { Namespace } from '@rango-dev/wallets-shared';
+
+export interface PropTypes {
+  open: boolean;
+  selectedNamespace?: Namespace;
+  type?: string;
+  image?: string;
+  onClose: () => void;
+  onConfirm: (path: string) => void;
+}

package/src/components/WalletDerivationPathModal/index.ts

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