feat(market): update collection socials and description (#203)

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx

@@ -19,9 +19,8 @@ import {
 import type { Collection } from "~/types";
 import CopyButton from "~/components/copy-button";
 import ExternalLink from "~/components/external-link";
-import CollectionHeaderStats from "./collection-header-stats";
-
 import useCollection from "~/hooks/useCollection";
+import CollectionHeaderStats from "./collection-header-stats";
 
 interface CollectionHeaderProps {
   collectionAddress: string;
@@ -34,7 +33,7 @@ export default function CollectionHeader({
 }: CollectionHeaderProps) {
   const [collapsibleOpen, setCollapsibleOpen] = useState(false);
 
-  const { data } = useCollection({ address:collectionAddress })
+  const { data } = useCollection({ address: collectionAddress });
 
   if (!data) {
     return null;
@@ -71,30 +70,32 @@ export default function CollectionHeader({
               </div>
               <div className="mb-1 flex h-6 items-center gap-4 text-sm text-muted-foreground">
                 <CopyButton textToCopy={collectionAddress} />
-                <ExternalLink href="/">
+                <ExternalLink href={collection.twitter}>
                   <XIcon className="h-4" />
                 </ExternalLink>
-                <ExternalLink href="/">
+                <ExternalLink href={collection.discord}>
                   <Discord className="h-4" />
                 </ExternalLink>
-                <ExternalLink href="/">
+                <ExternalLink href={collection.website}>
                   <Globe className="h-4" />
                 </ExternalLink>
-                <CollapsibleTrigger asChild>
-                  <button
-                    className={cn(
-                      "ml-1 flex items-center gap-1 hover:text-foreground",
-                      focusableStyles,
-                    )}
-                  >
-                    <p className="flex items-center">
-                      {collapsibleOpen ? "Less Info" : "More Info"}
-                    </p>
-                    <p className="flex items-center text-xs">
-                      <ChevronDown size={16} />
-                    </p>
-                  </button>
-                </CollapsibleTrigger>
+                {collection.description && (
+                  <CollapsibleTrigger asChild>
+                    <button
+                      className={cn(
+                        "ml-1 flex items-center gap-1 hover:text-foreground",
+                        focusableStyles,
+                      )}
+                    >
+                      <p className="flex items-center">
+                        {collapsibleOpen ? "Less Info" : "More Info"}
+                      </p>
+                      <p className="flex items-center text-xs">
+                        <ChevronDown size={16} />
+                      </p>
+                    </button>
+                  </CollapsibleTrigger>
+                )}
               </div>
             </div>
           </div>
@@ -103,22 +104,7 @@ export default function CollectionHeader({
           </div>
         </div>
         <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-          {/* <p className="flex items-center gap-2 pt-8"> */}
-          {/* Created
-            <span className="text-muted-foreground"> Feb 2000</span> */}
-          {/* <svg width="4" height="4" viewBox="0 0 4 4" fill="none">
-              <circle cx="2" cy="2" r="2" fill="#D9D9D9" />
-            </svg> */}
-          {/* Creator earnings
-            <span className="text-muted-foreground"> 1000%</span> */}
-          {/* </p> */}
-          <p className="mb-6 max-w-lg pt-4 text-sm">
-            Everai is a pioneering web3 brand set to expand its universe powered
-            by the collective creativity of its artistic partners and vibrant
-            community. In the Everai Universe, the Everais stand as the
-            mightiest heroes of Shodai&apos;s civilization… Get yours now to
-            join us in this collaborative journey to shape the Everai Universe!
-          </p>
+          <p className="mb-6 max-w-lg pt-4 text-sm">{collection.description}</p>
           <div className="block lg:hidden">
             <CollectionHeaderStats collection={data} />
           </div>

apps/arkmarket/src/app/collection/[collectionAddress]/components/mobile-collection-header.tsx

@@ -68,13 +68,13 @@ export default function MobileCollectionHeader({
             </p>
             <div className="flex items-center gap-4 text-muted-foreground">
               <CopyButton textToCopy={collectionAddress} className="h-6" />
-              <ExternalLink href="/">
+              <ExternalLink href={collection.twitter}>
                 <XIcon className="h-6 w-auto" />
               </ExternalLink>
-              <ExternalLink href="/">
+              <ExternalLink href={collection.discord}>
                 <Discord className="h-6 w-auto" />
               </ExternalLink>
-              <ExternalLink href="/">
+              <ExternalLink href={collection.website}>
                 <Globe className="h-6 w-auto" />
               </ExternalLink>
             </div>

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useAccount, useStarkProfile } from "@starknet-react/core";
+import { useQuery } from "@tanstack/react-query";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn, ellipsableStyles, shortAddress } from "@ark-market/ui";
@@ -21,7 +22,10 @@ import {
 } from "@ark-market/ui/icons";
 
 import type { Token } from "~/types";
+import CopyButton from "~/components/copy-button";
+import ExternalLink from "~/components/external-link";
 import Media from "~/components/media";
+import getCollection from "~/lib/getCollection";
 import ownerOrShortAddress from "~/lib/ownerOrShortAddress";
 
 interface TokenAboutProps {
@@ -40,6 +44,13 @@ export default function TokenAbout({
   const { address } = useAccount();
   const collectionShortenedAddress = shortAddress(contractAddress);
   const { data: starkProfile } = useStarkProfile({ address: token.owner });
+  const { data: collection } = useQuery({
+    queryKey: ["collection", address],
+    queryFn: () =>
+      getCollection({
+        collectionAddress: token.collection_address,
+      }),
+  });
 
   const ownerShortenedAddress =
     starkProfile?.name ??
@@ -78,34 +89,25 @@ export default function TokenAbout({
           <div>
             <h4 className="text-xl font-semibold">{token.collection_name}</h4>
             <p className="mt-2 hidden text-sm lg:block">
-              {`Everai is a pioneering web3 brand set to expand its universe powered
-          by the collective creativity of its artistic partners and vibrant
-          community. In the Everai Universe, the Everais stand as the mightiest
-          heroes of Shodai's civilization… Get yours now to join us in this
-          collaborative journey to shape the Everai Universe!`}
+              {collection?.description}
             </p>
           </div>
         </div>
 
-        <div className="mt-5 flex items-center gap-4 text-muted-foreground lg:mt-10">
-          <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
-            <XIcon className="size-4" />
-          </Button>
-          <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
-            <Discord className="size-4" />
-          </Button>
-          <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
-            <Globe className="size-4" />
-          </Button>
+        <div className="mt-5 flex items-center gap-6 text-muted-foreground lg:mt-10">
+          <CopyButton textToCopy={collection?.address} />
+          <ExternalLink href={collection?.twitter}>
+            <XIcon className="h-6" />
+          </ExternalLink>
+          <ExternalLink href={collection?.discord}>
+            <Discord className="h-6" />
+          </ExternalLink>
+          <ExternalLink href={collection?.website}>
+            <Globe className="h-6" />
+          </ExternalLink>
         </div>
 
-        <p className="mt-6 text-sm lg:hidden">
-          {`Everai is a pioneering web3 brand set to expand its universe powered
-          by the collective creativity of its artistic partners and vibrant
-          community. In the Everai Universe, the Everais stand as the mightiest
-          heroes of Shodai's civilization… Get yours now to join us in this
-          collaborative journey to shape the Everai Universe!`}
-        </p>
+        <p className="mt-6 text-sm lg:hidden">{collection?.description}</p>
 
         <div className="mt-8 flex flex-col gap-4 pb-6">
           <div className="flex items-center justify-between">
@@ -139,7 +141,7 @@ export default function TokenAbout({
           </div>
           <div className="flex items-center justify-between">
             <p className="font-medium">Royalty</p>
-            <p className="text-muted-foreground">_%</p>
+            <p className="text-muted-foreground">-</p>
           </div>
           <div className="flex items-center justify-between">
             <p className="font-medium">Chain</p>

apps/arkmarket/src/components/copy-button.tsx

@@ -13,7 +13,7 @@ import {
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 
 interface CopyButtonProps {
-  textToCopy: string;
+  textToCopy?: string;
   iconWeight?: number;
 }
 
@@ -29,7 +29,7 @@ export default function CopyButton({
       <Tooltip open={copiedText !== null}>
         <TooltipTrigger asChild>
           <button
-            onClick={() => copy(textToCopy)}
+            onClick={() => copy(textToCopy ?? "")}
             className={cn("flex h-4", focusableStyles, className)}
           >
             <Copy

apps/arkmarket/src/components/external-link.tsx

@@ -2,17 +2,20 @@ import type { AnchorHTMLAttributes, PropsWithChildren } from "react";
 
 import { cn, focusableStyles } from "@ark-market/ui";
 
-type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+type ExternalLinkProps = {
+  className?: string;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 export default function ExternalLink({
   children,
   className,
   ...props
-}: PropsWithChildren<AnchorProps>) {
+}: ExternalLinkProps) {
   return (
     <a
       className={cn(
         "leading-none transition-colors hover:text-foreground",
+        props.href ?? "pointer-events-none",
         focusableStyles,
         className,
       )}

apps/arkmarket/src/types/index.ts

@@ -1,6 +1,9 @@
 export interface Collection {
   address: string;
+  description?: string;
+  discord?: string;
   floor?: string;
+  floor_7d_percentage: string;
   image?: string;
   is_verified: boolean;
   listed_items: number;
@@ -12,8 +15,9 @@ export interface Collection {
   token_count: number;
   total_sales: number;
   total_volume: number;
+  twitter?: string;
   volume_7d_eth: number;
-  floor_7d_percentage: string;
+  website?: string;
 }
 
 export type CollectionTrait = Record<string, number>;