@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/utils/converters.ts

@@ -0,0 +1,202 @@
+import type {
+  ExtendedTransactionInfo,
+  FullStatusData,
+  Process,
+  Status,
+  StatusResponse,
+  Substatus,
+  TokenAmount,
+  ToolsResponse,
+} from '@lifi/sdk';
+import type { RouteExecution } from '../stores';
+
+const buildProcessFromTxHistory = (tx: StatusResponse): Process[] => {
+  const sending = tx.sending as ExtendedTransactionInfo;
+  const receiving = tx.receiving as ExtendedTransactionInfo;
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return [];
+  }
+
+  const processStatus: Status = tx.status === 'DONE' ? 'DONE' : 'FAILED';
+  const substatus: Substatus =
+    processStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED';
+
+  if (sending.chainId === receiving.chainId) {
+    return [
+      {
+        type: 'SWAP', // operations on same chain will be swaps
+        startedAt: sending.timestamp ?? Date.now(),
+        message: '',
+        status: processStatus,
+        txHash: sending.txHash,
+        txLink: sending.txLink,
+        doneAt: receiving.timestamp ?? Date.now(),
+        substatus,
+        substatusMessage: '',
+      },
+    ];
+  }
+
+  const process: Process[] = [
+    {
+      type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
+      startedAt: sending.timestamp ?? Date.now(),
+      message: '',
+      status: processStatus, // can be FAILED
+      txHash: sending.txHash,
+      txLink: sending.txLink,
+      doneAt: sending.timestamp,
+    },
+    {
+      type: 'RECEIVING_CHAIN', // final step of bridging, post swaps
+      startedAt: receiving.timestamp ?? Date.now(),
+      message: '',
+      status: processStatus,
+      substatus,
+      substatusMessage: '',
+      doneAt: receiving.timestamp ?? Date.now(),
+      txHash: receiving.txHash,
+      txLink: receiving.txLink,
+    },
+  ];
+
+  return process;
+};
+
+export const buildRouteFromTxHistory = (
+  tx: StatusResponse,
+  tools?: ToolsResponse,
+) => {
+  const sending = tx.sending as ExtendedTransactionInfo;
+  const receiving = tx.receiving as ExtendedTransactionInfo;
+
+  if (!sending.token?.chainId || !receiving.token?.chainId) {
+    return;
+  }
+
+  const selectedBridge = tools?.bridges.find(
+    (bridge) => bridge.key === tx.tool,
+  );
+
+  const selectedExchange = tools?.exchanges.find(
+    (exchange) => exchange.key === tx.tool,
+  );
+
+  const usedTool = {
+    key: tx.tool,
+    name: selectedBridge?.name ?? selectedExchange?.name ?? tx.tool,
+    logoURI: selectedBridge?.logoURI ?? selectedExchange?.logoURI ?? '',
+  };
+
+  const fromToken: TokenAmount = {
+    ...sending.token,
+    amount: BigInt(sending.amount ?? 0),
+    priceUSD: sending.amountUSD ?? '0',
+    symbol: sending.token?.symbol ?? '',
+    decimals: sending.token?.decimals ?? 0,
+    name: sending.token?.name ?? '',
+    chainId: sending.token?.chainId,
+  };
+
+  const toToken: TokenAmount = {
+    ...receiving.token,
+    amount: BigInt(receiving.amount ?? 0),
+    priceUSD: receiving.amountUSD ?? '0',
+    symbol: receiving.token?.symbol ?? '',
+    decimals: receiving.token?.decimals ?? 0,
+    name: receiving.token?.name ?? '',
+    chainId: receiving.token?.chainId,
+  };
+
+  const routeExecution: RouteExecution = {
+    status: 1,
+    route: {
+      id: (tx as FullStatusData).transactionId,
+      fromAddress: (tx as FullStatusData).fromAddress,
+      toAddress: (tx as FullStatusData).toAddress,
+      fromChainId: sending.chainId,
+      fromAmount: sending.amount ?? '',
+      fromAmountUSD: sending.amountUSD ?? '',
+      toAmount: receiving.amount ?? '',
+      toAmountMin: receiving.amount ?? '',
+      toAmountUSD: receiving.amountUSD ?? '',
+      toChainId: receiving.chainId,
+      fromToken,
+      toToken,
+      steps: [
+        {
+          id: '',
+          type: 'lifi',
+          tool: tx.tool,
+          toolDetails: usedTool,
+          action: {
+            fromToken: sending.token,
+            fromAmount: sending.amount ?? '',
+            fromChainId: sending.chainId,
+            fromAddress: (tx as FullStatusData).fromAddress,
+            toToken: receiving.token,
+            toChainId: receiving.chainId,
+            toAddress: (tx as FullStatusData).toAddress,
+            slippage: 0,
+          },
+          estimate: {
+            tool: tx.tool,
+            approvalAddress: '',
+            fromAmount: sending.amount ?? '',
+            fromAmountUSD: sending.amountUSD ?? '',
+            toAmountMin: receiving.amount ?? '',
+            toAmount: receiving.amount ?? '',
+            toAmountUSD: receiving.amountUSD ?? '',
+            executionDuration: 30,
+          },
+          includedSteps: [
+            {
+              id: '',
+              type: sending.chainId === receiving.chainId ? 'swap' : 'cross',
+              action: {
+                fromChainId: sending.chainId,
+                fromAmount: sending.amount ?? '',
+                fromToken: sending.token,
+                toChainId: receiving.chainId,
+                toToken: receiving.token,
+                slippage: 0,
+                fromAddress: (tx as FullStatusData).fromAddress,
+                toAddress: (tx as FullStatusData).toAddress,
+              },
+              estimate: {
+                tool: tx.tool,
+                fromAmount: sending.amount ?? '',
+                toAmount: receiving.amount ?? '',
+                toAmountMin: receiving.amount ?? '',
+                approvalAddress: '',
+                executionDuration: 30,
+              },
+              tool: tx.tool,
+              toolDetails: usedTool,
+            },
+          ],
+          integrator: '',
+          execution: {
+            status: 'DONE', // can be FAILED
+            process: buildProcessFromTxHistory(tx),
+            fromAmount: sending.amount,
+            toAmount: receiving.amount,
+            toToken: receiving.token,
+            gasAmount: sending.gasAmount,
+            gasAmountUSD: sending.gasAmountUSD,
+            gasPrice: sending.gasPrice,
+            gasToken: sending.gasToken,
+            gasUsed: sending.gasUsed,
+          },
+        },
+      ],
+      insurance: {
+        state: 'NOT_INSURABLE',
+        feeAmountUsd: '0',
+      },
+    },
+  };
+
+  return routeExecution;
+};

