@openocean.finance/widget 1.0.16 → 1.0.17

package/dist/esm/components/ChainSelect/ChainSelect.d.ts

@@ -0,0 +1,2 @@
+import type { FormTypeProps } from '../../stores/form/types.js';
+export declare const ChainSelect: ({ formType }: FormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChainSelect/ChainSelect.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { maxChainsToOrder, maxChainsToShow, } from '../../stores/chains/createChainOrderStore.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { ChainCard, ChainContainer } from './ChainSelect.style.js';
+import { useChainSelect } from './useChainSelect.js';
+export const ChainSelect = ({ formType }) => {
+    const navigate = useNavigate();
+    const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = useChainSelect(formType);
+    const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+    useEffect(() => {
+        if (chainId) {
+            const hasChainInOrderedList = chainOrder.includes(chainId);
+            // If we don't have a chain in the ordered chain list we should add it.
+            if (!hasChainInOrderedList) {
+                setChainOrder(chainId, formType);
+            }
+        }
+    }, [chainId, chainOrder, formType, setChainOrder]);
+    const showAllChains = () => {
+        navigate(navigationRoutes[`${formType}Chain`]);
+    };
+    // We check if we can accommodate all the chains on the grid
+    // If there are more than 10 chains we show the number of hidden chains as the last one tile
+    const chainsToHide = chains?.length === maxChainsToShow
+        ? 0
+        : (chains?.length ?? 0) - maxChainsToOrder;
+    // When there is less than 10 chains we don't care about the order
+    const chainsToShow = chainsToHide > 0 ? getChains() : chains;
+    return (_jsxs(ChainContainer, { children: [isLoading
+                ? Array.from({ length: maxChainsToOrder }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
+                : chainsToShow?.map((chain) => (_jsx(Tooltip, { title: chain.name, enterNextDelay: 100, children: _jsx(ChainCard, { component: "button", onClick: () => setCurrentChain(chain.id), type: chainId === chain.id ? 'selected' : 'default', selectionColor: "primary", children: _jsx(Avatar, { src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 }, children: chain.name[0] }) }) }, chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, { component: "button", onClick: showAllChains, children: _jsx(Box, { sx: {
+                        width: 40,
+                        height: 40,
+                        display: 'grid',
+                        placeItems: 'center',
+                    }, children: _jsxs(Typography, { sx: {
+                            fontWeight: 500,
+                        }, children: ["+", chainsToHide] }) }) })) : null] }));
+};
+//# sourceMappingURL=ChainSelect.js.map

package/dist/esm/components/ChainSelect/ChainSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelect.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ChainSelect/ChainSelect.style.d.ts

@@ -0,0 +1,2 @@
+export declare const ChainCard: import("@emotion/styled").StyledComponent<import("@mui/material").CardOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "sx" | "style" | "className" | "square" | "classes" | "variant" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("../../components/Card/Card.js").CardProps, {}, {}>;
+export declare const ChainContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/ChainSelect/ChainSelect.style.js

@@ -0,0 +1,16 @@
+import { Box, styled } from '@mui/material';
+import { Card } from '../../components/Card/Card.js';
+export const ChainCard = styled(Card)({
+    display: 'grid',
+    placeItems: 'center',
+    minWidth: 52,
+    height: 56,
+});
+export const ChainContainer = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+    gridAutoRows: '56px',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+}));
+//# sourceMappingURL=ChainSelect.style.js.map

package/dist/esm/components/ChainSelect/ChainSelect.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelect.style.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/ChainSelect.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,EAAE;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,qCAAqC;IAC1D,YAAY,EAAE,MAAM;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CACxB,CAAC,CAAC,CAAA"}

package/dist/esm/components/ChainSelect/useChainSelect.d.ts

