SelectSubnet, SelectBlockchain, inputSubnetId & useAvaCloudSDK

components/tools/common/api/validator-info.ts

@@ -1,7 +1,11 @@
 import { Validator, SubnetInfo, L1ValidatorManagerDetails } from './types';
 import { pChainEndpoint } from './consts';
 import { AvaCloudSDK } from "@avalabs/avacloud-sdk";
+import { useWalletStore } from "../../../../toolbox/src/stores/walletStore";
+const { isTestnet } = useWalletStore();
+
 export const avaCloudSDK = new AvaCloudSDK({
+    serverURL: isTestnet ? "https://api.avax-test.network" : "https://api.avax.network",
     chainId: "43114",
     network: "fuji",
 });

package.json

@@ -11,7 +11,7 @@
     "postinstall": "prisma generate && fumadocs-mdx && cd toolbox && yarn"
   },
   "dependencies": {
-    "@avalabs/avacloud-sdk": "0.8.7",
+    "@avalabs/avacloud-sdk": "0.12.1",
     "@avalabs/avalanchejs": "^5.0.0",
     "@fumadocs/mdx-remote": "^1.2.0",
     "@hookform/resolvers": "^4.1.3",
@@ -129,4 +129,4 @@
     "typescript": "^5.8.2"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

toolbox/package.json

@@ -26,7 +26,7 @@
     "postinstall": "node update_docker_tags.js"
   },
   "dependencies": {
-    "@avalabs/avacloud-sdk": "^0.9.0",
+    "@avalabs/avacloud-sdk": "^0.12.1",
     "@avalabs/avalanchejs": "^4.1.2-alpha.4",
     "@radix-ui/react-alert-dialog": "^1.1.13",
     "@radix-ui/react-checkbox": "^1.2.3",
@@ -77,4 +77,4 @@
     "vite": "^6.1.6",
     "vite-plugin-dts": "^4.5.0"
   }
-}
+}

