Merge pull request #4187 from ava-labs/refactor/use-avalanche-sdk

refactor(console): migrate warp helpers to @avalanche-sdk/interchain

Author: owenwahlgren

app/console/layout.tsx

@@ -21,6 +21,7 @@ import { baseOptions } from "@/app/layout.config";
 import { NavbarDropdownInjector } from "@/components/navigation/navbar-dropdown-injector";
 import { StepErrorBoundary } from "@/components/toolbox/components/StepErrorBoundary";
 import { CommandPalette } from "@/components/console/command-palette";
+import { ConsoleFooter } from "@/components/console/console-footer";
 
 function ConsolePageTransition({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -74,6 +75,7 @@ function ConsoleContent({ children }: { children: ReactNode }) {
                 <StepErrorBoundary fallbackMessage="Something went wrong rendering this page. The console sidebar is still available — try navigating to a different tool.">
                   <ConsolePageTransition>{children}</ConsolePageTransition>
                 </StepErrorBoundary>
+                <ConsoleFooter />
               </div>
             </SidebarInset>
             <CommandPalette />

components/console/console-footer.tsx

@@ -0,0 +1,26 @@
+import { Github } from "lucide-react";
+
+export function ConsoleFooter() {
+  return (
+    <footer className="mt-auto pt-6 pb-2 px-1 border-t border-zinc-200 dark:border-zinc-800">
+      <div className="flex flex-col gap-2 text-xs text-zinc-500 dark:text-zinc-400 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex-1 text-left">
+          Crafted with <span aria-hidden>❤️</span> by Ava Labs DevRel team.
+        </div>
+        <div className="flex-1 flex justify-center">
+          <a
+            href="https://github.com/ava-labs/avalanche-sdk-typescript"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
+          >
+            <span>powered by</span>
+            <span className="font-mono">avalanche-sdk-typescript</span>
+            <Github className="size-3.5" />
+          </a>
+        </div>
+        <div className="flex-1 text-right">© 2026 Ava Labs, Inc.</div>
+      </div>
+    </footer>
+  );
+}

components/explorer/utils/chainConverter.ts

@@ -1,6 +1,6 @@
 import { L1Chain } from "@/types/stats";
 import { L1ListItem } from "@/components/toolbox/stores/l1ListStore";
-import { cb58ToHex } from "@/components/tools/common/utils/cb58";
+import { CB58ToHex } from "@avalanche-sdk/client/utils";
 
 /**
  * Converts an L1ListItem (from localStorage/console) to L1Chain format (for explorer)
@@ -16,7 +16,7 @@ export function convertL1ListItemToL1Chain(item: L1ListItem): L1Chain {
     chainId: String(item.evmChainId),
     chainName: item.name,
     chainLogoURI: item.logoUrl || "",
-    blockchainId: cb58ToHex(item.id), // The L1ListItem.id IS the blockchain ID (cb58 format)
+    blockchainId: CB58ToHex(item.id), // The L1ListItem.id IS the blockchain ID (cb58 format)
     subnetId: item.subnetId,
     slug,
     color: "#3B82F6", // Default blue color for console chains

components/toolbox/components/HostInput.tsx

@@ -27,7 +27,12 @@ const validateDomainOrIP = (value: string): string | null => {
 
 export const nipify = (domain: string): string => {
   if (isValidIPv4(domain)) {
-    return `${domain}.sslip.io`;
+    // nip.io instead of sslip.io: as of 2026-05-21 sslip.io's shared
+    // Let's Encrypt zone is rate-limited (HTTP 429 "too many certificates"
+    // — 250k cert cap per registered domain over 168h), so Caddy retries
+    // forever on the docker-generated reverse proxy. nip.io resolves the
+    // same `<ip>.<domain>` → ip but lives under a non-rate-limited zone.
+    return `${domain}.nip.io`;
   }
   return domain;
 };

components/toolbox/components/SelectValidationID.tsx

@@ -1,6 +1,6 @@
 import { Input, type Suggestion } from './Input';
 import { useMemo, useState, useEffect } from 'react';
-import { cb58ToHex, hexToCB58 } from '../console/utilities/format-converter/FormatConverter';
+import { CB58ToHex, hexToCB58 } from '@avalanche-sdk/client/utils';
 import { L1ValidatorDetailsFull } from '@avalabs/avacloud-sdk/models/components';
 import { formatAvaxBalance } from '../coreViem/utils/format';
 import { useAvalancheSDKChainkit } from '../stores/useAvalancheSDKChainkit';
@@ -108,7 +108,7 @@ export default function SelectValidationID({
             mapping[v.validationId] = v.nodeId;
             // Also add hex format for easy lookup
             try {
-              const hexId = '0x' + cb58ToHex(v.validationId);
+              const hexId = CB58ToHex(v.validationId);
               mapping[hexId] = v.nodeId;
             } catch {
               // Skip if conversion fails
@@ -136,7 +136,7 @@ export default function SelectValidationID({
 
       // Build multicall contracts array
       const contracts = validatorsWithId.map((v) => {
-        const hexId = '0x' + cb58ToHex(v.validationId);
+        const hexId = CB58ToHex(v.validationId);
         return {
           address: vmcAddr,
           abi: ValidatorManagerAbi.abi,
@@ -166,7 +166,7 @@ export default function SelectValidationID({
             // Store by both cb58 and hex IDs for easy lookup
             statusMap[v.validationId] = data.status;
             try {
-              const hexId = '0x' + cb58ToHex(v.validationId);
+              const hexId = CB58ToHex(v.validationId);
               statusMap[hexId] = data.status;
             } catch {
               // skip
@@ -187,7 +187,7 @@ export default function SelectValidationID({
     return (
       validationIdToNodeId[value] ||
       (value && value.startsWith('0x') && validationIdToNodeId[value]) ||
-      (value && !value.startsWith('0x') && validationIdToNodeId['0x' + cb58ToHex(value)]) ||
+      (value && !value.startsWith('0x') && validationIdToNodeId[CB58ToHex(value)]) ||
       ''
     );
   }, [value, validationIdToNodeId]);
@@ -214,7 +214,7 @@ export default function SelectValidationID({
         // Add just one version based on the format prop
         if (format === 'hex') {
           try {
-            const hexId = '0x' + cb58ToHex(validator.validationId);
+            const hexId = CB58ToHex(validator.validationId);
             result.push({
               title: `${nodeId}${isSelected ? ' ✓' : ''}`,
               value: hexId,
@@ -245,10 +245,10 @@ export default function SelectValidationID({
     try {
       if (format === 'hex' && !newValue.startsWith('0x')) {
         // Convert CB58 to hex
-        formattedValue = '0x' + cb58ToHex(newValue);
+        formattedValue = CB58ToHex(newValue);
       } else if (format === 'cb58' && newValue.startsWith('0x')) {
         // Convert hex to CB58
-        formattedValue = hexToCB58(newValue.slice(2));
+        formattedValue = hexToCB58(newValue as `0x${string}`);
       }
     } catch {
       // If conversion fails, use the original value
@@ -260,7 +260,7 @@ export default function SelectValidationID({
 
     // If not found directly, try the alternate format
     if (!nodeId) {
-      const alternateFormat = format === 'hex' ? hexToCB58(formattedValue.slice(2)) : '0x' + cb58ToHex(formattedValue);
+      const alternateFormat = format === 'hex' ? hexToCB58(formattedValue as `0x${string}`) : CB58ToHex(formattedValue);
       nodeId = validationIdToNodeId[alternateFormat] || '';
     }
 

components/toolbox/components/ValidatorManagerDetails.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { Copy, Check } from 'lucide-react';
 import { formatEther } from 'viem';
 import { getBlockchainInfo } from '../coreViem/utils/glacier';
-import { hexToCB58 } from '@/components/tools/common/utils/cb58';
+import { hexToCB58 } from '@avalanche-sdk/client/utils';
 import type { StakingDetails } from '@/components/toolbox/contexts/ValidatorManagerContext';
 
 interface ValidatorManagerDetailsProps {
@@ -86,7 +86,7 @@ export function ValidatorManagerDetails({
     setIsLoadingUptimeChainName(true);
     (async () => {
       try {
-        const cb58Id = hexToCB58(uptimeBlockchainID);
+        const cb58Id = hexToCB58(uptimeBlockchainID as `0x${string}`);
         const info = await getBlockchainInfo(cb58Id);
         if (!cancelled) setUptimeChainName(info.blockchainName);
       } catch {
@@ -187,7 +187,7 @@ export function ValidatorManagerDetails({
                   badge={uptimeChainName || (isLoadingUptimeChainName ? 'loading...' : null)}
                   value={(() => {
                     try {
-                      return hexToCB58(staking.settings.uptimeBlockchainID);
+                      return hexToCB58(staking.settings.uptimeBlockchainID as `0x${string}`);
                     } catch {
                       return staking.settings.uptimeBlockchainID;
                     }

components/toolbox/console/create-l1/generateSteps.ts

@@ -58,13 +58,18 @@ function createChainWithAnswers(answers: QuestionnaireAnswers): React.ComponentT
 }
 
 /**
- * Wraps AvalancheGoDockerL1 with Create L1 flow defaults: force validator
- * node type (the user just created a validator set) and hide the node-type
- * selector so RPC/archival options don't clutter the flow.
+ * Wraps AvalancheGoDockerL1 with Create L1 flow defaults. Previously this
+ * pinned `forceNodeType: 'validator'`, which hid the node-type selector
+ * AND the reverse-proxy step (gated on isRPC). For Fuji L1s especially,
+ * users want the combined validator+RPC setup ("Both") so they get both
+ * consensus and an HTTPS RPC endpoint out of the same node.
+ *
+ * Leaving forceNodeType unset lets the component pick its default:
+ *   - testnet → 'archival' = Validator + RPC (proxy step visible)
+ *   - mainnet → 'validator' (proxy hidden; user can flip via the selector)
  */
 function dockerForL1Flow(): React.ComponentType {
   const props: AvalancheGoDockerL1Props = {
-    forceNodeType: 'validator',
     showPrerequisites: true,
   };
   const Target = AvalancheGoDockerL1 as React.ComponentType<AvalancheGoDockerL1Props>;

components/toolbox/console/icm/test-connection/SendICMMessage.tsx

@@ -4,7 +4,7 @@ import { useToolboxStore, useViemChainStore, getToolboxStore } from '@/component
 import { useState, useMemo } from 'react';
 import { makePublicClientForChain } from '@/components/toolbox/hooks/usePublicClientForChain';
 import ICMDemoABI from '@/contracts/example-contracts/compiled/ICMDemo.json';
-import { cb58ToHex } from '@/components/tools/common/utils/cb58';
+import { CB58ToHex } from '@avalanche-sdk/client/utils';
 import SelectBlockchainId from '@/components/toolbox/components/SelectBlockchainId';
 import { useL1ByChainId, useSelectedL1 } from '@/components/toolbox/stores/l1ListStore';
 import { useEffect } from 'react';
@@ -212,7 +212,7 @@ function SendICMMessage({ onSuccess }: BaseConsoleToolProps) {
   const destinationBlockchainIDHex = useMemo(() => {
     if (!targetL1?.id) return undefined;
     try {
-      return cb58ToHex(targetL1.id);
+      return CB58ToHex(targetL1.id);
     } catch (e) {
       console.error('Error decoding destination chain ID:', e);
       return undefined;

components/toolbox/console/ictt/bridge/hooks/useAddCollateral.ts

@@ -6,7 +6,7 @@ import { useContractActions } from '@/components/toolbox/hooks/contracts';
 import { makePublicClientForChain } from '@/components/toolbox/hooks/usePublicClientForChain';
 import ExampleERC20 from '@/contracts/icm-contracts/compiled/ExampleERC20.json';
 import ERC20TokenHomeAbi from '@/contracts/icm-contracts/compiled/ERC20TokenHome.json';
-import { cb58ToHex } from '@/components/tools/common/utils/cb58';
+import { CB58ToHex } from '@avalanche-sdk/client/utils';
 import { useIcttBridgeStore } from '@/components/toolbox/stores/iccttBridgeStore';
 import { useWalletStore } from '@/components/toolbox/stores/walletStore';
 import { useL1ByChainId } from '@/components/toolbox/stores/l1ListStore';
@@ -117,7 +117,7 @@ export function useAddCollateral({ bridge, remote }: UseAddCollateralOptions) {
     setPollAttempts(0);
     setLastError(null);
 
-    const blockchainIDHex = cb58ToHex(remote.l1Id) as Address;
+    const blockchainIDHex = CB58ToHex(remote.l1Id) as Address;
     let attempt = 0;
     let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
     let sawError = false;
@@ -245,7 +245,7 @@ export function useAddCollateral({ bridge, remote }: UseAddCollateralOptions) {
       status: 'pending',
     });
     try {
-      const blockchainIDHex = cb58ToHex(remote.l1Id) as Address;
+      const blockchainIDHex = CB58ToHex(remote.l1Id) as Address;
       const depositTx = (await tokenHome.addCollateral(blockchainIDHex, remote.address, amount)) as Address;
       updateActivity(activityId, { status: 'confirmed', txHash: depositTx, sublabel: 'Collateral added' });
       upsertRemote(bridge.id, { ...remote, collateralizedAt: Date.now() });

components/toolbox/console/ictt/bridge/hooks/useDeployTokenRemote.ts

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import ERC20TokenRemote from '@/contracts/icm-contracts/compiled/ERC20TokenRemote.json';
 import NativeTokenRemote from '@/contracts/icm-contracts/compiled/NativeTokenRemote.json';
-import { cb58ToHex } from '@/components/tools/common/utils/cb58';
+import { CB58ToHex } from '@avalanche-sdk/client/utils';
 import { useContractDeployer } from '@/components/toolbox/hooks/contracts';
 import { useWalletStore } from '@/components/toolbox/stores/walletStore';
 import { useL1ByChainId, useSelectedL1 } from '@/components/toolbox/stores/l1ListStore';
@@ -63,7 +63,7 @@ export function useDeployTokenRemote(remoteL1Id: string | null) {
       return null;
     }
     try {
-      const tokenHomeBlockchainID = cb58ToHex(params.homeL1Id) as Address;
+      const tokenHomeBlockchainID = CB58ToHex(params.homeL1Id) as Address;
       const decimals = params.decimals ?? params.homeDecimals;
 
       const settings = {