Skip to content

Commit 84b2d7a

Browse files
manuelwedlermanuelwedler
committed
Move Header to PageLayout
1 parent be8a814 commit 84b2d7a

File tree

4 files changed

+74
-83
lines changed

4 files changed

+74
-83
lines changed

‎app/components/PageLayout.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useChains } from "../contexts/ChainsContext";
33
import { Tooltip } from "react-tooltip";
44
import { useServerConfig } from "~/contexts/ServerConfigContext";
55
import { removeCurrentServerUrl } from "../utils/serverStorage";
6+
import { Link } from "react-router";
7+
import { FaGithub } from "react-icons/fa";
68

79
interface PageLayoutProps {
810
children: ReactNode;
@@ -100,12 +102,37 @@ export default function PageLayout({ children, maxWidth = "max-w-4xl", title, su
100102

101103
return (
102104
<>
103-
<div className={`${maxWidth} mx-auto px-4 md:px-8 mt-6 md:mt-12`}>
104-
<div className="relative mt-4">
105-
<div className="absolute w-full h-full bg-cerulean-blue-500 rounded-lg -top-1" />
106-
<div className="relative bg-white shadow-lg rounded-lg">
107-
{renderHeader()}
108-
{renderContent()}
105+
<header className="shadow-sm">
106+
<div className="mx-auto py-3 md:py-4 flex items-center justify-between w-full max-w-[100rem] px-4 md:px-12 lg:px-12 xl:px-24">
107+
<Link to="/" className="flex items-center">
108+
<img
109+
src="/sourcify.png"
110+
alt="Sourcify Logo"
111+
className="h-8 md:h-10 w-auto mr-2 md:mr-3"
112+
width={32}
113+
height={32}
114+
/>
115+
<span className="text-gray-700 font-vt323 text-xl md:text-2xl">verify.sourcify.eth</span>
116+
</Link>
117+
<a
118+
href="https://github.com/sourcifyeth/verify.sourcify.dev"
119+
target="_blank"
120+
rel="noopener noreferrer"
121+
className="text-gray-600 hover:text-gray-900 transition-colors p-2"
122+
aria-label="View source code on GitHub"
123+
>
124+
<FaGithub className="w-6 h-6" />
125+
</a>
126+
</div>
127+
</header>
128+
<div className="pb-12 bg-cerulean-blue-50 pt-1">
129+
<div className={`${maxWidth} mx-auto px-4 md:px-8 mt-6 md:mt-12`}>
130+
<div className="relative mt-4">
131+
<div className="absolute w-full h-full bg-cerulean-blue-500 rounded-lg -top-1" />
132+
<div className="relative bg-white shadow-lg rounded-lg">
133+
{renderHeader()}
134+
{renderContent()}
135+
</div>
109136
</div>
110137
</div>
111138
</div>

‎app/root.tsx‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration, Link, useLocation } from "react-router";
2-
import { FaGithub } from "react-icons/fa";
1+
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
32
import { Tooltip } from "react-tooltip";
43

54
import type { Route } from "./+types/root";
@@ -11,8 +10,6 @@ import { CompilerVersionsProvider } from "./contexts/CompilerVersionsContext";
1110
export const links: Route.LinksFunction = () => [];
1211

1312
export function Layout({ children }: { children: React.ReactNode }) {
14-
const location = useLocation();
15-
const isWidgetRoute = location.pathname === '/widget';
1613

1714
return (
1815
<html lang="en">
@@ -33,31 +30,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
3330
<ServerConfigProvider>
3431
<ChainsProvider>
3532
<CompilerVersionsProvider>
36-
{!isWidgetRoute && (
37-
<header className="shadow-sm">
38-
<div className="mx-auto py-3 md:py-4 flex items-center justify-between w-full max-w-[100rem] px-4 md:px-12 lg:px-12 xl:px-24">
39-
<Link to="/" className="flex items-center">
40-
<img
41-
src="/sourcify.png"
42-
alt="Sourcify Logo"
43-
className="h-8 md:h-10 w-auto mr-2 md:mr-3"
44-
width={32}
45-
height={32}
46-
/>
47-
<span className="text-gray-700 font-vt323 text-xl md:text-2xl">verify.sourcify.eth</span>
48-
</Link>
49-
<a
50-
href="https://github.com/sourcifyeth/verify.sourcify.dev"
51-
target="_blank"
52-
rel="noopener noreferrer"
53-
className="text-gray-600 hover:text-gray-900 transition-colors p-2"
54-
aria-label="View source code on GitHub"
55-
>
56-
<FaGithub className="w-6 h-6" />
57-
</a>
58-
</div>
59-
</header>
60-
)}
6133
<main>{children}</main>
6234
</CompilerVersionsProvider>
6335
</ChainsProvider>

‎app/routes/home.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PageLayout from "../components/PageLayout";
33
import VerificationForm from "../components/VerificationForm";
44
import RecentVerifications from "../components/verification/RecentVerifications";
55

6-
export function meta({}: Route.MetaArgs) {
6+
export function meta({ }: Route.MetaArgs) {
77
return [
88
{
99
title:
@@ -17,15 +17,13 @@ export function meta({}: Route.MetaArgs) {
1717

1818
export default function Home() {
1919
return (
20-
<div className="pb-12 bg-cerulean-blue-50 pt-1">
21-
<PageLayout title="Verify Smart Contracts">
22-
<>
23-
<VerificationForm />
24-
<div className="p-4 md:p-8 bg-gray-50 border-t border-gray-200 rounded-b-lg">
25-
<RecentVerifications />
26-
</div>
27-
</>
28-
</PageLayout>
29-
</div>
20+
<PageLayout title="Verify Smart Contracts">
21+
<>
22+
<VerificationForm />
23+
<div className="p-4 md:p-8 bg-gray-50 border-t border-gray-200 rounded-b-lg">
24+
<RecentVerifications />
25+
</div>
26+
</>
27+
</PageLayout>
3028
);
3129
}

‎app/routes/jobs.$jobId.tsx‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
1313
import { useServerConfig } from "../contexts/ServerConfigContext";
1414
import { generateGitHubIssueUrl } from "../utils/githubIssue";
1515

16-
export function meta({}: Route.MetaArgs) {
16+
export function meta({ }: Route.MetaArgs) {
1717
const { jobId } = useParams<{ jobId: string }>();
1818
return [
1919
{
@@ -161,54 +161,48 @@ export default function JobDetails() {
161161

162162
if (loading && !jobData) {
163163
return (
164-
<div className="pb-12 bg-cerulean-blue-50 pt-1">
165-
<PageLayout title="Verification Job">
166-
<div className="p-8">
167-
<div className="flex justify-center items-center h-64">
168-
<div className="animate-spin h-8 w-8 border-4 border-cerulean-blue-600 border-t-transparent rounded-full"></div>
169-
</div>
164+
<PageLayout title="Verification Job">
165+
<div className="p-8">
166+
<div className="flex justify-center items-center h-64">
167+
<div className="animate-spin h-8 w-8 border-4 border-cerulean-blue-600 border-t-transparent rounded-full"></div>
170168
</div>
171-
</PageLayout>
172-
</div>
169+
</div>
170+
</PageLayout>
173171
);
174172
}
175173

176174
if (error) {
177175
return (
178-
<div className="pb-12 bg-cerulean-blue-50 pt-1">
179-
<PageLayout title="Verification Job">
180-
<>
181-
<div className="mb-6 px-4 md:px-8 pt-4 md:pt-6">
182-
<a href="/" className="text-cerulean-blue-600 hover:text-cerulean-blue-800 flex items-center">
183-
← Back to Verification
184-
</a>
185-
</div>
186-
<div className="p-4 md:p-8">
187-
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
188-
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
189-
<h2 className="text-base md:text-lg font-medium text-red-800 mb-2">Error Loading Job</h2>
190-
<p className="text-sm md:text-base text-red-600">{error}</p>
191-
<p className="text-sm md:text-base text-red-600">Server URL: {serverUrl}</p>
192-
</div>
176+
<PageLayout title="Verification Job">
177+
<>
178+
<div className="mb-6 px-4 md:px-8 pt-4 md:pt-6">
179+
<a href="/" className="text-cerulean-blue-600 hover:text-cerulean-blue-800 flex items-center">
180+
← Back to Verification
181+
</a>
182+
</div>
183+
<div className="p-4 md:p-8">
184+
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
185+
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
186+
<h2 className="text-base md:text-lg font-medium text-red-800 mb-2">Error Loading Job</h2>
187+
<p className="text-sm md:text-base text-red-600">{error}</p>
188+
<p className="text-sm md:text-base text-red-600">Server URL: {serverUrl}</p>
193189
</div>
194190
</div>
195-
</>
196-
</PageLayout>
197-
</div>
191+
</div>
192+
</>
193+
</PageLayout>
198194
);
199195
}
200196

201197
if (!jobData) {
202198
return (
203-
<div className="pb-12 bg-cerulean-blue-50 pt-1">
204-
<PageLayout title="Verification Job">
205-
<div className="p-4 md:p-8">
206-
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
207-
<p className="text-sm md:text-base text-gray-600">Job not found</p>
208-
</div>
199+
<PageLayout title="Verification Job">
200+
<div className="p-4 md:p-8">
201+
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
202+
<p className="text-sm md:text-base text-gray-600">Job not found</p>
209203
</div>
210-
</PageLayout>
211-
</div>
204+
</div>
205+
</PageLayout>
212206
);
213207
}
214208

@@ -451,8 +445,8 @@ export default function JobDetails() {
451445

452446
{/* Bytecode Information */}
453447
{jobData.error.recompiledCreationCode ||
454-
jobData.error.recompiledRuntimeCode ||
455-
jobData.error.onchainRuntimeCode ? (
448+
jobData.error.recompiledRuntimeCode ||
449+
jobData.error.onchainRuntimeCode ? (
456450
<div>
457451
<h3 className="text-base md:text-lg font-bold text-gray-900 mb-3">Bytecode Data</h3>
458452

0 commit comments

Comments
 (0)