@lifi/widget 1.0.0

package/providers/SwapFormProvider/types.js

@@ -0,0 +1,24 @@
+export var SwapFormKey;
+(function (SwapFormKey) {
+    SwapFormKey["BridgePrioritization"] = "bridgePrioritization";
+    SwapFormKey["EnabledBridges"] = "enabledBridges";
+    SwapFormKey["EnabledExchanges"] = "enabledExchanges";
+    SwapFormKey["FromAmount"] = "fromAmount";
+    SwapFormKey["FromChain"] = "fromChain";
+    SwapFormKey["FromToken"] = "fromToken";
+    SwapFormKey["GasPrice"] = "gasPrice";
+    SwapFormKey["IsAddressConfirmed"] = "isAddressConfirmed";
+    SwapFormKey["IsSendToRecipient"] = "isSendToRecipient";
+    SwapFormKey["RecipientsAddress"] = "recipientsAddress";
+    SwapFormKey["RoutePriority"] = "routePriority";
+    SwapFormKey["SearchTokensFilter"] = "searchTokensFilter";
+    SwapFormKey["Slippage"] = "slippage";
+    SwapFormKey["ToChain"] = "toChain";
+    SwapFormKey["ToToken"] = "toToken";
+})(SwapFormKey || (SwapFormKey = {}));
+export const SwapFormKeyHelper = {
+    getChainKey: (formType) => `${formType}Chain`,
+    getTokenKey: (formType) => `${formType}Token`,
+    getAmountKey: (formType) => `${formType}Amount`,
+    getSearchTokensFilterKey: (formType) => `${formType}SearchTokensFilter`,
+};

package/providers/ThemeProvider/ThemeProvider.d.ts

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

package/providers/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { useEffect, useMemo, useState } from 'react';
+import { createTheme } from '../../config/theme';
+import { useAppearance } from '../../hooks';
+import { useWidgetConfig } from '../WidgetProvider';
+export const ThemeProvider = ({ children, }) => {
+    const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig();
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    const [appearance, setAppearance] = useAppearance();
+    const [mode, setMode] = useState((colorSchemeMode !== null && colorSchemeMode !== void 0 ? colorSchemeMode : appearance === 'auto')
+        ? prefersDarkMode
+            ? 'dark'
+            : 'light'
+        : appearance);
+    useEffect(() => {
+        if (appearance === 'auto') {
+            setMode(prefersDarkMode ? 'dark' : 'light');
+        }
+        else {
+            setMode(appearance);
+        }
+    }, [appearance, prefersDarkMode]);
+    useEffect(() => {
+        if (colorSchemeMode) {
+            setAppearance(colorSchemeMode);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [colorSchemeMode]);
+    const theme = useMemo(() => createTheme(mode, themeConfig), [mode, themeConfig]);
+    return _jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: children }));
+};

package/providers/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/providers/ThemeProvider/index.js

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/providers/WalletProvider/WalletProvider.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import type { WalletContextProps } from './types';
+export declare const useWallet: () => WalletContextProps;
+export declare const WalletProvider: FC<PropsWithChildren<{}>>;

package/providers/WalletProvider/WalletProvider.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLifiWalletManagement, } from '@lifi/wallet-management';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { useWidgetConfig } from '../WidgetProvider';
+const stub = () => {
+    throw new Error('You forgot to wrap your component in <WalletProvider>.');
+};
+const initialContext = {
+    connect: stub,
+    disconnect: stub,
+    switchChain: stub,
+    addChain: stub,
+    addToken: stub,
+    account: {},
+};
+const WalletContext = createContext(initialContext);
+export const useWallet = () => useContext(WalletContext);
+export const WalletProvider = ({ children }) => {
+    const config = useWidgetConfig();
+    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLifiWalletManagement();
+    const [account, setAccount] = useState({});
+    const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            // TODO
+            return;
+        }
+        yield walletManagementConnect(wallet);
+    }), [config.disableInternalWalletManagement, walletManagementConnect]);
+    const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            setAccount({});
+        }
+        yield walletManagementDisconnect();
+    }), [config.disableInternalWalletManagement, walletManagementDisconnect]);
+    // only for injected wallets
+    const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            // TODO
+            return false;
+        }
+        return walletSwitchChain(chainId);
+    }), [config.disableInternalWalletManagement]);
+    const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!config.disableInternalWalletManagement) {
+            yield walletAddChain(chainId);
+        }
+    }), [config.disableInternalWalletManagement]);
+    const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!config.disableInternalWalletManagement) {
+            yield switchChainAndAddToken(chainId, token);
+        }
+    }), [config.disableInternalWalletManagement]);
+    // keep account information up to date
+    useEffect(() => {
+        const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (!config.disableInternalWalletManagement) {
+                const account = yield extractAccountFromSigner(signer);
+                setAccount(account);
+            }
+        });
+        updateAccount();
+    }, [signer, config.disableInternalWalletManagement]);
+    const value = useMemo(() => ({
+        connect,
+        disconnect,
+        switchChain,
+        addChain,
+        addToken,
+        account,
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+    return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
+};
+const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
+    return ({
+        address: (yield (signer === null || signer === void 0 ? void 0 : signer.getAddress())) || undefined,
+        isActive: (signer && !!(yield signer.getAddress()) === null) || !!signer,
+        signer,
+        chainId: (yield (signer === null || signer === void 0 ? void 0 : signer.getChainId())) || undefined,
+    });
+});

