@lifi/widget 1.32.7 → 1.32.8

package/cjs/components/TextFitter/TextFitter.js

@@ -4,6 +4,7 @@ exports.TextFitter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const react_1 = require("react");
+const react_intersection_observer_1 = require("react-intersection-observer");
 const initialState = {
     x: 0,
     y: 0,
@@ -14,7 +15,13 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
     const theme = (0, styles_1.useTheme)();
     const textRef = (0, react_1.useRef)(null);
     const [viewBox, setViewBox] = (0, react_1.useState)(initialState);
-    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+    const [ref] = (0, react_intersection_observer_1.useInView)({
+        onChange(inView) {
+            if (inView) {
+                calculateBox();
+            }
+        },
+    });
     const calculateBox = (0, react_1.useCallback)(() => {
         if (!textRef.current) {
             return;
@@ -28,7 +35,6 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        // setTextRect(textRef.current.getBoundingClientRect());
         onFit?.();
     }, [cropBottom, cropTop, onFit]);
     (0, react_1.useLayoutEffect)(() => {
@@ -47,6 +53,6 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
         //     ? maxHeight
         //     : height
         // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, children: (0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, ref: ref, children: (0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
 };
 exports.TextFitter = TextFitter;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.7";
+export declare const version = "1.32.8";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.32.7';
+exports.version = '1.32.8';

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -7,10 +7,12 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const ResetSettingsButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools } = (0, hooks_1.useTools)();
+    const config = (0, providers_1.useWidgetConfig)();
     const resetSettings = (0, stores_1.useSettingsStore)((state) => state.reset);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
@@ -18,7 +20,7 @@ const ResetSettingsButton = () => {
     }, []);
     const handleReset = () => {
         if (tools) {
-            resetSettings(tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
         }
         toggleDialog();
     };

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

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk';
-import type { Appearance } from '../../types';
+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;
 export type SettingsToolType = 'Bridges' | 'Exchanges';
@@ -21,7 +21,7 @@ export interface SettingsState extends SettingsProps {
     setValues: ValuesSetter<SettingsProps>;
     initializeTools(toolType: SettingsToolType, tools: string[], reset?: boolean): void;
     setTools(toolType: SettingsToolType, tools: string[], availableTools: string[]): void;
-    reset(bridges: string[], exchanges: string[]): void;
+    reset(config: WidgetConfig, bridges: string[], exchanges: string[]): void;
 }
 export interface SendToWalletState {
     showSendToWallet: boolean;

package/cjs/stores/settings/useSettingsStore.js

@@ -65,10 +65,11 @@ exports.useSettingsStore = (0, zustand_1.create)((0, middleware_1.persist)((set,
             return values;
         }, {}),
     })),
-    reset: (bridges, exchanges) => {
+    reset: (config, bridges, exchanges) => {
         set(() => ({
             ...exports.defaultSettings,
             ...exports.defaultConfigurableSettings,
+            appearance: config.appearance ?? exports.defaultSettings.appearance,
         }));
         get().initializeTools('Bridges', bridges, true);
         get().initializeTools('Exchanges', exchanges, true);

package/components/TextFitter/TextFitter.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@mui/material/styles';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 const initialState = {
     x: 0,
     y: 0,
@@ -11,7 +12,13 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
     const theme = useTheme();
     const textRef = useRef(null);
     const [viewBox, setViewBox] = useState(initialState);
-    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+    const [ref] = useInView({
+        onChange(inView) {
+            if (inView) {
+                calculateBox();
+            }
+        },
+    });
     const calculateBox = useCallback(() => {
         if (!textRef.current) {
             return;
@@ -25,7 +32,6 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        // setTextRect(textRef.current.getBoundingClientRect());
         onFit?.();
     }, [cropBottom, cropTop, onFit]);
     useLayoutEffect(() => {
@@ -44,5 +50,5 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
         //     ? maxHeight
         //     : height
         // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, ref: ref, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.7";
+export declare const version = "1.32.8";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.7';
+export const version = '1.32.8';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.32.7",
+  "version": "1.32.8",
   "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",
@@ -48,8 +48,8 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
-    "@tanstack/react-query": "^4.24.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.52",
+    "@tanstack/react-query": "^4.26.0",
+    "@tanstack/react-virtual": "^3.0.0-beta.53",
     "big.js": "^6.2.1",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -57,12 +57,13 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.3",
+    "react-hook-form": "^7.43.4",
     "react-i18next": "^12.2.0",
+    "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.8.2",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.5"
+    "zustand": "^4.3.6"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/SettingsPage/ResetSettingsButton.js

@@ -4,10 +4,12 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { useTools } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { useSettingsStore } from '../../stores';
 export const ResetSettingsButton = () => {
     const { t } = useTranslation();
     const { tools } = useTools();
+    const config = useWidgetConfig();
     const resetSettings = useSettingsStore((state) => state.reset);
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
@@ -15,7 +17,7 @@ export const ResetSettingsButton = () => {
     }, []);
     const handleReset = () => {
         if (tools) {
-            resetSettings(tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
         }
         toggleDialog();
     };

package/stores/settings/types.d.ts

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk';
-import type { Appearance } from '../../types';
+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;
 export type SettingsToolType = 'Bridges' | 'Exchanges';
@@ -21,7 +21,7 @@ export interface SettingsState extends SettingsProps {
     setValues: ValuesSetter<SettingsProps>;
     initializeTools(toolType: SettingsToolType, tools: string[], reset?: boolean): void;
     setTools(toolType: SettingsToolType, tools: string[], availableTools: string[]): void;
-    reset(bridges: string[], exchanges: string[]): void;
+    reset(config: WidgetConfig, bridges: string[], exchanges: string[]): void;
 }
 export interface SendToWalletState {
     showSendToWallet: boolean;

package/stores/settings/useSettingsStore.js

@@ -62,10 +62,11 @@ export const useSettingsStore = create(persist((set, get) => ({
             return values;
         }, {}),
     })),
-    reset: (bridges, exchanges) => {
+    reset: (config, bridges, exchanges) => {
         set(() => ({
             ...defaultSettings,
             ...defaultConfigurableSettings,
+            appearance: config.appearance ?? defaultSettings.appearance,
         }));
         get().initializeTools('Bridges', bridges, true);
         get().initializeTools('Exchanges', exchanges, true);