@lifi/widget 2.0.0-beta.5 → 2.0.0-beta.7

package/cjs/i18n/pt.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "Automático",
+    "buy": "Comprar",
+    "buyNow": "Comprar agora",
     "cancel": "Cancelar",
     "connectWallet": "Conectar carteira",
     "contactSupport": "Falar com o suporte",
@@ -23,6 +25,7 @@
     "resetSettings": "Redefinir as configurações",
     "restartSwap": "Reiniciar a conversão",
     "reviewGasSwap": "Rever o gás de conversão",
+    "reviewPurchase": "Revisar compra",
     "reviewSwap": "Rever conversão",
     "seeDetails": "Ver detalhes",
     "showAll": "Mostrar tudo",
@@ -39,10 +42,14 @@
   },
   "header": {
     "activeSwaps": "Conversões ativas",
+    "bridge": "Ponte",
     "checkout": "Finalizar",
     "from": "Converter a partir de",
     "gas": "Gás",
     "gasSwap": "Conversão de gás",
+    "payWith": "Pagar com",
+    "purchase": "Compra",
+    "purchaseDetails": "Detalhes da compra",
     "routes": "Você recebe",
     "selectChain": "Selecionar uma rede",
     "selectWallet": "Selecionar sua carteira",
@@ -75,6 +82,7 @@
     "currentAmount": "Quantidade atual",
     "error": {
       "message": {
+        "allowanceRequired": "A quantidade a ser transferida para {{tokenSymbol}} excede a sua permissão atual. Por favor, aumente a sua permissão e tente novamente.",
         "slippageThreshold": "A derrapagem é maior do que o limite definido. Solicite uma nova rota para obter uma nova cotação.",
         "transactionFailed": "Por favor, verifique o explorador de blocos para mais informações.",
         "transactionNotSent": "A transação não foi enviada. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} na {{chainName}} permanece na sua carteira.",
@@ -82,6 +90,7 @@
         "unknown": "Por favor, tente novamente ou fale com o suporte."
       },
       "title": {
+        "allowanceRequired": "Permissão insuficiente",
         "balanceIsTooLow": "O saldo é muito baixo",
         "chainSwitch": "Necessário mudança de rede",
         "failed": "Conversão falhou",
@@ -131,7 +140,6 @@
     "onChain": "em {{nome da rede}}",
     "otherTokens": "Outros tokens",
     "ownedBy": "Possuído por",
-    "payWith": "Pagar com",
     "process": {
       "crossChain": {
         "actionRequired": "Por favor, assine a transação",
@@ -139,6 +147,9 @@
         "pending": "Aguardando a transação da ponte",
         "started": "Preparando a transação da ponte"
       },
+      "nft": {
+        "done": "NFT comprado"
+      },
       "receivingChain": {
         "done": "Ponte concluída",
         "partial": "Ponte parcialmente concluída",
@@ -165,24 +176,27 @@
     "rateChange": "Alterar taxa",
     "receiving": "Recebendo",
     "refuelStepDetails": "Obter gás via {{tool}}",
-    "routes": "Você recebe",
-    "selectChain": "Rede",
+    "selectChain": "Selecione a rede",
     "selectChainAndToken": "Selecione a rede e o token",
-    "selectToken": "Token",
+    "selectToken": "Selecione o Token",
     "sendToAddress": "Enviar para",
     "sendToWallet": "Enviar para uma carteira diferente",
     "sentToAddress": "Enviar para",
     "stepBridge": "Ponte",
+    "stepBridgeAndBuy": "Transfira e compre",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Conversão",
     "stepSwapAndBridge": "Converter e enviar pela ponte",
+    "stepSwapAndBuy": "Converta e compre",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Tentamos completar a conversão, mas a {{tool}} ficou sem liquidez para o token {{tokenSymbol}}.",
+        "purchaseSuccessful": "Agora você tem {{assetName}} na carteira {{walletAddress}} na cadeia {{chainName}}",
         "swapSuccessful": "Agora há {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} na carteira {{walletAddress}} na rede {{chainName}}."
       },
       "title": {
         "gasSwapSuccessful": "Conversão de gás bem sucedida",
+        "purchaseSuccessful": "Compra efetuada com sucesso",
         "refundIssued": "Reembolso emitido",
         "swapPartiallySuccessful": "Conversão parcialmente bem sucedida",
         "swapSuccessful": "Conversão bem sucedida"
@@ -237,6 +251,7 @@
     },
     "numberOfSteps": "Um número de passos para a conversão. Cada etapa pode conter 1-2 transações que requerem uma assinatura.",
     "progressToNextUpdate": "Os dados exibidos serão atualizados automaticamente após {{value}} segundos. Clique aqui para atualizar manualmente.",
+    "recommended": "Uma rota econômica que equilibra complexidade e facilidade de uso.",
     "settingsModified": "Configurações (modificado)"
   },
   "wallet": {

package/cjs/i18n/uk.json

@@ -1,6 +1,8 @@
 {
   "button": {
     "auto": "Авто",
+    "buy": "Придбати",
+    "buyNow": "Придбати",
     "cancel": "Скасувати",
     "connectWallet": "Під'єднати гаманець",
     "contactSupport": "Служба підтримки",
@@ -23,6 +25,7 @@
     "resetSettings": "Скинути налаштування",
     "restartSwap": "Перезапустити своп",
     "reviewGasSwap": "Переглянути своп газу",
+    "reviewPurchase": "Перегляд покупки",
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
@@ -39,12 +42,16 @@
   },
   "header": {
     "activeSwaps": "Активні свопи",
+    "bridge": "Бридж",
     "checkout": "Розрахунок",
     "from": "Своп з",
     "gas": "Газ",
     "gasSwap": "Своп газу",
+    "payWith": "Сплатити за допомогою",
+    "purchase": "Купівля",
+    "purchaseDetails": "Деталі покупки",
     "routes": "Ви отримаєте",
-    "selectChain": "Оберіть чейн",
+    "selectChain": "Виберіть чейн",
     "selectWallet": "Виберіть свій гаманець",
     "settings": "Налаштування",
     "swap": "Своп",
@@ -75,6 +82,7 @@
     "currentAmount": "Поточна сума",
     "error": {
       "message": {
+        "allowanceRequired": "Сума переказу для {{tokenSymbol}} перевищує поточну межу. Збільшіть доступну кількість у гаманці та спробуйте ще раз.",
         "slippageThreshold": "Прослизання перевищує визначений поріг. Будь ласка, зробіть запит на новий маршрут, щоб отримати нову пропозицію.",
         "transactionFailed": "Будь ласка, перевірте провідник блоків для отримання додаткової інформації.",
         "transactionNotSent": "Транзакція не була відправлена. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}} все ще знаходяться у вашому гаманці.",
@@ -82,6 +90,7 @@
         "unknown": "Будь ласка, спробуйте ще раз або зверніться до служби підтримки."
       },
       "title": {
+        "allowanceRequired": "Недостатня дозволена кількість",
         "balanceIsTooLow": "Баланс занадто низький",
         "chainSwitch": "Потрібно переключити чейн.",
         "failed": "Помилка обміну.",
@@ -131,7 +140,6 @@
     "onChain": "на {{chainName}}",
     "otherTokens": "Інші токени",
     "ownedBy": "Власник",
-    "payWith": "Оплатити з",
     "process": {
       "crossChain": {
         "actionRequired": "Будь ласка, підпишіть транзакцію",
@@ -139,6 +147,9 @@
         "pending": "Очікування бридж транзакції",
         "started": "Підготовка бридж транзакції"
       },
+      "nft": {
+        "done": "Придбано NFT"
+      },
       "receivingChain": {
         "done": "Бридж завершено",
         "partial": "Бридж частково завершено",
@@ -165,24 +176,27 @@
     "rateChange": "Зміна курсу",
     "receiving": "Отримання",
     "refuelStepDetails": "Отримати газ через {{tool}}",
-    "routes": "Ви отримаєте",
-    "selectChain": "Чейн",
+    "selectChain": "Виберіть чейн",
     "selectChainAndToken": "Виберіть чейн і токен",
-    "selectToken": "Токен",
+    "selectToken": "Виберіть токен",
     "sendToAddress": "Відправити на {{address}}",
     "sendToWallet": "Надіслати на інший гаманець",
     "sentToAddress": "Відправлено на {{address}}",
     "stepBridge": "Бридж",
+    "stepBridgeAndBuy": "Бридж та покупка",
     "stepDetails": "{{tool}} через LI.FI",
     "stepSwap": "Своп",
     "stepSwapAndBridge": "Своп та бридж",
+    "stepSwapAndBuy": "Своп та покупка",
     "success": {
       "message": {
         "swapPartiallySuccessful": "Ми намагалися завершити своп, але {{tool}} не вистачило ліквідності токену {{tokenSymbol}}.",
+        "purchaseSuccessful": "Тепер ви маєте {{assetName}} в {{walletAddress}} гаманці на ланцюжку {{chainName}}.",
         "swapSuccessful": "Зараз є {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} у гаманці {{walletAddress}} на чейні {{chainName}}."
       },
       "title": {
         "gasSwapSuccessful": "Своп газу успішний",
+        "purchaseSuccessful": "Покупка успішна",
         "refundIssued": "Здійснено повернення коштів",
         "swapPartiallySuccessful": "Своп частково успішний",
         "swapSuccessful": "Своп успішний"
@@ -237,6 +251,7 @@
     },
     "numberOfSteps": "Кількість кроків свопу. Кожен крок може містити 1-3 транзакції, які потребують підпису.",
     "progressToNextUpdate": "Зображені дані автоматично оновляться через {{value}} секунд. Натисніть тут, щоб оновити вручну.",
+    "recommended": "Дешевий маршрут, який балансує складність і легкість використання.",
     "settingsModified": "Налаштування (змінено)"
   },
   "wallet": {

package/cjs/index.d.ts

@@ -6,4 +6,4 @@ export * from './config/version';
 export { useWidgetEvents, widgetEvents } from './hooks';
 export { useWallet } from './providers/WalletProvider';
 export * from './types';
-export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
+export declare const LiFiWidget: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -15,9 +15,11 @@ const SelectTokenPage = ({ formType }) => {
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
     const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
+    const swapOnly = (0, hooks_1.useSwapOnly)();
     (0, react_1.useLayoutEffect)(() => {
         setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
+    const hideChainSelect = swapOnly && formType === 'to';
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [!hideChainSelect ? (0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: !hideChainSelect ? 2 : 0, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/providers/SwapFormProvider/FormUpdater.js

@@ -26,6 +26,7 @@ const FormUpdater = ({ defaultValues }) => {
         const { isTouched: isToTokenTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.ToToken);
         const { isTouched: isFromAmountTouched } = getFieldState(SwapFormProvider_1.SwapFormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.FromChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.FromToken, '');
             if (isFromAmountTouched) {
@@ -33,6 +34,7 @@ const FormUpdater = ({ defaultValues }) => {
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
+            resetField(SwapFormProvider_1.SwapFormKey.ToChain, { defaultValue: account.chainId });
             setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId);
             setValue(SwapFormProvider_1.SwapFormKey.ToToken, '');
         }
@@ -43,6 +45,7 @@ const FormUpdater = ({ defaultValues }) => {
         fromChain,
         getFieldState,
         getValues,
+        resetField,
         setValue,
         toChain,
     ]);

package/cjs/stores/StoreProvider.d.ts

@@ -1,3 +1,3 @@
 import type { PropsWithChildren } from 'react';
-import type { PersistStoreProviderProps } from './types';
-export declare const StoreProvider: React.FC<PropsWithChildren<PersistStoreProviderProps>>;
+import type { WidgetConfigProps } from '../types';
+export declare const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>>;

package/cjs/stores/StoreProvider.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const routes_1 = require("./routes");
-const StoreProvider = ({ children, namePrefix }) => {
-    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
+const settings_1 = require("./settings");
+const StoreProvider = ({ children, config, }) => {
+    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/routes/RouteExecutionStore.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRouteExecutionStoreContext = exports.useRouteExecutionStore = exports.RouteExecutionStoreProvider = exports.RouteExecutionStoreContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-underscore-dangle */
 const react_1 = require("react");
 const createRouteExecutionStore_1 = require("./createRouteExecutionStore");
 exports.RouteExecutionStoreContext = (0, react_1.createContext)(null);

package/cjs/stores/settings/index.d.ts

@@ -3,3 +3,4 @@ export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';
+export * from './useSplitSubvariantStore';

package/cjs/stores/settings/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useAppearance"), exports);
 __exportStar(require("./useSendToWalletStore"), exports);
 __exportStar(require("./useSettings"), exports);
 __exportStar(require("./useSettingsStore"), exports);
+__exportStar(require("./useSplitSubvariantStore"), exports);

package/cjs/stores/settings/types.d.ts

@@ -1,4 +1,6 @@
 import type { Order } from '@lifi/sdk';
+import type { PropsWithChildren } from 'react';
+import type { StoreApi, UseBoundStore } from 'zustand';
 import type { Appearance, WidgetConfig } from '../../types';
 export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
 export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
@@ -32,3 +34,12 @@ export interface SendToWalletStore extends SendToWalletState {
     toggleSendToWallet(): void;
     setSendToWallet(value: boolean): void;
 }
+export interface SplitSubvariantState {
+    state?: 'swap' | 'bridge';
+    setState(state: 'swap' | 'bridge'): void;
+}
+export type SplitSubvariantStore = UseBoundStore<StoreApi<SplitSubvariantState>>;
+export interface SplitSubvariantProps {
+    state?: 'swap' | 'bridge';
+}
+export type SplitSubvariantProviderProps = PropsWithChildren<SplitSubvariantProps>;

package/cjs/stores/settings/useSplitSubvariantStore.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SplitSubvariantProps, SplitSubvariantProviderProps, SplitSubvariantState, SplitSubvariantStore } from './types';
+export declare const SplitSubvariantStoreContext: import("react").Context<SplitSubvariantStore | null>;
+export declare function SplitSubvariantStoreProvider({ children, ...props }: SplitSubvariantProviderProps): JSX.Element;
+export declare function useSplitSubvariantStore<T>(selector: (state: SplitSubvariantState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useSplitSubvariantStoreContext(): SplitSubvariantStore;
+export declare const createSplitSubvariantStore: ({ state }: SplitSubvariantProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<SplitSubvariantState>>;

package/cjs/stores/settings/useSplitSubvariantStore.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitSubvariantStore = exports.useSplitSubvariantStoreContext = exports.useSplitSubvariantStore = exports.SplitSubvariantStoreProvider = exports.SplitSubvariantStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+exports.SplitSubvariantStoreContext = (0, react_1.createContext)(null);
+const shouldRecreateStore = (store, props) => {
+    const { state } = store.getState();
+    return (!state && props.state) || (state && !props.state);
+};
+function SplitSubvariantStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+        storeRef.current = (0, exports.createSplitSubvariantStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.SplitSubvariantStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.SplitSubvariantStoreProvider = SplitSubvariantStoreProvider;
+function useSplitSubvariantStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useSplitSubvariantStore = useSplitSubvariantStore;
+function useSplitSubvariantStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useSplitSubvariantStoreContext = useSplitSubvariantStoreContext;
+const createSplitSubvariantStore = ({ state }) => (0, zustand_1.create)((set) => ({
+    state,
+    setState(state) {
+        set(() => ({
+            state,
+        }));
+    },
+}));
+exports.createSplitSubvariantStore = createSplitSubvariantStore;

package/cjs/types/widget.d.ts

@@ -5,6 +5,7 @@ import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
 export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel' | 'nft';
+export type WidgetSubvariant = 'default' | 'split';
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -14,10 +15,12 @@ export declare enum DisabledUI {
 export type DisabledUIType = `${DisabledUI}`;
 export declare enum HiddenUI {
     Appearance = "appearance",
+    DrawerButton = "drawerButton",
+    History = "history",
     Language = "language",
     PoweredBy = "poweredBy",
     ToAddress = "toAddress",
-    History = "history"
+    WalletMenu = "walletMenu"
 }
 export type HiddenUIType = `${HiddenUI}`;
 export declare enum RequiredUI {
@@ -73,6 +76,7 @@ export interface WidgetConfig {
     slippage?: number;
     insurance?: boolean;
     variant?: WidgetVariant;
+    subvariant?: WidgetSubvariant;
     appearance?: Appearance;
     theme?: ThemeConfig;
     containerStyle?: CSSProperties;

package/cjs/types/widget.js

@@ -11,12 +11,12 @@ var DisabledUI;
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
-    // FromAmount = 'fromAmount',
+    HiddenUI["DrawerButton"] = "drawerButton";
+    HiddenUI["History"] = "history";
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
-    HiddenUI["History"] = "history";
-    // ToToken = 'toToken',
+    HiddenUI["WalletMenu"] = "walletMenu";
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
 var RequiredUI;
 (function (RequiredUI) {

package/components/ChainSelect/useChainSelect.js

@@ -1,5 +1,5 @@
 import { useController, useFormContext } from 'react-hook-form';
-import { useChains } from '../../hooks';
+import { useChains, useSwapOnly } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores';
 export const useChainSelect = (formType) => {
@@ -8,6 +8,7 @@ export const useChainSelect = (formType) => {
     const { setValue } = useFormContext();
     const { chains, isLoading } = useChains();
     const [chainOrder, setChainOrder] = useChainOrder();
+    const swapOnly = useSwapOnly();
     const getChains = () => {
         if (!chains) {
             return [];
@@ -20,6 +21,11 @@ export const useChainSelect = (formType) => {
     const setCurrentChain = (chainId) => {
         onChange(chainId);
         onBlur();
+        if (swapOnly) {
+            setValue(SwapFormKeyHelper.getChainKey('to'), chainId, {
+                shouldTouch: true,
+            });
+        }
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(SwapFormKey.TokenSearchFilter, '');

package/components/Header/Header.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { createElementId, ElementId, stickyHeaderRoutes } from '../../utils';
+import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
@@ -12,6 +12,6 @@ export const HeaderContainer = ({ children }) => {
     return (_jsx(Container, { id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)), children: children }));
 };
 export const Header = () => {
-    const { walletManagement } = useWidgetConfig();
-    return (_jsxs(HeaderContainer, { children: [!walletManagement ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
+    const { walletManagement, subvariant } = useWidgetConfig();
+    return (_jsxs(HeaderContainer, { children: [!walletManagement && subvariant !== 'split' ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
 };

package/components/Header/Header.style.js

@@ -39,4 +39,7 @@ export const WalletButton = styled(Button)(({ theme }) => ({
     [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
         fontSize: '24px',
     },
+    [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
 }));

package/components/Header/NavigationHeader.js

@@ -10,10 +10,12 @@ import { useWallet, useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
+import { NavigationTabs } from './NavigationTabs';
+import { WalletMenuButton } from './WalletHeader';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { variant, hiddenUI } = useWidgetConfig();
+    const { variant, subvariant, hiddenUI, walletManagement } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
     const { element } = useHeaderActionStore();
@@ -23,6 +25,7 @@ export const NavigationHeader = () => {
         : pathname;
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = navigationRoutesValues.includes(path);
+    const splitSubvariant = subvariant === 'split' && !hasPath;
     const handleHeaderTitle = () => {
         switch (path) {
             case navigationRoutes.selectWallet:
@@ -75,7 +78,7 @@ export const NavigationHeader = () => {
             }
         }
     };
-    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, _jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
-                                            marginRight: -1.25,
-                                        }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
+                                                    marginRight: -1.25,
+                                                }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
 };

package/components/Header/NavigationTabs.d.ts

@@ -0,0 +1 @@
+export declare const NavigationTabs: () => JSX.Element;

package/components/Header/NavigationTabs.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers';
+import { useSplitSubvariantStore } from '../../stores';
+import { HeaderAppBar } from './Header.style';
+import { NavbarTab, NavbarTabs } from './NavigationTabs.style';
+export const NavigationTabs = () => {
+    const { t } = useTranslation();
+    const [state, setState] = useSplitSubvariantStore((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setValue } = useFormContext();
+    const handleChange = (_, value) => {
+        setValue(SwapFormKey.FromAmount, '');
+        setValue(SwapFormKey.FromToken, '');
+        setValue(SwapFormKey.ToToken, '');
+        setState(value === 0 ? 'swap' : 'bridge');
+    };
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: _jsxs(NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [_jsx(NavbarTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));
+};