@lifi/widget 2.2.0-beta.2 → 2.2.0

package/cjs/components/GasMessage/GasMessage.js

@@ -4,9 +4,9 @@ exports.GasMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const FundsSufficiencyMessage_1 = require("./FundsSufficiencyMessage");
 const GasSufficiencyMessage_1 = require("./GasSufficiencyMessage");
-const providers_1 = require("../../providers");
 const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
     const { insufficientFunds } = (0, hooks_1.useFundsSufficiency)(route);

package/cjs/components/GasMessage/GasMessage.style.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoMessageSwitch = exports.InfoMessageCardTitle = exports.InfoMessageCard = exports.WarningMessageCardTitle = exports.WarningMessageCard = void 0;
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const Switch_1 = require("@mui/material/Switch");
+const styles_1 = require("@mui/material/styles");
 const Switch_2 = require("../Switch");
 const MessageCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,

package/cjs/components/TokenList/useTokenSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenSelect = void 0;
+const widget_1 = require("@lifi/widget");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../../providers");
@@ -9,6 +10,7 @@ const useTokenSelect = (formType, onClick) => {
     const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: tokenKey });
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const emitter = (0, widget_1.useWidgetEvents)();
     return (0, react_1.useCallback)((tokenAddress, chainId) => {
         onChange(tokenAddress);
         onBlur();
@@ -32,6 +34,13 @@ const useTokenSelect = (formType, onClick) => {
                 shouldTouch: true,
             });
         }
+        const eventToEmit = formType === 'from'
+            ? widget_1.WidgetEvent.SourceChainTokenSelected
+            : widget_1.WidgetEvent.DestinationChainTokenSelected;
+        emitter.emit(eventToEmit, {
+            chainId: selectedChainId,
+            tokenAddress,
+        });
         onClick?.();
     }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
 };

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.2.0-beta.2";
+export declare const version = "2.2.0";

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 = '2.2.0-beta.2';
+exports.version = '2.2.0';

package/cjs/pages/TransactionPage/StartTransactionButton.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StartInsurableTransactionButton = exports.StartTransactionButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const providers_1 = require("../../providers");
 const DefaultTransactionButton_1 = require("../../components/DefaultTransactionButton");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const StartTransactionButton = ({ onClick, route, text, loading, }) => {
     const { sdkConfig } = (0, providers_1.useWidgetConfig)();

package/cjs/types/events.d.ts

@@ -1,11 +1,13 @@
-import type { Process, Route } from '@lifi/sdk';
+import type { ChainId, Process, Route } from '@lifi/sdk';
 export declare enum WidgetEvent {
     RouteExecutionStarted = "routeExecutionStarted",
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
     RouteExecutionFailed = "routeExecutionFailed",
     RouteHighValueLoss = "routeHighValueLoss",
-    RouteContactSupport = "routeContactSupport"
+    RouteContactSupport = "routeContactSupport",
+    SourceChainTokenSelected = "sourceChainTokenSelected",
+    DestinationChainTokenSelected = "destinationChainTokenSelected"
 }
 export type WidgetEvents = {
     routeExecutionStarted: Route;
@@ -14,6 +16,8 @@ export type WidgetEvents = {
     routeExecutionFailed: RouteExecutionUpdate;
     routeHighValueLoss: RouteHighValueLossUpdate;
     routeContactSupport: RouteContactSupport;
+    sourceChainTokenSelected: ChainTokenSelected;
+    destinationChainTokenSelected: ChainTokenSelected;
 };
 export interface RouteContactSupport {
     supportId?: string;
@@ -28,3 +32,7 @@ export interface RouteExecutionUpdate {
     route: Route;
     process: Process;
 }
+export interface ChainTokenSelected {
+    chainId: ChainId;
+    tokenAddress: string;
+}

package/cjs/types/events.js

@@ -9,4 +9,6 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
     WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
     WidgetEvent["RouteContactSupport"] = "routeContactSupport";
+    WidgetEvent["SourceChainTokenSelected"] = "sourceChainTokenSelected";
+    WidgetEvent["DestinationChainTokenSelected"] = "destinationChainTokenSelected";
 })(WidgetEvent || (exports.WidgetEvent = WidgetEvent = {}));

package/components/GasMessage/GasMessage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Collapse } from '@mui/material';
 import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
-import { useWidgetConfig } from '../../providers';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
     const { insufficientFunds } = useFundsSufficiency(route);

package/components/GasMessage/GasMessage.style.js

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import { switchClasses } from '@mui/material/Switch';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import { Switch } from '../Switch';
 const MessageCard = styled(Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,

package/components/TokenList/useTokenSelect.js

@@ -1,3 +1,4 @@
+import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
 import { useCallback } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { FormKeyHelper, useWidgetConfig } from '../../providers';
@@ -6,6 +7,7 @@ export const useTokenSelect = (formType, onClick) => {
     const { field: { onChange, onBlur }, } = useController({ name: tokenKey });
     const { setValue, getValues } = useFormContext();
     const { subvariant } = useWidgetConfig();
+    const emitter = useWidgetEvents();
     return useCallback((tokenAddress, chainId) => {
         onChange(tokenAddress);
         onBlur();
@@ -29,6 +31,13 @@ export const useTokenSelect = (formType, onClick) => {
                 shouldTouch: true,
             });
         }
+        const eventToEmit = formType === 'from'
+            ? WidgetEvent.SourceChainTokenSelected
+            : WidgetEvent.DestinationChainTokenSelected;
+        emitter.emit(eventToEmit, {
+            chainId: selectedChainId,
+            tokenAddress,
+        });
         onClick?.();
     }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.2.0-beta.2";
+export declare const version = "2.2.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.2.0-beta.2';
+export const version = '2.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.2.0-beta.2",
+  "version": "2.2.0",
   "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",
@@ -43,8 +43,8 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.2.0-beta.0",
-    "@lifi/wallet-management": "^2.2.0-beta.2",
+    "@lifi/sdk": "^2.2.0",
+    "@lifi/wallet-management": "^2.2.0",
     "@mui/icons-material": "^5.13.7",
     "@mui/lab": "^5.0.0-alpha.135",
     "@mui/material": "^5.13.7",
@@ -58,7 +58,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
-    "react-i18next": "^13.0.1",
+    "react-i18next": "^13.0.2",
     "react-intersection-observer": "^9.5.2",
     "react-router-dom": "^6.14.1",
     "react-timer-hook": "^3.0.6",

package/pages/TransactionPage/StartTransactionButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useWidgetConfig } from '../../providers';
 import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
 import { useFundsSufficiency, useGasSufficiency, useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
 export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
     const { sdkConfig } = useWidgetConfig();