@rango-dev/widget-embedded 0.23.1-next.30 → 0.23.1-next.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.30",
+  "version": "0.23.1-next.32",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -26,7 +26,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.17",
+    "@rango-dev/ui": "^0.29.1-next.18",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -49,4 +49,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/QuoteTrigger.tsx

@@ -152,12 +152,18 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                 {blockchains.length <= MAX_BLOCKCHAINS ||
                 (blockchains.length > MAX_BLOCKCHAINS &&
                   index < MAX_BLOCKCHAINS - 1) ? (
-                  <ImageComponent
-                    content={''}
-                    src={blockchain.image}
-                    open={false}
-                    className={index !== 0 ? 'blockchainImage' : ''}
-                  />
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    content={blockchain.displayName}
+                    sideOffset={4}>
+                    <ImageComponent
+                      content={''}
+                      src={blockchain.image}
+                      open={false}
+                      className={index !== 0 ? 'blockchainImage' : ''}
+                    />
+                  </Tooltip>
                 ) : (
                   index === MAX_BLOCKCHAINS - 1 && (
                     <Tooltip

package/src/components/Quotes/SelectStrategy.tsx

@@ -1,7 +1,9 @@
+import type { PreferenceType } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
 import { Select } from '@rango-dev/ui';
 import React from 'react';
 
-import { ROUTE_STRATEGY } from '../../constants/quote';
 import { useQuoteStore } from '../../store/quote';
 
 import { SelectContainer } from './Quotes.styles';
@@ -9,6 +11,29 @@ import { SelectContainer } from './Quotes.styles';
 export function SelectStrategy(props: { container: HTMLElement }) {
   const { updateQuotePartialState, sortStrategy } = useQuoteStore();
 
+  const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
+    {
+      value: 'SMART',
+      label: i18n.t('Smart Routing'),
+    },
+    {
+      value: 'FEE',
+      label: i18n.t('Lowest Fee'),
+    },
+    {
+      value: 'SPEED',
+      label: i18n.t('Fastest Transfer'),
+    },
+    {
+      value: 'NET_OUTPUT',
+      label: i18n.t('Maximum Return'),
+    },
+    {
+      value: 'PRICE',
+      label: i18n.t('Maximum Output'),
+    },
+  ];
+
   return (
     <SelectContainer>
       <Select

package/src/constants/quote.ts

@@ -1,4 +1,4 @@
-import type { PreferenceType, SwapFee, TagValue } from 'rango-sdk';
+import type { SwapFee, TagValue } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 
@@ -22,29 +22,6 @@ export type FeesGroup = {
   nonePayable: { [key in NameOfFees]?: SwapFee[] };
 };
 
-export const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
-  {
-    value: 'SMART',
-    label: i18n.t('Smart Routing'),
-  },
-  {
-    value: 'FEE',
-    label: i18n.t('Lowest Fee'),
-  },
-  {
-    value: 'SPEED',
-    label: i18n.t('Fastest Transfer'),
-  },
-  {
-    value: 'NET_OUTPUT',
-    label: i18n.t('Maximum Return'),
-  },
-  {
-    value: 'PRICE',
-    label: i18n.t('Maximum Output'),
-  },
-];
-
 export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'RECOMMENDED',
   'CENTRALIZED',

package/src/containers/Settings/Lists.tsx

@@ -199,7 +199,7 @@ export function SettingsLists() {
           {currentLanguage}
         </Typography>
         <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="gray" />,
+        <ChevronRightIcon color="gray" />
       </>
     ),
     onClick: () => navigate(navigationRoutes.languages),

package/src/hooks/useScreenDetect.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 /*
  * mobile: screen <= 480
@@ -37,7 +37,7 @@ const useScreenDetect = () => {
     setIsExtraLargeScreen(window.innerWidth > MIN_EXTRA_LARGE_SCREEN_WIDTH);
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     handleResize(); // Initial check
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);