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

package/src/components/Quote/QuoteTrigger .tsx

@@ -0,0 +1,215 @@
+import type { QuoteTriggerImagesProps, QuoteTriggerProps } from './Quote.types';
+
+import { i18n } from '@lingui/core';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Divider,
+  Image,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { getContainer } from '../../utils/common';
+import { getUniqueBlockchains } from '../../utils/quote';
+
+import {
+  IconContainer,
+  ImageContainer,
+  MoreStep,
+  rowStyles,
+  Trigger,
+} from './Quote.styles';
+
+const MAX_STEPS = 4;
+const MAX_BLOCKCHAINS = 6;
+const MIN_WIDTH_WINDOW = 375;
+
+const ImageComponent = (props: QuoteTriggerImagesProps) => {
+  const tooltipContainer = getContainer();
+  const { content, src, className, open, state } = props;
+  return (
+    <Tooltip
+      container={tooltipContainer}
+      side="bottom"
+      sideOffset={4}
+      open={open}
+      content={content}>
+      <ImageContainer className={className} state={state}>
+        <Image src={src} size={16} />
+      </ImageContainer>
+    </Tooltip>
+  );
+};
+
+export function QuoteTrigger(props: QuoteTriggerProps) {
+  const { quoteRef, recommended, setExpanded, steps, expanded } = props;
+  const tooltipContainer = getContainer();
+  const numberOfSteps = steps.length;
+  const blockchains = getUniqueBlockchains(steps);
+  const [isMobile, setIsMobile] = useState(false);
+
+  //choose the screen size
+  const handleResize = () => {
+    if (window.innerWidth < MIN_WIDTH_WINDOW) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  return (
+    <Trigger
+      ref={(ref) => (quoteRef.current = ref)}
+      recommended={recommended}
+      onClick={() => setExpanded((prevState) => !prevState)}>
+      <div className={rowStyles()}>
+        <Typography variant="body" size="xsmall">
+          {i18n.t('Via:')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        {steps.map((step, index) => {
+          const key = `item-${index}`;
+          const arrow = (
+            <IconContainer>
+              <ChevronRightIcon size={12} color="black" />
+            </IconContainer>
+          );
+
+          return isMobile ? (
+            <>
+              <ImageComponent
+                content={step.swapper.displayName}
+                src={step.swapper.image}
+                state={step.state}
+              />
+              {index !== numberOfSteps - 1 && <>{arrow}</>}
+            </>
+          ) : (
+            <React.Fragment key={key}>
+              {numberOfSteps <= MAX_STEPS ||
+              (numberOfSteps > MAX_STEPS && index < MAX_STEPS - 1) ? (
+                <>
+                  <ImageComponent
+                    content={step.swapper.displayName}
+                    src={step.swapper.image}
+                    state={step.state}
+                  />
+                  {index !== numberOfSteps - 1 && <>{arrow}</>}
+                </>
+              ) : (
+                index === MAX_STEPS - 1 && (
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    align="right"
+                    sideOffset={4}
+                    content={
+                      <div className={rowStyles()}>
+                        {arrow}
+                        {steps.map((step, i) => {
+                          const key = `image-${i}`;
+                          return (
+                            i >= index && (
+                              <React.Fragment key={key}>
+                                <ImageComponent
+                                  content={step.swapper.displayName}
+                                  src={step.swapper.image}
+                                  state={step.state}
+                                  open={false}
+                                />
+                                {i !== numberOfSteps - 1 && <>{arrow}</>}
+                              </React.Fragment>
+                            )
+                          );
+                        })}
+                      </div>
+                    }>
+                    <MoreStep
+                      state={
+                        steps.find(
+                          (step, i) =>
+                            i >= index &&
+                            (step.state === 'error' || step.state === 'warning')
+                        )?.state
+                      }>
+                      <Typography size="xsmall" variant="body">
+                        +{numberOfSteps - index}
+                      </Typography>
+                    </MoreStep>
+                  </Tooltip>
+                )
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className={rowStyles()}>
+        <div className="blockchains_section">
+          <div className={rowStyles()}>
+            <Typography variant="body" size="xsmall">
+              {i18n.t('Chains:')}
+            </Typography>
+            <Divider direction="horizontal" size={4} />
+            {blockchains.map((blockchain, index) => (
+              <>
+                {blockchains.length <= MAX_BLOCKCHAINS ||
+                (blockchains.length > MAX_BLOCKCHAINS &&
+                  index < MAX_BLOCKCHAINS - 1) ? (
+                  <ImageComponent
+                    key={blockchain.displayName}
+                    content={''}
+                    src={blockchain.image}
+                    open={false}
+                    className={index !== 0 ? 'blockchainImage' : ''}
+                  />
+                ) : (
+                  index === MAX_BLOCKCHAINS - 1 && (
+                    <Tooltip
+                      container={tooltipContainer}
+                      side="bottom"
+                      align="right"
+                      sideOffset={4}
+                      content={
+                        <div className={rowStyles()}>
+                          {blockchains.map(
+                            (chain, i) =>
+                              i >= index && (
+                                <ImageComponent
+                                  key={chain.displayName}
+                                  content={''}
+                                  src={chain.image}
+                                  open={false}
+                                  className={i > index ? 'blockchainImage' : ''}
+                                />
+                              )
+                          )}
+                        </div>
+                      }>
+                      <MoreStep className={'blockchainImage'}>
+                        <Typography size="xsmall" variant="body">
+                          +{blockchains.length - index}
+                        </Typography>
+                      </MoreStep>
+                    </Tooltip>
+                  )
+                )}
+              </>
+            ))}
+
+            <Divider direction="horizontal" size={32} />
+          </div>
+        </div>
+
+        <IconContainer orientation={expanded ? 'up' : 'down'}>
+          <ChevronDownIcon size={12} color="black" />
+        </IconContainer>
+      </div>
+    </Trigger>
+  );
+}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -2,7 +2,6 @@ import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
-  paddingTop: '$10',
 });
 
 export const Flex = styled('div', {

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -1,10 +1,5 @@
 import { styled } from '@rango-dev/ui';
 
-export const SettingsContainer = styled('div', {
-  height: '100%',
-  overflow: 'hidden',
-});
-
 export const LiquiditySourceList = styled('ul', {
   padding: '$15 $5 0',
   margin: 0,

package/src/components/SettingsContainer/index.ts

@@ -1,5 +1,4 @@
 export {
-  SettingsContainer,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,

package/src/components/Slippage/Slippage.tsx

@@ -72,12 +72,12 @@ export function Slippage() {
           value={customSlippage || ''}
           color="dark"
           onChange={(event) => {
-            const parsedValue = parseFloat(event.target.value);
-            if (
-              !parsedValue ||
-              (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE)
-            ) {
+            const value = event.target.value;
+            const parsedValue = parseFloat(value);
+            if (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE) {
               setCustomSlippage(parsedValue);
+            } else {
+              setCustomSlippage(null);
             }
           }}
           suffix={

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -15,7 +15,7 @@ export function SlippageTooltipContent() {
         <br />
         <b>{i18n.t('Warning')}</b>:
         {i18n.t(
-          'This setting is applied per step, e.g. 1Inch, Thorchain, etc. and only that step will be reverted, not the whole transaction'
+          'This setting is applied per step (e.g. 1Inch, Thorchain, etc) which means only the step will be reverted, not the whole transaction.'
         )}
       </Typography>
     </SlippageTooltipContainer>

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -1,13 +1,7 @@
 import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
 
 import { i18n } from '@lingui/core';
-import {
-  CopyIcon,
-  IconButton,
-  NotFound,
-  Skeleton,
-  Typography,
-} from '@rango-dev/ui';
+import { Divider, NotFound, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -16,6 +10,7 @@ import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
 import {
   Container,
+  datePlaceholderStyles,
   HeaderDetails,
   PlaceholderContainer,
   requestIdStyles,
@@ -26,7 +21,6 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
   return (
     <Layout
-      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         suffix: <SuffixContainer />,
@@ -42,14 +36,19 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
-                <IconButton variant="ghost">
-                  <CopyIcon size={16} color="gray" />
-                </IconButton>
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
+                <Divider direction="horizontal" size={4} />
+                <Skeleton width={16} height={16} variant="rectangular" />
               </div>
             </div>
             <div className={rowStyles()}>
-              <Typography variant="label" size="large" color="neutral700">
-                {`${i18n.t('Created at')}:`}
+              <Typography
+                className={datePlaceholderStyles()}
+                variant="label"
+                size="large"
+                color="neutral700">
+                <Skeleton width={60} height={10} variant="rounded" />
               </Typography>
               <Typography variant="label" size="small" color="neutral700">
                 <Skeleton width={60} height={10} variant="rounded" />

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

@@ -8,7 +8,10 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getBlockchainShortNameFor } from '../../utils/meta';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
@@ -16,7 +19,12 @@ import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 export const RESET_INTERVAL = 2_000;
 export const SECONDS = 60;
 
-export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
+export const getSteps = ({
+  swap,
+  blockchains,
+  swappers,
+  ...args
+}: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
@@ -58,7 +66,39 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             step.outputAmount || step.expectedOutputAmountHumanReadable,
         },
       },
-      swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
+      swapper: {
+        displayName: getSwapperDisplayName(step.swapperId, swappers),
+        image: step.swapperLogo ?? '',
+        type: step.swapperType,
+      },
+      internalSwaps: step.internalSwaps
+        ? step.internalSwaps.map((internalSwap) => {
+            return {
+              from: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.fromBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              to: {
+                blockchain:
+                  getBlockchainShortNameFor(
+                    internalSwap.toBlockchain,
+                    blockchains
+                  ) ?? '',
+              },
+              swapper: {
+                displayName: getSwapperDisplayName(
+                  internalSwap.swapperId,
+                  swappers
+                ),
+                image: internalSwap.swapperLogo ?? '',
+                type: internalSwap.swapperType,
+              },
+            };
+          })
+        : [],
       alerts: (
         <SwapDetailsAlerts
           step={step}

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

@@ -1,23 +1,22 @@
 import { css, darkTheme, styled } from '@rango-dev/ui';
 
+import { ScrollableArea } from '../Layout';
+
 export const Container = styled('div', {
   display: 'flex',
-  width: '100%',
   flexDirection: 'column',
-  alignItems: 'center',
-  height: '0',
   flexGrow: 1,
+  overflow: 'hidden',
 });
 
 export const HeaderDetails = styled('div', {
   width: '100%',
 });
 
-export const StepsList = styled('div', {
+export const StepsList = styled(ScrollableArea, {
   padding: '$0 $20 $20 $20',
-  width: '100%',
-  overflow: 'auto',
 });
+
 export const Alerts = styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -54,6 +53,10 @@ export const rowStyles = css({
   color: '$neutral500',
 });
 
+export const datePlaceholderStyles = css({
+  padding: '$5 0',
+});
+
 export const requestIdStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -73,3 +76,12 @@ export const titleStepsStyles = css({
   width: '100%',
   padding: '0 $20 $10',
 });
+
+export const StyledLink = styled('a', {
+  fontSize: '$16',
+  fontWeight: '$400',
+  color: '$neutral700',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -12,6 +12,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
+  LinkIcon,
   QuoteCost,
   StepDetails,
   Typography,
@@ -23,6 +24,7 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { SCANNER_BASE_URL } from '../../constants';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -52,7 +54,7 @@ import {
 import { getSwapDate } from '../../utils/time';
 import { getConciseAddress } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
-import { Layout } from '../Layout';
+import { Layout, PageContainer } from '../Layout';
 import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
@@ -61,12 +63,12 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
-  Container,
   HeaderDetails,
   outputStyles,
   requestIdStyles,
   rowStyles,
   StepsList,
+  StyledLink,
   titleStepsStyles,
 } from './SwapDetails.styles';
 
@@ -74,6 +76,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
+  const swappers = useAppStore().swappers();
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
@@ -158,6 +161,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     setNetworkModal: setModalState,
     message: stepMessage,
     blockchains: blockchains,
+    swappers: swappers,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -236,7 +240,6 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   return (
     <Layout
-      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         onCancel:
@@ -274,7 +277,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container>
+      <PageContainer compact view>
         <HeaderDetails>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
@@ -289,6 +292,11 @@ export function SwapDetails(props: SwapDetailsProps) {
                 onClick={handleCopy.bind(null, requestId || '')}>
                 <CopyIcon size={16} color="gray" />
               </IconButton>
+              <StyledLink
+                target="_blank"
+                href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
+                <LinkIcon size={16} />
+              </StyledLink>
             </div>
           </div>
           <div className={rowStyles()}>
@@ -390,7 +398,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             );
           })}
         </StepsList>
-      </Container>
+      </PageContainer>
 
       <SwapDetailsModal
         state={modalState}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -24,18 +24,27 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
   const waitingForApproval =
     step.status === 'waitingForApproval' && !hasWarning;
   const inProgress = step.status === 'running' && !hasWarning;
+  const waitingProgress =
+    (inProgress && !hasAlreadyProceededToSign) ||
+    (waitingForApproval && !step.explorerUrl?.length);
+
   return (
     <Alerts>
       {step.explorerUrl?.map((explorerUrl, index, urls) => {
         const key = index + explorerUrl.url;
         const lastUrl = index === urls.length - 1;
-        const loading = (lastUrl && inProgress) || waitingForApproval;
+        const loading =
+          ((lastUrl && inProgress) || waitingForApproval) && !waitingProgress;
         const error = lastUrl && step.status === 'failed';
 
         return (
           <Fragment key={key}>
             <Alert
-              type={(loading && 'loading') || (error && 'error') || 'success'}
+              type={
+                lastUrl
+                  ? (loading && 'loading') || (error && 'error') || 'success'
+                  : 'success'
+              }
               title={
                 !explorerUrl.description
                   ? i18n.t('View transaction')
@@ -47,7 +56,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
                     variant="ghost"
                     size="xsmall"
                     onClick={() => window.open(explorerUrl.url, '_blank')}>
-                    <LinkIcon size={16} />
+                    <LinkIcon size={12} />
                   </IconButton>
                 )
               }
@@ -55,10 +64,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
           </Fragment>
         );
       })}
-      {((inProgress && !hasAlreadyProceededToSign) ||
-        (waitingForApproval && !step.explorerUrl?.length)) && (
-        <Alert type="loading" title={message.shortMessage} />
-      )}
+      {waitingProgress && <Alert type="loading" title={message.shortMessage} />}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
           switchNetwork={switchNetwork}

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -6,6 +6,7 @@ import type {
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
+  SwapperMeta,
 } from 'rango-types';
 
 export interface SwapAlertsProps extends WaningAlertsProps {
@@ -26,4 +27,5 @@ export interface FailedAlertsProps {
 export type GetStep = {
   swap: PendingSwap;
   blockchains: BlockchainMeta[];
+  swappers: SwapperMeta[];
 } & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -4,6 +4,10 @@ import { i18n } from '@lingui/core';
 import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
 import React from 'react';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
 import { getContainer } from '../../utils/common';
 import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
 
@@ -18,11 +22,11 @@ export function SwapsGroup(props: PropTypes) {
 
     const loadingGroups = [
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps,
       },
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps,
       },
     ];
@@ -36,7 +40,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -69,7 +73,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -85,8 +89,8 @@ export function SwapsGroup(props: PropTypes) {
                         creationTime={swap.creationTime}
                         status={swap.status}
                         onClick={onSwapClick}
-                        onlyShowTime={group.title === 'Today'}
                         tooltipContainer={getContainer()}
+                        onlyShowTime={group.title === i18n.t('Today')}
                         swapTokenData={{
                           from: {
                             token: {
@@ -96,7 +100,12 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: firstStep.fromBlockchainLogo || '',
                             },
-                            amount: swap.inputAmount,
+                            amount: numberToString(
+                              swap.inputAmount,
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
+                            ),
+                            realAmount: formatTooltipNumbers(swap.inputAmount),
                           },
                           to: {
                             token: {
@@ -109,7 +118,9 @@ export function SwapsGroup(props: PropTypes) {
                             amount: numberToString(
                               lastStep.outputAmount ||
                                 lastStep.expectedOutputAmountHumanReadable ||
-                                ''
+                                '',
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
                             ),
                             realAmount: formatTooltipNumbers(
                               lastStep.outputAmount ||