Merge pull request #559 from us3r-network/F-castV2UI-shixuewen

feat: cast ui & navigate
degencast · Feb 21, 2024 · a4119d7 · a4119d7
2 parents e5f75c8 + 8919396
commit a4119d7
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 105 deletions.
diff --git a/apps/u3/src/components/layout/LoadableFallback.tsx b/apps/u3/src/components/layout/LoadableFallback.tsx
@@ -15,5 +15,4 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #14171a;
 `;
diff --git a/apps/u3/src/components/social/Embed.tsx b/apps/u3/src/components/social/Embed.tsx
@@ -1,6 +1,13 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ComponentPropsWithRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   CastId,
@@ -47,11 +54,16 @@ export default function Embed({
   embedWebpages,
   embedCasts,
   cast,
+  embedCastClick,
 }: {
   embedImgs: { url: string }[];
   embedWebpages: { url: string }[];
   embedCasts: { castId: { fid: number; hash: string } }[];
   cast: FarCast;
+  embedCastClick?: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    castHex: string
+  ) => void;
 }) {
   const viewRef = useRef<HTMLDivElement>(null);
   const [metadata, setMetadata] = useState<FarCastEmbedMeta[]>([]);
@@ -121,7 +133,7 @@ export default function Embed({
             {embedImgs.map((img, idx) => (
               // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
               <img
-                className="max-h-[200px] object-cover"
+                className="max-w-[200px] object-cover"
                 src={img.url}
                 alt=""
                 loading="lazy"
@@ -140,13 +152,18 @@ export default function Embed({
           />
         </>
       )}
-      <div className="w-full">
+      <div className="w-full max-w-[630px]">
         {[...metadataCasts].map((item) => {
           if (item.cast === undefined) return null;
+          const castHex = Buffer.from(item.cast.hash.data).toString('hex');
           return (
             <EmbedCast
               data={item}
-              key={Buffer.from(item.cast.hash.data).toString('hex')}
+              key={castHex}
+              onClick={(e) => {
+                e.stopPropagation();
+                embedCastClick?.(e, castHex);
+              }}
             />
           );
         })}
@@ -263,8 +280,12 @@ function EmbedCastFrame({
   return (
     <>
       <div className="border rounded-xl overflow-hidden border-[#39424c]">
-        <div className="h-80 overflow-hidden flex items-center">
-          <img src={frameData.fcFrameImage} alt="" />
+        <div className="w-full h-80 overflow-hidden flex items-center">
+          <img
+            src={frameData.fcFrameImage}
+            alt=""
+            className="w-full h-full object-cover"
+          />
         </div>
         {frameData.fcFrameInputText && (
           <div className="p-3">
@@ -377,9 +398,10 @@ function EmbedCastFrameRedirect({
   );
 }
 
-function EmbedCast({ data }: { data: FarCastEmbedMetaCast }) {
-  const navigate = useNavigate();
-
+function EmbedCast({
+  data,
+  ...props
+}: ComponentPropsWithRef<'div'> & { data: FarCastEmbedMetaCast }) {
   const userData = useMemo(() => {
     const img = data.user.find((u) => u.type === UserDataType.PFP)?.value;
     const username = data.user.find(
@@ -404,14 +426,7 @@ function EmbedCast({ data }: { data: FarCastEmbedMetaCast }) {
   return (
     <div
       className="w-full rounded-[10px] text-[#fff] p-[20px] cursor-pointer flex gap-[10px] justify-between bg-[#14171a]"
-      onClick={(e) => {
-        e.stopPropagation();
-        navigate(
-          `/social/post-detail/fcast/${Buffer.from(
-            data.cast.hash.data
-          ).toString('hex')}`
-        );
-      }}
+      {...props}
     >
       <div className="w-0 flex-1">
         <div className="flex items-center gap-[10px]">
@@ -509,18 +524,14 @@ export function EmbedWebsite({
     >
       {(isImg(img || '') && (
         <div
-          className="img w-full max-h-[200px] object-cover"
+          className="img w-full object-cover"
           style={{
             backgroundImage: `url(${img})`,
           }}
         />
       )) || (
         <div className="img">
-          <img
-            className="img w-full max-h-[200px] object-cover"
-            src={img}
-            alt=""
-          />
+          <img className="img w-full object-cover" src={img} alt="" />
         </div>
       )}
       <div className="flex flex-col gap-[10px] p-[16px] font-[Rubik]">

diff --git a/apps/u3/src/components/social/ModalImg.tsx b/apps/u3/src/components/social/ModalImg.tsx
@@ -84,7 +84,7 @@ const ModalBody = styled.div`
     align-items: flex-end;
     gap: 20px;
     border-radius: 20px;
