@lifi/widget 3.29.0-beta.0 → 3.29.0

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk'
-import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'
-import { useEffect } from 'react'
+import { Skeleton, Tooltip } from '@mui/material'
+import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   maxChainsToOrder,
@@ -10,10 +10,16 @@ import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { ChainCard, ChainContainer } from './ChainSelect.style.js'
+import {
+  ChainAvatar,
+  ChainCard,
+  ChainContainer,
+  MoreChainsBox,
+  MoreChainsText,
+} from './ChainSelect.style.js'
 import { useChainSelect } from './useChainSelect.js'
 
-export const ChainSelect = ({ formType }: FormTypeProps) => {
+export const ChainSelect = memo(({ formType }: FormTypeProps) => {
   const navigate = useNavigate()
   const {
     chainOrder,
@@ -36,22 +42,26 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
     }
   }, [chainId, chainOrder, formType, setChainOrder])
 
-  const showAllChains = () => {
+  const showAllChains = useCallback(() => {
     navigate(navigationRoutes[`${formType}Chain`])
-  }
+  }, [navigate, formType])
+
+  const { chainsToHide, chainsToShow, tilesCount } = useMemo(() => {
+    // We check if we can accommodate all the chains on the grid
+    // If there are more than 10 chains we show the number of hidden chains as the last one tile
+    const chainsToHide =
+      chains?.length === maxChainsToShow
+        ? 0
+        : (chains?.length ?? 0) - maxChainsToOrder
 
-  // We check if we can accommodate all the chains on the grid
-  // If there are more than 10 chains we show the number of hidden chains as the last one tile
-  const chainsToHide =
-    chains?.length === maxChainsToShow
-      ? 0
-      : (chains?.length ?? 0) - maxChainsToOrder
+    // When there is less than 10 chains we don't care about the order
+    const chainsToShow = chainsToHide > 0 ? getChains() : chains
 
-  // When there is less than 10 chains we don't care about the order
-  const chainsToShow = chainsToHide > 0 ? getChains() : chains
+    // Number of tiles to show in the grid
+    const tilesCount = (chainsToShow?.length ?? 0) + (chainsToHide > 0 ? 1 : 0)
 
-  // Number of tiles to show in the grid
-  const tilesCount = (chainsToShow?.length ?? 0) + (chainsToHide > 0 ? 1 : 0)
+    return { chainsToHide, chainsToShow, tilesCount }
+  }, [chains, getChains])
 
   return (
     <ChainContainer itemCount={tilesCount}>
@@ -73,36 +83,19 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
                 type={chainId === chain.id ? 'selected' : 'default'}
                 selectionColor="secondary"
               >
-                <Avatar
-                  src={chain.logoURI}
-                  alt={chain.key}
-                  sx={{ width: 40, height: 40 }}
-                >
+                <ChainAvatar src={chain.logoURI} alt={chain.key}>
                   {chain.name[0]}
-                </Avatar>
+                </ChainAvatar>
               </ChainCard>
             </Tooltip>
           ))}
       {chainsToHide > 0 ? (
         <ChainCard component="button" onClick={showAllChains}>
-          <Box
-            sx={{
-              width: 40,
-              height: 40,
-              display: 'grid',
-              placeItems: 'center',
-            }}
-          >
-            <Typography
-              sx={{
-                fontWeight: 500,
-              }}
-            >
-              +{chainsToHide}
-            </Typography>
-          </Box>
+          <MoreChainsBox>
+            <MoreChainsText>+{chainsToHide}</MoreChainsText>
+          </MoreChainsBox>
         </ChainCard>
       ) : null}
     </ChainContainer>
   )
-}
+})

package/src/components/Header/WalletHeader.tsx