@@ -0,0 +1,10 @@
+import type { EVMChain } from '@openocean.finance/widget-sdk';
+import type { FormType } from '../../stores/form/types.js';
+export declare const useChainSelect: (formType: FormType) => {
+    chainOrder: number[];
+    chains: import("@openocean.finance/widget-sdk").ExtendedChain[];
+    getChains: () => EVMChain[];
+    isLoading: boolean;
+    setChainOrder: (chainId: number, type: FormType) => void;
+    setCurrentChain: (chainId: number) => void;
+};

package/dist/esm/components/ChainSelect/useChainSelect.js

@@ -0,0 +1,67 @@
+import { useChains } from '../../hooks/useChains.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useChainOrder } from '../../stores/chains/useChainOrder.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
+export const useChainSelect = (formType) => {
+    const { disabledUI } = useWidgetConfig();
+    const chainKey = FormKeyHelper.getChainKey(formType);
+    const { onChange } = useFieldController({ name: chainKey });
+    const { setFieldValue, getFieldValues } = useFieldActions();
+    const { useExternalWalletProvidersOnly, externalChainTypes } = useExternalWalletProvider();
+    const { chains, isLoading, getChainById } = useChains(formType, 
+    // If the integrator uses external wallet management and has not opted in for partial wallet management,
+    // restrict the displayed chains to those compatible with external wallet management.
+    // This ensures users only see chains for which they can sign transactions.
+    formType === 'from' && useExternalWalletProvidersOnly
+        ? externalChainTypes
+        : undefined);
+    const [chainOrder, setChainOrder] = useChainOrder(formType);
+    const swapOnly = useSwapOnly();
+    const { tryResetToAddress } = useToAddressReset();
+    const getChains = () => {
+        if (!chains) {
+            return [];
+        }
+        const selectedChains = chainOrder
+            .map((chainId) => chains.find((chain) => chain.id === chainId))
+            .filter(Boolean);
+        return selectedChains;
+    };
+    const setCurrentChain = (chainId) => {
+        onChange(chainId);
+        if (swapOnly) {
+            setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+                isTouched: true,
+            });
+        }
+        const tokenKey = FormKeyHelper.getTokenKey(formType);
+        if (!disabledUI?.includes(tokenKey)) {
+            setFieldValue(tokenKey, '');
+        }
+        const amountKey = FormKeyHelper.getAmountKey(formType);
+        if (!disabledUI?.includes(amountKey)) {
+            setFieldValue(amountKey, '');
+        }
+        setFieldValue('tokenSearchFilter', '');
+        const [toChainId] = getFieldValues('toChain');
+        const toChain = getChainById(toChainId);
+        if (toChain) {
+            tryResetToAddress(toChain);
+        }
+        setChainOrder(chainId, formType);
+    };
+    return {
+        chainOrder,
+        chains,
+        getChains,
+        isLoading,
+        setChainOrder,
+        setCurrentChain,
+    };
+};
+//# sourceMappingURL=useChainSelect.js.map

package/dist/esm/components/ChainSelect/useChainSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChainSelect.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/ContractComponent/ContractComponent.d.ts

@@ -0,0 +1,3 @@
+import type { CardProps } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+export declare const ContractComponent: React.FC<PropsWithChildren<CardProps>>;

