feat: add dust modal and banner components (#2704)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

src/app/api/dust-quote/route.ts

@@ -0,0 +1,23 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { makeLifiComposerClient } from '@/app/lib/lifi-composer-client';
+
+export const POST = async (request: NextRequest) => {
+  try {
+    const body = await request.json();
+    const client = makeLifiComposerClient();
+    const result = await client.compose(body);
+    return NextResponse.json(result);
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: {
+          message: error instanceof Error ? error.message : String(error),
+          kind: 'internal',
+        },
+      },
+      { status: 500 },
+    );
+  }
+};

src/app/lib/lifi-composer-client.ts

@@ -0,0 +1,146 @@
+import 'server-only';
+import config from '@/config/env-config';
+
+interface ERC20Resource {
+  kind: 'erc20';
+  token: string;
+  chainId: number;
+}
+
+interface NativeResource {
+  kind: 'native';
+  chainId: number;
+}
+
+type Resource = ERC20Resource | NativeResource;
+
+interface FlowInput {
+  name: string;
+  resource: Resource;
+}
+
+interface SwapNode {
+  id: string;
+  op: 'lifi.swap';
+  bind: {
+    amountIn: { $ref: string };
+  };
+  config: {
+    resourceOut: Resource;
+    slippage: number;
+  };
+}
+
+interface Flow {
+  version: number;
+  id: string;
+  chainId: number;
+  inputs: FlowInput[];
+  nodes: SwapNode[];
+}
+
+interface DirectDepositInput {
+  kind: 'directDeposit';
+  amount: string;
+}
+
+interface Run {
+  inputs: Record<string, DirectDepositInput>;
+  signer: string;
+  sweepTo: string;
+  simulationPolicy?: string;
+  checkOnChainAllowances?: boolean;
+  maxPriceImpactBps?: number;
+}
+
+interface ComposeRequestBody {
+  flow: Flow;
+  run: Run;
+}
+
+interface TransactionRequest {
+  to: string;
+  data: string;
+  value: string;
+}
+
+interface ApprovalItem {
+  token: string;
+  spender: string;
+  amount: string;
+  transactionRequest: TransactionRequest;
+}
+
+export interface ProducedResourceSimulated {
+  amountOut: string;
+  amountOutMin: string;
+}
+
+export interface ProducedResource {
+  kind: 'native' | 'erc20';
+  chainId: number;
+  availability: string;
+  owner: string;
+  simulated: ProducedResourceSimulated;
+}
+
+export interface PriceImpact {
+  inputValueUsd: number;
+  outputValueUsd: number;
+  impactBps: number;
+  unpricedInputs: string[];
+  unpricedOutputs: string[];
+}
+
+export interface ComposeResponseData {
+  producedResources: Record<string, ProducedResource>;
+  transactionRequest: TransactionRequest;
+  userProxy: string;
+  approvals: ApprovalItem[];
+  priceImpact: PriceImpact;
+}
+
+interface ComposeResponse {
+  data: ComposeResponseData;
+  success: boolean;
+  error?: {
+    message: string;
+    kind: string;
+  };
+}
+
+class LifiComposerClient {
+  private baseUrl: string;
+  private apiKey: string;
+
+  constructor(baseUrl: string, apiKey: string) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+  }
+
+  async compose(body: ComposeRequestBody): Promise<ComposeResponse> {
+    const response = await fetch(`${this.baseUrl}/compose`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-lifi-api-key': this.apiKey,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `LiFi Composer failed: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    return response.json();
+  }
+}
+
+export const makeLifiComposerClient = (): LifiComposerClient => {
+  return new LifiComposerClient(
+    config.NEXT_PUBLIC_LIFI_COMPOSER_BACKEND_URL,
+    config.LIFI_COMPOSER_API_KEY,
+  );
+};

src/app/ui/portfolio/PortfolioDustSection.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { DustFlow } from '@/components/composite/DustFlow/DustFlow';
+import { AB_TEST_NAME } from '@/const/abtests';
+import { useABTest } from '@/hooks/useABTest';
+import { useAccount } from '@lifi/wallet-management';
+
+export const PortfolioDustSection = () => {
+  const { account } = useAccount();
+  const dustConversionFeatureFlag = useABTest({
+    feature: AB_TEST_NAME.DUST_CONVERSION,
+    address: account?.address ?? '',
+  });
+
+  if (
+    dustConversionFeatureFlag.isLoading ||
+    !dustConversionFeatureFlag.isEnabled ||
+    !dustConversionFeatureFlag.value
+  ) {
+    return null;
+  }
+  return <DustFlow />;
+};

src/app/ui/portfolio/PortfolioPage.tsx

@@ -1,10 +1,12 @@
 import { PortfolioAssetsSection } from './PortfolioAssetsSection';
