@rango-dev/widget-embedded 0.29.1-next.9 → 0.30.1-next.0

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -1,6 +1,6 @@
 import type { GetStep } from '../SwapDetailsAlerts';
 import type { Step, StepDetailsProps } from '@rango-dev/ui';
-import type { PendingSwapStep } from 'rango-types';
+import type { PendingSwapStep, SwapperType } from 'rango-types';
 
 import React from 'react';
 
@@ -46,7 +46,7 @@ export const getSteps = ({
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
-          realValue: amountToConvert,
+          realValue: amountToConvert ?? '',
         },
       },
       to: {
@@ -63,13 +63,13 @@ export const getSteps = ({
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
           realValue:
-            step.outputAmount || step.expectedOutputAmountHumanReadable,
+            step.outputAmount || step.expectedOutputAmountHumanReadable || '',
         },
       },
       swapper: {
-        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        displayName: getSwapperDisplayName(step.swapperId, swappers) ?? '',
         image: step.swapperLogo ?? '',
-        type: step.swapperType,
+        type: step.swapperType as SwapperType,
       },
       internalSwaps: step.internalSwaps
         ? step.internalSwaps.map((internalSwap) => {
@@ -95,12 +95,10 @@ export const getSteps = ({
                 },
               },
               swapper: {
-                displayName: getSwapperDisplayName(
-                  internalSwap.swapperId,
-                  swappers
-                ),
+                displayName:
+                  getSwapperDisplayName(internalSwap.swapperId, swappers) ?? '',
                 image: internalSwap.swapperLogo ?? '',
-                type: internalSwap.swapperType,
+                type: internalSwap.swapperType as SwapperType,
               },
             };
           })

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -11,6 +11,16 @@ export const Container = styled('div', {
 
 export const HeaderDetails = styled('div', {
   width: '100%',
+  '& ._icon-button': {
+    '&:hover': {
+      '& svg': {
+        color: '$secondary550',
+        [`.${darkTheme} &`]: {
+          color: '$secondary500',
+        },
+      },
+    },
+  },
 });
 
 export const StepsList = styled(ScrollableArea, {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -11,6 +11,7 @@ import {
   Button,
   CopyIcon,
   Divider,
+  DoneIcon,
   IconButton,
   QuoteCost,
   RangoExplorerIcon,
@@ -42,7 +43,6 @@ import { useQuoteStore } from '../../store/quote';
 import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import {
-  formatTooltipNumbers,
   numberToString,
   roundedSecondsToString,
   totalArrivalTime,
@@ -89,7 +89,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const retry = useQuoteStore.use.retry();
   const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
-  const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
@@ -206,14 +206,14 @@ export function SwapDetails(props: SwapDetailsProps) {
   );
 
   const realOutputUsdValue = outputAmount
-    ? formatTooltipNumbers(
-        new BigNumber(outputAmount).multipliedBy(lastStep.toUsdPrice || 0)
-      )
+    ? new BigNumber(outputAmount)
+        .multipliedBy(lastStep.toUsdPrice || 0)
+        .toString()
     : '';
 
-  const realInputUsdValue = formatTooltipNumbers(
-    new BigNumber(swap.inputAmount).multipliedBy(firstStep.fromUsdPrice || 0)
-  );
+  const realInputUsdValue = new BigNumber(swap.inputAmount)
+    .multipliedBy(firstStep.fromUsdPrice || 0)
+    .toString();
 
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
@@ -272,7 +272,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   return (
     <Layout
       header={{
-        title: i18n.t('Swap and Bridge'),
+        title: i18n.t('Swap Details'),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -319,11 +319,28 @@ export function SwapDetails(props: SwapDetailsProps) {
               <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
-              <IconButton
-                variant="ghost"
-                onClick={handleCopy.bind(null, requestId || '')}>
-                <CopyIcon size={16} color="gray" />
-              </IconButton>
+              <Tooltip
+                container={getContainer()}
+                content={
+                  isCopied
+                    ? i18n.t('Copied To Clipboard')
+                    : i18n.t('Copy Request ID')
+                }
+                open={isCopied || undefined}
+                side="bottom"
+                alignOffset={-16}
+                align="end">
+                <IconButton
+                  variant="ghost"
+                  onClick={handleCopy.bind(null, requestId || '')}>
+                  {isCopied ? (
+                    <DoneIcon size={16} color="secondary" />
+                  ) : (
+                    <CopyIcon size={16} color="gray" />
+                  )}
+                </IconButton>
+              </Tooltip>
+
               <StyledLink
                 target="_blank"
                 href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
@@ -338,7 +355,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
-              {`${i18n.t(swap.finishTime ? 'Finished at' : 'Created at')}:`}
+              {swap.finishTime ? i18n.t('Finished at') : i18n.t('Created at')}
             </Typography>
             <Typography variant="label" size="small" color="neutral700">
               {swapDate}
@@ -386,7 +403,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 ),
                 usdValue: outputUsdValue,
                 realUsdValue: realOutputUsdValue,
-                realValue: outputAmount,
+                realValue: outputAmount || '',
               },
               token: {
                 displayName: steps[numberOfSteps - 1].to.token.displayName,
@@ -458,7 +475,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         realUsdValue={realOutputUsdValue}
-        realValue={formatTooltipNumbers(outputAmount)}
+        realValue={outputAmount || ''}
         percentageChange={numberToString(
           percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,

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

@@ -8,17 +8,26 @@ import React, { useState } from 'react';
 
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
+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,
@@ -31,6 +40,8 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   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))
@@ -39,6 +50,59 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
 
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  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} />
@@ -56,6 +120,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             onClick={async () => {
               if (walletInfo.namespaces) {
                 setNamespacesModalState({
+                  open: true,
                   providerType: walletType,
                   providerImage: walletInfo.img,
                   availableNamespaces: walletInfo.namespaces,
@@ -69,20 +134,21 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
         </WalletContainer>
       )}
       <WalletNamespacesModal
-        open={!!namespacesModalState}
-        onClose={() => setNamespacesModalState(null)}
-        onConfirm={(namespaces) => {
-          connect(
-            namespacesModalState?.providerType as string,
-            undefined,
-            namespaces
-          ).catch((error) => debug(error));
-          setNamespacesModalState(null);
-        }}
+        open={!!namespacesModalState?.open}
+        onClose={handleCloseNamespaceModal}
+        onConfirm={handleConfirmNamespaces}
         image={namespacesModalState?.providerImage}
-        namespaces={namespacesModalState?.availableNamespaces}
+        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.tsx

@@ -110,7 +110,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length]);
+  }, [list.length, selectedBlockchain]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {
@@ -136,17 +136,17 @@ export function TokenList(props: PropTypes) {
           ) as BlockchainMeta;
           const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
-            $$color: colors.main250,
+            $$color: colors.main150,
             [`.${darkTheme} &`]: {
-              $$color: colors.main850,
+              $$color: colors.main750,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: colors.main600,
+            $$color: colors.main750,
             [`.${darkTheme} &`]: {
-              $$color: colors.main200,
+              $$color: colors.main150,
             },
             color: '$$color',
           };

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.styles.ts

@@ -0,0 +1,17 @@
+import { styled, Typography } from '@rango-dev/ui';
+
+export const InputsContainer = styled('div', {
+  paddingTop: '$30',
+  paddingBottom: '$30',
+  zIndex: 10, // This property is added to solve inconsistency between Select child of this component and subsequent button
+});
+
+export const InputLabel = styled(Typography, {
+  paddingLeft: '$10',
+});
+
+export const derivationPathInputStyles = {
+  height: '$40',
+  backgroundColor: '$neutral200',
+  borderRadius: '$sm',
+};

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.tsx

@@ -0,0 +1,154 @@
+import type { PropTypes } from './WalletDerivationPathModal.types';
+import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  Image,
+  MessageBox,
+  Select,
+  TextField,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { WIDGET_UI_ID } from '../../constants';
+import { namespaces } from '../../constants/namespaces';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from '../WalletModal/WalletModalContent.styles';
+
+import {
+  derivationPathInputStyles,
+  InputLabel,
+  InputsContainer,
+} 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 WalletDerivationPathModal(props: PropTypes) {
+  const { onClose, onConfirm, selectedNamespace, image, type, open } = props;
+
+  const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
+    string | null
+  >(null);
+  const [derivationPathIndex, setDerivationPathIndex] = useState('0');
+
+  const isCustomOptionSelected =
+    selectedDerivationPathId === customDerivationPath.id;
+
+  const derivationPaths = getDerivationPaths(selectedNamespace);
+
+  const handleDerivationPathItemClick = ({ value }: { value: string }) => {
+    const selectedDerivationPath = derivationPaths?.find(
+      (derivationPath) => derivationPath.id === value
+    );
+
+    if (selectedDerivationPath) {
+      setSelectedDerivationPathId(selectedDerivationPath.id);
+    }
+  };
+
+  const handleConfirm = () => {
+    const selectedDerivationPath = derivationPaths.find(
+      (derivationPath) => derivationPath.id === selectedDerivationPathId
+    );
+    if (selectedDerivationPath) {
+      onConfirm(
+        selectedDerivationPath.generateDerivationPath(derivationPathIndex)
+      );
+    } else {
+      // Unreachable code
+      throw new Error('selectedDerivationPath can not be undefined');
+    }
+  };
+
+  useEffect(() => {
+    setSelectedDerivationPathId(
+      getDerivationPaths(selectedNamespace)[0]?.id || null
+    );
+  }, [selectedNamespace]);
+
+  return (
+    <WatermarkedModal
+      open={open}
+      onClose={onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
+      <Divider size={20} />
+      <MessageBox
+        type="info"
+        title={i18n.t('Select Derivation Path')}
+        description={i18n.t(
+          `In order to connect to ${type}, you must first select a Derivation Path`
+        )}
+        icon={
+          <LogoContainer>
+            <WalletImageContainer>
+              <Image src={image} size={45} />
+            </WalletImageContainer>
+            <Spinner />
+          </LogoContainer>
+        }
+      />
+
+      <InputsContainer>
+        <InputLabel variant="body" size="xsmall" color="$neutral600">
+          {i18n.t('Choose Derivation Path Template')}
+        </InputLabel>
+        <Select
+          value={selectedDerivationPathId || ''}
+          options={derivationPaths.map((derivationPath) => ({
+            value: derivationPath.id,
+            label: derivationPath.label,
+          }))}
+          variant="filled"
+          handleItemClick={handleDerivationPathItemClick}
+          styles={{ trigger: derivationPathInputStyles }}
+        />
+        <Divider size={20} />
+        <InputLabel variant="body" size="xsmall" color="$neutral600">
+          {isCustomOptionSelected
+            ? i18n.t('Enter Path')
+            : i18n.t('Enter Index')}
+        </InputLabel>
+        <TextField
+          type={isCustomOptionSelected ? 'text' : 'number'}
+          variant="contained"
+          value={derivationPathIndex}
+          onChange={(event) => setDerivationPathIndex(event.target.value)}
+          style={derivationPathInputStyles}
+        />
+      </InputsContainer>
+
+      <Button
+        type="primary"
+        onClick={handleConfirm}
+        disabled={
+          !derivationPaths || !selectedDerivationPathId || !derivationPathIndex
+        }>
+        {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';

package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -6,16 +6,17 @@ import { i18n } from '@lingui/core';
 import {
   Button,
   Checkbox,
+  Divider,
   Image,
   ListItemButton,
   MessageBox,
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { namespaceMainBlockchain } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
+import { namespaces } from '../../constants/namespaces';
 import { useAppStore } from '../../store/AppStore';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -35,7 +36,7 @@ const getBlockchainLogo = (
 };
 
 export function WalletNamespacesModal(props: PropTypes) {
-  const { singleNamespace, namespaces } = props;
+  const { singleNamespace, availableNamespaces } = props;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
@@ -43,14 +44,15 @@ export function WalletNamespacesModal(props: PropTypes) {
 
   const namespacesInfo = useMemo(
     () =>
-      namespaces?.map((namespace) => ({
+      availableNamespaces?.map((namespace) => ({
         name: namespace,
         logo: getBlockchainLogo(
           blockchains,
-          namespaceMainBlockchain[namespace]
+          namespaces[namespace].mainBlockchain
         ),
+        title: namespaces[namespace].title,
       })),
-    [namespaces]
+    [availableNamespaces]
   );
 
   const onSelect = (namespace: Namespace) => {
@@ -80,6 +82,7 @@ export function WalletNamespacesModal(props: PropTypes) {
       container={
         document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
       }>
+      <Divider size={20} />
       <MessageBox
         type="info"
         title={i18n.t('Select chain types')}
@@ -102,7 +105,7 @@ export function WalletNamespacesModal(props: PropTypes) {
               <ListItemButton
                 key={namespaceInfoItem.name}
                 id={namespaceInfoItem.name}
-                title={namespaceInfoItem.name}
+                title={namespaceInfoItem.title}
                 hasDivider
                 style={{ height: 60 }}
                 onClick={() => onSelect(namespaceInfoItem.name)}

package/src/components/WalletNamespacesModal/WalletNamespacesModal.types.tsx

@@ -5,6 +5,6 @@ export interface PropTypes {
   image?: string;
   onClose: () => void;
   onConfirm: (namespaces: Namespace[]) => void;
-  namespaces?: Namespace[];
+  availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }

package/src/constants/namespaces.ts

@@ -0,0 +1,62 @@
+import type { DerivationPath } from '@rango-dev/wallets-shared';
+
+import { Namespace } from '@rango-dev/wallets-shared';
+
+export const namespaces: Record<
+  Namespace,
+  { mainBlockchain: string; title: string; derivationPaths?: DerivationPath[] }
+> = {
+  [Namespace.Evm]: {
+    mainBlockchain: 'ETH',
+    title: 'Ethereum',
+    derivationPaths: [
+      {
+        id: 'metamask',
+        label: `Metamask (m/44'/60'/0'/0/index)`,
+        generateDerivationPath: (index: string) => `44'/60'/0'/0/${index}`,
+      },
+      {
+        id: 'ledgerLive',
+        label: `LedgerLive (m/44'/60'/index'/0/0)`,
+        generateDerivationPath: (index: string) => `44'/60'/${index}'/0/0`,
+      },
+      {
+        id: 'legacy',
+        label: `Legacy (m/44'/60'/0'/index)`,
+        generateDerivationPath: (index: string) => `44'/60'/0'/${index}`,
+      },
+    ],
+  },
+  [Namespace.Solana]: {
+    mainBlockchain: 'SOLANA',
+    title: 'Solana',
+    derivationPaths: [
+      {
+        id: `(m/44'/501'/index')`,
+        label: `(m/44'/501'/index')`,
+        generateDerivationPath: (index: string) => `44'/501'/${index}'`,
+      },
+      {
+        id: `(m/44'/501'/0'/index)`,
+        label: `(m/44'/501'/0'/index)`,
+        generateDerivationPath: (index: string) => `44'/501'/0'/${index}`,
+      },
+    ],
+  },
+  [Namespace.Cosmos]: {
+    mainBlockchain: 'COSMOS',
+    title: 'Cosmos',
+  },
+  [Namespace.Utxo]: {
+    mainBlockchain: 'BTC',
+    title: 'Utxo',
+  },
+  [Namespace.Starknet]: {
+    title: 'Starknet',
+    mainBlockchain: 'STARKNET',
+  },
+  [Namespace.Tron]: {
+    title: 'Tron',
+    mainBlockchain: 'TRON',
+  },
+};