Merge pull request #627 from us3r-network/B-fixUi-shixuewen

fix: poster, message, community, signup tested and improved
degencast · Mar 18, 2024 · 3c52388 · 3c52388
2 parents 11f9a9f + a33d5d7
commit 3c52388
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 57 deletions.
diff --git a/apps/u3/src/components/community/SidebarCommunityItem.tsx b/apps/u3/src/components/community/SidebarCommunityItem.tsx
@@ -46,7 +46,7 @@ export default function SidebarCommunityItem({
       </HoverCardTrigger>
       <HoverCardContent
         side="right"
-        className="w-[280px] h-auto bg-[#14171A] border-none"
+        className="w-[280px] h-auto bg-[#14171A] border-none max-sm:hidden"
       >
         <HoverCardArrow className="w-[30px] h-[10px] fill-[#14171A]" />
         <CommunityInfoAndAction communityInfo={communityInfo} />

diff --git a/apps/u3/src/components/message/MessageList.tsx b/apps/u3/src/components/message/MessageList.tsx
@@ -11,21 +11,23 @@ export default function MessageList() {
   const { xmtpClient, messageRouteParams } = useXmtpClient();
   const { loadingConversations, convoMessages } = useXmtpStore();
 
-  const messages =
-    convoMessages.get(messageRouteParams?.peerAddress || '') || [];
+  const { peerAddress } = messageRouteParams;
+  const messages = convoMessages.get(peerAddress || '') || [];
 
   const messageListEndRef = useRef<HTMLDivElement>(null);
   const megLen = messages.length;
   useEffect(() => {
-    (async () => {
-      await new Promise((r) => {
-        setTimeout(r, 100);
-      });
+    if (messageListEndRef.current) {
       messageListEndRef?.current?.scrollIntoView({
         behavior: 'smooth',
       });
-    })();
+    }
   }, [megLen]);
+  useEffect(() => {
+    if (messageListEndRef.current) {
+      messageListEndRef?.current?.scrollIntoView();
+    }
+  }, [peerAddress]);
   return (
     <div className="w-full flex flex-col gap-[20px] py-[20px]">
       {!loadingConversations &&
@@ -128,20 +130,22 @@ const MessageWrapper = styled.div`
   flex-shrink: 0;
   border-radius: 10px 10px 10px 0px;
   background: #000;
+  overflow: hidden;
+  padding: 20px;
+  box-sizing: border-box;
 `;
-const Text = styled.span`
+const Text = styled.div`
+  width: 100%;
   color: #fff;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-
-  margin: 20px;
+  word-break: break-all;
 `;
 const Image = styled.img`
   max-width: 120px;
   object-fit: cover;
-  margin: 20px;
 `;
 
 const MyMessageRowWrapper = styled(MessageRowWrapper)`

diff --git a/apps/u3/src/components/poster/gallery/GalleryItem.tsx b/apps/u3/src/components/poster/gallery/GalleryItem.tsx
@@ -83,7 +83,7 @@ export default function GalleryItem({
         closeModal={() => setOpenPreviewModal(false)}
       />
       <img
-        className="w-full h-[300px] object-cover cursor-pointer"
+        className="w-full h-[240px] object-left-top cursor-pointer max-sm:h-[350px]"
         src={previewImg}
         alt=""
         onClick={() => setOpenPreviewModal(true)}

diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx
@@ -264,7 +264,7 @@ export default function FCast({
                 avatar: userData.pfp,
                 name: userData.display,
                 handle: userData.userName,
-                createdAt: cast.created_at || cast.createdAt,
+                createdAt: cast.timestamp,
               }}
             />
             {(cast.parent_url || cast.rootParentUrl) && (

diff --git a/apps/u3/src/components/social/farcaster/signupv2/AddAccountKey.tsx b/apps/u3/src/components/social/farcaster/signupv2/AddAccountKey.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { useCallback } from 'react';
+import { ComponentPropsWithRef, useCallback } from 'react';
 import { createWalletClient, custom, fromHex, toHex } from 'viem';
 import { optimism } from 'viem/chains';
 import { toast } from 'react-toastify';
@@ -28,7 +28,9 @@ export default function AddAccountKey({
   fid,
   signer,
   setSigner,
-}: {
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
   fid: number;
   signer: NobleEd25519Signer | null;
   setSigner: (s: NobleEd25519Signer | null) => void;
@@ -129,8 +131,10 @@ export default function AddAccountKey({
     <div
       className={cn(
         'text-white flex flex-col border border-[#39424c] rounded-2xl',
-        'p-5 h-[350px] w-[320px]'
+        'p-5 h-[350px] w-[320px]',
+        className
       )}
+      {...props}
     >
       <Title checked={!!fid && !!signer} text={'Step 2'} />
       <div className="italic py-5 text-xl font-bold border-b border-[#39424c]">

diff --git a/apps/u3/src/components/social/farcaster/signupv2/FnameRegister.tsx b/apps/u3/src/components/social/farcaster/signupv2/FnameRegister.tsx
@@ -3,7 +3,7 @@ import { toHex } from 'viem';
 import axios from 'axios';
 import { toast } from 'react-toastify';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
-import { useCallback, useState } from 'react';
+import { ComponentPropsWithRef, useCallback, useState } from 'react';
 import { NobleEd25519Signer, ViemWalletEip712Signer } from '@farcaster/hub-web';
 import { switchChain } from '@wagmi/core';
 import { mainnet } from 'viem/chains';
@@ -20,7 +20,9 @@ export default function AddAccountKey({
   signer,
   setFname,
   makePrimaryName,
-}: {
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
   fid: number;
   fname: string;
   signer?: NobleEd25519Signer;
@@ -97,8 +99,10 @@ export default function AddAccountKey({
     <div
       className={cn(
         'text-white flex flex-col border border-[#39424c] rounded-2xl',
-        'p-5 h-[350px] w-[320px]'
+        'p-5 h-[350px] w-[320px]',
+        className
       )}
+      {...props}
     >
       <Title checked={!!fid && !!fname} text={'Step 3'} />
       <div className="italic py-5 text-xl font-bold border-b border-[#39424c]">

diff --git a/apps/u3/src/components/social/farcaster/signupv2/RegisterAndPay.tsx b/apps/u3/src/components/social/farcaster/signupv2/RegisterAndPay.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { ComponentPropsWithRef, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { idRegistryABI } from '@farcaster/hub-web';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
@@ -20,7 +20,9 @@ import { shortAddress } from '@/utils/message/xmtp';
 export default function RegisterAndPay({
   fid,
   setFid,
-}: {
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
   fid: number;
   setFid: (fid: number) => void;
 }) {
@@ -90,8 +92,10 @@ export default function RegisterAndPay({
     <div
       className={cn(
         'text-white flex flex-col border border-[#39424c] rounded-2xl',
-        'p-5 h-[350px] w-[320px]'
+        'p-5 h-[350px] w-[320px]',
+        className
       )}
+      {...props}
     >
       <Title checked={!!fid} text={'Step 1'} />
       <div className="italic py-5 text-xl font-bold border-b border-[#39424c]">

diff --git a/apps/u3/src/components/social/farcaster/signupv2/RentStorage.tsx b/apps/u3/src/components/social/farcaster/signupv2/RentStorage.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { ComponentPropsWithRef, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import {
@@ -19,7 +19,9 @@ export default function RentStorage({
   fid,
   hasStorage,
   setHasStorage,
-}: {
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
   fid: number;
   hasStorage: boolean;
   setHasStorage: (h: boolean) => void;
@@ -74,8 +76,10 @@ export default function RentStorage({
     <div
       className={cn(
         'text-white flex flex-col border border-[#39424c] rounded-2xl',
-        'p-5 h-[350px] w-[320px]'
+        'p-5 h-[350px] w-[320px]',
+        className
       )}
+      {...props}
     >
       <Title checked={!!fid && hasStorage} text={'Step 4'} />
       <div className="italic py-5 text-xl font-bold border-b border-[#39424c]">

diff --git a/apps/u3/src/container/social/FarcasterSignupV2.tsx b/apps/u3/src/container/social/FarcasterSignupV2.tsx
@@ -10,6 +10,11 @@ import { FARCASTER_NETWORK, FARCASTER_WEB_CLIENT } from '@/constants/farcaster';
 import RentStorage from '@/components/social/farcaster/signupv2/RentStorage';
 import { ChevronRightDouble } from '@/components/common/icons/chevon-right-double';
 import ColorButton from '@/components/common/button/ColorButton';
+import { cn } from '@/lib/utils';
+import {
+  MobileHeaderBackBtn,
+  MobileHeaderWrapper,
+} from '@/components/layout/mobile/MobileHeaderCommon';
 
 export default function FarcasterSignupV2() {
   const {
@@ -52,39 +57,52 @@ export default function FarcasterSignupV2() {
     [fid, signer, hasStorage]
   );
   return (
-    <div className="h-screen flex flex-col items-center justify-center">
-      <h3 className="text-white font-bold text-4xl italic">
+    <div className={cn('w-full h-full flex-col')}>
+      <h3 className="text-white font-bold text-4xl italic text-center pt-[20px] max-sm:hidden">
         Sign up for Farcaster
       </h3>
-      <div className="steps flex flex-wrap items-center justify-between gap-5 w-full my-auto mt-[50px] mb-[80px]">
-        <RegisterAndPay fid={fid} setFid={setFid} />
-        <AddAccountKey fid={fid} signer={signer} setSigner={setSigner} />
-        <FnameRegister
-          fid={fid}
-          fname={fname}
-          signer={signer}
-          setFname={setFname}
-          makePrimaryName={makePrimaryName}
-        />
-        <RentStorage
-          fid={fid}
-          hasStorage={hasStorage}
-          setHasStorage={setHasStorage}
-        />
-      </div>
-      <div className="w-full text-white flex justify-end">
-        {(fid && fname && signer && hasStorage && (
-          <ColorButton
-            type="button"
-            onClick={() => {
-              navigate('/farcaster/profile');
-            }}
-          >
-            Setup your profile
-            <ChevronRightDouble />
-          </ColorButton>
-        )) ||
-          null}
+      <MobileHeaderWrapper>
+        <MobileHeaderBackBtn title="Sign up for Farcaster" />
+      </MobileHeaderWrapper>
+
+      <div className="flex-1 h-full overflow-auto p-[20px] box-border max-sm:h-[calc(100vh-56px-80px)]">
+        <div className="steps flex flex-wrap items-center justify-between gap-5 w-full max-sm:flex-col">
+          <RegisterAndPay className="max-sm:w-full" fid={fid} setFid={setFid} />
+          <AddAccountKey
+            className="max-sm:w-full"
+            fid={fid}
+            signer={signer}
+            setSigner={setSigner}
+          />
+          <FnameRegister
+            className="max-sm:w-full"
+            fid={fid}
+            fname={fname}
+            signer={signer}
+            setFname={setFname}
+            makePrimaryName={makePrimaryName}
+          />
+          <RentStorage
+            className="max-sm:w-full"
+            fid={fid}
+            hasStorage={hasStorage}
+            setHasStorage={setHasStorage}
+          />
+        </div>
+        <div className="w-full text-white flex justify-end">
+          {(fid && fname && signer && hasStorage && (
+            <ColorButton
+              type="button"
+              onClick={() => {
+                navigate('/farcaster/profile');
+              }}
+            >
+              Setup your profile
+              <ChevronRightDouble />
+            </ColorButton>
+          )) ||
+            null}
+        </div>
       </div>
     </div>
   );