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

package/hooks/useRoutes.ts

@@ -1,5 +1,5 @@
 import type { Route, RoutesResponse, Token } from '@lifi/sdk';
-import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
+import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { parseUnits } from 'viem';
@@ -45,20 +45,16 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     toAddress,
     toTokenAmount,
     toChainId,
-    toContractAddress,
-    toContractCallData,
-    toContractGasLimit,
     toTokenAddress,
+    contractCalls,
   ] = useFieldValues(
     'fromChain',
     'fromToken',
     'toAddress',
     'toAmount',
     'toChain',
-    'toContractAddress',
-    'toContractCallData',
-    'toContractGasLimit',
     'toToken',
+    'contractCalls',
   );
   const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
   const { token: toToken } = useToken(toChainId, toTokenAddress);
@@ -72,19 +68,12 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0;
 
   const contractCallQuoteEnabled: boolean =
-    subvariant === 'nft'
-      ? Boolean(
-          toContractAddress &&
-            toContractCallData &&
-            toContractGasLimit &&
-            account.address,
-        )
-      : true;
+    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true;
 
   // If toAddress is set, it must have the same chainType as toChain
-  const hasToAddressAndChainTypeSatisfied =
-    toChain &&
-    Boolean(toAddress) &&
+  const hasToAddressAndChainTypeSatisfied: boolean =
+    !!toChain &&
+    !!toAddress &&
     getChainTypeFromAddress(toAddress) === toChain.chainType;
   // We need to check for toAddress only if it is set
   const isToAddressSatisfied = toAddress
@@ -118,9 +107,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     toChainId as number,
     toToken?.address as string,
     toTokenAmount,
-    toContractAddress,
-    toContractCallData,
-    toContractGasLimit,
+    contractCalls,
     slippage,
     swapOnly,
     disabledBridges,
@@ -148,9 +135,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           toChainId,
           toTokenAddress,
           toTokenAmount,
-          toContractAddress,
-          toContractCallData,
-          toContractGasLimit,
+          contractCalls,
           slippage = defaultSlippage,
           swapOnly,
           disabledBridges,
@@ -196,8 +181,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             )
           : undefined;
 
