@lifi/widget 1.1.3 → 1.2.2

package/types/widget.d.ts

@@ -1,4 +1,4 @@
-import { ChainKey } from '@lifinance/sdk';
+import { ChainKey, Token } from '@lifinance/sdk';
 import { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
 import { Signer } from 'ethers';
@@ -9,33 +9,43 @@ export declare type ThemeConfig = {
     shape?: Shape;
     typography?: TypographyOptions;
 };
-export interface WidgetConfig {
+export interface WidgetWalletCallbacks {
+    connect(): Promise<Signer>;
+    disconnect(): Promise<void>;
+    provideSigner(): Promise<Signer | undefined>;
+    switchChain(reqChainId: number): Promise<Signer>;
+    addToken(token: Token, chainId: number): Promise<void>;
+    addChain(chainId: number): Promise<boolean>;
+    signer?: Signer;
+}
+interface WidgetConfigBase {
     fromAmount?: number;
-    fromChain?: `${ChainKey}` | number;
-    fromToken?: string;
-    toChain?: `${ChainKey}` | number;
-    toToken?: string;
     disabledChains?: number[];
-    disableInternalWalletManagement?: boolean;
-    walletCallbacks?: {
-        connect: {
-            (): Signer;
-        };
-        disconnect: {
-            (): void;
-        };
-        provideSigner: {
-            (): Signer;
-        };
-        switchChain: {
-            (): Signer;
-        };
-        addToken: {
-            (): void;
-        };
-    };
     containerStyle?: CSSProperties;
     theme?: ThemeConfig;
     appearance?: Appearance;
     disableAppearance?: boolean;
 }
+declare type WidgetFromTokenConfig = {
+    fromChain: `${ChainKey}` | number;
+    fromToken?: string;
+} | {
+    fromChain?: never;
+    fromToken?: never;
+};
+declare type WidgetToTokenConfig = {
+    toChain: `${ChainKey}` | number;
+    toToken?: string;
+} | {
+    toChain?: never;
+    toToken?: never;
+};
+declare type WidgetWalletManagementConfig = {
+    disableInternalWalletManagement: true;
+    externalWalletManagementSettings: WidgetWalletCallbacks;
+} | {
+    disableInternalWalletManagement?: false;
+    externalWalletManagementSettings?: never;
+};
+export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig & WidgetWalletManagementConfig;
+export {};

package/utils/format.d.ts

@@ -4,6 +4,6 @@
  * @returns formatted amount.
  */
 export declare const formatTokenAmount: (amount?: string, decimals?: number) => string;
-export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string | number;
+export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
 export declare const formatAmount: (amount?: string, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/utils/format.js

@@ -30,7 +30,7 @@ export const formatSlippage = (slippage = '', defaultValue = '', returnInitial =
     }
     const parsedSlippage = parseFloat(slippage);
     if (isNaN(Number(slippage)) && !isNaN(parsedSlippage)) {
-        return parsedSlippage;
+        return parsedSlippage.toString();
     }
     if (isNaN(parsedSlippage)) {
         return defaultValue;

package/hooks/useBridges.d.ts

@@ -1 +0,0 @@
-export declare const useBridges: () => string[];

package/hooks/useBridges.js

@@ -1,12 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { LiFi } from '../lifi';
-export const useBridges = () => {
-    const { data } = useQuery(['bridges'], ({ signal }) => LiFi.getPossibilities({ include: ['bridges'] }, { signal }));
-    const bridges = useMemo(() => {
-        var _a;
-        const bridges = (_a = data === null || data === void 0 ? void 0 : data.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => bridge.tool).map((bridegTool) => bridegTool.split('-')[0]);
-        return Array.from(new Set(bridges));
-    }, [data === null || data === void 0 ? void 0 : data.bridges]);
-    return bridges;
-};

package/hooks/useExchanges.d.ts

@@ -1 +0,0 @@
-export declare const useExchanges: () => string[];

package/hooks/useExchanges.js

@@ -1,12 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { LiFi } from '../lifi';
-export const useExchanges = () => {
-    const { data } = useQuery(['exchanges'], ({ signal }) => LiFi.getPossibilities({ include: ['exchanges'] }, { signal }));
-    const exchanges = useMemo(() => {
-        var _a;
-        const exchanges = (_a = data === null || data === void 0 ? void 0 : data.exchanges) === null || _a === void 0 ? void 0 : _a.map((exchange) => exchange.tool).map((exchangeTool) => exchangeTool.split('-')[0]);
-        return Array.from(new Set(exchanges));
-    }, [data === null || data === void 0 ? void 0 : data.exchanges]);
-    return exchanges;
-};

package/hooks/useRouteExecution/index.d.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './useRouteExecution';
-export * from './useRouteStore';

package/hooks/useRouteExecution/index.js

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './useRouteExecution';
-export * from './useRouteStore';

package/hooks/useSettings/index.d.ts

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './useSettingsStore';

package/hooks/useSettings/index.js

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './useSettingsStore';

package/hooks/useSettings/types.d.ts

@@ -1,5 +0,0 @@
-import { Appearance } from '../../types';
-export interface SettingsStore {
-    appearance: Appearance;
-    setAppearance(appearance: Appearance): void;
-}

package/hooks/useSettings/types.js

@@ -1 +0,0 @@
-export {};

package/hooks/useSettings/useSettingsStore.d.ts

@@ -1,13 +0,0 @@
-import { Appearance } from '../../types';
-import { SettingsStore } from './types';
-export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, Partial<SettingsStore>>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void>;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: SettingsStore) => void) => () => void;
-        onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;
-    };
-}>;
-export declare const useAppearance: () => [Appearance, (appearance: Appearance) => void];

