@rango-dev/widget-embedded 0.12.1-next.21 → 0.12.1-next.22

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBAua/C"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA6EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBA6a/C"}

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

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmBxC,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,UAAU,GACX,EAAE,SAAS,qBAsHX"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,UAAU,GACX,EAAE,SAAS,qBAsHX"}

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

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAK7C,OAAO,KAA6B,MAAM,OAAO,CAAC;AASlD,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAeD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,qBAgEhD"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAK7C,OAAO,KAA6B,MAAM,OAAO,CAAC;AAUlD,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAeD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,qBAiEhD"}

package/dist/utils/common.d.ts

@@ -6,4 +6,5 @@ export declare const colorShade: (col: string, amt: number) => string;
 export declare const generateRangeColors: (name: string, color: string) => {
     [x: string]: string;
 };
+export declare const getContainer: () => HTMLElement;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AACA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAqBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAuB9D,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AACA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAqBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAuB9D,CAAC;AAEF,eAAO,MAAM,YAAY,mBAC2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.21",
+  "version": "0.12.1-next.22",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.2",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.6",
     "@rango-dev/queue-manager-react": "^0.15.1-next.4",
-    "@rango-dev/ui": "^0.15.1-next.12",
+    "@rango-dev/ui": "^0.15.1-next.13",
     "@rango-dev/wallets-react": "^0.1.1-next.6",
     "@rango-dev/wallets-shared": "^0.15.1-next.4",
     "bignumber.js": "^9.1.1",

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -1,9 +1,13 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Chip = styled('button', {
   padding: '$10',
   borderRadius: '$sm',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -15,11 +19,19 @@ export const Chip = styled('button', {
     overflow: 'hidden',
   },
   '&:hover': {
-    backgroundColor: '$neutral400',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
   },
   '&:focus-visible': {
     outline: 0,
-    backgroundColor: '$neutral500',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
   },
   variants: {
     selected: {

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,6 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
+  darkTheme,
   IconButton,
   keyframes,
   styled,
@@ -45,14 +46,31 @@ export const WalletButton = styled('button', {
   border: '0',
   display: 'flex',
   justifyContent: 'center',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
   width: 110,
   position: 'relative',
+
   '&:hover': {
-    backgroundColor: '$surface600',
-    opacity: '0.8',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
   },
   variants: {
     selected: {
@@ -117,7 +135,27 @@ export const CustomDestinationButton = styled(Button, {
   padding: '$15 !important',
   justifyContent: 'space-between',
   alignItems: 'center',
-  backgroundColor: '$neutral100 !important',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$background: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$background: '$colors$info700',
+    },
+    backgroundColor: '$$background',
+    outline: 0,
+  },
 });
 
 export const CustomDestination = styled('div', {

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -407,6 +407,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                           }>
                           <CustomDestinationButton
                             fullWidth
+                            variant="default"
                             suffix={
                               <ExpandedIcon
                                 orientation={

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -1,6 +1,6 @@
-import { Button, darkTheme, styled } from '@rango-dev/ui';
+import { darkTheme, IconButton, styled } from '@rango-dev/ui';
 
-export const HeaderButton = styled(Button, {
+export const HeaderButton = styled(IconButton, {
   width: '$24',
   position: 'relative',
   padding: '0',

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -1,6 +1,7 @@
 export interface PropTypes {
   onClick: () => void;
   isConnected?: boolean;
+  container?: HTMLElement;
 }
 export interface HomeButtonsPropTypes {
   layoutRef: HTMLDivElement | null;

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -11,6 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
@@ -27,7 +28,10 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
 
   return (
     <>
-      <Tooltip side="top" content={i18n.t('Refresh')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Refresh')}>
         <HeaderButton
           variant="ghost"
           size="small"
@@ -37,12 +41,15 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         </HeaderButton>
       </Tooltip>
 
-      <Tooltip side="top" content={i18n.t('Notifications')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Notifications')}>
         <Popover
           align="center"
           collisionBoundary={layoutRef}
           collisionPadding={{ right: 20, left: 20 }}
-          container={document.getElementById('swap-box') as HTMLElement}
+          container={getContainer()}
           content={<NotificationContent />}>
           <HeaderButton
             size="small"
@@ -53,12 +60,18 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
           </HeaderButton>
         </Popover>
       </Tooltip>
-      <Tooltip side="top" content={i18n.t('Settings')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Settings')}>
         <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
           <SettingsIcon size={18} color="black" />
         </HeaderButton>
       </Tooltip>
-      <Tooltip side="top" content={i18n.t('Transactions History')}>
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Transactions History')}>
         <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
           <TransactionIcon size={18} color="black" />
         </HeaderButton>

package/src/components/HeaderButtons/WalletButton.tsx

@@ -8,7 +8,10 @@ import { ConnectedIcon, HeaderButton } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
   return (
-    <Tooltip side="top" content={i18n.t('Connect Wallet')}>
+    <Tooltip
+      container={props.container}
+      side="top"
+      content={i18n.t('Connect Wallet')}>
       <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
         {props.isConnected && <ConnectedIcon />}
         <WalletIcon size={18} color="black" />

package/src/components/Layout/Layout.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
+import { getContainer } from '../../utils/common';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { Container, Content, Footer } from './Layout.styles';
@@ -42,6 +43,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
             {header.suffix}
             {header.hasConnectWallet && (
               <WalletButton
+                container={getContainer()}
                 onClick={onConnectWallet}
                 isConnected={!!connectedWallets?.length}
               />

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -12,12 +12,6 @@ export const LiquiditySourceList = styled('ul', {
   overflowY: 'visible',
 });
 
-export const LiquiditySourceDivider = styled('li', {
-  margin: '0 auto',
-  width: '100%',
-  height: '1px',
-  backgroundColor: '$neutral300',
-});
 export const LiquiditySourceSuffix = styled('div', {
   width: 80,
   display: 'flex',

package/src/components/SettingsContainer/index.ts

@@ -1,6 +1,5 @@
 export {
   SettingsContainer,
-  LiquiditySourceDivider,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,

package/src/components/Slippage/Slippage.tsx

@@ -15,6 +15,7 @@ import {
   SLIPPAGES,
 } from '../../constants/swapSettings';
 import { useSettingsStore } from '../../store/settings';
+import { getContainer } from '../../utils/common';
 
 import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
@@ -32,7 +33,10 @@ export function Slippage() {
           {i18n.t('Slippage tolerance per swap')}
         </Typography>
         <Divider direction="horizontal" size={4} />
-        <Tooltip side="top" content={<SlippageTooltipContent />}>
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={<SlippageTooltipContent />}>
           <InfoIcon color="gray" />
         </Tooltip>
       </Head>

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

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -13,7 +13,12 @@ export const Container = styled('div', {
     justifyContent: 'space-between',
     alignItems: 'center',
     padding: '$10 $5',
-    borderBottom: '1px solid $neutral300',
+    borderBottom: '1px solid',
+    $$color: '$colors$neutral300',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    borderColor: '$$color',
     color: '$neutral500',
   },
   '& .request-id': {

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -4,6 +4,8 @@ import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
+
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
@@ -18,6 +20,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
       {showWalletButton && walletType && (
         <WalletContainer>
           <Wallet
+            container={getContainer()}
             title={getWalletInfo(walletType).name}
             image={getWalletInfo(walletType).img}
             type={walletType}

package/src/pages/ConfirmSwapPage.tsx

@@ -59,6 +59,7 @@ import {
   RouteWarningType,
   SlippageWarningType,
 } from '../types';
+import { getContainer } from '../utils/common';
 import {
   numberToString,
   secondsToString,
@@ -317,7 +318,10 @@ export function ConfirmSwapPage(props: PropTypes) {
         onBack: navigate.bind(null, -1),
         hasConnectWallet: true,
         suffix: (
-          <Tooltip side="bottom" content={i18n.t('Settings')}>
+          <Tooltip
+            container={getContainer()}
+            side="bottom"
+            content={i18n.t('Settings')}>
             <HeaderButton
               size="small"
               variant="ghost"
@@ -458,6 +462,9 @@ export function ConfirmSwapPage(props: PropTypes) {
         {showBestRoute && (
           <BestRoute
             expanded={true}
+            tooltipContainer={
+              document.getElementById('swap-box') as HTMLElement
+            }
             steps={formatBestRoute(bestRoute) ?? []}
             input={{
               value: numberToString(

package/src/pages/LiquiditySourcePage.tsx

@@ -18,7 +18,6 @@ import { Layout } from '../components/Layout';
 import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
 import { SearchInput } from '../components/SearchInput';
 import {
-  LiquiditySourceDivider,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,
@@ -146,8 +145,8 @@ export function LiquiditySourcePage({
                       style={{ height: '61px' }}
                       {...sourceItem}
                       selected={false}
+                      hasDivider
                     />
-                    <LiquiditySourceDivider />
                   </React.Fragment>
                 );
               })}

package/src/pages/WalletsPage.tsx

@@ -11,6 +11,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
 import { useMetaStore } from '../store/meta';
+import { getContainer } from '../utils/common';
 
 interface PropTypes {
   supportedWallets: WidgetConfig['wallets'];
@@ -79,6 +80,7 @@ export function WalletsPage({ config }: PropTypes) {
               <Fragment key={key}>
                 <Wallet
                   {...wallet}
+                  container={getContainer()}
                   onClick={(type) => {
                     void handleClick(type);
                   }}

package/src/utils/common.ts

@@ -78,3 +78,6 @@ export const generateRangeColors = (name: string, color: string) => {
   }
   return colors;
 };
+
+export const getContainer = () =>
+  document.getElementById('swap-box') as HTMLElement;