@lifi/widget 3.0.0-alpha.8 → 3.0.0-beta.0

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,46 +1,91 @@
-import DoneIcon from '@mui/icons-material/Done';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Box, Button, Typography } from '@mui/material';
-import { useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
+import {
+  Done,
+  ErrorRounded,
+  InfoRounded,
+  WarningRounded,
+} from '@mui/icons-material';
+import { Box, Button, Skeleton, Typography } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { Token } from '../../components/Token';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { Token } from '../../components/Token/Token.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { getProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useTokenBalance } from '../../hooks/useTokenBalance.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import {
-  getProcessMessage,
-  useAvailableChains,
-  useNavigateBack,
-  useTokenBalance,
-} from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import type { RouteExecution } from '../../stores';
-import { RouteExecutionStatus, getSourceTxHash } from '../../stores';
+  RouteExecutionStatus,
+  type RouteExecution,
+} from '../../stores/routes/types.js';
+import { getSourceTxHash } from '../../stores/routes/utils.js';
+import { hasEnumFlag } from '../../utils/enum.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
 import {
-  formatTokenAmount,
-  hasEnumFlag,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+  CenterContainer,
+  IconCircle,
+  MessageSkeletonContainer,
+} from './StatusBottomSheet.style.js';
+
+interface StatusBottomSheetContentProps extends RouteExecution {
+  onClose(): void;
+}
+
+const MessageSkeleton = () => (
+  <MessageSkeletonContainer>
+    <Skeleton height={24} variant="text" width="92%" />
+    <Skeleton height={24} variant="text" width="56%" />
+  </MessageSkeletonContainer>
+);
 
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
   status,
   route,
 }) => {
+  const ref = useRef<BottomSheetBase>(null);
+
+  const onClose = useCallback(() => {
+    ref.current?.close();
+  }, []);
+
+  useEffect(() => {
+    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
+    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed);
+    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
+      ref.current?.open();
+    }
+  }, [status]);
+
+  return (
+    <BottomSheet ref={ref}>
+      <StatusBottomSheetContent
+        status={status}
+        route={route}
+        onClose={onClose}
+      />
+    </BottomSheet>
+  );
+};
+
+export const StatusBottomSheetContent: React.FC<
+  StatusBottomSheetContentProps
+> = ({ status, route, onClose }) => {
   const { t } = useTranslation();
   const { navigateBack, navigate } = useNavigateBack();
-  const ref = useRef<BottomSheetBase>(null);
+  const queryClient = useQueryClient();
+  const { setFieldValue } = useFieldActions();
+  const { subvariant, contractSecondaryComponent, contractCompactComponent } =
+    useWidgetConfig();
   const { getChainById } = useAvailableChains();
-  const { setValue } = useFormContext();
-  const {
-    subvariant,
-    contractComponent,
-    contractSecondaryComponent,
-    contractCompactComponent,
-  } = useWidgetConfig();
+
+  const ref = useRef<HTMLElement>();
+  useSetContentHeight(ref);
 
   const toToken = {
     ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
@@ -51,46 +96,49 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
     ),
   };
 
+  const toChain = getChainById(toToken.chainId);
+
   const { token, refetch, refetchNewBalance, refetchAllBalances } =
-    useTokenBalance(route.toAddress, toToken);
+    useTokenBalance(route.toAddress, toToken, toChain);
 