package/providers/WalletProvider/index.d.ts

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

package/providers/WalletProvider/index.js

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

package/providers/WalletProvider/types.d.ts

@@ -0,0 +1,17 @@
+import { Wallet } from '@lifi/wallet-management';
+import { Token } from '@lifinance/sdk';
+import { Signer } from 'ethers';
+export interface WalletContextProps {
+    account: WalletAccount;
+    addChain(chainId: number): Promise<void>;
+    addToken(chainId: number, token: Token): Promise<void>;
+    disconnect(): void;
+    switchChain(chainId: number): Promise<boolean>;
+    connect(wallet?: Wallet | undefined): Promise<void>;
+}
+export interface WalletAccount {
+    address?: string;
+    isActive?: boolean;
+    signer?: Signer;
+    chainId?: number;
+}

package/providers/WalletProvider/types.js

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

package/providers/WidgetProvider/WidgetProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { WidgetContextProps, WidgetProviderProps } from './types';
+export declare const useWidgetConfig: () => WidgetContextProps;
+export declare const WidgetProvider: React.FC<React.PropsWithChildren<WidgetProviderProps>>;

package/providers/WidgetProvider/WidgetProvider.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainId, getChainByKey } from '@lifinance/sdk';
+import { createContext, useContext, useMemo } from 'react';
+const stub = () => {
+    throw new Error('You forgot to wrap your component in <WidgetProvider>.');
+};
+const initialContext = {
+    enabledChains: [],
+};
+const WidgetContext = createContext(initialContext);
+export const useWidgetConfig = () => useContext(WidgetContext);
+export const WidgetProvider = (_a) => {
+    var { children } = _a, _b = _a.config, { fromChain, toChain } = _b, other = __rest(_b, ["fromChain", "toChain"]);
+    const value = useMemo(() => {
+        const config = Object.assign({}, other);
+        try {
+            return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
+                    ? fromChain
+                    : typeof fromChain === 'string'
+                        ? getChainByKey(fromChain).id
+                        : ChainId.ETH, toChain: typeof toChain === 'number'
+                    ? toChain
+                    : typeof toChain === 'string'
+                        ? getChainByKey(toChain).id
+                        : ChainId.ETH });
+        }
+        catch (e) {
+            console.warn(e);
+            return config;
+        }
+    }, [fromChain, other, toChain]);
+    return (_jsx(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
+};

package/providers/WidgetProvider/index.d.ts

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

package/providers/WidgetProvider/index.js

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

package/providers/WidgetProvider/types.d.ts

@@ -0,0 +1,8 @@
+import { WidgetConfig } from '../../types';
+export interface WidgetContextProps extends WidgetConfig {
+    fromChain?: number;
+    toChain?: number;
+}
+export interface WidgetProviderProps {
+    config: WidgetConfig;
+}

package/providers/WidgetProvider/types.js

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

package/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from './widget';

package/types/index.js

@@ -0,0 +1 @@
+export * from './widget';

package/types/widget.d.ts

@@ -0,0 +1,41 @@
+import { ChainKey } from '@lifinance/sdk';
+import { PaletteMode, PaletteOptions, Shape } from '@mui/material';
+import { TypographyOptions } from '@mui/material/styles/createTypography';
+import { Signer } from 'ethers';
+import { CSSProperties } from 'react';
+export declare type Appearance = PaletteMode | 'auto';
+export declare type ThemeConfig = {
+    palette?: PaletteOptions;
+    shape?: Shape;
+    typography?: TypographyOptions;
+};
+export interface WidgetConfig {
+    fromAmount?: number;
+    fromChain?: `${ChainKey}` | number;
+    fromToken?: string;
+    toChain?: `${ChainKey}` | number;
+    toToken?: string;
+    enabledChains: number[];
+    disableInternalWalletManagement?: boolean;
+    walletCallbacks?: {
+        connect: {
+            (): Signer;
+        };
+        disconnect: {
+            (): void;
+        };
+        provideSigner: {
+            (): Signer;
+        };
+        switchChain: {
+            (): Signer;
+        };
+        addToken: {
+            (): void;
+        };
+    };
+    containerStyle?: CSSProperties;
+    theme?: ThemeConfig;
+    appearance?: Appearance;
+    disableAppearance?: boolean;
+}

package/types/widget.js

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

package/utils/colors.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material';
+export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;

package/utils/colors.js

@@ -0,0 +1,3 @@
+export const getContrastAlphaColor = (theme, alpha) => theme.palette.mode === 'light'
+    ? `rgb(0 0 0 / ${alpha})`
+    : `rgb(255 255 255 / ${alpha})`;

package/utils/deepClone.d.ts

@@ -0,0 +1 @@
+export declare const deepClone: <T>(src: T) => T;

package/utils/deepClone.js

@@ -0,0 +1,3 @@
+export const deepClone = (src) => {
+    return JSON.parse(JSON.stringify(src));
+};

package/utils/elements.d.ts

@@ -0,0 +1,4 @@
+export declare enum ElementId {
+    ScrollableContainer = "widget-scrollable-container",
+    Header = "widget-header"
+}

package/utils/elements.js

@@ -0,0 +1,5 @@
+export var ElementId;
+(function (ElementId) {
+    ElementId["ScrollableContainer"] = "widget-scrollable-container";
+    ElementId["Header"] = "widget-header";
+})(ElementId || (ElementId = {}));

package/utils/format.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @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 formatAmount: (amount?: string, returnInitial?: boolean) => string;
+export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/utils/format.js

@@ -0,0 +1,76 @@
+import Big from 'big.js';
+// JavaScript numbers use exponential notation for positive exponents of 21 and above.
+Big.PE = 21;
+// JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.
+Big.NE = -21;
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export const formatTokenAmount = (amount = '0', decimals = 0) => {
+    let shiftedAmount = amount;
+    if (decimals) {
+        shiftedAmount = (Number(amount) / Math.pow(10, decimals)).toString();
+    }
+    const parsedAmount = parseFloat(shiftedAmount);
+    if (parsedAmount === 0 || isNaN(Number(shiftedAmount))) {
+        return '0';
+    }
+    let decimalPlaces = 3;
+    const absAmount = Math.abs(parsedAmount);
+    while (absAmount < 1 / Math.pow(10, decimalPlaces)) {
+        decimalPlaces++;
+    }
+    return Big(parseFloat(Big(parsedAmount).toFixed(decimalPlaces + 1, 0))).toString();
+};
+export const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
+    if (!slippage) {
+        return slippage;
+    }
+    const parsedSlippage = parseFloat(slippage);
+    if (isNaN(Number(slippage)) && !isNaN(parsedSlippage)) {
+        return parsedSlippage;
+    }
+    if (isNaN(parsedSlippage)) {
+        return defaultValue;
+    }
+    if (parsedSlippage > 100) {
+        return '100';
+    }
+    if (parsedSlippage < 0) {
+        return Math.abs(parsedSlippage).toString();
+    }
+    if (returnInitial) {
+        return slippage;
+    }
+    return parsedSlippage.toString();
+};
+export const formatAmount = (amount = '', returnInitial = false) => {
+    if (!amount) {
+        return amount;
+    }
+    const parsedAmount = parseFloat(amount);
+    if (isNaN(Number(amount)) && !isNaN(parsedAmount)) {
+        return parsedAmount.toString();
+    }
+    if (isNaN(parsedAmount)) {
+        return '';
+    }
+    if (parsedAmount < 0) {
+        return Math.abs(parsedAmount).toString();
+    }
+    if (returnInitial) {
+        return amount;
+    }
+    return Big(parsedAmount).toString();
+};
+export const formatTokenPrice = (amount, price) => {
+    if (!amount || !price) {
+        return 0;
+    }
+    if (isNaN(Number(amount)) || isNaN(Number(price))) {
+        return 0;
+    }
+    return parseFloat(amount) * parseFloat(price);
+};