-        if (subvariant === 'nft') {
-          const contractCallQuote = await getContractCallQuote(
+        if (subvariant === 'custom' && contractCalls && toTokenAmount) {
+          const contractCallQuote = await getContractCallsQuote(
             {
               // Contract calls are enabled only when fromAddress is set
               fromAddress: fromAddress as string,
@@ -206,9 +191,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
               toAmount: toTokenAmount,
               toChain: toChainId,
               toToken: toTokenAddress,
-              toContractAddress,
-              toContractCallData,
-              toContractGasLimit,
+              contractCalls,
               denyBridges: disabledBridges.length ? disabledBridges : undefined,
               denyExchanges: disabledExchanges.length
                 ? disabledExchanges
@@ -224,7 +207,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           contractCallQuote.action.toToken = toToken!;
 
           const customStep =
-            subvariant === 'nft'
+            subvariant === 'custom'
               ? contractCallQuote.includedSteps?.find(
                   (step) => step.type === 'custom',
                 )

package/hooks/{useExpandableVariant.ts → useWideVariant.ts}

@@ -4,10 +4,10 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 const defaultExpandableWidth = 852;
 
-export const useExpandableVariant = () => {
+export const useWideVariant = () => {
   const { variant, useRecommendedRoute } = useWidgetConfig();
   const expandableAllowed = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up(defaultExpandableWidth),
   );
-  return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
+  return variant === 'wide' && expandableAllowed && !useRecommendedRoute;
 };

package/i18n/en.json

@@ -171,8 +171,10 @@
   },
   "main": {
     "allTokens": "All tokens",
-    "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
+    "bridgeStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
+    "checkoutStepDetails": "Purchase via {{tool}}",
     "currentAmount": "Current amount",
+    "depositStepDetails": "Deposit via {{tool}}",
     "featuredTokens": "Featured tokens",
     "fees": {
       "estimated": "estimated fees",
@@ -187,19 +189,21 @@
     "gasCost": "Gas cost",
     "inProgress": "in progress",
     "myTokens": "My tokens",
-    "nftStepDetails": "Purchase NFT via {{tool}}",
     "onChain": "on {{chainName}}",
     "ownedBy": "Owned by",
     "popularTokens": "Popular tokens",
     "process": {
-      "crossChain": {
+      "bridge": {
         "actionRequired": "Please sign the transaction",
         "done": "Bridge transaction confirmed",
         "pending": "Waiting for bridge transaction",
         "started": "Preparing bridge transaction"
       },
-      "nft": {
-        "done": "NFT purchased"
+      "checkout": {
+        "done": "Purchase completed"
+      },
+      "deposit": {
+        "done": "Deposit completed"
       },
       "receivingChain": {
         "done": "Bridge completed",

package/i18n/index.ts

@@ -1,16 +1,16 @@
-import bn from './bn.json' assert { type: 'json' };
-import de from './de.json' assert { type: 'json' };
-import en from './en.json' assert { type: 'json' };
-import es from './es.json' assert { type: 'json' };
-import fr from './fr.json' assert { type: 'json' };
-import id from './id.json' assert { type: 'json' };
-import it from './it.json' assert { type: 'json' };
-import ko from './ko.json' assert { type: 'json' };
-import pt from './pt.json' assert { type: 'json' };
-import th from './th.json' assert { type: 'json' };
-import tr from './tr.json' assert { type: 'json' };
-import uk from './uk.json' assert { type: 'json' };
-import vi from './vi.json' assert { type: 'json' };
-import zh from './zh.json' assert { type: 'json' };
+import bn from './bn.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import id from './id.json';
+import it from './it.json';
+import ko from './ko.json';
+import pt from './pt.json';
+import th from './th.json';
+import tr from './tr.json';
+import uk from './uk.json';
+import vi from './vi.json';
+import zh from './zh.json';
 
 export { bn, de, en, es, fr, id, it, ko, pt, th, tr, uk, vi, zh };

package/index.ts

@@ -1,8 +1,9 @@
 export { App as LiFiWidget } from './App.js';
 export type { WidgetDrawer } from './AppDrawer.js';
-export * from './components/NFT/NFT.js';
-export * from './components/NFT/NFTBase.js';
-export * from './components/NFT/types.js';
+export * from './components/ContractComponent/ItemPrice.js';
+export * from './components/ContractComponent/NFT/NFT.js';
+export * from './components/ContractComponent/NFT/NFTBase.js';
+export * from './components/ContractComponent/NFT/types.js';
 export * from './config/version.js';
 export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
@@ -11,6 +12,8 @@ export { formatChain } from './providers/WalletProvider/utils.js';
 export * from './stores/form/types.js';
 export { useFieldActions } from './stores/form/useFieldActions.js';
 export { useFieldValues } from './stores/form/useFieldValues.js';
+export { jumperTheme } from './themes/jumper.js';
+export { windows95Theme } from './themes/windows95.js';
 export * from './types/events.js';
 export * from './types/token.js';
 export * from './types/widget.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.33",
+  "version": "3.0.0-alpha.35",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,30 +34,30 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@lifi/sdk": "^3.0.0-alpha.56",
-    "@lifi/wallet-management": "^3.0.0-alpha.22",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/lab": "^5.0.0-alpha.166",
-    "@mui/material": "^5.15.11",
+    "@lifi/sdk": "^3.0.0-alpha.57",
+    "@lifi/wallet-management": "^3.0.0-alpha.23",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/lab": "^5.0.0-alpha.167",
+    "@mui/material": "^5.15.12",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/wallet-adapter-wallets": "^0.19.26",
-    "@solana/web3.js": "^1.90.0",
-    "@tanstack/react-query": "^5.24.1",
+    "@solana/wallet-adapter-wallets": "^0.19.31",
+    "@solana/web3.js": "^1.91.0",
+    "@tanstack/react-query": "^5.27.5",
     "@tanstack/react-virtual": "^3.1.3",
-    "i18next": "^23.10.0",
+    "i18next": "^23.10.1",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
+    "react-i18next": "^14.1.0",
     "react-intersection-observer": "^9.8.1",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.22.3",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.7.15",
-    "wagmi": "2.5.7",
-    "zustand": "^4.5.1"
+    "viem": "^2.8.4",
+    "wagmi": "^2.5.8",
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.17.0",

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,4 +1,5 @@
 import { DeleteOutline } from '@mui/icons-material';
+import type { IconButtonProps } from '@mui/material';
 import {
   Button,
   DialogActions,
@@ -7,6 +8,7 @@ import {
   DialogTitle,
   IconButton,
   List,
+  useTheme,
 } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +20,20 @@ import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.
 import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
 import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js';
 
+const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'end' : false}
+      onClick={onClick}
+    >
+      <DeleteOutline />
+    </IconButton>
+  );
+};
+
 export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
   const executingRoutes = useExecutingRoutesIds();
@@ -31,11 +47,9 @@ export const ActiveTransactionsPage = () => {
 
   useEffect(() => {
     if (executingRoutes.length) {
-      return headerStoreContext.getState().setAction(
-        <IconButton size="medium" edge="end" onClick={toggleDialog}>
-          <DeleteOutline />
-        </IconButton>,
-      );
+      return headerStoreContext
+        .getState()
+        .setAction(<DeleteIconButton onClick={toggleDialog} />);
     }
   }, [executingRoutes.length, headerStoreContext, toggleDialog]);
 
@@ -47,6 +61,7 @@ export const ActiveTransactionsPage = () => {
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/LanguagesPage.tsx

@@ -20,6 +20,7 @@ export const LanguagesPage: React.FC = () => {
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/MainPage/MainPage.tsx

@@ -9,30 +9,32 @@ import { Routes } from '../../components/Routes/Routes.js';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
 import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
 import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
-import { useExpandableVariant } from '../../hooks/useExpandableVariant.js';
+import { useWideVariant } from '../../hooks/useWideVariant.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { HiddenUI } from '../../types/widget.js';
 import { MainGasMessage } from './MainGasMessage.js';
 import { ReviewButton } from './ReviewButton.js';
 
 export const MainPage: React.FC = () => {
-  const expandable = useExpandableVariant();
+  const wideVariant = useWideVariant();
   const { subvariant, contractComponent, hiddenUI } = useWidgetConfig();
-  const nft = subvariant === 'nft';
+  const custom = subvariant === 'custom';
   const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);
 
   return (
     <PageContainer>
-      <ActiveTransactions mt={1} mb={2} />
-      {nft ? (
-        <ContractComponent mt={1} mb={2}>
+      <ActiveTransactions sx={{ marginBottom: 2 }} />
+      {custom ? (
+        <ContractComponent sx={{ marginBottom: 2 }}>
           {contractComponent}
         </ContractComponent>
       ) : null}
-      <SelectChainAndToken mt={1} mb={2} />
-      {!nft ? <AmountInput formType="from" mb={2} /> : null}
-      {!expandable ? <Routes mb={2} /> : null}
-      <SendToWalletButton mb={2} />
+      <SelectChainAndToken mb={2} />
+      {!custom ? (
+        <AmountInput formType="from" sx={{ marginBottom: 2 }} />
+      ) : null}
+      {!wideVariant ? <Routes sx={{ marginBottom: 2 }} /> : null}
+      <SendToWalletButton sx={{ marginBottom: 2 }} />
       <GasRefuelMessage mb={2} />
       <MainGasMessage mb={2} />
       <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>

package/pages/MainPage/ReviewButton.tsx

@@ -33,7 +33,7 @@ export const ReviewButton: React.FC = () => {
   const getButtonText = (): string => {
     if (currentRoute) {
       switch (subvariant) {
-        case 'nft':
+        case 'custom':
           return t(`button.reviewPurchase`);
         case 'refuel':
           return t(`button.reviewBridge`);
@@ -46,7 +46,7 @@ export const ReviewButton: React.FC = () => {
       }
     } else {
       switch (subvariant) {
-        case 'nft':
+        case 'custom':
           return t(`button.buy`);
         case 'refuel':
           return t(`button.getGas`);

package/pages/RoutesPage/RoutesPage.style.ts

@@ -2,5 +2,5 @@ import { Stack as MuiStack, styled } from '@mui/material';
 
 export const Stack = styled(MuiStack)(({ theme }) => ({
   position: 'relative',
-  padding: theme.spacing(1, 3, 3, 3),
+  padding: theme.spacing(0, 3, 3, 3),
 }));

package/pages/RoutesPage/RoutesPage.tsx

@@ -14,7 +14,7 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Stack } from './RoutesPage.style.js';
 
 export const RoutesPage: React.FC<BoxProps> = () => {
-  const { navigateBack, navigate } = useNavigateBack();
+  const { navigate } = useNavigateBack();
   const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } =
     useRoutes();
   const setExecutableRoute = useSetExecutableRoute();
@@ -27,14 +27,6 @@ export const RoutesPage: React.FC<BoxProps> = () => {
     });
   };
 
-  useEffect(() => {
-    if (!routes?.length && !isLoading && !isFetching) {
-      navigateBack();
-    }
-    // redirect to the home page if no routes are found on page reload
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     return headerStoreContext
       .getState()

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -29,6 +29,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/SelectEnabledToolsPage.tsx

@@ -10,6 +10,7 @@ import {
   List,
   ListItemAvatar,
   Tooltip,
+  useTheme,
 } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 import { useEffect } from 'react';
@@ -34,13 +35,18 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const tooltipTitle = allCheckboxesSelected
     ? t('tooltip.deselectAll')
     : t('tooltip.selectAll');
 
   return (
     <Tooltip title={tooltipTitle} arrow>
-      <IconButton size="medium" edge="end" onClick={onClick}>
+      <IconButton
+        size="medium"
+        edge={theme?.navigation?.edge ? 'end' : false}
+        onClick={onClick}
+      >
         {allCheckboxesSelected ? (
           <CheckBoxOutlined />
         ) : anyCheckboxesSelected ? (
@@ -90,6 +96,7 @@ export const SelectEnabledToolsPage: React.FC<{
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/SelectNativeTokenPage.tsx

@@ -21,6 +21,7 @@ export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -2,7 +2,7 @@ import { Search } from '@mui/icons-material';
 import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card/Card.js';
+import { InputCard } from '../../components/Card/InputCard.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
 import { Input } from './SearchTokenInput.style.js';
@@ -22,7 +22,7 @@ export const SearchTokenInput = () => {
   );
 
   return (
-    <Card>
+    <InputCard>
       <FormControl fullWidth>
         <Input
           size="small"
@@ -43,6 +43,6 @@ export const SearchTokenInput = () => {
           autoComplete="off"
         />
       </FormControl>
-    </Card>
+    </InputCard>
   );
 };

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -34,7 +34,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   return (
     <PageContainer disableGutters>
-      <Box pt={1} pb={2} px={3} ref={headerRef}>
+      <Box pb={2} px={3} ref={headerRef}>
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
           <SearchTokenInput />

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -104,6 +104,7 @@ export const SelectWalletPage = () => {
     <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
           paddingBottom: 1.5,

package/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -157,9 +157,7 @@ export const BookmarkAddressSheet = forwardRef<
           </SheetAddressContainer>
         ) : null}
         <BookmarkInputFields>
-          <SendToWalletCard
-            variant={error?.type === 'name' ? 'error' : 'default'}
-          >
+          <SendToWalletCard type={error?.type === 'name' ? 'error' : 'default'}>
             <Input
               size="small"
               autoComplete="off"
@@ -175,7 +173,7 @@ export const BookmarkAddressSheet = forwardRef<
           </SendToWalletCard>
           {!validatedWallet && (
             <SendToWalletCard
-              variant={error?.type === 'address' ? 'error' : 'default'}
+              type={error?.type === 'address' ? 'error' : 'default'}
             >
               <AddressInput
                 size="small"

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -89,6 +89,7 @@ export const SendToConfiguredWalletPage = () => {
               <ListItemAvatar>
                 <AccountAvatar
                   chainId={defaultChainIdsByType[toAddress.chainType]}
+                  toAddress={toAddress}
                 />
               </ListItemAvatar>
               <ListItemText

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -9,7 +9,7 @@ import {
   styled,
 } from '@mui/material';
 import { ButtonTertiary } from '../../components/ButtonTertiary.js';
-import { Card } from '../../components/Card/Card.js';
+import { InputCard } from '../../components/Card/InputCard.js';
 import { Input } from '../../components/Input.js';
 import type { PageContainerProps } from '../../components/PageContainer.js';
 import { PageContainer } from '../../components/PageContainer.js';
@@ -38,7 +38,7 @@ export const SendToWalletPageContainer = styled(
   gap: theme.spacing(1),
 }));
 
-export const SendToWalletCard = styled(Card)({
+export const SendToWalletCard = styled(InputCard)({
   display: 'flex',
   flexDirection: 'column',
 });
@@ -93,6 +93,7 @@ export const ListContainer = styled(List)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   minHeight: 400,
+  paddingTop: 0,
   paddingBottom: theme.spacing(1.5),
 }));
 

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -178,8 +178,13 @@ export const SendToWalletPage = () => {
   });
 
   return (
-    <SendToWalletPageContainer topBottomGutters>
-      <SendToWalletCard mb={6} variant={errorMessage ? 'error' : 'default'}>
+    <SendToWalletPageContainer bottomGutters>
+      <SendToWalletCard
+        type={errorMessage ? 'error' : 'default'}
+        sx={{
+          marginBottom: 6,
+        }}
+      >
         <AddressInput
           size="small"
           autoComplete="off"

package/pages/SettingsPage/SettingsPage.tsx

@@ -11,7 +11,7 @@ import { ThemeSettings } from './ThemeSettings.js';
 
 export const SettingsPage = () => {
   return (
-    <PageContainer topBottomGutters>
+    <PageContainer bottomGutters>
       <SettingsList>
         <SettingsCardAccordion>
           <ThemeSettings />