@rango-dev/widget-embedded 0.20.1-next.8 → 0.21.0

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,
@@ -36,6 +38,7 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import {
   formatTooltipNumbers,
@@ -52,7 +55,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 +64,12 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
-  Container,
   HeaderDetails,
   outputStyles,
   requestIdStyles,
   rowStyles,
   StepsList,
+  StyledLink,
   titleStepsStyles,
 } from './SwapDetails.styles';
 
@@ -74,8 +77,10 @@ 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 isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
@@ -158,6 +163,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 +242,6 @@ export function SwapDetails(props: SwapDetailsProps) {
 
   return (
     <Layout
-      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         onCancel:
@@ -274,7 +279,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container>
+      <PageContainer compact view>
         <HeaderDetails>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
@@ -289,6 +294,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 +400,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             );
           })}
         </StepsList>
-      </Container>
+      </PageContainer>
 
       <SwapDetailsModal
         state={modalState}
@@ -399,6 +409,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         onDelete={onDelete}
         message={stepMessage.detailedMessage.content}
         currentStepWallet={currentStepWallet}
+        walletButtonDisabled={!isActiveTab}
       />
       <SwapDetailsCompleteModal
         open={!!showCompletedModal}

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/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -10,7 +10,14 @@ import { mapStatusToWalletState } from '../../utils/wallets';
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
-  const { type, title, currentStepWallet, message, showWalletButton } = props;
+  const {
+    type,
+    title,
+    currentStepWallet,
+    message,
+    showWalletButton,
+    walletButtonDisabled,
+  } = props;
   const { connect, getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
@@ -31,6 +38,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             type={walletType}
             state={walletState}
             link={walletInfo.installLink}
+            disabled={walletButtonDisabled}
             onClick={async () => connect(walletType)}
           />
         </WalletContainer>

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -12,8 +12,15 @@ import { modalNetworkValues } from './SwapDetailsModal.helpers';
 import { WalletStateContent } from './SwapDetailsModal.WalletState';
 
 export function SwapDetailsModal(props: ModalPropTypes) {
-  const { state, onClose, onDelete, onCancel, currentStepWallet, message } =
-    props;
+  const {
+    state,
+    onClose,
+    onDelete,
+    onCancel,
+    currentStepWallet,
+    message,
+    walletButtonDisabled,
+  } = props;
 
   const showWalletStateContent =
     state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
@@ -31,6 +38,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
           title={modalNetworkValues[state].title}
           currentStepWallet={currentStepWallet}
           message={message}
+          walletButtonDisabled={walletButtonDisabled}
           showWalletButton={
             state !== PendingSwapNetworkStatus.WaitingForNetworkChange
           }

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -17,6 +17,7 @@ export interface ModalPropTypes {
   state: ModalState;
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
+  walletButtonDisabled: boolean;
 }
 
 export interface CompleteModalPropTypes {
@@ -49,6 +50,7 @@ export interface WalletStateContentProps extends ModalNetworkValueTypes {
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
   showWalletButton: boolean;
+  walletButtonDisabled: boolean;
 }
 
 export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;

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

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

@@ -51,6 +51,7 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
+  overflow: 'hidden',
 });
 
 export const Title = styled('div', {
@@ -68,6 +69,7 @@ export const List = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
+
   '& li': {
     alignItems: 'none',
 

package/src/components/TokenList/TokenList.tsx

@@ -278,7 +278,7 @@ export function TokenList(props: PropTypes) {
       </Typography>
       <Divider size={4} />
       {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'success' && <List as="ul">{renderList()}</List>}
     </Container>
   );
 }

package/src/components/WidgetEvents.tsx

@@ -11,14 +11,12 @@ import { useEffect } from 'react';
 import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
-import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
   const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -43,18 +41,8 @@ export function WidgetEvents() {
         fromAccount && getWalletsDetails([fromAccount], tokens);
         toAccount && getWalletsDetails([toAccount], tokens);
       }
-      if (
-        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-          validBlockedStatuses.includes(event.status)) ||
-        event.type === StepEventType.FAILED
-      ) {
-        setNotification(event, route);
-      } else if (
-        event.type === StepEventType.TX_EXECUTION ||
-        event.type === StepEventType.CHECK_STATUS
-      ) {
-        setAsRead(route.requestId);
-      }
+
+      setNotification(event, route);
     });
 
     return () => widgetEvents.all.clear();

