@rango-dev/ui 0.45.1-next.1 → 0.45.1-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.45.1-next.1",
+  "version": "0.45.1-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,13 +53,13 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.43.1-next.1",
+    "@rango-dev/wallets-shared": "^0.43.1-next.6",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
-    "rango-types": "^0.1.81",
+    "rango-types": "^0.1.83",
     "react-virtuoso": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -21,13 +21,18 @@ export function MessageBox(props: PropsWithChildren<PropTypes>) {
       <Typography
         color={type === 'loading' ? 'info500' : `${type}500`}
         variant="title"
-        size="medium">
+        size="medium"
+        className="_message_box_title">
         {title}
       </Typography>
       <Divider size={4} />
       <Description>
         {typeof description === 'string' ? (
-          <Typography color="neutral700" variant="body" size="medium">
+          <Typography
+            color="neutral700"
+            variant="body"
+            size="medium"
+            className="_message_box_description">
             {description}
           </Typography>
         ) : (

package/src/components/Modal/Modal.styles.ts

@@ -27,6 +27,7 @@ export const BackDrop = styled('div', {
 export const ModalContainer = styled('div', {
   backgroundColor: '$background',
   width: '100%',
+  maxHeight: '100%',
   borderRadius: '$primary',
   display: 'flex',
   flexDirection: 'column',

package/src/components/StepDetails/StepDetails.tsx

@@ -24,6 +24,8 @@ import {
   tokensStyles,
 } from './StepDetails.styles.js';
 
+const HIGHT_OF_STICKY_HEADER = 45;
+
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
   (props, parentRef) => {
     const {
@@ -38,6 +40,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
 
     const { from, to, swapper } = step;
     const containerRef = useRef<HTMLDivElement>(null);
+    const childElement = containerRef.current;
     const isCompleted = state === 'completed' || state === 'error';
     const swappers: InternalSwap[] = step.internalSwaps?.length
       ? step.internalSwaps
@@ -52,12 +55,11 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
     useEffect(() => {
       const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
         ?.current;
-      const childElement = containerRef.current;
       if (isFocused && childElement && parentElement) {
         parentElement.scrollTop =
-          childElement.offsetTop - parentElement.offsetTop;
+          childElement.offsetTop - HIGHT_OF_STICKY_HEADER;
       }
-    }, [isFocused]);
+    }, [isFocused, childElement]);
 
     return (
       <Container

package/src/components/SwapListItem/SwapListItem.tsx

@@ -41,6 +41,7 @@ export function SwapListItem(props: PropsWithChildren<SwapListItemPropTypes>) {
     status,
     swapTokenData,
     tooltipContainer,
+    currentStep,
   } = props;
   return (
     <Main onClick={onClick.bind(null, requestId)}>
@@ -62,6 +63,7 @@ export function SwapListItem(props: PropsWithChildren<SwapListItemPropTypes>) {
           data={swapTokenData}
           status={status}
           tooltipContainer={tooltipContainer}
+          currentStep={currentStep}
         />
       </Container>
     </Main>

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -1,3 +1,5 @@
+import type { PendingSwapStep } from 'rango-types';
+
 export type Status = 'running' | 'failed' | 'success';
 
 export interface SwapListItemProps {
@@ -8,6 +10,7 @@ export interface SwapListItemProps {
   swapTokenData: SwapTokenData;
   onlyShowTime?: boolean;
   tooltipContainer?: HTMLElement;
+  currentStep: PendingSwapStep | null;
 }
 
 export interface LoadingProps {

package/src/components/SwapListItem/SwapToken.tsx

@@ -72,6 +72,7 @@ export function SwapToken(props: PropTypes) {
     },
     status,
     tooltipContainer,
+    currentStep,
   } = props;
 
   return (
@@ -109,7 +110,9 @@ export function SwapToken(props: PropTypes) {
             </Typography>
           </TopSection>
           <Typography size="small" variant="body" color="neutral700">
-            {i18n.t('Waiting for bridge transaction')}
+            {currentStep?.fromBlockchain === currentStep?.toBlockchain
+              ? i18n.t('Waiting for the swap transaction')
+              : i18n.t('Waiting for the bridge transaction')}
           </Typography>
         </Layout>
       ) : (

package/src/components/SwapListItem/SwapToken.types.ts

@@ -3,11 +3,13 @@ import type {
   Status,
   SwapTokenData,
 } from './SwapListItem.types.js';
+import type { PendingSwapStep } from 'rango-types';
 
 export interface SwapTokenProps {
   data: SwapTokenData;
   status: Status;
   tooltipContainer?: HTMLElement;
+  currentStep: PendingSwapStep | null;
 }
 
 export type PropTypes = SwapTokenProps | LoadingProps;

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -86,6 +86,10 @@ export const formStyles = css({
   alignItems: 'center',
 });
 
+export const TokenSectionContainer = styled('div', {
+  width: '60%',
+});
+
 export const labelStyles = css({
   display: 'flex',
   justifyContent: 'space-between',

package/src/containers/SwapInput/SwapInput.tsx

@@ -22,6 +22,7 @@ import {
   labelStyles,
   MaxButton,
   textStyles,
+  TokenSectionContainer,
   UsdPrice,
   ValueTypography,
 } from './SwapInput.styles.js';
@@ -83,22 +84,24 @@ export function SwapInput(props: SwapInputPropTypes) {
         </div>
       </div>
       <div className={formStyles()}>
-        <TokenSection
-          chain={props.chain.displayName}
-          chianImageId={
-            props.mode === 'To'
-              ? UI_ID.SWAP_TO_CHAIN_IMAGE_ID
-              : UI_ID.SWAP_FROM_CHAIN_IMAGE_ID
-          }
-          tokenSymbol={props.token.displayName}
-          error={props.error}
-          chainImage={props.chain.image}
-          tokenImage={props.token.image}
-          onClick={props.onClickToken}
-          loading={props.loading}
-          warning={props.token.securityWarning}
-          tooltipContainer={props.tooltipContainer}
-        />
+        <TokenSectionContainer>
+          <TokenSection
+            chain={props.chain.displayName}
+            chianImageId={
+              props.mode === 'To'
+                ? UI_ID.SWAP_TO_CHAIN_IMAGE_ID
+                : UI_ID.SWAP_FROM_CHAIN_IMAGE_ID
+            }
+            tokenSymbol={props.token.displayName}
+            error={props.error}
+            chainImage={props.chain.image}
+            tokenImage={props.token.image}
+            onClick={props.onClickToken}
+            loading={props.loading}
+            warning={props.token.securityWarning}
+            tooltipContainer={props.tooltipContainer}
+          />
+        </TokenSectionContainer>
         <div className={amountStyles()}>
           {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
             <>

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -1,11 +1,15 @@
 import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles.js';
-import { Button } from '../../components/index.js';
+import {
+  Button,
+  type TooltipPropTypes,
+  Typography,
+} from '../../components/index.js';
 import { css, darkTheme, styled } from '../../theme.js';
 
 export const Container = styled(Button, {
+  width: '100%',
   maxWidth: '180px',
   minWidth: '130px',
-  flexGrow: 1,
   backgroundColor: 'transparent',
   borderRadius: '$xs',
 
@@ -39,11 +43,16 @@ export const Container = styled(Button, {
       backgroundColor: '$$color !important',
     },
   },
+
+  '& > span': {
+    width: '100%',
+  },
 });
 
 export const chainNameStyles = css();
 
 export const TokenSectionContainer = styled('div', {
+  width: '100%',
   maxWidth: '170px',
   padding: '$2 $5',
   display: 'flex',
@@ -68,6 +77,8 @@ export const tokenChainStyles = css({
   paddingLeft: '$10',
   flexGrow: 1,
   textAlign: 'left',
+  width: '100%',
+  overflow: 'hidden',
 });
 
 export const skeletonStyles = css({
@@ -76,8 +87,30 @@ export const skeletonStyles = css({
 });
 
 export const TitleContainer = styled('div', {
+  width: '100%',
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
-  flexWrap: 'wrap',
+});
+
+export const Title = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const SymbolTooltipStyles: TooltipPropTypes['styles'] = {
+  content: {
+    padding: '$10',
+  },
+  root: {
+    zIndex: 10,
+    maxWidth: 'calc(100% - 18px)',
+    display: 'flex',
+    justifyContent: 'start',
+  },
+};
+
+export const SymbolTooltipContent = styled(Typography, {
+  maxWidth: 217,
+  lineBreak: 'anywhere',
 });

package/src/containers/SwapInput/TokenSection.tsx

@@ -8,6 +8,7 @@ import {
   ChainToken,
   Divider,
   Skeleton,
+  Tooltip,
   Typography,
 } from '../../components/index.js';
 
@@ -15,6 +16,9 @@ import {
   chainNameStyles,
   Container,
   skeletonStyles,
+  SymbolTooltipContent,
+  SymbolTooltipStyles,
+  Title,
   TitleContainer,
   tokenChainStyles,
   TokenSectionContainer,
@@ -33,6 +37,9 @@ export function TokenSection(props: TokenSectionProps) {
     warning,
     tooltipContainer,
   } = props;
+
+  const tokenSelected = !error && !loading && !!tokenSymbol;
+
   return (
     <Container variant="default" disabled={error || loading} onClick={onClick}>
       <TokenSectionContainer>
@@ -54,11 +61,28 @@ export function TokenSection(props: TokenSectionProps) {
           ) : (
             <>
               <TitleContainer>
-                <Typography variant="title" size="medium">
-                  {error || (!loading && !tokenSymbol)
-                    ? i18n.t('Select Token')
-                    : tokenSymbol}
-                </Typography>
+                {tokenSelected ? (
+                  <Tooltip
+                    styles={SymbolTooltipStyles}
+                    align="start"
+                    side="bottom"
+                    alignOffset={-15}
+                    sideOffset={15}
+                    container={tooltipContainer}
+                    content={
+                      <SymbolTooltipContent variant="body" size="xsmall">
+                        {tokenSymbol}
+                      </SymbolTooltipContent>
+                    }>
+                    <Title variant="title" size="medium">
+                      {tokenSymbol}
+                    </Title>
+                  </Tooltip>
+                ) : (
+                  <Typography variant="title" size="medium">
+                    {i18n.t('Select Token')}
+                  </Typography>
+                )}
                 {warning && (
                   <>
                     <Divider size={4} direction="horizontal" />

package/src/icons/Login.tsx

@@ -0,0 +1,23 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgLogin(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.6529 3.02412C14.39 2.93962 14.1084 3.08424 14.0239 3.34714C13.9394 3.61004 14.084 3.89166 14.3469 3.97615C17.6085 5.02444 19.9999 8.21088 19.9999 12.0001C19.9999 15.7894 17.6085 18.9758 14.3469 20.0241C14.084 20.1086 13.9394 20.3902 14.0239 20.6531C14.1084 20.916 14.39 21.0606 14.6529 20.9762C18.3399 19.7911 20.9999 16.2112 20.9999 12.0001C20.9999 7.78902 18.3399 4.20913 14.6529 3.02412Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.3536 8.14645C12.1583 7.95119 11.8417 7.95119 11.6464 8.14645C11.4512 8.34171 11.4512 8.65829 11.6464 8.85356L14.2929 11.5H3.5C3.22386 11.5 3 11.7239 3 12C3 12.2762 3.22386 12.5 3.5 12.5H14.2929L11.6464 15.1464C11.4512 15.3417 11.4512 15.6583 11.6464 15.8536C11.8417 16.0488 12.1583 16.0488 12.3536 15.8536L15.8536 12.3536C15.9473 12.2598 16 12.1326 16 12C16 11.8674 15.9473 11.7402 15.8536 11.6465L12.3536 8.14645Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgLogin;

package/src/icons/index.ts

@@ -49,6 +49,7 @@ export { default as LightModeIcon } from './LightMode.js';
 export { default as LinkIcon } from './Link.js';
 export { default as LoadingIcon } from './Loading.js';
 export { default as LogoWithTextIcon } from './LogoWithText.js';
+export { default as LoginIcon } from './Login.js';
 export { default as LogoutIcon } from './Logout.js';
 export { default as MenuIcon } from './Menu.js';
 export { default as MoneyBagIcon } from './MoneyBag.js';