@lifi/widget 3.0.0-alpha.35 → 3.0.0-alpha.37

package/components/Card/CardLabel.tsx

@@ -1,50 +1,63 @@
 import {
   Box,
   Typography,
-  alpha,
   getContrastRatio,
   lighten,
   styled,
 } from '@mui/material';
+import { blend } from '../../utils/colors.js';
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => ({
-  backgroundColor:
+})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => {
+  const backgroundColor =
     type === 'active'
       ? theme.palette.mode === 'light'
         ? theme.palette.secondary.main
-        : alpha(theme.palette.secondary.main, 0.8)
+        : blend(
+            theme.palette.background.paper,
+            theme.palette.secondary.main,
+            0.8,
+          )
       : type?.includes('insurance')
-        ? alpha(
+        ? blend(
+            theme.palette.background.paper,
             theme.palette.success.main,
             theme.palette.mode === 'light' ? 0.12 : 0.24,
           )
         : theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 0.16),
-  borderRadius: theme.shape.borderRadius,
-  color: type?.includes('insurance')
-    ? lighten(
-        theme.palette.success.main,
-        theme.palette.mode === 'light' ? 0 : 0.24,
-      )
-    : getContrastRatio(
-          theme.palette.common.white,
-          alpha(theme.palette.secondary.main, 0.08),
-        ) >= 3
-      ? theme.palette.common.white
-      : theme.palette.common.black,
-  padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 24,
-  minWidth: 24,
-  userSelect: 'none',
-  fontSize: '1rem',
-  marginRight: theme.spacing(1),
-}));
+          ? blend(
+              theme.palette.background.paper,
+              theme.palette.common.black,
+              0.12,
+            )
+          : blend(
+              theme.palette.background.paper,
+              theme.palette.common.white,
+              0.16,
+            );
+  return {
+    backgroundColor,
+    borderRadius: theme.shape.borderRadius,
+    color: type?.includes('insurance')
+      ? lighten(
+          theme.palette.success.main,
+          theme.palette.mode === 'light' ? 0 : 0.24,
+        )
+      : getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    minWidth: 24,
+    userSelect: 'none',
+    fontSize: '1rem',
+    marginRight: theme.spacing(1),
+  };
+});
 
 export const CardLabelTypography = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'type',

package/components/ChainSelect/ChainSelect.tsx

@@ -38,12 +38,18 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
     navigate(navigationRoutes[`${formType}Chain`]);
   };
 
