diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 63d3c2f..50b19d6 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -34,18 +34,20 @@ const images = [ "/emarc-pixels.jpg", "/superior.jpeg", "/cherry/cherrypfp.png", - "https://avatars.githubusercontent.com/u/141290516?v=4", + "https://avatars.githubusercontent.com/u/141290516?v=3", ]; const Alert = ({ children, className = "" }: Props) => (
{children}
); -const AlertTitle = ({ children }: Props) => ( -
{children}
+const AlertTitle = ({ children, className }: Props) => ( +
{children}
); -const AlertDescription = ({ children }: Props) =>
{children}
; +const AlertDescription = ({ children, className }: Props) => ( +
{children}
+); const Card = ({ children, className = "" }: Props) => (
@@ -57,8 +59,8 @@ const CardHeader = ({ children, className = "" }: Props) => (
{children}
); -const CardTitle = ({ children }: Props) => ( -

{children}

+const CardTitle = ({ children, className }: Props) => ( +

{children}

); const CardContent = ({ children, className = "" }: Props) =>
{children}
; @@ -71,7 +73,7 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
-

Checking your status...

+

Checking your status...

@@ -82,8 +84,10 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading if (!connectedAddress) { return ( - Connect Your Wallet - Please connect your wallet to view your Batch 10 status + Connect Your Wallet + + Please connect your wallet to view your Batch 10 status + ); } @@ -93,12 +97,12 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
- Your Status - Not a Member + Your Status + Not a Member
-

You are not currently a member of Batch 10

+

You are not currently a member of Batch 10

); @@ -109,14 +113,16 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
- Your Status + Your Status Ready to Check In
-

You are a Batch 10 member! Deploy your contract to check in

+

+ You are a Batch 10 member! Deploy your contract to check in +

); @@ -126,12 +132,12 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
- Your Status + Your Status Checked In
-
+
Active with wallet address:
@@ -192,7 +198,7 @@ const Home: NextPage = () => { BATCH 10
-

Buidl Guidl

+

Buidl Guidl

@@ -200,19 +206,21 @@ const Home: NextPage = () => {
{error ? ( -
+

Error fetching contract data: {error.message}

) : (
- Checked in builders count: + Checked in builders count: {counterLoading ? (
) : ( - {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"} + + {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"} + )}
diff --git a/packages/nextjs/components/StarsBg.tsx b/packages/nextjs/components/StarsBg.tsx index 762f2cf..f542896 100644 --- a/packages/nextjs/components/StarsBg.tsx +++ b/packages/nextjs/components/StarsBg.tsx @@ -19,30 +19,13 @@ interface StarBackgroundProps { className?: string; } -const createStar = ( - width: number, - height: number, - allStarsTwinkle: boolean, - twinkleProbability: number, - minTwinkleSpeed: number, - maxTwinkleSpeed: number, -): StarProps => { - const shouldTwinkle = allStarsTwinkle || Math.random() < twinkleProbability; - return { - x: Math.random() * width, - y: Math.random() * height, - radius: Math.random() * 0.05 + 0.5, - opacity: Math.random() * 0.5 + 0.5, - twinkleSpeed: shouldTwinkle ? minTwinkleSpeed + Math.random() * (maxTwinkleSpeed - minTwinkleSpeed) : null, - }; -}; - export const StarsBackground: React.FC = ({ starDensity = 0.00015, allStarsTwinkle = true, twinkleProbability = 0.7, minTwinkleSpeed = 0.5, maxTwinkleSpeed = 1, + className, }) => { const [stars, setStars] = useState([]); const canvasRef: RefObject = useRef(null); @@ -51,9 +34,16 @@ export const StarsBackground: React.FC = ({ (width: number, height: number): StarProps[] => { const area = width * height; const numStars = Math.floor(area * starDensity); - return Array.from({ length: numStars }, () => - createStar(width, height, allStarsTwinkle, twinkleProbability, minTwinkleSpeed, maxTwinkleSpeed), - ); + return Array.from({ length: numStars }, () => { + const shouldTwinkle = allStarsTwinkle || Math.random() < twinkleProbability; + return { + x: Math.random() * width, + y: Math.random() * height, + radius: Math.random() * 0.05 + 0.5, + opacity: Math.random() * 0.5 + 0.5, + twinkleSpeed: shouldTwinkle ? minTwinkleSpeed + Math.random() * (maxTwinkleSpeed - minTwinkleSpeed) : null, + }; + }); }, [starDensity, allStarsTwinkle, twinkleProbability, minTwinkleSpeed, maxTwinkleSpeed], ); @@ -98,7 +88,16 @@ export const StarsBackground: React.FC = ({ const render = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); - stars.forEach(star => drawStar(ctx, star)); + stars.forEach(star => { + ctx.beginPath(); + ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); + ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`; + ctx.fill(); + + if (star.twinkleSpeed !== null) { + star.opacity = 0.5 + Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5); + } + }); animationFrameId = requestAnimationFrame(render); }; @@ -110,16 +109,5 @@ export const StarsBackground: React.FC = ({ }; }, [stars]); - const drawStar = (ctx: CanvasRenderingContext2D, star: StarProps) => { - ctx.beginPath(); - ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); - ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`; - ctx.fill(); - - if (star.twinkleSpeed !== null) { - star.opacity = 0.5 + Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5); - } - }; - - return ; + return ; };