Change design and create a docker image

Dockerfile

@@ -0,0 +1,52 @@
+# Build stage
+FROM node:20-slim AS builder
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json first
+COPY app/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY app/ ./
+
+# Build the Next.js app
+RUN npm run build
+
+# Runtime stage
+FROM node:20-slim AS runner
+
+WORKDIR /app
+
+# Install system dependencies and Foundry (for cast and chisel)
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    jq \
+    && curl -L https://foundry.paradigm.xyz | bash \
+    && ~/.foundry/bin/foundryup \
+    && ln -s ~/.foundry/bin/cast /usr/local/bin/cast \
+    && ln -s ~/.foundry/bin/chisel /usr/local/bin/chisel \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the shell script and make it executable
+COPY safe_hashes.sh ../
+RUN chmod +x ../safe_hashes.sh
+
+# Copy built app from builder stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/next.config.js ./
+
+# Install production dependencies only
+RUN npm install --production
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the app
+CMD ["npm", "start"]

app/.env.example

@@ -1 +1,2 @@
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BASE_PATH=/safe

app/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/app/globals.css

@@ -80,3 +80,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/app/how-it-works/page.tsx

@@ -4,7 +4,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 export default function HowItWorks() {
   return (
     <main className="container mx-auto p-8">
-      <h1 className="text-3xl font-bold mb-8">How It Works</h1>
+      {/* <h1 className="text-3xl font-bold mb-8">How It Works</h1> */}
 
       <Card className="mb-8">
         <CardHeader>
@@ -127,7 +127,7 @@ export default function HowItWorks() {
               Ensure that hashes match the ones displayed on your signing device.
             </li>
             <li>
-              If you see more than one transaction with the same nonce, ensure it is exclusively because you're trying to replace a transaction. If this is not the case, something unintended is happening.
+              If you see more than one transaction with the same nonce, ensure it is exclusively because you&apos;re trying to replace a transaction. If this is not the case, something unintended is happening.
             </li>
           </ol>
         </CardContent>

app/app/layout.tsx

@@ -5,12 +5,26 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 import { Footer } from '@/components/footer'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import { Header } from '@/components/header'
+import AnimatedBackground from '@/components/animated-background'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Safe Hash Preview',
-  description: 'Preview Safe transaction hashes',
+  title: 'Safe Utils | OpenZeppelin',
+  description: 'Preview and calculate Safe transaction hashes for Ethereum and other EVM chains. Verify transaction signatures and domain hashes.',
+  keywords: 'Safe, Gnosis Safe, transaction hash, Ethereum, multisig, blockchain, smart contract, EVM',
+  authors: [{ name: 'OpenZeppelin' }],
+  openGraph: {
+    title: 'Safe Utils | OpenZeppelin',
+    description: 'Preview and calculate Safe transaction hashes for Ethereum and other EVM chains',
+    type: 'website',
+    locale: 'en_US',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Safe Utils | OpenZeppelin',
+    description: 'Preview and calculate Safe transaction hashes for Ethereum and other EVM chains',
+  },
 }
 
 export default function RootLayout({
@@ -19,20 +33,22 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <TooltipProvider>
-            <div className="flex flex-col min-h-screen w-full">
-              <Header />
-              <main className="flex-grow">
-                {children}
-              </main>
-              <Footer />
+            <div className="flex flex-col min-h-screen w-full relative">
+              <AnimatedBackground />
+              <div className="relative z-10 flex flex-col min-h-screen w-full">
+                <Header />
+                <main className="flex-grow">{children}</main>
+                <Footer />
+              </div>
             </div>
           </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>
   )
 }
+

app/app/page.tsx

@@ -29,6 +29,8 @@ import { ShareButton } from "@/components/ui/share-button";
 import PixelAvatar from "@/components/pixel-avatar";
 import { useSearchParams } from "next/navigation";
 import { NETWORKS } from "./constants";
+import { Disclaimer } from "@/components/ui/disclaimer";
+import { Info } from "lucide-react";
 
 interface FormData {
   network: string;
@@ -118,7 +120,7 @@ export default function Home() {
     setResult(null);
     try {
       const response = await axios.get<{ result: ApiResponse }>(
-        `/api/calculate-hashes?network=${data.network}&address=${data.address}&nonce=${data.nonce}`
+        `${process.env.NEXT_PUBLIC_BASE_PATH || ''}/api/calculate-hashes?network=${data.network}&address=${data.address}&nonce=${data.nonce}`
       );
       setResult(response.data.result);
     } catch (error) {
@@ -152,8 +154,13 @@ export default function Home() {
   return (
     <>
       <Toaster />
-      <main className="container mx-auto p-8">
-        <h1 className="text-3xl font-bold mb-4">Safe Hash Preview</h1>
+      <div className="container mx-auto p-8">
+        <div className="flex items-center gap-2 mb-4">
+          <Disclaimer className="text-muted-foreground hover:text-foreground text-sm flex items-center gap-1 mt-2">
+            <Info className="h-4 w-4" />
+            Disclaimer
+          </Disclaimer>
+        </div>
         <Card className="mb-4">
           <CardHeader>
             <CardTitle>Input Parameters</CardTitle>
@@ -188,12 +195,12 @@ export default function Home() {
                               {field.value && (
                                 <div className="flex items-center">
                                   <img
-                                    src={
+                                    src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/${
                                       NETWORKS.find(
                                         (network) =>
                                           network.value === field.value
                                       )?.logo
-                                    }
+                                    }`}
                                     alt={`${field.value} logo`}
                                     className="w-5 h-5 mr-2"
                                   />
@@ -215,7 +222,7 @@ export default function Home() {
                             >
                               <div className="flex items-center">
                                 <img
-                                  src={network.logo}
+                                  src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/${network.logo}`}
                                   alt={`${network.label} logo`}
                                   className="w-5 h-5 mr-2"
                                 />
@@ -451,7 +458,7 @@ export default function Home() {
             </CardContent>
           </Card>
         )}
-      </main>
+      </div>
     </>
   );
 }