Merge pull request #517 from WatchItDev/app/refactor/parse-descriptio…

…ns-send-quick-improvement

refactor: ui and texts minor enhancements

src/components/carousel/carousel-section.tsx

@@ -17,7 +17,7 @@ export const CarouselSection: FC<PropsWithChildren<CarouselSectionProps>> = ({
   children,
 }) => (
   <Card>
-    <CardHeader title={title} sx={{ px: '50px', fontSize: 'clamp(2rem, 1vw, 3rem)' }} />
+    {/* <CardHeader title={title} sx={{ px: '50px', fontSize: 'clamp(2rem, 1vw, 3rem)' }} /> */}
     <CardContent sx={{ px: '50px', pt: '1rem', pb: '0 !important' }}>{children}</CardContent>
   </Card>
 );

src/components/carousel/variants/carousel-main.tsx

@@ -214,7 +214,7 @@ function CarouselItem({ post }: Readonly<CarouselItemProps>) {
               }}
             >
               <IconFlagFilled style={{ marginRight: '4px' }} size={22} color="#FFFFFF" />
-              Add watchlist
+              Add Watchlist
             </Button>
           </Stack>
         </m.div>

src/components/carousel/variants/carousel-mixed.tsx

@@ -108,7 +108,6 @@ export default function CarouselMixed({ data }: Props) {
                 genre: getMovieGenres(post).split(', '),
                 images: {
                   vertical: getMediaUri(getPosterCid(post)),
-                  horizontal: getMediaUri(getPosterHorizontalCid(post)),
                   wallpaper: getMediaUri(getWallpaperCid(post)),
                 },
                 likes: post?.stats?.upvotes ?? 0,
@@ -139,7 +138,6 @@ export default function CarouselMixed({ data }: Props) {
                 genre: getMovieGenres(post).split(', '),
                 images: {
                   vertical: getMediaUri(getPosterCid(post)),
-                  horizontal: getMediaUri(getPosterHorizontalCid(post)),
                   wallpaper: getMediaUri(getWallpaperCid(post)),
                 },
                 likes: post?.stats?.upvotes ?? 0,

src/components/carousel/variants/carousel-poster-horizontal.tsx

@@ -74,7 +74,6 @@ export default function CarouselPosterHorizontal({ data }: Props) {
                 genre={getMovieGenres(post).split(', ')}
                 images={{
                   vertical: getMediaUri(getPosterCid(post)),
-                  horizontal: getMediaUri(getPosterHorizontalCid(post)),
                   wallpaper: getMediaUri(getWallpaperCid(post)),
                 }}
                 likes={post?.stats?.upvotes ?? 0}

src/components/carousel/variants/carousel-top-titles.tsx

@@ -52,7 +52,7 @@ export default function CarouselTopTitles({ posts, category }: Props) {
       >
         <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
           {posts.map((post: any) => (
-            <Box key={`${category}-${post.id}`} sx={{ px: 0.75, display: 'flex !important' }}>
+            <Box key={`${category}-${post.id}`} sx={{ px: 0.75, /*display: 'flex !important'*/ }}>
               <PosterTopTitles post={post} />
             </Box>
           ))}

src/components/poster/variants/poster-top-titles.tsx

@@ -79,6 +79,7 @@ const PosterTopTitles = ({ post }: { post: any }) => {
           width: '100%',
           height: '100%',
           opacity: 0.2,
+          filter: "blur(5px) !important",
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',

src/hooks/use-account-session.ts

@@ -9,12 +9,12 @@ import { setAuthLoading, setSession, setBalance } from '@redux/auth';
 import { useSession, useLogout } from '@lens-protocol/react-web';
 
 // NOTIFICATIONS IMPORTS
-import { ERRORS } from '@notifications/errors';
-import { notifyError } from '@notifications/internal-notifications';
+import { notifyWarning } from '@notifications/internal-notifications';
 
 // WEB3AUTH IMPORTS
 import { useWeb3Auth } from '@src/hooks/use-web3-auth';
 import { useWeb3Session } from '@src/hooks/use-web3-session';
+import {WARNING} from "@notifications/warnings.ts";
 
 // ----------------------------------------------------------------------
 
@@ -51,7 +51,7 @@ export const useAccountSession = (): UseAccountSessionHook => {
     dispatch(setBalance({ balance: 0 }));
     dispatch(setSession({ session: { ...data, authenticated: false } }));
     dispatch(setAuthLoading({ isSessionLoading: false }));
-    if (!silent) notifyError(ERRORS.BUNDLER_UNAVAILABLE);
+    if (!silent) notifyWarning(WARNING.BUNDLER_UNAVAILABLE);
   }, [web3Auth.status]);
 
   // Automatic checks on mount + interval

src/layouts/_common/header-balance.tsx

@@ -45,9 +45,6 @@ export default function HeaderBalance() {
         <Typography variant="subtitle2" sx={{ textAlign: 'left' }} noWrap>
           {formatBalanceNumber(balance)}
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ ml: 1, mt: 0.6, fontSize: 10 }}>
-          MMC
-        </Typography>
       </Stack>
     </Button>
   );

src/sections/publication/view/publication-details-view.tsx

@@ -33,6 +33,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { openLoginModal } from '@redux/auth';
 import { appId, PublicationType, usePublications } from '@lens-protocol/react-web';
+import {trimPublicationContentExtraText} from "@src/utils/text-transform.ts";
 import { useIsPolicyAuthorized } from '@src/hooks/use-is-policy-authorized.ts';
 import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 
@@ -277,7 +278,7 @@ export default function PublicationDetailsView({ id }: Props) {
                             opacity: 0.8,
                           }}
                         >
-                          <Markdown children={data?.metadata?.content} />
+                          <Markdown children={trimPublicationContentExtraText(data?.metadata?.content)} />
                         </Box>
                         {showButton && (
                           <Button variant="outlined" onClick={toggleDescription} sx={{ mt: 2 }}>
@@ -321,7 +322,7 @@ export default function PublicationDetailsView({ id }: Props) {
                         sx={{ fontWeight: 'bold', lineHeight: 1.1, mb: 0.5, width: '100%' }}
                         gutterBottom
                       >
-                        Bakers
+                        Backers
                       </Typography>
                     </m.div>
                     <Box sx={{ mt: 2, opacity: 0.8 }}>
@@ -332,7 +333,7 @@ export default function PublicationDetailsView({ id }: Props) {
                           sx={{ lineHeight: 1.1, mb: 0.5, width: '100%' }}
                           gutterBottom
                         >
-                          No bakers yet. Be the first to join and support!
+                          No backers yet. Be the first to join and support!
                         </Typography>
                       </m.div>
                     </Box>

src/sections/user/profile-header.tsx

@@ -31,7 +31,6 @@ import ProfileJoin from "@src/sections/user/profile-join.tsx";
 import ProfileUserInfo from "@src/sections/user/profile-user-info.tsx";
 import ProfileWrapper from './profile-wrapper';
 import ProfileToolbar from "@src/sections/user/profile-toolbar.tsx";
-import ProfileTransfer from "@src/sections/user/profile-transfer.tsx";
 
 // ----------------------------------------------------------------------
 export interface ProfileHeaderProps {
@@ -127,11 +126,7 @@ const ProfileHeader = ({
             {profile?.id !== sessionData?.profile?.id && (
               <FollowUnfollowButton profileId={profile?.id} />
             )}
-            {
-              sessionData?.authenticated && profile?.id !== sessionData?.profile?.id && (
-                  <ProfileTransfer profile={profile} />
-              )
-            }
+
           </Stack>
         </Stack>
       </ProfileWrapper>

src/sections/user/profile-right-sidebar.tsx

@@ -1,21 +1,22 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import {CopyableText} from "@src/components/copyable-text";
+import { CopyableText } from "@src/components/copyable-text";
 import Divider from "@mui/material/Divider";
-import {truncateAddress} from "@src/utils/wallet.ts";
-import {OpenableText} from "@src/components/openable-text";
+import { truncateAddress } from "@src/utils/wallet.ts";
+import { OpenableText } from "@src/components/openable-text";
 import Box from "@mui/material/Box";
-import {randomColors} from "@src/components/poster/variants/poster-latest-content.tsx";
-import {IconRosetteDiscountCheckFilled} from "@tabler/icons-react";
-import {FC} from "react";
-import {ProfileHeaderProps} from "@src/sections/user/profile-header.tsx";
-import {styled} from "@mui/material/styles";
-import {useSelector} from "react-redux";
+import { randomColors } from "@src/components/poster/variants/poster-latest-content.tsx";
+import { IconRosetteDiscountCheckFilled } from "@tabler/icons-react";
+import { FC } from "react";
+import { ProfileHeaderProps } from "@src/sections/user/profile-header.tsx";
+import { styled } from "@mui/material/styles";
+import { useSelector } from "react-redux";
 
 // ----------------------------------------------------------------------
+// TODO: move to envs
 const urlAttestationBase = 'https://polygon-amoy.easscan.org/attestation/view/';
 
-interface ProfileRightSidebarProps extends ProfileHeaderProps{
+interface ProfileRightSidebarProps extends ProfileHeaderProps {
   sidebarProps: {
     isAuthorized?: boolean;
     attestation?: string;
@@ -25,10 +26,14 @@ interface ProfileRightSidebarProps extends ProfileHeaderProps{
     attestationLoading: boolean;
   }
 }
-const ProfileRightSidebar: FC<ProfileRightSidebarProps> = ({profile, sidebarProps}) => {
+
+const ProfileRightSidebar: FC<ProfileRightSidebarProps> = ({ profile, sidebarProps }) => {
   const sessionData = useSelector((state: any) => state.auth.session);
-  const {isAuthorized, authorizedLoading, accessLoading, hasAccess, attestation, attestationLoading} = sidebarProps;
-  const attestationAddress = `0x${BigInt(attestation ?? '').toString(16)}`;
+  const { isAuthorized, authorizedLoading, accessLoading, hasAccess, attestation, attestationLoading } = sidebarProps;
+  const hex = BigInt(attestation ?? '').toString(16)
+  // add padding to attestation smaller than 256 bits
+  const cleanedHex = hex.length < 64 ? `${'0'.repeat(64 - hex.length)}${hex}` : hex;
+  const attestationAddress = `0x${cleanedHex}`;
 
   return (
     <Stack
@@ -143,10 +148,10 @@ const ProfileRightSidebar: FC<ProfileRightSidebarProps> = ({profile, sidebarProp
 }
 
 const StyledBoxGradient = styled(Box)<{ color1?: string; color2?: string }>(({
-                                                                               theme,
-                                                                               color1,
-                                                                               color2,
-                                                                             }) => {
+  theme,
+  color1,
+  color2,
+}) => {
   const defaultColor1 = theme.palette.primary.main;
   const defaultColor2 = theme.palette.secondary.main;
 

src/sections/user/profile-toolbar.tsx

@@ -7,6 +7,7 @@ import {FC} from "react";
 import {Profile} from "@lens-protocol/api-bindings";
 import {useTheme} from "@mui/material/styles";
 import {useSelector} from "react-redux";
+import ProfileTransfer from "@src/sections/user/profile-transfer.tsx";
 
 interface ProfileToolbarProps {
   profile: Profile;
@@ -60,6 +61,14 @@ const ProfileToolbar: FC<ProfileToolbarProps> = ({profile, profileImage}) => {
         {sessionData?.profile && profile?.id === sessionData?.profile?.id && (
           <ProfileUpdateButton />
         )}
+
+        {
+          sessionData?.authenticated && profile?.id !== sessionData?.profile?.id && (
+            <ProfileTransfer profile={profile} />
+          )
+        }
+
+
       </Stack>
     </Stack>
   )

src/sections/user/profile-transfer.tsx

@@ -1,31 +1,51 @@
-import {Profile} from "@lens-protocol/api-bindings";
-import {FC} from "react";
-import FinanceQuickTransferModal from "@src/sections/finance/components/finance-quick-transfer-modal.tsx";
-import LoadingButton from "@mui/lab/LoadingButton";
-import {useBoolean} from "@src/hooks/use-boolean.ts";
+import { Profile } from '@lens-protocol/api-bindings';
+import { FC, useCallback, useRef, useState } from 'react';
+import FinanceQuickTransferModal from '@src/sections/finance/components/finance-quick-transfer-modal.tsx';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { useBoolean } from '@src/hooks/use-boolean.ts';
+import Iconify from '@src/components/iconify';
+import Typography from '@mui/material/Typography';
+import Popover from '@mui/material/Popover';
 
 interface ProfileTransferProps {
   profile: Profile;
 }
 
-const ProfileTransfer: FC<ProfileTransferProps> = ({profile}) => {
+const ProfileTransfer: FC<ProfileTransferProps> = ({ profile }) => {
+  const [openTooltipSend, setOpenTooltipSend] = useState(false);
+  const navRefSend = useRef(null);
   const confirm = useBoolean();
 
   const handleOpen = () => {
     confirm.onTrue();
-  }
+  };
 
   const handleTransferFinish = () => {
     confirm.onFalse();
-  }
+  };
+
+  const handleOpenSend = useCallback(() => {
+    setOpenTooltipSend(true);
+  }, []);
+
+  const handleCloseSend = useCallback(() => {
+    setOpenTooltipSend(false);
+  }, []);
 
   return (
     <>
-      <LoadingButton sx={{
-        minWidth: { xs: 90, md: 120 },
-        backgroundColor: '#24262A',
-      }} variant={'outlined'} onClick={handleOpen}>
-        Send
+      <LoadingButton
+        sx={{
+          backgroundColor: 'transparent',
+          minWidth: '44px',
+        }}
+        ref={navRefSend}
+        variant={'outlined'}
+        onClick={handleOpen}
+        onMouseEnter={handleOpenSend}
+        onMouseLeave={handleCloseSend}
+      >
+        <Iconify icon="streamline:arrow-transfer-diagonal-3" color="#fff" />
       </LoadingButton>
 
       <FinanceQuickTransferModal
@@ -37,8 +57,31 @@ const ProfileTransfer: FC<ProfileTransferProps> = ({profile}) => {
         onFinish={handleTransferFinish}
         contactInfo={profile}
       />
+
+      <Popover
+        open={openTooltipSend}
+        anchorEl={navRefSend.current}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        slotProps={{
+          paper: {
+            onMouseEnter: handleOpenSend,
+            onMouseLeave: handleCloseSend,
+            sx: {
+              mt: 6,
+              backgroundColor: 'rgba(0,0,0,0.6)',
+              padding: '8px 20px',
+            },
+          },
+        }}
+        sx={{
+          pointerEvents: 'none',
+        }}
+      >
+        <Typography>Send</Typography>
+      </Popover>
     </>
-  )
-}
+  );
+};
 
 export default ProfileTransfer;

src/utils/finance-graphs/groupedTransactions.ts

@@ -207,7 +207,7 @@ const parseTransactionTypeLabel = (type: string): string => {
     case 'approved':
       return 'Approved';
     case 'collected':
-      return 'Paid';
+      return 'Content Unlocked';
     // case 'released':
     //   return 'Released';
 

src/utils/notifications/errors.ts

@@ -3,7 +3,6 @@
  */
 export enum ERRORS {
   NOT_LOGGED_IN = 'NOT_LOGGED_IN',
-  BUNDLER_UNAVAILABLE = 'BUNDLER_UNAVAILABLE',
   UNKNOWN_ERROR = 'UNKNOWN_ERROR',
   METAMASK_CONNECTING_ERROR = 'METAMASK_CONNECTING_ERROR',
   WITHDRAW_FAILED_ERROR = 'WITHDRAW_FAILED_ERROR',
@@ -98,7 +97,6 @@ export const ERROR_MESSAGES: Record<ERRORS, string> = {
 
   // Withdraw error
   [ERRORS.FIRST_LOGIN_ERROR]: 'You must login first to withdraw funds.',
-  [ERRORS.BUNDLER_UNAVAILABLE]: 'Your session is expired. Please re-login to continue.',
 
   // Deposit error
   [ERRORS.DEPOSIT_FAILED_ERROR]: 'Please login to deposit funds.',

src/utils/notifications/warnings.ts

@@ -7,6 +7,7 @@ export enum WARNING {
   INVALID_DEPOSIT_AMOUNT = 'INVALID_DEPOSIT_AMOUNT',
   INVALID_WITHDRAW_AMOUNT = 'INVALID_WITHDRAW_AMOUNT',
   INVALID_WALLET_ADDRESS = 'INVALID_WALLET_ADDRESS',
+  BUNDLER_UNAVAILABLE = 'BUNDLER_UNAVAILABLE',
 }
 
 /**
@@ -18,4 +19,5 @@ export const WARNING_MESSAGES: Record<WARNING, string> = {
   [WARNING.INVALID_DEPOSIT_AMOUNT]: 'Invalid deposit amount.',
   [WARNING.INVALID_WITHDRAW_AMOUNT]: 'Invalid withdraw amount.',
   [WARNING.INVALID_WALLET_ADDRESS]: 'Invalid wallet address.',
+  [WARNING.BUNDLER_UNAVAILABLE]: 'Session expired. Login again.',
 };