-  const clearFromAmount = () => {
+  const invalidateQueries = () => {
     refetchAllBalances();
-    setValue(FormKey.FromAmount, '');
-    setValue(FormKey.ToAmount, '');
+    setFieldValue('fromAmount', '');
+    setFieldValue('toAmount', '');
+    queryClient.invalidateQueries({ queryKey: ['transaction-history'] });
   };
 
   const handleDone = () => {
-    clearFromAmount();
+    invalidateQueries();
     navigateBack();
   };
 
   const handlePartialDone = () => {
-    clearFromAmount();
+    invalidateQueries();
     if (
       toToken.chainId !== route.toToken.chainId &&
       toToken.address !== route.toToken.address
     ) {
-      setValue(
-        FormKey.FromAmount,
+      setFieldValue(
+        'fromAmount',
         formatTokenAmount(toToken.amount, toToken.decimals),
-        { shouldTouch: true },
+        { isTouched: true },
       );
-      setValue(FormKey.FromChain, toToken.chainId, { shouldTouch: true });
-      setValue(FormKey.FromToken, toToken.address, { shouldTouch: true });
-      setValue(FormKey.ToChain, route.toToken.chainId, {
-        shouldTouch: true,
+      setFieldValue('fromChain', toToken.chainId, { isTouched: true });
+      setFieldValue('fromToken', toToken.address, { isTouched: true });
+      setFieldValue('toChain', route.toToken.chainId, {
+        isTouched: true,
       });
-      setValue(FormKey.ToToken, route.toToken.address, {
-        shouldTouch: true,
+      setFieldValue('toToken', route.toToken.address, {
+        isTouched: true,
       });
     }
     navigateBack();
   };
 
   const handleClose = () => {
-    clearFromAmount();
-    ref.current?.close();
+    invalidateQueries();
+    onClose();
   };
 
   const handleSeeDetails = () => {
@@ -117,14 +165,14 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   switch (status) {
     case RouteExecutionStatus.Done: {
       title =
-        subvariant === 'nft'
+        subvariant === 'custom'
           ? t('success.title.purchaseSuccessful')
           : t(`success.title.${transactionType}Successful`);
       if (token) {
         primaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }
@@ -141,7 +189,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }
@@ -158,7 +206,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }
@@ -186,84 +234,80 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
 
   useEffect(() => {
     const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-    if (
-      (hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
-      !ref.current?.isOpen()
-    ) {
-      if (hasSuccessFlag) {
-        refetchNewBalance();
-        refetch();
-      }
-      ref.current?.open();
+    if (hasSuccessFlag) {
+      refetchNewBalance();
+      refetch();
     }
   }, [refetch, refetchNewBalance, status]);
 
   const showContractComponent =
-    subvariant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
+    subvariant === 'custom' &&
+    hasEnumFlag(status, RouteExecutionStatus.Done) &&
+    (contractCompactComponent || contractSecondaryComponent);
 
   return (
-    <BottomSheet ref={ref}>
-      <Box p={3}>
-        {!showContractComponent ? (
-          <CenterContainer>
-            <IconCircle status={status} mb={1}>
-              {status === RouteExecutionStatus.Idle ? (
-                <InfoRoundedIcon color="primary" />
-              ) : null}
-              {status === RouteExecutionStatus.Done ? (
-                <DoneIcon color="success" />
-              ) : null}
-              {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-              hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
-                <WarningRoundedIcon color="warning" />
-              ) : null}
-              {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
-                <ErrorRoundedIcon color="error" />
-              ) : null}
-            </IconCircle>
-          </CenterContainer>
-        ) : null}
+    <Box p={3} ref={ref}>
+      {!showContractComponent ? (
         <CenterContainer>
-          <Typography py={1} fontSize={18} fontWeight={700}>
-            {title}
-          </Typography>
-        </CenterContainer>
-        {showContractComponent ? (
-          contractCompactComponent ||
-          contractSecondaryComponent ||
-          contractComponent
-        ) : (
-          <CenterContainer>
-            {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-              <Token token={toToken} py={1} disableDescription />
+          <IconCircle status={status} mb={1}>
+            {status === RouteExecutionStatus.Idle ? (
+              <InfoRounded color="primary" />
+            ) : null}
+            {status === RouteExecutionStatus.Done ? (
+              <Done color="success" />
             ) : null}
-          </CenterContainer>
-        )}
-        {!showContractComponent ? (
+            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
+              <WarningRounded color="warning" />
+            ) : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
+              <ErrorRounded color="error" />
+            ) : null}
+          </IconCircle>
+        </CenterContainer>
+      ) : null}
+      <CenterContainer>
+        <Typography py={1} fontSize={18} fontWeight={700}>
+          {title}
+        </Typography>
+      </CenterContainer>
+      {showContractComponent ? (
+        contractCompactComponent || contractSecondaryComponent
+      ) : (
+        <CenterContainer>
+          {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+            <Token token={toToken} py={1} disableDescription />
+          ) : null}
+        </CenterContainer>
+      )}
+      {!showContractComponent ? (
+        primaryMessage ? (
           <Typography py={1}>{primaryMessage}</Typography>
-        ) : null}
-        {secondaryMessage ? (
-          <Typography py={1}>{secondaryMessage}</Typography>
-        ) : null}
+        ) : (
+          <MessageSkeleton />
+        )
+      ) : null}
+      {secondaryMessage ? (
+        <Typography py={1}>{secondaryMessage}</Typography>
+      ) : null}
+      <Box mt={2}>
+        <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
+          {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
+          {hasEnumFlag(status, RouteExecutionStatus.Done)
+            ? t('button.done')
+            : null}
+          {status === RouteExecutionStatus.Failed
+            ? t('button.seeDetails')
+            : null}
+        </Button>
+      </Box>
+      {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
         <Box mt={2}>
-          <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
-            {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Done)
-              ? t('button.done')
-              : null}
-            {status === RouteExecutionStatus.Failed
-              ? t('button.seeDetails')
-              : null}
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
           </Button>
         </Box>
-        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-          <Box mt={2}>
-            <Button variant="text" onClick={handleSeeDetails} fullWidth>
-              {t('button.seeDetails')}
-            </Button>
-          </Box>
-        ) : null}
-      </Box>
-    </BottomSheet>
+      ) : null}
+    </Box>
   );
 };

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,14 +1,14 @@
 import type { Route } from '@lifi/sdk';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { WarningRounded } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { useSetContentHeight } from '../../hooks';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-import { calcValueLoss } from './utils';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