toolbox/src/components/InputSubnetId.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { Input, type Suggestion } from "./Input";
+import { useL1ListStore } from "../stores/l1ListStore";
+import { useCreateChainStore } from "../stores/createChainStore";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import { utils } from "@avalabs/avalanchejs";
+import { useAvaCloudSDK } from "../stores/useAvaCloudSDK";
+
+// Primary network subnet ID
+export const PRIMARY_NETWORK_SUBNET_ID = "11111111111111111111111111111111LpoYY";
+
+export default function InputSubnetId({
+    value,
+    onChange,
+    error,
+    label = "Subnet ID",
+    hidePrimaryNetwork = true,
+    helperText,
+    id,
+    validationDelayMs = 500,
+    readOnly = false,
+    hideSuggestions = false,
+    placeholder
+}: {
+    value: string,
+    onChange: (value: string) => void,
+    error?: string | null,
+    label?: string,
+    hidePrimaryNetwork?: boolean
+    helperText?: string | null
+    id?: string
+    validationDelayMs?: number
+    readOnly?: boolean
+    hideSuggestions?: boolean
+    placeholder?: string
+}) {
+    const createChainStoreSubnetId = useCreateChainStore()(state => state.subnetId);
+    const { l1List } = useL1ListStore()();
+    const { getSubnetById } = useAvaCloudSDK();
+
+    const [validationError, setValidationError] = useState<string | null>(null);
+
+    // Validate subnet ID format and checksum using Base58Check
+    const validateBase58Format = (subnetId: string): boolean => {
+        try {
+            // Validate Base58Check format and checksum (last 4 bytes)
+            utils.base58check.decode(subnetId);
+            return true;
+        } catch (error) {
+            return false;
+        }
+    };
+
+    // Validate subnet ID using AvaCloud SDK
+    const validateSubnetId = useCallback(async (subnetId: string) => {
+        if (!subnetId || subnetId.length < 10) {
+            setValidationError(null);
+            return;
+        }
+
+        // First validate Base58Check format and checksum
+        if (!validateBase58Format(subnetId)) {
+            setValidationError("Invalid subnet ID format or checksum");
+            return;
+        }
+
+        try {
+            setValidationError(null);
+
+            await getSubnetById({ subnetId });
+
+            // If we get here, the subnet exists
+            setValidationError(null);
+        } catch (error) {
+            // Show validation error for invalid subnet IDs
+            setValidationError("Subnet ID not found or invalid");
+        }
+    }, [getSubnetById]);
+
+    // Validate when value changes
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (value) {
+                validateSubnetId(value);
+            } else {
+                setValidationError(null);
+            }
+        }, validationDelayMs); // Wait for subnet to be available before validation
+
+        return () => clearTimeout(timeoutId);
+    }, [value, validateSubnetId, validationDelayMs]);
+
+    const subnetIdSuggestions: Suggestion[] = useMemo(() => {
+        const result: Suggestion[] = [];
+        const seen = new Set<string>();
+
+        // Add subnet from create chain store first
+        if (createChainStoreSubnetId && !(hidePrimaryNetwork && createChainStoreSubnetId === PRIMARY_NETWORK_SUBNET_ID)) {
+            result.push({
+                title: createChainStoreSubnetId,
+                value: createChainStoreSubnetId,
+                description: "The Subnet that you have just created in the \"Create Chain\" tool"
+            });
+            seen.add(createChainStoreSubnetId);
+        }
+
+        // Add subnets from L1 list
+        for (const l1 of l1List) {
+            const { subnetId, name } = l1;
+
+            if (!subnetId || seen.has(subnetId)) continue;
+
+            if (hidePrimaryNetwork && subnetId === PRIMARY_NETWORK_SUBNET_ID) {
+                continue;
+            }
+
+            result.push({
+                title: `${name} (${subnetId})`,
+                value: subnetId,
+                description: l1.description || "A subnet that was added to your L1 list.",
+            });
+
+            seen.add(subnetId);
+        }
+
+        return result;
+    }, [createChainStoreSubnetId, l1List, hidePrimaryNetwork]);
+
+    // Combine validation error with passed error
+    const combinedError = error || validationError;
+
+    return (
+        <Input
+            id={id}
+            label={label}
+            value={value}
+            onChange={onChange}
+            suggestions={readOnly || hideSuggestions ? [] : subnetIdSuggestions}
+            error={combinedError}
+            helperText={helperText}
+            placeholder={
+                readOnly
+                    ? "Automatically filled from Blockchain ID"
+                    : placeholder || "Enter subnet ID"
+            }
+            disabled={readOnly}
+        />
+    );
+} 

