diff --git a/src/hooks/use-metamask.ts b/src/hooks/use-metamask.ts new file mode 100644 index 00000000..ffffbceb --- /dev/null +++ b/src/hooks/use-metamask.ts @@ -0,0 +1,32 @@ +import { useEffect, useState } from 'react'; +import { Address } from 'viem'; +import { connectToMetaMask } from '@src/utils/metamask'; +import { notifyError } from '@notifications/internal-notifications.ts'; +import { ERRORS } from '@notifications/errors.ts'; + +export const useMetaMask = () => { + const [address, setAddress] = useState
(); + const [connecting, setConnecting] = useState(false); + + useEffect(() => { + const walletConnected = localStorage.getItem('walletConnected'); + if (walletConnected === 'true') { + connect(); + } + }, []); + + const connect = async () => { + setConnecting(true); + try { + const walletAddress = await connectToMetaMask(); + setAddress(walletAddress); + localStorage.setItem('walletConnected', 'true'); + } catch (err) { + notifyError(ERRORS.METAMASK_CONNECTING_ERROR); + } finally { + setConnecting(false); + } + }; + + return { address, connecting, connect }; +}; diff --git a/src/sections/finance/components/box-row.tsx b/src/sections/finance/components/box-row.tsx index f86244c0..785ac2f1 100644 --- a/src/sections/finance/components/box-row.tsx +++ b/src/sections/finance/components/box-row.tsx @@ -9,6 +9,7 @@ export const BoxRow: FC = ({ children }) => ( display: 'flex', alignItems: 'center', justifyContent: 'space-between', + my: 0.5 }} > {children} diff --git a/src/sections/finance/components/finance-contacts.tsx b/src/sections/finance/components/finance-contacts.tsx index a872848c..2b33bcff 100644 --- a/src/sections/finance/components/finance-contacts.tsx +++ b/src/sections/finance/components/finance-contacts.tsx @@ -102,10 +102,11 @@ export default function FinanceContactsCarousel({ title={title} subheader={subheader} action={} + sx={{ px: 0 }} /> {/* Main carousel container */} - + {slidesData.map((chunk, index) => ( void; @@ -22,65 +17,13 @@ interface FinanceDepositFromMetamaskProps { const FinanceDepositFromMetamask: FC = ({ onClose }) => { const sessionData = useSelector((state: any) => state.auth.session); - - const [address, setAddress] = useState
(); - const [connecting, setConnecting] = useState(false); - - // Specific hook for Metamask const depositHook = useDepositMetamask(); + const { address, connecting, connect } = useMetaMask(); - // Try reconnecting if the user connected MetaMask before - useEffect(() => { - const walletConnected = localStorage.getItem('walletConnected'); - if (walletConnected === 'true') { - handleConnectMetaMask(); - } - }, []); - - const handleConnectMetaMask = async () => { - setConnecting(true); - try { - const walletAddress = await connectToMetaMask(); - setAddress(walletAddress); - localStorage.setItem('walletConnected', 'true'); - } catch (err) { - notifyError(ERRORS.METAMASK_CONNECTING_ERROR); - } finally { - setConnecting(false); - } - }; - - if (connecting) { - return ( - - - - ); - } - - // If the wallet is NOT connected, show a button - if (!address) { - return ( - - ); - } + if (connecting) return ; + if (!address) return ; - // If the wallet IS connected, render the deposit component - return ( - - ); + return ; }; export default FinanceDepositFromMetamask; diff --git a/src/sections/finance/components/finance-deposit-from-stripe.tsx b/src/sections/finance/components/finance-deposit-from-stripe.tsx index f46a1cd8..2e1c60f7 100644 --- a/src/sections/finance/components/finance-deposit-from-stripe.tsx +++ b/src/sections/finance/components/finance-deposit-from-stripe.tsx @@ -1,7 +1,7 @@ -// @mui +// MUI IMPORTS import Box from '@mui/material/Box'; -// Project components +// LOCAL IMPORTS import TextMaxLine from '@src/components/text-max-line'; import { ComingSoonIllustration } from '@src/assets/illustrations'; @@ -17,25 +17,26 @@ const FinanceDepositFromStripe = () => { p: 2, }} > - + - - This feature is coming soon. - - - We’re working hard to bring this feature to life. -
Check back soon! - + + + This feature is coming soon. + + + We’re working hard to bring this feature to life. +
Check back soon! + + - ); }; diff --git a/src/sections/finance/components/finance-deposit-modal.tsx b/src/sections/finance/components/finance-deposit-modal.tsx index eba8e934..3406176c 100644 --- a/src/sections/finance/components/finance-deposit-modal.tsx +++ b/src/sections/finance/components/finance-deposit-modal.tsx @@ -1,80 +1,49 @@ // REACT IMPORTS -import { FC, useState } from 'react'; - -// MUI IMPORTS -import Tab from '@mui/material/Tab'; -import DialogTitle from '@mui/material/DialogTitle'; -import Tabs, { tabsClasses } from '@mui/material/Tabs'; -import Dialog, { DialogProps } from '@mui/material/Dialog'; +import { FC } from 'react'; // LOCAL IMPORTS import Iconify from '@src/components/iconify'; -import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe.tsx'; -import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask.tsx'; -import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account.tsx'; - -// ---------------------------------------------------------------------- +import FinanceModal from '@src/sections/finance/components/finance-modal'; +import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe'; +import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask'; +import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account'; -interface FinanceDepositModalProps extends DialogProps { +interface FinanceDepositModalProps { + open: boolean; onClose: VoidFunction; } -// ---------------------------------------------------------------------- - -const TABS = [ +const depositTabs = [ { value: 'fiat', label: 'Stripe', disabled: false, icon: }, - { - value: 'metamask', - label: 'Metamask', - disabled: false, - icon: , - }, - { - value: 'smartAccount', - label: 'Smart Account', - disabled: false, - icon: , - }, + { value: 'metamask', label: 'Metamask', disabled: false, icon: }, + { value: 'smartAccount', label: 'Smart Account', disabled: false, icon: }, ]; -// ---------------------------------------------------------------------- - export const FinanceDepositModal: FC = ({ open, onClose }) => { - const [currentTab, setCurrentTab] = useState('metamask'); - - const handleChangeTab = (_event: any, newValue: any) => { - setCurrentTab(newValue); + const renderContent = (currentTab: string) => { + switch (currentTab) { + case 'fiat': + return ; + case 'metamask': + return ; + case 'smartAccount': + return ; + default: + return null; + } }; return ( - - Deposit - - - {TABS.map((tab) => ( - - ))} - - - {currentTab === 'fiat' && } - {currentTab === 'metamask' && } - {currentTab === 'smartAccount' && } - + ); }; + +export default FinanceDepositModal; diff --git a/src/sections/finance/components/finance-deposit.tsx b/src/sections/finance/components/finance-deposit.tsx index 8575dce2..3502d211 100644 --- a/src/sections/finance/components/finance-deposit.tsx +++ b/src/sections/finance/components/finance-deposit.tsx @@ -1,29 +1,29 @@ -// React and libraries imports +// REACT IMPORTS import { FC, useCallback, useEffect, useState } from 'react'; + +// VIEM IMPORTS import { Address } from 'viem'; -// @mui components +// MUI IMPORTS import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import Divider from '@mui/material/Divider'; -// Project components +// LOCAL IMPORTS import NeonPaper from '@src/sections/publication/NeonPaperContainer'; import FinanceDialogsActions from '@src/sections/finance/components/finance-dialogs-actions'; import TextMaxLine from '@src/components/text-max-line'; -import { InputAmount } from '@src/components/input-amount'; import { formatBalanceNumber } from '@src/utils/format-number'; -import { useResponsive } from '@src/hooks/use-responsive'; import { useGetMmcContractBalance } from '@src/hooks/use-get-mmc-contract-balance'; import BoxRow from '@src/sections/finance/components/box-row.tsx'; import { UseDepositHook } from '@src/hooks/use-deposit'; import { truncateAddress } from '@src/utils/wallet'; -// Notifications +// NOTIFICATIONS IMPORTS import { notifyError, notifySuccess, notifyWarning } from '@notifications/internal-notifications'; import { WARNING } from '@notifications/warnings'; import { SUCCESS } from '@notifications/success'; import { ERRORS } from '@notifications/errors.ts'; +import TextField from '@mui/material/TextField'; interface FinanceDepositProps { /** @@ -58,13 +58,14 @@ interface FinanceDepositProps { * - `onClose` */ const FinanceDeposit: FC = ({ address, recipient, depositHook, onClose }) => { - const [amount, setAmount] = useState(0); + const [amount, setAmount] = useState(); const [localLoading, setLocalLoading] = useState(false); - + const [amountError, setAmountError] = useState(false); + const [helperText, setHelperText] = useState(""); const { deposit, loading: depositLoading, error } = depositHook; - - // Retrieve the balance using the "address" (the connected one) const { balance } = useGetMmcContractBalance(address); + const isBusy = localLoading || depositLoading; + const RainbowEffect = isBusy ? NeonPaper : Box; useEffect(() => { if (error) { @@ -74,6 +75,8 @@ const FinanceDeposit: FC = ({ address, recipient, depositHo // Validation and deposit const handleConfirmDeposit = useCallback(async () => { + if (!amount) return; + if (!address) { // If there's no connected address, we can't deposit notifyWarning(WARNING.NO_WALLET_CONNECTED); @@ -96,64 +99,73 @@ const FinanceDeposit: FC = ({ address, recipient, depositHo } }, [address, recipient, amount, balance, deposit, onClose]); - // NeonPaper effect if currently loading - const isBusy = localLoading || depositLoading; - const RainbowEffect = isBusy ? NeonPaper : Box; - const mdUp = useResponsive('up', 'md'); + const handleAmountChange = (event: React.ChangeEvent) => { + const value = Number(event.target.value); + + setAmount(value ?? undefined); + + // Set appropriate error message + const errorMessage = + value <= 0 + ? "No amount entered" + : value > (balance ?? 0) + ? "Amount cannot be greater than balance" + : ""; + + setAmountError(!!errorMessage); // Set error state + setHelperText(errorMessage); // Update helper text with the error message + }; + - // If there's no address, we could show a fallback, - // but here we'll show the same UI (balance: 0, etc.) - // or a warning when confirming. It's up to you. return ( <> - Connected Wallet + Connected Wallet {address ? truncateAddress(address) : 'No wallet connected'} - - - Balance + Balance {formatBalanceNumber(balance ?? 0)} MMC - - - - Amount to deposit - setAmount(Number(e.target.value))} - /> - + void }> = ({ connect }) => { + return ; +}; + +export default FinanceMetamaskButton; diff --git a/src/sections/finance/components/finance-metamask-loader.tsx b/src/sections/finance/components/finance-metamask-loader.tsx new file mode 100644 index 00000000..720a1f5c --- /dev/null +++ b/src/sections/finance/components/finance-metamask-loader.tsx @@ -0,0 +1,16 @@ +// REACT IMPORTS +import { FC } from 'react'; + +// MUI IMPORTS +import { Box } from '@mui/system'; + +// LOCAL IMPORTS +import { LoadingScreen } from '@src/components/loading-screen'; + +const FinanceMetamaskLoader: FC = () => { + return + + ; +}; + +export default FinanceMetamaskLoader; diff --git a/src/sections/finance/components/finance-modal.tsx b/src/sections/finance/components/finance-modal.tsx new file mode 100644 index 00000000..c9d6e1a0 --- /dev/null +++ b/src/sections/finance/components/finance-modal.tsx @@ -0,0 +1,65 @@ +import { FC, useState, ReactNode } from 'react'; + +// MUI IMPORTS +import Tab from '@mui/material/Tab'; +import DialogTitle from '@mui/material/DialogTitle'; +import Tabs, { tabsClasses } from '@mui/material/Tabs'; +import Dialog, { DialogProps } from '@mui/material/Dialog'; + +interface TabConfig { + value: string; + label: string; + disabled?: boolean; + icon: any; +} + +interface FinanceModalProps extends DialogProps { + onClose: VoidFunction; + title: string; + tabs: TabConfig[]; + renderContent: (currentTab: string) => ReactNode; +} + +const FinanceModal: FC = ({ open, onClose, title, tabs, renderContent, ...dialogProps }) => { + const [currentTab, setCurrentTab] = useState('smartAccount'); + + const handleChangeTab = (_event: React.SyntheticEvent, newValue: string) => { + setCurrentTab(newValue); + }; + + return ( + + {title} + + + {tabs.map((tab) => ( + + ))} + + + {renderContent(currentTab)} + + ); +}; + +export default FinanceModal; diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index 62d2620f..d0f7aed9 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -1,12 +1,14 @@ -// React and libraries imports +// REACT IMPORTS import React, { useCallback, useEffect, useState } from 'react'; -// Redux + +// REDUX IMPORTS import { useDispatch, useSelector } from 'react-redux'; -// Redux import { storeAddress, toggleRainbow } from '@redux/address'; -// API Lens and ethers +// LENS IMPORTS import { Profile } from '@lens-protocol/api-bindings'; + +// ETHERS IMPORTS import { ethers } from 'ethers'; // MUI diff --git a/src/sections/finance/components/finance-withdraw-from-metamask.tsx b/src/sections/finance/components/finance-withdraw-from-metamask.tsx index 40090b5b..d57777f0 100644 --- a/src/sections/finance/components/finance-withdraw-from-metamask.tsx +++ b/src/sections/finance/components/finance-withdraw-from-metamask.tsx @@ -1,83 +1,27 @@ -// React and libraries imports -import { FC, useEffect, useState } from 'react'; -import { Address } from 'viem'; +// REACT IMPORTS +import { FC } from 'react'; -// @MUI Imports -import Button from '@mui/material/Button'; - -// Import Components -import Iconify from '@src/components/iconify'; -import FinanceWithdraw from './finance-withdraw.tsx'; +// LOCAL IMPORTS +import { useMetaMask } from '@src/hooks/use-metamask'; import { useWithdrawMetamask } from '@src/hooks/use-withdraw-metamask'; import { useGetVaultBalance } from '@src/hooks/use-get-vault-balance'; -import { connectToMetaMask } from '@src/utils/metamask'; -import { LoadingScreen } from '@src/components/loading-screen'; - -// Notifications -import { notifyError } from '@src/utils/notifications/internal-notifications'; -import { ERRORS } from '@src/utils/notifications/errors'; -import { Box } from '@mui/system'; +import FinanceWithdraw from '@src/sections/finance/components/finance-withdraw'; +import FinanceMetamaskLoader from '@src/sections/finance/components/finance-metamask-loader.tsx'; +import FinanceMetamaskButton from '@src/sections/finance/components/finance-metamask-button.tsx'; interface FinanceWithdrawFromMetamaskProps { onClose: () => void; } const FinanceWithdrawFromMetamask: FC = ({ onClose }) => { - const [address, setAddress] = useState
(); - const [connecting, setConnecting] = useState(false); - const { balance } = useGetVaultBalance(address); const withdrawHook = useWithdrawMetamask(); + const { address, connecting, connect } = useMetaMask(); + const { balance } = useGetVaultBalance(address); - // Auto-reconnect if MetaMask was previously connected - useEffect(() => { - const walletConnected = localStorage.getItem('walletConnected'); - if (walletConnected === 'true') { - handleConnectMetaMask(); - } - }, []); - - const handleConnectMetaMask = async () => { - setConnecting(true); - try { - const walletAddress = await connectToMetaMask(); - setAddress(walletAddress); - localStorage.setItem('walletConnected', 'true'); - } catch (err) { - notifyError(ERRORS.METAMASK_CONNECTING_ERROR); - } finally { - setConnecting(false); - } - }; - - if (connecting) { - return ( - - - - ); - } - - if (!address) { - return ( - - ); - } + if (connecting) return ; + if (!address) return ; - return ( - - ); + return ; }; export default FinanceWithdrawFromMetamask; diff --git a/src/sections/finance/components/finance-withdraw-modal.tsx b/src/sections/finance/components/finance-withdraw-modal.tsx index 3df774b9..14760879 100644 --- a/src/sections/finance/components/finance-withdraw-modal.tsx +++ b/src/sections/finance/components/finance-withdraw-modal.tsx @@ -1,78 +1,46 @@ -// REACT IMPORTS -import { FC, useState } from 'react'; +// src/sections/finance/components/FinanceWithdrawModal.tsx -// MUI IMPORTS - -import DialogTitle from '@mui/material/DialogTitle'; - -import Dialog, { DialogProps } from '@mui/material/Dialog'; +import { FC } from 'react'; // LOCAL IMPORTS - -import FinanceWithdrawFromSmartAccount from '@src/sections/finance/components/finance-withdraw-from-smart-account'; import Iconify from '@src/components/iconify'; -import Tabs, { tabsClasses } from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import FinanceWithdrawFromMetamask from '@src/sections/finance/components/finance-withdraw-from-metamask.tsx'; - -const TABS = [ - { - value: 'metamask', - label: 'Metamask', - disabled: false, - icon: , - }, - { - value: 'smartAccount', - label: 'Smart Account', - disabled: false, - icon: , - }, -]; - -// ---------------------------------------------------------------------- +import FinanceModal from '@src/sections/finance/components/finance-modal'; +import FinanceWithdrawFromMetamask from '@src/sections/finance/components/finance-withdraw-from-metamask'; +import FinanceWithdrawFromSmartAccount from '@src/sections/finance/components/finance-withdraw-from-smart-account'; -interface FinanceWithdrawModalProps extends DialogProps { +interface FinanceWithdrawModalProps { + open: boolean; onClose: VoidFunction; } -// ---------------------------------------------------------------------- +const withdrawTabs = [ + { value: 'metamask', label: 'Metamask', disabled: false, icon: }, + { value: 'smartAccount', label: 'Smart Account', disabled: false, icon: }, +]; export const FinanceWithdrawModal: FC = ({ open, onClose }) => { - const [currentTab, setCurrentTab] = useState('metamask'); - - const handleChangeTab = (_event: any, newValue: any) => { - setCurrentTab(newValue); + const renderContent = (currentTab: string) => { + switch (currentTab) { + case 'metamask': + return ; + case 'smartAccount': + return ; + default: + return null; + } }; return ( - - Withdraw - - - {TABS.map((tab) => ( - - ))} - - - {currentTab === 'metamask' && } - {currentTab === 'smartAccount' && } - + ); }; + +export default FinanceWithdrawModal; diff --git a/src/sections/finance/components/finance-withdraw.tsx b/src/sections/finance/components/finance-withdraw.tsx index 3333385e..ebcc1334 100644 --- a/src/sections/finance/components/finance-withdraw.tsx +++ b/src/sections/finance/components/finance-withdraw.tsx @@ -1,29 +1,31 @@ import { FC, useCallback, useEffect, useState } from 'react'; + +// VIEM IMPORTS import { Address } from 'viem'; -// @mui +// MUI IMPORTS import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import Divider from '@mui/material/Divider'; import TextField from '@mui/material/TextField'; -// Project components +// LOCAL IMPORTS import NeonPaper from '@src/sections/publication/NeonPaperContainer'; import FinanceDialogsActions from '@src/sections/finance/components/finance-dialogs-actions'; import TextMaxLine from '@src/components/text-max-line'; -import { InputAmount } from '@src/components/input-amount'; import { formatBalanceNumber } from '@src/utils/format-number'; -import { useResponsive } from '@src/hooks/use-responsive'; import BoxRow from '@src/sections/finance/components/box-row'; import { isValidAddress } from '@src/sections/finance/components/finance-quick-transfer'; import { UseWithdrawHook } from '@src/hooks/use-withdraw.ts'; +import { truncateAddress } from '@src/utils/wallet.ts'; -// Notifications +// NOTIFICATIONS IMPORTS import { notifyError, notifySuccess, notifyWarning } from '@notifications/internal-notifications'; import { ERRORS } from '@notifications/errors'; import { WARNING } from '@notifications/warnings'; import { SUCCESS } from '@notifications/success'; +// ---------------------------------------------------------------------- + interface FinanceWithdrawProps { address?: Address; // The connected wallet address withdrawHook: UseWithdrawHook; // Generic withdraw hook @@ -31,15 +33,16 @@ interface FinanceWithdrawProps { onClose: () => void; // Callback to close the modal/dialog } +// ---------------------------------------------------------------------- + const FinanceWithdraw: FC = ({ address, withdrawHook, balance, onClose }) => { - const [amount, setAmount] = useState(0); + const [amount, setAmount] = useState(); const [destinationAddress, setDestinationAddress] = useState(''); const [addressError, setAddressError] = useState(false); + const [amountError, setAmountError] = useState(false); + const [amountHelperText, setAmountHelperText] = useState(''); // Dynamic helper text for amount const [localLoading, setLocalLoading] = useState(false); - const { withdraw, loading: withdrawLoading, error } = withdrawHook; - - const mdUp = useResponsive('up', 'md'); const RainbowEffect = localLoading || withdrawLoading ? NeonPaper : Box; useEffect(() => { @@ -49,6 +52,8 @@ const FinanceWithdraw: FC = ({ address, withdrawHook, bala }, [error]); const handleConfirmWithdraw = useCallback(async () => { + if (!amount) return; + if (!destinationAddress || addressError) { notifyWarning(WARNING.INVALID_WALLET_ADDRESS); return; @@ -69,6 +74,22 @@ const FinanceWithdraw: FC = ({ address, withdrawHook, bala } }, [amount, destinationAddress, balance, withdraw, addressError, onClose]); + const handleAmountChange = (event: React.ChangeEvent) => { + const value = Number(event.target.value); + setAmount(value); + + // Update error state and helper text dynamically + const errorMessage = + value <= 0 + ? "Amount must be greater than zero" + : value > (balance ?? 0) + ? "Amount cannot be greater than balance" + : ""; + + setAmountError(!!errorMessage); + setAmountHelperText(errorMessage); + }; + const handleInputChange = (event: React.ChangeEvent) => { const value = event.target.value; setDestinationAddress(value); @@ -78,48 +99,71 @@ const FinanceWithdraw: FC = ({ address, withdrawHook, bala return ( <> - Connected Wallet + Wallet - {address ? address : 'No wallet connected'} + {address ? truncateAddress(address) : 'No wallet connected'} - - - Balance + Balance {formatBalanceNumber(balance ?? 0)} MMC - + - - Amount to withdraw - setAmount(Number(e.target.value))} - /> - + + + + to + + = ({ address, withdrawHook, bala rainbowComponent={RainbowEffect} loading={localLoading} actionLoading={withdrawLoading} - amount={amount} + amount={amount ?? 0} balance={balance ?? 0} label={'Confirm'} onConfirmAction={handleConfirmWithdraw} diff --git a/src/sections/user/profile-cover.tsx b/src/sections/user/profile-cover.tsx index 25440ef6..efa7d869 100644 --- a/src/sections/user/profile-cover.tsx +++ b/src/sections/user/profile-cover.tsx @@ -4,14 +4,19 @@ import { alpha } from '@mui/material/styles'; import { bgGradient } from '@src/theme/css'; import { Profile } from '@lens-protocol/api-bindings'; import Image from '../../components/image'; +import { SxProps } from '@mui/system'; +import { Theme } from '@mui/material'; // ---------------------------------------------------------------------- interface ProfileCoverProps { profile?: Profile; + sx?: SxProps; } -export default function ProfileCover({ profile }: ProfileCoverProps) { +// ---------------------------------------------------------------------- + +export default function ProfileCover({ profile, sx }: ProfileCoverProps) { const coverImage = profile?.metadata?.coverPicture?.optimized?.uri; return ( ); diff --git a/src/sections/user/profile-header.tsx b/src/sections/user/profile-header.tsx index 12c6648d..af6e1b9b 100644 --- a/src/sections/user/profile-header.tsx +++ b/src/sections/user/profile-header.tsx @@ -234,7 +234,7 @@ const ProfileHeader = ({ return ( <> - + {sessionData?.authenticated ? ( + + + Share Watchit on your social + - + {profile?.metadata?.bio ?? ''} @@ -497,43 +534,6 @@ const ProfileHeader = ({ {profile?.id !== sessionData?.profile?.id && ( )} - - - - Share Watchit on your social - {sessionData?.profile && profile?.id === sessionData?.profile?.id && ( <>