Skip to content

createChain cleanup #3480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
owenwahlgren wants to merge 1 commit into from
Closed

createChain cleanup #3480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 11 additions & 18 deletions components/toolbox/components/genesis/ChainConfigStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,21 @@ export function ChainConfigStep({ chainName, onChainNameChange, vmId, onVmIdChan
};

return (
<div className="space-y-6 text-[13px]">
<div className="space-y-5 text-[13px]">
<div className="space-y-4">
{/* Chain Name */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
<div className="flex items-center justify-between mb-1.5">
<label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">
Chain Name
</label>
<button
type="button"
onClick={handleGenerateRandomName}
className="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors cursor-pointer active:scale-95"
className="text-xs text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors cursor-pointer"
style={{ pointerEvents: 'auto' }}
>
Generate Random
Randomize
</button>
</div>
<Input
Expand All @@ -81,16 +81,9 @@ export function ChainConfigStep({ chainName, onChainNameChange, vmId, onVmIdChan

{/* Virtual Machine Selection */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
Virtual Machine
</label>
{!showVMIdInput && (
<span className="text-xs text-zinc-500 dark:text-zinc-400 font-mono">
{SUBNET_EVM_VM_ID.slice(0, 8)}...
</span>
)}
</div>
<label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">
Virtual Machine
</label>
<Select
label=""
value={showVMIdInput ? 'custom' : 'standard'}
Expand All @@ -110,16 +103,16 @@ export function ChainConfigStep({ chainName, onChainNameChange, vmId, onVmIdChan

{/* Custom VM ID Input */}
{showVMIdInput && (
<div className="space-y-2 p-3 bg-zinc-50 dark:bg-zinc-900/50 rounded-lg border border-zinc-200 dark:border-zinc-800">
<div className="space-y-2 pt-2">
<Input
label="Custom VM ID"
value={vmId}
onChange={onVmIdChange}
placeholder={SUBNET_EVM_VM_ID}
className="font-mono text-sm"
/>
<p className="text-xs text-zinc-500 dark:text-zinc-400">
Enter a custom VM ID or use the standard Subnet-EVM ID above
<p className="text-xs text-zinc-400 dark:text-zinc-500">
Enter a custom VM ID
</p>
</div>
)}
Expand Down
22 changes: 5 additions & 17 deletions components/toolbox/components/genesis/FeeConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import { RawInput } from "../Input";
import { Info } from "lucide-react";
import { ValidationMessages } from "./types";
import { useGenesisHighlight } from "./GenesisHighlightContext";

Expand Down Expand Up @@ -203,10 +202,9 @@ function FeeConfigBase({
}, [gasLimitInput, gasLimit, minBaseFeeInput, feeConfig, baseFeeChangeDenominatorInput, minBlockGasCostInput, maxBlockGasCostInput, blockGasCostStepInput, targetGasInput]);

return (
<div className="space-y-6">
<div className="space-y-4">
{/* Advanced Mode with All Fields */}
<div className="bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-md p-3">
<h4 className="text-[13px] font-medium mb-2">Fee Configuration</h4>
<div>
<div className={`grid grid-cols-1 md:grid-cols-2 ${compact ? 'gap-3' : 'gap-4'}`}>
<div key="gasLimit">
<Field
Expand Down Expand Up @@ -303,19 +301,9 @@ function FeeConfigBase({
</div>

{/* Static Gas Price Info */}
<div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-md p-3 mt-3">
<div className="flex gap-2">
<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
<div className="text-xs space-y-1">
<div className="font-medium text-blue-900 dark:text-blue-100">Tip: Static Gas Price</div>
<div className="text-blue-800 dark:text-blue-200">
For static gas pricing (no congestion-based adjustments), set Target Gas &gt; (Gas Limit × 10 ÷ Block Time).
Current threshold: &gt;{Math.ceil((gasLimit * 10) / targetBlockRate)} gas (~{Math.ceil((gasLimit * 10) / targetBlockRate / 1000000)}M).
Useful for permissioned chains where congestion pricing isn't needed.
</div>
</div>
</div>
</div>
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
For static gas pricing, set Target Gas &gt; {Math.ceil((gasLimit * 10) / targetBlockRate).toLocaleString()}.
</p>
</div>
{/* Dynamic fee/reward sections removed; these are now configured under Precompiles. */}
</div>
Expand Down
20 changes: 10 additions & 10 deletions components/toolbox/components/genesis/GenesisWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ function GenesisWizardContent({ children, genesisData, onGenesisDataChange, foot
// Mobile/Embedded layout - stacked view with always-visible JSON preview and scroll-to-highlight
return (
<div className="space-y-6">
<div className="bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800 p-6">
<div>
{children}
</div>

{genesisData && genesisData.length > 0 && !genesisData.startsWith("Error:") && (
<div className="bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800">
<div className="px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between bg-zinc-50 dark:bg-zinc-900/50">
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Genesis JSON Preview</span>
<span className="text-xs text-zinc-500 dark:text-zinc-400">
<div className="rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-800">
<div className="px-4 py-2.5 flex items-center justify-between bg-zinc-50 dark:bg-zinc-900/50 border-b border-zinc-200 dark:border-zinc-800">
<span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Genesis JSON</span>
<span className="text-xs text-zinc-500 dark:text-zinc-500">
{(new Blob([genesisData]).size / 1024).toFixed(2)} KiB
</span>
</div>
Expand All @@ -61,15 +61,15 @@ function GenesisWizardContent({ children, genesisData, onGenesisDataChange, foot

// Desktop layout - split view with global footer
return (
<div className="flex flex-col bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800">
<div className="flex">
<div className="flex flex-col">
<div className="flex gap-6">
{/* Left Panel - Configuration */}
<div className="flex-1 p-5 bg-white dark:bg-zinc-950 text-[13px]">
<div className="flex-1 min-w-0 text-[13px] pr-4">
{children}
</div>

{/* Right Panel - JSON Preview */}
<div className="w-[640px] xl:w-[720px] border-l border-zinc-200 dark:border-zinc-800 sticky top-4 self-start">
<div className="w-[480px] xl:w-[560px] flex-shrink-0 border-l border-zinc-200 dark:border-zinc-800 sticky top-4 self-start">
<JsonPreviewPanel
jsonData={genesisData}
onJsonUpdate={onGenesisDataChange}
Expand All @@ -79,7 +79,7 @@ function GenesisWizardContent({ children, genesisData, onGenesisDataChange, foot
</div>

{footer && (
<div className="border-t border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-zinc-950/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-zinc-950/60">
<div className="border-t border-zinc-200 dark:border-zinc-800">
<div className="px-4 py-3 flex items-center justify-center">
{footer}
</div>
Expand Down
60 changes: 21 additions & 39 deletions components/toolbox/components/genesis/JsonPreviewPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,55 +313,37 @@ export function JsonPreviewPanel({
const barClass = percent >= 90 ? 'bg-red-500' : percent >= 75 ? 'bg-yellow-500' : 'bg-green-500';

return (
<div className="flex flex-col max-h-[calc(100vh-8rem)] border-l border-zinc-200 dark:border-zinc-800">
<div className="flex flex-col max-h-[calc(100vh-8rem)]">
{/* Header */}
<div className="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
<div className="flex items-start justify-between">
<div>
<h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
{isValidJson ? `${jsonSizeKiB.toFixed(2)} KiB / ${maxSizeKiB} KiB • ${statusText}` : 'Awaiting configuration'}
</p>
<div className="px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="text-xs font-medium text-zinc-600 dark:text-zinc-400 font-mono">genesis.json</span>
{isValidJson && (
<span className="text-xs text-zinc-400 dark:text-zinc-500">
{jsonSizeKiB.toFixed(1)} / {maxSizeKiB} KiB
</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
<div className="flex items-center gap-1">
<button
onClick={handleCopy}
disabled={!isValidJson}
className="h-8"
className="p-1.5 rounded hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
title="Copy"
>
{copied ? (
<>
<Check className="h-4 w-4 mr-1 text-green-500" />
Copied
</>
) : (
<>
<Copy className="h-4 w-4 mr-1" />
Copy
</>
)}
</Button>
<Button
variant="outline"
size="sm"
{copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
</button>
<button
onClick={handleDownload}
disabled={!isValidJson}
className="h-8"
className="p-1.5 rounded hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
title="Download"
>
<Download className="h-4 w-4 mr-1" />
Download
</Button>
<Download className="h-3.5 w-3.5" />
</button>
</div>
</div>
{isValidJson && (
<div className="mt-2">
<div className="w-full h-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800">
<div className={`h-1.5 rounded-full transition-all duration-300 ${barClass}`} style={{ width: `${percent}%` }} />
</div>
</div>
)}
</div>

{/* JSON Content */}
Expand Down
63 changes: 24 additions & 39 deletions components/toolbox/components/genesis/SubnetStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { useState } from "react";
import { Button } from "@/components/toolbox/components/Button";
import { Input } from "@/components/toolbox/components/Input";
import InputSubnetId from "@/components/toolbox/components/InputSubnetId";
import { useWalletStore } from "@/components/toolbox/stores/walletStore";
import { useConnectedWallet } from "@/components/toolbox/contexts/ConnectedWalletContext";
Expand Down Expand Up @@ -37,54 +36,40 @@ export function SubnetStep({ subnetId, onSubnetIdChange }: SubnetStepProps) {
}

return (
<div className="space-y-6 text-[13px]">
<div className="space-y-5 text-[13px]">
<div>
<h2 className="text-[14px] font-semibold mb-1">Create or Select a Subnet</h2>
<p className="text-[12px] text-zinc-500 dark:text-zinc-400">
Create a new Subnet or enter an existing Subnet ID.
<h2 className="text-sm font-semibold mb-1">Subnet</h2>
<p className="text-xs text-zinc-500 dark:text-zinc-400">
Create a new Subnet or use an existing one.
</p>
</div>

<div className="space-y-4">
{/* Create New Subnet Option */}
<div className="space-y-3">
<h3 className="text-[13px] font-medium text-zinc-700 dark:text-zinc-300">Create New Subnet</h3>
<Input
label="Subnet Owner"
value={pChainAddress}
disabled={true}
type="text"
/>
<Button
onClick={handleCreateSubnet}
loading={isCreatingSubnet}
loadingText="Creating Subnet..."
variant="primary"
className="w-full"
>
Create Subnet
</Button>
</div>
<Button
onClick={handleCreateSubnet}
loading={isCreatingSubnet}
loadingText="Creating Subnet..."
variant="primary"
className="w-full"
>
Create Subnet
</Button>

<div className="flex items-center gap-3 my-6">
<div className="flex items-center gap-3">
<div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-800"></div>
<span className="text-xs text-zinc-500 dark:text-zinc-400">or</span>
<span className="text-xs text-zinc-400 dark:text-zinc-500">or</span>
<div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-800"></div>
</div>

{/* Use Existing Subnet Option */}
<div className="space-y-3">
<h3 className="text-[13px] font-medium text-zinc-700 dark:text-zinc-300">Use Existing Subnet</h3>
<InputSubnetId
id="create-chain-subnet-id"
label=""
value={subnetId}
onChange={onSubnetIdChange}
validationDelayMs={3000}
hideSuggestions={true}
placeholder="Enter an existing Subnet ID"
/>
</div>
<InputSubnetId
id="create-chain-subnet-id"
label=""
value={subnetId}
onChange={onSubnetIdChange}
validationDelayMs={3000}
hideSuggestions={true}
placeholder="Enter existing Subnet ID"
/>
</div>
</div>
);
Expand Down
Loading