@rango-dev/widget-embedded 0.12.1-next.16 → 0.12.1-next.18

package/dist/pages/SwapDetailsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBA8C9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,wBAAgB,eAAe,sBAoD9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.16",
+  "version": "0.12.1-next.18",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.1",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.5",
     "@rango-dev/queue-manager-react": "^0.15.1-next.3",
-    "@rango-dev/ui": "^0.15.1-next.10",
+    "@rango-dev/ui": "^0.15.1-next.11",
     "@rango-dev/wallets-react": "^0.1.1-next.5",
     "@rango-dev/wallets-shared": "^0.15.1-next.3",
     "bignumber.js": "^9.1.1",

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

@@ -25,7 +25,7 @@ export const Content = styled('div', {
   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,14 +1,8 @@
 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';
@@ -18,8 +12,6 @@ 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 +27,6 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     useUiStore.use.connectWalletsButtonDisabled();
   const navigate = useNavigate();
 
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  usePaddingRight({
-    elementRef: contentRef,
-    paddingRight: noPadding ? '0' : theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
-
   const onConnectWallet = () => {
     if (!connectWalletsButtonDisabled) {
       navigate('/' + navigationRoutes.wallets);
@@ -65,9 +50,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding} ref={contentRef}>
-        {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/SwapDetails/SwapDetails.Placeholder.tsx

@@ -1,33 +1,69 @@
 import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
 
 import { i18n } from '@lingui/core';
-import { NotFound, Spinner } from '@rango-dev/ui';
+import {
+  CopyIcon,
+  IconButton,
+  NotFound,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
 import React from 'react';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
+import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
-import { LoaderContainer, PlaceholderContainer } from './SwapDetails.styles';
+import {
+  Container,
+  HeaderDetails,
+  PlaceholderContainer,
+} from './SwapDetails.styles';
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
-  const { requestId, loading } = props;
+  const { requestId, showSkeleton } = props;
   const { navigateBackFrom } = useNavigateBack();
 
   return (
     <Layout
+      noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
         onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
-      <PlaceholderContainer>
-        {loading ? (
-          <LoaderContainer>
-            <Spinner size={24} />
-          </LoaderContainer>
-        ) : (
+      {showSkeleton && (
+        <Container>
+          <HeaderDetails>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Request ID')}:`}
+              </Typography>
+              <div className="request-id">
+                <Typography variant="label" size="small" color="neutral900">
+                  <Skeleton width={60} height={10} variant="rounded" />
+                </Typography>
+                <IconButton variant="ghost">
+                  <CopyIcon size={16} color="gray" />
+                </IconButton>
+              </div>
+            </div>
+            <div className="row">
+              <Typography variant="label" size="large" color="neutral900">
+                {`${i18n.t('Created at')}:`}
+              </Typography>
+              <Typography variant="label" size="small" color="neutral900">
+                <Skeleton width={60} height={10} variant="rounded" />
+              </Typography>
+            </div>
+          </HeaderDetails>
+          <LoadingSwapDetails />
+        </Container>
+      )}
+      {!showSkeleton && (
+        <PlaceholderContainer>
           <NotFound
             title={i18n.t('Not found')}
             description={i18n.t(
@@ -36,8 +72,8 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
               { message: 'Swap with request ID = ${requestId} not found.' }
             )}
           />
-        )}
-      </PlaceholderContainer>
+        </PlaceholderContainer>
+      )}
     </Layout>
   );
 }

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

@@ -42,7 +42,7 @@ export const HeaderDetails = styled('div', {
 });
 
 export const StepsList = styled('div', {
-  padding: '$0 $0 $20 $20',
+  padding: '$0 $20 $20 $20',
   width: '100%',
   overflow: 'auto',
 });

package/src/components/SwapDetails/SwapDetails.tsx

@@ -16,10 +16,8 @@ import {
   RouteCost,
   RouteSummary,
   StepDetails,
-  theme,
   Typography,
   useCopyToClipboard,
-  usePaddingRight,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -65,26 +63,21 @@ import {
 } from './SwapDetails.helpers';
 import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 
-const DEFAULT_CONTENT_PADDING = 20;
-
 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<HTMLDivElement | null>(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);
-
-  usePaddingRight({
-    elementRef: listRef,
-    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
-  });
+  const {
+    meta: { tokens },
+  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -301,6 +294,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             </Typography>
           </div>
         </HeaderDetails>
+
         <div className="output">
           <RouteCost
             fee={numberToString(
@@ -388,6 +382,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           })}
         </StepsList>
       </Container>
+
       <SwapDetailsModal
         state={modalState}
         onClose={() => setModalState(null)}

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/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/pages/SwapDetailsPage.tsx

@@ -6,6 +6,7 @@ import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
@@ -15,6 +16,9 @@ export function SwapDetailsPage() {
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
+  const { loadingStatus } = useMetaStore();
+
+  const showSkeleton = loading || loadingStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId
@@ -41,9 +45,12 @@ export function SwapDetailsPage() {
   };
   const swap = selectedSwap?.swap;
 
-  if (!swap) {
+  if (!swap || showSkeleton) {
     return (
-      <SwapDetailsPlaceholder requestId={requestId || ''} loading={loading} />
+      <SwapDetailsPlaceholder
+        requestId={requestId || ''}
+        showSkeleton={showSkeleton}
+      />
     );
   }