Skip to content

Commit c737207

Browse files
author
Devrikh
committed
docs: explain DebugContracts role in debug contract flow
1 parent 9ddf580 commit c737207

File tree

2 files changed

+25
-178
lines changed

2 files changed

+25
-178
lines changed

‎packages/nextjs/app/debug/_components/ContractUI.tsx‎

Lines changed: 9 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
/**
2-
* ContractUI
3-
*
4-
* Client-side wrapper component for rendering an interactive UI
5-
* for a deployed smart contract.
6-
*
7-
* High-level flow:
8-
* 1. Receives a contract name as input
9-
* 2. Determines the currently selected target network
10-
* 3. Fetches deployed contract metadata (ABI + address) for that network
11-
* 4. Displays a loading state while contract data is being resolved
12-
* 5. Renders a generic Contract UI once deployment data is available
13-
*
14-
* This component acts as a bridge between network configuration,
15-
* deployed contract information, and the debug contract interaction UI.
16-
*/
171
"use client";
182

193
// @refresh reset
@@ -25,171 +9,18 @@ import { ContractName } from "~~/utils/scaffold-eth/contract";
259
/**
2610
* ContractUI
2711
*
28-
* Client-side wrapper component for rendering an interactive UI
29-
* for a deployed smart contract.
30-
*
31-
* High-level flow:
32-
* 1. Receives a contract name as input
33-
* 2. Determines the currently selected target network
34-
* 3. Fetches deployed contract metadata (ABI + address) for that network
35-
* 4. Displays a loading state while contract data is being resolved
36-
* 5. Renders a generic Contract UI once deployment data is available
37-
*
38-
* This component acts as a bridge between network configuration,
39-
* deployed contract information, and the debug contract interaction UI.
40-
*/
41-
42-
/**
43-
* ContractUI
44-
*
45-
* Client-side wrapper component for rendering an interactive UI
46-
* for a deployed smart contract.
47-
*
48-
* High-level flow:
49-
* 1. Receives a contract name as input
50-
* 2. Determines the currently selected target network
51-
* 3. Fetches deployed contract metadata (ABI + address) for that network
52-
* 4. Displays a loading state while contract data is being resolved
53-
* 5. Renders a generic Contract UI once deployment data is available
54-
*
55-
* This component acts as a bridge between network configuration,
56-
* deployed contract information, and the debug contract interaction UI.
57-
*/
58-
59-
/**
60-
* ContractUI
61-
*
62-
* Client-side wrapper component for rendering an interactive UI
63-
* for a deployed smart contract.
64-
*
65-
* High-level flow:
66-
* 1. Receives a contract name as input
67-
* 2. Determines the currently selected target network
68-
* 3. Fetches deployed contract metadata (ABI + address) for that network
69-
* 4. Displays a loading state while contract data is being resolved
70-
* 5. Renders a generic Contract UI once deployment data is available
71-
*
72-
* This component acts as a bridge between network configuration,
73-
* deployed contract information, and the debug contract interaction UI.
74-
*/
75-
76-
/**
77-
* ContractUI
78-
*
79-
* Client-side wrapper component for rendering an interactive UI
80-
* for a deployed smart contract.
81-
*
82-
* High-level flow:
83-
* 1. Receives a contract name as input
84-
* 2. Determines the currently selected target network
85-
* 3. Fetches deployed contract metadata (ABI + address) for that network
86-
* 4. Displays a loading state while contract data is being resolved
87-
* 5. Renders a generic Contract UI once deployment data is available
88-
*
89-
* This component acts as a bridge between network configuration,
90-
* deployed contract information, and the debug contract interaction UI.
91-
*/
92-
93-
/**
94-
* ContractUI
95-
*
96-
* Client-side wrapper component for rendering an interactive UI
97-
* for a deployed smart contract.
98-
*
99-
* High-level flow:
100-
* 1. Receives a contract name as input
101-
* 2. Determines the currently selected target network
102-
* 3. Fetches deployed contract metadata (ABI + address) for that network
103-
* 4. Displays a loading state while contract data is being resolved
104-
* 5. Renders a generic Contract UI once deployment data is available
105-
*
106-
* This component acts as a bridge between network configuration,
107-
* deployed contract information, and the debug contract interaction UI.
108-
*/
109-
110-
/**
111-
* ContractUI
112-
*
113-
* Client-side wrapper component for rendering an interactive UI
114-
* for a deployed smart contract.
115-
*
116-
* High-level flow:
117-
* 1. Receives a contract name as input
118-
* 2. Determines the currently selected target network
119-
* 3. Fetches deployed contract metadata (ABI + address) for that network
120-
* 4. Displays a loading state while contract data is being resolved
121-
* 5. Renders a generic Contract UI once deployment data is available
122-
*
123-
* This component acts as a bridge between network configuration,
124-
* deployed contract information, and the debug contract interaction UI.
125-
*/
126-
127-
/**
128-
* ContractUI
129-
*
130-
* Client-side wrapper component for rendering an interactive UI
131-
* for a deployed smart contract.
132-
*
133-
* High-level flow:
134-
* 1. Receives a contract name as input
135-
* 2. Determines the currently selected target network
136-
* 3. Fetches deployed contract metadata (ABI + address) for that network
137-
* 4. Displays a loading state while contract data is being resolved
138-
* 5. Renders a generic Contract UI once deployment data is available
139-
*
140-
* This component acts as a bridge between network configuration,
141-
* deployed contract information, and the debug contract interaction UI.
142-
*/
143-
144-
/**
145-
* ContractUI
146-
*
147-
* Client-side wrapper component for rendering an interactive UI
148-
* for a deployed smart contract.
149-
*
150-
* High-level flow:
151-
* 1. Receives a contract name as input
152-
* 2. Determines the currently selected target network
153-
* 3. Fetches deployed contract metadata (ABI + address) for that network
154-
* 4. Displays a loading state while contract data is being resolved
155-
* 5. Renders a generic Contract UI once deployment data is available
156-
*
157-
* This component acts as a bridge between network configuration,
158-
* deployed contract information, and the debug contract interaction UI.
159-
*/
160-
161-
/**
162-
* ContractUI
163-
*
164-
* Client-side wrapper component for rendering an interactive UI
165-
* for a deployed smart contract.
166-
*
167-
* High-level flow:
168-
* 1. Receives a contract name as input
169-
* 2. Determines the currently selected target network
170-
* 3. Fetches deployed contract metadata (ABI + address) for that network
171-
* 4. Displays a loading state while contract data is being resolved
172-
* 5. Renders a generic Contract UI once deployment data is available
173-
*
174-
* This component acts as a bridge between network configuration,
175-
* deployed contract information, and the debug contract interaction UI.
176-
*/
177-
178-
/**
179-
* ContractUI
180-
*
181-
* Client-side wrapper component for rendering an interactive UI
12+
* Client-side wrapper component that renders an interactive UI
18213
* for a deployed smart contract.
18314
*
184-
* High-level flow:
185-
* 1. Receives a contract name as input
186-
* 2. Determines the currently selected target network
187-
* 3. Fetches deployed contract metadata (ABI + address) for that network
188-
* 4. Displays a loading state while contract data is being resolved
189-
* 5. Renders a generic Contract UI once deployment data is available
15+
* Behavior:
16+
* - Accepts a contract name as input
17+
* - Resolves the active target network
18+
* - Loads deployed contract metadata (ABI and address)
19+
* - Shows a loading indicator while data is being fetched
20+
* - Renders a generic contract interaction UI once ready
19021
*
191-
* This component acts as a bridge between network configuration,
192-
* deployed contract information, and the debug contract interaction UI.
22+
* Acts as a bridge between network configuration, deployed
23+
* contract information, and the debug contract interaction UI.
19324
*/
19425

19526
type ContractUIProps = {

‎packages/nextjs/app/debug/_components/DebugContracts.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,22 @@ import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
88
import { ContractName, GenericContract } from "~~/utils/scaffold-eth/contract";
99
import { useAllContracts } from "~~/utils/scaffold-eth/contractsData";
1010

11+
/**
12+
* DebugContracts
13+
*
14+
* Main client-side container for the debug contracts page.
15+
*
16+
* Responsibilities:
17+
* - Fetches all deployed contracts using useAllContracts
18+
* - Sorts and displays available contract names
19+
* - Persists the selected contract in session storage
20+
* - Renders contract selection controls when multiple contracts exist
21+
* - Delegates rendering of the active contract UI to ContractUI
22+
*
23+
* Acts as the orchestration layer between contract metadata and
24+
* the interactive debug contract UI.
25+
*/
26+
1127
const selectedContractStorageKey = "scaffoldEth2.selectedContract";
1228

1329
export function DebugContracts() {

0 commit comments

Comments
 (0)