@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

package/src/components/SwapDetails/SwapDetails.tsx

@@ -14,8 +14,8 @@ import {
   Divider,
   IconButton,
   RouteCost,
+  RouteSummary,
   StepDetails,
-  TokenAmount,
   Typography,
   useCopyToClipboard,
 } from '@rango-dev/ui';
@@ -24,10 +24,26 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
-import { numberToString } from '../../utils/numbers';
+import { useNotificationStore } from '../../store/notification';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
+import { getPriceImpactLevel } from '../../utils/routing';
 import {
   getLastConvertedTokenInFailedSwap,
   getPercentageChange,
@@ -43,48 +59,46 @@ import {
   SwapDetailsModal,
 } from '../SwapDetailsModal';
 
-import {
-  AMOUNT_DECIMALS,
-  getPriceImpactWarningLevel,
-  getSteps,
-  getStepState,
-  MIN_DECIMALS,
-  PERCENT_DECIMALS,
-  RESET_INTERVAL,
-  SECONDS,
-} from './SwapDetails.helpers';
-import {
-  Container,
-  HeaderDetails,
-  Separator,
-  StepsList,
-} from './SwapDetails.styles';
+import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
+import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
-  const { tokens } = useMetaStore.use.meta();
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const retry = useBestRouteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const listRef = useRef(null);
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
+  const {
+    meta: { tokens, blockchains },
+  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
     setModalState(null);
   };
 
+  const getUnreadNotifications =
+    useNotificationStore.use.getUnreadNotifications();
+  const setAsRead = useNotificationStore.use.setAsRead();
+  const unreadNotifications = getUnreadNotifications();
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
   useEffect(() => {
-    if (swap.status === 'success' || swap.status === 'failed') {
-      setShowCompletedModal(swap.status);
+    const existNotification = unreadNotifications.find(
+      (n) => n.requestId === swap.requestId
+    );
+    if (existNotification) {
+      if (swap.status === 'success' || swap.status === 'failed') {
+        setShowCompletedModal(swap.status);
+        setAsRead(swap.requestId);
+      }
     }
   }, [swap.status]);
 
@@ -137,35 +151,31 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
+    blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
   const outputAmount =
     lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable;
-  const percentageChange =
-    swap.inputAmount && outputAmount
-      ? getPercentageChange(swap.inputAmount, outputAmount)
-      : null;
 
   const totalFee = swap.steps.reduce(
     (totalFee, steps) => totalFee + parseFloat(steps.feeInUsd || ''),
     0
   );
 
-  const totalTime = swap.steps.reduce(
-    (totalTime, step) => totalTime + (step.estimatedTimeInSeconds || 0),
-    0
-  );
-
-  const minutes = Math.floor(totalTime / SECONDS);
-
   const diagnosisUrl = swap.steps.find(
     (step) => step.diagnosisUrl
   )?.diagnosisUrl;
 
   const outputUsdValue = numberToString(
     String(
-      parseFloat(numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)) *
+      parseFloat(
+        numberToString(
+          outputAmount,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        )
+      ) *
         (getUsdPrice(
           lastStep.toBlockchain,
           lastStep.toSymbol,
@@ -173,25 +183,58 @@ export function SwapDetails(props: SwapDetailsProps) {
           tokens
         ) || 0)
     ),
-    MIN_DECIMALS,
-    AMOUNT_DECIMALS
+    USD_VALUE_MIN_DECIMALS,
+    USD_VALUE_MAX_DECIMALS
+  );
+
+  const inputUsdValue = numberToString(
+    String(
+      parseFloat(swap.inputAmount) *
+        (getUsdPrice(
+          firstStep.fromBlockchain,
+          firstStep.fromSymbol,
+          firstStep.fromSymbolAddress,
+          tokens
+        ) || 0)
+    ),
+    USD_VALUE_MIN_DECIMALS,
+    USD_VALUE_MAX_DECIMALS
   );
 
+  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
+
   const completeModalDesc =
-    showCompletedModal === 'success'
-      ? `You have recieved ${numberToString(
-          outputAmount,
-          MIN_DECIMALS,
-          AMOUNT_DECIMALS
-        )} ${
-          steps[numberOfSteps - 1].to.token.displayName
-        } in ${getConciseAddress(
-          swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
-            ?.address || ''
-        )} wallet on ${steps[numberOfSteps - 1].to.chain.displayName} chain.`
+    swap.status === 'success'
+      ? i18n.t({
+          id: 'receivedMessage',
+          message:
+            'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
+          values: {
+            amount: numberToString(
+              outputAmount,
+              TOKEN_AMOUNT_MIN_DECIMALS,
+              TOKEN_AMOUNT_MAX_DECIMALS
+            ),
+            token: steps[numberOfSteps - 1].to.token.displayName,
+            conciseAddress: getConciseAddress(
+              swap.wallets[steps[numberOfSteps - 1].to.chain.displayName]
+                ?.address || ''
+            ),
+            chain: steps[numberOfSteps - 1].to.chain.displayName,
+          },
+        })
       : `${i18n.t('Transaction was not sent.')} ${
           lastConvertedTokenInFailedSwap
-            ? `${lastConvertedTokenInFailedSwap.outputAmount}  ${lastConvertedTokenInFailedSwap.symbol} on ${lastConvertedTokenInFailedSwap.blockchain} remain in your wallet`
+            ? i18n.t({
+                id: 'remainSymbol',
+                message:
+                  '{amount} {symbol} on {blockchain} remain in your wallet',
+                values: {
+                  amount: lastConvertedTokenInFailedSwap.outputAmount,
+                  symbol: lastConvertedTokenInFailedSwap.symbol,
+                  blockchain: lastConvertedTokenInFailedSwap.blockchain,
+                },
+              })
             : ''
         }`;
 
@@ -261,68 +304,62 @@ export function SwapDetails(props: SwapDetailsProps) {
             </Typography>
           </div>
         </HeaderDetails>
+
         <div className="output">
           <RouteCost
             fee={numberToString(
               String(totalFee),
-              AMOUNT_DECIMALS,
-              AMOUNT_DECIMALS
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
             )}
-            time={minutes}
+            time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <TokenAmount
-            direction="horizontal"
-            type="input"
-            price={{
-              value: numberToString(
-                swap.inputAmount,
-                AMOUNT_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-              usdValue: numberToString(
-                String(
-                  parseFloat(swap.inputAmount) *
-                    (getUsdPrice(
-                      firstStep.fromBlockchain,
-                      firstStep.fromSymbol,
-                      firstStep.fromSymbolAddress,
-                      tokens
-                    ) || 0)
+          <RouteSummary
+            from={{
+              price: {
+                value: numberToString(
+                  swap.inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
                 ),
-                MIN_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-            }}
-            token={{
-              displayName: steps[0].from.token.displayName,
-              image: steps[0].from.token.image,
+                usdValue: inputUsdValue,
+              },
+              token: {
+                displayName: steps[0].from.token.displayName,
+                image: steps[0].from.token.image,
+              },
+              chain: {
+                image: steps[0].from.chain.image,
+                displayName: steps[0].from.chain.displayName,
+              },
             }}
-            chain={{ image: steps[0].from.chain.image }}
-          />
-          <Separator />
-          <TokenAmount
-            direction="horizontal"
-            type="output"
-            price={{
-              value: numberToString(
-                outputAmount,
-                MIN_DECIMALS,
-                AMOUNT_DECIMALS
-              ),
-              usdValue: outputUsdValue,
-            }}
-            token={{
-              displayName: steps[numberOfSteps - 1].to.token.displayName,
-              image: steps[numberOfSteps - 1].to.token.image,
+            to={{
+              price: {
+                value: numberToString(
+                  outputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: outputUsdValue,
+              },
+              token: {
+                displayName: steps[numberOfSteps - 1].to.token.displayName,
+                image: steps[numberOfSteps - 1].to.token.image,
+              },
+              chain: {
+                image: steps[numberOfSteps - 1].to.chain.image,
+                displayName: steps[numberOfSteps - 1].to.chain.displayName,
+              },
             }}
-            chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
             percentageChange={numberToString(
               percentageChange,
-              PERCENT_DECIMALS,
-              PERCENT_DECIMALS
+              PERCENTAGE_CHANGE_MIN_DECIMALS,
+              PERCENTAGE_CHANGE_MAX_DECIMALS
+            )}
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
             )}
-            warningLevel={getPriceImpactWarningLevel(percentageChange)}
           />
         </div>
         <div className="title-steps">
@@ -355,6 +392,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           })}
         </StepsList>
       </Container>
+
       <SwapDetailsModal
         state={modalState}
         onClose={() => setModalState(null)}
@@ -367,13 +405,17 @@ export function SwapDetails(props: SwapDetailsProps) {
         open={!!showCompletedModal}
         diagnosisUrl={diagnosisUrl}
         onClose={() => setShowCompletedModal(null)}
-        status={showCompletedModal}
-        priceValue={numberToString(outputAmount, MIN_DECIMALS, AMOUNT_DECIMALS)}
+        status={swap.status === 'success' ? 'success' : 'failed'}
+        priceValue={numberToString(
+          outputAmount,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
           percentageChange,
-          PERCENT_DECIMALS,
-          PERCENT_DECIMALS
+          PERCENTAGE_CHANGE_MIN_DECIMALS,
+          PERCENTAGE_CHANGE_MAX_DECIMALS
         )}
         token={{
           displayName: steps[numberOfSteps - 1].to.token.displayName,

package/src/components/SwapDetails/SwapDetails.types.ts

@@ -8,5 +8,5 @@ export interface SwapDetailsProps {
 }
 export interface SwapDetailsPlaceholderPropTypes {
   requestId: string;
-  loading: boolean;
+  showSkeleton: boolean;
 }

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

@@ -2,6 +2,7 @@ import type { getSwapMessages } from '../../utils/swap';
 import type { ModalState } from '../SwapDetailsModal';
 import type { ConnectResult } from '@rango-dev/wallets-react';
 import type {
+  BlockchainMeta,
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
@@ -22,7 +23,7 @@ export interface FailedAlertsProps {
   message: ReturnType<typeof getSwapMessages>;
 }
 
-export type GetStep = { swap: PendingSwap } & Omit<
-  SwapAlertsProps,
-  'step' | 'hasAlreadyProceededToSign'
->;
+export type GetStep = {
+  swap: PendingSwap;
+  blockchains: BlockchainMeta[];
+} & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

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

@@ -4,14 +4,12 @@ import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
+
 import { WalletContainer } from './SwapDetailsModal.styles';
 
-export const WalletStateContent = ({
-  type,
-  title,
-  currentStepWallet,
-  message,
-}: WalletStateContentProps) => {
+export const WalletStateContent = (props: WalletStateContentProps) => {
+  const { type, title, currentStepWallet, message, showWalletButton } = props;
   const { connect, getWalletInfo, state: walletState } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const isConnected = walletType && walletState(walletType).connected;
@@ -19,9 +17,10 @@ export const WalletStateContent = ({
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
-      {walletType && (
+      {showWalletButton && walletType && (
         <WalletContainer>
           <Wallet
+            container={getContainer()}
             title={getWalletInfo(walletType).name}
             image={getWalletInfo(walletType).img}
             type={walletType}

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -29,6 +29,9 @@ export function SwapDetailsModal(props: ModalPropTypes) {
           title={modalNetworkValues[state].title}
           currentStepWallet={currentStepWallet}
           message={message}
+          showWalletButton={
+            state !== PendingSwapNetworkStatus.WaitingForNetworkChange
+          }
         />
       )}
       {state === 'delete' && (

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

@@ -22,7 +22,7 @@ export interface ModalPropTypes {
 export interface CompleteModalPropTypes {
   open: boolean;
   onClose: () => void;
-  status: 'success' | 'failed' | null;
+  status: 'success' | 'failed';
   priceValue: string;
   usdValue: string;
   percentageChange: string;
@@ -46,6 +46,7 @@ export interface ModalNetworkValueTypes {
 export interface WalletStateContentProps extends ModalNetworkValueTypes {
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
+  showWalletButton: boolean;
 }
 
 export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -1,5 +1,6 @@
 import type { PropTypes } from './SwapsGroup.types';
 
+import { i18n } from '@lingui/core';
 import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
 import React from 'react';
 
@@ -35,7 +36,7 @@ export function SwapsGroup(props: PropTypes) {
                   size="medium"
                   color="neutral800"
                   className="group-title">
-                  {group.title}
+                  {i18n.t(group.title)}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -69,7 +70,7 @@ export function SwapsGroup(props: PropTypes) {
                   size="medium"
                   color="neutral800"
                   className="group-title">
-                  {group.title}
+                  {i18n.t(group.title)}
                 </Typography>
               </Time>
               <Divider size={4} />

package/src/components/SwitchFromAndTo.tsx

@@ -1,38 +1,8 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
-import { useInRouterContext, useSearchParams } from 'react-router-dom';
+import React from 'react';
 
-import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 
-function SwitchFromAndTo({ count }: { count: number }) {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-
-  useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      setSearchParams({
-        ...(toChainString && { [SearchParams.FROM_CHAIN]: toChainString }),
-        ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
-        ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
-        ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString(),
-        }),
-      });
-    } else {
-      firstRender.current = false;
-    }
-  }, [count]);
-
-  return null;
-}
-
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
   bottom: '-12px',
@@ -58,18 +28,14 @@ const StyledButton = styled('div', {
 
 export function SwitchFromAndToButton() {
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
-  const isRouterInContext = useInRouterContext();
-  const [count, setCount] = useState(0);
 
   return (
     <SwitchButtonContainer>
       <StyledButton
         onClick={() => {
           switchFromAndTo();
-          setCount((prev) => prev + 1);
         }}>
         <ReverseIcon size={12} />
-        {isRouterInContext && <SwitchFromAndTo count={count} />}
       </StyledButton>
     </SwitchButtonContainer>
   );

package/src/components/TokenList/TokenList.helpers.ts

@@ -3,11 +3,9 @@ import type { TokenWithBalance } from './TokenList.types';
 import { containsText } from '../../utils/common';
 
 export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
-  list
-    .filter(
-      (token) =>
-        containsText(token.symbol, searchedFor) ||
-        containsText(token.address || '', searchedFor) ||
-        containsText(token.name || '', searchedFor)
-    )
-    .sort((a, b) => (b.pin as any) - (a.pin as any));
+  list.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );

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

@@ -1,5 +1,11 @@
 import { styled, Typography } from '@rango-dev/ui';
 
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+});
+
 export const Title = styled('div', {
   display: 'flex',
   alignItems: 'center',
@@ -11,7 +17,7 @@ export const Title = styled('div', {
   },
 });
 export const List = styled('ul', {
-  minHeight: 280,
+  flexGrow: 1,
   padding: 0,
   margin: 0,
   listStyle: 'none',