feat: market search

src/components/lists/ListWrapper.tsx

@@ -5,27 +5,25 @@ import { ReactNode, useState } from 'react';
 import { toggleLocalStorageClick } from '../../helpers/toggle-local-storage-click';
 
 interface ListWrapperProps {
-  title: ReactNode;
+  titleComponent: ReactNode;
   localStorageName?: string;
   subTitleComponent?: ReactNode;
   subChildrenComponent?: ReactNode;
   topInfo?: ReactNode;
   children: ReactNode;
   withTopMargin?: boolean;
   noData?: boolean;
-  captionSize?: 'h2' | 'h3';
 }
 
 export const ListWrapper = ({
   children,
   localStorageName,
-  title,
+  titleComponent,
   subTitleComponent,
   subChildrenComponent,
   topInfo,
   withTopMargin,
   noData,
-  captionSize = 'h3',
 }: ListWrapperProps) => {
   const [isCollapse, setIsCollapse] = useState(
     localStorageName ? localStorage.getItem(localStorageName) === 'true' : false
@@ -51,15 +49,14 @@ export const ListWrapper = ({
       >
         <Box
           sx={{
+            width: '100%',
             display: 'flex',
             alignItems: { xs: 'flex-start', xsm: 'center' },
             py: '3.6px',
             flexDirection: { xs: 'column', xsm: 'row' },
           }}
         >
-          <Typography component="div" variant={captionSize} sx={{ mr: 4 }}>
-            {title}
-          </Typography>
+          {titleComponent}
           {subTitleComponent}
         </Box>
 

src/locales/en/messages.po

@@ -384,6 +384,10 @@ msgstr "Can be collateral"
 msgid "Can be executed"
 msgstr "Can be executed"
 
+#: src/modules/markets/AssetListTitle.tsx
+msgid "Cancel"
+msgstr "Cancel"
+
 #: src/components/transactions/Emode/EmodeModalContent.tsx
 msgid "Cannot disable E-Mode"
 msgstr "Cannot disable E-Mode"
@@ -1079,6 +1083,11 @@ msgstr "New APY"
 msgid "No rewards to claim"
 msgstr "No rewards to claim"
 
+#: src/modules/markets/AssetsList.tsx
+#: src/modules/markets/AssetsList.tsx
+msgid "No search results for"
+msgstr "No search results for"
+
 #: src/components/transactions/GovVote/GovVoteModalContent.tsx
 msgid "No voting power"
 msgstr "No voting power"
@@ -1975,6 +1984,10 @@ msgstr "Wallet not detected. Connect or install wallet and retry"
 msgid "Wallets are provided by External Providers and by selecting you agree to Terms of those Providers. Your access to the wallet might be reliant on the External Provider being operational."
 msgstr "Wallets are provided by External Providers and by selecting you agree to Terms of those Providers. Your access to the wallet might be reliant on the External Provider being operational."
 
+#: src/modules/markets/AssetsList.tsx
+msgid "We couldn't find any asset matching your search. Try again with a different asset name, symbol, or address."
+msgstr "We couldn't find any asset matching your search. Try again with a different asset name, symbol, or address."
+
 #: pages/staking.staking.tsx
 msgid "We couldn’t detect a wallet. Connect a wallet to stake."
 msgstr "We couldn’t detect a wallet. Connect a wallet to stake."
@@ -2154,7 +2167,7 @@ msgstr "Your {networkName} wallet is empty. Get free test {0} at"
 msgid "Zero address not valid"
 msgstr "Zero address not valid"
 
-#: src/modules/markets/AssetsList.tsx
+#: src/modules/markets/AssetListTitle.tsx
 msgid "assets"
 msgstr "assets"
 

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx

@@ -1,12 +1,19 @@
-import { Fragment } from 'react';
 import { API_ETH_MOCK_ADDRESS, InterestRate } from '@aave/contract-helpers';
 import { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
-import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Fragment } from 'react';
+import { StableAPYTooltip } from 'src/components/infoTooltips/StableAPYTooltip';
+import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip';
+import { Warning } from 'src/components/primitives/Warning';
+import { MarketWarning } from 'src/components/transactions/Warnings/MarketWarning';
+import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
+
 import { CapType } from '../../../../components/caps/helper';
 import { AvailableTooltip } from '../../../../components/infoTooltips/AvailableTooltip';
 import { ListWrapper } from '../../../../components/lists/ListWrapper';
+import { Link } from '../../../../components/primitives/Link';
 import {
   ComputedReserveData,
   useAppDataContext,
@@ -20,12 +27,6 @@ import { ListHeader } from '../ListHeader';
 import { ListLoader } from '../ListLoader';
 import { BorrowAssetsListItem } from './BorrowAssetsListItem';
 import { BorrowAssetsListMobileItem } from './BorrowAssetsListMobileItem';
-import { Link } from '../../../../components/primitives/Link';
-import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip';
-import { StableAPYTooltip } from 'src/components/infoTooltips/StableAPYTooltip';
-import { Warning } from 'src/components/primitives/Warning';
-import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
-import { MarketWarning } from 'src/components/transactions/Warnings/MarketWarning';
 
 export const BorrowAssetsList = () => {
   const { currentNetworkConfig } = useProtocolDataContext();
@@ -111,7 +112,11 @@ export const BorrowAssetsList = () => {
   const borrowDisabled = !borrowReserves.length;
   return (
     <ListWrapper
-      title={<Trans>Assets to borrow</Trans>}
+      titleComponent={
+        <Typography component="div" variant="h3" sx={{ mr: 4 }}>
+          <Trans>Assets to borrow</Trans>
+        </Typography>
+      }
       localStorageName="borrowAssetsDashboardTableCollapse"
       withTopMargin
       noData={borrowDisabled}

src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx

@@ -1,10 +1,12 @@
-import { Fragment } from 'react';
 import { API_ETH_MOCK_ADDRESS, InterestRate } from '@aave/contract-helpers';
 import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
-import { useMediaQuery, useTheme } from '@mui/material';
+import { Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Fragment } from 'react';
+import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
+
 import { APYTypeTooltip } from '../../../../components/infoTooltips/APYTypeTooltip';
 import { BorrowPowerTooltip } from '../../../../components/infoTooltips/BorrowPowerTooltip';
 import { TotalBorrowAPYTooltip } from '../../../../components/infoTooltips/TotalBorrowAPYTooltip';
@@ -20,7 +22,6 @@ import { ListLoader } from '../ListLoader';
 import { ListTopInfoItem } from '../ListTopInfoItem';
 import { BorrowedPositionsListItem } from './BorrowedPositionsListItem';
 import { BorrowedPositionsListMobileItem } from './BorrowedPositionsListMobileItem';
-import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 
 export const BorrowedPositionsList = () => {
   const { user, loading } = useAppDataContext();
@@ -81,7 +82,11 @@ export const BorrowedPositionsList = () => {
 
   return (
     <ListWrapper
-      title={<Trans>Your borrows</Trans>}
+      titleComponent={
+        <Typography component="div" variant="h3" sx={{ mr: 4 }}>
+          <Trans>Your borrows</Trans>
+        </Typography>
+      }
       localStorageName="borrowedAssetsDashboardTableCollapse"
       subTitleComponent={
         currentMarketData.v3 ? (

src/modules/dashboard/lists/ListLoader.tsx

@@ -1,4 +1,4 @@
-import { useMediaQuery, useTheme } from '@mui/material';
+import { Typography, useMediaQuery, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
 
 import { ListWrapper } from '../../../components/lists/ListWrapper';
@@ -17,7 +17,14 @@ export const ListLoader = ({ title, withTopMargin, head }: ListLoaderProps) => {
   const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
 
   return (
-    <ListWrapper title={title} withTopMargin={withTopMargin}>
+    <ListWrapper
+      titleComponent={
+        <Typography component="div" variant="h3" sx={{ mr: 4 }}>
+          {title}
+        </Typography>
+      }
+      withTopMargin={withTopMargin}
+    >
       <>
         {!downToXSM && <ListHeader head={head} />}
         {!downToXSM ? (

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx

@@ -1,21 +1,22 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
 import { Trans } from '@lingui/macro';
-import { useMediaQuery, useTheme } from '@mui/material';
+import { Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Fragment } from 'react';
+import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
+
 import { CollateralSwitchTooltip } from '../../../../components/infoTooltips/CollateralSwitchTooltip';
 import { CollateralTooltip } from '../../../../components/infoTooltips/CollateralTooltip';
 import { TotalSupplyAPYTooltip } from '../../../../components/infoTooltips/TotalSupplyAPYTooltip';
 import { ListWrapper } from '../../../../components/lists/ListWrapper';
 import { useAppDataContext } from '../../../../hooks/app-data-provider/useAppDataProvider';
+import { ListTopInfoItem } from '../../../dashboard/lists/ListTopInfoItem';
 import { DashboardContentNoData } from '../../DashboardContentNoData';
 import { ListHeader } from '../ListHeader';
 import { ListLoader } from '../ListLoader';
-import { ListTopInfoItem } from '../../../dashboard/lists/ListTopInfoItem';
 import { SuppliedPositionsListItem } from './SuppliedPositionsListItem';
 import { SuppliedPositionsListMobileItem } from './SuppliedPositionsListMobileItem';
-import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
-import { Fragment } from 'react';
 
 export const SuppliedPositionsList = () => {
   const { user, loading } = useAppDataContext();
@@ -53,7 +54,11 @@ export const SuppliedPositionsList = () => {
 
   return (
     <ListWrapper
-      title={<Trans>Your supplies</Trans>}
+      titleComponent={
+        <Typography component="div" variant="h3" sx={{ mr: 4 }}>
+          <Trans>Your supplies</Trans>
+        </Typography>
+      }
       localStorageName="suppliedAssetsDashboardTableCollapse"
       noData={!suppliedPosition.length}
       topInfo={

src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx

@@ -1,10 +1,14 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
 import { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
-import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import BigNumber from 'bignumber.js';
 import { Fragment, useState } from 'react';
+import { Warning } from 'src/components/primitives/Warning';
+import { MarketWarning } from 'src/components/transactions/Warnings/MarketWarning';
+import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
+
 import { ListWrapper } from '../../../../components/lists/ListWrapper';
 import { Link, ROUTES } from '../../../../components/primitives/Link';
 import {
@@ -18,9 +22,6 @@ import { ListHeader } from '../ListHeader';
 import { ListLoader } from '../ListLoader';
 import { SupplyAssetsListItem } from './SupplyAssetsListItem';
 import { SupplyAssetsListMobileItem } from './SupplyAssetsListMobileItem';
-import { Warning } from 'src/components/primitives/Warning';
-import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
-import { MarketWarning } from 'src/components/transactions/Warnings/MarketWarning';
 import { WalletEmptyInfo } from './WalletEmptyInfo';
 
 export const SupplyAssetsList = () => {
@@ -159,7 +160,11 @@ export const SupplyAssetsList = () => {
   const supplyDisabled = !tokensToSupply.length;
   return (
     <ListWrapper
-      title={<Trans>Assets to supply</Trans>}
+      titleComponent={
+        <Typography component="div" variant="h3" sx={{ mr: 4 }}>
+          <Trans>Assets to supply</Trans>
+        </Typography>
+      }
       localStorageName="supplyAssetsDashboardTableCollapse"
       withTopMargin
       noData={supplyDisabled}

src/modules/faucet/FaucetAssetsList.tsx

@@ -1,23 +1,24 @@
 import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
-import { Button, Typography, useMediaQuery, useTheme, Box } from '@mui/material';
+import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
-import { useModalContext } from 'src/hooks/useModal';
+import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
 import { ListColumn } from 'src/components/lists/ListColumn';
 import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
 import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
 import { ListItem } from 'src/components/lists/ListItem';
 import { ListWrapper } from 'src/components/lists/ListWrapper';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
+import { Link, ROUTES } from 'src/components/primitives/Link';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances';
+import { useModalContext } from 'src/hooks/useModal';
+import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
+
 import { FaucetItemLoader } from './FaucetItemLoader';
 import { FaucetMobileItemLoader } from './FaucetMobileItemLoader';
-import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
-import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
-import { Link, ROUTES } from 'src/components/primitives/Link';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 
 export default function FaucetAssetsList() {
   const { reserves, loading } = useAppDataContext();
@@ -51,7 +52,13 @@ export default function FaucetAssetsList() {
   }
 
   return (
-    <ListWrapper title={<Trans>Test Assets</Trans>} captionSize="h2">
+    <ListWrapper
+      titleComponent={
+        <Typography component="div" variant="h2" sx={{ mr: 4 }}>
+          <Trans>Test Assets</Trans>
+        </Typography>
+      }
+    >
       <ListHeaderWrapper px={downToXSM ? 4 : 6}>
         <ListColumn isRow maxWidth={280}>
           <ListHeaderTitle>