+import { calcValueLoss } from './utils.js';
 
 interface TokenValueBottomSheetProps {
   route: Route;
@@ -48,7 +48,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     <Box p={3} ref={ref}>
       <CenterContainer>
         <IconCircle status="warning" mb={1}>
-          <WarningRoundedIcon color="warning" />
+          <WarningRounded color="warning" />
         </IconCircle>
         <Typography py={1} fontSize={18} fontWeight={700}>
           {t('warning.title.highValueLoss')}

package/pages/TransactionPage/TransactionPage.tsx

@@ -1,51 +1,45 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Delete } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { ContractComponent } from '../../components/ContractComponent';
-import { GasMessage } from '../../components/GasMessage';
-import { Insurance } from '../../components/Insurance';
-import { getStepList } from '../../components/Step';
-import {
-  useNavigateBack,
-  useRouteExecution,
-  useWidgetEvents,
-} from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus, useHeaderStoreContext } from '../../stores';
-import { WidgetEvent } from '../../types/events';
-import { formatTokenAmount } from '../../utils';
-import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
+import { GasMessage } from '../../components/GasMessage/GasMessage.js';
+import { Insurance } from '../../components/Insurance/Insurance.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { getStepList } from '../../components/Step/StepList.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useRouteExecution } from '../../hooks/useRouteExecution.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { WidgetEvent } from '../../types/events.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
 import {
   StartInsurableTransactionButton,
   StartTransactionButton,
-} from './StartTransactionButton';
-import { StatusBottomSheet } from './StatusBottomSheet';
+} from './StartTransactionButton.js';
+import { StatusBottomSheet } from './StatusBottomSheet.js';
 import {
   TokenValueBottomSheet,
   getTokenValueLossThreshold,
-} from './TokenValueBottomSheet';
-import { Container } from './TransactionPage.style';
-import { calcValueLoss } from './utils';
+} from './TokenValueBottomSheet.js';
+import { calcValueLoss } from './utils.js';
 
 export const TransactionPage: React.FC = () => {
   const { t } = useTranslation();
-  const { setValue } = useFormContext();
+  const { setFieldValue } = useFieldActions();
   const emitter = useWidgetEvents();
   const { navigateBack } = useNavigateBack();
-  const {
-    subvariant,
-    insurance,
-    contractComponent,
-    contractSecondaryComponent,
-  } = useWidgetConfig();
+  const { subvariant, insurance, contractSecondaryComponent } =
+    useWidgetConfig();
   const { state }: any = useLocation();
-  const headerStoreContext = useHeaderStoreContext();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
 
@@ -65,19 +59,26 @@ export const TransactionPage: React.FC = () => {
       onAcceptExchangeRateUpdate,
     });
 
