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

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -3,7 +3,7 @@ import { Box, Container } from '@mui/material';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
+import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, useSwapOnly, } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
 const minTokenListHeight = 360;
 export const SelectTokenPage = ({ formType }) => {
@@ -12,8 +12,10 @@ export const SelectTokenPage = ({ formType }) => {
     const headerRef = useRef(null);
     const contentHeight = useContentHeight();
     const [tokenListHeight, setTokenListHeight] = useState(0);
+    const swapOnly = useSwapOnly();
     useLayoutEffect(() => {
         setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
     }, [contentHeight]);
-    return (_jsxs(Container, { disableGutters: true, children: [_jsxs(Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, { mt: 2, children: _jsx(SearchTokenInput, {}) })] }), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
+    const hideChainSelect = swapOnly && formType === 'to';
+    return (_jsxs(Container, { disableGutters: true, children: [_jsxs(Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [!hideChainSelect ? _jsx(ChainSelect, { formType: formType }) : null, _jsx(Box, { mt: !hideChainSelect ? 2 : 0, children: _jsx(SearchTokenInput, {}) })] }), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
 };

package/providers/SwapFormProvider/FormUpdater.js

@@ -23,6 +23,7 @@ export const FormUpdater = ({ defaultValues }) => {
         const { isTouched: isToTokenTouched } = getFieldState(SwapFormKey.ToToken);
         const { isTouched: isFromAmountTouched } = getFieldState(SwapFormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+            resetField(SwapFormKey.FromChain, { defaultValue: account.chainId });
             setValue(SwapFormKey.FromChain, account.chainId);
             setValue(SwapFormKey.FromToken, '');
             if (isFromAmountTouched) {
@@ -30,6 +31,7 @@ export const FormUpdater = ({ defaultValues }) => {
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
+            resetField(SwapFormKey.ToChain, { defaultValue: account.chainId });
             setValue(SwapFormKey.ToChain, account.chainId);
             setValue(SwapFormKey.ToToken, '');
         }
@@ -40,6 +42,7 @@ export const FormUpdater = ({ defaultValues }) => {
         fromChain,
         getFieldState,
         getValues,
+        resetField,
         setValue,
         toChain,
     ]);

package/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/stores/StoreProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteExecutionStoreProvider } from './routes';
-export const StoreProvider = ({ children, namePrefix }) => {
-    return (_jsx(RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
+import { SplitSubvariantStoreProvider } from './settings';
+export const StoreProvider = ({ children, config, }) => {
+    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
 };

package/stores/routes/RouteExecutionStore.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable no-underscore-dangle */
 import { createContext, useContext, useRef } from 'react';
 import { createRouteExecutionStore } from './createRouteExecutionStore';
 export const RouteExecutionStoreContext = createContext(null);

package/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/stores/settings/index.js

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

package/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/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/stores/settings/useSplitSubvariantStore.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
+import { create } from 'zustand';
+export const SplitSubvariantStoreContext = createContext(null);
+const shouldRecreateStore = (store, props) => {
+    const { state } = store.getState();
+    return (!state && props.state) || (state && !props.state);
+};
+export function SplitSubvariantStoreProvider({ children, ...props }) {
+    const storeRef = useRef();
+    if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+        storeRef.current = createSplitSubvariantStore(props);
+    }
+    return (_jsx(SplitSubvariantStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useSplitSubvariantStore(selector, equalityFn) {
+    const useStore = useContext(SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useSplitSubvariantStoreContext() {
+    const useStore = useContext(SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+export const createSplitSubvariantStore = ({ state }) => create((set) => ({
+    state,
+    setState(state) {
+        set(() => ({
+            state,
+        }));
+    },
+}));