package/src/utils/deepMerge.ts

@@ -0,0 +1,14 @@
+const isObject = (obj: any) => obj && typeof obj === 'object';
+
+export const deepMerge = (...objects: any[]) => {
+  return objects.reduce((prev, obj) => {
+    for (const key in obj) {
+      if (isObject(prev[key]) && isObject(obj[key])) {
+        prev[key] = deepMerge(prev[key], obj[key]);
+      } else {
+        prev[key] = obj[key];
+      }
+    }
+    return prev;
+  }, {});
+};

package/src/utils/elements.ts

@@ -0,0 +1,9 @@
+export enum ElementId {
+  AppExpandedContainer = 'widget-app-expanded-container',
+  Header = 'widget-header',
+  RelativeContainer = 'widget-relative-container',
+  ScrollableContainer = 'widget-scrollable-container',
+}
+
+export const createElementId = (ElementId: ElementId, elementId: string) =>
+  elementId ? `${ElementId}-${elementId}` : ElementId;

package/src/utils/enum.ts

@@ -0,0 +1,2 @@
+export const hasEnumFlag = <T extends number | bigint>(flags: T, flag: T) =>
+  (flags & flag) === flag;

package/src/utils/format.ts

@@ -0,0 +1,93 @@
+import { formatUnits } from 'viem';
+
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export const formatTokenAmount = (
+  amount: bigint = 0n,
+  decimals: number,
+  decimalPlaces: number = 3,
+) => {
+  const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
+  const parsedAmount = parseFloat(formattedAmount);
+  if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
+    return '0';
+  }
+
+  const absAmount = Math.abs(parsedAmount);
+  while (absAmount < 1 / 10 ** decimalPlaces) {
+    decimalPlaces++;
+  }
+
+  return parsedAmount.toFixed(decimalPlaces + 1);
+};
+
+export const formatSlippage = (
+  slippage: string = '',
+  defaultValue: string = '',
+  returnInitial: boolean = false,
+): string => {
+  if (!slippage) {
+    return slippage;
+  }
+  const parsedSlippage = parseFloat(slippage);
+  if (isNaN(Number(slippage)) && !isNaN(parsedSlippage)) {
+    return parsedSlippage.toString();
+  }
+  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 formatInputAmount = (
+  amount: string,
+  decimals: number | null = null,
+  returnInitial: boolean = false,
+) => {
+  if (!amount) {
+    return amount;
+  }
+  let formattedAmount = amount.replaceAll(',', '.');
+  if (formattedAmount.startsWith('.')) {
+    formattedAmount = '0' + formattedAmount;
+  }
+  const parsedAmount = parseFloat(formattedAmount);
+  if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
+    return parsedAmount.toString();
+  }
+  if (isNaN(Math.abs(Number(formattedAmount)))) {
+    return '';
+  }
+  if (returnInitial) {
+    return formattedAmount;
+  }
+  let [integer, fraction = ''] = formattedAmount.split('.');
+  if (decimals !== null && fraction.length > decimals) {
+    fraction = fraction.slice(0, decimals);
+  }
+  integer = integer.replace(/^0+|-/, '');
+  fraction = fraction.replace(/(0+)$/, '');
+  return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
+};
+
+export const formatTokenPrice = (amount?: string, price?: string) => {
+  if (!amount || !price) {
+    return 0;
+  }
+  if (isNaN(Number(amount)) || isNaN(Number(price))) {
+    return 0;
+  }
+  return parseFloat(amount) * parseFloat(price);
+};

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+export * from './colors';
+export * from './deepMerge';
+export * from './elements';
+export * from './enum';
+export * from './format';
+export * from './input';
+export * from './navigationRoutes';
+export * from './svm';
+export * from './wallet';

