add favorites to portfolio

packages/web/components/table/asset-balances.tsx

@@ -25,11 +25,12 @@ import { useLocalStorage } from "react-use";
 
 import { AssetCell } from "~/components/table/cells/asset";
 import { SpriteIconId } from "~/config";
-import { MultiLanguageT } from "~/hooks";
 import {
   Breakpoint,
+  MultiLanguageT,
   useFeatureFlags,
   useTranslation,
+  useUserWatchlist,
   useWalletSelect,
   useWindowSize,
 } from "~/hooks";
@@ -169,6 +170,8 @@ export const AssetBalancesTable: FunctionComponent<{
 
   const noSearchResults = Boolean(searchQuery) && !filteredAssetsData.length;
 
+  const { watchListDenoms, toggleWatchAssetDenom } = useUserWatchlist();
+
   // Define columns
   const columns = useMemo(() => {
     const columnHelper = createColumnHelper<AssetRow>();
@@ -180,6 +183,8 @@ export const AssetBalancesTable: FunctionComponent<{
           <AssetCell
             {...asset}
             warnUnverified={showUnverifiedAssets && !asset.isVerified}
+            isInUserWatchlist={watchListDenoms.includes(asset.coinDenom)}
+            onClickWatchlist={() => toggleWatchAssetDenom(asset.coinDenom)}
           />
         ),
       }),
@@ -225,7 +230,15 @@ export const AssetBalancesTable: FunctionComponent<{
         ),
       }),
     ];
-  }, [sortKey, sortDirection, showUnverifiedAssets, setSortKey, t]);
+  }, [
+    sortKey,
+    sortDirection,
+    showUnverifiedAssets,
+    setSortKey,
+    t,
+    watchListDenoms,
+    toggleWatchAssetDenom,
+  ]);
 
   /** Columns collapsed for screen size responsiveness. */
   const collapsedColumns = useMemo(() => {

packages/web/components/table/cells/asset.tsx

@@ -34,14 +34,13 @@ export const AssetCell: FunctionComponent<
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
-
               onClickWatchlist();
             }}
             className={classNames(
               "cursor-pointer transition-colors duration-150 ease-out hover:text-wosmongton-300",
               isInUserWatchlist ? "text-wosmongton-400" : "text-osmoverse-600"
             )}
-            id="star"
+            id={isInUserWatchlist ? "star" : "star-outlined"}
           />
         </div>
       )}