add a docker and fix errors

Author: josepchetrit12

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/app/how-it-works/page.tsx

@@ -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/components/animated-background.tsx

@@ -38,10 +38,14 @@ const AnimatedBackground: React.FC = () => {
       size: number
       speedX: number
       speedY: number
+      canvasWidth: number
+      canvasHeight: number
 
       constructor() {
-        this.x = Math.random() * canvas.width
-        this.y = Math.random() * canvas.height
+        this.canvasWidth = canvas?.width || window.innerWidth
+        this.canvasHeight = canvas?.height || window.innerHeight
+        this.x = Math.random() * this.canvasWidth
+        this.y = Math.random() * this.canvasHeight
         this.size = Math.random() * 5 + 1
         this.speedX = (Math.random() * 1.5 - 0.75) * 0.75
         this.speedY = (Math.random() * 1.5 - 0.75) * 0.75
@@ -51,23 +55,23 @@ const AnimatedBackground: React.FC = () => {
         this.x += this.speedX
         this.y += this.speedY
 
-        if (this.x > canvas.width) this.x = 0
-        else if (this.x < 0) this.x = canvas.width
+        if (this.x > this.canvasWidth) this.x = 0
+        else if (this.x < 0) this.x = this.canvasWidth
 
-        if (this.y > canvas.height) this.y = 0
-        else if (this.y < 0) this.y = canvas.height
+        if (this.y > this.canvasHeight) this.y = 0
+        else if (this.y < 0) this.y = this.canvasHeight
       }
 
       draw() {
         // Use different colors for dark and light modes with reduced opacity for light mode
-        ctx.fillStyle = isDark 
+        ctx!.fillStyle = isDark 
           ? "rgba(255, 255, 255, 0.3)" 
           : "rgba(0, 0, 0, 0.3)" // Reduced opacity for light mode
 
-        ctx.beginPath()
-        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
-        ctx.closePath()
-        ctx.fill()
+        ctx!.beginPath()
+        ctx!.arc(this.x, this.y, this.size, 0, Math.PI * 2)
+        ctx!.closePath()
+        ctx!.fill()
       }
     }
 

app/components/ui/disclaimer.tsx

@@ -56,7 +56,7 @@ export function Disclaimer({
           </a>{" "}
           whenever possible.
           <br /><br />
-          OpenZeppelin doesn't take responsibility for any incident resulting from the use of this tool.
+          OpenZeppelin doesn&apos;t take responsibility for any incident resulting from the use of this tool.
         </DialogDescription>
       </DialogContent>
     </Dialog>

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_BASE_URL=http://localhost:3000 
+    restart: unless-stopped