From a2098b19dd347798196763c6f592c08fce4c5fe2 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Mon, 23 Dec 2024 18:20:59 -0300 Subject: [PATCH] feat: [SC-25978] :sparkles: Created Randomize mini-app for namegraph.dev --- apps/namegraph.dev/app/ideate/page.tsx | 19 +- apps/namegraph.dev/app/page.tsx | 6 + apps/namegraph.dev/app/randomize/page.tsx | 246 ++++++++++++++++++ .../components/mini-apps/ideate/catalog.tsx | 2 +- .../mini-apps/ideate/writers-block-pills.tsx | 15 +- apps/namegraph.dev/lib/utils.ts | 18 ++ 6 files changed, 287 insertions(+), 19 deletions(-) create mode 100644 apps/namegraph.dev/app/randomize/page.tsx diff --git a/apps/namegraph.dev/app/ideate/page.tsx b/apps/namegraph.dev/app/ideate/page.tsx index c4c640ce..2d5a2027 100644 --- a/apps/namegraph.dev/app/ideate/page.tsx +++ b/apps/namegraph.dev/app/ideate/page.tsx @@ -10,6 +10,7 @@ import { } from "@namehash/namegraph-sdk/utils"; import { WritersBlockPills } from "@/components/mini-apps/ideate/writers-block-pills"; import { Catalog } from "@/components/mini-apps/ideate/catalog"; +import { Button } from "@/components/ui/button"; export default function IdeatePage() { const [suggestions, setSuggestions] = useState([]); @@ -35,10 +36,20 @@ export default function IdeatePage() {
- ideate(collectionsToConsider)} - /> +

+ Check out what's hot +

+

+ Check out some suggestions from the community. +
Edit the catalog in the right to constraint the results + sampled. +

+ +
+ +
diff --git a/apps/namegraph.dev/app/page.tsx b/apps/namegraph.dev/app/page.tsx index 8e09990a..37abec0e 100644 --- a/apps/namegraph.dev/app/page.tsx +++ b/apps/namegraph.dev/app/page.tsx @@ -27,6 +27,12 @@ export default function HomePage() { Explore collections +
  • +

    ➑️

    + + Randomize + +
    • diff --git a/apps/namegraph.dev/app/randomize/page.tsx b/apps/namegraph.dev/app/randomize/page.tsx new file mode 100644 index 00000000..6463922b --- /dev/null +++ b/apps/namegraph.dev/app/randomize/page.tsx @@ -0,0 +1,246 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { Button } from "@namehash/namekit-react"; +import { + getCollectionsForQuery, + sampleNamesByCollectionId, + scrambleNamesByCollectionId, +} from "@/lib/utils"; +import { DebounceInput } from "react-debounce-input"; +import { + NameGraphFetchTopCollectionMembersResponse, + NameGraphGroupedByCategoryResponse, + NameGraphSuggestion, +} from "@namehash/namegraph-sdk/utils"; +import { TruncatedText } from "@namehash/namekit-react/client"; + +export default function RandomizePage() { + const [suggestions, setSuggestions] = useState< + NameGraphGroupedByCategoryResponse | undefined + >(undefined); + + const [sampledSuggestions, setSampledSuggestions] = useState< + NameGraphSuggestion[] | undefined + >(undefined); + + const [scrambledSuggestions, setScrambledSuggestions] = useState< + NameGraphSuggestion[] | undefined + >(undefined); + + const suggest = () => { + setError(false); + setSelectedCollection(undefined); + setSampledSuggestions(undefined); + setScrambledSuggestions(undefined); + + let query = debouncedValue; + if (debouncedValue.includes(".")) { + query = debouncedValue.split(".")[0]; + } + + setSuggestions(undefined); + getCollectionsForQuery(query) + .then((res) => setSuggestions(res)) + .catch(() => setError(true)); + }; + + const sample = () => { + setError(false); + + if (!selectedCollection?.collection_id) { + setError(true); + throw new Error("Selected collection has no collection ID"); + } + + setSampledSuggestions(undefined); + sampleNamesByCollectionId(selectedCollection.collection_id) + .then((res) => setSampledSuggestions(res)) + .catch(() => setError(true)); + }; + + const scramble = () => { + setError(false); + + if (!selectedCollection?.collection_id) { + setError(true); + throw new Error("Selected collection has no collection ID"); + } + + setScrambledSuggestions(undefined); + scrambleNamesByCollectionId(selectedCollection.collection_id) + .then((res) => setScrambledSuggestions(res)) + .catch(() => setError(true)); + }; + + const [debouncedValue, setDebouncedValue] = useState(""); + const [error, setError] = useState(false); + + useEffect(() => { + if (debouncedValue) { + suggest(); + } else { + setSuggestions(undefined); + setError(false); + } + }, [debouncedValue]); + + const [selectedCollection, setSelectedCollection] = useState< + NameGraphFetchTopCollectionMembersResponse | undefined + >(undefined); + + useEffect(() => { + setSampledSuggestions(undefined); + setScrambledSuggestions(undefined); + }, [selectedCollection]); + + return ( +
    +

    + πŸŒͺ️ Query something to start the brainstorm 🧠 +

    + setDebouncedValue(e.target.value)} + className="w-[80%] bg-gray-100 border border-gray-300 rounded-md p-3 px-4" + /> + + {error ? ( +

    + Please try again shortly, we had a network error while executing your + request. +

    + ) : suggestions?.categories.length ? ( + <> + {debouncedValue && ( +
    +

    + πŸ•ΈοΈ Select the collection you want to focus on πŸ”€ +

    +
    + {suggestions?.categories + ? suggestions?.categories.map((category) => { + return ( + <> + {category.collection_id ? ( + + ) : null} + + ); + }) + : null} +
    +
    + )} + {selectedCollection && ( +
    +
    +

    + 🎰 Generated names 🎰 +

    + {suggestions?.categories.length && ( +
    +
    +
    +
    + {suggestions.categories + .find( + (collection) => + collection.name === selectedCollection.name, + ) + ?.suggestions.map((suggestion, i) => ( + + ))} +
    +
    +
    +
    + )} +
    +
    +
    +

    + πŸƒ Sampled names πŸƒ +

    + {selectedCollection ? ( + + ) : null} +
    +
    +
    +
    + {sampledSuggestions?.map((suggestion, i) => ( + + ))} +
    +
    +
    +
    +
    +
    +
    +
    +

    + πŸ₯£ Scramble names πŸ₯£ +

    + {selectedCollection ? ( + + ) : null} +
    +
    +
    +
    + {scrambledSuggestions?.map((suggestion, i) => ( + + ))} +
    +
    +
    +
    +
    +
    +
    + )} + + ) : null} +
    + ); +} diff --git a/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx b/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx index 52bbe938..909cee84 100644 --- a/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx +++ b/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx @@ -62,7 +62,7 @@ export function Catalog({ onJsonChange }: CatalogProps) { value={jsonText} ref={catalogTextarea} onChange={handleJsonChange} - className="w-full h-full min-h-[500px] font-mono text-sm" + className="w-full h-full min-h-[450px] font-mono text-sm" /> {hasJSONFormatError ? (

    diff --git a/apps/namegraph.dev/components/mini-apps/ideate/writers-block-pills.tsx b/apps/namegraph.dev/components/mini-apps/ideate/writers-block-pills.tsx index 7cfe4cf1..bf8f35a4 100644 --- a/apps/namegraph.dev/components/mini-apps/ideate/writers-block-pills.tsx +++ b/apps/namegraph.dev/components/mini-apps/ideate/writers-block-pills.tsx @@ -1,23 +1,13 @@ -import { Button } from "../../ui/button"; import { WritersBlockSuggestion } from "@namehash/namegraph-sdk/utils"; import { WritersBlockPill } from "./writers-block-pill"; interface WritersBlockPillsProps { suggestions: WritersBlockSuggestion[]; - onIdeate: () => void; } -export function WritersBlockPills({ - suggestions, - onIdeate, -}: WritersBlockPillsProps) { +export function WritersBlockPills({ suggestions }: WritersBlockPillsProps) { return ( <> -

    Check out what's hot

    -

    - Check out some suggestions from the community. -
    Edit the catalog in the right to constraint the results sampled. -

    {suggestions.length ? (
    @@ -25,9 +15,6 @@ export function WritersBlockPills({ ))}
    -
    - -
    ) : null} diff --git a/apps/namegraph.dev/lib/utils.ts b/apps/namegraph.dev/lib/utils.ts index 9a606541..dc275d37 100644 --- a/apps/namegraph.dev/lib/utils.ts +++ b/apps/namegraph.dev/lib/utils.ts @@ -108,3 +108,21 @@ export const getCollectionsForQuery = async ( return nameGeneratorSuggestions; }; + +export const sampleNamesByCollectionId = async ( + collectionId: string, +): Promise => { + const nameGeneratorSuggestions = + await NameGraphClient.sampleCollectionMembers(collectionId); + + return nameGeneratorSuggestions; +}; + +export const scrambleNamesByCollectionId = async ( + collectionId: string, +): Promise => { + const nameGeneratorSuggestions = + await NameGraphClient.scrambleCollectionTokens(collectionId); + + return nameGeneratorSuggestions; +};