package/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx

@@ -0,0 +1,26 @@
+import type { PropTypes } from './ActivateTabAlert.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+export function ActivateTabAlert(props: PropTypes) {
+  return (
+    <Alert
+      action={
+        <Button
+          onClick={props.onActivateTab}
+          variant="contained"
+          size="xxsmall"
+          type="warning">
+          {i18n.t('Activate')}
+        </Button>
+      }
+      type="warning"
+      variant="alarm"
+      title={i18n.t(
+        'Another tab is open and handles transactions. You can activate this tab.'
+      )}
+    />
+  );
+}

package/src/components/common/ActivateTabAlert/ActivateTabAlert.types.ts

@@ -0,0 +1,3 @@
+export type PropTypes = {
+  onActivateTab: () => void;
+};

package/src/components/common/ActivateTabAlert/index.ts

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

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -0,0 +1,31 @@
+import type { PropTypes } from './ActivateTabModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../../utils/common';
+
+export function ActivateTabModal(props: PropTypes) {
+  const { open, onClose, onConfirm } = props;
+  return (
+    <Modal open={open} dismissible onClose={onClose} container={getContainer()}>
+      <MessageBox
+        title={i18n.t('Activate current tab')}
+        type="warning"
+        description={i18n.t(
+          'Currently, some transactions are running and being handled by other browser tab. If you activate this tab, all transactions that are already in the transaction sign step will expire.'
+        )}>
+        <Divider size={20} />
+        <Button
+          variant="contained"
+          size="large"
+          type="primary"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm')}
+        </Button>
+      </MessageBox>
+    </Modal>
+  );
+}

package/src/components/common/ActivateTabModal/ActivateTabModal.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};

package/src/components/common/ActivateTabModal/index.ts

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

package/src/constants/index.ts

@@ -1,3 +1,4 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
 export const RANGO_SWAP_BOX_ID = 'rango-swap-box';
+export const SCANNER_BASE_URL = 'https://scan.rango.exchange';

package/src/constants/quote.ts

@@ -0,0 +1,23 @@
+import type { SwapFee } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+
+export type NameOfFees =
+  | 'Swapper Fee'
+  | 'Affiliate Fee'
+  | 'Outbound network fee'
+  | 'Rango Fee'
+  | 'Network Fee';
+
+export const NAME_OF_FEES: Record<NameOfFees, string> = {
+  'Network Fee': i18n.t('Network Fee'),
+  'Swapper Fee': i18n.t('Protocol Fee'),
+  'Affiliate Fee': i18n.t('Affiliate Fee'),
+  'Outbound network fee': i18n.t('Outbound Fee'),
+  'Rango Fee': i18n.t('Rango Fee'),
+};
+
+export type FeesGroup = {
+  payable: { [key in NameOfFees]?: SwapFee[] };
+  nonePayable: { [key in NameOfFees]?: SwapFee[] };
+};

package/src/constants/searchParams.ts

@@ -1,8 +1,8 @@
 export enum SearchParams {
-  'FROM_CHAIN' = 'fromBlockchain',
-  'FROM_TOKEN' = 'fromToken',
-  'TO_CHAIN' = 'toBlockchain',
-  'TO_TOKEN' = 'toToken',
-  'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
+  FROM_BLOCKCHAIN = 'fromBlockchain',
+  FROM_TOKEN = 'fromToken',
+  TO_BLOCKCHAIN = 'toBlockchain',
+  TO_TOKEN = 'toToken',
+  FROM_AMOUNT = 'fromAmount',
+  AUTO_CONNECT = 'autoConnect',
 }

package/src/containers/App/App.styles.ts

@@ -6,6 +6,8 @@ export const MainContainer = styled('div', {
   alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
+  textAlign: 'left',
+
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/App/App.tsx

@@ -20,7 +20,7 @@ export function Main() {
 
   const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
-  const { activeLanguage, changeLanguage } = useLanguage();
+  const { activeLanguage } = useLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
@@ -30,9 +30,6 @@ export function Main() {
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
-  useEffect(() => {
-    changeLanguage(config?.language);
-  }, [config?.language]);
 
   return (
     <I18nManager language={activeLanguage}>