-    max-height: 80%;
+    max-height: 90%;
     background: var(--1-b-1-e-23, #1b1e23);
   }
   > .top {

diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx
@@ -215,7 +215,7 @@ export function PostCardWrapperV2({
   return (
     <div
       className={cn(
-        'bg-[#20262F] hover:bg-[#000000] p-[20px] box-border flex cursor-pointer',
+        'bg-[#20262F] hover:bg-[#000000] px-[20px] box-border flex cursor-pointer border-b border-[#39424c]',
         isDetail && 'hover:bg-[#20262F] cursor-default',
         className
       )}
@@ -491,7 +491,7 @@ const Handle = styled.div`
 `;
 
 export const PostCardShowMoreWrapper = styled.div`
-  > button {
+  button {
     border: none;
     background: #454c99;
     -webkit-background-clip: text;

diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx
@@ -40,7 +40,6 @@ import {
 } from '../PostCard';
 import Embed from '../Embed';
 import FarcasterChannel from './FarcasterChannel';
-import { PostCardMenuBtn } from '../PostCardMenuBtn';
 import { SOCIAL_SHARE_TITLE } from '../../../constants';
 import { getEmbeds } from '../../../utils/social/farcaster/getEmbeds';
 import FCastText from './FCastText';
@@ -62,9 +61,10 @@ export default function FCast({
   isDetail,
   showMenuBtn,
   cardClickAction,
+  castClickAction,
   disableRenderUrl,
   simpleLayout,
-  isCommunityLayout,
+  isV2Layout,
   ...wrapperProps
 }: ComponentPropsWithRef<'div'> & {
   cast: FarCast;
@@ -76,7 +76,11 @@ export default function FCast({
   disableRenderUrl?: boolean;
   simpleLayout?: boolean;
   cardClickAction?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  isCommunityLayout?: boolean;
+  castClickAction?: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    castHex: string
+  ) => void;
+  isV2Layout?: boolean;
 }) {
   const navigate = useNavigate();
   const viewRef = useRef<HTMLDivElement>(null);
@@ -207,17 +211,15 @@ export default function FCast({
    * 注：这里是区分v2版本布局，在这里兼容v2是为了保证功能一致改动时方便
    * //TODO 等正式使用v2版本后，删除这个判断，然后删除下面旧的布局
    */
-  if (isCommunityLayout) {
+  if (isV2Layout) {
+    const castHex = Buffer.from(castId.hash).toString('hex');
     return (
       <PostCardWrapperV2
-        id={Buffer.from(cast.hash.data).toString('hex')}
+        id={castHex}
         isDetail={isDetail}
         onClick={(e) => {
           if (isDetail) return;
-          const id = Buffer.from(castId.hash).toString('hex');
-
-          cardClickAction?.(e);
-          navigate(`/social/post-detail/fcast/${id}`);
+          castClickAction?.(e, castHex);
         }}
         {...wrapperProps}
       >
@@ -237,10 +239,10 @@ export default function FCast({
               changeCastRecastsWithCurrFid(true);
             }}
           />
-          <div className="text-[#FFBB02] text-[14px] font-medium">$5.00</div>
+          <FCastTipDetail cast={cast} isV2Layout />
         </div>
         <PostCardMainWrapper>
-          <div className="flex items-center gap-5">
+          <div className="flex items-center gap-[5px]">
             <PostCardUserInfoV2
               data={{
                 platform: SocialPlatform.Farcaster,
@@ -253,10 +255,9 @@ export default function FCast({
             {(cast.parent_url || cast.rootParentUrl) && (
               <FarcasterChannel
                 url={cast.parent_url || cast.rootParentUrl}
-                isCommunityLayout
+                isV2Layout
               />
             )}
-            <FCastTipDetail cast={cast} />
             <div className="flex-grow" />
             <div
               className="flex items-center gap-2"
@@ -298,16 +299,14 @@ export default function FCast({
           </PostCardContentWrapper>
           {showMore && (
             <PostCardShowMoreWrapper>
-              <button
-                type="button"
-                onClick={(e) => {
+              <div
+                onClick={(e: any) => {
                   e.stopPropagation();
-                  const id = Buffer.from(castId.hash).toString('hex');
-                  navigate(`/social/post-detail/fcast/${id}`);
+                  castClickAction?.(e, castHex);
                 }}
               >
-                Show more
-              </button>
+                <button type="button">Show more</button>
+              </div>
             </PostCardShowMoreWrapper>
           )}
           {!simpleLayout && (
@@ -316,6 +315,9 @@ export default function FCast({
               embedWebpages={!disableRenderUrl ? embeds.webpages : []}
               embedCasts={[...embeds.casts]}
               cast={cast}
+              embedCastClick={(e, embedCastHex) => {
+                castClickAction?.(e, embedCastHex);
+              }}
             />
           )}
           <PostCardFooterWrapper>
@@ -470,6 +472,9 @@ export default function FCast({
           embedWebpages={!disableRenderUrl ? embeds.webpages : []}
           embedCasts={[...embeds.casts]}
           cast={cast}
+          embedCastClick={(e, embedCastHex) => {
+            navigate(`/social/post-detail/fcast/${embedCastHex}`);
+          }}
         />
       )}
       {(cast.parent_url || cast.rootParentUrl) && (

diff --git a/apps/u3/src/components/social/farcaster/FCastLike.tsx b/apps/u3/src/components/social/farcaster/FCastLike.tsx
@@ -41,7 +41,7 @@ export default function FCastLike({
 
   return (
     <PostLikeWrapper>
-      {likes.length > 0 && (
+      {/* {likes.length > 0 && (
         <PostLikeAvatarsWrapper>
           {likes.slice(0, 3).map((item) => {
             return (
@@ -57,7 +57,7 @@ export default function FCastLike({
             <PostLikeAvatarWrapper>+{likes.length - 3}</PostLikeAvatarWrapper>
           )}
         </PostLikeAvatarsWrapper>
-      )}
+      )} */}
       <PostLike
         totalLikes={likeCount}
         liked={liked}
@@ -81,29 +81,29 @@ export default function FCastLike({
   );
 }
 
-function LikeAvatar({
-  farcasterUserData,
-  farcasterUserDataObj,
-  fid,
-}: {
-  fid: string;
-  farcasterUserData: { [key: string]: { type: number; value: string }[] };
-  farcasterUserDataObj?: { [key: string]: UserData } | undefined;
-}) {
-  const userData = useFarcasterUserData({
-    fid,
-    farcasterUserData,
-    farcasterUserDataObj,
-  });
-  if (userData.pfp) {
-    return (
-      <PostLikeAvatarWrapper>
-        <PostLikeAvatar src={userData.pfp} alt="" />
-      </PostLikeAvatarWrapper>
-    );
-  }
-  if (userData.display) {
-    return <PostLikeAvatarWrapper>{userData.display}</PostLikeAvatarWrapper>;
-  }
-  return <PostLikeAvatarWrapper>{userData.fid}</PostLikeAvatarWrapper>;
-}
+// function LikeAvatar({
+//   farcasterUserData,
+//   farcasterUserDataObj,
+//   fid,
+// }: {
+//   fid: string;
+//   farcasterUserData: { [key: string]: { type: number; value: string }[] };
+//   farcasterUserDataObj?: { [key: string]: UserData } | undefined;
+// }) {
+//   const userData = useFarcasterUserData({
+//     fid,
+//     farcasterUserData,
+//     farcasterUserDataObj,
+//   });
+//   if (userData.pfp) {
+//     return (
+//       <PostLikeAvatarWrapper>
+//         <PostLikeAvatar src={userData.pfp} alt="" />
+//       </PostLikeAvatarWrapper>
+//     );
+//   }
+//   if (userData.display) {
+//     return <PostLikeAvatarWrapper>{userData.display}</PostLikeAvatarWrapper>;
+//   }
+//   return <PostLikeAvatarWrapper>{userData.fid}</PostLikeAvatarWrapper>;
+// }
diff --git a/apps/u3/src/components/social/farcaster/FCastTipDetail.tsx b/apps/u3/src/components/social/farcaster/FCastTipDetail.tsx
@@ -18,7 +18,13 @@ import {
   TableRow,
 } from '@/components/ui/table';
 
-export default function FCastTipDetail({ cast }: { cast: FarCast }) {
+export default function FCastTipDetail({
+  cast,
+  isV2Layout,
+}: {
+  cast: FarCast;
+  isV2Layout?: boolean;
+}) {
   const [openModal, setOpenModal] = useState(false);
   const [loading, setLoading] = useState(false);
   const [tipDetails, setTipDetails] = useState<
@@ -64,7 +70,11 @@ export default function FCastTipDetail({ cast }: { cast: FarCast }) {
         }}
       >
         {/* <span className="text-[#718096] text-sm"> received</span> */}
-        <span className="text-[#FFBB02]"> {cast.tipsTotalAmount} $DEGEN</span>
+        {isV2Layout ? (
+          <span className="text-[#FFBB02]"> ${cast.tipsTotalAmount}</span>
+        ) : (
+          <span className="text-[#FFBB02]"> {cast.tipsTotalAmount} $DEGEN</span>
+        )}
       </div>
       {openModal && (
         <TipDetailsModal

diff --git a/apps/u3/src/components/social/farcaster/FCastTips.tsx b/apps/u3/src/components/social/farcaster/FCastTips.tsx
@@ -145,8 +145,8 @@ export default function FCastTips({
           setOpenModal(true);
         }}
       >
-        <DegenTip className={'w-5 h-5'} />
-        <span className="text-[#A36EFD]">Tips</span>
+        {/* <DegenTip className={'w-5 h-5'} /> */}
+        <span className="text-[#FFBB02]">🎁 Tips</span>
       </div>
       {openModal && (
         <TipsModal