@lifi/widget 3.4.0-beta.5 → 3.4.0

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -12,9 +12,9 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { Token } from '../../components/Token/Token.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { getProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { useTokenBalance } from '../../hooks/useTokenBalance.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
 import { calculateValueLossPercentage } from './utils.js';

package/providers/WalletProvider/EVMBaseProvider.tsx

@@ -5,9 +5,10 @@ import {
 } from '@lifi/wallet-management';
 import { useRef, type FC, type PropsWithChildren } from 'react';
 import { WagmiProvider } from 'wagmi';
-import { defaultWalletConnectProjectId } from '../../config/walletConnect.js';
+import { defaultCoinbaseConfig } from '../../config/coinbase.js';
+import { defaultMetaMaskConfig } from '../../config/metaMask.js';
+import { defaultWalletConnectConfig } from '../../config/walletConnect.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { LiFiToolLogo } from '../../icons/lifi.js';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -17,16 +18,13 @@ export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
 
   if (!wagmi.current) {
     wagmi.current = createDefaultWagmiConfig({
-      walletConnect: walletConfig?.walletConnect ?? {
-        projectId: defaultWalletConnectProjectId,
-      },
-      coinbase: walletConfig?.coinbase ?? {
-        appName: 'LI.FI',
-        appLogoUrl: LiFiToolLogo,
-      },
+      coinbase: walletConfig?.coinbase ?? defaultCoinbaseConfig,
+      metaMask: walletConfig?.metaMask ?? defaultMetaMaskConfig,
+      walletConnect: walletConfig?.walletConnect ?? defaultWalletConnectConfig,
       wagmiConfig: {
         ssr: true,
       },
+      lazy: true,
     });
   }
 

package/themes/createTheme.ts