+import { PortfolioDustSection } from './PortfolioDustSection';
 import { PortfolioHeaderSection } from './PortfolioHeaderSection';
 
 export const PortfolioPage = () => {
   return (
     <>
       <PortfolioHeaderSection />
+      <PortfolioDustSection />
       <PortfolioAssetsSection />
     </>
   );

src/components/composite/DustFlow/DustBanner.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@/components/core/buttons/Button/Button';
+import Typography from '@mui/material/Typography';
+import { Trans, useTranslation } from 'react-i18next';
+import { EntityStack } from '../EntityStack/EntityStack';
+import { AvatarSize } from '@/components/core/AvatarStack/AvatarStack.types';
+import { useDustBalances } from './hooks/useDustBalances';
+import { usePortfolioFormatters } from '@/hooks/tokens/usePortfolioFormatters';
+import { type FC, useMemo } from 'react';
+import { orderBy, uniqBy } from 'lodash';
+import {
+  DustBannerContainer,
+  DustBannerContentContainer,
+} from './DustFlow.styles';
+import { INITIAL_MAX_THRESHOLD_USD } from './constants';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { checkBalanceWithinRange, getChainMinUsdThreshold } from './utils';
+
+interface DustBannerProps {
+  forceDisplay?: boolean;
+  onClick: () => void;
+}
+
+export const DustBanner: FC<DustBannerProps> = ({
+  forceDisplay = false,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+  const { nonNativeBalances } = useDustBalances();
+  const { toDisplayAggregatedAmountUSD } = usePortfolioFormatters();
+
+  const filteredBalances = useMemo(
+    () =>
+      orderBy(
+        nonNativeBalances.filter((balance) =>
+          checkBalanceWithinRange(
+            balance,
+            INITIAL_MAX_THRESHOLD_USD,
+            getChainMinUsdThreshold(balance.token.chainId),
+          ),
+        ),
+        'amountUSD',
+        'desc',
+      ),
+    [nonNativeBalances],
+  );
+
+  const tokens = useMemo(() => {
+    return uniqBy(
+      filteredBalances.map((balance) => balance.token),
+      'symbol',
+    );
+  }, [filteredBalances]);
+
+  const totalUSD = toDisplayAggregatedAmountUSD(filteredBalances);
+
+  if (!tokens.length && !forceDisplay) {
+    return null;
+  }
+
+  return (
+    <DustBannerContainer>
+      <DustBannerContentContainer>
+        <EntityStack
+          entities={tokens}
+          direction="row-reverse"
+          size={AvatarSize.MD}
+          limit={3}
+          useAvatarOverflow
+          disableBorder
+          avatarSx={(theme) => ({
+            border: `2px solid ${(theme.vars || theme).palette.surface1.main}`,
+          })}
+        />
+        <Typography variant="bodyXSmall">
+          <Trans
+            i18nKey="portfolio.dustConversion.banner"
+            values={{ value: totalUSD }}
+          />
+        </Typography>
+      </DustBannerContentContainer>
+      <Button onClick={onClick} fullWidth={isMobile}>
+        {t('buttons.convertDust')}
+      </Button>
+    </DustBannerContainer>
+  );
+};

src/components/composite/DustFlow/DustFlow.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { action } from 'storybook/actions';
+import { useState } from 'react';
+import { DustModal } from './DustModal';
+import { ConnectButton } from '@/components/ConnectButton';
+import { PortfolioProvider } from '@/providers/PortfolioProvider/PortfolioProvider';
+import { useIsDisconnected } from '@/components/Navbar/hooks';
+import { WalletMenuToggle } from '@/components/Navbar/components/Buttons/WalletMenuToggle';
+import { DustFlow } from './DustFlow';
+import { DustBanner } from './DustBanner';
+import Stack from '@mui/material/Stack';
+
+const meta = {
+  component: DustFlow,
+  title: 'components/composite/Dust Flow',
+} satisfies Meta<typeof DustFlow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const isDisconnected = useIsDisconnected();
+
+    return (
+      <PortfolioProvider>
+        <Stack sx={{ gap: 2 }}>
+          {isDisconnected ? <ConnectButton /> : <WalletMenuToggle />}
+          <DustFlow />
+        </Stack>
+      </PortfolioProvider>
+    );
+  },
+  args: {},
+};
+
+export const OnlyBanner: Story = {
+  render: () => {
+    const isDisconnected = useIsDisconnected();
+
+    return (
+      <PortfolioProvider>
+        <Stack sx={{ gap: 2 }}>
+          {isDisconnected ? <ConnectButton /> : <WalletMenuToggle />}
+          <DustBanner forceDisplay onClick={action('click-dust-banner-btn')} />
+        </Stack>
+      </PortfolioProvider>
+    );
+  },
+  args: {},
+};
+
+export const OnlyModal: Story = {
+  render: () => {
+    const isDisconnected = useIsDisconnected();
+    const [isModalOpen, setIsModalOpen] = useState(true);
+
+    return (
+      <PortfolioProvider>
+        <Stack sx={{ gap: 2 }}>
+          {isDisconnected ? <ConnectButton /> : <WalletMenuToggle />}
+          <DustModal
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+          />
+        </Stack>
+      </PortfolioProvider>
+    );
+  },
+  args: {},
+};

src/components/composite/DustFlow/DustFlow.styles.ts

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+export const DustBannerContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: (theme.vars || theme).palette.accent1.main,
+  color: (theme.vars || theme).palette.textPrimaryInverted,
+  padding: theme.spacing(1, 1.5),
+  borderRadius: theme.shape.radius8,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  [theme.breakpoints.up('sm')]: {
+    flexDirection: 'row',
+    borderRadius: theme.shape.radius32,
+  },
+}));
+
+export const DustBannerContentContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1, 1.5),
+  borderRadius: theme.shape.radius32,
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: theme.spacing(1.25),
+}));