toolbox/src/components/SelectBlockchain.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import SelectBlockchainId from "./SelectBlockchainId";
+import { useState, useCallback } from "react";
+import { useWalletStore } from "../stores/walletStore";
+import { networkIDs } from "@avalabs/avalanchejs";
+
+// API Response type from AvaCloud - matches the official API response
+export type BlockchainApiResponse = {
+    createBlockTimestamp: number;
+    createBlockNumber: string;
+    blockchainId: string;
+    vmId: string;
+    subnetId: string;
+    blockchainName: string;
+    evmChainId: number;
+}
+
+// Extended type with additional metadata
+export type BlockchainInfo = BlockchainApiResponse & {
+    isTestnet: boolean;
+}
+
+export type BlockchainSelection = {
+    blockchainId: string;
+    blockchain: BlockchainInfo | null;
+}
+
+// Import the unified details display component
+import BlockchainDetailsDisplay from "./BlockchainDetailsDisplay";
+
+export default function SelectBlockchain({
+    value,
+    onChange,
+    error,
+    label = "Select Avalanche Blockchain ID"
+}: {
+    value: string,
+    onChange: (selection: BlockchainSelection) => void,
+    error?: string | null,
+    label?: string
+}) {
+    const { avalancheNetworkID } = useWalletStore();
+    const [blockchainDetails, setBlockchainDetails] = useState<Record<string, BlockchainInfo>>({});
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Network names for API calls  
+    const networkNames: Record<number, string> = {
+        [networkIDs.MainnetID]: "mainnet",
+        [networkIDs.FujiID]: "fuji",
+    };
+
+    // Fetch blockchain details when needed
+    const fetchBlockchainDetails = useCallback(async (blockchainId: string) => {
+        if (!blockchainId || blockchainDetails[blockchainId]) return;
+
+        try {
+            const network = networkNames[Number(avalancheNetworkID)];
+            if (!network) return;
+
+            setIsLoading(true);
+
+            // Use direct API call as shown in AvaCloud documentation
+            // https://developers.avacloud.io/data-api/primary-network/get-blockchain-details-by-id
+            const response = await fetch(`https://glacier-api.avax.network/v1/networks/${network}/blockchains/${blockchainId}`, {
+                method: 'GET',
+                headers: {
+                    'accept': 'application/json',
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch blockchain details: ${response.statusText}`);
+            }
+
+            const blockchain: BlockchainApiResponse = await response.json();
+
+            setBlockchainDetails(prev => ({
+                ...prev,
+                [blockchainId]: {
+                    ...blockchain,
+                    isTestnet: network === "fuji"
+                }
+            }));
+        } catch (error) {
+            console.error(`Error fetching blockchain details for ${blockchainId}:`, error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [avalancheNetworkID, networkNames, blockchainDetails]);
+
+    // Handle value change and fetch details if needed
+    const handleValueChange = useCallback((newValue: string) => {
+        if (newValue && !blockchainDetails[newValue]) {
+            fetchBlockchainDetails(newValue);
+        }
+
+        onChange({
+            blockchainId: newValue,
+            blockchain: blockchainDetails[newValue] || null
+        });
+    }, [fetchBlockchainDetails, blockchainDetails, onChange]);
+
+    // Get current blockchain details for display
+    const currentBlockchain = value ? blockchainDetails[value] || null : null;
+    const isLoadingCurrent = value && !blockchainDetails[value] && isLoading;
+
+    return (
+        <div>
+            <SelectBlockchainId
+                value={value}
+                onChange={handleValueChange}
+                error={error}
+                label={label}
+            />
+
+            {/* Display blockchain details when a blockchain is selected */}
+            {value && <BlockchainDetailsDisplay blockchain={currentBlockchain} isLoading={!!isLoadingCurrent} />}
+        </div>
+    );
+} 

toolbox/src/components/SelectChainID.tsx → toolbox/src/components/SelectBlockchainId.tsx

@@ -5,14 +5,14 @@ import { useMemo } from "react";
 import { cn } from "../lib/utils";
 import { Globe } from 'lucide-react';
 
-interface ChainOption {
+interface BlockchainOption {
     id: string;
     name: string;
     description: string;
     logoUrl?: string;
 }
 
-export default function SelectChainID({
+export default function SelectBlockchainId({
     value,
     onChange,
     error,
@@ -28,8 +28,8 @@ export default function SelectChainID({
     const { l1List } = useL1ListStore()();
     const selectId = useId();
 
-    const options: ChainOption[] = useMemo(() => {
-        const result: ChainOption[] = [];
+    const options: BlockchainOption[] = useMemo(() => {
+        const result: BlockchainOption[] = [];
 
         if (createChainStorechainID) {
             result.push({
@@ -90,7 +90,7 @@ export default function SelectChainID({
                             </div>
                         </div>
                     ) : (
-                        <div className="text-zinc-400 dark:text-zinc-500">Select a chain ID</div>
+                        <div className="text-zinc-400 dark:text-zinc-500">Select a blockchain ID</div>
                     )}
                 </button>
 
@@ -129,4 +129,4 @@ export default function SelectChainID({
             {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
         </div>
     );
-}
+}