Show collection name on asset header

cartridge-gg · Oct 15, 2024 · a64c73a · a64c73a
1 parent 474eda5
commit a64c73a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 6 deletions.
diff --git a/packages/profile/src/components/asset.tsx b/packages/profile/src/components/asset.tsx
@@ -11,13 +11,19 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  CopyText,
 } from "@cartridge/ui-next";
+import { addAddressPadding } from "starknet";
 
 export function Asset() {
   const { address, tokenId } = useParams<{
     address: string;
     tokenId: string;
   }>();
+  const collection = {
+    address: address!,
+    name: "Blobert",
+  };
   const asset = {
     tokenId,
     name: "Blobert #196",
@@ -40,7 +46,7 @@ export function Asset() {
           variant="icon"
           size="icon"
           onClick={() => {
-            navigate(`/collection/${address}`);
+            navigate(`/collection/${collection.address}`);
           }}
         >
           <ArrowIcon variant="left" />
@@ -49,7 +55,12 @@ export function Asset() {
     >
       <LayoutHeader
         title={asset.name}
-        description={asset.tokenId}
+        description={
+          <CopyText
+            value={collection.name}
+            copyValue={addAddressPadding(collection.address)}
+          />
+        }
         icon={asset.imageUrl}
       />
 

diff --git a/packages/profile/src/components/provider/connection.tsx b/packages/profile/src/components/provider/connection.tsx
@@ -20,7 +20,7 @@ type ConnectionContextType = {
 type ParentMethods = AsyncMethodReturns<{ close: () => Promise<void> }>;
 
 const initialState: ConnectionContextType = {
-  parent: { close: async () => {} },
+  parent: { close: async () => { } },
   address: "",
   username: "",
   provider: new RpcProvider(),

diff --git a/packages/ui-next/src/components/copy-text.tsx b/packages/ui-next/src/components/copy-text.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/utils";
+import { CopyIcon } from "./icons";
+import { toast } from "sonner";
+import { useCallback } from "react";
+
+export function CopyText({
+  value,
+  copyValue,
+  className,
+}: {
+  value: string;
+  copyValue?: string;
+  className?: string;
+}) {
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(copyValue ?? value);
+    toast.success("Copied");
+  }, [value, copyValue]);
+
+  return (
+    <div
+      className={cn(
+        "text-xs text-muted-foreground flex items-center gap-1 cursor-pointer",
+        className,
+      )}
+      onClick={onCopy}
+    >
+      {value}
+
+      <CopyIcon size="xs" />
+    </div>
+  );
+}
diff --git a/packages/ui-next/src/components/index.ts b/packages/ui-next/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./copy-address";
+export * from "./copy-text";
 export * from "./icons";
 export * from "./network";
 export * from "./primitives";
diff --git a/packages/ui-next/src/components/network.tsx b/packages/ui-next/src/components/network.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Skeleton,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -19,6 +20,10 @@ export function Network({ chainId }: { chainId: string }) {
     toast.success("Chain ID copied");
   }, [chainId]);
 
+  if (!chainId) {
+    return <Skeleton className="h-[40px] w-[120px] rounded" />;
+  }
+
   return (
     <TooltipProvider>
       <Tooltip>

diff --git a/packages/utils/src/erc20.ts b/packages/utils/src/erc20.ts
@@ -59,9 +59,6 @@ export class ERC20 {
       this.callSymbol(),
       this.callDecimals(),
     ]);
-    if (symbol === "STRK") {
-      console.log(this.address);
-    }
     if (!this.logoUrl) {
       this.logoUrl = await this.fetchLogoUrl();
     }