@@ -88,7 +88,11 @@ const ConnectButton = () => {
   const { walletConfig, variant } = useWidgetConfig()
   const { openWalletMenu } = useWalletMenu()
   const connect = async (event: React.MouseEvent<HTMLElement>) => {
-    if (!walletConfig?.usePartialWalletManagement && walletConfig?.onConnect) {
+    if (
+      !walletConfig?.usePartialWalletManagement &&
+      !walletConfig?.forceInternalWalletManagement &&
+      walletConfig?.onConnect
+    ) {
       walletConfig.onConnect()
       return
     }

package/src/components/Search/SearchInput.style.tsx

@@ -19,6 +19,9 @@ export const Input = styled(InputBase, {
   paddingLeft: theme.spacing(1.25),
   fontSize: size === 'small' ? '0.875rem' : '1rem',
   borderRadius: theme.vars.shape.borderRadius,
+  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+    paddingRight: theme.spacing(1.25),
+  },
   [`& .${inputBaseClasses.input}`]: {
     padding: theme.spacing(1),
   },

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -24,6 +24,10 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
         width: 224,
       },
+      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+        width: 180,
+        fontSize: 16,
+      },
     },
     [`.${cardHeaderClasses.subheader}`]: {
       textOverflow: 'ellipsis',
@@ -33,6 +37,9 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
         width: 224,
       },
+      [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+        width: 180,
+      },
     },
     variants: [
       {

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.29.0-beta.0'
+export const version = '3.29.0'

package/src/hooks/useInternalWalletProvider.ts

@@ -0,0 +1,6 @@
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+
+export function useInternalWalletProvider(hasExternalContext: boolean) {
+  const { walletConfig } = useWidgetConfig()
+  return walletConfig?.forceInternalWalletManagement || !hasExternalContext
+}

package/src/i18n/bn.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "সোওয়াপ সম্পন্ন হয়েছে",
         "pending": "",
         "started": "সোয়াপ লেনদেন প্রস্তুত করা হচ্ছে"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/de.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Swap abgeschlossen",
         "pending": "",
         "started": "Swap vorbereiten"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/es.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Transacción de puente confirmada",
         "pending": "",
         "started": "Preparando transacción de puente"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Swap completado.",
         "pending": "",
         "started": "Preparando transacción de intercambio"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/fr.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Transaction Bridge confirmée",
         "pending": "",
         "started": "Préparation de la transaction bridge"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Échange terminé.",
         "pending": "",
         "started": "Préparation de la transaction d'échange"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/hi.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/id.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "Mempersiapkan transaksi bridge",
+        "messageRequired": "",
         "done": "Tranksaksi bridge dikonfirmasi",
         "pending": "Transaksi bridge tertunda",
         "started": "Mempersiapkan transaksi bridge"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "Mempersiapkan transaksi bridge",
+        "messageRequired": "",
         "done": "Swap selesai",
         "pending": "Transaksi swap tertunda",
         "started": "Mempersiapkan transaksi swap"
       },
-      "switchChain": {
-        "actionRequired": "Konfirmasikan pergantian rantai",
-        "done": "Rantai beralih"
-      },
       "permit": {
         "actionRequired": "Tanda tangani pesan izin",
         "done": "Permit tertandatangani",

package/src/i18n/it.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Scambio completato",
         "pending": "",
         "started": "Preparazione dello scambio"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/ja.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "ブリッジのトランザクションが確認されました",
         "pending": "",
         "started": "ブリッジのトランザクションを準備中"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "スワップ完了",
         "pending": "",
         "started": "スワップのトランザクションを準備中"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/ko.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "스왑 완료",
         "pending": "",
         "started": "스왑 트랜잭션 준비 중"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/pl.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "",
         "pending": "",
         "started": ""
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/pt.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "Assinar a transação de transferência de fundos entre redes",
+        "messageRequired": "",
         "done": "Transação da ponte confirmada",
         "pending": "Transação de transferência de fundos entre redes, pendente",
         "started": "Preparando a transação da ponte"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "Assinar transação de troca",
+        "messageRequired": "",
         "done": "Conversão concluída",
         "pending": "Transação de troca pendente",
         "started": "Preparando a transação de conversão"
       },
-      "switchChain": {
-        "actionRequired": "Confirmar troca de rede",
-        "done": "Rede alterada"
-      },
       "permit": {
         "actionRequired": "Assinar mensagem de permissão",
         "done": "Mensagem de permissão assinada",

package/src/i18n/th.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "ธุรกรรมข้ามเชนได้รับการยืนยันแล้ว",
         "pending": "",
         "started": "เตรียมการทำรายการบริดจ์"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "การแลกเปลี่ยนเสร็จสมบูรณ์",
         "pending": "",
         "started": "กำลังเตรียมการแลกเปลี่ยนธุรกรรม"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/tr.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Köprü işlemi teyit edildi",
         "pending": "",
         "started": "Köprü işlemi hazırlanıyor"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Takas işlemi tamamlandı",
         "pending": "",
         "started": "Takas işlemi hazırlanıyor"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/uk.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "Підпишіть бридж транзакцію",
+        "messageRequired": "",
         "done": "Бридж транзакцію схвалено",
         "pending": "Очікування бридж операції",
         "started": "Підготовка бридж транзакції"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "Підпишіть своп транзакцію",
+        "messageRequired": "",
         "done": "Своп завершено",
         "pending": "Очікування своп операції",
         "started": "Підготовка своп транзакції"
       },
-      "switchChain": {
-        "actionRequired": "Підтвердіть перемикання чейна",
-        "done": "Чейн перемкнено"
-      },
       "permit": {
         "actionRequired": "Підпишіть дозвіл на витрати",
         "done": "Дозвіл на витрати підписано",

package/src/i18n/vi.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Giao dịch cầu đã được xác nhận",
         "pending": "",
         "started": "Chuẩn bị giao dịch cầu"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "Lệnh swap đã hoàn tất",
         "pending": "",
         "started": "Đang chuẩn bị giao dịch Swap"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/i18n/zh.json

@@ -240,6 +240,7 @@
     "process": {
       "bridge": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "跨链交易已确认",
         "pending": "",
         "started": "准备执行跨链交易"
@@ -258,14 +259,11 @@
       },
       "swap": {
         "actionRequired": "",
+        "messageRequired": "",
         "done": "兑换完成",
         "pending": "",
         "started": "准备兑换"
       },
-      "switchChain": {
-        "actionRequired": "",
-        "done": ""
-      },
       "permit": {
         "actionRequired": "",
         "done": "",

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Box, type Theme, useMediaQuery } from '@mui/material'
 import type { FC, RefObject } from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -41,27 +41,42 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
     (swapOnly && formType === 'to') ||
     hiddenUI?.includes(HiddenUI.ChainSelect)
 
+  const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(theme.breakpoints.values.xs)
+  )
+  const hideSearchTokenInput = hiddenUI?.includes(HiddenUI.SearchTokenInput)
+
+  const hasHeader = !hideChainSelect || !hideSearchTokenInput
+
   return (
     <FullPageContainer disableGutters>
       <Box
         ref={headerRef}
         sx={{
-          pb: 2,
+          pb: hasHeader ? 2 : 0,
           px: 3,
         }}
       >
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box
-          sx={{
-            mt: !hideChainSelect ? 2 : 0,
-          }}
-        >
-          <SearchTokenInput />
-        </Box>
+        {!hideSearchTokenInput && (
+          <Box
+            sx={{
+              mt: !hideChainSelect ? 2 : 0,
+            }}
+          >
+            <SearchTokenInput />
+          </Box>
+        )}
       </Box>
       <WrappedTokenList
         // Rerender component if variant changes (since chains tiles change height)
-        key={hideChainSelect ? 'without-offset' : 'with-offset'}
+        key={
+          hideChainSelect
+            ? 'without-offset'
+            : isMobile
+              ? 'with-offset-mobile'
+              : 'with-offset'
+        }
         headerRef={headerRef}
         formType={formType}
       />

package/src/providers/WalletProvider/EVMProvider.tsx

@@ -1,6 +1,7 @@
 import { ChainType } from '@lifi/sdk'
 import { type FC, type PropsWithChildren, useContext } from 'react'
 import { WagmiContext } from 'wagmi'
+import { useInternalWalletProvider } from '../../hooks/useInternalWalletProvider.js'
 import { isItemAllowed } from '../../utils/item.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMBaseProvider } from './EVMBaseProvider.js'
@@ -15,12 +16,13 @@ export function useInWagmiContext(): boolean {
 
 export const EVMProvider: FC<PropsWithChildren> = ({ children }) => {
   const inWagmiContext = useInWagmiContext()
+  const useInternalWallet = useInternalWalletProvider(inWagmiContext)
 
-  return inWagmiContext ? (
+  return useInternalWallet ? (
+    <EVMBaseProvider>{children}</EVMBaseProvider>
+  ) : (
     <EVMExternalContext.Provider value={inWagmiContext}>
       {children}
     </EVMExternalContext.Provider>
-  ) : (
-    <EVMBaseProvider>{children}</EVMBaseProvider>
   )
 }