-  const chainsToHide = (chains?.length ?? 0) - maxChainToOrder;
+  // We check if we can accommodate all the chains on the grid
+  // If there are more chains we slice the last one to show the number of hidden chains
+  const chainsToHide =
+    chains?.length === maxChainToOrder
+      ? 0
+      : (chains?.length ?? 0) - (maxChainToOrder - 1);
+  const sliceValue = chainsToHide > 0 ? -1 : maxChainToOrder;
 
   return (
     <ChainContainer>
       {isLoading
-        ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (
+        ? Array.from({ length: maxChainToOrder }).map((_, index) => (
             <Skeleton
               key={index}
               variant="rectangular"
@@ -52,32 +58,34 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
               sx={{ borderRadius: 1 }}
             />
           ))
-        : getChains().map((chain: EVMChain) => (
-            <Tooltip
-              key={chain.id}
-              title={chain.name}
-              placement="top"
-              enterDelay={400}
-              enterNextDelay={100}
-              disableInteractive
-              arrow
-            >
-              <ChainCard
-                component="button"
-                onClick={() => setCurrentChain(chain.id)}
-                type={chainId === chain.id ? 'selected' : 'default'}
-                selectionColor="primary"
+        : getChains()
+            .slice(0, sliceValue)
+            .map((chain: EVMChain) => (
+              <Tooltip
+                key={chain.id}
+                title={chain.name}
+                placement="top"
+                enterDelay={400}
+                enterNextDelay={100}
+                disableInteractive
+                arrow
               >
-                <Avatar
-                  src={chain.logoURI}
-                  alt={chain.key}
-                  sx={{ width: 40, height: 40 }}
+                <ChainCard
+                  component="button"
+                  onClick={() => setCurrentChain(chain.id)}
+                  type={chainId === chain.id ? 'selected' : 'default'}
+                  selectionColor="primary"
                 >
-                  {chain.name[0]}
-                </Avatar>
-              </ChainCard>
-            </Tooltip>
-          ))}
+                  <Avatar
+                    src={chain.logoURI}
+                    alt={chain.key}
+                    sx={{ width: 40, height: 40 }}
+                  >
+                    {chain.name[0]}
+                  </Avatar>
+                </ChainCard>
+              </Tooltip>
+            ))}
       {chainsToHide > 0 ? (
         <ChainCard component="button" onClick={showAllChains}>
           <Box

package/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,26 +1,20 @@
 import { WarningRounded } from '@mui/icons-material';
-import { Typography, styled } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 
-// TODO: some of the styling currently used here doesn't align with usage in other places
-//  We might want to consider removing the padding and color here?
-const AlertTitle = styled(Typography)(({ theme }) => {
-  return {
-    ...theme.typography.body2,
-    paddingRight: theme.spacing(1),
-    paddingLeft: theme.spacing(1),
-    color: theme.palette.text.primary,
-  };
-});
 export const FundsSufficiencyMessage = () => {
   const { t } = useTranslation();
   return (
     <AlertMessage
       severity="warning"
       icon={<WarningRounded />}
-      title={<AlertTitle>{t(`warning.message.insufficientFunds`)}</AlertTitle>}
-      isMultilineTitle
+      title={
+        <Typography variant="body2" px={1} color="text.primary">
+          {t(`warning.message.insufficientFunds`)}
+        </Typography>
+      }
+      multilineTitle
     />
   );
 };

package/components/Routes/RoutesExpanded.tsx

@@ -5,9 +5,12 @@ import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { RouteObject } from 'react-router-dom';
 import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { WidgetEvent } from '../../types/events.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
@@ -69,7 +72,11 @@ export const RoutesExpandedElement = () => {
     dataUpdatedAt,
     refetchTime,
     refetch,
+    fromChain,
   } = useRoutes();
+  const { account } = useAccount({ chainType: fromChain?.chainType });
+  const [toAddress] = useFieldValues('toAddress');
+  const { requiredToAddress } = useToAddressRequirements();
 
   const handleRouteClick = (route: Route) => {
     setExecutableRoute(route);
@@ -84,11 +91,11 @@ export const RoutesExpandedElement = () => {
   };
 
   // We cache routes results in ref for a better exit animation
-  if (routesRef.current && !routes?.length) {
+  if (routesRef.current && !routes) {
     routesActiveRef.current = false;
   } else {
     routesRef.current = routes;
-    routesActiveRef.current = Boolean(routes?.length);
+    routesActiveRef.current = Boolean(routes);
   }
 
   const currentRoute = routesRef.current?.[0];
@@ -99,6 +106,9 @@ export const RoutesExpandedElement = () => {
 
   const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
 
+  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
+  const allowInteraction = account.isConnected && !toAddressUnsatisfied;
+
   useEffect(() => {
     emitter.emit(WidgetEvent.WidgetExpanded, expanded);
   }, [emitter, expanded]);
@@ -140,7 +150,11 @@ export const RoutesExpandedElement = () => {
                     <RouteCard
                       key={index}
                       route={route}
-                      onClick={() => handleRouteClick(route)}
+                      onClick={
+                        allowInteraction
+                          ? () => handleRouteClick(route)
+                          : undefined
+                      }
                       active={index === 0}
                       expanded={routesRef.current?.length === 1}
                     />

package/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -64,6 +64,10 @@ export const CardContent = styled(MuiCardContent, {
   const vertical = compact ? '50%' : direction;
   return {
     padding: 0,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
     '&:last-child': {
       paddingBottom: 0,
     },

package/components/ToAddressRequiredMessage.tsx

@@ -0,0 +1,38 @@
+import type { Route } from '@lifi/sdk';
+import { Wallet } from '@mui/icons-material';
+import type { BoxProps } from '@mui/material';
+import { Box, Collapse, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useToAddressRequirements } from '../hooks/useToAddressRequirements.js';
+import { useFieldValues } from '../stores/form/useFieldValues.js';
+import { AlertMessage } from './AlertMessage/AlertMessage.js';
+
+interface ToAddressRequiredMessageProps extends BoxProps {
+  route?: Route;
+}
+
+export const ToAddressRequiredMessage: React.FC<
+  ToAddressRequiredMessageProps
+> = ({ route, ...props }) => {
+  const { t } = useTranslation();
+  const [toAddress] = useFieldValues('toAddress');
+  const { requiredToAddress } = useToAddressRequirements();
+
+  const showMessage = route && requiredToAddress && !toAddress;
+
+  return (
+    <Collapse timeout={225} in={showMessage} unmountOnExit mountOnEnter>
+      <Box {...props}>
+        <AlertMessage
+          title={
+            <Typography variant="body2" px={1} color="text.primary">
+              {t('info.message.toAddressIsRequired')}
+            </Typography>
+          }
+          icon={<Wallet />}
+          multilineTitle
+        />
+      </Box>
+    </Collapse>
+  );
+};

package/components/TokenList/useTokenSelect.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.js';
 import type { FormType } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
@@ -8,11 +9,12 @@ import { useFieldController } from '../../stores/form/useFieldController.js';
 import { WidgetEvent } from '../../types/events.js';
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
-  const tokenKey = FormKeyHelper.getTokenKey(formType);
-  const { onChange } = useFieldController({ name: tokenKey });
-  const { setFieldValue, getFieldValues } = useFieldActions();
   const { subvariant } = useWidgetConfig();
   const emitter = useWidgetEvents();
+  const { setFieldValue, getFieldValues } = useFieldActions();
+  const tokenKey = FormKeyHelper.getTokenKey(formType);
+  const { onChange } = useFieldController({ name: tokenKey });
+  const chainOrderStore = useChainOrderStoreContext();
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
@@ -41,6 +43,20 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
         });
       }
 
+      // Check if the selected source chain matches any chain on the destination chain selection view (chainOrder array).
+      // If a match exists and the destination token is not selected, update the destination chain to match the source.
+      if (
+        formType === 'from' &&
+        !selectedOppositeToken &&
+        selectedChainId &&
+        chainOrderStore.getState().chainOrder.to.includes(selectedChainId)
+      ) {
+        setFieldValue(FormKeyHelper.getChainKey('to'), selectedChainId, {
+          isDirty: true,
+          isTouched: true,
+        });
+      }
+
       const eventToEmit =
         formType === 'from'
           ? WidgetEvent.SourceChainTokenSelected
@@ -56,6 +72,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       onClick?.();
     },
     [
+      chainOrderStore,
       emitter,
       formType,
       getFieldValues,

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.35';
+export const version = '3.0.0-alpha.37';

package/hooks/useGasRefuel.ts

@@ -39,6 +39,7 @@ export const useGasRefuel = () => {
       // If a user runs out of gas, he can't send a source chain transaction.
       fromChainId === toChainId ||
       !gasRecommendation?.available ||
+      !gasRecommendation?.recommended ||
       !nativeToken ||
       !isChainTypeSatisfied
     ) {

package/hooks/useRoutes.ts

@@ -70,6 +70,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const contractCallQuoteEnabled: boolean =
     subvariant === 'custom' ? Boolean(contractCalls && account.address) : true;
 
+  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
   // If toAddress is set, it must have the same chainType as toChain
   const hasToAddressAndChainTypeSatisfied: boolean =
     !!toChain &&
@@ -79,11 +80,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const isToAddressSatisfied = toAddress
     ? hasToAddressAndChainTypeSatisfied
     : true;
-  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
-  const isChainTypeSatisfied =
-    fromChain && toChain && fromChain.chainType !== toChain.chainType
-      ? hasToAddressAndChainTypeSatisfied
-      : true;
+
+  // toAddress might be an empty string, but we need to pass undefined if there is no value
+  const toWalletAddress = toAddress || undefined;
 
   const isEnabled =
     Boolean(Number(fromChainId)) &&
@@ -93,7 +92,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     !Number.isNaN(slippage) &&
     hasAmount &&
     isToAddressSatisfied &&
-    isChainTypeSatisfied &&
     contractCallQuoteEnabled;
 
   // Some values should be strictly typed and isEnabled ensures that
@@ -103,7 +101,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     fromChainId as number,
     fromToken?.address as string,
     fromTokenAmount,
-    toAddress,
+    toWalletAddress,
     toChainId as number,
     toToken?.address as string,
     toTokenAmount,
@@ -150,7 +148,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         ],
         signal,
       }) => {
-        const toWalletAddress = toAddress || fromAddress;
         const fromAmount = parseUnits(
           fromTokenAmount,
           fromToken!.decimals,
@@ -198,7 +195,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
                 : undefined,
               allowBridges: allowedBridges,
               allowExchanges: allowedExchanges,
-              toFallbackAddress: toWalletAddress,
+              toFallbackAddress: toAddress,
               slippage: formattedSlippage,
             },
             { signal },
@@ -235,7 +232,9 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             toAmount: toTokenAmount,
             toAmountMin: toTokenAmount,
             toToken: toToken!,
-            toAddress: toWalletAddress,
+            toAddress:
+              contractCallQuote.action.toAddress ||
+              contractCallQuote.action.fromAddress,
             gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
             steps: [contractCallQuote],
             insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
@@ -250,7 +249,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             fromAmount,
             fromChainId,
             fromTokenAddress,
-            toAddress: toWalletAddress,
+            toAddress,
             toChainId,
             toTokenAddress,
             fromAmountForGas:
@@ -333,5 +332,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     dataUpdatedAt,
     refetchTime,
     refetch,
+    fromChain,
+    toChain,
   };
 };

package/hooks/useTransactionHistory.ts

@@ -20,8 +20,8 @@ export const useTransactionHistory = () => {
         const response = await getTransactionHistory(
           {
             wallet: accountAddress,
-            fromTimestamp: date.getTime() / 1000,
-            toTimestamp: Date.now() / 1000,
+            fromTimestamp: Math.floor(date.getTime() / 1000),
+            toTimestamp: Math.floor(Date.now() / 1000),
           },
           { signal },
         );

package/i18n/bn.json

@@ -28,10 +28,7 @@
     "done": "সম্পন্ন হয়েছে",
     "exchange": "",
     "getGas": "গ্যাস পান",
-    "hide": "গোপন করুন",
     "learnMore": "আরও জানুন",
-    "lifiCheckout": "",
-    "lifiExchange": "",
     "light": "লাইট",
     "max": "সর্বোচ্চ",
     "ok": "ঠিক আছে",
@@ -80,8 +77,9 @@
       "emptyActiveTransactions": "",
       "emptyTokenList": "",
       "emptyTransactionHistory": "",
-      "routeNotFound": "",
-      "fundsToExchange": ""
+      "fundsToExchange": "",
+      "toAddressIsRequired": "",
+      "routeNotFound": ""
     },
     "title": {
       "autoRefuel": "গ্যাস পান",
@@ -130,16 +128,15 @@
     "message": {
       "allowanceRequired": "",
       "insufficientFunds": "",
+      "remainInYourWallet": "",
       "signatureRejected": "",
       "slippageThreshold": "স্লিপেজ সংজ্ঞায়িত থ্রেশহোল্ডের চেয়ে বড়। একটি নতুন উদ্ধৃতি পেতে একটি নতুন রুট অনুরোধ করুন।",
+      "transactionCanceled": "",
       "transactionFailed": "আরও তথ্যের জন্য ব্লক এক্সপ্লোরার চেক করুন।",
       "transactionNotSent": "",
-      "transactionCanceled": "",
-      "remainInYourWallet": "",
       "unknown": "অনুগ্রহ করে আবার চেষ্টা করুন বা সাপোর্ট এর সাথে যোগাযোগ করুন।"
     },
     "title": {
-      "addressRequired": "",
       "allowanceRequired": "",
       "balanceIsTooLow": "ব্যালেন্স খুব কম",
       "bookmarkAlreadyExists": "",
@@ -156,6 +153,7 @@
       "transactionUnprepared": "লেনদেন প্রস্তুত করতে অক্ষম",
       "unknown": "কিছু ভুল হয়েছে",
       "walletAddressInvalid": "",
+      "walletAddressInvalid_chain": "",
       "walletAddressRequired": "ওয়ালেট ঠিকানা প্রয়োজন।",
       "walletChainTypeInvalid": ""
     }
@@ -168,14 +166,16 @@
     },
     "numberOfSteps": "সোওয়াপ পদক্ষেপ একটি সংখ্যা. প্রতিটি ধাপে ১-২ টি লেনদেন থাকতে পারে যার জন্য একটি স্বাক্ষর প্রয়োজন।",
     "progressToNextUpdate": "প্রদর্শিত ডেটা {{value}} সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। ম্যানুয়ালি আপডেট করতে এখানে ক্লিক করুন।",
-    "recommended": "",
     "settingsModified": "সেটিংস (পরিবর্তিত)",
     "selectAll": "",
     "deselectAll": ""
   },
   "main": {
-    "crossStepDetails": "{{tool}} হয়ে {{from}} থেকে {{to}} পর্যন্ত ব্রিজ",
+    "allTokens": "",
+    "bridgeStepDetails": "",
+    "checkoutStepDetails": "",
     "currentAmount": "বর্তমান পরিমাণ",
+    "depositStepDetails": "",
     "featuredTokens": "বৈশিষ্ট্যযুক্ত টোকেন",
     "fees": {
       "estimated": "",
@@ -189,18 +189,21 @@
     "fromAmount": "আপনি টাকা পাঠান",
     "gasCost": "গ্যাস খরচ",
     "inProgress": "প্রক্রিয়াধীন",
-    "nftStepDetails": "{{tool}} এর মাধ্যমে এনএফটি কিনুন",
+    "myTokens": "",
     "onChain": "{{chainName}} -এ",
-    "otherTokens": "অন্যান্য টোকেন",
     "ownedBy": "মালিক",
+    "popularTokens": "",
     "process": {
-      "crossChain": {
-        "actionRequired": "দয়াকরে লেনদেন স্বাক্ষর করুন",
-        "done": "ব্রিজ লেনদেন নিশ্চিত করা হয়েছে",
-        "pending": "ব্রিজ লেনদেনের জন্য অপেক্ষা করছে",
-        "started": "ব্রিজ লেনদেনের প্রস্তুতি"
+      "bridge": {
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
+      },
+      "checkout": {
+        "done": ""
       },
-      "nft": {
+      "deposit": {
         "done": ""
       },
       "receivingChain": {
@@ -245,13 +248,11 @@
     "supportId": "সাপোর্ট আইডি",
     "swapStepDetails": "{{tool}} এর মাধ্যমে {{chain}} এ সোওয়াপ করুন",
     "tags": {
-      "cheapest": "সস্তা",
-      "fastest": "দ্রুত",
+      "cheapest": "",
+      "fastest": "",
       "insurable": "বীমাযোগ্য",
       "insurance": "বীমা",
-      "insured": "বীমাকৃত",
-      "recommended": "",
-      "safest": "নিরাপদ"
+      "insured": "বীমাকৃত"
     },
     "to": "প্রতি",
     "tokenOnChain": "{{chainName}} -এ {{tokenSymbol}}",
@@ -276,18 +277,18 @@
       "title": "গ্যাসের দাম"
     },
     "routePriority": "রুট অগ্রাধিকার",
-    "sendToWalletOption": "",
     "slippage": "স্লিপেজ",
     "custom": "",
     "resetSettings": ""
   },
   "sendToWallet": {
-    "enterAddress": "",
-    "enterName": "",
+    "addBookmark": "",
+    "bookmarkWallet": "",
     "confirmWalletAddress": "",
     "connectedWallets": "",
-    "bookmarkWallet": "",
-    "addBookmark": "",
+    "enterAddress_long": "",
+    "enterAddress_short": "",
+    "enterName": "",
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""