From 5a0e7c3fc4c24a7a127a4b638a560923072799b6 Mon Sep 17 00:00:00 2001
From: Julian Early <julian.is.early@gmail.com>
Date: Thu, 11 Jul 2024 13:23:13 -0700
Subject: [PATCH] Fix assorted small errors (#245)

---
 src/common/components/atoms/card.tsx          |  2 +-
 src/fidgets/farcaster/components/CastRow.tsx  |  8 +++++--
 .../farcaster/components/Embeds/index.tsx     | 21 ++++++++++---------
 src/fidgets/ui/Text.tsx                       |  3 ---
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/common/components/atoms/card.tsx b/src/common/components/atoms/card.tsx
index a0bc5a92..70335cee 100644
--- a/src/common/components/atoms/card.tsx
+++ b/src/common/components/atoms/card.tsx
@@ -48,7 +48,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={mergeClasses("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/src/fidgets/farcaster/components/CastRow.tsx b/src/fidgets/farcaster/components/CastRow.tsx
index 6012d5ab..d982d357 100644
--- a/src/fidgets/farcaster/components/CastRow.tsx
+++ b/src/fidgets/farcaster/components/CastRow.tsx
@@ -90,8 +90,12 @@ const CastEmbeds = ({ cast }) => {
     >
       <ErrorBoundary>
         {map(cast.embeds, (embed) => {
-          if (isEmbedUrl(embed)) return renderEmbedForUrl(embed);
-          return renderEmbedForUrl({ castId: embed.cast_id });
+          if (isEmbedUrl(embed))
+            return renderEmbedForUrl({ ...embed, key: embed.url });
+          return renderEmbedForUrl({
+            castId: embed.cast_id,
+            key: embed.cast_id,
+          });
         })}
       </ErrorBoundary>
     </div>
diff --git a/src/fidgets/farcaster/components/Embeds/index.tsx b/src/fidgets/farcaster/components/Embeds/index.tsx
index 98b09de0..f1721649 100644
--- a/src/fidgets/farcaster/components/Embeds/index.tsx
+++ b/src/fidgets/farcaster/components/Embeds/index.tsx
@@ -15,11 +15,12 @@ export type CastEmbed = {
     fid: number;
     hash: string | Uint8Array;
   };
+  key?: string;
 };
 
-export const renderEmbedForUrl = ({ url, castId }: CastEmbed) => {
+export const renderEmbedForUrl = ({ url, castId, key }: CastEmbed) => {
   if (castId) {
-    return <EmbededCast castId={castId} />;
+    return <EmbededCast castId={castId} key={key} />;
   }
   if (!url) return null;
 
@@ -27,28 +28,28 @@ export const renderEmbedForUrl = ({ url, castId }: CastEmbed) => {
     url.includes("i.imgur.com") ||
     url.startsWith("https://imagedelivery.net")
   ) {
-    return <WarpcastImage url={url} />;
+    return <WarpcastImage url={url} key={key} />;
   } else if (url.startsWith('"chain:')) {
-    return <OnchainEmbed url={url} />;
+    return <OnchainEmbed url={url} key={key} />;
   } else if (url.startsWith("https://stream.warpcast.com")) {
-    return <VideoEmbed url={url} />;
+    return <VideoEmbed url={url} key={key} />;
   } else if (url.startsWith("https://warpcast.com") && !url.includes("/~/")) {
-    return <EmbededCast url={url} />;
+    return <EmbededCast url={url} key={key} />;
   } else if (
     (url.includes("twitter.com") || url.startsWith("https://x.com")) &&
     url.includes("status/")
   ) {
     const tweetId = url.split("/").pop();
-    return tweetId ? <TweetEmbed tweetId={tweetId} /> : null;
+    return tweetId ? <TweetEmbed tweetId={tweetId} key={key} /> : null;
   } else if (url.startsWith("https://nouns.build")) {
-    return <NounsBuildEmbed url={url} />;
+    return <NounsBuildEmbed url={url} key={key} />;
   } else if (url.includes("paragraph.xyz") || url.includes("pgrph.xyz")) {
-    return <ParagraphXyzEmbed url={url} />;
+    return <ParagraphXyzEmbed url={url} key={key} />;
   } else if (!isImageUrl(url)) {
     // NOTE: Need a better resolver
     // Currently all URLs that aren't otherise caputured try
     // To be frames, including things like youtube videos
-    return <FrameEmbed url={url} showError={false} />;
+    return <FrameEmbed url={url} showError={false} key={key} />;
   } else {
     return null;
   }
diff --git a/src/fidgets/ui/Text.tsx b/src/fidgets/ui/Text.tsx
index 71b41ddf..9f8810bd 100644
--- a/src/fidgets/ui/Text.tsx
+++ b/src/fidgets/ui/Text.tsx
@@ -3,8 +3,6 @@ import TextInput from "@/common/components/molecules/TextInput";
 import CSSInput from "@/common/components/molecules/CSSInput";
 import ColorSelector from "@/common/components/molecules/ColorSelector";
 import FontSelector from "@/common/components/molecules/FontSelector";
-import BorderSelector from "@/common/components/molecules/BorderSelector";
-import ShadowSelector from "@/common/components/molecules/ShadowSelector";
 import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
@@ -17,7 +15,6 @@ import {
   CardTitle,
   CardDescription,
 } from "@/common/components/atoms/card";
-import { FontFamily, Color } from "@/common/lib/theme";
 import { MarkdownRenderers } from "@/common/lib/utils/markdownRenderers";
 
 export type TextFidgetSettings = {