diff --git a/src/modules/points/PointsWidget.tsx b/src/modules/points/PointsWidget.tsx index 6775479a8..24223f466 100644 --- a/src/modules/points/PointsWidget.tsx +++ b/src/modules/points/PointsWidget.tsx @@ -309,8 +309,8 @@ const UserStatsSection = ({ */} )} -
-
+
+
LIKES LEFT TODAY:
@@ -325,7 +325,7 @@ const UserStatsSection = ({
-
+
POINTS EARNED:
void +} + +const LeaderboardModal = ({ isOpen, close }: LeaderboardModalProps) => { + const myAddress = useMyMainAddress() + + return createPortal( + <> + + +
+ +
+
+ + Referrers Leaderboard 🏆 + + +
+ +
+
+ +
+
+ + , + document.body + ) +} + +export const tableColumns = (): Column[] => [ + { + index: 'user', + align: 'left', + className: cx('p-0 py-2 pr-2'), + }, + { + index: 'id', + align: 'right', + className: cx('p-0 py-2 pl-2 w-[15%] text-slate-400 '), + }, +] + +const LeaderboardTable = () => { + const myAddress = useMyMainAddress() + const { data: referrersData, isLoading } = + getReferralLeaderboardQuery.useQuery(myAddress || '') + + const data = useMemo(() => { + return ( + referrersData?.map((item, i) => ({ + id: i + 1, + user: ( + + 👋 {item.count} frens + + } + /> + ), + })) || [] + ) + }, [referrersData]) + + return ( + <> + {data.length === 0 && + (isLoading ? ( + + ) : ( +
+ + + Invite your frens to show up here! + +
+ ))} + {!!data.length && ( +
+ + + {data.map((item, i) => { + return ( + + ) + })} + +
+
+ )} + + ) +} + +export default LeaderboardModal diff --git a/src/modules/telegram/FriendsPage/ReferralTable.tsx b/src/modules/telegram/FriendsPage/ReferralTable.tsx index b8a56d19b..0c09104e9 100644 --- a/src/modules/telegram/FriendsPage/ReferralTable.tsx +++ b/src/modules/telegram/FriendsPage/ReferralTable.tsx @@ -8,20 +8,15 @@ import { useMemo } from 'react' import { UserPreview } from '../StatsPage/LeaderboardTable' export const tableColumns = (): Column[] => [ - { - index: 'id', - align: 'left', - className: cx('p-0 py-2 pl-2 w-[10%] text-slate-400 '), - }, { index: 'user', align: 'left', - className: cx('p-0 py-2 pr-2 w-[55%]'), + className: cx('p-0 py-2 pr-2'), }, { - index: 'date', + index: 'id', align: 'right', - className: cx('p-0 py-2 pr-2'), + className: cx('p-0 py-2 pl-2 w-[15%] text-slate-400 '), }, ] @@ -47,13 +42,13 @@ const ReferralTable = ({ + {dayjs(item.timestamp).format('DD MMM')} + + } /> ), - date: ( - - {dayjs(item.timestamp).format('DD MMM, YYYY')} - - ), })) || [] ) }, [referrals]) diff --git a/src/modules/telegram/FriendsPage/ReferrerStats.tsx b/src/modules/telegram/FriendsPage/ReferrerStats.tsx new file mode 100644 index 000000000..5fef43782 --- /dev/null +++ b/src/modules/telegram/FriendsPage/ReferrerStats.tsx @@ -0,0 +1,120 @@ +import Diamond from '@/assets/emojis/diamond.png' +import AddressAvatar from '@/components/AddressAvatar' +import Button from '@/components/Button' +import LinkText from '@/components/LinkText' +import Name from '@/components/Name' +import SkeletonFallback from '@/components/SkeletonFallback' +import SubsocialProfileModal from '@/components/subsocial-profile/SubsocialProfileModal' +import { useSendEvent } from '@/stores/analytics' +import { useMyMainAddress } from '@/stores/my-account' +import { cx } from '@/utils/class-names' +import { formatNumber } from '@/utils/strings' +import Image from 'next/image' +import { useState } from 'react' +import { IoIosArrowForward, IoIosStats } from 'react-icons/io' +import { RiPencilFill } from 'react-icons/ri' +import LeaderboardModal from './LeaderboardModal' + +type ReferrerStatsProps = { + refCount: number + pointsEarned: string + isLoading?: boolean +} + +const pointsPerUser = 200_000 + +const ReferrerStats = ({ + refCount, + pointsEarned, + isLoading, +}: ReferrerStatsProps) => { + const [openProfileModal, setOpenProfileModal] = useState(false) + const [openLeaderboard, setOpenLeaderboard] = useState(false) + const myAddress = useMyMainAddress() + const sendEvent = useSendEvent() + + return ( + <> +
+
{ + sendEvent('open_leaderboard') + setOpenLeaderboard(true) + }} + > +
+
+ +
+
+ + +
+ + See the Leaderboard + +
+
+ +
+
+
+
+ + + + {formatNumber(refCount * pointsPerUser, { shorten: true })} + + + + Points earned from {refCount} invited friends + +
+
+ + + + {formatNumber(pointsEarned, { shorten: true })} + + + + Points earned from your friends activity + +
+
+
+ setOpenProfileModal(false)} + isOpen={openProfileModal} + /> + setOpenLeaderboard(false)} + /> + + ) +} + +export default ReferrerStats diff --git a/src/modules/telegram/FriendsPage/index.tsx b/src/modules/telegram/FriendsPage/index.tsx index 6d82673a0..503a5be3a 100644 --- a/src/modules/telegram/FriendsPage/index.tsx +++ b/src/modules/telegram/FriendsPage/index.tsx @@ -17,6 +17,7 @@ import { useState } from 'react' import { MdCheck, MdOutlineContentCopy } from 'react-icons/md' import SkeletonFallback from '../../../components/SkeletonFallback' import ReferralTable from './ReferralTable' +import ReferrerStats from './ReferrerStats' export default function FriendsPage() { useTgNoScroll() @@ -75,7 +76,7 @@ const FriendsPageContent = () => {
- ({ + document: GET_REFERRAL_LEADERBOARD, + }) + + return res.referrersRankedByReferralsCountForPeriod.data +} + +export const getReferralLeaderboardQuery = createQuery({ + key: 'getReferralLeaderboard', + fetcher: getReferralLeaderboard, + defaultConfigGenerator: (address) => ({ + enabled: !!address, + }), +}) + +const GET_REFERRER_RANK = gql` + query GetReferrerRank($address: String!) { + referrerRankByReferralsCountForPeriod( + args: { address: $address, period: ALL_TIME, withCount: true } + ) { + count + maxIndex + rankIndex + } + } +` +async function getReferrerRank(address: string) { + const res = await datahubQueryRequest< + { + referrerRankByReferralsCountForPeriod: { + count: number + maxIndex: number + rankIndex: number + } + }, + { address: string } + >({ + document: GET_REFERRER_RANK, + variables: { address }, + }) + + return res.referrerRankByReferralsCountForPeriod +} + +export const getReferrerRankQuery = createQuery({ + key: 'getReferrerRank', + fetcher: getReferrerRank, + defaultConfigGenerator: (address) => ({ + enabled: !!address, + }), +})