@rango-dev/widget-embedded 0.21.1-next.6 → 0.21.1-next.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.6",
+  "version": "0.21.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.26.0",
     "@rango-dev/queue-manager-react": "^0.25.0",
-    "@rango-dev/ui": "^0.27.1-next.4",
+    "@rango-dev/ui": "^0.27.1-next.5",
     "@rango-dev/wallets-react": "^0.12.0",
     "@rango-dev/wallets-shared": "^0.26.0",
     "bignumber.js": "^9.1.1",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { PropTypes } from './WalletList.type';
 import type { Wallet } from '../../types';
 import type { WalletInfo } from '@rango-dev/ui';
@@ -42,6 +41,7 @@ import {
   WalletImageContainer,
 } from './WalletList.styles';
 
+const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const { config } = useAppStore();
@@ -147,7 +147,9 @@ export function WalletList(props: PropTypes) {
           walletType: wallet.type,
           chain,
         });
-        const conciseAddress = address ? getConciseAddress(address) : '';
+        const conciseAddress = address
+          ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
+          : '';
 
         const experimentalChain = isExperimentalChain(blockchains(), chain);
 

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -1,12 +1,11 @@
 import type { PropTypes } from './CustomCollapsible.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import {
   CollapsibleContent,
   CollapsibleRoot,
-  EXPANDABLE_TRANSITION_DURATION,
   Trigger,
 } from './CustomCollapsible.styles';
 
@@ -22,14 +21,6 @@ export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
   } = props;
   const ref = useRef<HTMLDivElement | null>(null);
 
-  useLayoutEffect(() => {
-    if (open && ref.current) {
-      setTimeout(() => {
-        ref?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_TRANSITION_DURATION);
-    }
-  }, [open]);
-
   return (
     <CollapsibleRoot
       ref={ref}

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -39,7 +39,8 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
 
       {!isNotificationsHidden && (
         <Popover
-          align="center"
+          align="end"
+          alignOffset={-88}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>

package/src/components/NotificationContent/NotificationContent.styles.ts

@@ -3,6 +3,7 @@ import { styled } from '@rango-dev/ui';
 export const Container = styled('div', {
   padding: '$10',
   width: '350px',
+  maxWidth: '90vw',
   minHeight: '150px',
 });
 

package/src/components/Quote/Quote.tsx

@@ -13,7 +13,7 @@ import {
   Typography,
 } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
   PERCENTAGE_CHANGE_MAX_DECIMALS,
@@ -42,7 +42,6 @@ import {
   basicInfoStyles,
   ContainerInfoOutput,
   Content,
-  EXPANDABLE_QUOTE_TRANSITION_DURATION,
   FrameIcon,
   HorizontalSeparator,
   QuoteContainer,
@@ -69,7 +68,6 @@ export function Quote(props: QuoteProps) {
 
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
-  const prevExpanded = useRef(expanded);
   const roundedInput = numberToString(
     input.value,
     TOKEN_AMOUNT_MIN_DECIMALS,
@@ -190,7 +188,7 @@ export function Quote(props: QuoteProps) {
                 title={
                   error?.type === QuoteErrorType.BRIDGE_LIMIT
                     ? error?.recommendation
-                    : i18n.t('Slippage Error:')
+                    : i18n.t(`Slippage ${stepHasError ? 'Error' : 'Warning'}:`)
                 }
                 footer={
                   <FooterAlert>
@@ -263,14 +261,6 @@ export function Quote(props: QuoteProps) {
   const steps = getQuoteSteps(quote.result?.swaps ?? []);
   const numberOfSteps = steps.length;
   const tooltipContainer = getContainer();
-  useLayoutEffect(() => {
-    if (expanded && !prevExpanded.current && quoteRef.current) {
-      setTimeout(() => {
-        quoteRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_QUOTE_TRANSITION_DURATION);
-    }
-    prevExpanded.current = expanded;
-  }, [expanded, prevExpanded]);
 
   return (
     <>