Update TokenSelector component

apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx

@@ -1,25 +1,25 @@
 'use client';
 
-import { FC, useMemo } from 'react';
 import {
-  createColumnHelper,
-  useReactTable,
-  getCoreRowModel,
   ColumnDef,
   Table as RTTable,
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
 } from '@tanstack/react-table';
+import { chainsConfig } from '@webb-tools/dapp-config/chains';
+import { ShieldKeyholeIcon } from '@webb-tools/icons';
 import {
   ChainChip,
   Table,
-  fuzzyFilter,
   Typography,
+  fuzzyFilter,
 } from '@webb-tools/webb-ui-components';
-import { ShieldedAssetLight, ShieldedAssetDark } from '@webb-tools/icons';
-import { chainsConfig } from '@webb-tools/dapp-config/chains';
+import { FC, useMemo } from 'react';
 
-import { NetworkPoolType, NetworkPoolTableProps } from './types';
-import { HeaderCell, NumberCell } from '../table';
 import { getSortedTypedChainIds } from '../../utils';
+import { HeaderCell, NumberCell } from '../table';
+import { NetworkPoolTableProps, NetworkPoolType } from './types';
 
 const columnHelper = createColumnHelper<NetworkPoolType>();
 
@@ -28,8 +28,7 @@ const staticColumns: ColumnDef<NetworkPoolType, any>[] = [
     header: () => null,
     cell: (props) => (
       <div className="flex items-center gap-1">
-        <ShieldedAssetLight className="block dark:hidden" />
-        <ShieldedAssetDark className="hidden dark:block" />
+        <ShieldKeyholeIcon />
         <Typography
           variant="body1"
           fw="bold"
@@ -111,7 +110,7 @@ const NetworkPoolTable: FC<NetworkPoolTableProps> = ({
   }
 
   return (
-    <div className="overflow-hidden rounded-lg border border-mono-40 dark:border-mono-160">
+    <div className="overflow-hidden border rounded-lg border-mono-40 dark:border-mono-160">
       <Table
         tableClassName="block overflow-x-auto max-w-[-moz-fit-content] md:table md:max-w-none"
         thClassName="border-t-0 bg-mono-0 border-r first:px-3 last:border-r-0 last:pr-2"

apps/hubble-stats/components/table/DestinationCell.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ShieldedAssetLight } from '@webb-tools/icons';
+import { ShieldedAssetIcon } from '@webb-tools/icons';
 
 import { DestinationCellProps } from './types';
 
@@ -14,7 +14,7 @@ const DestinationCell: FC<DestinationCellProps> = ({ className }) => {
         className
       )}
     >
-      <ShieldedAssetLight className="w-4 h-4" />
+      <ShieldedAssetIcon />
       shielded
     </span>
   );

apps/hubble-stats/components/table/ShieldedCell.tsx

@@ -1,19 +1,14 @@
 import { FC } from 'react';
 import { Typography } from '@webb-tools/webb-ui-components';
 import { shortenHex } from '@webb-tools/webb-ui-components/utils';
-import {
-  ExternalLinkLine,
-  ShieldedAssetDark,
-  ShieldedAssetLight,
-} from '@webb-tools/icons';
+import { ExternalLinkLine, ShieldedAssetIcon } from '@webb-tools/icons';
 
 import { ShieldedCellProps } from './types';
 
 const ShieldedCell: FC<ShieldedCellProps> = ({ title, address }) => {
   return (
     <div className="flex items-center gap-2">
-      <ShieldedAssetLight className="block dark:hidden" />
-      <ShieldedAssetDark className="hidden dark:block" />
+      <ShieldedAssetIcon />
 
       <div className="flex flex-col">
         <Typography

apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx

@@ -2,11 +2,7 @@ import { FC } from 'react';
 import cx from 'classnames';
 import { Typography } from '@webb-tools/webb-ui-components';
 import { shortenHex } from '@webb-tools/webb-ui-components/utils';
-import {
-  ShieldedAssetLight,
-  ShieldedAssetDark,
-  ExternalLinkLine,
-} from '@webb-tools/icons';
+import { ExternalLinkLine, ShieldedAssetIcon } from '@webb-tools/icons';
 
 import { PoolTypeChip, PoolOverviewItem } from '../../components';
 import { PoolType } from '../../components/PoolTypeChip/types';
@@ -35,17 +31,7 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({
     >
       <div className="flex flex-col items-center gap-1">
         {/* Icon */}
-        <ShieldedAssetLight
-          width={40}
-          height={48}
-          className="block dark:hidden"
-        />
-
-        <ShieldedAssetDark
-          width={40}
-          height={48}
-          className="hidden dark:block"
-        />
+        <ShieldedAssetIcon size="xl" />
 
         {/* Name */}
         <Typography variant="h5" fw="bold">

libs/icons/src/TokenIcon.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { cloneElement, useMemo } from 'react';
+import React, { MouseEventHandler, cloneElement, useMemo } from 'react';
 
 import { Spinner } from './Spinner';
 import { useDynamicSVGImport } from './hooks/useDynamicSVGImport';
@@ -27,12 +27,24 @@ export const TokenIcon: React.FC<TokenIconBase & { isActive?: boolean }> = (
   });
 
   const className = useMemo(
-    () => twMerge(cx({ 'cursor-copy': Boolean(onClick) }), classNameProp),
+    () =>
+      twMerge(
+        cx({
+          'cursor-copy': Boolean(onClick),
+          [cx(
+            'fill-mono-60 stroke-mono-60',
+            'dark:fill-mono-140 dark:stroke-mono-140'
+          )]: typeof name === 'undefined', // Style for placeholder
+        }),
+        classNameProp
+      ),
     [classNameProp]
   );
 
   // Prevent infinite loop when the passed onClick not use useCallback
-  const onClickRef = React.useRef(onClick);
+  const onClickRef = React.useRef<
+    MouseEventHandler<SVGSVGElement | HTMLDivElement> | undefined
+  >(onClick);
 
   if (error) {
     return <span>{error.message}</span>;
@@ -53,12 +65,12 @@ export const TokenIcon: React.FC<TokenIconBase & { isActive?: boolean }> = (
     };
 
     return isActive ? (
-      <div className="relative">
+      <div className="relative" onClick={onClickRef.current}>
         {cloneElement(svgElement, props)}
         <span className="inline-block absolute w-1.5 h-1.5 bg-green-50 dark:bg-green-40 rounded-full top-0 right-0" />
       </div>
     ) : (
-      cloneElement(svgElement, props)
+      cloneElement(svgElement, { ...props, onClick: onClickRef.current })
     );
   }
 

libs/icons/src/hooks/useDynamicSVGImport.tsx

@@ -32,7 +32,7 @@ export interface DynamicSVGImportOptions {
  * @returns `error`, `loading` and `SvgIcon` in an object
  */
 export function useDynamicSVGImport(
-  name: string,
+  name?: string,
   options: DynamicSVGImportOptions = {}
 ) {
   const [importedIcon, setImportedIcon] = useState<
@@ -43,7 +43,11 @@ export function useDynamicSVGImport(
 
   const { onCompleted, onError } = options;
 
-  const _name = useMemo(() => name.trim().toLowerCase(), [name]);
+  const _name = useMemo(
+    () =>
+      typeof name === 'string' ? name.trim().toLowerCase() : 'placeholder',
+    [name]
+  );
   const type = useMemo(() => options.type ?? 'token', [options]);
 
   useEffect(() => {

libs/icons/src/index.ts

@@ -75,8 +75,7 @@ export * from './SaveWithBg';
 export * from './Search';
 export * from './SendPlanLineIcon';
 export * from './ShieldKeyholeIcon';
-export * from './ShieldedAssetDark';
-export * from './ShieldedAssetLight';
+export { default as ShieldedAssetIcon } from './ShieldedAssetIcon';
 export * from './ShuffleLine';
 export * from './SosLineIcon';
 export * from './SparklingIcon';

libs/icons/src/types.ts

@@ -26,5 +26,5 @@ export interface TokenIconBase
   /**
    * The symbol for the cryptocurrency to get the icon
    */
-  name: string;
+  name?: string;
 }

libs/webb-ui-components/src/components/ListCard/AssetListItem.tsx

@@ -1,7 +1,13 @@
 import { TokenIcon } from '@webb-tools/icons';
 import { Typography } from '../../typography';
 import { getRoundedAmountString } from '../../utils';
-import { ComponentProps, forwardRef, useMemo, useRef, useState } from 'react';
+import React, {
+  ComponentProps,
+  forwardRef,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ListItem } from './ListItem';
 import { AssetType } from './types';
 import { Button } from '../buttons';
@@ -11,21 +17,21 @@ export const AssetListItem = forwardRef<
   AssetType & ComponentProps<typeof ListItem>
 >(
   (
-    { balance, name, symbol, onTokenClick, isTokenAddedToMetamask, ...props },
+    { balance, name, symbol, isTokenAddedToMetamask, onClick, ...props },
     ref
   ) => {
-    const onTokenClickRef = useRef(onTokenClick);
+    const onTokenClickRef = useRef(onClick);
 
     const [isHovered, setIsHovered] = useState(false);
 
     const handleTokenIconClick = useMemo(() => {
-      if (typeof onTokenClick === 'function') {
-        return (event: any) => {
+      if (typeof onTokenClickRef.current === 'function') {
+        return (event: React.MouseEvent) => {
           event.stopPropagation();
-          onTokenClickRef.current?.(symbol);
+          onTokenClickRef.current?.(event as React.MouseEvent<HTMLLIElement>);
         };
       }
-    }, [onTokenClick, symbol]);
+    }, []);
 
     return (
       <ListItem

libs/webb-ui-components/src/components/ListCard/ChainListCard.tsx

@@ -148,7 +148,7 @@ export const ChainListCard = forwardRef<HTMLDivElement, ChainListCardProps>(
                 >
                   <div className="flex items-center space-x-2">
                     <ChainIcon
-                      isActive={isConnected}
+                      status={isConnected ? 'success' : undefined}
                       size="lg"
                       name={currentChain.name}
                     />

libs/webb-ui-components/src/components/ListCard/TokenListCard.tsx

@@ -3,7 +3,7 @@ import { Typography } from '../../typography';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { Input } from '../Input';
 import { ScrollArea } from '../ScrollArea';
-import { TokenSelector } from '../TokenSelector';
+import TokenSelector from '../TokenSelector';
 import { AssetListItem } from './AssetListItem';
 import { ListCardWrapper } from './ListCardWrapper';
 import { AssetType, TokenListCardProps } from './types';
@@ -59,7 +59,7 @@ export const TokenListCard = forwardRef<HTMLDivElement, TokenListCardProps>(
       [onChange, setAsset, unavailableTokens]
     );
 
-    const { filteredPopular, filteredSelect, filteredUnavailable } = useMemo(
+    const { filteredPopular, filteredSelect } = useMemo(
       () => ({
         filteredPopular: getFilterList(popularTokens),
         filteredSelect: getFilterList(selectTokens),
@@ -93,7 +93,6 @@ export const TokenListCard = forwardRef<HTMLDivElement, TokenListCardProps>(
                 <TokenSelector
                   key={`${current.name}-${idx}`}
                   onClick={() => onItemChange(current)}
-                  onTokenClick={current.onTokenClick}
                 >
                   {current.symbol}
                 </TokenSelector>

libs/webb-ui-components/src/components/ListCard/types.ts

@@ -64,11 +64,6 @@ export type AssetType = {
    */
   balance?: number;
 
-  /**
-   * The callback when user clicks on the token
-   */
-  onTokenClick?: (symbol: string) => void;
-
   /**
    * Check if the token is added to metamask
    */