chore: clean up + add comments

MetaMask · Dec 5, 2024 · 0e4cdb7 · 0e4cdb7
1 parent 8dd03fd
commit 0e4cdb7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/ui/components/component-library/picker-network/picker-network.tsx b/ui/components/component-library/picker-network/picker-network.tsx
@@ -37,7 +37,6 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
     }: PickerNetworkProps<C>,
     ref?: PolymorphicRef<C>,
   ) => {
-    // const avatarList = (typeof src === 'string' || !src ? [src] : src) ?? [];
     const avatarList = typeof src === 'string' || !src ? [src] : src;
 
     return (

diff --git a/...mponents/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx b/...mponents/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx
@@ -86,6 +86,8 @@ export const AssetPickerModalNetwork = ({
 
   const allNetworks = useSelector(getNetworkConfigurationsByChainId);
   const currency = useSelector(getCurrentCurrency);
+  // Use the networks prop if it is provided, otherwise use all available networks
+  // Sort the networks by balance in descending order
   const networksList = useMemo(
     () =>
       (networks ?? Object.values(allNetworks) ?? []).sort(
@@ -94,6 +96,8 @@ export const AssetPickerModalNetwork = ({
     [],
   );
 
+  // Tracks the selection/checked state of each network
+  // Initialized with the selectedChainIds if provided
   const [checkedChainIds, setCheckedChainIds] = useState<
     Record<string, boolean>
   >(
@@ -115,6 +119,7 @@ export const AssetPickerModalNetwork = ({
     }));
   };
 
+  // Toggles all networks to be checked or unchecked
   const handleToggleAllNetworks = () => {
     setCheckedChainIds(
       Object.keys(checkedChainIds)?.reduce(
@@ -126,6 +131,7 @@ export const AssetPickerModalNetwork = ({
       ),
     );
   };
+
   return (
     <Modal
       isOpen={isOpen}
@@ -208,6 +214,7 @@ export const AssetPickerModalNetwork = ({
                     ] ?? name
                   }
                   selected={
+                    // If multiselect is enabled, the checkbox indicates selection
                     isMultiselectEnabled ? false : network?.chainId === chainId
                   }
                   onClick={() => {

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
@@ -85,7 +85,11 @@ type AssetPickerModalProps = {
    * by a custom order.
    */
   customTokenListGenerator?: (
-    filterPredicate: (symbol: string, address?: string) => boolean,
+    filterPredicate: (
+      symbol: string,
+      address?: null | string,
+      chainId?: string,
+    ) => boolean,
   ) => Generator<
     AssetWithDisplayData<NativeAsset> | AssetWithDisplayData<ERC20Asset>
   >;

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -152,12 +152,14 @@ export function AssetPicker({
     return undefined;
   };
 
-  const networkImageSrc =
-    selectedNetwork?.chainId &&
+  const getNetworkImageUrl = (chainId: string) =>
     CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
-      selectedNetwork.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+      chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
     ];
 
+  const networkImageSrc =
+    selectedNetwork?.chainId && getNetworkImageUrl(selectedNetwork.chainId);
+
   const handleButtonClick = () => {
     if (networkProps && !networkProps.network) {
       setIsSelectingNetwork(true);
@@ -236,14 +238,12 @@ export function AssetPicker({
             | AssetWithDisplayData<NativeAsset>,
         ) => {
           // If isMultiselectEnabled=true, update the network when a token is selected
-          if (isMultiselectEnabled) {
+          if (isMultiselectEnabled && networkProps?.onNetworkChange) {
             const networkFromToken = token.chainId
               ? allNetworks[token.chainId as keyof typeof allNetworks]
               : undefined;
-            if (networkProps?.onNetworkChange && networkFromToken) {
+            if (networkFromToken) {
               networkProps.onNetworkChange(networkFromToken);
-            } else {
-              // TODO set active network
             }
           }
           onAssetChange(token);
@@ -255,10 +255,7 @@ export function AssetPicker({
             return true;
           }
           if (isMultiselectEnabled) {
-            if (selectedChainIds.includes(tokenChainId)) {
-              return true;
-            }
-            return false;
+            return selectedChainIds.includes(tokenChainId);
           }
           if (networkProps?.network?.chainId === tokenChainId) {
             return true;
@@ -270,14 +267,7 @@ export function AssetPicker({
         networkPickerProps={{
           label: getNetworkPickerLabel(),
           src: isMultiselectEnabled
-            ? selectedChainIds
-                .map(
-                  (c) =>
-                    CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
-                      c as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
-                    ],
-                )
-                .reverse()
+            ? selectedChainIds.map(getNetworkImageUrl).reverse()
             : undefined,
         }}
         onNetworkPickerClick={
@@ -295,6 +285,7 @@ export function AssetPicker({
         isTokenListLoading={isTokenListLoading}
       />
 
+      {/** If a child prop is passed in, use it as the trigger button instead of the default */}
       {children?.(handleButtonClick, networkImageSrc) || (
         <ButtonBase
           data-testid="asset-picker-button"