diff --git a/package.json b/package.json
index 62fa6e5875e..2391dfebc8f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,8 @@
     "uuid": "^11.1.0",
     "viem": "^2.23.10",
     "vitest": "^3.0.8",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "recharts": "^2.10.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.9",
diff --git a/toolbox/src/demo/ToolboxApp.tsx b/toolbox/src/demo/ToolboxApp.tsx
index 6c6914ffeeb..22e01ba8b22 100644
--- a/toolbox/src/demo/ToolboxApp.tsx
+++ b/toolbox/src/demo/ToolboxApp.tsx
@@ -25,6 +25,12 @@ const componentGroups: Record<string, ComponentType[]> = {
             label: "Switch Chain",
             component: lazy(() => import('./examples/Wallet/SwitchChain')),
             fileNames: ["toolbox/src/demo/examples/Wallet/SwitchChain.tsx"]
+        },
+        {
+            id: 'addL1s',
+            label: "Add L1s",
+            component: lazy(() => import('./examples/Wallet/AddL1s')),
+            fileNames: []
         }
     ],
     'Create an L1': [
diff --git a/toolbox/src/demo/examples/Wallet/AddL1s.tsx b/toolbox/src/demo/examples/Wallet/AddL1s.tsx
new file mode 100644
index 00000000000..04a988c7f6b
--- /dev/null
+++ b/toolbox/src/demo/examples/Wallet/AddL1s.tsx
@@ -0,0 +1,534 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useErrorBoundary } from "react-error-boundary";
+import { Button, Select } from "../../ui";
+import { createWalletClient, custom, AddEthereumChainParameter } from 'viem';
+import { useExampleStore } from "../../utils/store";
+import { AvaCloudSDK } from "@avalabs/avacloud-sdk";
+import { ChainInfo } from "@avalabs/avacloud-sdk/models/components";
+
+const sdk = new AvaCloudSDK();
+
+export default function AddL1s() {
+  const { showBoundary } = useErrorBoundary();
+  const { 
+    walletChainId, 
+    setWalletChainId
+  } = useExampleStore();
+  
+  const [chains, setChains] = useState<ChainInfo[]>([]);
+  const [filteredChains, setFilteredChains] = useState<ChainInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [networkType, setNetworkType] = useState<string>("mainnet");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [addingChainId, setAddingChainId] = useState<string | null>(null);
+  const [selectedChain, setSelectedChain] = useState<ChainInfo | null>(null);
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchChains();
+  }, [networkType]);
+
+  async function fetchChains() {
+    setIsLoading(true);
+    setError(null);
+    try {
+      // Use AvaCloudSDK to get chains
+      const result = await sdk.data.evm.chains.supportedChains({
+        network: networkType as "mainnet" | "testnet"
+      });
+      
+      const chainsData = result.chains;
+      
+      if (chainsData && chainsData.length > 0) {
+        setChains(chainsData);
+      } else {
+        setChains([]);
+        setError("No chains found for this network type");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch chains");
+      console.error("Error fetching chains:", err);
+      setChains([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    if (searchTerm.trim() === '') {
+      setFilteredChains(chains);
+    } else {
+      const term = searchTerm.toLowerCase();
+      const filtered = chains.filter(chain => 
+        chain.chainName.toLowerCase().includes(term) || 
+        chain.networkToken.symbol.toLowerCase().includes(term)
+      );
+      setFilteredChains(filtered);
+    }
+  }, [chains, searchTerm]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  // Copy to clipboard function
+  const copyToClipboard = (text: string, field: string) => {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setCopiedField(field);
+        setTimeout(() => setCopiedField(null), 2000);
+      },
+      (err) => {
+        console.error('Could not copy text: ', err);
+      }
+    );
+  };
+
+  async function switchToChain(chainId: string) {
+    try {
+      if (!window.avalanche) {
+        throw new Error("Core wallet not detected. Please install Core wallet extension.");
+      }
+      
+      const walletClient = createWalletClient({
+        transport: custom(window.avalanche!),
+      });
+
+      // Convert decimal chainId to hex
+      const chainIdHex = `0x${parseInt(chainId).toString(16)}`;
+
+      await walletClient.request({
+        id: "switch-chain",
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: chainIdHex }],
+      });
+
+      // After switching, update the chain ID in our state
+      const newChainId = await walletClient.getChainId();
+      setWalletChainId(Number(newChainId));
+      
+      return true;
+    } catch (error: any) {
+      // Check if the error is because the chain has not been added yet
+      if (error.code === 4902) {
+        // Chain not added yet, return false to let the caller know
+        return false;
+      }
+      throw error;
+    }
+  }
+
+  async function handleAddToWallet(chain: ChainInfo) {
+    setAddingChainId(chain.chainId);
+    try {
+      if (!window.avalanche) {
+        throw new Error("Core wallet not detected. Please install Core wallet extension.");
+      }
+      
+      // First try to just switch to the chain, in case it's already added
+      const switched = await switchToChain(chain.chainId).catch(() => false);
+      
+      // If switching was successful, we're done
+      if (switched) {
+        // Close the modal if it was open
+        setSelectedChain(null);
+        return;
+      }
+      
+      // If we get here, the chain needs to be added first
+      const walletClient = createWalletClient({
+        transport: custom(window.avalanche!),
+      });
+
+      // Convert decimal chainId to hex
+      const chainIdHex = `0x${parseInt(chain.chainId).toString(16)}`;
+
+      const chainConfig: AddEthereumChainParameter = {
+        chainId: chainIdHex,
+        chainName: chain.chainName,
+        nativeCurrency: {
+          name: chain.networkToken.name,
+          symbol: chain.networkToken.symbol,
+          decimals: chain.networkToken.decimals,
+        },
+        rpcUrls: [chain.rpcUrl],
+      };
+
+      // Add the chain to wallet
+      await walletClient.request({
+        id: "1",
+        method: "wallet_addEthereumChain",
+        params: [{ ...chainConfig, isTestnet: chain.isTestnet } as unknown as AddEthereumChainParameter],
+      });
+
+      // Then request to switch to the newly added chain (this is already handled by most wallets after adding)
+      try {
+        await walletClient.request({
+          id: "2",
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: chainIdHex }],
+        });
+      } catch (switchError) {
+        console.warn("Error switching chain, but chain was added successfully:", switchError);
+      }
+
+      // After adding chain, check if the current chain changed
+      const newChainId = await walletClient.getChainId();
+      setWalletChainId(Number(newChainId));
+      
+      // Close the modal if it was open
+      setSelectedChain(null);
+    } catch (error) {
+      showBoundary(error);
+    } finally {
+      setAddingChainId(null);
+    }
+  }
+
+  const handleNetworkTypeChange = (value: string | number) => {
+    setNetworkType(value.toString());
+  };
+
+  // Function to show chain details modal
+  const openChainDetails = (chain: ChainInfo) => {
+    setSelectedChain(chain);
+  };
+
+  // Function to close the chain details modal
+  const closeChainDetails = () => {
+    setSelectedChain(null);
+  };
+
+  // Utility function to abbreviate long strings
+  const abbreviateString = (str: string, startChars = 6, endChars = 4) => {
+    if (!str || str.length <= startChars + endChars + 3) return str;
+    return `${str.substring(0, startChars)}...${str.substring(str.length - endChars)}`;
+  };
+
+  // Updated utility function to truncate strings in the middle if needed
+  const truncateMiddle = (str: string, maxLength = 40) => {
+    if (!str || str.length <= maxLength) return str;
+    
+    // Calculate how many characters to show at the beginning and end
+    // For very long strings, we want to show more at both ends
+    const halfLength = Math.floor((maxLength - 3) / 2); // -3 for the ellipsis
+    
+    // For platform chain IDs and subnet IDs, we want to show more characters
+    if (str.length > 50) {
+      return `${str.substring(0, 25)}...${str.substring(str.length - 25)}`;
+    }
+    
+    return `${str.substring(0, maxLength - halfLength - 3)}...${str.substring(str.length - halfLength)}`;
+  };
+
+  // Component for copyable field
+  const CopyableField = ({ label, value, fieldId }: { label: string, value: string, fieldId: string }) => {
+    if (!value) return null;
+    
+    // Determine if the field should use special display based on field type
+    const isSpecialId = fieldId === 'platformChainId' || fieldId === 'subnetId';
+    // URLs should be displayed in full
+    const isUrl = fieldId === 'rpcUrl' || fieldId === 'wsUrl' || label.includes('URL');
+    // Token names should be handled differently
+    const isTokenName = fieldId === 'name' || label === 'Name';
+    
+    // Select appropriate display method based on field type
+    let displayValue = value;
+    if (isUrl) {
+      // Display URLs in full without truncation
+      displayValue = value;
+    } else if (isSpecialId) {
+      displayValue = truncateMiddle(value, 60);
+    } else if (isTokenName && value.length > 20) {
+      displayValue = value.substring(0, 20) + '...';
+    } else if (value.length > 25) {
+      displayValue = abbreviateString(value, 10, 6);
+    }
+    
+    return (
+      <div className="flex flex-col mb-3 gap-1">
+        <div className="text-gray-500 font-medium">{label}:</div>
+        <div className="w-full">
+          <div 
+            className="group flex items-stretch cursor-pointer rounded-md overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-500 transition-colors duration-150 w-full"
+            onClick={() => copyToClipboard(value, fieldId)}
+            title={`Click to copy: ${value}`}
+          >
+            <div className="px-3 py-2 bg-white dark:bg-gray-800 flex-1 min-w-0">
+              <span className="block text-sm break-all">{displayValue}</span>
+            </div>
+            <div className={`flex items-center justify-center px-3 bg-gray-50 dark:bg-gray-700 group-hover:bg-blue-50 dark:group-hover:bg-blue-900/30 transition-colors duration-150 border-l border-gray-200 dark:border-gray-700 ${copiedField === fieldId ? 'text-green-500' : 'text-gray-400 group-hover:text-blue-500 dark:text-gray-400 dark:group-hover:text-blue-400'}`}>
+              {copiedField === fieldId ? (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              ) : (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Non-copyable field component for consistent styling
+  const Field = ({ label, value }: { label: string, value: string | number | boolean }) => {
+    if (value === undefined || value === null) return null;
+    
+    // Handle long text values
+    const displayValue = typeof value === 'string' && value.length > 25 
+      ? value.substring(0, 25) + '...' 
+      : value.toString();
+    
+    return (
+      <div className="flex flex-col mb-3 gap-1">
+        <div className="text-gray-500 font-medium">{label}:</div>
+        <div className="w-full">
+          <div className="px-3 py-2 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 w-full overflow-hidden text-ellipsis text-sm" title={value.toString()}>
+            {displayValue}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // URL field with link component
+  const UrlField = ({ label, url }: { label: string, url: string }) => {
+    if (!url) return null;
+    
+    // Show the full URL without abbreviation
+    const displayUrl = url;
+    
+    return (
+      <div className="flex flex-col mb-3 gap-1">
+        <div className="text-gray-500 font-medium">{label}:</div>
+        <div className="w-full">
+          <a 
+            href={url} 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="flex items-center text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-500 bg-white dark:bg-gray-800 transition-colors duration-150 w-full text-sm"
+            title={url}
+          >
+            <span className="break-all flex-1">{displayUrl}</span>
+            <svg className="w-4 h-4 ml-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold">Add L1 Chains</h2>
+      
+      <div className="space-y-4">
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="w-[130px]">
+            <Select
+              label="Network Type"
+              value={networkType}
+              onChange={handleNetworkTypeChange}
+              options={[
+                { value: "mainnet", label: "Mainnet" },
+                { value: "testnet", label: "Testnet" }
+              ]}
+              className="" 
+            />
+          </div>
+          
+          <div className="w-full md:w-[210px]">
+            <label className="text-sm font-medium leading-none mb-2 block">Search Chains</label>
+            <div className="relative">
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={handleSearchChange}
+                placeholder="Search by name or token"
+                className="flex h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full pr-8"
+              />
+              {searchTerm && (
+                <button 
+                  onClick={() => setSearchTerm('')}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  aria-label="Clear search"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {error && <div className="text-red-500">{error}</div>}
+
+        {isLoading ? (
+          <div className="py-4 text-center">Loading chains...</div>
+        ) : (
+          <div className="space-y-2">
+            {filteredChains.length > 0 ? (
+              filteredChains.map((chain) => (
+                <div 
+                  key={chain.chainId} 
+                  className="flex justify-between items-center p-3 border rounded cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+                  onClick={() => openChainDetails(chain)}
+                >
+                  <div className="flex items-center space-x-3">
+                    {chain.chainLogoUri && (
+                      <img 
+                        src={chain.chainLogoUri} 
+                        alt={`${chain.chainName} logo`} 
+                        className="w-8 h-8 rounded-full"
+                        onError={(e) => {
+                          // Handle image loading errors
+                          (e.target as HTMLImageElement).style.display = 'none';
+                        }}
+                      />
+                    )}
+                    <div>
+                      <div className="font-medium">{chain.chainName}</div>
+                      <div className="text-sm text-gray-500">{chain.networkToken.symbol}</div>
+                    </div>
+                  </div>
+                  <div 
+                    onClick={(e) => {
+                      e.stopPropagation(); // Prevent opening the modal
+                      handleAddToWallet(chain);
+                    }}
+                  >
+                    <Button
+                      type="secondary"
+                      loading={addingChainId === chain.chainId}
+                    >
+                      {Number(chain.chainId) === walletChainId ? 'Connected' : 'Add to Wallet'}
+                    </Button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="text-center py-4">
+                {searchTerm ? 
+                  `No chains found matching "${searchTerm}"` : 
+                  "No chains found for this network type"
+                }
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Chain details modal */}
+      {selectedChain && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-xl flex flex-col max-h-[85vh]">
+            {/* Modal header */}
+            <div className="p-4 border-b flex justify-between items-center flex-shrink-0">
+              <div className="flex items-center space-x-3">
+                {selectedChain.chainLogoUri && (
+                  <img 
+                    src={selectedChain.chainLogoUri} 
+                    alt={`${selectedChain.chainName} logo`} 
+                    className="w-8 h-8 rounded-full"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                    }}
+                  />
+                )}
+                <h3 className="text-lg font-semibold">{selectedChain.chainName}</h3>
+              </div>
+              <button 
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                onClick={closeChainDetails}
+              >
+                ✕
+              </button>
+            </div>
+            
+            {/* Modal content - scrollable */}
+            <div className="p-4 overflow-auto flex-grow">
+              {/* Description section */}
+              <div className="mb-4">
+                <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h4>
+                <div className="bg-gray-50 dark:bg-gray-900/30 p-3 rounded-md text-gray-600 dark:text-gray-400 text-sm max-h-[100px] overflow-auto">
+                  {selectedChain.description || "No description available"}
+                </div>
+              </div>
+              
+              {/* Chain Details */}
+              <div className="mb-4">
+                <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">Chain Details</h4>
+                <div className="bg-gray-50 dark:bg-gray-900/30 p-3 rounded-md">
+                  <CopyableField label="Chain ID" value={selectedChain.chainId} fieldId="chainId" />
+                  <Field label="Network" value={selectedChain.isTestnet ? "Testnet" : "Mainnet"} />
+                  <Field label="Status" value={selectedChain.status} />
+                  {selectedChain.platformChainId && (
+                    <CopyableField 
+                      label="Platform Chain ID" 
+                      value={selectedChain.platformChainId} 
+                      fieldId="platformChainId" 
+                    />
+                  )}
+                  {selectedChain.subnetId && (
+                    <CopyableField 
+                      label="Subnet ID" 
+                      value={selectedChain.subnetId} 
+                      fieldId="subnetId" 
+                    />
+                  )}
+                </div>
+              </div>
+              
+              {/* Network Token */}
+              <div className="mb-4">
+                <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">Network Token</h4>
+                <div className="bg-gray-50 dark:bg-gray-900/30 p-3 rounded-md">
+                  <Field 
+                    label="Name" 
+                    value={selectedChain.networkToken.name} 
+                  />
+                  <Field label="Symbol" value={selectedChain.networkToken.symbol} />
+                  <Field label="Decimals" value={selectedChain.networkToken.decimals} />
+                </div>
+              </div>
+              
+              {/* URLs */}
+              <div className="mb-4">
+                <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">URLs</h4>
+                <div className="bg-gray-50 dark:bg-gray-900/30 p-3 rounded-md">
+                  <CopyableField label="RPC URL" value={selectedChain.rpcUrl} fieldId="rpcUrl" />
+                  {selectedChain.wsUrl && (
+                    <CopyableField label="WebSocket URL" value={selectedChain.wsUrl} fieldId="wsUrl" />
+                  )}
+                  {selectedChain.explorerUrl && (
+                    <UrlField label="Explorer URL" url={selectedChain.explorerUrl} />
+                  )}
+                </div>
+              </div>
+            </div>
+            
+            {/* Modal footer - sticky */}
+            <div className="p-4 border-t flex justify-end flex-shrink-0 bg-white dark:bg-gray-800">
+              <Button
+                type="primary"
+                onClick={() => handleAddToWallet(selectedChain)}
+                loading={addingChainId === selectedChain.chainId}
+              >
+                {Number(selectedChain.chainId) === walletChainId ? 'Connected' : 'Add to Wallet'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file