@lifi/widget 3.0.0-alpha.33 → 3.0.0-alpha.34

package/_esm/types/widget.d.ts

@@ -1,12 +1,40 @@
-import type { BaseToken, ChainType, Order, RouteOptions, SDKConfig, StaticToken, Token } from '@lifi/sdk';
+import type { BaseToken, ChainType, ContractCall, Order, RouteOptions, SDKConfig, StaticToken, Token } from '@lifi/sdk';
 import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
 import type { CoinbaseWalletParameters, WalletConnectParameters } from '@wagmi/connectors';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers/I18nProvider/types.js';
-export type WidgetVariant = 'default' | 'expandable' | 'drawer';
-export type WidgetSubvariant = 'default' | 'split' | 'nft' | 'refuel';
-export type SplitSubvariantOptions = 'bridge' | 'swap';
+export type WidgetVariant = 'compact' | 'wide' | 'drawer';
+export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel';
+export type SplitSubvariant = 'bridge' | 'swap';
+export type CustomSubvariant = 'checkout' | 'deposit';
+export interface SubvariantOptions {
+    split?: SplitSubvariant;
+    custom?: CustomSubvariant;
+}
+export type Appearance = PaletteMode | 'auto';
+export interface NavigationProps {
+    /**
+     * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
+     * @default true
+     */
+    edge?: boolean;
+    /**
+     * If true, makes navigation header components compact.
+     * @default true
+     */
+    dense?: boolean;
+}
+export type WidgetThemeComponents = Pick<Components<Theme>, 'MuiAppBar' | 'MuiAvatar' | 'MuiButton' | 'MuiCard' | 'MuiIconButton' | 'MuiInputCard'>;
+export type WidgetTheme = {
+    palette?: Pick<PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text'>;
+    shape?: Shape;
+    typography?: TypographyOptions;
+    components?: WidgetThemeComponents;
+    container?: CSSProperties;
+    playground?: CSSProperties;
+    navigation?: NavigationProps;
+};
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -29,22 +57,11 @@ export declare enum RequiredUI {
     ToAddress = "toAddress"
 }
 export type RequiredUIType = `${RequiredUI}`;
-export type Appearance = PaletteMode | 'auto';
-export type ThemeConfig = {
-    palette?: Pick<PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text'>;
-    shape?: Shape;
-    typography?: TypographyOptions;
-    components?: Pick<Components<Omit<Theme, 'components'>>, 'MuiAvatar'>;
-};
 export interface WidgetWalletConfig {
     onConnect(): void;
     walletConnect?: WalletConnectParameters;
     coinbase?: CoinbaseWalletParameters;
 }
-export interface AllowDeny<T> {
-    allow?: T[];
-    deny?: T[];
-}
 export interface WidgetSDKConfig extends Omit<SDKConfig, 'apiKey' | 'disableVersionCheck' | 'integrator' | 'routeOptions' | 'widgetVersion'> {
     routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
 }
@@ -52,18 +69,15 @@ export interface WidgetContractTool {
     logoURI: string;
     name: string;
 }
