prof_final_cand
This commit is contained in:
parent
9af71b4186
commit
4209695865
|
|
@ -29,9 +29,9 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
const [isShareModalOpen, setIsShareModalOpen] = useState(false);
|
||||
const [isFollowing, setIsFollowing] = useState(false);
|
||||
const [isFetchingFollowStatus, setIsFetchingFollowStatus] = useState(true);
|
||||
|
||||
|
||||
const id = params.id;
|
||||
const currentUser = "%40"+user?.twitter?.username ?? "null"; // Change this to the current user dynamically
|
||||
const currentUser = "%40" + user?.twitter?.username ?? "null"; // Change this to the current user dynamically
|
||||
|
||||
useEffect(() => {
|
||||
Refresh();
|
||||
|
|
@ -97,7 +97,7 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
Refresh();
|
||||
}, [currentUser, id]);
|
||||
|
||||
function Refresh(){
|
||||
function Refresh() {
|
||||
const fetchFollowStatus = async () => {
|
||||
try {
|
||||
const response = await fetch(`https://api.callfi.io/get_is_following.php?username=${currentUser}&target=${id}`);
|
||||
|
|
@ -158,9 +158,9 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
<section className='glassmorphism'>
|
||||
<div className='grid grid-cols-3 gap-4 flex w-full flex-row p-3'>
|
||||
<Link href="/">
|
||||
<button className='mr-3'>
|
||||
<FaArrowLeft />
|
||||
</button>
|
||||
<button className='mr-3'>
|
||||
<FaArrowLeft />
|
||||
</button>
|
||||
</Link>
|
||||
<h1 className='text-center'>CallFi Profile</h1>
|
||||
</div>
|
||||
|
|
@ -173,14 +173,16 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
/>
|
||||
<div className='flex flex-col p-6 px-2'>
|
||||
<div>
|
||||
<p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
|
||||
<p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
|
||||
<p className='text-sm'>{userData.followerCount} Followers</p>
|
||||
<p className='font-bold flex justify-start items-center text-xl font-bold'>{userData.tag}</p>
|
||||
|
||||
<p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
|
||||
<p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
|
||||
<p className='text-sm'>{userData.followerCount} Followers</p>
|
||||
</div>
|
||||
<div className={expandedInfo ? "" : "hidden"}>
|
||||
<p className='text-sm'>{userData.calloutCount} Callouts</p>
|
||||
<p className='text-sm'>{parseFloat(userData.accuracy).toFixed(1)}% Accuracy</p>
|
||||
<p className='text-sm'>{userData.daysSinceJoined} Days</p>
|
||||
<p className='text-sm'>{userData.calloutCount} Callouts</p>
|
||||
<p className='text-sm'>{parseFloat(userData.accuracy).toFixed(1)}% Accuracy</p>
|
||||
<p className='text-sm'>{userData.daysSinceJoined} Days</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex col-span-1 justify-end m-3 mb-6 items-end'>
|
||||
|
|
@ -192,8 +194,8 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
</div>
|
||||
</div>
|
||||
<div className='m-2 grid grid-cols-5 gap-2 px-2'>
|
||||
<button
|
||||
onClick={currentUser == id ? ()=>{} : handleFollowClick}
|
||||
<button
|
||||
onClick={currentUser == id ? () => { } : handleFollowClick}
|
||||
className={`glassmorphism p-1 col-span-4 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
|
||||
disabled={currentUser === id}
|
||||
>
|
||||
|
|
@ -202,115 +204,117 @@ function UserPage({ params }: { params: { id: string } }) {
|
|||
<button onClick={handleShareClick} className='glassmorphism p-1 flex items-center justify-center rounded-xl hover:bg-blue-900'><FaShare /></button>
|
||||
</div>
|
||||
{loginAlert && <p className="text-red-500 text-center">{loginAlert}</p>}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className='rounded-3xl grid grid-cols-3 flex flex-row max-lg:hidden'>
|
||||
<div className='grid grid-cols-3'>
|
||||
<div className='flex flex-row col-span-2'>
|
||||
<img
|
||||
src={userData.img_url}
|
||||
className="rounded-full h-full p-5"
|
||||
className="rounded-full w-24 ml-10"
|
||||
/>
|
||||
<p className='font-bold flex justify-start items-center text-xl font-bold'>{userData.tag}</p>
|
||||
<p className='font-bold flex text-start justify-start items-center text-xl font-bold ml-2'>{userData.tag}</p>
|
||||
<div className='flex justify-center grid grid-rows-2 items-start ml-5'>
|
||||
|
||||
<button
|
||||
onClick={currentUser == id ? () => { } : handleFollowClick}
|
||||
className={`glassmorphism p-1 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
|
||||
disabled={currentUser === id}
|
||||
>
|
||||
{currentUser == id ? 'My Account' : (isFollowing ? 'Unfollow' : 'Follow')}
|
||||
</button>
|
||||
<button onClick={handleShareClick} className='glassmorphism p-1 px-6 flex items-center justify-center rounded-xl hover:bg-blue-900'> Share <FaShare className='ml-2' /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='items-center flex justify-center grid grid-cols-3 glassmorphism rounded-full items-center text-center mx-2'>
|
||||
<p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
|
||||
<p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
|
||||
<p className='text-sm'>{userData.followerCount} Followers</p>
|
||||
<p className='text-sm'>{userData.calloutCount} Callouts</p>
|
||||
<p className='text-sm'>{parseFloat(userData.accuracy).toFixed(1)}% Accuracy</p>
|
||||
<p className='text-sm'>{userData.daysSinceJoined} Days</p>
|
||||
|
||||
<div className='items-center flex justify-center grid grid-cols-3'>
|
||||
<p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
|
||||
<p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
|
||||
<p className='text-sm'>{userData.followerCount} Followers</p>
|
||||
<p className='text-sm'>{userData.calloutCount} Callouts</p>
|
||||
<p className='text-sm'>{parseFloat(userData.accuracy).toFixed(1)}% Accuracy</p>
|
||||
<p className='text-sm'>{userData.daysSinceJoined} Days</p>
|
||||
|
||||
</div>
|
||||
<div className='flex justify-end grid grid-rows-2 items-end mr-5'>
|
||||
|
||||
<button
|
||||
onClick={currentUser == id ? ()=>{} : handleFollowClick}
|
||||
className={`glassmorphism p-1 w-96 h-10 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
|
||||
disabled={currentUser === id}
|
||||
>
|
||||
{currentUser == id ? 'My Account' : (isFollowing ? 'Unfollow' : 'Follow')}
|
||||
</button>
|
||||
<button onClick={handleShareClick} className='glassmorphism h-10 ml-20 flex items-center justify-center rounded-xl hover:bg-blue-900'> Share <FaShare className='ml-5' /></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 mt-4'>
|
||||
<button className={`justify-center text-center ${activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(true) }}>
|
||||
<p>Active</p>
|
||||
</button>
|
||||
<button className={`justify-center text-center ${!activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(false) }}>
|
||||
<p>History</p>
|
||||
</button>
|
||||
</div>
|
||||
<button className={`justify-center text-center ${activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(true) }}>
|
||||
<p>Active</p>
|
||||
</button>
|
||||
<button className={`justify-center text-center ${!activeSelected ? "text-blue-300 bg-opacity-20 bg-black" : " text-sm text-gray-300"}`} onClick={() => { setActiveSelected(false) }}>
|
||||
<p>History</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className=''>
|
||||
<section className='max-lg:col-span-2'>
|
||||
<section className={`flex w-full ${activeSelected ? "" : "hidden"}`}>
|
||||
<section className="flex flex-col w-full m-2">
|
||||
<div className='flex justify-center p-4'>
|
||||
<div className='glassmorphism rounded-full flex p-1 text-sm'>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "all time" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("all time") }}>
|
||||
All Time
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "week" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
|
||||
Weekly
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
|
||||
Monthly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section className={`flex w-full ${activeSelected ? "" : "hidden"}`}>
|
||||
<section className="flex flex-col w-full m-2">
|
||||
<div className='flex justify-center p-4'>
|
||||
<div className='glassmorphism rounded-full flex p-1 text-sm'>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "all time" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("all time") }}>
|
||||
All Time
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "week" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
|
||||
Weekly
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
|
||||
Monthly
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
|
||||
{callouts.map((callout) => (
|
||||
<CalloutCard
|
||||
key={callout.ca}
|
||||
iconUrl={callout.icon_url}
|
||||
token={callout.token}
|
||||
ca={callout.ca}
|
||||
priceAtCreation={callout.price_at_creation}
|
||||
priceNow={callout.price_now}
|
||||
gains={parseFloat(callout.gains)}
|
||||
dexUrl={dexUrls[callout.ca]} // Pass the Dexscreener URL to the CalloutCard
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<section className={`flex w-full ${!activeSelected ? "" : "hidden"}`}>
|
||||
<section className="flex flex-col w-full m-2">
|
||||
<div className='flex justify-center p-4'>
|
||||
<div className='glassmorphism rounded-full w-min flex p-1 text-sm'>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod !== "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
|
||||
Weekly
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
|
||||
Monthly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className={`${!activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
|
||||
{history.map((entry) => (
|
||||
<CalloutCard
|
||||
key={entry.ca}
|
||||
iconUrl={entry.icon_url}
|
||||
token={entry.id}
|
||||
ca={entry.ca}
|
||||
priceAtCreation={entry.price_at_creation}
|
||||
priceNow={entry.froze_price}
|
||||
gains={parseFloat(entry.gains)}
|
||||
dexUrl={dexUrls[entry.ca]} // Pass the Dexscreener URL to the CalloutCard
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className={`${activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
|
||||
{callouts.map((callout) => (
|
||||
<CalloutCard
|
||||
key={callout.ca}
|
||||
iconUrl={callout.icon_url}
|
||||
token={callout.token}
|
||||
ca={callout.ca}
|
||||
priceAtCreation={callout.price_at_creation}
|
||||
priceNow={callout.price_now}
|
||||
gains={parseFloat(callout.gains)}
|
||||
dexUrl={dexUrls[callout.ca]} // Pass the Dexscreener URL to the CalloutCard
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<section className={`flex w-full ${!activeSelected ? "" : "hidden"}`}>
|
||||
<section className="flex flex-col w-full m-2">
|
||||
<div className='flex justify-center p-4'>
|
||||
<div className='glassmorphism rounded-full w-min flex p-1 text-sm'>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod !== "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("week") }}>
|
||||
Weekly
|
||||
</button>
|
||||
<button className={`glassmorphism m-1 mx-1 p-1 px-5 rounded-full ${selectedPeriod === "month" ? "glassmorphism-dark" : ""}`} onClick={() => { setSelectedPeriod("month") }}>
|
||||
Monthly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className={`${!activeSelected ? "" : "hidden"} flex flex-col justify-center items-center`}>
|
||||
{history.map((entry) => (
|
||||
<CalloutCard
|
||||
key={entry.ca}
|
||||
iconUrl={entry.icon_url}
|
||||
token={entry.id}
|
||||
ca={entry.ca}
|
||||
priceAtCreation={entry.price_at_creation}
|
||||
priceNow={entry.froze_price}
|
||||
gains={parseFloat(entry.gains)}
|
||||
dexUrl={dexUrls[entry.ca]} // Pass the Dexscreener URL to the CalloutCard
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='flex-1'></div>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
<ShareModal
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user