@lifi/widget 3.4.3 → 3.5.0

package/pages/TransactionPage/TransactionPage.tsx

@@ -35,7 +35,8 @@ export const TransactionPage: React.FC = () => {
   const { setFieldValue } = useFieldActions();
   const emitter = useWidgetEvents();
   const { navigateBack } = useNavigateBack();
-  const { subvariant, contractSecondaryComponent } = useWidgetConfig();
+  const { subvariant, subvariantOptions, contractSecondaryComponent } =
+    useWidgetConfig();
   const { state }: any = useLocation();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
@@ -59,15 +60,14 @@ export const TransactionPage: React.FC = () => {
 
   const getHeaderTitle = () => {
     if (subvariant === 'custom') {
-      return t(`header.purchase`);
+      return t(`header.${subvariantOptions?.custom ?? 'checkout'}`);
     } else {
       if (route) {
         const transactionType =
-          route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-
+          route.fromChainId === route.toChainId ? 'swap' : 'bridge';
         return status === RouteExecutionStatus.Idle
-          ? t(`button.review${transactionType}`)
-          : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`);
+          ? t(`button.${transactionType}Review`)
+          : t(`header.${transactionType}`);
       }
     }
 
@@ -159,7 +159,9 @@ export const TransactionPage: React.FC = () => {
       case RouteExecutionStatus.Idle:
         switch (subvariant) {
           case 'custom':
-            return t('button.buyNow');
+            return subvariantOptions?.custom === 'deposit'
+              ? t(`button.deposit`)
+              : t(`button.buy`);
           case 'refuel':
             return t('button.startBridging');
           default:

package/providers/I18nProvider/I18nProvider.tsx

@@ -8,6 +8,7 @@ import { deepMerge } from '../../utils/deepMerge.js';
 import { isItemAllowed } from '../../utils/item.js';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 import { currencyExtendedFormatter } from './currencyExtendedFormatter.js';
+import { percentFormatter } from './percentFormatter.js';
 import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -66,6 +67,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       'currencyExt',
       currencyExtendedFormatter,
     );
+    i18n.services.formatter?.addCached('percent', percentFormatter);
 
     return i18n;
   }, [language, languageResources, languages]);

package/providers/I18nProvider/percentFormatter.ts

@@ -0,0 +1,18 @@
+/**
+ * We use <0.01% for both small positive and negative changes to keep it simple and clear, focusing on minimal impact rather than direction.
+ * Examples:
+ * +0.007% -> <0.01%
+ * -0.003% -> <0.01%
+ */
+export const percentFormatter = (lng: string | undefined, options: any) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'percent',
+  });
+  return (value: any) => {
+    if ((value > 0 && value < 0.0001) || (value < 0 && value > -0.0001)) {
+      return `<${formatter.format(0.0001)}`;
+    }
+    return formatter.format(value);
+  };
+};

package/types/widget.ts

@@ -188,7 +188,6 @@ export interface WidgetConfig {
   contractSecondaryComponent?: ReactNode;
   contractCompactComponent?: ReactNode;
   contractTool?: WidgetContractTool;
-
   integrator: string;
   apiKey?: string;
   /**
@@ -225,6 +224,7 @@ export interface WidgetConfig {
   tokens?: WidgetTokens;
   languages?: WidgetLanguages;
   languageResources?: LanguageResources;
+  explorerUrls?: Record<number | 'internal', string[]>;
 }
 
 export interface WidgetConfigProps {

package/utils/elements.ts

@@ -3,6 +3,7 @@ export enum ElementId {
   Header = 'widget-header',
   RelativeContainer = 'widget-relative-container',
   ScrollableContainer = 'widget-scrollable-container',
+  TokenList = 'token-list',
 }
 
 export const createElementId = (ElementId: ElementId, elementId: string) =>