@lifi/widget 2.0.0-beta.4 → 2.0.0-beta.6

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -37,17 +37,17 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^2.0.0-beta.11",
-    "@lifi/wallet-management": "^2.0.0-beta.3",
+    "@lifi/wallet-management": "^2.0.0-beta.5",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.128",
-    "@mui/material": "^5.12.2",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
@@ -60,10 +60,10 @@
     "react-hook-form": "^7.43.9",
     "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.11.1",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.7"
+    "zustand": "^4.3.8"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

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/pages/SwapPage/SwapPage.js

@@ -27,9 +27,12 @@ export const SwapPage = () => {
     const [routeId, setRouteId] = useState(stateRouteId);
     const tokenValueBottomSheetRef = useRef(null);
     const exchangeRateBottomSheetRef = useRef(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
         routeId: routeId,
-        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
+        onAcceptExchangeRateUpdate,
     });
     const handleExecuteRoute = useCallback(() => {
         if (tokenValueBottomSheetRef.current?.isOpen()) {

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,
+        }));
+    },
+}));