Skip to content

Commit e013764

Browse files
kuzdogankuzdogan
committed
Move "Import from" to own component. Show submission response under Etherscan section
1 parent b443f58 commit e013764

File tree

6 files changed

+161
-68
lines changed

6 files changed

+161
-68
lines changed

‎app/components/verification/ImportFromEtherscan.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,13 @@ import { useEtherscanApiKey, getEtherscanApiKey } from "../../utils/etherscanSto
55
import { saveJob } from "../../utils/jobStorage";
66
import { useServerConfig } from "../../contexts/ServerConfigContext";
77
import { useCompilerVersions } from "../../contexts/CompilerVersionsContext";
8+
import type { SubmissionResult } from "../../types/verification";
89

910
interface ImportFromEtherscanProps {
1011
chainId: string;
1112
address: string;
1213
setIsSubmitting: (isSubmitting: boolean) => void;
13-
setSubmissionResult: (
14-
result: {
15-
success: boolean;
16-
verificationId?: string;
17-
error?: string;
18-
} | null
19-
) => void;
14+
setSubmissionResult: (result: SubmissionResult | null) => void;
2015
onImportError: (error: string) => void;
2116
onImportSuccess: (message: string) => void;
2217
}
@@ -61,6 +56,7 @@ export default function ImportFromEtherscan({
6156
setSubmissionResult({
6257
success: true,
6358
verificationId: result.verificationId,
59+
isEtherscanSubmission: true,
6460
});
6561

6662
// Save job to localStorage

‎app/components/verification/ImportSources.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import ImportFromEtherscan from "./ImportFromEtherscan";
2+
import SubmissionResultDisplay from "./SubmissionResultDisplay";
3+
import type { SubmissionResult } from "../../types/verification";
4+
5+
interface ImportSourcesProps {
6+
selectedChainId: string;
7+
contractAddress: string;
8+
setIsSubmitting: (isSubmitting: boolean) => void;
9+
setSubmissionResult: (result: SubmissionResult | null) => void;
10+
submissionResult: SubmissionResult | null;
11+
importError: string | null;
12+
importSuccess: string | null;
13+
onImportError: (error: string) => void;
14+
onImportSuccess: (success: string) => void;
15+
}
16+
17+
export default function ImportSources({
18+
selectedChainId,
19+
contractAddress,
20+
setIsSubmitting,
21+
setSubmissionResult,
22+
submissionResult,
23+
importError,
24+
importSuccess,
25+
onImportError,
26+
onImportSuccess,
27+
}: ImportSourcesProps) {
28+
return (
29+
<div className="bg-white border border-gray-200 rounded-lg p-4 md:p-6">
30+
<h3 className="text-lg font-semibold text-gray-900">Import Sources</h3>
31+
<p className="text-sm text-gray-500 mb-4">
32+
You can import the sources and settings from various places to submit a verification on Sourcify.
33+
</p>
34+
<div className="flex justify-start space-y-3">
35+
<ImportFromEtherscan
36+
chainId={selectedChainId}
37+
address={contractAddress}
38+
setIsSubmitting={setIsSubmitting}
39+
setSubmissionResult={setSubmissionResult}
40+
onImportError={onImportError}
41+
onImportSuccess={onImportSuccess}
42+
/>
43+
</div>
44+
{importError && <div className="mt-3 text-sm text-red-600">{importError}</div>}
45+
{importSuccess && <div className="mt-3 text-sm text-green-600">{importSuccess}</div>}
46+
47+
{/* Etherscan Submission Result */}
48+
{submissionResult && submissionResult.isEtherscanSubmission && (
49+
<div className="mt-4">
50+
<SubmissionResultDisplay
51+
submissionResult={submissionResult}
52+
onClose={() => setSubmissionResult(null)}
53+
showCloseButton={true}
54+
/>
55+
</div>
56+
)}
57+
</div>
58+
);
59+
}

‎app/components/verification/SubmissionResultDisplay.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import type { SubmissionResult } from "../../types/verification";
2+
3+
interface SubmissionResultDisplayProps {
4+
submissionResult: SubmissionResult;
5+
onClose?: () => void;
6+
showCloseButton?: boolean;
7+
}
8+
9+
export default function SubmissionResultDisplay({
10+
submissionResult,
11+
onClose,
12+
showCloseButton = false,
13+
}: SubmissionResultDisplayProps) {
14+
return (
15+
<div
16+
className={`p-4 rounded-md ${showCloseButton ? "relative " : ""}${
17+
submissionResult.success ? "bg-green-50 border border-green-200" : "bg-red-50 border border-red-200"
18+
}`}
19+
>
20+
{/* Close button */}
21+
{showCloseButton && onClose && (
22+
<button
23+
onClick={onClose}
24+
className="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none"
25+
>
26+
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
27+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
28+
</svg>
29+
</button>
30+
)}
31+
32+
{submissionResult.success ? (
33+
<div className={`flex flex-col items-center text-green-800 ${showCloseButton ? "pr-8" : ""}`}>
34+
<h3 className="font-medium text-lg">
35+
{submissionResult.isEtherscanSubmission
36+
? "Etherscan import submitted successfully!"
37+
: "Verification submitted successfully!"}
38+
</h3>
39+
<div className="text-sm mt-2">Verification Job ID:</div>
40+
<span className="text-sm mt-1 font-mono bg-gray-100 text-gray-900 px-2 py-1 rounded-md">
41+
{submissionResult.verificationId}
42+
</span>
43+
44+
<div className="mt-6">
45+
<a
46+
href={`/jobs/${submissionResult.verificationId}`}
47+
className="inline-flex items-center px-6 py-2 rounded-md text-base font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors shadow-sm"
48+
>
49+
View Job Status
50+
</a>
51+
</div>
52+
53+
{!submissionResult.isEtherscanSubmission && (
54+
<p className="text-sm mt-3 text-gray-600 text-center">
55+
Your verification is being processed. Click above to monitor progress.
56+
</p>
57+
)}
58+
</div>
59+
) : (
60+
<div className={`text-red-800 ${showCloseButton ? "pr-8" : ""}`}>
61+
<h3 className="font-medium text-lg">
62+
{submissionResult.isEtherscanSubmission
63+
? "Etherscan import failed"
64+
: "Verification failed"}
65+
</h3>
66+
<p className="mt-2 text-sm">{submissionResult.error}</p>
67+
</div>
68+
)}
69+
</div>
70+
);
71+
}

‎app/hooks/useVerificationState.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from "react";
2-
import type { Language } from "../types/verification";
2+
import type { Language, SubmissionResult } from "../types/verification";
33

44
export function useVerificationState() {
55
const [selectedChainId, setSelectedChainId] = useState<string>("");
@@ -16,11 +16,7 @@ export function useVerificationState() {
1616

1717
// Submission state
1818
const [isSubmitting, setIsSubmitting] = useState(false);
19-
const [submissionResult, setSubmissionResult] = useState<{
20-
success: boolean;
21-
verificationId?: string;
22-
error?: string;
23-
} | null>(null);
19+
const [submissionResult, setSubmissionResult] = useState<SubmissionResult | null>(null);
2420

2521
const handleChainIdChange = (value: string) => {
2622
setSelectedChainId(value);
@@ -81,7 +77,6 @@ export function useVerificationState() {
8177
}
8278
};
8379

84-
8580
return {
8681
selectedChainId,
8782
contractAddress,

‎app/routes/home.tsx

Lines changed: 19 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import RecentVerifications from "../components/verification/RecentVerifications"
2020
import { saveJob } from "../utils/jobStorage";
2121
import React from "react";
2222
import Settings from "../components/verification/Settings";
23-
import ImportFromEtherscan from "../components/verification/ImportFromEtherscan";
23+
import ImportSources from "../components/verification/ImportSources";
24+
import SubmissionResultDisplay from "../components/verification/SubmissionResultDisplay";
2425
import { useServerConfig } from "../contexts/ServerConfigContext";
2526

2627
export function meta({}: Route.MetaArgs) {
@@ -49,6 +50,7 @@ export default function Home() {
4950
setImportSuccess(null);
5051
setImportError(error);
5152
};
53+
5254
const {
5355
selectedChainId,
5456
contractAddress,
@@ -232,25 +234,17 @@ export default function Home() {
232234
onValidationChange={updateAddressValidation}
233235
/>
234236

235-
{/* Import Sources From section */}
236-
<div className="bg-white border border-gray-200 rounded-lg p-4 md:p-6">
237-
<h3 className="text-lg font-semibold text-gray-900">Import Sources</h3>
238-
<p className="text-sm text-gray-500 mb-4">
239-
You can import the sources and settings from various places to submit a verification on Sourcify.
240-
</p>
241-
<div className="flex justify-start space-y-3">
242-
<ImportFromEtherscan
243-
chainId={selectedChainId}
244-
address={contractAddress}
245-
setIsSubmitting={setIsSubmitting}
246-
setSubmissionResult={setSubmissionResult}
247-
onImportError={handleImportError}
248-
onImportSuccess={setImportSuccess}
249-
/>
250-
</div>
251-
{importError && <div className="mt-3 text-sm text-red-600">{importError}</div>}
252-
{importSuccess && <div className="mt-3 text-sm text-green-600">{importSuccess}</div>}
253-
</div>
237+
<ImportSources
238+
selectedChainId={selectedChainId}
239+
contractAddress={contractAddress}
240+
setIsSubmitting={setIsSubmitting}
241+
setSubmissionResult={setSubmissionResult}
242+
submissionResult={submissionResult}
243+
importError={importError}
244+
importSuccess={importSuccess}
245+
onImportError={handleImportError}
246+
onImportSuccess={setImportSuccess}
247+
/>
254248

255249
<LicenseInfo />
256250

@@ -324,40 +318,11 @@ export default function Home() {
324318
/>
325319

326320
{/* Submission Result Feedback */}
327-
{submissionResult && (
328-
<div
329-
className={`p-4 rounded-md ${
330-
submissionResult.success ? "bg-green-50 border border-green-200" : "bg-red-50 border border-red-200"
331-
}`}
332-
>
333-
{submissionResult.success ? (
334-
<div className="flex flex-col items-center text-green-800">
335-
<h3 className="font-medium text-lg">Verification submitted successfully!</h3>
336-
<div className="text-sm mt-2">Verification Job ID:</div>
337-
<span className="text-sm mt-1 font-mono bg-gray-100 text-gray-900 px-2 py-1 rounded-md">
338-
{submissionResult.verificationId}
339-
</span>
340-
341-
<div className="mt-6">
342-
<a
343-
href={`/jobs/${submissionResult.verificationId}`}
344-
className="inline-flex items-center px-6 py-2 rounded-md text-base font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors shadow-sm"
345-
>
346-
View Job Status
347-
</a>
348-
</div>
349-
350-
<p className="text-sm mt-3 text-gray-600 text-center">
351-
Your verification is being processed. Click above to monitor progress.
352-
</p>
353-
</div>
354-
) : (
355-
<div className="flex flex-col items-center text-center text-red-800">
356-
<h3 className="font-medium text-lg">Verification failed</h3>
357-
<p className="text-sm mt-1">{submissionResult.error}</p>
358-
</div>
359-
)}
360-
</div>
321+
{submissionResult && !submissionResult.isEtherscanSubmission && (
322+
<SubmissionResultDisplay
323+
submissionResult={submissionResult}
324+
showCloseButton={false}
325+
/>
361326
)}
362327

363328
{!isFrameworkMethod && (

‎app/types/verification.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,10 @@ export interface VerifiedContractMinimal {
4343
export interface AllChainsResponse {
4444
results: VerifiedContractMinimal[];
4545
}
46+
47+
export interface SubmissionResult {
48+
success: boolean;
49+
verificationId?: string;
50+
error?: string;
51+
isEtherscanSubmission?: boolean;
52+
}

0 commit comments

Comments
 (0)