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

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.17",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

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

@@ -66,10 +66,8 @@ import {
 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();
@@ -80,6 +78,9 @@ export function SwapDetails(props: SwapDetailsProps) {
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
+  const {
+    meta: { tokens },
+  } = useMetaStore();
 
   usePaddingRight({
     elementRef: listRef,
@@ -301,6 +302,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             </Typography>
           </div>
         </HeaderDetails>
+
         <div className="output">
           <RouteCost
             fee={numberToString(
@@ -388,6 +390,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/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}
+      />
     );
   }