From 89c7da216cd46d2ee40a790807f2001e16df2faa Mon Sep 17 00:00:00 2001
From: RanaBug
Date: Fri, 31 Jan 2025 11:13:28 +0000
Subject: [PATCH 1/3] creation of the blitz app folder and skeleton base code
---
.eslintrc.json | 2 +
.../components/RandomAvatar/RandomAvatar.tsx | 50 ++++++++++++++++++
.../blitz/components/TimeClock/TimeClock.tsx | 38 +++++++++++++
.../TokenPriceUpdate/TokenPriceUpdate.tsx | 16 ++++++
src/apps/blitz/components/Typography/Body.tsx | 12 +++++
.../blitz/components/Typography/BodySmall.tsx | 12 +++++
.../components/Typography/tests/Body.test.tsx | 30 +++++++++++
.../Typography/tests/BodySmall.test.tsx | 32 +++++++++++
.../tests/__snapshots__/Body.test.tsx.snap | 21 ++++++++
.../__snapshots__/BodySmall.test.tsx.snap | 21 ++++++++
src/apps/blitz/icon.png | Bin 0 -> 74553 bytes
src/apps/blitz/images/pillarX_full_white.png | Bin 0 -> 6704 bytes
src/apps/blitz/images/randomToken.png | Bin 0 -> 21754 bytes
src/apps/blitz/index.tsx | 43 +++++++++++++++
src/apps/blitz/manifest.json | 9 ++++
src/apps/blitz/styles/tailwindBlitz.css | 48 +++++++++++++++++
src/apps/blitz/tailwind.blitz.config.js | 32 +++++++++++
17 files changed, 366 insertions(+)
create mode 100644 src/apps/blitz/components/RandomAvatar/RandomAvatar.tsx
create mode 100644 src/apps/blitz/components/TimeClock/TimeClock.tsx
create mode 100644 src/apps/blitz/components/TokenPriceUpdate/TokenPriceUpdate.tsx
create mode 100644 src/apps/blitz/components/Typography/Body.tsx
create mode 100644 src/apps/blitz/components/Typography/BodySmall.tsx
create mode 100644 src/apps/blitz/components/Typography/tests/Body.test.tsx
create mode 100644 src/apps/blitz/components/Typography/tests/BodySmall.test.tsx
create mode 100644 src/apps/blitz/components/Typography/tests/__snapshots__/Body.test.tsx.snap
create mode 100644 src/apps/blitz/components/Typography/tests/__snapshots__/BodySmall.test.tsx.snap
create mode 100644 src/apps/blitz/icon.png
create mode 100644 src/apps/blitz/images/pillarX_full_white.png
create mode 100644 src/apps/blitz/images/randomToken.png
create mode 100644 src/apps/blitz/index.tsx
create mode 100644 src/apps/blitz/manifest.json
create mode 100644 src/apps/blitz/styles/tailwindBlitz.css
create mode 100644 src/apps/blitz/tailwind.blitz.config.js
diff --git a/.eslintrc.json b/.eslintrc.json
index 61cc8d2b..6a4aa2e6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -101,6 +101,8 @@
"!src/apps/deposit/**",
"!src/apps/leaderboard/",
"!src/apps/leaderboard/**",
+ "!src/apps/blitz/",
+ "!src/apps/blitz/**",
"public/" // Ignore public folder
],
"settings": {
diff --git a/src/apps/blitz/components/RandomAvatar/RandomAvatar.tsx b/src/apps/blitz/components/RandomAvatar/RandomAvatar.tsx
new file mode 100644
index 00000000..4244fa95
--- /dev/null
+++ b/src/apps/blitz/components/RandomAvatar/RandomAvatar.tsx
@@ -0,0 +1,50 @@
+import Avatar from 'boring-avatars';
+
+// types
+import { AvatarVariantType } from '../../../../types';
+
+type RandomAvatarProps = {
+ name: string;
+ variant?: string;
+ isRandomVariant?: boolean;
+};
+
+const RandomAvatar = ({
+ name,
+ variant,
+ isRandomVariant,
+}: RandomAvatarProps) => {
+ const variants: AvatarVariantType[] = [
+ 'marble',
+ 'beam',
+ 'pixel',
+ 'sunset',
+ 'ring',
+ 'bauhaus',
+ ];
+
+ const randomVariant: AvatarVariantType =
+ variants[Math.floor(Math.random() * variants.length)];
+
+ const avatarVariant = () => {
+ if (isRandomVariant && !variant) {
+ return randomVariant;
+ }
+ if (variant) {
+ return variant as AvatarVariantType;
+ }
+ return 'marble';
+ };
+
+ return (
+
+ );
+};
+
+export default RandomAvatar;
diff --git a/src/apps/blitz/components/TimeClock/TimeClock.tsx b/src/apps/blitz/components/TimeClock/TimeClock.tsx
new file mode 100644
index 00000000..b6dee1bc
--- /dev/null
+++ b/src/apps/blitz/components/TimeClock/TimeClock.tsx
@@ -0,0 +1,38 @@
+import { differenceInMinutes, differenceInSeconds } from 'date-fns';
+import { useEffect, useState } from 'react';
+
+const TimeClock = () => {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const DUMMY_END_DATE = new Date(2025, 0, 30, 14, 10, 0);
+
+ const [timeRemaining, setTimeRemaining] = useState({
+ minutes: differenceInMinutes(DUMMY_END_DATE, new Date()),
+ seconds: differenceInSeconds(DUMMY_END_DATE, new Date()) % 60,
+ });
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimeRemaining({
+ minutes: differenceInMinutes(DUMMY_END_DATE, new Date()),
+ seconds: differenceInSeconds(DUMMY_END_DATE, new Date()) % 60,
+ });
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [DUMMY_END_DATE]);
+
+ return (
+ <>
+
+ {timeRemaining.minutes} min {timeRemaining.seconds} sec
+
+
+
+ );
+};
+
+export default TimeClock;
diff --git a/src/apps/blitz/components/TokenPriceUpdate/TokenPriceUpdate.tsx b/src/apps/blitz/components/TokenPriceUpdate/TokenPriceUpdate.tsx
new file mode 100644
index 00000000..a2c264ab
--- /dev/null
+++ b/src/apps/blitz/components/TokenPriceUpdate/TokenPriceUpdate.tsx
@@ -0,0 +1,16 @@
+import RandomToken from '../../images/randomToken.png';
+
+const TokenPriceUpdate = () => {
+ const DUMMY_TIME = '3:15pm';
+ return (
+
+
+
+ Token price at{' '}
+ {DUMMY_TIME}
+
+
{children}
;
+};
+
+export default Body;
diff --git a/src/apps/blitz/components/Typography/BodySmall.tsx b/src/apps/blitz/components/Typography/BodySmall.tsx
new file mode 100644
index 00000000..4c2105e5
--- /dev/null
+++ b/src/apps/blitz/components/Typography/BodySmall.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+type BodySmallProps = {
+ children: ReactNode;
+ className?: string;
+};
+
+const BodySmall = ({ children, className }: BodySmallProps) => {
+ return {children}
;
+};
+
+export default BodySmall;
diff --git a/src/apps/blitz/components/Typography/tests/Body.test.tsx b/src/apps/blitz/components/Typography/tests/Body.test.tsx
new file mode 100644
index 00000000..f12dfbee
--- /dev/null
+++ b/src/apps/blitz/components/Typography/tests/Body.test.tsx
@@ -0,0 +1,30 @@
+import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
+
+// components
+import Body from '../Body';
+
+describe('', () => {
+ it('renders correctly', () => {
+ const tree = renderer
+ .create(
+ <>
+ Some regular text.
+ Some red text
+ Some text with font size 23px
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+
+ const treeElements = tree as ReactTestRendererJSON[];
+
+ expect(treeElements[0].children?.length).toBe(1);
+ expect(treeElements[0].children?.[0]).toBe('Some regular text.');
+ expect(treeElements[0].type).toBe('p');
+ expect(treeElements[0].props.className).toContain('text-base');
+ expect(treeElements[0].props.className).toContain('font-medium');
+ expect(treeElements[1].props.className).toContain('text-red-500');
+ expect(treeElements[2].props.className).toContain('text-[23px]');
+ });
+});
diff --git a/src/apps/blitz/components/Typography/tests/BodySmall.test.tsx b/src/apps/blitz/components/Typography/tests/BodySmall.test.tsx
new file mode 100644
index 00000000..5cdee9ca
--- /dev/null
+++ b/src/apps/blitz/components/Typography/tests/BodySmall.test.tsx
@@ -0,0 +1,32 @@
+import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
+
+// components
+import BodySmall from '../BodySmall';
+
+describe('', () => {
+ it('renders correctly', () => {
+ const tree = renderer
+ .create(
+ <>
+ Some small text.
+ Some red small text
+
+ Some small text with font size 7px
+
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+
+ const treeElements = tree as ReactTestRendererJSON[];
+
+ expect(treeElements[0].children?.length).toBe(1);
+ expect(treeElements[0].children?.[0]).toBe('Some small text.');
+ expect(treeElements[0].type).toBe('p');
+ expect(treeElements[0].props.className).toContain('text-sm');
+ expect(treeElements[0].props.className).toContain('font-medium');
+ expect(treeElements[1].props.className).toContain('text-red-500');
+ expect(treeElements[2].props.className).toContain('text-[7px]');
+ });
+});
diff --git a/src/apps/blitz/components/Typography/tests/__snapshots__/Body.test.tsx.snap b/src/apps/blitz/components/Typography/tests/__snapshots__/Body.test.tsx.snap
new file mode 100644
index 00000000..27f96970
--- /dev/null
+++ b/src/apps/blitz/components/Typography/tests/__snapshots__/Body.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` renders correctly 1`] = `
+[
+