package/dist/esm/components/ContractComponent/ContractComponent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '../Card/Card.js';
+export const ContractComponent = ({ children, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    return _jsx(Card, { ...props, children: children });
+};
+//# sourceMappingURL=ContractComponent.js.map

package/dist/esm/components/ContractComponent/ContractComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContractComponent.js","sourceRoot":"","sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,MAAM,CAAC,MAAM,iBAAiB,GAA2C,CAAC,EACxE,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAQ,CAAA;AAC3C,CAAC,CAAA"}

package/dist/esm/components/ContractComponent/ItemPrice.d.ts

@@ -0,0 +1,7 @@
+import type { ContractCall } from '@openocean.finance/widget-sdk';
+import type { TokenAmount } from '../../types/token.js';
+export interface ItemPriceProps {
+    token: TokenAmount;
+    contractCalls?: ContractCall[];
+}
+export declare const ItemPrice: React.FC<ItemPriceProps>;

package/dist/esm/components/ContractComponent/ItemPrice.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { formatUnits } from 'viem';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { Token } from '../Token/Token.js';
+export const ItemPrice = ({ token, contractCalls, }) => {
+    const { setFieldValue } = useFieldActions();
+    useEffect(() => {
+        if (token) {
+            setFieldValue('toChain', token.chainId, { isTouched: true });
+            setFieldValue('toToken', token.address, { isTouched: true });
+            setFieldValue('toAmount', token.amount ? formatUnits(token.amount, token.decimals) : '', {
+                isTouched: true,
+            });
+        }
+        if (contractCalls) {
+            setFieldValue('contractCalls', contractCalls, {
+                isTouched: true,
+            });
+        }
+    }, [contractCalls, setFieldValue, token]);
+    return _jsx(Token, { token: token, p: 2 });
+};
+//# sourceMappingURL=ItemPrice.js.map

package/dist/esm/components/ContractComponent/ItemPrice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPrice.js","sourceRoot":"","sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAOzC,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,aAAa,GACd,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CACX,UAAU,EACV,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC7D;gBACE,SAAS,EAAE,IAAI;aAChB,CACF,CAAA;QACH,CAAC;QACD,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,eAAe,EAAE,aAAa,EAAE;gBAC5C,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACzC,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,GAAI,CAAA;AACtC,CAAC,CAAA"}

package/dist/esm/components/ContractComponent/NFT/NFT.d.ts

@@ -0,0 +1,2 @@
+import type { NFTProps } from './types.js';
+export declare const NFT: React.FC<NFTProps>;

package/dist/esm/components/ContractComponent/NFT/NFT.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { formatUnits } from 'viem';
+import { useFieldActions } from '../../../stores/form/useFieldActions.js';
+import { NFTBase } from './NFTBase.js';
+export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contractCall, }) => {
+    const { setFieldValue } = useFieldActions();
+    useEffect(() => {
+        if (token) {
+            setFieldValue('toChain', token.chainId, { isTouched: true });
+            setFieldValue('toToken', token.address, { isTouched: true });
+            setFieldValue('toAmount', token.amount ? formatUnits(token.amount, token.decimals) : '', {
+                isTouched: true,
+            });
+        }
+        if (contractCall) {
+            setFieldValue('contractCalls', [contractCall], {
+                isTouched: true,
+            });
+        }
+    }, [contractCall, setFieldValue, token]);
+    return (_jsx(NFTBase, { isLoading: isLoading, imageUrl: imageUrl, collectionName: collectionName, assetName: assetName, owner: owner, token: token }));
+};
+//# sourceMappingURL=NFT.js.map

package/dist/esm/components/ContractComponent/NFT/NFT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NFT.js","sourceRoot":"","sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAGtC,MAAM,CAAC,MAAM,GAAG,GAAuB,CAAC,EACtC,QAAQ,EACR,SAAS,EACT,cAAc,EACd,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,GACb,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CACX,UAAU,EACV,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC7D;gBACE,SAAS,EAAE,IAAI;aAChB,CACF,CAAA;QACH,CAAC;QACD,IAAI,YAAY,EAAE,CAAC;YACjB,aAAa,CAAC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE;gBAC7C,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACxC,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/ContractComponent/NFT/NFT.style.d.ts

@@ -0,0 +1 @@
+export declare const PreviewAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "sx" | "style" | "className" | "classes" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/ContractComponent/NFT/NFT.style.js

@@ -0,0 +1,8 @@
+import { Avatar, styled } from '@mui/material';
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.shape.borderRadius,
+}));
+//# sourceMappingURL=NFT.style.js.map

package/dist/esm/components/ContractComponent/NFT/NFT.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NFT.style.js","sourceRoot":"","sources":["../../../../../src/components/ContractComponent/NFT/NFT.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC1C,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;CACvC,CAAC,CAAC,CAAA"}

