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

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -4,6 +4,7 @@ import type { Wallet } from '../../types';
 import type { WalletInfo } from '@rango-dev/ui';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
+import { i18n } from '@lingui/core';
 import {
   Button,
   Divider,
@@ -18,7 +19,10 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { useWalletList } from '../../hooks/useWalletList';
-import { TIME_TO_CLOSE_MODAL } from '../../pages/WalletsPage';
+import {
+  TIME_TO_CLOSE_MODAL,
+  TIME_TO_IGNORE_MODAL,
+} from '../../pages/WalletsPage';
 import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
@@ -50,12 +54,23 @@ export function WalletList(props: PropTypes) {
   const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
     useState<'in-progress' | 'completed' | null>(null);
   const { connect } = useWallets();
+  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const { list, error, handleClick } = useWalletList({
     config,
     chain,
-    onBeforeConnect: setOpenWalletStateModal,
-    onConnect: () =>
-      setTimeout(() => setOpenWalletStateModal(''), TIME_TO_CLOSE_MODAL),
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      setTimeout(() => {
+        setOpenWalletStateModal('');
+      }, TIME_TO_CLOSE_MODAL);
+    },
   });
   const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
@@ -129,7 +144,11 @@ export function WalletList(props: PropTypes) {
           wallet.state === WalletState.CONNECTED;
 
         const connectedWalletDescription = couldAddExperimentalChain
-          ? `Add ${chain} chain`
+          ? i18n.t({
+              id: 'addChain',
+              message: 'Add {chain} chain',
+              values: { chain },
+            })
           : conciseAddress;
 
         const onClick = () => {
@@ -160,15 +179,13 @@ export function WalletList(props: PropTypes) {
             : undefined;
         return (
           <>
-            {openWalletStateModal === wallet.type && (
-              <WalletModal
-                open={openWalletStateModal === wallet.type}
-                onClose={() => setOpenWalletStateModal('')}
-                image={wallet.image}
-                state={wallet.state}
-                error={error}
-              />
-            )}
+            <WalletModal
+              open={openWalletStateModal === wallet.type}
+              onClose={() => setOpenWalletStateModal('')}
+              image={wallet.image}
+              state={wallet.state}
+              error={error}
+            />
             {!!experimentalChainWallet && (
               <Modal
                 open={!!experimentalChainWallet && showExperimentalChainModal}
@@ -177,9 +194,18 @@ export function WalletList(props: PropTypes) {
                   setExperimentalChainWallet(null);
                 }}>
                 <MessageBox
-                  title={`Add ${blockchainDisplayName} Chain`}
+                  title={i18n.t({
+                    id: 'addBlockchain',
+                    message: 'Add {blockchainDisplayName} Chain',
+                    values: { blockchainDisplayName },
+                  })}
                   type="warning"
-                  description={`You should connect a ${blockchainDisplayName} supported wallet or choose a different ${blockchainDisplayName} address`}>
+                  description={i18n.t({
+                    id: 'addBlockchainDescription',
+                    message:
+                      'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                    values: { blockchainDisplayName },
+                  })}>
                   <Divider size={18} />
                   <Divider size={32} />
                   <Button
@@ -191,7 +217,7 @@ export function WalletList(props: PropTypes) {
                     type="primary"
                     fullWidth
                     size="large">
-                    Confirm
+                    {i18n.t('Confirm')}
                   </Button>
                 </MessageBox>
               </Modal>
@@ -204,8 +230,17 @@ export function WalletList(props: PropTypes) {
                 {addingExperimentalChainStatus === 'in-progress' ? (
                   <MessageBox
                     type="loading"
-                    title={`Add ${blockchainDisplayName} Chain`}
-                    description={`You should connect a ${blockchainDisplayName} supported wallet or choose a different ${blockchainDisplayName} address.`}
+                    title={i18n.t({
+                      id: 'addBlockchain',
+                      message: 'Add {blockchainDisplayName} Chain',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: 'addBlockchainDescription',
+                      message:
+                        'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
+                      values: { blockchainDisplayName },
+                    })}
                     icon={
                       <LogoContainer>
                         <WalletImageContainer>
@@ -218,8 +253,17 @@ export function WalletList(props: PropTypes) {
                 ) : (
                   <MessageBox
                     type="success"
-                    title={`${blockchainDisplayName} Chain Added`}
-                    description={`${blockchainDisplayName} is added to your wallet, you can use it to swap.`}
+                    title={i18n.t({
+                      id: 'blockchainAdded',
+                      message: '{blockchainDisplayName} Chain Added',
+                      values: { blockchainDisplayName },
+                    })}
+                    description={i18n.t({
+                      id: 'blockchainAddedDescription',
+                      message:
+                        '{blockchainDisplayName} is added to your wallet, you can use it to swap.',
+                      values: { blockchainDisplayName },
+                    })}
                   />
                 )}
                 <Divider direction="vertical" size={32} />
@@ -238,7 +282,7 @@ export function WalletList(props: PropTypes) {
       {shouldShowMoreWallets && (
         <WalletButton selected={false} onClick={onShowMore.bind(null)}>
           <Typography variant="label" size="medium">
-            Show more wallets
+            {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">
               &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
             </Typography>

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -1,6 +1,6 @@
-import { Button, darkTheme, styled } from '@rango-dev/ui';
+import { darkTheme, IconButton, styled } from '@rango-dev/ui';
 
-export const HeaderButton = styled(Button, {
+export const HeaderButton = styled(IconButton, {
   width: '$24',
   position: 'relative',
   padding: '0',

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -1,6 +1,7 @@
 export interface PropTypes {
   onClick: () => void;
   isConnected?: boolean;
+  container?: HTMLElement;
 }
 export interface HomeButtonsPropTypes {
   layoutRef: HTMLDivElement | null;

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -11,6 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
@@ -27,7 +28,10 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
 
   return (
     <>
-      <Tooltip side="top" content={i18n.t('Refresh')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Refresh')}>
         <HeaderButton
           variant="ghost"
           size="small"
@@ -37,12 +41,15 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         </HeaderButton>
       </Tooltip>
 
-      <Tooltip side="top" content={i18n.t('Notifications')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Notifications')}>
         <Popover
           align="center"
           collisionBoundary={layoutRef}
           collisionPadding={{ right: 20, left: 20 }}
-          container={document.getElementById('swap-box') as HTMLElement}
+          container={getContainer()}
           content={<NotificationContent />}>
           <HeaderButton
             size="small"
@@ -53,12 +60,18 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
           </HeaderButton>
         </Popover>
       </Tooltip>
-      <Tooltip side="top" content={i18n.t('Settings')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Settings')}>
         <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
           <SettingsIcon size={18} color="black" />
         </HeaderButton>
       </Tooltip>
-      <Tooltip side="top" content={i18n.t('Transactions History')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Transactions History')}>
         <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
           <TransactionIcon size={18} color="black" />
         </HeaderButton>

package/src/components/HeaderButtons/UnreadNotificationsBadge.tsx

@@ -6,8 +6,7 @@ import { useNotificationStore } from '../../store/notification';
 import { NotificationsBadgeContainer } from './HeaderButtons.styles';
 
 export function UnreadNotificationsBadge() {
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
+  const { getUnreadNotifications } = useNotificationStore();
 
   const notificationsCount = getUnreadNotifications().length;
 

package/src/components/HeaderButtons/WalletButton.tsx

@@ -8,7 +8,10 @@ import { ConnectedIcon, HeaderButton } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
   return (
-    <Tooltip side="top" content={i18n.t('Connect Wallet')}>
+    <Tooltip
+      container={props.container}
+      side="top"
+      content={i18n.t('Connect Wallet')}>
       <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
         {props.isConnected && <ConnectedIcon />}
         <WalletIcon size={18} color="black" />

package/src/components/Layout/Layout.styles.ts

@@ -4,13 +4,13 @@ export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
-  //TODO: add radii theme token for 20px
-  borderRadius: '20px',
+  borderRadius: '$primary',
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',
   maxWidth: '390px',
   maxHeight: '700px',
+  backgroundColor: '$neutral100',
   variants: {
     fixedHeight: {
       true: {
@@ -23,10 +23,12 @@ export const Container = styled('div', {
   },
 });
 export const Content = styled('div', {
+  borderTopLeftRadius: '20px',
+  borderTopRightRadius: '20px',
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  padding: '$20 $0 $10 $20',
+  padding: '$20 $20 $10 $20',
   backgroundColor: '$background',
   position: 'relative',
   overflowY: 'auto',

package/src/components/Layout/Layout.tsx

@@ -1,25 +1,18 @@
 import type { PropTypes, Ref } from './Layout.types';
 import type { PropsWithChildren } from 'react';
 
-import {
-  BottomLogo,
-  Divider,
-  Header,
-  theme,
-  usePaddingRight,
-} from '@rango-dev/ui';
-import React, { useRef } from 'react';
+import { BottomLogo, Divider, Header } from '@rango-dev/ui';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
+import { getContainer } from '../../utils/common';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { Container, Content, Footer } from './Layout.styles';
 
-const DEFAULT_CONTENT_PADDING = 20;
-
 function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   const {
     children,
@@ -35,13 +28,6 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     useUiStore.use.connectWalletsButtonDisabled();
   const navigate = useNavigate();
 
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  usePaddingRight({
-    element: contentRef.current,
-    paddingRight: noPadding ? '0' : theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
-
   const onConnectWallet = () => {
     if (!connectWalletsButtonDisabled) {
       navigate('/' + navigationRoutes.wallets);
@@ -57,6 +43,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
             {header.suffix}
             {header.hasConnectWallet && (
               <WalletButton
+                container={getContainer()}
                 onClick={onConnectWallet}
                 isConnected={!!connectedWallets?.length}
               />
@@ -65,9 +52,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding} ref={(ref) => (contentRef.current = ref)}>
-        {children}
-      </Content>
+      <Content noPadding={noPadding}>{children}</Content>
       {(hasLogo || footer) && (
         <Footer>
           <div className="footer__content">{footer}</div>

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -0,0 +1,41 @@
+import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepContainer } from './LoadingSwapDetails.styles';
+
+export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
+  const { extraInfo } = props;
+  return (
+    <StepContainer>
+      <div className="step-title">
+        <Skeleton height={28} width={28} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <div className="step-tokens">
+        <Divider direction="horizontal" size={20} />
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+        <div className="step-icon-container">
+          <NextIcon color="gray" size={16} />
+        </div>
+        <div className="step-token-info">
+          <ChainToken size="small" loading chainImage="" tokenImage="" />
+          <Divider direction="horizontal" size={8} />
+          <Skeleton height={12} width={76} variant="rounded" />
+        </div>
+      </div>
+      {extraInfo && (
+        <div className="extra-info">
+          <Divider direction="horizontal" size={20} />
+          <Skeleton height={22} width={297} variant="rectangular" />
+        </div>
+      )}
+    </StepContainer>
+  );
+}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -0,0 +1,78 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  width: '100%',
+  height: '100%',
+  padding: '$0 $20',
+
+  '.cost': {
+    paddingTop: '$15',
+    display: 'flex',
+  },
+
+  '.route-summary': {
+    padding: '$15 $0',
+  },
+
+  '.route-summary-item': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.token-amount': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  '.route-summary-separator': {
+    width: '0px',
+    height: '$16',
+    borderLeft: '1px solid $neutral400',
+    marginLeft: '13px',
+  },
+
+  '.swaps-steps': {
+    paddingBottom: '$10',
+  },
+});
+
+export const StepContainer = styled('div', {
+  backgroundColor: '$neutral100',
+  borderRadius: '$xm',
+  padding: '$10 $15',
+
+  '.step-title': {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+  },
+  '.step-tokens': {
+    paddingTop: '$5',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-token-info': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.step-icon-container': {
+    padding: '$4 $6',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  '.extra-info': {
+    display: 'flex',
+    paddingTop: '$10',
+    paddingBottom: '$5',
+  },
+});
+export const StepSeparator = styled('div', {
+  width: '0px',
+  height: '$20',
+  borderLeft: '1px dashed $neutral900',
+  marginLeft: '25px',
+});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -0,0 +1,53 @@
+import { i18n } from '@lingui/core';
+import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { Container, StepSeparator } from './LoadingSwapDetails.styles';
+import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
+
+export function LoadingSwapDetails() {
+  const routeSummary = (
+    <div className="route-summary-item">
+      <div className="token-amount">
+        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <Divider size={8} direction="horizontal" />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </div>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </div>
+  );
+
+  return (
+    <Container>
+      <div className="cost">
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+        <Divider size={4} direction="horizontal" />
+        <Skeleton width={60} height={10} variant="rounded" />
+      </div>
+
+      <div className="route-summary">
+        {routeSummary}
+        <div className="route-summary-separator"></div>
+        {routeSummary}
+      </div>
+
+      <div className="swaps-steps">
+        <Typography variant="title" size="small">
+          {i18n.t('Swaps steps')}
+        </Typography>
+      </div>
+
+      <div className="step-container">
+        <LoadingSwapDetailStep extraInfo />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+        <StepSeparator />
+        <LoadingSwapDetailStep />
+      </div>
+    </Container>
+  );
+}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -0,0 +1,3 @@
+export interface StepSkeletonPropsTypes {
+  extraInfo?: boolean;
+}

package/src/components/LoadingSwapDetails/index.ts

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

package/src/components/NoRoutes/NoRoutes.helper.ts

@@ -1,5 +1,7 @@
 import type { Info } from './NoRoutes.types';
 
+import { i18n } from '@lingui/core';
+
 import { errorMessages } from '../../constants/errors';
 
 export function makeInfo(
@@ -16,7 +18,7 @@ export function makeInfo(
         text: errorMessages.genericServerError,
         action: {
           onClick: refetchBestRoute,
-          title: 'Retry',
+          title: i18n.t('Retry'),
         },
       },
       description: '',
@@ -37,7 +39,7 @@ export function makeInfo(
         text: errorMessages.liquiditySourcesError.title,
         action: {
           onClick: () => toggleAllLiquiditySources(true),
-          title: 'Reset',
+          title: i18n.t('Reset'),
         },
       },
       description: errorMessages.liquiditySourcesError.description,

package/src/components/NotificationContent/NotificationContent.tsx

@@ -1,5 +1,6 @@
 import type { Notification } from '../../types/notification';
 
+import { i18n } from '@lingui/core';
 import {
   ChainToken,
   ChevronRightIcon,
@@ -22,20 +23,15 @@ export function NotificationContent() {
   const navigate = useNavigate();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
+  const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-
-  const setAsRead = useNotificationStore.use.setAsRead();
-
   const { tokens, blockchains } = useMetaStore.use.meta();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setAsRead(requestId);
     setSelectedSwap(requestId);
     navigate(`/swaps/${requestId}`);
   };
@@ -77,7 +73,7 @@ export function NotificationContent() {
                 onClick={() => handleOnClick(notificationItem.requestId)}
                 title={
                   <Typography variant="body" size="small" color="$neutral900">
-                    {notificationItem.event.message}
+                    {i18n.t(notificationItem.event.message)}
                   </Typography>
                 }
                 id={notificationItem.requestId}

package/src/components/RouteErrors/RouteErrors.styles.ts

@@ -2,7 +2,7 @@ import { styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
-  paddingTop: '$16',
+  paddingTop: '$10',
 });
 
 export const Flex = styled('div', {
@@ -24,4 +24,5 @@ export const Item = styled('div', {
 export const Action = styled('div', {
   padding: '$2',
   alignSelf: 'flex-start',
+  cursor: 'pointer',
 });