@@ -65,6 +65,7 @@ export const createTheme = (
 
   return createMuiTheme({
     container: widgetTheme.container,
+    header: widgetTheme.header,
     navigation: {
       edge: true,
       ...widgetTheme.navigation,

package/themes/types.ts

@@ -26,11 +26,13 @@ declare module '@mui/material/styles' {
   interface Theme {
     shape: Shape;
     container: CSSProperties;
+    header: CSSProperties;
     navigation: NavigationProps;
   }
   interface ThemeOptions {
     shape?: Partial<Shape>;
     container?: CSSProperties;
+    header?: CSSProperties;
     navigation?: NavigationProps;
   }
   interface ComponentNameToClassKey {

package/types/widget.ts

@@ -18,6 +18,7 @@ import type {
 import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
 import type {
   CoinbaseWalletParameters,
+  MetaMaskParameters,
   WalletConnectParameters,
 } from '@wagmi/connectors';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
@@ -53,6 +54,7 @@ export type WidgetThemeComponents = Pick<
   | 'MuiInputCard'
   | 'MuiTabs'
 >;
+
 export type WidgetTheme = {
   palette?: Pick<
     PaletteOptions,
@@ -62,6 +64,7 @@ export type WidgetTheme = {
   typography?: TypographyOptions;
   components?: WidgetThemeComponents;
   container?: CSSProperties;
+  header?: CSSProperties;
   playground?: CSSProperties;
   navigation?: NavigationProps;
 };
@@ -96,6 +99,7 @@ export interface WidgetWalletConfig {
   onConnect?(): void;
   walletConnect?: WalletConnectParameters;
   coinbase?: CoinbaseWalletParameters;
+  metaMask?: MetaMaskParameters;
 }
 
 export interface WidgetSDKConfig
@@ -153,6 +157,22 @@ export interface AllowDeny<T> {
   deny?: T[];
 }
 
+export type WidgetChains = {
+  from?: AllowDeny<number>;
+  to?: AllowDeny<number>;
+  types?: AllowDeny<ChainType>;
+} & AllowDeny<number>;
+
+export type WidgetTokens = {
+  featured?: StaticToken[];
+  include?: Token[];
+  popular?: StaticToken[];
+} & AllowDeny<BaseToken>;
+
+export type WidgetLanguages = {
+  default?: LanguageKey;
+} & AllowDeny<LanguageKey>;
+
 export interface WidgetConfig {
   fromChain?: number;
   toChain?: number;
@@ -201,19 +221,9 @@ export interface WidgetConfig {
 
   bridges?: AllowDeny<string>;
   exchanges?: AllowDeny<string>;
-  chains?: {
-    from?: AllowDeny<number>;
-    to?: AllowDeny<number>;
-    types?: AllowDeny<ChainType>;
-  } & AllowDeny<number>;
-  tokens?: {
-    featured?: StaticToken[];
-    include?: Token[];
-    popular?: StaticToken[];
-  } & AllowDeny<BaseToken>;
-  languages?: {
-    default?: LanguageKey;
-  } & AllowDeny<LanguageKey>;
+  chains?: WidgetChains;
+  tokens?: WidgetTokens;
+  languages?: WidgetLanguages;
   languageResources?: LanguageResources;
 }
 

package/_esm/hooks/useContentHeight.js

@@ -1,40 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-import { ElementId, createElementId } from '../utils/elements.js';
-import { useDefaultElementId } from './useDefaultElementId.js';
-import { getScrollableContainer } from './useScrollableContainer.js';
-const getContentHeight = (elementId) => {
-    const containerElement = document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
-    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
-    if (!containerElement || !headerElement) {
-        console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
-        return 0;
-    }
-    const { height: containerHeight } = containerElement.getBoundingClientRect();
-    const { height: headerHeight } = headerElement.getBoundingClientRect();
-    return containerHeight - headerHeight;
-};
-export const useContentHeight = () => {
-    const elementId = useDefaultElementId();
-    const [contentHeight, setContentHeight] = useState(0);
-    useLayoutEffect(() => {
-        setContentHeight(getContentHeight(elementId));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return contentHeight;
-};
-export const useSetContentHeight = (ref) => {
-    const elementId = useDefaultElementId();
-    useLayoutEffect(() => {
-        const scrollableContainer = getScrollableContainer(elementId);
-        if (!scrollableContainer ||
-            !ref.current ||
-            ref.current?.clientHeight <= scrollableContainer?.clientHeight) {
-            return;
-        }
-        scrollableContainer.style.height = `${ref.current.clientHeight}px`;
-        return () => {
-            scrollableContainer.style.removeProperty('height');
-        };
-    }, [elementId, ref]);
-};
-//# sourceMappingURL=useContentHeight.js.map

package/_esm/hooks/useContentHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContentHeight.js","sourceRoot":"","sources":["../../hooks/useContentHeight.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC7C,MAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAC9C,eAAe,CAAC,SAAS,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAC1D,CAAC;IACF,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAC3C,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAC7C,CAAC;IACF,IAAI,CAAC,gBAAgB,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,OAAO,CAAC,IAAI,CACV,cAAc,SAAS,CAAC,mBAAmB,OAAO,SAAS,CAAC,MAAM,MAAM,CACzE,CAAC;QACF,OAAO,CAAC,CAAC;IACX,CAAC;IACD,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC;IAC7E,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;IACvE,OAAO,eAAe,GAAG,YAAY,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC9D,eAAe,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;QAC9C,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,GAA8C,EAC9C,EAAE;IACF,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAC9D,IACE,CAAC,mBAAmB;YACpB,CAAC,GAAG,CAAC,OAAO;YACZ,GAAG,CAAC,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,YAAY,EAC9D,CAAC;YACD,OAAO;QACT,CAAC;QACD,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;QACnE,OAAO,GAAG,EAAE;YACV,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;AACvB,CAAC,CAAC"}

package/_esm/pages/SelectWalletPage/utils.d.ts

@@ -1,3 +0,0 @@
-import type { Wallet } from '@solana/wallet-adapter-react';
-import type { Connector } from 'wagmi';
-export declare const walletComparator: (a: Connector | Wallet, b: Connector | Wallet) => number;

package/_esm/pages/SelectWalletPage/utils.js

@@ -1,18 +0,0 @@
-import { getWalletPriority } from '@lifi/wallet-management';
-export const walletComparator = (a, b) => {
-    let aId = a.id || a.adapter?.name;
-    let bId = b.id || b.adapter?.name;
-    const priorityA = getWalletPriority(aId);
-    const priorityB = getWalletPriority(bId);
-    if (priorityA !== priorityB) {
-        return priorityA - priorityB;
-    }
-    if (aId < bId) {
-        return -1;
-    }
-    if (aId > bId) {
-        return 1;
-    }
-    return 0;
-};
-//# sourceMappingURL=utils.js.map

package/_esm/pages/SelectWalletPage/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../pages/SelectWalletPage/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,CAAqB,EACrB,CAAqB,EACrB,EAAE;IACF,IAAI,GAAG,GAAI,CAAe,CAAC,EAAE,IAAK,CAAY,CAAC,OAAO,EAAE,IAAI,CAAC;IAC7D,IAAI,GAAG,GAAI,CAAe,CAAC,EAAE,IAAK,CAAY,CAAC,OAAO,EAAE,IAAI,CAAC;IAE7D,MAAM,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAEzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,SAAS,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACd,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IACD,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACd,OAAO,CAAC,CAAC;IACX,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC,CAAC"}

package/hooks/useContentHeight.ts

@@ -1,53 +0,0 @@
-import type { MutableRefObject } from 'react';
-import { useLayoutEffect, useState } from 'react';
-import { ElementId, createElementId } from '../utils/elements.js';
-import { useDefaultElementId } from './useDefaultElementId.js';
-import { getScrollableContainer } from './useScrollableContainer.js';
-
-const getContentHeight = (elementId: string) => {
-  const containerElement = document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
-  const headerElement = document.getElementById(
-    createElementId(ElementId.Header, elementId),
-  );
-  if (!containerElement || !headerElement) {
-    console.warn(
-      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
-    );
-    return 0;
-  }
-  const { height: containerHeight } = containerElement.getBoundingClientRect();
-  const { height: headerHeight } = headerElement.getBoundingClientRect();
-  return containerHeight - headerHeight;
-};
-
-export const useContentHeight = () => {
-  const elementId = useDefaultElementId();
-  const [contentHeight, setContentHeight] = useState<number>(0);
-  useLayoutEffect(() => {
-    setContentHeight(getContentHeight(elementId));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return contentHeight;
-};
-
-export const useSetContentHeight = (
-  ref: MutableRefObject<HTMLElement | undefined>,
-) => {
-  const elementId = useDefaultElementId();
-  useLayoutEffect(() => {
-    const scrollableContainer = getScrollableContainer(elementId);
-    if (
-      !scrollableContainer ||
-      !ref.current ||
-      ref.current?.clientHeight <= scrollableContainer?.clientHeight
-    ) {
-      return;
-    }
-    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
-    return () => {
-      scrollableContainer.style.removeProperty('height');
-    };
-  }, [elementId, ref]);
-};

package/pages/SelectWalletPage/utils.ts

@@ -1,26 +0,0 @@
-import { getWalletPriority } from '@lifi/wallet-management';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import type { Connector } from 'wagmi';
-
-export const walletComparator = (
-  a: Connector | Wallet,
-  b: Connector | Wallet,
-) => {
-  let aId = (a as Connector).id || (a as Wallet).adapter?.name;
-  let bId = (b as Connector).id || (b as Wallet).adapter?.name;
-
-  const priorityA = getWalletPriority(aId);
-  const priorityB = getWalletPriority(bId);
-
-  if (priorityA !== priorityB) {
-    return priorityA - priorityB;
-  }
-
-  if (aId < bId) {
-    return -1;
-  }
-  if (aId > bId) {
-    return 1;
-  }
-  return 0;
-};