package/src/utils/input.ts

@@ -0,0 +1,29 @@
+export const fitInputText = (
+  maxFontSize: number,
+  minFontSize: number,
+  element: HTMLElement,
+) => {
+  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;
+    // scrollWidth has different rounding than clientWidth, remove 1px for consistency
+    const scrollWidth = element.scrollWidth - 1;
+    if (scrollWidth <= element.clientWidth) {
+      size = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  const fontSize = `${size}px`;
+  element.style.fontSize = fontSize;
+};

package/src/utils/navigationRoutes.ts

@@ -0,0 +1,56 @@
+export const navigationRoutes = {
+  home: '/',
+  activeTransactions: 'active-transactions',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  fromChain: 'from-chain',
+  fromToken: 'from-token',
+  languages: 'languages',
+  routes: 'routes',
+  selectWallet: 'select-wallet',
+  settings: 'settings',
+  toChain: 'to-chain',
+  toToken: 'to-token',
+  toTokenNative: 'to-token-native',
+  transactionDetails: 'transaction-details',
+  transactionExecution: 'transaction-execution',
+  transactionHistory: 'transaction-history',
+};
+
+export const navigationRoutesValues = Object.values(navigationRoutes);
+
+export const stickyHeaderRoutes = [
+  navigationRoutes.activeTransactions,
+  navigationRoutes.bridges,
+  navigationRoutes.exchanges,
+  navigationRoutes.fromChain,
+  navigationRoutes.home,
+  navigationRoutes.routes,
+  navigationRoutes.selectWallet,
+  navigationRoutes.settings,
+  navigationRoutes.toChain,
+  navigationRoutes.toTokenNative,
+  navigationRoutes.transactionDetails,
+  navigationRoutes.transactionExecution,
+  navigationRoutes.transactionHistory,
+];
+
+export const backButtonRoutes = [
+  navigationRoutes.activeTransactions,
+  navigationRoutes.bridges,
+  navigationRoutes.exchanges,
+  navigationRoutes.languages,
+  navigationRoutes.fromChain,
+  navigationRoutes.fromToken,
+  navigationRoutes.routes,
+  navigationRoutes.selectWallet,
+  navigationRoutes.settings,
+  navigationRoutes.toChain,
+  navigationRoutes.toToken,
+  navigationRoutes.toTokenNative,
+  navigationRoutes.transactionDetails,
+  navigationRoutes.transactionExecution,
+  navigationRoutes.transactionHistory,
+];
+
+export type NavigationRouteType = keyof typeof navigationRoutes;

package/src/utils/svm.ts

@@ -0,0 +1,10 @@
+import { PublicKey } from '@solana/web3.js';
+
+export const isSVMAddress = (address: string) => {
+  try {
+    new PublicKey(address);
+    return true;
+  } catch {
+    return false;
+  }
+};

package/src/utils/wallet.ts

@@ -0,0 +1,4 @@
+export const shortenAddress = (address?: string) =>
+  address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;

package/App.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
-import { AppDrawer } from './AppDrawer';
-import { AppProvider } from './AppProvider';
-import { AppRoutes } from './AppRoutes';
-import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
-import { Header } from './components/Header';
-import { Initializer } from './components/Initializer';
-import { PoweredBy } from './components/PoweredBy';
-import { RoutesExpanded } from './components/Routes';
-import { useExpandableVariant } from './hooks';
-import { useWidgetConfig } from './providers';
-import { ElementId, createElementId } from './utils';
-export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
-    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
-    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
-});
-export const AppDefault = () => {
-    const { elementId } = useWidgetConfig();
-    const expandable = useExpandableVariant();
-    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
-};

