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