package/hooks/useSettings/useSettingsStore.js

@@ -1,22 +0,0 @@
-import produce from 'immer';
-import create from 'zustand';
-import { persist } from 'zustand/middleware';
-import shallow from 'zustand/shallow';
-export const useSettingsStore = create()(persist((set) => ({
-    appearance: 'auto',
-    setAppearance: (appearance) => set(produce((state) => {
-        state.appearance = appearance;
-    })),
-}), {
-    name: 'li.fi-widget-settings',
-    version: 1,
-    migrate: (persistedState, version) => {
-        if (version === 0 && persistedState.appearance === 'system') {
-            persistedState.appearance = 'auto';
-        }
-        return persistedState;
-    },
-}));
-export const useAppearance = () => {
-    return useSettingsStore((state) => [state.appearance, state.setAppearance], shallow);
-};

package/pages/MainPage/SendToRecipientForm.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const SendToRecipientForm: React.FC;

package/pages/MainPage/SendToRecipientForm.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
-import { Box, Checkbox, FormControl, FormControlLabel, Typography, } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { Input } from '../../components/Input';
-import { Switch } from '../../components/Switch';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
-export const SendToRecipientForm = () => {
-    const { t } = useTranslation();
-    const { register } = useFormContext();
-    const sendToRecipientChecked = useWatch({
-        name: SwapFormKey.IsSendToRecipient,
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ mb: 2, sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                } }, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(HelpOutlineIcon, { sx: { color: 'grey.500' } }), _jsx(Typography, Object.assign({ lineHeight: "normal", variant: "subtitle1", color: "text.primary", ml: 1 }, { children: t(`swap.sendToRecipient`) }))] })), _jsx(Switch, Object.assign({}, register(SwapFormKey.IsSendToRecipient)))] })), sendToRecipientChecked ? (_jsxs(_Fragment, { children: [_jsx(FormControl, Object.assign({ variant: "standard", fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.recipientsAddress`, { chain: 'ETH' }), required: true, inputProps: Object.assign({}, register(SwapFormKey.RecipientsAddress)) }) })), _jsx(Box, Object.assign({ mt: 0.5, mb: 1 }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, Object.assign({ required: true }, register(SwapFormKey.IsAddressConfirmed))), label: t(`swap.addressConfirmation`), componentsProps: { typography: { variant: 'body2' } } }) }))] })) : null] }));
-};