diff --git a/src/typescript/frontend/src/app/loading/page.tsx b/src/typescript/frontend/src/app/loading/page.tsx new file mode 100644 index 000000000..70189e4ce --- /dev/null +++ b/src/typescript/frontend/src/app/loading/page.tsx @@ -0,0 +1,9 @@ +"use client"; + +import React from "react"; + +import LoadingComponent from "components/loading"; + +export default function Loading() { + return ; +} diff --git a/src/typescript/frontend/src/components/emoji-picker/ColoredBytesIndicator.tsx b/src/typescript/frontend/src/components/emoji-picker/ColoredBytesIndicator.tsx index ce96434f8..c0f95ae2b 100644 --- a/src/typescript/frontend/src/components/emoji-picker/ColoredBytesIndicator.tsx +++ b/src/typescript/frontend/src/components/emoji-picker/ColoredBytesIndicator.tsx @@ -1,7 +1,7 @@ import { sumBytes } from "@sdk/utils/sum-emoji-bytes"; import { useEmojiPicker } from "context/emoji-picker-context"; import { MAX_NUM_CHAT_EMOJIS, MAX_SYMBOL_LENGTH } from "components/pages/emoji-picker/const"; -import { AnimatedStatusIndicator } from "components/pages/launch-emojicoin/animated-status-indicator"; +import { AnimatedLoadingBoxes } from "components/pages/launch-emojicoin/animated-loading-boxes"; import { motion } from "framer-motion"; import { useEffect, useState } from "react"; @@ -52,7 +52,7 @@ export const MarketValidityIndicator = ({
Too many bytes
) : null ) : typeof registered === "undefined" ? ( - + ) : registered ? (
Already Registered
) : ( diff --git a/src/typescript/frontend/src/components/loading.tsx b/src/typescript/frontend/src/components/loading.tsx index 7112c916e..9de27272c 100644 --- a/src/typescript/frontend/src/components/loading.tsx +++ b/src/typescript/frontend/src/components/loading.tsx @@ -1,47 +1,70 @@ "use client"; +// cspell:word unpathify -import React, { useEffect } from "react"; -import AnimatedStatusIndicator, { - type StaggerSpeed, -} from "./pages/launch-emojicoin/animated-status-indicator"; -import { getRandomSymbolEmoji, type SymbolEmojiData } from "@sdk/emoji_data"; +import React, { useEffect, useMemo } from "react"; +import AnimatedStatusIndicator from "./pages/launch-emojicoin/animated-emoji-circle"; +import { getRandomSymbolEmoji, SYMBOL_EMOJI_DATA, type SymbolEmojiData } from "@sdk/emoji_data"; +import { usePathname } from "next/navigation"; +import { EMOJI_PATH_INTRA_SEGMENT_DELIMITER, ONE_SPACE } from "utils/pathname-helpers"; + +const unpathify = (pathEmojiName: string) => + SYMBOL_EMOJI_DATA.byName(pathEmojiName.replaceAll(EMOJI_PATH_INTRA_SEGMENT_DELIMITER, ONE_SPACE)); export const Loading = ({ emojis, - numSquares, - animationSpeed, + numEmojis, }: { emojis?: SymbolEmojiData[]; - numSquares?: number; - animationSpeed?: StaggerSpeed; + numEmojis?: number; }) => { - const emojiCycle = emojis ?? Array.from({ length: 20 }, getRandomSymbolEmoji); - const [{ name, emoji }, setEmoji] = React.useState(emojiCycle[0]); + const pathname = usePathname(); + // Use the emojis in the path if we're on the `market` page. + const emojisInPath = pathname + .split("/market/") + .at(1) + ?.split(";") + .map(unpathify) + .filter((e) => typeof e !== "undefined"); + + const emojiCycle = useMemo(() => { + if (emojisInPath?.length || emojis?.length) { + // Note the `emojis!` below is because TypeScript can't infer that it's defined, but it definitely is. + return emojisInPath?.length ? emojisInPath : emojis!; + } + return Array.from({ length: 20 }, getRandomSymbolEmoji); + }, [emojisInPath, emojis]); + + const [emojiName, setEmojiName] = React.useState(emojiCycle[0].name); + const [emoji, setEmoji] = React.useState(emojiCycle[0].emoji); useEffect(() => { const interval = setInterval(() => { emojiCycle.unshift(emojiCycle.pop()!); - setEmoji(emojiCycle[0]); - }, 3000); + setEmoji(emojiCycle[0].emoji); + setEmojiName(emojiCycle[0].name); + }, 420.69); return () => clearInterval(interval); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, []); + const centered = "absolute left-0 right-0 ms-auto me-auto w-fit"; + return ( <>
{emoji}
- +
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx index 165931b90..28c7a3f80 100644 --- a/src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx +++ b/src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx @@ -33,7 +33,7 @@ const DesktopGrid = (props: GridProps) => { className="bg-black z-10 border-t border-solid border-t-dark-gray" > - }> + }> { + const emojis = useMemo(() => Array.from({ length: numEmojis }), [numEmojis]).map(() => + getRandomSymbolEmoji() + ); + const degrees = 360 / numEmojis; + + return ( + + {emojis.map((emoji, i) => ( +
+
+ {emoji.emoji} +
+
+ +
+
+ ))} + + ); +}; + +export default React.memo(AnimatedStatusIndicator); diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/animated-status-indicator/index.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/animated-loading-boxes/index.tsx similarity index 96% rename from src/typescript/frontend/src/components/pages/launch-emojicoin/animated-status-indicator/index.tsx rename to src/typescript/frontend/src/components/pages/launch-emojicoin/animated-loading-boxes/index.tsx index 54a3b904e..4d848fbbd 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/animated-status-indicator/index.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/animated-loading-boxes/index.tsx @@ -52,7 +52,7 @@ const useStaggerAnimation = ({ return scope; }; -export const AnimatedStatusIndicator = ({ +export const AnimatedLoadingBoxes = ({ numSquares = 14, delay, speed, @@ -100,4 +100,4 @@ export const AnimatedStatusIndicator = ({ ); }; -export default React.memo(AnimatedStatusIndicator); +export default React.memo(AnimatedLoadingBoxes); diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx index 32bc5a4a2..6ebe222bc 100644 --- a/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx +++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx @@ -3,7 +3,6 @@ import { MarketValidityIndicator } from "components/emoji-picker/ColoredBytesInd import EmojiPickerWithInput from "components/emoji-picker/EmojiPickerWithInput"; import { AnimatePresence, motion } from "framer-motion"; import React, { useEffect, useMemo } from "react"; -import AnimatedStatusIndicator from "../animated-status-indicator"; import { useEmojiPicker } from "context/emoji-picker-context"; import { translationFunction } from "context/language-context"; import { useRegisterMarket } from "../hooks/use-register-market"; @@ -15,6 +14,7 @@ import { toCoinDecimalString } from "lib/utils/decimals"; import { MARKET_REGISTRATION_DEPOSIT, ONE_APT_BIGINT } from "@sdk/const"; import Info from "components/info"; import { filterBigEmojis } from "components/pages/emoji-picker/EmojiPicker"; +import { useScramble } from "use-scramble"; const labelClassName = "whitespace-nowrap body-sm md:body-lg text-light-gray uppercase font-forma"; @@ -68,6 +68,15 @@ export const MemoizedLaunchAnimation = ({ } }; + const { ref } = useScramble({ + text: "Building your emojicoin...", + overdrive: false, + overflow: true, + playOnMount: true, + scramble: 10, + tick: 9, + }); + return ( {/* Input */} @@ -198,10 +207,9 @@ export const MemoizedLaunchAnimation = ({ animate={{ opacity: 1 }} className="absolute flex flex-col justify-center items-center w-full h-full gap-6" > - Building your emojicoin... -
- -
+ + Building your emojicoin... + )} diff --git a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx index 84ef50b4b..24f7d4650 100644 --- a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx +++ b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx @@ -23,7 +23,7 @@ import { import { Arrows } from "components/svg"; import type { EntryFunctionTransactionBuilder } from "@sdk/emojicoin_dot_fun/payload-builders"; import { useSearchParams } from "next/navigation"; -import AnimatedStatusIndicator from "components/pages/launch-emojicoin/animated-status-indicator"; +import AnimatedStatusIndicator from "components/pages/launch-emojicoin/animated-emoji-circle"; import { TypeTag } from "@aptos-labs/ts-sdk"; import Info from "components/info"; import { type AnyNumberString } from "@sdk/types/types"; @@ -98,7 +98,7 @@ const Liquidity: React.FC = ({ market, geoblocked }) => { searchParams.get("remove") !== null ? "remove" : "add" ); - const loadingComponent = useMemo(() => , []); + const loadingComponent = useMemo(() => , []); const { aptos,