-export interface WidgetContract {
-    address?: string;
-    callData?: string;
-    gasLimit?: string;
-    approvalAddress?: string;
-    outputToken?: string;
-    fallbackAddress?: string;
-}
 export interface ToAddress {
     name?: string;
     address: string;
     chainType: ChainType;
+    logoURI?: string;
+}
+export interface AllowDeny<T> {
+    allow?: T[];
+    deny?: T[];
 }
 export interface WidgetConfig {
     fromChain?: number;
@@ -74,7 +88,7 @@ export interface WidgetConfig {
     toAddresses?: ToAddress[];
     fromAmount?: number | string;
     toAmount?: number | string;
-    contract?: WidgetContract;
+    contractCalls?: ContractCall[];
     contractComponent?: ReactNode;
     contractSecondaryComponent?: ReactNode;
     contractCompactComponent?: ReactNode;
@@ -88,10 +102,9 @@ export interface WidgetConfig {
     insurance?: boolean;
     variant?: WidgetVariant;
     subvariant?: WidgetSubvariant;
-    subvariantOptions?: SplitSubvariantOptions;
+    subvariantOptions?: SubvariantOptions;
     appearance?: Appearance;
-    theme?: ThemeConfig;
-    containerStyle?: CSSProperties;
+    theme?: WidgetTheme;
     disabledUI?: DisabledUIType[];
     hiddenUI?: HiddenUIType[];
     requiredUI?: RequiredUIType[];

package/_esm/types/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../types/widget.ts"],"names":[],"mappings":"AA+BA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QASX;AATD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;AAC3B,CAAC,EATW,QAAQ,KAAR,QAAQ,QASnB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../types/widget.ts"],"names":[],"mappings":"AAwEA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QASX;AATD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;AAC3B,CAAC,EATW,QAAQ,KAAR,QAAQ,QASnB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

package/_esm/utils/item.d.ts

@@ -1,2 +1,2 @@
 import type { AllowDeny } from '../types/widget.js';
-export declare const isItemAllowed: <T>(itemId: T, items?: AllowDeny<T> | undefined) => boolean;
+export declare const isItemAllowed: <T>(itemId: T, items?: AllowDeny<T>) => boolean;

package/components/ActiveTransactions/ActiveTransactions.tsx

@@ -1,4 +1,4 @@
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '@mui/material';
 import { Stack } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -9,7 +9,7 @@ import { CardTitle } from '../Card/CardTitle.js';
 import { ActiveTransactionItem } from './ActiveTransactionItem.js';
 import { ShowAllButton } from './ActiveTransactions.style.js';
 
-export const ActiveTransactions: React.FC<BoxProps> = (props) => {
+export const ActiveTransactions: React.FC<CardProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const executingRoutes = useExecutingRoutesIds();
@@ -25,7 +25,7 @@ export const ActiveTransactions: React.FC<BoxProps> = (props) => {
   const hasShowAll = executingRoutes?.length > 2;
 
   return (
-    <Card variant="selected" selectionColor="secondary" {...props}>
+    <Card type="selected" selectionColor="secondary" {...props}>
       <CardTitle>{t('header.activeTransactions')}</CardTitle>
       <Stack spacing={1.5} pt={1.5} pb={hasShowAll ? 0 : 2}>
         {executingRoutes.slice(0, 2).map((routeId) => (

package/components/AmountInput/AmountInput.tsx

@@ -1,5 +1,5 @@
 import type { Token } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '@mui/material';
 import type { ChangeEvent, ReactNode } from 'react';
 import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,8 @@ import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import { DisabledUI } from '../../types/widget.js';
 import { formatInputAmount } from '../../utils/format.js';
 import { fitInputText } from '../../utils/input.js';
-import { Card } from '../Card/Card.js';
 import { CardTitle } from '../Card/CardTitle.js';
+import { InputCard } from '../Card/InputCard.js';
 import {
   FormContainer,
   FormControl,
@@ -24,7 +24,7 @@ import { AmountInputEndAdornment } from './AmountInputEndAdornment.js';
 import { AmountInputStartAdornment } from './AmountInputStartAdornment.js';
 import { PriceFormHelperText } from './PriceFormHelperText.js';
 
-export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
+export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
   formType,
   ...props
 }) => {
@@ -53,7 +53,7 @@ export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
 
 export const AmountInputBase: React.FC<
   FormTypeProps &
-    BoxProps & {
+    CardProps & {
       token?: Token;
       startAdornment?: ReactNode;
       endAdornment?: ReactNode;
@@ -98,7 +98,7 @@ export const AmountInputBase: React.FC<
   }, [value, ref]);
 
   return (
-    <Card {...props}>
+    <InputCard {...props}>
       <CardTitle>{t('main.fromAmount')}</CardTitle>
       <FormContainer>
         <AmountInputStartAdornment formType={formType} />
@@ -123,6 +123,6 @@ export const AmountInputBase: React.FC<
           {bottomAdornment}
         </FormControl>
       </FormContainer>
-    </Card>
+    </InputCard>
   );
 };

package/components/AppContainer.tsx

@@ -29,6 +29,7 @@ const RelativeContainer = styled(Box, {
   overflow: 'auto',
   flex: 1,
   zIndex: 0,
+  ...theme.container,
 }));
 
 const CssBaselineContainer = styled(ScopedCssBaseline, {
@@ -53,10 +54,9 @@ export const FlexContainer = styled(Container)({
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { containerStyle, variant, elementId } = useWidgetConfig();
+  const { variant, elementId } = useWidgetConfig();
   return (
     <RelativeContainer
-      sx={containerStyle}
       variant={variant}
       id={createElementId(ElementId.RelativeContainer, elementId)}
     >

package/components/Avatar/AccountAvatar.tsx

@@ -3,6 +3,7 @@ import { Wallet } from '@mui/icons-material';
 import { Badge } from '@mui/material';
 import type { Account } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
+import type { ToAddress } from '../../types/widget.js';
 import { SmallAvatar } from '../SmallAvatar.js';
 import {
   AvatarDefault,
@@ -13,6 +14,7 @@ import {
 interface AccountAvatarProps {
   chainId?: number;
   account?: Account;
+  toAddress?: ToAddress;
   empty?: boolean;
 }
 
@@ -20,26 +22,28 @@ export const AccountAvatar = ({
   chainId,
   account,
   empty,
+  toAddress,
 }: AccountAvatarProps) => {
   const { chain } = useChain(chainId);
 
-  const avatar = account ? (
-    <AvatarMasked
-      src={getConnectorIcon(account.connector)}
-      alt={account.connector?.name}
-      sx={{
-        marginRight: chain?.logoURI ? 0 : 1.5,
-      }}
-    >
-      {account.connector?.name[0]}
-    </AvatarMasked>
-  ) : empty ? (
-    <AvatarDefault />
-  ) : (
-    <AvatarDefault>
-      <Wallet sx={{ fontSize: 20 }} />
-    </AvatarDefault>
-  );
+  const avatar =
+    account?.connector || toAddress?.logoURI ? (
+      <AvatarMasked
+        src={toAddress?.logoURI || getConnectorIcon(account?.connector)}
+        alt={toAddress?.name || account?.connector?.name}
+        sx={{
+          marginRight: chain?.logoURI ? 0 : 1.5,
+        }}
+      >
+        {(toAddress?.name || account?.connector?.name)?.[0]}
+      </AvatarMasked>
+    ) : empty ? (
+      <AvatarDefault />
+    ) : (
+      <AvatarDefault>
+        <Wallet sx={{ fontSize: 20 }} />
+      </AvatarDefault>
+    );
 
   return (
     <Badge

package/components/Avatar/utils.ts

@@ -8,4 +8,4 @@ export const avatarMask16 =
  * Avatar mask for 12px badge
  */
 export const avatarMask12 =
-  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100%/100% 100% no-repeat';
+  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat';

package/components/Card/Card.tsx

@@ -1,83 +1,54 @@
-import type { BoxProps, Theme } from '@mui/material';
-import { Box, alpha, darken, lighten, styled } from '@mui/material';
-import type { MouseEventHandler } from 'react';
+import type { CardProps as MuiCardProps } from '@mui/material';
+import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material';
 
-type CardVariant = 'default' | 'selected' | 'error';
-
-export type CardProps = {
-  variant?: CardVariant;
+export interface CardProps extends MuiCardProps {
+  type?: 'default' | 'selected' | 'error';
   selectionColor?: 'primary' | 'secondary';
   indented?: boolean;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  pointerEvents?: 'auto' | 'none';
-} & BoxProps;
-
-const getBackgroundColor = (
-  theme: Theme,
-  variant?: CardVariant,
-  selectionColor?: 'primary' | 'secondary',
-) =>
-  variant === 'selected'
-    ? selectionColor === 'primary'
-      ? theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.04)
-        : alpha(theme.palette.primary.main, 0.42)
-      : alpha(
-          theme.palette.secondary.main,
-          theme.palette.mode === 'light' ? 0.08 : 0.12,
-        )
-    : theme.palette.background.paper;
+}
 
-export const Card = styled(Box, {
+export const Card = styled(MuiCard, {
   shouldForwardProp: (prop) =>
-    !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
-      prop as string,
-    ),
-})<CardProps>(({
-  theme,
-  variant = 'default',
-  selectionColor = 'primary',
-  indented,
-  pointerEvents,
-  onClick,
-}) => {
-  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
-  const backgroundHoverColor = onClick
-    ? theme.palette.mode === 'light'
-      ? darken(backgroundColor, 0.02)
-      : lighten(backgroundColor, 0.02)
-    : backgroundColor;
+    !['type', 'indented', 'selectionColor'].includes(prop as string),
+})<CardProps>(({ theme, indented, selectionColor, type }) => {
   return {
-    backgroundColor,
-    // border: variant === 'default' ? 'none' : '1px solid',
-    border: '1px solid',
-    borderColor:
-      variant === 'error'
-        ? theme.palette.error.main
-        : variant === 'selected'
-          ? selectionColor === 'primary'
-            ? theme.palette.primary.main
-            : alpha(theme.palette.secondary.main, 0.48)
-          : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadius,
-    // boxShadow: '0px 1px 8px 0px rgba(0, 0, 0, 0.04)',
-    overflow: 'hidden',
-    position: 'relative',
     padding: indented ? theme.spacing(2) : 0,
-    boxSizing: 'border-box',
-    '&:hover': {
-      cursor: onClick ? 'pointer' : 'default',
-      backgroundColor: backgroundHoverColor,
-    },
-    transition: theme.transitions.create(
-      ['background-color', 'box-shadow', 'border-color'],
-      {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
-      },
-    ),
-    pointerEvents,
+    ...(type === 'selected' &&
+      selectionColor === 'primary' && {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? lighten(theme.palette.primary.main, 0.95)
+            : darken(theme.palette.primary.main, 0.65),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: theme.palette.primary.main,
+        '&:hover': {
+          backgroundColor:
+            theme.palette.mode === 'light'
+              ? lighten(theme.palette.primary.main, 0.9)
+              : darken(theme.palette.primary.main, 0.6),
+        },
+      }),
+    ...(type === 'selected' &&
+      selectionColor === 'secondary' && {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? lighten(theme.palette.secondary.main, 0.9)
+            : darken(theme.palette.secondary.main, 0.85),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: alpha(theme.palette.secondary.main, 0.32),
+        '&:hover': {
+          backgroundColor:
+            theme.palette.mode === 'light'
+              ? lighten(theme.palette.secondary.main, 0.85)
+              : darken(theme.palette.secondary.main, 0.8),
+        },
+      }),
+    ...(type === 'error' && {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.palette.error.main,
+    }),
   };
 });

package/components/Card/CardLabel.tsx

@@ -1,4 +1,11 @@
-import { Box, Typography, alpha, lighten, styled } from '@mui/material';
+import {
+  Box,
+  Typography,
+  alpha,
+  getContrastRatio,
+  lighten,
+  styled,
+} from '@mui/material';
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',
@@ -7,7 +14,7 @@ export const CardLabel = styled(Box, {
     type === 'active'
       ? theme.palette.mode === 'light'
         ? theme.palette.secondary.main
-        : alpha(theme.palette.secondary.main, 0.32)
+        : alpha(theme.palette.secondary.main, 0.8)
       : type?.includes('insurance')
         ? alpha(
             theme.palette.success.main,
@@ -22,7 +29,12 @@ export const CardLabel = styled(Box, {
         theme.palette.success.main,
         theme.palette.mode === 'light' ? 0 : 0.24,
       )
-    : theme.palette.text.primary,
+    : getContrastRatio(
+          theme.palette.common.white,
+          alpha(theme.palette.secondary.main, 0.08),
+        ) >= 3
+      ? theme.palette.common.white
+      : theme.palette.common.black,
   padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
   display: 'flex',
   alignItems: 'center',

package/components/Card/InputCard.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+import { Card } from './Card.js';
+
+export const InputCard = styled(Card, {
+  name: 'MuiInputCard',
+  slot: 'root',
+})();

package/components/ChainSelect/ChainSelect.tsx

@@ -58,11 +58,15 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
               title={chain.name}
               placement="top"
               enterDelay={400}
+              enterNextDelay={100}
+              disableInteractive
               arrow
             >
               <ChainCard
+                component="button"
                 onClick={() => setCurrentChain(chain.id)}
-                variant={chainId === chain.id ? 'selected' : 'default'}
+                type={chainId === chain.id ? 'selected' : 'default'}
+                selectionColor="primary"
               >
                 <Avatar
                   src={chain.logoURI}
@@ -75,7 +79,7 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
             </Tooltip>
           ))}
       {chainsToHide > 0 ? (
-        <ChainCard onClick={showAllChains}>
+        <ChainCard component="button" onClick={showAllChains}>
           <Box
             sx={{
               width: 40,

package/components/ContractComponent/ContractComponent.tsx

@@ -1,8 +1,8 @@
-import type { BoxProps } from '@mui/material';
+import type { CardProps } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 import { Card } from '../Card/Card.js';
 
-export const ContractComponent: React.FC<PropsWithChildren<BoxProps>> = ({
+export const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({
   children,
   ...props
 }) => {

package/components/ContractComponent/ItemPrice.tsx

@@ -0,0 +1,33 @@
+import type { ContractCall } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import type { TokenAmount } from '../../types/token.js';
+import { Token } from '../Token/Token.js';
+
+export interface ItemPriceProps {
+  token: TokenAmount;
+  contractCalls?: ContractCall[];
+}
+
+export const ItemPrice: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions();
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true });
+      setFieldValue('toToken', token.address, { isTouched: true });
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      });
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      });
+    }
+  }, [contractCalls, setFieldValue, token]);
+  return <Token token={token} p={2} />;
+};

package/components/{NFT → ContractComponent/NFT}/NFT.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldActions } from '../../../stores/form/useFieldActions.js';
 import { NFTBase } from './NFTBase.js';
 import type { NFTProps } from './types.js';
 
@@ -10,7 +10,7 @@ export const NFT: React.FC<NFTProps> = ({
   assetName,
   owner,
   token,
-  contract,
+  contractCall,
 }) => {
   const { setFieldValue } = useFieldActions();
 
@@ -22,18 +22,12 @@ export const NFT: React.FC<NFTProps> = ({
         isTouched: true,
       });
     }
-    if (contract) {
-      setFieldValue('toContractAddress', contract.address, {
-        isTouched: true,
-      });
-      setFieldValue('toContractCallData', contract.callData, {
-        isTouched: true,
-      });
-      setFieldValue('toContractGasLimit', contract.gasLimit, {
+    if (contractCall) {
+      setFieldValue('contractCalls', [contractCall], {
         isTouched: true,
       });
     }
-  }, [contract, setFieldValue, token]);
+  }, [contractCall, setFieldValue, token]);
   return (
     <NFTBase
       isLoading={isLoading}

package/components/{NFT → ContractComponent/NFT}/NFTBase.tsx

@@ -1,6 +1,6 @@
 import { Box, Link, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Token } from '../Token/Token.js';
+import { Token } from '../../Token/Token.js';
 import { PreviewAvatar } from './NFT.style.js';
 import type { NFTProps } from './types.js';
 

package/components/{NFT → ContractComponent/NFT}/types.ts

@@ -1,5 +1,4 @@
-import type { TokenAmount } from '@lifi/sdk';
-import type { WidgetContract } from '../../types/widget.js';
+import type { ContractCall, TokenAmount } from '@lifi/sdk';
 
 export interface NFTBaseProps {
   imageUrl?: string;
@@ -11,7 +10,7 @@ export interface NFTBaseProps {
 }
 
 export interface NFTProps extends NFTBaseProps {
-  contract?: WidgetContract;
+  contractCall?: ContractCall;
 }
 
 export interface NFTOwner {

package/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import type { DialogProps, Theme } from '@mui/material';
+import type { DialogProps, PaperProps, Theme } from '@mui/material';
 import { Dialog as MuiDialog } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
@@ -10,10 +10,11 @@ export const modalProps = {
   },
 };
 
-export const paperProps = {
+export const paperProps: Partial<PaperProps> = {
   sx: (theme: Theme) => ({
     position: 'absolute',
     backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
     borderTopLeftRadius: theme.shape.borderRadius,
     borderTopRightRadius: theme.shape.borderRadius,
   }),

package/components/Header/BackButton.tsx

@@ -0,0 +1,17 @@
+import { ArrowBack } from '@mui/icons-material';
+import type { IconButtonProps } from '@mui/material';
+import { IconButton, useTheme } from '@mui/material';
+
+export const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme();
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'start' : false}
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  );
+};