Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/20230608 julian #851

Merged
merged 5 commits into from
Jun 10, 2023
Merged

Feature/20230608 julian #851

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
727b000
loading skeleton
Julian0701 Jun 8, 2023
0cb23fa
accountTruncate
Julian0701 Jun 8, 2023
1115954
fix display
Julian0701 Jun 8, 2023
cd98e1a
fix accountTruncate
Julian0701 Jun 8, 2023
f9e9ce8
fix i18n
Julian0701 Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions src/components/leaderboard_tab/leaderboard_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,23 +113,23 @@ const LeaderboardTab = ({timeSpan, setTimeSpan, rankings}: LeaderboardTabProps)
{
sorted: 0,
rank: 2,
marginTop: 'mt-28 md:mt-24',
marginTop: 'mt-24',
crown: '/leaderboard/[email protected]',
star: '/leaderboard/silver_star.svg',
medalist: '/leaderboard/silver_medalist.svg',
},
{
sorted: 1,
rank: 1,
marginTop: 'mt-20 md:mt-8',
marginTop: 'mt-20 md:mt-12',
crown: '/leaderboard/[email protected]',
star: '/leaderboard/gold_star.svg',
medalist: '/leaderboard/gold_medalist.svg',
},
{
sorted: 2,
rank: 3,
marginTop: 'mt-32',
marginTop: 'mt-28 md:mt-32',
crown: '/leaderboard/[email protected]',
star: '/leaderboard/bronze_star.svg',
medalist: '/leaderboard/bronze_medalist.svg',
Expand Down Expand Up @@ -167,10 +167,7 @@ const LeaderboardTab = ({timeSpan, setTimeSpan, rankings}: LeaderboardTabProps)
? defaultTop3Data
: {
/* Info: (20230607 - Julian) If User Name length > 20, then truncate */
name:
rankingData[rank - 1]?.userName.length > 20
? accountTruncate(rankingData[rank - 1]?.userName)
: rankingData[rank - 1]?.userName,
name: accountTruncate(rankingData[rank - 1]?.userName, 20),
id: rankingData[rank - 1]?.userId,
avatar: rankingData[rank - 1]?.userAvatar ?? DEFAULT_USER_AVATAR,
displayedPnl: displayPnl(rankingData[rank - 1]?.cumulativePnl),
Expand Down Expand Up @@ -242,7 +239,7 @@ const LeaderboardTab = ({timeSpan, setTimeSpan, rankings}: LeaderboardTabProps)

const displayedTop3 = (
<div className="relative w-screen md:w-8/10">
<div className="absolute -top-48 flex w-full justify-between space-x-4 px-4 md:-top-72 md:px-16">
<div className="absolute -top-48 flex w-full justify-between space-x-4 px-4 md:-top-60 md:px-16">
{displayedTop3List}
</div>
<Image
Expand Down Expand Up @@ -279,9 +276,7 @@ const LeaderboardTab = ({timeSpan, setTimeSpan, rankings}: LeaderboardTabProps)

const displayedRank = rank <= 0 ? '-' : rank;
const displayedPnl = rank <= 0 ? '-' : displayPnl(cumulativePnl);
/* Info: (20230607 - Julian) If User Name length > 20, then truncate */
const displayedName =
rank <= 0 ? 'N/A' : userName.length > 20 ? accountTruncate(userName) : userName;
const displayedName = rank <= 0 ? 'N/A' : accountTruncate(userName, 20);
const displayedAvatar = rank <= 0 ? DEFAULT_USER_AVATAR : userAvatar;
return isLoading ? (
<div key={rank} className="flex items-center justify-between px-4 py-6">
Expand Down
68 changes: 46 additions & 22 deletions src/components/personal_achievement_modal/personal_achievement_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@ import {UserContext} from '../../contexts/user_context';
import {useGlobal} from '../../contexts/global_context';
import Image from 'next/image';
import {defaultBadges} from '../../interfaces/tidebit_defi_background/badge';
import {
DEFAULT_USER_AVATAR,
BADGE_LIST,
TypeOfPnLColor,
SKELETON_DISPLAY_TIME,
} from '../../constants/display';
import {DEFAULT_USER_AVATAR, BADGE_LIST, TypeOfPnLColor} from '../../constants/display';
import Skeleton, {SkeletonTheme} from 'react-loading-skeleton';
import {unitAsset} from '../../constants/config';
import {ProfitState} from '../../constants/profit_state';
import {numberFormatted, timestampToString} from '../../lib/common';
import {numberFormatted, timestampToString, accountTruncate} from '../../lib/common';
import {useTranslation} from 'react-i18next';
import {
IPersonalAchievement,
Expand Down Expand Up @@ -57,13 +52,14 @@ const PersonalAchievementModal = ({
result.success
? setPersonalAchievement(result.data as IPersonalAchievement)
: setPersonalAchievement(defaultPersonalAchievement);

setIsLoading(false);
})
.catch(() => {
setPersonalAchievement(defaultPersonalAchievement);
setIsLoading(false);
});

setTimeout(() => setIsLoading(false), SKELETON_DISPLAY_TIME);
}, [userId]);
}, [modalVisible]);

const {
userName,
Expand All @@ -77,7 +73,7 @@ const PersonalAchievementModal = ({
badges,
} = personalAchievement;

const displayedUserName = userName;
const displayedUserName = accountTruncate(userName, 20);
const isMe = userCtx.user?.id === userId ? true : false;

const personalRankingContent = [
Expand Down Expand Up @@ -114,6 +110,12 @@ const PersonalAchievementModal = ({
return formattedOnlineTime;
};

const closeModalHandler = () => {
modalClickHandler();
setIsLoading(true);
setPersonalAchievement(defaultPersonalAchievement);
};

const displayedROI = (roi: number) => {
const displayedRoi =
roi > 0 ? (
Expand Down Expand Up @@ -178,7 +180,7 @@ const PersonalAchievementModal = ({

return (
<div key={title} className="flex items-center justify-between">
<div className="flex flex-col items-center">
<div className="flex w-120px flex-col items-center">
<div className="text-sm text-lightGray4">{title}</div>
<div className="inline-flex items-center">
{displayedPnl}
Expand Down Expand Up @@ -230,8 +232,8 @@ const PersonalAchievementModal = ({
},
};

// Info: (20230517 - Julian) 只有自己的徽章才能點擊並分享
const clickHandler =
/* Info: (20230517 - Julian) 只有自己的徽章才能點擊並分享 */
const clickBadgeHandler =
isMe && isReceived
? () => {
globalCtx.dataBadgeModalHandler(badgeModalData);
Expand All @@ -243,7 +245,7 @@ const PersonalAchievementModal = ({
<div
key={index}
className="group relative bg-darkGray8 p-2 hover:cursor-pointer sm:p-4"
onClick={clickHandler}
onClick={clickBadgeHandler}
>
<Image src={imgSrc} width={70} height={70} alt="badge_icon" />
<div
Expand All @@ -260,17 +262,39 @@ const PersonalAchievementModal = ({
});

const formContent = isLoading ? (
// ToDo: (20230607 - Julian) Loading Skeleton
<div className="flex flex-col">
<Skeleton width={150} height={30} />
<div className="flex flex-col items-center space-y-4 px-10 pt-4">
<Skeleton width={150} height={40} />
<Skeleton width={120} height={120} circle />
<div className="flex w-full justify-between px-6">
<div className="flex flex-col items-center">
<Skeleton width={50} height={20} />
<Skeleton width={70} height={20} />
<Skeleton width={50} height={20} />
</div>
<div className="flex flex-col items-center">
<Skeleton width={50} height={20} />
<Skeleton width={70} height={20} />
<Skeleton width={50} height={20} />
</div>
<div className="flex flex-col items-center">
<Skeleton width={50} height={20} />
<Skeleton width={70} height={20} />
<Skeleton width={50} height={20} />
</div>
</div>
<div className="flex flex-col space-y-4 pt-4">
<Skeleton width={320} height={30} />
<Skeleton width={320} height={30} />
<Skeleton width={320} height={30} />
<Skeleton width={320} height={30} />
<Skeleton width={320} height={30} />
</div>
</div>
) : (
<div className="flex w-full flex-col space-y-4 divide-y divide-lightGray overflow-y-auto overflow-x-hidden px-8 pt-4">
{/* Info:(20230515 - Julian) User Name */}
<div className="flex flex-col items-center space-y-6 text-lightWhite">
<div className="no-scrollbar max-w-350px overflow-x-auto overflow-y-hidden text-2xl sm:text-4xl">
{displayedUserName}
</div>
<div className="text-2xl sm:text-4xl">{displayedUserName}</div>
<div>
<Image
src={userAvatar ?? DEFAULT_USER_AVATAR}
Expand Down Expand Up @@ -308,7 +332,7 @@ const PersonalAchievementModal = ({
<div className="flex items-center justify-between rounded-t pt-9">
<button className="float-right ml-auto bg-transparent p-1 text-base font-semibold leading-none text-gray-300 outline-none focus:outline-none">
<span className="absolute right-5 top-5 block outline-none focus:outline-none">
<ImCross onClick={modalClickHandler} />
<ImCross onClick={closeModalHandler} />
</span>
</button>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/components/user/user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ const User = () => {
<span className="text-5xl font-bold text-lightWhite">{username}</span>
</div>
{/* Info: (20230327 - Julian) Account */}
<div className="ml-4 mt-2 truncate text-sm">{accountTruncate(userCtx.user?.address)}</div>
<div className="ml-4 mt-2 truncate text-sm">
{accountTruncate(userCtx.user?.address, 20)}
</div>
</div>

<ul
Expand Down
4 changes: 3 additions & 1 deletion src/components/user_mobile/user_mobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ const UserMobile = () => {
<span className="text-4xl font-bold text-lightWhite">{username}</span>
</div>
{/* Info: (20230327 - Julian) Account */}
<div className="ml-4 truncate text-sm">{accountTruncate(userCtx.user?.address)}</div>
<div className="ml-4 truncate text-sm">
{accountTruncate(userCtx.user?.address, 20)}
</div>
</div>
<button className="p-4">
<Image src="/elements/edit_icon.svg" alt="edit_icon" width={25} height={25} />
Expand Down
21 changes: 15 additions & 6 deletions src/components/user_personal_ranking/user_personal_ranking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import Skeleton from 'react-loading-skeleton';
import {TypeOfPnLColor, SKELETON_DISPLAY_TIME} from '../../constants/display';
import {unitAsset} from '../../constants/config';
import {IRankingTimeSpan, RankingInterval} from '../../constants/ranking_time_span';
import {
IPersonalRanking,
defaultPersonalRanking,
} from '../../interfaces/tidebit_defi_background/personal_ranking';
import {ProfitState} from '../../constants/profit_state';
import {defaultPersonalRanking} from '../../interfaces/tidebit_defi_background/personal_ranking';
import {ImArrowUp, ImArrowDown, ImArrowRight} from 'react-icons/im';
import {RiShareForwardFill} from 'react-icons/ri';
import {BsFacebook, BsTwitter, BsReddit} from 'react-icons/bs';
Expand All @@ -32,10 +35,16 @@ const UserPersonalRanking = ({timeSpan}: IUserPersonalRankingProps) => {
}, []);

useEffect(() => {
setUserRankData(
// userCtx.getPersonalRanking(timeSpan) ?? // TODO: using async/await (20230526 - tzuhan)
defaultPersonalRanking
);
userCtx
.getPersonalRanking(userId, timeSpan)
.then(result => {
result.success
? setUserRankData(result.data as IPersonalRanking)
: setUserRankData(defaultPersonalRanking);
})
.catch(() => {
setUserRankData(defaultPersonalRanking);
});
}, [timeSpan]);

const username = userCtx.user?.address?.slice(-1).toUpperCase();
Expand Down Expand Up @@ -148,7 +157,7 @@ const UserPersonalRanking = ({timeSpan}: IUserPersonalRankingProps) => {
</div>
{/* Info: (20230510 - Julian) User Name */}
<div className="truncate text-sm sm:text-xl">
{accountTruncate(userCtx.user?.address)}
{accountTruncate(userCtx.user?.address, 20)}
</div>
</div>
<div className="flex items-center space-x-3 text-base md:text-xl">
Expand Down
6 changes: 4 additions & 2 deletions src/lib/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,10 @@ export const timestampToString = (timestamp: number, timezoneOffset?: number) =>
* @param address to be truncated
* @returns '0x1234...12345'
*/
export const accountTruncate = (text: string) => {
return text?.substring(0, 6) + '...' + text?.substring(text.length - 5);
export const accountTruncate = (text: string, limitLength: number) => {
return text?.length >= limitLength
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return 不能有判斷式

? text?.substring(0, 6) + '...' + text?.substring(text.length - 5)
: text;
};

/**
Expand Down