package/utils/input.d.ts

@@ -0,0 +1 @@
+export declare const fitInputText: (maxFontSize: number, minFontSize: number, element: HTMLElement) => void;

package/utils/input.js

@@ -0,0 +1,24 @@
+export const fitInputText = (maxFontSize, minFontSize, element) => {
+    if (!element) {
+        return;
+    }
+    let high = maxFontSize;
+    let low = minFontSize;
+    let size = minFontSize;
+    let mid = 0;
+    // Binary search for highest font size best fit
+    while (low <= high) {
+        mid = (high + low) >> 1;
+        const fontSize = `${mid + 1}px`;
+        element.style.fontSize = fontSize;
+        if (element.scrollWidth <= element.clientWidth) {
+            size = mid;
+            low = mid + 1;
+        }
+        else {
+            high = mid - 1;
+        }
+    }
+    const fontSize = `${size}px`;
+    element.style.fontSize = fontSize;
+};

package/utils/routes.d.ts

@@ -0,0 +1,10 @@
+export declare const routes: {
+    home: string;
+    selectWallet: string;
+    settings: string;
+    fromToken: string;
+    toToken: string;
+    swapRoutes: string;
+    swap: string;
+};
+export declare type RouteType = keyof typeof routes;

package/utils/routes.js

@@ -0,0 +1,9 @@
+export const routes = {
+    home: '/',
+    selectWallet: '/select-wallet',
+    settings: '/settings',
+    fromToken: '/select-from-token',
+    toToken: '/select-to-token',
+    swapRoutes: '/swap-routes',
+    swap: '/swap',
+};