package/dist/esm/components/ContractComponent/NFT/NFTBase.d.ts

@@ -0,0 +1,2 @@
+import type { NFTProps } from './types.js';
+export declare const NFTBase: React.FC<NFTProps>;

package/dist/esm/components/ContractComponent/NFT/NFTBase.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Token } from '../../Token/Token.js';
+import { PreviewAvatar } from './NFT.style.js';
+export const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token, }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: {
+            p: 2,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                }, children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { sx: {
+                            ml: 2,
+                        }, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { sx: {
+                                    fontSize: 14,
+                                    color: 'text.secondary',
+                                }, children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { sx: {
+                                    fontSize: 18,
+                                    fontWeight: 600,
+                                }, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { sx: {
+                                    fontSize: 14,
+                                    color: 'text.secondary',
+                                }, children: [t('main.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+};
+//# sourceMappingURL=NFTBase.js.map

package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NFTBase.js","sourceRoot":"","sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAG9C,MAAM,CAAC,MAAM,OAAO,GAAuB,CAAC,EAC1C,QAAQ,EACR,SAAS,EACT,cAAc,EACd,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,MAAC,GAAG,IACF,EAAE,EAAE;YACF,CAAC,EAAE,CAAC;SACL,aAED,MAAC,GAAG,IACF,EAAE,EAAE;oBACF,OAAO,EAAE,MAAM;iBAChB,aAEA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IACP,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,aAAa,EACrB,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,GACvB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,GAAG,EAAE,QAAQ,GAAI,CACjC,EACD,MAAC,GAAG,IACF,EAAE,EAAE;4BACF,EAAE,EAAE,CAAC;yBACN,aAEA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,CACpD,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,EAAE,EAAE;oCACF,QAAQ,EAAE,EAAE;oCACZ,KAAK,EAAE,gBAAgB;iCACxB,YAEA,cAAc,GACJ,CACd,EACA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,CACpD,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,EAAE,EAAE;oCACF,QAAQ,EAAE,EAAE;oCACZ,UAAU,EAAE,GAAG;iCAChB,YAEA,SAAS,GACC,CACd,EACA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,CACpD,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CACV,MAAC,UAAU,IACT,EAAE,EAAE;oCACF,QAAQ,EAAE,EAAE;oCACZ,KAAK,EAAE,gBAAgB;iCACxB,aAEA,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,EACvB,KAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,MAAM,EAChB,KAAK,EAAC,SAAS,YAEd,KAAK,CAAC,IAAI,GACN,IACI,CACd,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAI,IAChD,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/ContractComponent/NFT/types.d.ts

@@ -0,0 +1,16 @@
+import type { ContractCall, TokenAmount } from '@openocean.finance/widget-sdk';
+export interface NFTBaseProps {
+    imageUrl?: string;
+    collectionName?: string;
+    assetName?: string;
+    isLoading?: boolean;
+    owner?: NFTOwner;
+    token: TokenAmount;
+}
+export interface NFTProps extends NFTBaseProps {
+    contractCall?: ContractCall;
+}
+export interface NFTOwner {
+    name?: string;
+    url?: string;
+}

package/dist/esm/components/ContractComponent/NFT/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/ContractComponent/NFT/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/ContractComponent/NFT/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/Dialog.d.ts

@@ -0,0 +1,19 @@
+import type { DialogProps, PaperProps } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+export declare const modalProps: {
+    sx: {
+        position: string;
+        overflow: string;
+    };
+};
+export declare const paperProps: Partial<PaperProps>;
+export declare const slotProps: {
+    backdrop: {
+        sx: {
+            position: string;
+            backgroundColor: string;
+            backdropFilter: string;
+        };
+    };
+};
+export declare const Dialog: React.FC<PropsWithChildren<DialogProps>>;

package/dist/esm/components/Dialog.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as MuiDialog } from '@mui/material';
+import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
+export const modalProps = {
+    sx: {
+        position: 'absolute',
+        overflow: 'hidden',
+    },
+};
+export const paperProps = {
+    sx: (theme) => ({
+        position: 'absolute',
+        backgroundImage: 'none',
+        backgroundColor: theme.palette.background.default,
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+    }),
+};
+export const slotProps = {
+    backdrop: {
+        sx: {
+            position: 'absolute',
+            backgroundColor: 'rgb(0 0 0 / 32%)',
+            backdropFilter: 'blur(3px)',
+        },
+    },
+};
+export const Dialog = ({ children, open, onClose, }) => {
+    const getContainer = useGetScrollableContainer();
+    return (_jsx(MuiDialog, { container: getContainer, open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, slotProps: slotProps, children: children }));
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAA;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB;IAC7C,EAAE,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;QACrB,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QACjD,mBAAmB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;QAC7C,oBAAoB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;KAC/C,CAAC;CACH,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,kBAAkB;YACnC,cAAc,EAAE,WAAW;SAC5B;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAA6C,CAAC,EAC/D,QAAQ,EACR,IAAI,EACJ,OAAO,GACR,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,yBAAyB,EAAE,CAAA;IAChD,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,UAAU,CAAC,EAAE,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/FeeBreakdownTooltip.d.ts

@@ -0,0 +1,11 @@
+import type { TFunction } from 'i18next';
+import type { ReactElement } from 'react';
+import type { FeesBreakdown } from '../utils/fees.js';
+export interface FeeBreakdownTooltipProps {
+    gasCosts?: FeesBreakdown[];
+    feeCosts?: FeesBreakdown[];
+    relayerSupport?: boolean;
+    children: ReactElement<any, any>;
+}
+export declare const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps>;
+export declare const getFeeBreakdownTypography: (fees: FeesBreakdown[], t: TFunction) => import("react/jsx-runtime").JSX.Element[];

package/dist/esm/components/FeeBreakdownTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatTokenAmount } from '../utils/format.js';
+export const FeeBreakdownTooltip = ({ gasCosts, feeCosts, relayerSupport, children, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: _jsxs(Box, { children: [relayerSupport ? _jsx(Box, { children: t('tooltip.relayerService') }) : null, gasCosts?.length && !relayerSupport ? (_jsxs(Box, { children: [t('main.fees.network'), getFeeBreakdownTypography(gasCosts, t)] })) : null, feeCosts?.length && !relayerSupport ? (_jsxs(Box, { sx: {
+                        mt: 0.5,
+                    }, children: [t('main.fees.provider'), getFeeBreakdownTypography(feeCosts, t)] })) : null] }), sx: { cursor: 'help' }, children: children }));
+};
+export const getFeeBreakdownTypography = (fees, t) => fees.map((fee, index) => (_jsxs(Typography, { color: "inherit", sx: {
+        fontSize: 12,
+        fontWeight: '500',
+    }, children: [t('format.currency', { value: fee.amountUSD }), " (", t('format.tokenAmount', {
+            value: formatTokenAmount(fee.amount, fee.token.decimals),
+        }), ' ', fee.token.symbol, ")"] }, `${fee.token.address}${index}`)));
+//# sourceMappingURL=FeeBreakdownTooltip.js.map

package/dist/esm/components/FeeBreakdownTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeeBreakdownTooltip.js","sourceRoot":"","sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAGxD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EACH,MAAC,GAAG,eACD,cAAc,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,CAAC,CAAC,wBAAwB,CAAC,GAAO,CAAC,CAAC,CAAC,IAAI,EAChE,QAAQ,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrC,MAAC,GAAG,eACD,CAAC,CAAC,mBAAmB,CAAC,EACtB,yBAAyB,CAAC,QAAQ,EAAE,CAAC,CAAC,IACnC,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrC,MAAC,GAAG,IACF,EAAE,EAAE;wBACF,EAAE,EAAE,GAAG;qBACR,aAEA,CAAC,CAAC,oBAAoB,CAAC,EACvB,yBAAyB,CAAC,QAAQ,EAAE,CAAC,CAAC,IACnC,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,EAER,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAErB,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,IAAqB,EACrB,CAAY,EACZ,EAAE,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACvB,MAAC,UAAU,IACT,KAAK,EAAC,SAAS,EAEf,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB,aAEA,CAAC,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC,QAC9C,CAAC,CAAC,oBAAoB,EAAE;YACvB,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;SACzD,CAAC,EAAE,GAAG,EACN,GAAG,CAAC,KAAK,CAAC,MAAM,UAVZ,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,EAAE,CAWxB,CACd,CAAC,CAAA"}

package/dist/esm/components/FullPageContainer.d.ts

@@ -0,0 +1,2 @@
+import type { PageContainerProps } from './PageContainer.js';
+export declare const FullPageContainer: import("@emotion/styled").StyledComponent<PageContainerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/FullPageContainer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+import { PageContainer } from './PageContainer.js';
+// In max height and default layout
+// the PageContainer collapses to use the minimum space need to display its child components whereas
+// the FullPageContainer expands and fills the available vertical space provide by the max-height
+// See the CssBaselineContainer component styles in AppContainer.tsx for usage of full-page-container
+export const FullPageContainer = styled((props) => (_jsx(PageContainer, { ...props, className: `${props.className} full-page-container` }))) ``;
+//# sourceMappingURL=FullPageContainer.js.map

package/dist/esm/components/FullPageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullPageContainer.js","sourceRoot":"","sources":["../../../src/components/FullPageContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,mCAAmC;AACnC,oGAAoG;AACpG,iGAAiG;AACjG,qGAAqG;AACrG,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,KAAyB,EAAE,EAAE,CAAC,CACrE,KAAC,aAAa,OACR,KAAK,EACT,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,sBAAsB,GACnD,CACH,CAAC,CAAA,EAAE,CAAA"}

package/dist/esm/components/Header/BackButton.d.ts

@@ -0,0 +1,2 @@
+import type { IconButtonProps } from '@mui/material';
+export declare const BackButton: React.FC<IconButtonProps>;

package/dist/esm/components/Header/BackButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowBack } from '@mui/icons-material';
+import { IconButton, useTheme } from '@mui/material';
+export const BackButton = ({ onClick }) => {
+    const theme = useTheme();
+    return (_jsx(IconButton, { size: "medium", edge: theme?.navigation?.edge ? 'start' : false, onClick: onClick, children: _jsx(ArrowBack, {}) }));
+};
+//# sourceMappingURL=BackButton.js.map

package/dist/esm/components/Header/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","sourceRoot":"","sources":["../../../../src/components/Header/BackButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEpD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAC/C,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/CloseDrawerButton.d.ts

@@ -0,0 +1,5 @@
+interface CloseDrawerButtonProps {
+    header?: 'navigation' | 'wallet';
+}
+export declare const CloseDrawerButton: ({ header }: CloseDrawerButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Header/CloseDrawerButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseRounded } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useDrawer } from '../../AppDrawerContext.js';
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+export const CloseDrawerButton = ({ header }) => {
+    const { t } = useTranslation();
+    const { subvariant } = useWidgetConfig();
+    const { closeDrawer } = useDrawer();
+    const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
+    const showInNavigationHeader = header === 'navigation' &&
+        (useExternalWalletProvidersOnly || subvariant === 'split');
+    const showInWalletHeader = header === 'wallet' && subvariant !== 'split';
+    return showInNavigationHeader || showInWalletHeader ? (_jsx(Tooltip, { title: t('button.close'), children: _jsx(IconButton, { size: "medium", onClick: closeDrawer, children: _jsx(CloseRounded, {}) }) })) : null;
+};
+//# sourceMappingURL=CloseDrawerButton.js.map

package/dist/esm/components/Header/CloseDrawerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseDrawerButton.js","sourceRoot":"","sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6DAA6D,CAAA;AACvG,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAMlF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAA0B,EAAE,EAAE;IACtE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAA;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAA;IACnC,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,EAAE,CAAA;IAEtE,MAAM,sBAAsB,GAC1B,MAAM,KAAK,YAAY;QACvB,CAAC,8BAA8B,IAAI,UAAU,KAAK,OAAO,CAAC,CAAA;IAE5D,MAAM,kBAAkB,GAAG,MAAM,KAAK,QAAQ,IAAI,UAAU,KAAK,OAAO,CAAA;IAExE,OAAO,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpD,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,YAC/B,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,YAC5C,KAAC,YAAY,KAAG,GACL,GACL,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/dist/esm/components/Header/DisconnectIconButton.d.ts

@@ -0,0 +1,4 @@
+import { type Account } from '@openocean.finance/wallet-management';
+export declare const DisconnectIconButton: ({ account }: {
+    account: Account;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Header/DisconnectIconButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useAccountDisconnect, } from '@openocean.finance/wallet-management';
+export const DisconnectIconButton = ({ account }) => {
+    const disconnect = useAccountDisconnect();
+    return (_jsx(IconButton, { size: "medium", onClick: async (e) => {
+            e.stopPropagation();
+            await disconnect(account);
+        }, children: _jsx(PowerSettingsNewRounded, {}) }));
+};
+//# sourceMappingURL=DisconnectIconButton.js.map

package/dist/esm/components/Header/DisconnectIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisconnectIconButton.js","sourceRoot":"","sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAEL,oBAAoB,GACrB,MAAM,sCAAsC,CAAA;AAE7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE;IACxE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAA;IACzC,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,MAAM,UAAU,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC,YAED,KAAC,uBAAuB,KAAG,GAChB,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const HeaderContainer: FC<PropsWithChildren>;
+export declare const Header: FC;

package/dist/esm/components/Header/Header.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
+import { Container } from './Header.style.js';
+import { NavigationHeader } from './NavigationHeader.js';
+import { WalletHeader } from './WalletHeader.js';
+export const HeaderContainer = ({ children }) => {
+    const { pathname } = useLocation();
+    const elementId = useDefaultElementId();
+    const headerRef = useRef(null);
+    const { setHeaderHeight } = useSetHeaderHeight();
+    useLayoutEffect(() => {
+        const handleHeaderResize = () => {
+            const height = headerRef.current?.getBoundingClientRect().height;
+            if (height) {
+                setHeaderHeight(height);
+            }
+        };
+        let resizeObserver;
+        if (headerRef.current) {
+            resizeObserver = new ResizeObserver(handleHeaderResize);
+            resizeObserver.observe(headerRef.current);
+        }
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [setHeaderHeight]);
+    return (_jsx(Container, { id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)), ref: headerRef, children: children }));
+};
+export const Header = () => {
+    return (_jsxs(HeaderContainer, { children: [_jsx(WalletHeader, {}), _jsx(NavigationHeader, {})] }));
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,eAAe,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAA;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,MAAM,CAAA;YAEhE,IAAI,MAAM,EAAE,CAAC;gBACX,eAAe,CAAC,MAAM,CAAC,CAAA;YACzB,CAAC;QACH,CAAC,CAAA;QAED,IAAI,cAA8B,CAAA;QAElC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAA;YACvD,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE,CAAC;gBACnB,cAAc,CAAC,UAAU,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,KAAC,SAAS,IACR,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,EAChD,MAAM,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EACpE,GAAG,EAAE,SAAS,YAEb,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAO,GAAG,EAAE;IAC7B,OAAO,CACL,MAAC,eAAe,eACd,KAAC,YAAY,KAAG,EAChB,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAA;AACH,CAAC,CAAA"}