@rango-dev/widget-embedded 0.23.1-next.18 → 0.23.1-next.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.18",
+  "version": "0.23.1-next.19",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.14",
+    "@rango-dev/ui": "^0.29.1-next.15",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",

package/src/components/Quote/Quote.tsx

@@ -300,6 +300,8 @@ export function Quote(props: QuoteProps) {
     GAS_FEE_MAX_DECIMALS
   );
 
+  const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
+
   return fullExpandedMode ? (
     <FullExpandedQuote
       selected={selected}
@@ -308,6 +310,7 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
+      feeWarning={feeWarning}
       percentageChange={percentageChange}
       warningLevel={priceImpactWarningLevel}
       outputPrice={{
@@ -345,7 +348,7 @@ export function Quote(props: QuoteProps) {
             quote={quote}
             time={totalTime}
             fee={fee}
-            feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
+            feeWarning={feeWarning}
             showModalFee={showModalFee}
             steps={numberOfSteps}
           />

package/src/components/Quotes/Quotes.tsx

@@ -79,7 +79,7 @@ export function Quotes(props: PropTypes) {
                 expanded={false}
               />
             )}
-            <Divider size={16} />
+            {index !== ITEM_SKELETON_COUNT - 1 && <Divider size={16} />}
           </React.Fragment>
         ))}
 
@@ -97,9 +97,10 @@ export function Quotes(props: PropTypes) {
             </>
           )}
           {hasQuotes
-            ? sortQuotes.map((quote) => {
+            ? sortQuotes.map((quote, index) => {
                 const quoteWarning = getQuoteWarning(quote);
                 const quoteError = getQuoteError(quote.swaps);
+                const lastIndex = sortQuotes.length - 1 === index;
 
                 return (
                   <React.Fragment key={quote.requestId}>
@@ -124,7 +125,7 @@ export function Quotes(props: PropTypes) {
                       }}
                       type="list-item"
                     />
-                    <Divider size={16} />
+                    {!lastIndex && <Divider size={16} />}
                   </React.Fragment>
                 );
               })

package/src/containers/App/App.styles.ts

@@ -1,13 +1,9 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
-
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -24,6 +24,7 @@ export const Container = styled('div', {
 
   '&.is-hidden': {
     width: 0,
+    height: 0,
     opacity: 0,
     marginLeft: 0,
   },

package/src/pages/Home.tsx

@@ -25,7 +25,7 @@ const MainContainer = styled('div', {
   display: 'grid',
   gridTemplateColumns: 'auto auto',
   alignItems: 'flex-start',
-  height: 700,
+  maxHeight: 700,
   '& .footer__alert': {
     paddingTop: '0',
   },