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

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA4T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAkU9B"}

package/dist/pages/LiquiditySourcePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBA6H5D"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBA+H5D"}

package/dist/pages/SettingsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA+C3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA8C3B"}

package/dist/utils/ui.d.ts

@@ -1,6 +1,6 @@
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
+import React from 'react';
 interface CustomizedThemeValues {
     id: string;
     tokens: Parameters<typeof createTheme>[0];
@@ -10,6 +10,9 @@ interface CustomizedTheme {
     dark: undefined | CustomizedThemeValues;
 }
 export declare function customizedThemeTokens(colors: WidgetTheme['colors']): CustomizedTheme;
-export declare function joinList(list: React.JSX.Element[], divider: React.JSX.Element): React.JSX.Element[];
+export declare function joinList(list: {
+    element: React.JSX.Element;
+    key: string;
+}[], divider: React.JSX.Element): React.JSX.Element[];
 export {};
 //# sourceMappingURL=ui.d.ts.map

package/dist/utils/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,EACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,uBAe3B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAMjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE;IAAE,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,EACnD,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,uBAiB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.17",
+  "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.13",
+    "@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/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,11 +1,4 @@
-import {
-  Button,
-  css,
-  darkTheme,
-  IconButton,
-  styled,
-  TextField,
-} from '@rango-dev/ui';
+import { css, darkTheme, IconButton, styled, TextField } from '@rango-dev/ui';
 
 export const Title = styled('div', {
   display: 'flex',
@@ -130,10 +123,11 @@ export const StyledTextField = styled(TextField, {
 
 export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
 
-export const CustomDestinationButton = styled(Button, {
+export const CustomDestinationButton = styled('div', {
   width: '100%',
-  borderRadius: '$sm !important',
-  padding: '$15 !important',
+  borderRadius: '$sm',
+  display: 'flex',
+  padding: '$15',
   justifyContent: 'space-between',
   alignItems: 'center',
   $$color: '$colors$neutral100',

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -417,17 +417,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         open={showCustomDestination}
                         triggerAnchor="top"
                         trigger={
-                          <CustomDestinationButton
-                            fullWidth
-                            variant="default"
-                            suffix={
-                              <ExpandedIcon
-                                orientation={
-                                  showCustomDestination ? 'up' : 'down'
-                                }>
-                                <ChevronDownIcon size={10} color="gray" />
-                              </ExpandedIcon>
-                            }>
+                          <CustomDestinationButton>
                             <div className="button__content">
                               <WalletIcon size={18} color="info" />
                               <Divider size={4} direction="horizontal" />
@@ -435,6 +425,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
                                 {i18n.t('Send to a different address')}
                               </Typography>
                             </div>
+                            <ExpandedIcon
+                              orientation={
+                                showCustomDestination ? 'up' : 'down'
+                              }>
+                              <ChevronDownIcon size={10} color="gray" />
+                            </ExpandedIcon>
                           </CustomDestinationButton>
                         }
                         onClickTrigger={() =>

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -198,7 +198,7 @@ export function WalletList(props: PropTypes) {
               )
             : undefined;
         return (
-          <>
+          <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
             <WalletModal
               open={openWalletStateModal === wallet.type}
               onClose={handleCloseWalletModal}
@@ -302,7 +302,7 @@ export function WalletList(props: PropTypes) {
               disabled={!isActiveTab}
               {...wallet}
             />
-          </>
+          </React.Fragment>
         );
       })}
       {shouldShowMoreWallets && (

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.styles.ts

@@ -1,5 +1,5 @@
 import { ListItem, styled } from '@rango-dev/ui';
 
-export const CustomeListItem = styled(ListItem, {
+export const CustomListItem = styled(ListItem, {
   height: 61,
 });

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.tsx

@@ -3,16 +3,16 @@ import React from 'react';
 
 import { LiquiditySourceList } from '../SettingsContainer';
 
-import { CustomeListItem } from './LoadingLiquiditySourceList.styles';
+import { CustomListItem } from './LoadingLiquiditySourceList.styles';
 
 const ITEM_SKELETON_COUNT = 30;
 export function LoadingLiquiditySourceList() {
   return (
     <LiquiditySourceList>
-      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
-        <CustomeListItem
+      {Array.from(Array(ITEM_SKELETON_COUNT), (_, index) => (
+        <CustomListItem
           hasDivider
-          key={e}
+          key={index}
           start={<Skeleton variant="circular" width={35} height={35} />}
           title={<Skeleton variant="text" size="large" width={90} />}
           end={<Checkbox checked={false} />}

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={{
@@ -329,10 +332,10 @@ export function Quote(props: QuoteProps) {
               {sortedQuoteTags.map((tag, index) => {
                 const key = `${tag.value}_${index}`;
                 return (
-                  <>
-                    <QuoteTag label={tag.label} key={key} value={tag.value} />
+                  <React.Fragment key={key}>
+                    <QuoteTag label={tag.label} value={tag.value} />
                     <Divider size={4} direction="horizontal" />
-                  </>
+                  </React.Fragment>
                 );
               })}
             </TagContainer>
@@ -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/Quote/QuoteTrigger.tsx

@@ -73,14 +73,14 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
           );
 
           return isMobile || isTablet ? (
-            <>
+            <React.Fragment key={key}>
               <ImageComponent
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
-            </>
+            </React.Fragment>
           ) : (
             <React.Fragment key={key}>
               {numberOfSteps <= MAX_STEPS ||
@@ -148,12 +148,11 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </Typography>
             <Divider direction="horizontal" size={4} />
             {blockchains.map((blockchain, index) => (
-              <>
+              <React.Fragment key={blockchain.displayName}>
                 {blockchains.length <= MAX_BLOCKCHAINS ||
                 (blockchains.length > MAX_BLOCKCHAINS &&
                   index < MAX_BLOCKCHAINS - 1) ? (
                   <ImageComponent
-                    key={blockchain.displayName}
                     content={''}
                     src={blockchain.image}
                     open={false}
@@ -190,7 +189,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     </Tooltip>
                   )
                 )}
-              </>
+              </React.Fragment>
             ))}
 
             <Divider direction="horizontal" size={32} />

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/components/Slippage/Slippage.tsx

@@ -47,19 +47,17 @@ export function Slippage() {
         {SLIPPAGES.map((slippageItem, index) => {
           const key = `slippage-${index}`;
           return (
-            <>
-              <SlippageChip
-                key={key}
-                onClick={() => {
-                  if (customSlippage) {
-                    setCustomSlippage(null);
-                  }
-                  setSlippage(slippageItem);
-                }}
-                selected={!customSlippage && slippageItem === slippage}
-                label={`${slippageItem.toString()}%`}
-              />
-            </>
+            <SlippageChip
+              key={key}
+              onClick={() => {
+                if (customSlippage) {
+                  setCustomSlippage(null);
+                }
+                setSlippage(slippageItem);
+              }}
+              selected={!customSlippage && slippageItem === slippage}
+              label={`${slippageItem.toString()}%`}
+            />
           );
         })}
         <TextField

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

@@ -371,7 +371,13 @@ export function ConfirmSwapPage() {
         </div>
         <Divider size="12" />
 
-        {joinList(alerts, <Divider size={10} />)}
+        {joinList(
+          alerts.map((alert, index) => ({
+            element: alert,
+            key: `alert-${index}`,
+          })),
+          <Divider size={10} />
+        )}
         {alerts.length > 0 ? <Divider size={10} /> : null}
 
         <QuoteInfo

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',
   },

package/src/pages/LiquiditySourcePage.tsx

@@ -136,11 +136,13 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fetchStatus === 'success' && (
             <LiquiditySourceList disabled={campaignMode}>
               {filteredList.map((sourceItem) => {
+                const { groupTitle, ...otherProps } = sourceItem;
+
                 return (
                   <React.Fragment key={sourceItem.id}>
                     <ListItemButton
                       style={{ height: '61px' }}
-                      {...sourceItem}
+                      {...otherProps}
                       selected={false}
                       hasDivider
                     />

package/src/pages/SettingsPage.tsx

@@ -32,7 +32,6 @@ export function SettingsPage() {
       updateCampaignMode('liquiditySources', undefined);
     }
   };
-
   return (
     <Layout
       header={{

package/src/utils/ui.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
 
 import {
   theme as baseThemeTokens,
   darkColors as defaultDarkColors,
 } from '@rango-dev/ui';
+import React from 'react';
 
 import { generateColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
@@ -73,18 +73,20 @@ export function customizedThemeTokens(
 }
 
 export function joinList(
-  list: React.JSX.Element[],
+  list: { element: React.JSX.Element; key: string }[],
   divider: React.JSX.Element
 ) {
   if (list.length <= 1) {
-    return list;
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
   }
 
   const output: React.JSX.Element[] = [];
   list.forEach((item, index) => {
-    output.push(item);
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
     if (index < list.length - 1) {
-      output.push(divider);
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
     }
   });