feat: background

js/packages/fair-launch/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import Home from './Home';
 
@@ -52,12 +52,62 @@ const App = () => {
     [],
   );
 
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef(new Image())
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if(canvas) {
+      const context = canvas.getContext('2d');
+      if(context) {
+        const dpr = window.devicePixelRatio || 1;
+        const rect = canvas.getBoundingClientRect(); // css
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        context.scale(dpr, dpr);
+
+        //Our first draw
+        context.fillStyle = '#000000'
+        context.fillRect(0, 0, context.canvas.width, context.canvas.height)
+
+        const render = () => {
+          const imageHeight = imageRef.current.height;
+          const imageWidth = imageRef.current.width;
+
+          const height = Math.ceil(canvas.height / imageHeight);
+          const width = Math.ceil(canvas.width / imageWidth);
+
+          for (let i = 0; i < width; i++) {
+            for (let j= 0; j< height; j++) {
+              context.save();
+              context.translate(i * imageWidth, j * imageHeight);
+              if(j % 2 === 1) {
+                context.translate(0, imageHeight);
+                context.scale(1, -1);
+              }
+              if(i % 2 === 1) {
+                context.translate(imageWidth, 0);
+                context.scale(-1, 1);
+              }
+              context.drawImage(imageRef.current, 0, 0, imageWidth, imageHeight);
+              context.restore();
+            }
+          }
+        };
+
+        imageRef.current.onload = render;
+        imageRef.current.src = 'bg.png';
+      }
+    }
+  }, [])
+
   return (
     <ThemeProvider theme={theme}>
       <ConnectionProvider endpoint={endpoint}>
-        <WalletProvider wallets={wallets} autoConnect>
+        <WalletProvider wallets={wallets} autoConnect={false}>
           <WalletDialogProvider>
             <ConfettiProvider>
+              <canvas ref={canvasRef} style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh' }} />
               <Home
                 candyMachineId={candyMachineId}
                 fairLaunchId={fairLaunchId}

js/packages/fair-launch/src/Home.tsx

@@ -495,7 +495,7 @@ const Home = (props: HomeProps) => {
 
   return (
     <Container  style={{ position: 'relative' }}>
-      <AppBar position="static" style={{ marginBottom: 50, background: 'transparent' }}>
+      <AppBar position="static" elevation={0} style={{ marginBottom: 50, background: 'transparent' }}>
         <Toolbar>
           <Typography variant="h6" style={{ fontWeight: 900, color: '#ECE3B1', flexGrow: 1 }}>
             #theRealLitJesus