@rango-dev/widget-embedded 0.41.2-next.14 → 0.41.2-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.41.2-next.14",
+  "version": "0.41.2-next.16",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.8.0",
-    "@rango-dev/provider-all": "^0.44.1-next.6",
+    "@rango-dev/provider-all": "^0.44.1-next.7",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.44.1-next.6",
+    "@rango-dev/queue-manager-rango-preset": "^0.44.1-next.7",
     "@rango-dev/queue-manager-react": "^0.29.0",
     "@rango-dev/signer-solana": "^0.38.1-next.1",
-    "@rango-dev/ui": "^0.45.1-next.9",
-    "@rango-dev/wallets-core": "^0.42.1-next.5",
-    "@rango-dev/wallets-react": "^0.29.1-next.6",
-    "@rango-dev/wallets-shared": "^0.43.1-next.5",
+    "@rango-dev/ui": "^0.45.1-next.10",
+    "@rango-dev/wallets-core": "^0.42.1-next.6",
+    "@rango-dev/wallets-react": "^0.29.1-next.7",
+    "@rango-dev/wallets-shared": "^0.43.1-next.6",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { PropTypes } from './BlockchainsSection.types';
 
 import { i18n } from '@lingui/core';
@@ -12,20 +11,28 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
+import {
+  BLOCKCHAIN_LIST_SIZE,
+  BLOCKCHAIN_LIST_SIZE_COMPACT_MODE,
+} from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 
 import { Blockchains } from './BlockchainsSection.styles';
 
