@lifi/widget 3.0.0-alpha.20 → 3.0.0-alpha.22

package/stores/bookmarks/types.ts

@@ -1,11 +1,8 @@
-import type { ChainType } from '@lifi/sdk';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/esm/traditional';
+import type { ToAddress } from '../../types';
 
-export interface Bookmark {
-  address: string;
-  chainType: ChainType;
-  name?: string;
+export interface Bookmark extends ToAddress {
   isConnectedAccount?: boolean;
 }
 

package/stores/form/FormStore.tsx

@@ -39,7 +39,7 @@ export const FormStoreProvider: React.FC<PropsWithChildren> = ({
       // Prevent setting address when the field is hidden
       toAddress: hiddenToAddress
         ? formDefaultValues.toAddress
-        : toAddress || formDefaultValues.toAddress,
+        : toAddress?.address || formDefaultValues.toAddress,
     }),
     [
       fromAmount,

package/stores/routes/utils.ts

@@ -6,20 +6,14 @@ export const isRouteDone = (route: RouteExtended) => {
 };
 
 export const isRoutePartiallyDone = (route: RouteExtended) => {
-  return route.steps.some(
-    (step) =>
-      step.execution?.process.some(
-        (process) => process.substatus === 'PARTIAL',
-      ),
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'PARTIAL'),
   );
 };
 
 export const isRouteRefunded = (route: RouteExtended) => {
-  return route.steps.some(
-    (step) =>
-      step.execution?.process.some(
-        (process) => process.substatus === 'REFUNDED',
-      ),
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'REFUNDED'),
   );
 };
 

package/types/widget.ts

@@ -101,12 +101,18 @@ export interface WidgetContract {
   fallbackAddress?: string;
 }
 
+export interface ToAddress {
+  name?: string;
+  address: string;
+  chainType: ChainType;
+}
 export interface WidgetConfig {
   fromChain?: number;
   toChain?: number;
   fromToken?: string;
   toToken?: string;
-  toAddress?: string;
+  toAddress?: ToAddress;
+  toAddresses?: ToAddress[];
   fromAmount?: number | string;
   toAmount?: number | string;
 
@@ -161,15 +167,6 @@ export interface WidgetConfig {
   languageResources?: LanguageResources;
 }
 
-export type WidgetDrawerProps = {
-  elementRef?: RefObject<HTMLDivElement>;
-  open?: boolean;
-  /**
-   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
-   */
-  onClose?(): void;
-};
-
 export interface WidgetConfigProps {
   config: WidgetConfig;
 }
@@ -181,3 +178,12 @@ export interface WidgetConfigPartialProps {
 export type WidgetProps = WidgetDrawerProps &
   WidgetConfig &
   WidgetConfigPartialProps;
+
+export interface WidgetDrawerProps extends WidgetConfigPartialProps {
+  elementRef?: RefObject<HTMLDivElement>;
+  open?: boolean;
+  /**
+   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
+   */
+  onClose?(): void;
+}

package/utils/chainType.ts

@@ -5,6 +5,7 @@ import { isSVMAddress } from './svm';
 const chainTypeAddressValidation = {
   [ChainType.EVM]: isEVMAddress,
   [ChainType.SVM]: isSVMAddress,
+  [ChainType.UTXO]: () => false,
 };
 
 export const getChainTypeFromAddress = (
@@ -22,4 +23,5 @@ export const getChainTypeFromAddress = (
 export const defaultChainIdsByType = {
   [ChainType.EVM]: ChainId.ETH,
   [ChainType.SVM]: ChainId.SOL,
+  [ChainType.UTXO]: ChainId.BTC,
 };

package/utils/converters.ts

@@ -1,5 +1,6 @@
 import type {
   ExtendedTransactionInfo,
+  FeeCost,
   FullStatusData,
   Process,
   Status,
@@ -7,6 +8,7 @@ import type {
   TokenAmount,
   ToolsResponse,
 } from '@lifi/sdk';
+import { formatUnits } from 'viem';
 import type { RouteExecution } from '../stores';
 
 const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
@@ -108,6 +110,32 @@ export const buildRouteFromTxHistory = (
     chainId: receiving.token?.chainId,
   };
 
+  const sendingValue = sending.value ? BigInt(sending.value) : 0n;
+  const sendingFeeAmount =
+    sending.gasToken.address === sending.token.address && sending.amount
+      ? sendingValue - BigInt(sending.amount)
+      : sendingValue;
+  const sendingFeeAmountUsd =
+    sending.gasToken.priceUSD && sendingFeeAmount
+      ? parseFloat(formatUnits(sendingFeeAmount, sending.gasToken.decimals)) *
+        parseFloat(sending.gasToken.priceUSD)
+      : 0;
+
+  const feeCosts: FeeCost[] | undefined = sendingValue
+    ? [
+        {
+          amount: sendingFeeAmount.toString(),
+          amountUSD: sendingFeeAmountUsd.toFixed(2),
+          token: sending.gasToken,
+          included: false,
+          // Not used
+          description: '',
+          name: '',
+          percentage: '',
+        },
+      ]
+    : undefined;
+
   const routeExecution: RouteExecution = {
     status: 1,
     route: {
@@ -193,6 +221,7 @@ export const buildRouteFromTxHistory = (
                 type: 'SEND',
               },
             ],
+            feeCosts,
           },
         },
       ],

package/utils/index.ts

@@ -1,10 +1,10 @@
+export * from './chainType';
 export * from './colors';
 export * from './deepMerge';
 export * from './elements';
 export * from './enum';
 export * from './fees';
 export * from './format';
-export * from './chainType';
 export * from './input';
 export * from './item';
 export * from './navigationRoutes';

package/utils/navigationRoutes.ts

@@ -19,6 +19,7 @@ export const navigationRoutes = {
   bookmarks: 'bookmarks',
   recentWallets: 'recent-wallets',
   connectedWallets: 'connected-wallets',
+  configuredWallets: 'configured-wallets',
 };
 
 export const navigationRoutesValues = Object.values(navigationRoutes);
@@ -41,6 +42,7 @@ export const stickyHeaderRoutes = [
   navigationRoutes.bookmarks,
   navigationRoutes.recentWallets,
   navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
 ];
 
 export const backButtonRoutes = [
@@ -63,6 +65,7 @@ export const backButtonRoutes = [
   navigationRoutes.bookmarks,
   navigationRoutes.recentWallets,
   navigationRoutes.connectedWallets,
+  navigationRoutes.configuredWallets,
 ];
 
 export type NavigationRouteType = keyof typeof navigationRoutes;