-  useEffect(() => {
-    if (route && subvariant !== 'nft') {
-      const transactionType =
-        route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-      return headerStoreContext
-        .getState()
-        .setTitle(
-          status === RouteExecutionStatus.Idle
-            ? t(`button.review${transactionType}`)
-            : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`),
-        );
+  const getHeaderTitle = () => {
+    if (subvariant === 'custom') {
+      return t(`header.purchase`);
+    } else {
+      if (route) {
+        const transactionType =
+          route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+
+        return status === RouteExecutionStatus.Idle
+          ? t(`button.review${transactionType}`)
+          : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`);
+      }
     }
-  }, [headerStoreContext, route, status, subvariant, t]);
+
+    return t(`header.exchange`);
+  };
+
+  const title = getHeaderTitle();
+
+  useHeader(title);
 
   useEffect(() => {
     if (status === RouteExecutionStatus.Idle) {
@@ -104,16 +105,16 @@ export const TransactionPage: React.FC = () => {
     }
     tokenValueBottomSheetRef.current?.close();
     executeRoute();
-    setValue(FormKey.FromAmount, '');
-    if (subvariant === 'nft') {
-      setValue(FormKey.FromToken, '');
-      setValue(FormKey.ToToken, '');
+    setFieldValue('fromAmount', '');
+    if (subvariant === 'custom') {
+      setFieldValue('fromToken', '');
+      setFieldValue('toToken', '');
     }
   };
 
   const handleStartClick = async () => {
     if (status === RouteExecutionStatus.Idle) {
-      if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
+      if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
         tokenValueBottomSheetRef.current?.open();
       } else {
         handleExecuteRoute();
@@ -133,7 +134,7 @@ export const TransactionPage: React.FC = () => {
     switch (status) {
       case RouteExecutionStatus.Idle:
         switch (subvariant) {
-          case 'nft':
+          case 'custom':
             return t('button.buyNow');
           case 'refuel':
             return t('button.startBridging');
@@ -168,16 +169,15 @@ export const TransactionPage: React.FC = () => {
       .find((process) => process.txHash)?.txHash ?? route.fromAddress;
 
   return (
-    <Container>
+    <PageContainer bottomGutters>
       {getStepList(route, subvariant)}
-      {subvariant === 'nft' ? (
-        <ContractComponent mt={2}>
-          {contractSecondaryComponent || contractComponent}
+      {subvariant === 'custom' && contractSecondaryComponent ? (
+        <ContractComponent sx={{ marginTop: 2 }}>
+          {contractSecondaryComponent}
         </ContractComponent>
       ) : null}
       {insuranceAvailable ? (
         <Insurance
-          mt={2}
           status={status}
           insurableRouteId={stateRouteId}
           feeAmountUsd={route.insurance.feeAmountUsd}
@@ -188,6 +188,7 @@ export const TransactionPage: React.FC = () => {
           insuredTokenSymbol={route.toToken.symbol}
           insuranceCoverageId={getInsuranceCoverageId()}
           onChange={setRouteId}
+          sx={{ marginTop: 2 }}
         />
       ) : null}
       {status === RouteExecutionStatus.Idle ||
@@ -215,7 +216,7 @@ export const TransactionPage: React.FC = () => {
                     marginLeft: 1,
                   }}
                 >
-                  <DeleteIcon />
+                  <Delete />
                 </Button>
               </Tooltip>
             ) : null}
@@ -223,7 +224,7 @@ export const TransactionPage: React.FC = () => {
         </>
       ) : null}
       {status ? <StatusBottomSheet status={status} route={route} /> : null}
-      {tokenValueLossThresholdExceeded && subvariant !== 'nft' ? (
+      {tokenValueLossThresholdExceeded && subvariant !== 'custom' ? (
         <TokenValueBottomSheet
           route={route}
           ref={tokenValueBottomSheetRef}
@@ -231,6 +232,6 @@ export const TransactionPage: React.FC = () => {
         />
       ) : null}
       <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
-    </Container>
+    </PageContainer>
   );
 };

package/pages/TransactionPage/types.ts

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton/types.js';
 
 export interface StartTransactionButtonProps
   extends BaseTransactionButtonProps {

package/providers/I18nProvider/I18nProvider.tsx

@@ -1,12 +1,13 @@
 import type { i18n } from 'i18next';
 import { createInstance } from 'i18next';
 import { useMemo } from 'react';
-import { I18nextProvider, initReactI18next } from 'react-i18next';
-import * as supportedLanguages from '../../i18n';
-import { useSettings } from '../../stores';
-import { deepMerge } from '../../utils';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
-import type { LanguageKey, LanguageTranslationResources } from './types';
+import { I18nextProvider } from 'react-i18next';
+import * as supportedLanguages from '../../i18n/index.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { deepMerge } from '../../utils/deepMerge.js';
+import { isItemAllowed } from '../../utils/item.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
   children,
@@ -55,9 +56,10 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       detection: {
         caches: [],
       },
+      returnEmptyString: false,
     });
 
-    i18n.use(initReactI18next).init();
+    i18n.init();
 
     return i18n;
   }, [language, languageResources, languages]);

package/providers/I18nProvider/types.ts

@@ -1,4 +1,4 @@
-import type * as languages from '../../i18n';
+import type * as languages from '../../i18n/index.js';
 
 export type PartialResource<T> = T extends object
   ? {