package/AppDrawer.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CloseIcon from '@mui/icons-material/CloseRounded';
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { Drawer } from '@mui/material';
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AppDefault } from './App';
-import { CloseButtonLayout, DrawerButton, DrawerButtonTypography, } from './AppDrawer.style';
-import { AppProvider } from './AppProvider';
-import { HiddenUI } from './types';
-export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
-    const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
-    const toggleDrawer = useCallback(() => {
-        setDrawerOpen((open) => !open);
-    }, []);
-    const openDrawer = useCallback(() => {
-        setDrawerOpen(true);
-    }, []);
-    const closeDrawer = useCallback(() => {
-        setDrawerOpen(false);
-    }, []);
-    useImperativeHandle(ref, () => ({
-        isOpen: () => openRef.current,
-        toggleDrawer,
-        openDrawer,
-        closeDrawer,
-    }), [closeDrawer, openDrawer, toggleDrawer]);
-    const widgetConfig = useMemo(() => ({
-        ...config,
-        integrator,
-        containerStyle: {
-            ...config?.containerStyle,
-            height: '100%',
-        },
-    }), [config, integrator]);
-    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsxs(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
-                    sx: {
-                        backgroundColor: 'rgb(0 0 0 / 48%)',
-                        backdropFilter: 'blur(3px)',
-                    },
-                }, PaperProps: {
-                    sx: {
-                        width: config?.containerStyle?.width ?? '100%',
-                        minWidth: config?.containerStyle?.minWidth ?? 360,
-                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
-                    },
-                }, keepMounted: true, children: [_jsx(CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: _jsx(CloseIcon, {}) }), _jsx(AppDefault, {})] })] }));
-});
-export const DrawerButtonText = ({ open, subvariant, }) => {
-    const { t } = useTranslation();
-    return (_jsx(DrawerButtonTypography, { children: open
-            ? t('button.hide')
-            : subvariant === 'nft'
-                ? t('button.lifiCheckout')
-                : t('button.lifiExchange') }));
-};

package/AppDrawer.style.js

@@ -1,87 +0,0 @@
-import { Button, IconButton, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-const getButtonTransformWidth = (drawerWidth, drawerMaxWidth) => {
-    if (typeof drawerWidth === 'number') {
-        return `${drawerWidth}px`;
-    }
-    if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
-        return drawerWidth;
-    }
-    if (typeof drawerMaxWidth === 'number') {
-        return `${drawerMaxWidth}px`;
-    }
-    if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
-        return drawerMaxWidth;
-    }
-    return '392px';
-};
-export const DrawerButton = styled(Button, {
-    shouldForwardProp: (prop) => !['open', 'drawerProps'].includes(prop),
-})(({ theme, open, drawerProps }) => ({
-    background: theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white,
-    color: theme.palette.mode === 'light'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-    alignItems: 'center',
-    borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    minHeight: 144,
-    minWidth: 40,
-    padding: theme.spacing(1, 0, 1, 0),
-    position: 'absolute',
-    right: 0,
-    top: 'calc(50% - 74px)',
-    transform: `translate3d(calc(${open
-        ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
-        : '0px'} * -1), 0, 0)`,
-    transition: theme.transitions.create(['transform'], {
-        duration: open
-            ? theme.transitions.duration.enteringScreen
-            : theme.transitions.duration.leavingScreen,
-        easing: open
-            ? theme.transitions.easing.easeOut
-            : theme.transitions.easing.sharp,
-    }),
-    zIndex: 1500,
-    '&:hover': {
-        background: theme.palette.mode === 'light'
-            ? theme.palette.common.black
-            : theme.palette.common.white,
-    },
-    svg: {
-        color: theme.palette.mode === 'light'
-            ? theme.palette.common.white
-            : theme.palette.common.black,
-    },
-}));
-export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
-    borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
-    background: theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white,
-    color: theme.palette.mode === 'light'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    padding: theme.spacing(1),
-    position: 'relative',
-    textTransform: 'none',
-    transform: 'rotateZ(180deg)',
-    writingMode: 'vertical-rl',
-}));
-export const CloseButtonLayout = styled(IconButton)(() => ({
-    position: 'absolute',
-    top: '12px',
-    right: '26px',
-    zIndex: 1,
-    height: '40px',
-    width: '40px',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));

package/AppProvider.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { QueryClientProvider } from '@tanstack/react-query';
-import { Fragment } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router-dom';
-import { queryClient } from './config/queryClient';
-import { FormProvider, I18nProvider, SDKProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
-import { StoreProvider } from './stores';
-export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(StoreProvider, { config: config, children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
-};
-export const AppRouter = ({ children }) => {
-    const { buildUrl } = useWidgetConfig();
-    const inRouterContext = useInRouterContext();
-    const Router = inRouterContext ? Fragment : MemoryRouter;
-    return (_jsxs(Router, { children: [children, buildUrl ? _jsx(URLSearchParamsBuilder, {}) : null] }));
-};