@lifi/widget 3.0.0-alpha.6 → 3.0.0-alpha.8

package/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/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/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/utils/enum.ts

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

package/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/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/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/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/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/utils/wallet.ts

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