From 24b464ba5407456aa5d68af5082343062ad1fdad Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Thu, 17 Oct 2024 11:13:25 +0200 Subject: [PATCH 1/8] Add market discovery rain --- .../frontend/src/app/launch/page.tsx | 4 +- .../ClientLaunchEmojicoinPage.tsx | 18 ++++- .../pages/launch-emojicoin/EmojiRain.tsx | 69 +++++++++++++++++++ .../sdk/src/indexer-v2/queries/app/index.ts | 1 + .../sdk/src/indexer-v2/queries/app/launch.ts | 13 ++++ .../sdk/src/indexer-v2/types/index.ts | 11 ++- .../sdk/src/indexer-v2/types/json-types.ts | 5 +- 7 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx create mode 100644 src/typescript/sdk/src/indexer-v2/queries/app/launch.ts diff --git a/src/typescript/frontend/src/app/launch/page.tsx b/src/typescript/frontend/src/app/launch/page.tsx index ba7c4ad61..4714e39eb 100644 --- a/src/typescript/frontend/src/app/launch/page.tsx +++ b/src/typescript/frontend/src/app/launch/page.tsx @@ -2,11 +2,13 @@ import { REVALIDATION_TIME } from "lib/server-env"; import ClientLaunchEmojicoinPage from "../../components/pages/launch-emojicoin/ClientLaunchEmojicoinPage"; import { isUserGeoblocked } from "utils/geolocation"; import { headers } from "next/headers"; +import { fetchRandomNames } from "@/queries/launch"; export const revalidate = REVALIDATION_TIME; export const dynamic = "force-static"; export default async function LaunchEmojicoinPage() { + const randomNames = await fetchRandomNames({}); const geoblocked = await isUserGeoblocked(headers().get("x-real-ip")); - return ; + return ; } diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx index 84371040e..c3d208828 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx @@ -19,6 +19,7 @@ import { } from "@aptos-labs/ts-sdk"; import { symbolBytesToEmojis } from "@sdk/emoji_data"; import MemoizedLaunchAnimation from "./memoized-launch"; +import { EmojiRain } from "./EmojiRain"; const LOADING_TIME = 2000; type Stage = "initial" | "loading" | "coding"; @@ -32,7 +33,10 @@ const lastMarketRegistration = ( return undefined; }; -const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblocked }) => { +const ClientLaunchEmojicoinPage: React.FC<{ + geoblocked: boolean; + randomNames: ReturnType[]; +}> = ({ geoblocked, randomNames }) => { const searchParams = useSearchParams(); const emojiParams = searchParams.get("emojis"); const setEmojis = useEmojiPicker((state) => state.setEmojis); @@ -137,7 +141,11 @@ const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblock }, [status]); return ( -
+
+ setEmojis(name.emojis.map((e) => e.emoji))} + />
@@ -145,6 +153,12 @@ const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblock
+
); }; diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx new file mode 100644 index 000000000..603613578 --- /dev/null +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx @@ -0,0 +1,69 @@ +import { type symbolBytesToEmojis } from "@sdk/emoji_data"; +import { animate, motion, stagger } from "framer-motion"; +import { useEffect, useMemo } from "react"; +import { useWindowSize } from "react-use"; + +export function EmojiRainDrop({ + name, + onClick, +}: { + name: ReturnType; + onClick?: (data: ReturnType) => void; +}) { + const { width } = useWindowSize(); + const initialX = useMemo(() => -10 - 100, []); + const y = useMemo(() => Math.random() * (width - 20) + 10, [width]); + + return ( + onClick && onClick(name)} + className="absolute emoji-rain-drop z-10 flex flex-col select-none cursor-pointer" + style={{ + left: y, + fontSize: "2em", + top: initialX, + }} + > + {name.emojis.map((e) => ( + {e.emoji} + ))} + + ); +} + +export function EmojiRain({ + randomNames, + onClick, +}: { + randomNames: ReturnType[]; + onClick?: (symbol: ReturnType) => void; +}) { + const { height } = useWindowSize(); + useEffect(() => { + const staggeredItems = stagger(5, { startDelay: 1 }); + animate( + ".emoji-rain-drop", + { + top: height + 100, + }, + { + duration: 30, + delay: staggeredItems, + ease: [], + } + ); + }, [height]); + return ( + <> + {randomNames.map((name) => { + return ( + e.hex).reduce((a, b) => `${a}-${b}`, "")}`} + name={name} + onClick={onClick} + /> + ); + })} + + ); +} diff --git a/src/typescript/sdk/src/indexer-v2/queries/app/index.ts b/src/typescript/sdk/src/indexer-v2/queries/app/index.ts index 0009eab6e..b9ecb514e 100644 --- a/src/typescript/sdk/src/indexer-v2/queries/app/index.ts +++ b/src/typescript/sdk/src/indexer-v2/queries/app/index.ts @@ -2,3 +2,4 @@ export * from "./home"; export * from "./market"; export * from "./pools"; export * from "./candlesticks"; +export * from "./launch"; diff --git a/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts new file mode 100644 index 000000000..a3e527682 --- /dev/null +++ b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts @@ -0,0 +1,13 @@ +import "server-only"; + +import { DatabaseRpc } from "../../types/json-types"; +import { postgrest } from "../client"; +import { queryHelper } from "../utils"; +import { DatabaseTypeConverter } from "../../types"; + +const selectRandomNames = () => postgrest.rpc(DatabaseRpc.RandomNames, undefined, { get: true }); + +export const fetchRandomNames = queryHelper( + selectRandomNames, + DatabaseTypeConverter[DatabaseRpc.RandomNames] +); diff --git a/src/typescript/sdk/src/indexer-v2/types/index.ts b/src/typescript/sdk/src/indexer-v2/types/index.ts index 540e1ec6b..e1c5960a0 100644 --- a/src/typescript/sdk/src/indexer-v2/types/index.ts +++ b/src/typescript/sdk/src/indexer-v2/types/index.ts @@ -22,7 +22,12 @@ import { type ProcessedFields, DatabaseRpc, } from "./json-types"; -import { type MarketEmojiData, type SymbolEmoji, toMarketEmojiData } from "../../emoji_data"; +import { + type MarketEmojiData, + symbolBytesToEmojis, + type SymbolEmoji, + toMarketEmojiData, +} from "../../emoji_data"; import { toPeriod, toTrigger, type Period, type Trigger } from "../../const"; import { toAccountAddressString } from "../../utils"; import Big from "big.js"; @@ -598,6 +603,9 @@ export const toPriceFeedRPCResponse = (data: DatabaseJsonType["price_feed"]) => ), }); +export const toRandomNamesRPCResponse = (data: DatabaseJsonType["random_names"]) => + symbolBytesToEmojis("0" + data.emojis.substring(1)); + export const DatabaseTypeConverter = { [TableName.GlobalStateEvents]: toGlobalStateEventModel, [TableName.PeriodicStateEvents]: toPeriodicStateEventModel, @@ -613,6 +621,7 @@ export const DatabaseTypeConverter = { [TableName.ProcessorStatus]: toProcessorStatus, [DatabaseRpc.UserPools]: toUserPoolsRPCResponse, [DatabaseRpc.PriceFeed]: toPriceFeedRPCResponse, + [DatabaseRpc.RandomNames]: toRandomNamesRPCResponse, }; export type DatabaseModels = { diff --git a/src/typescript/sdk/src/indexer-v2/types/json-types.ts b/src/typescript/sdk/src/indexer-v2/types/json-types.ts index 1f53c292f..44943ce46 100644 --- a/src/typescript/sdk/src/indexer-v2/types/json-types.ts +++ b/src/typescript/sdk/src/indexer-v2/types/json-types.ts @@ -287,6 +287,7 @@ export enum TableName { export enum DatabaseRpc { UserPools = "user_pools", PriceFeed = "price_feed", + RandomNames = "random_names", } // Fields that only exist after being processed by a processor. @@ -364,6 +365,7 @@ export type DatabaseJsonType = { close_price_q64: Uint64String; } >; + [DatabaseRpc.RandomNames]: { emojis: string }; }; type Columns = DatabaseJsonType[TableName.GlobalStateEvents] & @@ -378,6 +380,7 @@ type Columns = DatabaseJsonType[TableName.GlobalStateEvents] & DatabaseJsonType[TableName.Market1MPeriodsInLastDay] & DatabaseJsonType[TableName.MarketState] & DatabaseJsonType[TableName.ProcessorStatus] & - DatabaseJsonType[DatabaseRpc.UserPools]; + DatabaseJsonType[DatabaseRpc.UserPools] & + DatabaseJsonType[DatabaseRpc.RandomNames]; export type AnyColumnName = keyof Columns; From aef8a946accbf52f3a26dcbd6099857ed3d819b6 Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Tue, 3 Dec 2024 14:56:44 +0100 Subject: [PATCH 2/8] Format & lint --- .../ClientLaunchEmojicoinPage.tsx | 4 ++-- .../pages/launch-emojicoin/EmojiRain.tsx | 24 +++++++++++-------- .../sdk/src/indexer-v2/queries/app/launch.ts | 3 ++- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx index 75709a534..a2c90bd0a 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx @@ -141,12 +141,12 @@ const ClientLaunchEmojicoinPage: React.FC<{ return (
- {randomSymbols.length > 0 && + {randomSymbols.length > 0 && ( setEmojis(name.emojis.map((e) => e.emoji))} /> - } + )}
diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx index b106fc157..dd109fa06 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx @@ -1,5 +1,5 @@ import { type symbolBytesToEmojis } from "@sdk/emoji_data"; -import { AnimationPlaybackControls, useAnimate } from "framer-motion"; +import { type AnimationPlaybackControls, useAnimate } from "framer-motion"; import { useEffect, useMemo, useState } from "react"; import { useWindowSize } from "react-use"; @@ -10,7 +10,7 @@ export function EmojiRainDrop({ name, onClick, index, - emojis + emojis, }: { name: ReturnType; onClick?: (data: ReturnType) => void; @@ -31,7 +31,6 @@ export function EmojiRainDrop({ const [scope, animate] = useAnimate(); const [controls, setControls] = useState(); - useEffect(() => { const controls = animate( scope.current, @@ -48,12 +47,17 @@ export function EmojiRainDrop({ setControls(controls); return () => controls.complete(); - }, []); + }, [scope, animate, delay, height, emojis]); return (
onClick && onClick(name)} - onMouseOver={() => { if (controls){controls.time += delay; controls.pause()} }} + onMouseOver={() => { + if (controls) { + controls.time += delay; + controls.pause(); + } + }} onMouseOut={() => controls?.play()} className="absolute emoji-rain-drop z-10 flex flex-col select-none cursor-pointer" style={{ @@ -64,8 +68,7 @@ export function EmojiRainDrop({ ref={scope} > {name.emojis.map((e) => ( - {e.emoji} + {e.emoji} ))}
); @@ -81,15 +84,16 @@ export function EmojiRain({ return ( <> {randomSymbols.map((name, i) => { - const emojiRainDrop = + const emojiRainDrop = ( e.hex).reduce((a, b) => `${a}-${b}`, "")}`} name={name} onClick={onClick} index={i} emojis={randomSymbols.length} - />; - return emojiRainDrop; + /> + ); + return emojiRainDrop; })} ); diff --git a/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts index dd9c84799..58dd8eab3 100644 --- a/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts +++ b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts @@ -5,7 +5,8 @@ import { postgrest } from "../client"; import { queryHelper } from "../utils"; import { DatabaseTypeConverter } from "../../types"; -const selectRandomSymbols = () => postgrest.rpc(DatabaseRpc.RandomSymbols, undefined, { get: true }); +const selectRandomSymbols = () => + postgrest.rpc(DatabaseRpc.RandomSymbols, undefined, { get: true }); export const fetchRandomSymbols = queryHelper( selectRandomSymbols, From 590d37708775e83ba6ed776073a400e2be8b60e4 Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Tue, 3 Dec 2024 15:04:33 +0100 Subject: [PATCH 3/8] Fix naming issue --- src/typescript/sdk/src/indexer-v2/types/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/typescript/sdk/src/indexer-v2/types/index.ts b/src/typescript/sdk/src/indexer-v2/types/index.ts index 64f10b232..3f15d852e 100644 --- a/src/typescript/sdk/src/indexer-v2/types/index.ts +++ b/src/typescript/sdk/src/indexer-v2/types/index.ts @@ -601,7 +601,7 @@ export const toPriceFeed = (data: DatabaseJsonType["price_feed"]) => { }; }; -export const toRandomNamesRPCResponse = (data: DatabaseJsonType["random_names"]) => +export const toRandomSymbolsRPCResponse = (data: DatabaseJsonType["random_symbols"]) => symbolBytesToEmojis("0" + data.emojis.substring(1)); export const DatabaseTypeConverter = { @@ -619,7 +619,7 @@ export const DatabaseTypeConverter = { [TableName.ProcessorStatus]: toProcessorStatus, [TableName.PriceFeed]: toPriceFeed, [DatabaseRpc.UserPools]: toUserPoolsRPCResponse, - [DatabaseRpc.RandomSymbols]: toRandomNamesRPCResponse, + [DatabaseRpc.RandomSymbols]: toRandomSymbolsRPCResponse, }; export type DatabaseModels = { From f4266b9632df06ad3795ec2603ec6566bf874e62 Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Wed, 4 Dec 2024 18:02:45 +0100 Subject: [PATCH 4/8] Address PR comments --- .../pages/launch-emojicoin/EmojiRain.tsx | 17 +++++++---------- .../sdk/src/indexer-v2/queries/app/launch.ts | 4 +++- .../sdk/src/indexer-v2/types/index.ts | 1 + .../sdk/src/indexer-v2/types/json-types.ts | 3 +-- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx index dd109fa06..1e659a1dd 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx @@ -1,7 +1,6 @@ import { type symbolBytesToEmojis } from "@sdk/emoji_data"; import { type AnimationPlaybackControls, useAnimate } from "framer-motion"; import { useEffect, useMemo, useState } from "react"; -import { useWindowSize } from "react-use"; const DROP_FALL_TIME = 7.5; const DROP_INTERVAL = 1; @@ -17,13 +16,11 @@ export function EmojiRainDrop({ index: number; emojis: number; }) { - const { height, width } = useWindowSize(); - // Position all emojis above the visible space. - const initialX = -200; + const initialY = -200; - // Calculate a random position on the Y axis. - const y = useMemo(() => Math.random() * (width - 20) + 10, [width]); + // Calculate a random position on the X axis. + const x = useMemo(() => Math.random() * 90 + 5, []); // Calculate a random delay for the emojis to be staggered. const delay = useMemo(() => (Math.random() + index) * DROP_INTERVAL, [index]); @@ -34,7 +31,7 @@ export function EmojiRainDrop({ useEffect(() => { const controls = animate( scope.current, - { top: height + 100 }, + { top: "110vh" }, { duration: DROP_FALL_TIME, delay, @@ -47,7 +44,7 @@ export function EmojiRainDrop({ setControls(controls); return () => controls.complete(); - }, [scope, animate, delay, height, emojis]); + }, [scope, animate, delay, emojis]); return (
controls?.play()} className="absolute emoji-rain-drop z-10 flex flex-col select-none cursor-pointer" style={{ - left: y, + left: `${x}vw`, fontSize: "2em", - top: initialX, + top: initialY, }} ref={scope} > diff --git a/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts index 58dd8eab3..4639e85c4 100644 --- a/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts +++ b/src/typescript/sdk/src/indexer-v2/queries/app/launch.ts @@ -1,4 +1,6 @@ -import "server-only"; +if (process.env.NODE_ENV !== "test") { + require("server-only"); +} import { DatabaseRpc } from "../../types/json-types"; import { postgrest } from "../client"; diff --git a/src/typescript/sdk/src/indexer-v2/types/index.ts b/src/typescript/sdk/src/indexer-v2/types/index.ts index 3f15d852e..80a382f32 100644 --- a/src/typescript/sdk/src/indexer-v2/types/index.ts +++ b/src/typescript/sdk/src/indexer-v2/types/index.ts @@ -601,6 +601,7 @@ export const toPriceFeed = (data: DatabaseJsonType["price_feed"]) => { }; }; +/// Replace `\x` with `0x` then convert to market symbol data. export const toRandomSymbolsRPCResponse = (data: DatabaseJsonType["random_symbols"]) => symbolBytesToEmojis("0" + data.emojis.substring(1)); diff --git a/src/typescript/sdk/src/indexer-v2/types/json-types.ts b/src/typescript/sdk/src/indexer-v2/types/json-types.ts index 16cc1d7af..76c574edf 100644 --- a/src/typescript/sdk/src/indexer-v2/types/json-types.ts +++ b/src/typescript/sdk/src/indexer-v2/types/json-types.ts @@ -287,7 +287,6 @@ export enum TableName { export enum DatabaseRpc { UserPools = "user_pools", - PriceFeed = "price_feed", RandomSymbols = "random_symbols", } @@ -366,7 +365,7 @@ export type DatabaseJsonType = { ProcessedFields & UserLPCoinBalance & { daily_volume: Uint128String } >; - [DatabaseRpc.RandomSymbols]: { emojis: string }; + [DatabaseRpc.RandomSymbols]: { emojis: `\\x${string}` }; }; type Columns = DatabaseJsonType[TableName.GlobalStateEvents] & From 69ac665c45defceb4e2dd2a8e1fe18de52dc8f93 Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Tue, 10 Dec 2024 17:38:58 +0100 Subject: [PATCH 5/8] Update market discovery design --- .../launch-emojicoin/ClientLaunchEmojicoinPage.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx index a2c90bd0a..91649772a 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx @@ -139,6 +139,11 @@ const ClientLaunchEmojicoinPage: React.FC<{ /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [status]); + const backgroundDivClasses = + "absolute w-[200vw] h-[130%] top-[-15%] " + + "left-[-100vw] backdrop-blur-lg border-y-[1px] border-dark-gray " + + "border-solid sm:border-x-[1px] sm:!w-[130%] sm:left-[-15%]"; + return (
{randomSymbols.length > 0 && ( @@ -150,8 +155,11 @@ const ClientLaunchEmojicoinPage: React.FC<{
-
- +
+
+
+ +
Date: Tue, 10 Dec 2024 17:44:53 +0100 Subject: [PATCH 6/8] Use emoji wrapper --- .../src/components/pages/launch-emojicoin/EmojiRain.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx index 1e659a1dd..12ac0974e 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx @@ -1,6 +1,7 @@ import { type symbolBytesToEmojis } from "@sdk/emoji_data"; import { type AnimationPlaybackControls, useAnimate } from "framer-motion"; import { useEffect, useMemo, useState } from "react"; +import { Emoji } from "utils/emoji"; const DROP_FALL_TIME = 7.5; const DROP_INTERVAL = 1; @@ -65,7 +66,9 @@ export function EmojiRainDrop({ ref={scope} > {name.emojis.map((e) => ( - {e.emoji} + + + ))}
); From 303377c3f1e919f8e4f50090ea87dbf7d09cc79d Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Thu, 12 Dec 2024 16:20:19 +0100 Subject: [PATCH 7/8] Misc visual fixes --- .../ClientLaunchEmojicoinPage.tsx | 29 +++++++++---------- .../pages/launch-emojicoin/EmojiRain.tsx | 16 ++++++++-- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx index 91649772a..de4396ce5 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx @@ -20,6 +20,7 @@ import { import { symbolBytesToEmojis } from "@sdk/emoji_data"; import MemoizedLaunchAnimation from "./memoized-launch"; import { EmojiRain } from "./EmojiRain"; +import { useMatchBreakpoints } from "@hooks/index"; const LOADING_TIME = 2000; type Stage = "initial" | "loading" | "coding"; @@ -51,6 +52,8 @@ const ClientLaunchEmojicoinPage: React.FC<{ const isLoadingRegisteredMarket = useEmojiPicker((state) => state.isLoadingRegisteredMarket); const [stage, setStage] = useState(isLoadingRegisteredMarket ? "loading" : "initial"); + const { isMobile } = useMatchBreakpoints(); + useEffect(() => { if (emojiParams !== null) { setEmojis(getEmojisInString(emojiParams)); @@ -140,18 +143,20 @@ const ClientLaunchEmojicoinPage: React.FC<{ }, [status]); const backgroundDivClasses = - "absolute w-[200vw] h-[130%] top-[-15%] " + + "absolute w-[200vw] h-[123%] top-[-15%] " + "left-[-100vw] backdrop-blur-lg border-y-[1px] border-dark-gray " + - "border-solid sm:border-x-[1px] sm:!w-[130%] sm:left-[-15%]"; + "border-solid sm:border-x-[1px] sm:!w-[130%] sm:left-[-15%] rounded-[3px]"; return ( -
- {randomSymbols.length > 0 && ( - setEmojis(name.emojis.map((e) => e.emoji))} - /> - )} +
+
+ {randomSymbols.length > 0 && ( + setEmojis(name.emojis.map((e) => e.emoji))} + /> + )} +
@@ -162,12 +167,6 @@ const ClientLaunchEmojicoinPage: React.FC<{
-
); }; diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx index 12ac0974e..c1e032675 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/EmojiRain.tsx @@ -38,7 +38,7 @@ export function EmojiRainDrop({ delay, ease: [], repeat: Infinity, - repeatDelay: emojis * DROP_INTERVAL * DROP_FALL_TIME, // Repeat after all the other emojis have fallen. + repeatDelay: emojis * DROP_INTERVAL - DROP_FALL_TIME, // Repeat after all the other emojis have fallen. } ); @@ -60,7 +60,7 @@ export function EmojiRainDrop({ className="absolute emoji-rain-drop z-10 flex flex-col select-none cursor-pointer" style={{ left: `${x}vw`, - fontSize: "2em", + fontSize: "1em", top: initialY, }} ref={scope} @@ -83,6 +83,12 @@ export function EmojiRain({ }) { return ( <> +
{randomSymbols.map((name, i) => { const emojiRainDrop = (
); } From 02bef886b76e0ba7a81c26d694a1f9cf642ca91d Mon Sep 17 00:00:00 2001 From: Bogdan Crisan Date: Fri, 13 Dec 2024 14:13:38 +0100 Subject: [PATCH 8/8] Format --- .../pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx index de4396ce5..674f3a8a6 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx @@ -149,7 +149,10 @@ const ClientLaunchEmojicoinPage: React.FC<{ return (
-
+
{randomSymbols.length > 0 && (