+const NUMBER_OF_LOADING_COMPACT_MODE = 6;
 const NUMBER_OF_LOADING = 12;
 
 export function BlockchainsSection(props: PropTypes) {
   const { blockchains, type, blockchain, onChange, onMoreClick } = props;
+  const { showCompactTokenSelector } = useUiStore();
   const blockchainsList = usePrepareBlockchainList(blockchains, {
-    limit: BLOCKCHAIN_LIST_SIZE,
+    limit: showCompactTokenSelector
+      ? BLOCKCHAIN_LIST_SIZE_COMPACT_MODE
+      : BLOCKCHAIN_LIST_SIZE,
     selected: blockchain?.name,
   });
 
@@ -41,16 +48,25 @@ export function BlockchainsSection(props: PropTypes) {
 
   return (
     <>
-      <Divider size={12} />
-      <Typography variant="label" size="large">
-        {i18n.t('Select Chain')}
-      </Typography>
+      {!showCompactTokenSelector && (
+        <>
+          <Divider size={12} />
+          <Typography variant="label" size="large">
+            {i18n.t('Select Chain')}
+          </Typography>
+        </>
+      )}
       <Divider size={12} />
       <Blockchains>
         {fetchStatus === 'loading' &&
-          Array.from(Array(NUMBER_OF_LOADING), (e) => (
-            <Skeleton key={e} variant="rounded" height={50} />
-          ))}
+          Array.from(
+            Array(
+              showCompactTokenSelector
+                ? NUMBER_OF_LOADING_COMPACT_MODE
+                : NUMBER_OF_LOADING
+            ),
+            (_, index) => <Skeleton key={index} variant="rounded" height={50} />
+          )}
         {fetchStatus === 'success' && (
           <>
             <BlockchainsChip

package/src/components/CustomTokenModal/CustomTokenModal.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { Button, darkTheme, styled } from '@rango-dev/ui';
 
 export const StyledLink = styled('a', {
   textDecoration: 'none',
@@ -55,3 +55,7 @@ export const Container = styled('div', {
     },
   },
 });
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -1,13 +1,7 @@
 import type { PropTypes } from './CustomTokenModal.types';
 
 import { i18n } from '@lingui/core';
-import {
-  Button,
-  Divider,
-  ExternalLinkIcon,
-  Image,
-  Typography,
-} from '@rango-dev/ui';
+import { Divider, ExternalLinkIcon, Image, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
@@ -16,7 +10,7 @@ import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
 import { generateExplorerLink } from './CustomTokenModal.helpers';
-import { Container, StyledLink } from './CustomTokenModal.styles';
+import { Container, StyledButton, StyledLink } from './CustomTokenModal.styles';
 
 export function CustomTokenModal(props: PropTypes) {
   const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
@@ -90,7 +84,7 @@ export function CustomTokenModal(props: PropTypes) {
       <Divider size={40} />
       <Divider size={10} />
 
-      <Button
+      <StyledButton
         id="widget-custom-token-modal-import-btn"
         variant="contained"
         size="large"
@@ -98,9 +92,9 @@ export function CustomTokenModal(props: PropTypes) {
         fullWidth
         onClick={onSubmitClick}>
         {i18n.t('Import Anyway')}
-      </Button>
+      </StyledButton>
       <Divider size={10} />
-      <Button
+      <StyledButton
         id="widget-custom-token-modal-learn-more-btn"
         variant="outlined"
         size="large"
@@ -108,7 +102,7 @@ export function CustomTokenModal(props: PropTypes) {
         fullWidth
         onClick={onClickLearnMore}>
         {i18n.t('Learn More')}
-      </Button>
+      </StyledButton>
     </WatermarkedModal>
   );
 }

package/src/components/Layout/Layout.constants.ts

@@ -0,0 +1,3 @@
+export const WIDGET_MAX_HEIGHT = 700;
+export const WIDGET_MIN_HEIGHT = 425;
+export const COMPACT_TOKEN_SELECTOR_THRESHOLD = 640;

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

@@ -1,6 +1,6 @@
 import { css, styled } from '@rango-dev/ui';
 
-const WIDGET_HEIGHT = '700px';
+import { WIDGET_MAX_HEIGHT, WIDGET_MIN_HEIGHT } from './Layout.constants';
 
 export const LayoutContainer = css({
   borderRadius: '$primary',
@@ -20,10 +20,14 @@ export const Container = styled('div', {
     height: {
       auto: {
         height: 'auto',
-        maxHeight: WIDGET_HEIGHT,
+        maxHeight: WIDGET_MAX_HEIGHT,
       },
       fixed: {
-        height: WIDGET_HEIGHT,
+        minHeight: WIDGET_MIN_HEIGHT,
+        maxHeight: WIDGET_MAX_HEIGHT,
+        '@sm': {
+          height: WIDGET_MAX_HEIGHT,
+        },
       },
     },
     showBanner: {

package/src/components/Layout/Layout.tsx

@@ -4,12 +4,13 @@ import type { PropsWithChildren } from 'react';
 
 import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
 import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
+import useScreenDetect from '../../hooks/useScreenDetect';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
@@ -21,6 +22,10 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
+import {
+  COMPACT_TOKEN_SELECTOR_THRESHOLD,
+  WIDGET_MAX_HEIGHT,
+} from './Layout.constants';
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import {
   BannerContainer,
@@ -42,7 +47,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   const {
     config: { features, theme },
   } = useAppStore();
-  const { watermark } = useUiStore();
+  const { watermark, setShowCompactTokenSelector } = useUiStore();
 
   const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
@@ -62,6 +67,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   } = useUiStore();
   const navigateBack = useNavigateBack();
   const { manager } = useManager();
+  const { isTablet, isMobile } = useScreenDetect();
   const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
     ({ swap }) => swap
   );
@@ -127,6 +133,37 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     setOpenRefreshModal(fetchStatus === 'failed');
   }, [fetchStatus]);
 
+  useLayoutEffect(() => {
+    const isFixedHeight =
+      height === 'auto' || !containerRef.current || isAppLoadedIntoIframe();
+    const isSmallScreen = isMobile || isTablet;
+
+    const handler = () => {
+      if (isFixedHeight) {
+        return;
+      }
+
+      if (isSmallScreen) {
+        containerRef.current.style.height = `${
+          window.innerHeight - containerRef.current.offsetTop
+        }px`;
+      } else {
+        containerRef.current.style.height = `${WIDGET_MAX_HEIGHT}px`;
+      }
+
+      setShowCompactTokenSelector(
+        parseFloat(containerRef.current.style.height) <
+          COMPACT_TOKEN_SELECTOR_THRESHOLD
+      );
+    };
+
+    handler();
+
+    window.addEventListener('resize', handler);
+
+    return () => window.removeEventListener('resize', handler);
+  }, [height, isMobile, isTablet]);
+
   return (
     <Container
       height={height}

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -9,12 +9,11 @@ import { Layout } from '../Layout';
 import { LoadingSwapDetails } from '../LoadingSwapDetails';
 
 import {
-  Container,
   datePlaceholderStyles,
-  HeaderDetails,
   PlaceholderContainer,
   requestIdStyles,
   rowStyles,
+  SkeletonContainer,
 } from './SwapDetails.styles';
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
@@ -26,37 +25,35 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (
-        <Container>
-          <HeaderDetails>
-            <div className={rowStyles()}>
-              <Typography variant="label" size="large" color="neutral700">
-                {`${i18n.t('Request ID')}`}
-              </Typography>
-              <div className={requestIdStyles()}>
-                <Typography variant="label" size="small" color="neutral700">
-                  <Skeleton width={60} height={10} variant="rounded" />
-                </Typography>
-                <Divider direction="horizontal" size={4} />
-                <Skeleton width={16} height={16} variant="rectangular" />
-                <Divider direction="horizontal" size={4} />
-                <Skeleton width={16} height={16} variant="rectangular" />
-              </div>
-            </div>
-            <div className={rowStyles()}>
-              <Typography
-                className={datePlaceholderStyles()}
-                variant="label"
-                size="large"
-                color="neutral700">
-                <Skeleton width={60} height={10} variant="rounded" />
-              </Typography>
+        <SkeletonContainer>
+          <div className={rowStyles()}>
+            <Typography variant="label" size="large" color="neutral700">
+              {`${i18n.t('Request ID')}`}
+            </Typography>
+            <div className={requestIdStyles()}>
               <Typography variant="label" size="small" color="neutral700">
                 <Skeleton width={60} height={10} variant="rounded" />
               </Typography>
+              <Divider direction="horizontal" size={4} />
+              <Skeleton width={16} height={16} variant="rectangular" />
+              <Divider direction="horizontal" size={4} />
+              <Skeleton width={16} height={16} variant="rectangular" />
             </div>
-          </HeaderDetails>
+          </div>
+          <div className={rowStyles()}>
+            <Typography
+              className={datePlaceholderStyles()}
+              variant="label"
+              size="large"
+              color="neutral700">
+              <Skeleton width={60} height={10} variant="rounded" />
+            </Typography>
+            <Typography variant="label" size="small" color="neutral700">
+              <Skeleton width={60} height={10} variant="rounded" />
+            </Typography>
+          </div>
           <LoadingSwapDetails />
-        </Container>
+        </SkeletonContainer>
       )}
       {!showSkeleton && (
         <PlaceholderContainer>

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

@@ -1,16 +1,10 @@
 import { css, darkTheme, styled, Typography } from '@rango-dev/ui';
 
-import { ScrollableArea } from '../Layout';
+import { PageContainer } from '../Layout';
 
-export const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  overflow: 'hidden',
-});
+export const Container = styled(PageContainer, {
+  overflowY: 'auto',
 
-export const HeaderDetails = styled('div', {
-  width: '100%',
   '& ._icon-button': {
     '&:hover': {
       '& svg': {
@@ -23,7 +17,21 @@ export const HeaderDetails = styled('div', {
   },
 });
 
-export const StepsList = styled(ScrollableArea, {
+export const SkeletonContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  overflow: 'hidden',
+});
+
+export const RequestIdContainer = styled('div', {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: '$background',
+});
+
+export const StepsList = styled('div', {
   padding: '$0 $20 $20 $20',
 });
 

package/src/components/SwapDetails/SwapDetails.tsx

@@ -60,7 +60,7 @@ import {
 import { getSwapDate } from '../../utils/time';
 import { getConciseAddress } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
-import { Layout, PageContainer } from '../Layout';
+import { Layout } from '../Layout';
 import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
@@ -69,10 +69,11 @@ import {
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import {
+  Container,
   ErrorMessages,
-  HeaderDetails,
   MessageText,
   outputStyles,
+  RequestIdContainer,
   requestIdStyles,
   rowStyles,
   StepsList,
@@ -90,7 +91,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
   const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
-  const listRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
@@ -313,60 +314,58 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <PageContainer compact view>
-        <HeaderDetails>
-          <div className={rowStyles()}>
-            <Typography variant="label" size="large" color="neutral700">
-              {`${i18n.t('Request ID')}`}
+      <Container compact ref={containerRef}>
+        <RequestIdContainer className={rowStyles()}>
+          <Typography variant="label" size="large" color="neutral700">
+            {`${i18n.t('Request ID')}`}
+          </Typography>
+          <div className={requestIdStyles()}>
+            <Typography variant="label" size="small" color="neutral700">
+              {requestId}
             </Typography>
-            <div className={requestIdStyles()}>
-              <Typography variant="label" size="small" color="neutral700">
-                {requestId}
-              </Typography>
+            <Tooltip
+              container={getContainer()}
+              content={
+                isCopied
+                  ? i18n.t('Copied To Clipboard')
+                  : i18n.t('Copy Request ID')
+              }
+              open={isCopied || undefined}
+              side="bottom"
+              alignOffset={-16}
+              align="end">
+              <IconButton
+                id="widget-swap-details-done-copy-icon-btn"
+                variant="ghost"
+                onClick={handleCopy.bind(null, requestId || '')}>
+                {isCopied ? (
+                  <DoneIcon size={16} color="secondary" />
+                ) : (
+                  <CopyIcon size={16} color="gray" />
+                )}
+              </IconButton>
+            </Tooltip>
+
+            <StyledLink
+              target="_blank"
+              href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
               <Tooltip
                 container={getContainer()}
-                content={
-                  isCopied
-                    ? i18n.t('Copied To Clipboard')
-                    : i18n.t('Copy Request ID')
-                }
-                open={isCopied || undefined}
-                side="bottom"
-                alignOffset={-16}
-                align="end">
-                <IconButton
-                  id="widget-swap-details-done-copy-icon-btn"
-                  variant="ghost"
-                  onClick={handleCopy.bind(null, requestId || '')}>
-                  {isCopied ? (
-                    <DoneIcon size={16} color="secondary" />
-                  ) : (
-                    <CopyIcon size={16} color="gray" />
-                  )}
-                </IconButton>
+                content={i18n.t('View on Rango Explorer')}
+                side="bottom">
+                <RangoExplorerIcon size={20} />
               </Tooltip>
-
-              <StyledLink
-                target="_blank"
-                href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
-                <Tooltip
-                  container={getContainer()}
-                  content={i18n.t('View on Rango Explorer')}
-                  side="bottom">
-                  <RangoExplorerIcon size={20} />
-                </Tooltip>
-              </StyledLink>
-            </div>
-          </div>
-          <div className={rowStyles()}>
-            <Typography variant="label" size="large" color="neutral700">
-              {swap.finishTime ? i18n.t('Finished at') : i18n.t('Created at')}
-            </Typography>
-            <Typography variant="label" size="small" color="neutral700">
-              {swapDate}
-            </Typography>
+            </StyledLink>
           </div>
-        </HeaderDetails>
+        </RequestIdContainer>
+        <div className={rowStyles()}>
+          <Typography variant="label" size="large" color="neutral700">
+            {swap.finishTime ? i18n.t('Finished at') : i18n.t('Created at')}
+          </Typography>
+          <Typography variant="label" size="small" color="neutral700">
+            {swapDate}
+          </Typography>
+        </div>
 
         <div className={outputStyles()}>
           <QuoteCost
@@ -433,7 +432,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Typography>
         </div>
         <Divider size={8} />
-        <StepsList ref={listRef}>
+        <StepsList>
           {steps.map((step, index) => {
             const key = index;
             const state = getStepState(swap.steps[index]);
@@ -447,7 +446,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 key={key}
                 step={step}
                 type="swap-progress"
-                ref={listRef}
+                ref={containerRef}
                 state={state}
                 hasSeparator={index !== 0}
                 tabIndex={key}
@@ -457,7 +456,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             );
           })}
         </StepsList>
-      </PageContainer>
+      </Container>
 
       <SwapDetailsModal
         state={modalState}

package/src/components/WalletStatefulConnect/DerivationPath.styles.ts

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@rango-dev/ui';
+import { Button, styled, Typography } from '@rango-dev/ui';
 
 export const InputsContainer = styled('div', {
   paddingTop: '$30',
@@ -15,3 +15,7 @@ export const derivationPathInputStyles = {
   backgroundColor: '$neutral200',
   borderRadius: '$sm',
 };
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -2,14 +2,7 @@ import type { PropTypes } from './DerivationPath.types';
 import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
-import {
-  Button,
-  Divider,
-  Image,
-  MessageBox,
-  Select,
-  TextField,
-} from '@rango-dev/ui';
+import { Divider, Image, MessageBox, Select, TextField } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
 import {
@@ -21,6 +14,7 @@ import {
   InputLabel,
   InputsContainer,
 } from './DerivationPath.styles';
+import { StyledButton } from './Namespaces.styles';
 
 const DEFAULT_DERIVATION_PATH_INDEX = '0';
 
@@ -130,7 +124,7 @@ export function DerivationPath(props: PropTypes) {
         />
       </InputsContainer>
 
-      <Button
+      <StyledButton
         id="widget-derivation-path-confirm-btn"
         type="primary"
         onClick={handleConfirm}
@@ -138,7 +132,7 @@ export function DerivationPath(props: PropTypes) {
           !derivationPaths || !selectedDerivationPathId || !derivationPathIndex
         }>
         {i18n.t('Confirm')}
-      </Button>
+      </StyledButton>
     </>
   );
 }

package/src/components/WalletStatefulConnect/Namespaces.styles.ts

@@ -1,4 +1,4 @@
-import { Image, styled } from '@rango-dev/ui';
+import { Button, Image, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
@@ -60,3 +60,7 @@ export const NamespaceLogo = styled(Image, {
     },
   },
 });
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -13,7 +13,7 @@ import {
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { NamespaceListItem } from './NamespaceListItem';
-import { NamespaceList } from './Namespaces.styles';
+import { NamespaceList, StyledButton } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;
@@ -148,13 +148,13 @@ export function Namespaces(props: PropTypes) {
         )}
       </NamespaceList>
       <Divider size={20} />
-      <Button
+      <StyledButton
         id="widget-name-space-confirm-btn"
         type="primary"
         disabled={!selectedNamespaces.length}
         onClick={() => props.onConfirm(selectedNamespaces)}>
         {i18n.t('Connect')}
-      </Button>
+      </StyledButton>
     </>
   );
 }

package/src/constants/configs.ts

@@ -1 +1,2 @@
+export const BLOCKCHAIN_LIST_SIZE_COMPACT_MODE = 4;
 export const BLOCKCHAIN_LIST_SIZE = 10;