npm - @lifi/widget - Versions diffs - 4.8.0 → 4.10.0 - Mend

@lifi/widget 4.8.0 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/README.md CHANGED Viewed

@@ -16,7 +16,7 @@
 [**LI.FI Widget**](https://docs.li.fi/widget/overview) features include:
-- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, Tron, and Stellar
+- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, Tron, and Stellar, plus Zcash as a destination
 - All ecosystems, chains, bridges, exchanges, and solvers that [LI.FI](https://docs.li.fi/introduction/chains) supports
 - Embeddable variants - compact, wide, and drawer
 - Options to allow or deny certain chains, tokens, bridges, and exchanges
@@ -179,6 +179,26 @@ npm install @lifi/widget-provider-stellar
 yarn add @lifi/widget-provider-stellar
 ```
+**Zcash (destination only):**
+**pnpm:**
+```sh
+pnpm add @lifi/widget-provider-zcash
+```
+**npm:**
+```sh
+npm install @lifi/widget-provider-zcash
+```
+**yarn:**
+```sh
+yarn add @lifi/widget-provider-zcash
+```
 **Note:** You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies.
 ### LI.FI Wallet Management
@@ -225,7 +245,7 @@ npm install @lifi/widget-light
 yarn add @lifi/widget-light
 ```
-Ecosystem handlers are available as subpath imports (`@lifi/widget-light/ethereum`, `@lifi/widget-light/solana`, `@lifi/widget-light/bitcoin`, `@lifi/widget-light/sui`, `@lifi/widget-light/tron`) — install the corresponding peer dependencies only for the chains you need. See the [widget-light integration guide](/packages/widget-embedded/README.md) for full setup instructions.
+Ecosystem handlers are available as subpath imports (`@lifi/widget-light/ethereum`, `@lifi/widget-light/solana`, `@lifi/widget-light/bitcoin`, `@lifi/widget-light/sui`, `@lifi/widget-light/tron`) — install the corresponding peer dependencies only for the chains you need. Zcash is not available in widget-light yet. See the [widget-light integration guide](/packages/widget-embedded/README.md) for full setup instructions.
 ## Architecture
@@ -239,6 +259,7 @@ The LI.FI Widget uses a **provider-based architecture** that allows you to selec
 - **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit))
 - **`@lifi/widget-provider-tron`** - Tron support (requires [@tronweb3/tronwallet-adapter-react-hooks](https://github.com/tronweb3/tronwallet-adapter))
 - **`@lifi/widget-provider-stellar`** - Stellar support (bundles [Stellar Wallets Kit](https://github.com/Creit-Tech/Stellar-Wallets-Kit); no extra install)
+- **`@lifi/widget-provider-zcash`** - Zcash as a destination chain: validates transparent (`t1`/`t3`) receivers and unified (`u1`) receivers that carry an Orchard receiver; no wallet connection and no extra install. Without it the widget offers no ZEC
 - **`@lifi/wallet-management`** - Wallet management UI components
 - **`@lifi/widget-light`** - Lightweight iframe-based integration ([docs](https://docs.li.fi/widget/widget-light-overview))
@@ -275,7 +296,7 @@ export const WidgetPage = () => {
 };
 ```
-**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, Tron, and Stellar):
+**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, Tron, and Stellar, plus Zcash as a destination):
 ```tsx
 import { LiFiWidget, WidgetConfig } from '@lifi/widget';
@@ -285,12 +306,14 @@ import { SolanaProvider } from '@lifi/widget-provider-solana';
 import { StellarProvider } from '@lifi/widget-provider-stellar';
 import { SuiProvider } from '@lifi/widget-provider-sui';
 import { TronProvider } from '@lifi/widget-provider-tron';
+import { ZcashProvider } from '@lifi/widget-provider-zcash';
 const widgetConfig: WidgetConfig = {
   providers: [
     EthereumProvider(),
     SolanaProvider(),
     BitcoinProvider(),
+    ZcashProvider(),
     SuiProvider(),
     TronProvider(),
     StellarProvider(),

package/dist/esm/components/AmountInputCard/AmountInputCardPair.js CHANGED Viewed

@@ -1,4 +1,6 @@
+import { isDestinationAllowedAsSource } from "../../utils/chainType.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { CardContainer } from "./AmountInputCard.style.js";
 import { LimitPriceCard } from "../LimitPriceCard/LimitPriceCard.js";
 import { SwapButton } from "../SwapButton/SwapButton.js";
@@ -7,8 +9,9 @@ import { SendAmountCard } from "./SendAmountCard.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AmountInputCard/AmountInputCardPair.tsx
 const AmountInputCardPair = (props) => {
-	const { mode } = useWidgetConfig();
-	const showSwapButton = mode !== "refuel";
+	const { mode, chains } = useWidgetConfig();
+	const [toChainId] = useFieldValues("toChain");
+	const showSwapButton = mode !== "refuel" && isDestinationAllowedAsSource(toChainId, chains);
 	return /* @__PURE__ */ jsxs(CardContainer, {
 		...props,
 		children: [

package/dist/esm/components/AmountInputCard/AmountInputCardPair.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountInputCardPair.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCardPair.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'\nimport { SwapButton } from '../SwapButton/SwapButton.js'\nimport { CardContainer } from './AmountInputCard.style.js'\nimport { ReceiveAmountCard } from './ReceiveAmountCard.js'\nimport { SendAmountCard } from './SendAmountCard.js'\n\nexport const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {\n // Refuel's destination is fixed to native gas, so reversing from/to is\n // meaningless — hide the swap button (and the notch mask it sits in).\n const { mode } = useWidgetConfig()\n const ~~showSwapButton~~ = mode !== 'refuel'\n\n return (\n <CardContainer {...props}>\n {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}\n <SendAmountCard mask={showSwapButton} />\n <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />\n <ReceiveAmountCard mask={showSwapButton} />\n </CardContainer>\n )\n}\n"],"mappings":"~~;;;;;;;;AAUA~~,MAAa,uBAA2C,UAAuB;CAG7E,MAAM,EAAE,~~SAAS~~,gBAAgB;~~CACjC~~,MAAM,~~iBAAiB~~,SAAS;~~CAEhC~~,OACE,qBAAC,eAAD;EAAe,GAAI;EAAnB,UAAA;GACG,SAAS,UAAU,oBAAC,gBAAD,EAAgB,IAAI,EAAE,cAAc,EAAE,EAAI,CAAA,IAAI;GAClE,oBAAC,gBAAD,EAAgB,MAAM,eAAiB,CAAA;GACvC,oBAAC,YAAD,EAAY,IAAI,EAAE,YAAY,iBAAiB,YAAY,SAAS,EAAI,CAAA;GACxE,oBAAC,mBAAD,EAAmB,MAAM,eAAiB,CAAA;EAC7B;;AAEnB"}
1	+ {"version":3,"file":"AmountInputCardPair.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCardPair.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { isDestinationAllowedAsSource } from '../../utils/chainType.js'\nimport { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'\nimport { SwapButton } from '../SwapButton/SwapButton.js'\nimport { CardContainer } from './AmountInputCard.style.js'\nimport { ReceiveAmountCard } from './ReceiveAmountCard.js'\nimport { SendAmountCard } from './SendAmountCard.js'\n\nexport const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {\n // Refuel's destination is fixed to native gas, so reversing from/to is\n // meaningless — hide the swap button (and the notch mask it sits in).\n const { mode, chains } = useWidgetConfig()\n const [toChainId] = useFieldValues('toChain')\n const showSwapButton =\n mode !== 'refuel' && isDestinationAllowedAsSource(toChainId, chains)\n\n return (\n <CardContainer {...props}>\n {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}\n <SendAmountCard mask={showSwapButton} />\n <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />\n <ReceiveAmountCard mask={showSwapButton} />\n </CardContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAa,uBAA2C,UAAuB;CAG7E,MAAM,EAAE,MAAM,WAAW,gBAAgB;CACzC,MAAM,CAAC,aAAa,eAAe,SAAS;CAC5C,MAAM,iBACJ,SAAS,YAAY,6BAA6B,WAAW,MAAM;CAErE,OACE,qBAAC,eAAD;EAAe,GAAI;EAAnB,UAAA;GACG,SAAS,UAAU,oBAAC,gBAAD,EAAgB,IAAI,EAAE,cAAc,EAAE,EAAI,CAAA,IAAI;GAClE,oBAAC,gBAAD,EAAgB,MAAM,eAAiB,CAAA;GACvC,oBAAC,YAAD,EAAY,IAAI,EAAE,YAAY,iBAAiB,YAAY,SAAS,EAAI,CAAA;GACxE,oBAAC,mBAAD,EAAmB,MAAM,eAAiB,CAAA;EAC7B;;AAEnB"}

package/dist/esm/components/SelectChainAndToken.js CHANGED Viewed

@@ -1,4 +1,6 @@
+import { isDestinationAllowedAsSource } from "../utils/chainType.js";
 import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../stores/form/useFieldValues.js";
 import { ReverseTokensButtonEmpty } from "./ReverseTokensButton/ReverseTokensButton.style.js";
 import { ReverseTokensButton } from "./ReverseTokensButton/ReverseTokensButton.js";
 import { SelectTokenButton } from "./SelectTokenButton/SelectTokenButton.js";
@@ -6,8 +8,9 @@ import { Box } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectChainAndToken.tsx
 const SelectChainAndToken = (props) => {
-	const { disabledUI, hiddenUI, mode } = useWidgetConfig();
-	const hiddenReverse = mode === "refuel" || disabledUI?.fromToken || disabledUI?.toToken || hiddenUI?.fromToken || hiddenUI?.toToken || hiddenUI?.reverseTokensButton;
+	const { disabledUI, hiddenUI, mode, chains } = useWidgetConfig();
+	const [toChainId] = useFieldValues("toChain");
+	const hiddenReverse = mode === "refuel" || !isDestinationAllowedAsSource(toChainId, chains) || disabledUI?.fromToken || disabledUI?.toToken || hiddenUI?.fromToken || hiddenUI?.toToken || hiddenUI?.reverseTokensButton;
 	const hiddenFromToken = hiddenUI?.fromToken;
 	const hiddenToToken = mode === "custom" || hiddenUI?.toToken;
 	const showReverseButton = !hiddenToToken && !hiddenFromToken;

package/dist/esm/components/SelectChainAndToken.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n const hiddenReverse =\n mode === 'refuel' \|\|\n disabledUI?.fromToken \|\|\n disabledUI?.toToken \|\|\n hiddenUI?.fromToken \|\|\n hiddenUI?.toToken \|\|\n hiddenUI?.reverseTokensButton\n\n const hiddenFromToken = hiddenUI?.fromToken\n const hiddenToToken = mode === 'custom' \|\| hiddenUI?.toToken\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":"~~;;;;;;;AAOA~~,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,~~SAAS~~,gBAAgB;~~CAEvD~~,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;EAAnD,UAAA;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}
1	+ {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\nimport { isDestinationAllowedAsSource } from '../utils/chainType.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, mode, chains } = useWidgetConfig()\n const [toChainId] = useFieldValues('toChain')\n\n const hiddenReverse =\n mode === 'refuel' \|\|\n !isDestinationAllowedAsSource(toChainId, chains) \|\|\n disabledUI?.fromToken \|\|\n disabledUI?.toToken \|\|\n hiddenUI?.fromToken \|\|\n hiddenUI?.toToken \|\|\n hiddenUI?.reverseTokensButton\n\n const hiddenFromToken = hiddenUI?.fromToken\n const hiddenToToken = mode === 'custom' \|\| hiddenUI?.toToken\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,MAAM,WAAW,gBAAgB;CAC/D,MAAM,CAAC,aAAa,eAAe,SAAS;CAE5C,MAAM,gBACJ,SAAS,YACT,CAAC,6BAA6B,WAAW,MAAM,KAC/C,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;EAAnD,UAAA;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}

package/dist/esm/components/SendToWallet/SendToWalletButton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { defaultChainIdsByType } from "../../utils/chainType.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
@@ -5,7 +6,6 @@ import { useBookmarks } from "../../stores/bookmarks/useBookmarks.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { Card as Card$1 } from "../Card/Card.js";
-import { defaultChainIdsByType } from "../../utils/chainType.js";
 import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
 import { shortenAddress } from "../../utils/wallet.js";
@@ -31,14 +31,15 @@ const SendToWalletButton = ({ onEditAddress, onClearAddress, requireAddress, ...
 	const { selectedBookmark } = useBookmarks();
 	const { setSelectedBookmark } = useBookmarkActions();
 	const { accounts } = useAccount();
-	const { getChainTypeFromAddress } = useChainTypeFromAddress();
+	const { getChainFromAddress } = useChainTypeFromAddress();
 	const { requiredToAddress } = useToAddressRequirements();
 	const disabledToAddress = disabledUI?.toAddress;
 	const hiddenToAddress = hiddenUI?.toAddress;
 	const address = toAddressFieldValue ? shortenAddress(toAddressFieldValue) : t("sendToWallet.enterAddress", { context: "short" });
 	const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
-	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || (toAddressFieldValue ? getChainTypeFromAddress(toAddressFieldValue) : void 0) : void 0;
-	const chainId = toChainId && toTokenAddress ? toChainId : matchingConnectedAccount ? matchingConnectedAccount.chainId : chainType ? defaultChainIdsByType[chainType] : void 0;
+	const detectedChain = !matchingConnectedAccount && selectedBookmark?.chainId === void 0 && toAddressFieldValue ? getChainFromAddress(toAddressFieldValue) : void 0;
+	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || detectedChain?.chainType : void 0;
+	const chainId = toChainId && toTokenAddress ? toChainId : matchingConnectedAccount ? matchingConnectedAccount.chainId : selectedBookmark?.chainId ?? detectedChain?.chainId ?? (chainType ? defaultChainIdsByType[chainType] : void 0);
 	const isConnectedAccount = selectedBookmark?.isConnectedAccount && matchingConnectedAccount?.isConnected;
 	const connectedAccountName = matchingConnectedAccount?.connector?.name;
 	const bookmarkName = selectedBookmark?.name;

package/dist/esm/components/SendToWallet/SendToWalletButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<\n CardProps & {\n onEditAddress?: (() => void) \| null\n onClearAddress?: () => void\n // Keep the card visible (and flag it required when empty) even when the\n // widget's own toAddress requirement is off, e.g. a user-settable checkout\n // recipient that must be filled before continuing.\n requireAddress?: boolean\n }\n> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainTypeFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.toAddress\n const hiddenToAddress = hiddenUI?.toAddress\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\|\n (toAddressFieldValue\n ? getChainTypeFromAddress(toAddressFieldValue)\n : undefined)\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : chainType\n ? defaultChainIdsByType[chainType]\n : undefined\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n // `onEditAddress === null` renders the card read-only (consumer-controlled,\n // e.g. a fixed checkout recipient); a function overrides the default route nav.\n const readOnly = onEditAddress === null \|\| disabledForChanges\n\n const handleOnClick = () => {\n if (onEditAddress !== undefined) {\n onEditAddress?.()\n return\n }\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n if (onClearAddress) {\n onClearAddress()\n return\n }\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const addressRequired = requireAddress \|\| requiredToAddress\n const isOpenCollapse =\n !hiddenToAddress && (addressRequired \|\| !!toAddressFieldValue)\n\n const title =\n mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={readOnly ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {addressRequired && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n toAddressFieldValue && !readOnly ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n SendToWalletCardHeader,\n SendToWalletCardTitleRow,\n SendToWalletRequiredLabel,\n SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<\n CardProps & {\n onEditAddress?: (() => void) \| null\n onClearAddress?: () => void\n // Keep the card visible (and flag it required when empty) even when the\n // widget's own toAddress requirement is off, e.g. a user-settable checkout\n // recipient that must be filled before continuing.\n requireAddress?: boolean\n }\n> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n useWidgetConfig()\n const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n 'toAddress',\n 'toChain',\n 'toToken'\n )\n const { setFieldValue } = useFieldActions()\n const { selectedBookmark } = useBookmarks()\n const { setSelectedBookmark } = useBookmarkActions()\n const { accounts } = useAccount()\n const { getChainFromAddress } = useChainTypeFromAddress()\n const { requiredToAddress } = useToAddressRequirements()\n const disabledToAddress = disabledUI?.toAddress\n const hiddenToAddress = hiddenUI?.toAddress\n\n const address = toAddressFieldValue\n ? shortenAddress(toAddressFieldValue)\n : t('sendToWallet.enterAddress', {\n context: 'short',\n })\n\n const matchingConnectedAccount = accounts.find(\n (account) => account.address === toAddressFieldValue\n )\n\n // A bookmark from the config or the URL may carry no chainId.\n const detectedChain =\n !matchingConnectedAccount &&\n selectedBookmark?.chainId === undefined &&\n toAddressFieldValue\n ? getChainFromAddress(toAddressFieldValue)\n : undefined\n\n const chainType = !matchingConnectedAccount\n ? selectedBookmark?.chainType \|\| detectedChain?.chainType\n : undefined\n\n const chainId =\n toChainId && toTokenAddress\n ? toChainId\n : matchingConnectedAccount\n ? matchingConnectedAccount.chainId\n : (selectedBookmark?.chainId ??\n detectedChain?.chainId ??\n (chainType ? defaultChainIdsByType[chainType] : undefined))\n\n const isConnectedAccount =\n selectedBookmark?.isConnectedAccount &&\n matchingConnectedAccount?.isConnected\n const connectedAccountName = matchingConnectedAccount?.connector?.name\n const bookmarkName = selectedBookmark?.name\n\n const headerTitle = isConnectedAccount\n ? connectedAccountName \|\| address\n : bookmarkName \|\| connectedAccountName \|\| address\n\n const headerSubheader =\n isConnectedAccount \|\| bookmarkName \|\| connectedAccountName ? address : null\n\n const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n // `onEditAddress === null` renders the card read-only (consumer-controlled,\n // e.g. a fixed checkout recipient); a function overrides the default route nav.\n const readOnly = onEditAddress === null \|\| disabledForChanges\n\n const handleOnClick = () => {\n if (onEditAddress !== undefined) {\n onEditAddress?.()\n return\n }\n navigate({\n to: toAddresses?.length\n ? navigationRoutes.configuredWallets\n : navigationRoutes.sendToWallet,\n })\n }\n\n const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n if (onClearAddress) {\n onClearAddress()\n return\n }\n setFieldValue('toAddress', '', { isTouched: true })\n setSelectedBookmark()\n }\n\n // The collapse opens instantly on first page load/component mount when there is an address to display\n // After which it needs an animated transition for open and closing.\n // collapseTransitionTime is used specify the transition time for opening and closing\n const collapseTransitionTime = useRef(0)\n\n // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n useEffect(() => {\n const timeout = setTimeout(() => {\n collapseTransitionTime.current = 225\n }, 0)\n return () => clearTimeout(timeout)\n }, [])\n\n const addressRequired = requireAddress \|\| requiredToAddress\n const isOpenCollapse =\n !hiddenToAddress && (addressRequired \|\| !!toAddressFieldValue)\n\n const title =\n mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n ? t('header.depositTo')\n : t('header.sendToWallet')\n\n return (\n <Collapse\n timeout={collapseTransitionTime.current as number}\n in={isOpenCollapse}\n mountOnEnter\n unmountOnExit\n >\n <Card\n role=\"button\"\n onClick={readOnly ? undefined : handleOnClick}\n sx={{ width: '100%', ...props.sx }}\n >\n <SendToWalletCardTitleRow>\n <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n {addressRequired && !toAddressFieldValue ? (\n <SendToWalletRequiredLabel variant=\"warning\">\n <WarningRounded sx={{ fontSize: 14 }} />\n <SendToWalletRequiredLabelText type=\"icon\">\n {t('sendToWallet.required')}\n </SendToWalletRequiredLabelText>\n </SendToWalletRequiredLabel>\n ) : null}\n </SendToWalletCardTitleRow>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <SendToWalletCardHeader\n avatar={\n <AccountAvatar\n chainId={chainId}\n account={matchingConnectedAccount}\n toAddress={toAddress}\n empty={!toAddressFieldValue}\n />\n }\n title={headerTitle}\n subheader={headerSubheader}\n selected={!!toAddressFieldValue \|\| disabledToAddress}\n action={\n toAddressFieldValue && !readOnly ? (\n <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n <CloseRounded fontSize=\"inherit\" />\n </CardIconButton>\n ) : null\n }\n />\n </Box>\n </Card>\n </Collapse>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenDetailsSheet.js CHANGED Viewed

@@ -5,15 +5,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/TokenList/TokenDetailsSheet.tsx
 const TokenDetailsSheet = ({ ref }) => {
 	const bottomSheetRef = useRef(null);
-	const [tokenAddress, setTokenAddress] = useState(void 0);
-	const [chainId, setChainId] = useState(void 0);
+	const [listToken, setListToken] = useState(void 0);
 	const [withoutContractAddress, setWithoutContractAddress] = useState(false);
 	useImperativeHandle(ref, () => ({
 		isOpen: () => bottomSheetRef.current?.isOpen(),
-		open: (address, noContractAddress, chainId) => {
-			setTokenAddress(address);
+		open: (token, noContractAddress) => {
+			setListToken(token);
 			setWithoutContractAddress(noContractAddress);
-			setChainId(chainId);
 			bottomSheetRef.current?.open();
 		},
 		close: () => {
@@ -25,9 +23,8 @@ const TokenDetailsSheet = ({ ref }) => {
 		keepMounted: true,
 		children: /* @__PURE__ */ jsx(TokenDetailsSheetContent, {
 			onClose: () => bottomSheetRef.current?.close(),
-			tokenAddress,
-			withoutContractAddress,
-			chainId
+			listToken,
+			withoutContractAddress
 		})
 	});
 };

package/dist/esm/components/TokenList/TokenDetailsSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n ref,\n}: {\n ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const [~~tokenAddress~~, ~~setTokenAddress~~] = useState<~~string~~ \| undefined>(\n undefined\n )\n const [~~chainId, setChainId] = useState<number \| undefined>(undefined)\n const [~~withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (~~address~~: ~~string~~, noContractAddress: boolean~~, chainId: number~~) => {\n ~~setTokenAddress~~(~~address~~)\n setWithoutContractAddress(noContractAddress)\n ~~setChainId(chainId)\n~~ bottomSheetRef.current?.open()\n },\n close: () => {\n bottomSheetRef.current?.close()\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} keepMounted>\n <TokenDetailsSheetContent\n onClose={() => bottomSheetRef.current?.close()}\n ~~tokenAddress~~={~~tokenAddress~~}\n withoutContractAddress={withoutContractAddress}\n ~~chainId={chainId}\n~~ />\n </BottomSheet>\n )\n}\n"],"mappings":";;;;;~~AAOA~~,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,~~cAAc~~,~~mBAAmB~~,~~SACtC~~,KAAA,~~CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,~~CAAS;~~CACpE~~,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,~~SAAiB~~,~~mBAA4B,YAAoB~~;~~GACtE~~,~~gBAAgB~~,~~OAAO~~;~~GACvB~~,0BAA0B,iBAAiB;GAC3C,~~WAAW,OAAO;GAClB,~~eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;EAChC,UAAA,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;~~GAC/B~~;~~GACU~~;~~GACf;EACV~~,CAAA;CACU,CAAA;AAEjB"}
1	+ {"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport type { TokenAmount } from '../../types/token.js'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n ref,\n}: {\n ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const [listToken, setListToken] = useState<TokenAmount \| undefined>(undefined)\n const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (token: TokenAmount, noContractAddress: boolean) => {\n setListToken(token)\n setWithoutContractAddress(noContractAddress)\n bottomSheetRef.current?.open()\n },\n close: () => {\n bottomSheetRef.current?.close()\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} keepMounted>\n <TokenDetailsSheetContent\n onClose={() => bottomSheetRef.current?.close()}\n listToken={listToken}\n withoutContractAddress={withoutContractAddress}\n />\n </BottomSheet>\n )\n}\n"],"mappings":";;;;;AAQA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,WAAW,gBAAgB,SAAkC,KAAA,CAAS;CAC7E,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,OAAoB,sBAA+B;GACxD,aAAa,KAAK;GAClB,0BAA0B,iBAAiB;GAC3C,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;EAChC,UAAA,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAClC;GACa;EACzB,CAAA;CACU,CAAA;AAEjB"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js CHANGED Viewed

@@ -1,10 +1,12 @@
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { getTokenStatusTextKey, getTokenVerificationBadge } from "../../utils/token.js";
 import { useToken } from "../../hooks/useToken.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
 import { TokenAvatar } from "../Avatar/TokenAvatar.js";
 import { shortenAddress } from "../../utils/wallet.js";
 import { useExplorer } from "../../hooks/useExplorer.js";
 import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader } from "./TokenDetailsSheetContent.style.js";
+import { tokenVerificationIcons } from "./tokenVerificationIcons.js";
 import { useMemo } from "react";
 import { Box, IconButton, Link, Skeleton, Typography } from "@mui/material";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -14,12 +16,17 @@ import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
 import Close from "@mui/icons-material/Close";
 //#region src/components/TokenList/TokenDetailsSheetContent.tsx
 const noDataLabel = "-";
-const TokenDetailsSheetContent = ({ tokenAddress, chainId, withoutContractAddress, onClose }) => {
+const TokenDetailsSheetContent = ({ listToken, withoutContractAddress, onClose }) => {
 	const { t } = useTranslation();
 	const { getAddressLink } = useExplorer();
 	const { getChainById } = useAvailableChains();
+	const tokenAddress = listToken?.address;
+	const chainId = listToken?.chainId;
 	const { token, isLoading } = useToken(chainId, tokenAddress, true);
 	const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
+	const statusBadge = listToken ? getTokenVerificationBadge(listToken) : void 0;
+	const statusIcon = statusBadge ? tokenVerificationIcons[statusBadge] : void 0;
+	const statusText = listToken ? t(getTokenStatusTextKey(listToken)) : noDataLabel;
 	const copyContractAddress = async (e) => {
 		e.stopPropagation();
 		try {
@@ -161,7 +168,28 @@ const TokenDetailsSheetContent = ({ tokenAddress, chainId, withoutContractAddres
 					maximumFractionDigits: 2
 				}) : noDataLabel
 			})
-		})
+		}),
+		/* @__PURE__ */ jsxs(MetricContainer, { children: [/* @__PURE__ */ jsx(Label, { children: t("tokenMetric.status") }), /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [statusIcon ? /* @__PURE__ */ jsx(statusIcon.Icon, { sx: {
+				flexShrink: 0,
+				fontSize: 20,
+				color: statusIcon.color
+			} }) : null, /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					minWidth: 0,
+					fontWeight: 500,
+					fontSize: "14px",
+					lineHeight: "20px",
+					color: "text.primary"
+				},
+				children: statusText
+			})]
+		})] })
 	] });
 };
 const MetricWithSkeleton = ({ label, width, height, isLoading, children }) => {

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n Label,\n MetricContainer,\n TokenDetailsSheetContainer,\n TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\n\ninterface TokenDetailsSheetContentProps {\n tokenAddress: string \| undefined\n chainId: number \| undefined\n withoutContractAddress: boolean\n onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n tokenAddress,\n chainId,\n withoutContractAddress,\n onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const { getChainById } = useAvailableChains()\n\n const { token, isLoading } = useToken(chainId, tokenAddress, true)\n const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n const copyContractAddress = async (e: React.MouseEvent) => {\n e.stopPropagation()\n try {\n // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n await navigator.clipboard.writeText(tokenAddress \|\| '')\n } catch {\n // Silently fail to avoid crashing the UI if clipboard write fails\n }\n }\n\n return (\n <TokenDetailsSheetContainer>\n <TokenDetailsSheetHeader>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 3,\n }}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n tokenAvatarSize={72}\n chainAvatarSize={28}\n isLoading={isLoading}\n />\n <MetricContainer>\n {isLoading ? (\n <>\n <Skeleton variant=\"rounded\" width={80} height={24} />\n <Skeleton variant=\"rounded\" width={80} height={16} />\n </>\n ) : (\n <>\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '24px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.symbol \|\| noDataLabel}\n </Typography>\n <Label>{token?.name \|\| noDataLabel}</Label>\n </>\n )}\n </MetricContainer>\n </Box>\n <IconButton\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n sx={{ mt: '-8px', mr: '-8px' }}\n >\n <Close />\n </IconButton>\n </TokenDetailsSheetHeader>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.currentPrice')}\n width={200}\n height={40}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '32px',\n lineHeight: '40px',\n color: 'text.primary',\n }}\n >\n {token?.priceUSD\n ? t('format.currency', {\n value: token.priceUSD,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n {!withoutContractAddress && (\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.contractAddress')}\n width={200}\n height={24}\n >\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 1,\n }}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {shortenAddress(tokenAddress)}\n </Typography>\n {tokenAddress && (\n <CardIconButton size=\"small\" onClick={copyContractAddress}>\n <ContentCopyRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n {tokenAddress && (\n <CardIconButton\n size=\"small\"\n LinkComponent={Link}\n href={getAddressLink(tokenAddress, chainId)}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n <OpenInNewRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n </Box>\n </MetricWithSkeleton>\n )}\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.marketCap')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.marketCapUSD\n ? t('format.currency', {\n value: token.marketCapUSD,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.volume24h')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.volumeUSD24H\n ? t('format.currency', {\n value: token.volumeUSD24H,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n </TokenDetailsSheetContainer>\n )\n}\n\ninterface MetricWithSkeletonProps {\n label: string\n isLoading: boolean\n width: number\n height: number\n}\n\nconst MetricWithSkeleton = ({\n label,\n width,\n height,\n isLoading,\n children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n return (\n <MetricContainer>\n <Label>{label}</Label>\n {isLoading ? (\n <Skeleton variant=\"rounded\" width={width} height={height} />\n ) : (\n children\n )}\n </MetricContainer>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport {\n getTokenStatusTextKey,\n getTokenVerificationBadge,\n} from '../../utils/token.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n Label,\n MetricContainer,\n TokenDetailsSheetContainer,\n TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\nimport { tokenVerificationIcons } from './tokenVerificationIcons.js'\n\ninterface TokenDetailsSheetContentProps {\n listToken: TokenAmount \| undefined\n withoutContractAddress: boolean\n onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n listToken,\n withoutContractAddress,\n onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const { getChainById } = useAvailableChains()\n\n const tokenAddress = listToken?.address\n const chainId = listToken?.chainId\n const { token, isLoading } = useToken(chainId, tokenAddress, true)\n const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n // The row token, not the fetched one: only the list sets the flags.\n const statusBadge = listToken\n ? getTokenVerificationBadge(listToken)\n : undefined\n const statusIcon = statusBadge\n ? tokenVerificationIcons[statusBadge]\n : undefined\n const statusText = listToken\n ? t(getTokenStatusTextKey(listToken))\n : noDataLabel\n\n const copyContractAddress = async (e: React.MouseEvent) => {\n e.stopPropagation()\n try {\n // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n await navigator.clipboard.writeText(tokenAddress \|\| '')\n } catch {\n // Silently fail to avoid crashing the UI if clipboard write fails\n }\n }\n\n return (\n <TokenDetailsSheetContainer>\n <TokenDetailsSheetHeader>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 3,\n }}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n tokenAvatarSize={72}\n chainAvatarSize={28}\n isLoading={isLoading}\n />\n <MetricContainer>\n {isLoading ? (\n <>\n <Skeleton variant=\"rounded\" width={80} height={24} />\n <Skeleton variant=\"rounded\" width={80} height={16} />\n </>\n ) : (\n <>\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '24px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.symbol \|\| noDataLabel}\n </Typography>\n <Label>{token?.name \|\| noDataLabel}</Label>\n </>\n )}\n </MetricContainer>\n </Box>\n <IconButton\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n sx={{ mt: '-8px', mr: '-8px' }}\n >\n <Close />\n </IconButton>\n </TokenDetailsSheetHeader>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.currentPrice')}\n width={200}\n height={40}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '32px',\n lineHeight: '40px',\n color: 'text.primary',\n }}\n >\n {token?.priceUSD\n ? t('format.currency', {\n value: token.priceUSD,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n {!withoutContractAddress && (\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.contractAddress')}\n width={200}\n height={24}\n >\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 1,\n }}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {shortenAddress(tokenAddress)}\n </Typography>\n {tokenAddress && (\n <CardIconButton size=\"small\" onClick={copyContractAddress}>\n <ContentCopyRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n {tokenAddress && (\n <CardIconButton\n size=\"small\"\n LinkComponent={Link}\n href={getAddressLink(tokenAddress, chainId)}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n <OpenInNewRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n </Box>\n </MetricWithSkeleton>\n )}\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.marketCap')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.marketCapUSD\n ? t('format.currency', {\n value: token.marketCapUSD,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.volume24h')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.volumeUSD24H\n ? t('format.currency', {\n value: token.volumeUSD24H,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n <MetricContainer>\n <Label>{t('tokenMetric.status')}</Label>\n <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>\n {statusIcon ? (\n <statusIcon.Icon\n sx={{\n flexShrink: 0,\n fontSize: 20,\n color: statusIcon.color,\n }}\n />\n ) : null}\n <Typography\n sx={{\n minWidth: 0,\n fontWeight: 500,\n fontSize: '14px',\n lineHeight: '20px',\n color: 'text.primary',\n }}\n >\n {statusText}\n </Typography>\n </Box>\n </MetricContainer>\n </TokenDetailsSheetContainer>\n )\n}\n\ninterface MetricWithSkeletonProps {\n label: string\n isLoading: boolean\n width: number\n height: number\n}\n\nconst MetricWithSkeleton = ({\n label,\n width,\n height,\n isLoading,\n children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n return (\n <MetricContainer>\n <Label>{label}</Label>\n {isLoading ? (\n <Skeleton variant=\"rounded\" width={width} height={height} />\n ) : (\n children\n )}\n </MetricContainer>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenListItem.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
-import { getTokenVerificationProvider } from "../../utils/token.js";
+import { getTokenVerificationBadge, getTokenVerificationProvider } from "../../utils/token.js";
 import { TokenAvatar } from "../Avatar/TokenAvatar.js";
 import { shortenAddress } from "../../utils/wallet.js";
+import { tokenVerificationIcons } from "./tokenVerificationIcons.js";
 import { IconButton as IconButton$1, ListItem as ListItem$1 } from "./TokenList.style.js";
 import { useLongPress } from "../../hooks/useLongPress.js";
 import { ListItemButton as ListItemButton$1 } from "../ListItem/ListItemButton.js";
@@ -13,8 +14,6 @@ import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Slide, Tooltip, Ty
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import ReportRoundedIcon from "@mui/icons-material/ReportRounded";
-import VerifiedIcon from "@mui/icons-material/Verified";
 //#region src/components/TokenList/TokenListItem.tsx
 const TokenListItem = memo(({ onClick, size, start, token, chain, chainName, isBalanceLoading, startAdornment, endAdornment, selected, onShowTokenDetails }) => {
 	return /* @__PURE__ */ jsxs(ListItem$1, {
@@ -48,14 +47,14 @@ const TokenListItemAvatar = memo(({ token }) => {
 		children: token.symbol?.[0]
 	});
 });
-const OpenTokenDetailsButton = ({ tokenAddress, withoutContractAddress, chainId, onClick }) => {
-	if (!tokenAddress) return null;
+const OpenTokenDetailsButton = ({ token, withoutContractAddress, onClick }) => {
+	if (!token.address) return null;
 	return /* @__PURE__ */ jsx(IconButton$1, {
 		size: "small",
 		onClick: (e) => {
 			e.stopPropagation();
 			e.currentTarget.blur();
-			onClick(tokenAddress, withoutContractAddress, chainId);
+			onClick(token, withoutContractAddress);
 		},
 		children: /* @__PURE__ */ jsx(InfoOutlined, {})
 	});
@@ -85,41 +84,33 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 		token.priceUSD,
 		token.decimals
 	]);
-	const longPressEvents = useLongPress(() => onShowTokenDetails(token.address, withoutContractAddress, token.chainId));
-	let verificationBadge;
-	if (token.native) verificationBadge = {
-		Icon: VerifiedIcon,
-		color: "info.main",
-		title: chainName ? t("tooltip.tokenNativeOnChain", {
-			tokenSymbol: token.symbol,
-			chainName
-		}) : t("tooltip.tokenNative", { tokenSymbol: token.symbol })
-	};
-	else if (token.verificationStatus === "flagged") verificationBadge = {
-		Icon: ReportRoundedIcon,
-		color: "error.main",
-		title: t("warning.message.tokenFlagged", { tokenSymbol: token.symbol })
-	};
-	else if (token.verificationStatus === "verified") {
-		const provider = getTokenVerificationProvider(token);
-		verificationBadge = {
-			Icon: VerifiedIcon,
-			color: "success.main",
-			title: provider ? t("tooltip.tokenVerifiedByProvider", {
+	const longPressEvents = useLongPress(() => onShowTokenDetails(token, withoutContractAddress));
+	const verificationBadge = getTokenVerificationBadge(token);
+	const verificationIcon = verificationBadge ? tokenVerificationIcons[verificationBadge] : void 0;
+	let verificationTitle = "";
+	switch (verificationBadge) {
+		case "native":
+			verificationTitle = chainName ? t("tooltip.tokenNativeOnChain", {
+				tokenSymbol: token.symbol,
+				chainName
+			}) : t("tooltip.tokenNative", { tokenSymbol: token.symbol });
+			break;
+		case "flagged":
+			verificationTitle = t("warning.message.tokenFlagged", { tokenSymbol: token.symbol });
+			break;
+		case "verified": {
+			const provider = getTokenVerificationProvider(token);
+			verificationTitle = provider ? t("tooltip.tokenVerifiedByProvider", {
 				tokenSymbol: token.symbol,
 				provider
-			}) : t("tooltip.tokenVerified", { tokenSymbol: token.symbol })
-		};
-	} else if (token.verificationStatus === "unverified" && !token.listed && !token.verified) verificationBadge = {
-		Icon: ReportRoundedIcon,
-		color: "warning.main",
-		title: t("warning.message.tokenUnverifiedByProvider", { tokenSymbol: token.symbol })
-	};
-	else if (!token.verificationStatus && !token.listed && !token.verified) verificationBadge = {
-		Icon: ReportRoundedIcon,
-		color: "warning.main",
-		title: t("warning.message.tokenUnverified")
-	};
+			}) : t("tooltip.tokenVerified", { tokenSymbol: token.symbol });
+			break;
+		}
+		case "unverifiedByProvider":
+			verificationTitle = t("warning.message.tokenUnverifiedByProvider", { tokenSymbol: token.symbol });
+			break;
+		case "unverified": verificationTitle = t("warning.message.tokenUnverified");
+	}
 	return /* @__PURE__ */ jsxs(ListItemButton$1, {
 		onClick: handleClick,
 		onMouseEnter,
@@ -146,14 +137,14 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 						alignItems: "center",
 						gap: .5
 					},
-					children: [token.symbol, verificationBadge && /* @__PURE__ */ jsx(Tooltip, {
-						title: verificationBadge.title,
+					children: [token.symbol, verificationIcon && /* @__PURE__ */ jsx(Tooltip, {
+						title: verificationTitle,
 						placement: "top",
 						arrow: true,
-						children: /* @__PURE__ */ jsx(verificationBadge.Icon, { sx: {
+						children: /* @__PURE__ */ jsx(verificationIcon.Icon, { sx: {
 							display: "flex",
 							fontSize: 16,
-							color: verificationBadge.color,
+							color: verificationIcon.color,
 							cursor: "help"
 						} })
 					})]
@@ -179,9 +170,8 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 							mountOnEnter: true,
 							children: /* @__PURE__ */ jsxs(Box, { children: [
 								/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
-									tokenAddress: token.address,
+									token,
 									withoutContractAddress,
-									chainId: token.chainId,
 									onClick: onShowTokenDetails
 								}),
 								/* @__PURE__ */ jsx(PinTokenButton, {
@@ -233,9 +223,8 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 								children: shortenAddress(token.address)
 							}), /* @__PURE__ */ jsxs(Box, { children: [
 								/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
-									tokenAddress: token.address,
+									token,
 									withoutContractAddress,
-									chainId: token.chainId,
 									onClick: onShowTokenDetails
 								}),
 								/* @__PURE__ */ jsx(PinTokenButton, {