diff --git a/app/[addressOrDomain]/page.tsx b/app/[addressOrDomain]/page.tsx index a41c9386..0074cdeb 100644 --- a/app/[addressOrDomain]/page.tsx +++ b/app/[addressOrDomain]/page.tsx @@ -18,7 +18,13 @@ import ProfileCardSkeleton from "@components/skeletons/profileCardSkeleton"; import { getDataFromId } from "@services/starknetIdService"; import { usePathname, useRouter } from "next/navigation"; import ErrorScreen from "@components/UI/screens/errorScreen"; -import { ArgentDappMap, ArgentTokenMap, ArgentUserDapp, ArgentUserToken, CompletedQuests } from "../../types/backTypes"; +import { + ArgentDappMap, + ArgentTokenMap, + ArgentUserDapp, + ArgentUserToken, + CompletedQuests, +} from "../../types/backTypes"; import QuestSkeleton from "@components/skeletons/questsSkeleton"; import QuestCardCustomised from "@components/dashboard/CustomisedQuestCard"; import QuestStyles from "@styles/Home.module.css"; @@ -33,7 +39,13 @@ import { CustomTabPanel } from "@components/UI/tabs/customTab"; import SuggestedQuests from "@components/dashboard/SuggestedQuests"; import PortfolioSummary from "@components/dashboard/PortfolioSummary"; import { useNotification } from "@context/NotificationProvider"; -import { calculateTokenPrice, fetchDapps, fetchTokens, fetchUserDapps, fetchUserTokens } from "@services/argentPortfolioService"; +import { + calculateTokenPrice, + fetchDapps, + fetchTokens, + fetchUserDapps, + fetchUserTokens, +} from "@services/argentPortfolioService"; import PortfolioSummarySkeleton from "@components/skeletons/portfolioSummarySkeleton"; type AddressOrDomainProps = { @@ -43,15 +55,15 @@ type AddressOrDomainProps = { }; type ChartItemMap = { - [dappId: string]: ChartItem + [dappId: string]: ChartItem; }; type DebtStatus = { hasDebt: boolean; - tokens: { - dappId: string, - tokenAddress: string, - tokenBalance: number + tokens: { + dappId: string; + tokenAddress: string; + tokenBalance: number; }[]; }; @@ -190,30 +202,59 @@ export default function Page({ params }: AddressOrDomainProps) { }, []); const fetchPortfolioAssets = useCallback(async (addr: string) => { - // TODO: Implement fetch from Argent API const assets = [ - { color: "#1E2097", itemLabel: "USDC", itemValue: "46.68", itemValueSymbol: "%" }, - { color: "#637DEB", itemLabel: "USDT", itemValue: "27.94", itemValueSymbol: "%" }, - { color: "#2775CA", itemLabel: "STRK", itemValue: "22.78", itemValueSymbol: "%" }, - { color: "#5CE3FE", itemLabel: "ETH", itemValue: "0.36", itemValueSymbol: "%" }, - { color: "#F4FAFF", itemLabel: "Others", itemValue: "2.36", itemValueSymbol: "%" }, + { + color: "#1E2097", + itemLabel: "USDC", + itemValue: "46.68", + itemValueSymbol: "%", + }, + { + color: "#637DEB", + itemLabel: "USDT", + itemValue: "27.94", + itemValueSymbol: "%", + }, + { + color: "#2775CA", + itemLabel: "STRK", + itemValue: "22.78", + itemValueSymbol: "%", + }, + { + color: "#5CE3FE", + itemLabel: "ETH", + itemValue: "0.36", + itemValueSymbol: "%", + }, + { + color: "#F4FAFF", + itemLabel: "Others", + itemValue: "2.36", + itemValueSymbol: "%", + }, ]; setPortfolioAssets(assets); - }, []); const userHasDebt = (userDapps: ArgentUserDapp[]) => { let debt: DebtStatus = { hasDebt: false, tokens: [] }; for (const dapp of userDapps) { - if (!dapp.products[0]) { continue; } + if (!dapp.products[0]) { + continue; + } for (const position of dapp.products[0].positions) { for (const tokenAddress of Object.keys(position.totalBalances)) { const tokenBalance = Number(position.totalBalances[tokenAddress]); if (tokenBalance < 0) { debt.hasDebt = true; - debt.tokens.push({dappId: dapp.dappId, tokenAddress, tokenBalance}); + debt.tokens.push({ + dappId: dapp.dappId, + tokenAddress, + tokenBalance, + }); } } } @@ -221,16 +262,24 @@ export default function Page({ params }: AddressOrDomainProps) { return debt; }; - const handleDebt = async (protocolsMap: ChartItemMap, userDapps: ArgentUserDapp[], tokens: ArgentTokenMap) => { + const handleDebt = async ( + protocolsMap: ChartItemMap, + userDapps: ArgentUserDapp[], + tokens: ArgentTokenMap + ) => { const debtStatus = userHasDebt(userDapps); - if (!debtStatus || !debtStatus.hasDebt) { return; } + if (!debtStatus || !debtStatus.hasDebt) { + return; + } for await (const debt of debtStatus.tokens) { let value = Number(protocolsMap[debt.dappId].itemValue); value += await calculateTokenPrice( debt.tokenAddress, - tokenToDecimal(debt.tokenBalance.toString(), - tokens[debt.tokenAddress].decimals), + tokenToDecimal( + debt.tokenBalance.toString(), + tokens[debt.tokenAddress].decimals + ), "USD" ); @@ -238,15 +287,26 @@ export default function Page({ params }: AddressOrDomainProps) { } }; - const getProtocolsFromTokens = async (protocolsMap: ChartItemMap, userTokens: ArgentUserToken[], tokens: ArgentTokenMap, dapps: ArgentDappMap) => { + const getProtocolsFromTokens = async ( + protocolsMap: ChartItemMap, + userTokens: ArgentUserToken[], + tokens: ArgentTokenMap, + dapps: ArgentDappMap + ) => { for await (const token of userTokens) { const tokenInfo = tokens[token.tokenAddress]; if (tokenInfo.dappId && token.tokenBalance != "0") { let itemValue = 0; - const currentTokenBalance = await calculateTokenPrice(token.tokenAddress, tokenToDecimal(token.tokenBalance, tokenInfo.decimals), "USD"); - + const currentTokenBalance = await calculateTokenPrice( + token.tokenAddress, + tokenToDecimal(token.tokenBalance, tokenInfo.decimals), + "USD" + ); + if (protocolsMap[tokenInfo.dappId]?.itemValue) { - itemValue = Number(protocolsMap[tokenInfo.dappId].itemValue) + currentTokenBalance; + itemValue = + Number(protocolsMap[tokenInfo.dappId].itemValue) + + currentTokenBalance; } else { itemValue = currentTokenBalance; } @@ -255,23 +315,35 @@ export default function Page({ params }: AddressOrDomainProps) { color: "", itemLabel: dapps[tokenInfo.dappId].name, itemValueSymbol: "$", - itemValue: itemValue.toFixed(2) - } + itemValue: itemValue.toFixed(2), + }; } } - } + }; - const getProtocolsFromDapps = async (protocolsMap: ChartItemMap, userDapps: ArgentUserDapp[], tokens: ArgentTokenMap, dapps: ArgentDappMap) => { + const getProtocolsFromDapps = async ( + protocolsMap: ChartItemMap, + userDapps: ArgentUserDapp[], + tokens: ArgentTokenMap, + dapps: ArgentDappMap + ) => { for await (const userDapp of userDapps) { - if (protocolsMap[userDapp.dappId]) { continue; } // Ignore entry if already present in the map + if (protocolsMap[userDapp.dappId]) { + continue; + } // Ignore entry if already present in the map let protocolBalance = 0; - if (!userDapp.products[0]) { return; } + if (!userDapp.products[0]) { + return; + } for await (const position of userDapp.products[0].positions) { for await (const tokenAddress of Object.keys(position.totalBalances)) { protocolBalance += await calculateTokenPrice( - tokenAddress, - tokenToDecimal(position.totalBalances[tokenAddress], tokens[tokenAddress].decimals), + tokenAddress, + tokenToDecimal( + position.totalBalances[tokenAddress], + tokens[tokenAddress].decimals + ), "USD" ); } @@ -281,25 +353,35 @@ export default function Page({ params }: AddressOrDomainProps) { color: "", itemLabel: dapps[userDapp.dappId].name, itemValueSymbol: "$", - itemValue: protocolBalance.toFixed(2) - } + itemValue: protocolBalance.toFixed(2), + }; } - } + }; const sortProtocols = (protocolsMap: ChartItemMap) => { - return Object.values(protocolsMap).sort((a, b) => parseFloat(b.itemValue) - parseFloat(a.itemValue)); - } + return Object.values(protocolsMap).sort( + (a, b) => parseFloat(b.itemValue) - parseFloat(a.itemValue) + ); + }; const handleExtraProtocols = (sortedProtocols: ChartItem[]) => { - let otherProtocols = sortedProtocols.length > 5 ? sortedProtocols.splice(4) : []; - if (otherProtocols.length === 0) { return;} + let otherProtocols = + sortedProtocols.length > 5 ? sortedProtocols.splice(4) : []; + if (otherProtocols.length === 0) { + return; + } sortedProtocols.push({ itemLabel: "Others", - itemValue: otherProtocols.reduce((valueSum, protocol) => valueSum + Number(protocol.itemValue), 0).toFixed(2), + itemValue: otherProtocols + .reduce( + (valueSum, protocol) => valueSum + Number(protocol.itemValue), + 0 + ) + .toFixed(2), itemValueSymbol: "$", - color: "" + color: "", }); - } + }; const assignProtocolColors = (sortedProtocols: ChartItem[]) => { const portfolioProtocolColors = [ @@ -307,12 +389,12 @@ export default function Page({ params }: AddressOrDomainProps) { "#23F51F", "#DEFE5C", "#9EFABB", - "#F4FAFF" + "#F4FAFF", ]; sortedProtocols.forEach((protocol, index) => { protocol.color = portfolioProtocolColors[index]; }); - } + }; const fetchPortfolioProtocols = useCallback(async (addr: string) => { let dapps: ArgentDappMap = {}; @@ -326,7 +408,7 @@ export default function Page({ params }: AddressOrDomainProps) { fetchDapps(), fetchTokens(), fetchUserTokens(addr), - fetchUserDapps(addr) + fetchUserDapps(addr), ]); } catch (error) { showNotification("Error while fetching address portfolio", "error"); @@ -344,10 +426,13 @@ export default function Page({ params }: AddressOrDomainProps) { let sortedProtocols = sortProtocols(protocolsMap); handleExtraProtocols(sortedProtocols); assignProtocolColors(sortedProtocols); - + setPortfolioProtocols(sortedProtocols); } catch (error) { - showNotification("Error while calculating address portfolio stats", "error"); + showNotification( + "Error while calculating address portfolio stats", + "error" + ); console.log("Error while calculating address portfolio stats", error); } @@ -503,7 +588,6 @@ export default function Page({ params }: AddressOrDomainProps) { {initProfile && identity ? ( ) : ( - sum + Number(item.itemValue), 0)} + totalBalance={portfolioAssets.reduce( + (sum, item) => sum + Number(item.itemValue), + 0 + )} isProtocol={false} /> )} {loadingProtocols ? ( ) : ( - sum + Number(item.itemValue), 0)} + sum + Number(item.itemValue), + 0 + )} isProtocol={true} /> )} @@ -587,9 +677,13 @@ export default function Page({ params }: AddressOrDomainProps) { {questsLoading ? ( ) : completedQuests?.length === 0 ? ( - isOwner - ? - : User has not completed any quests at the moment + isOwner ? ( + + ) : ( + + User has not completed any quests at the moment + + ) ) : (
diff --git a/components/UI/iconsComponents/icons/eyeIcon.tsx b/components/UI/iconsComponents/icons/eyeIcon.tsx new file mode 100644 index 00000000..89f82e32 --- /dev/null +++ b/components/UI/iconsComponents/icons/eyeIcon.tsx @@ -0,0 +1,34 @@ +import React, { FunctionComponent } from "react"; + +interface IconProps { + color?: string; + width?: number; +} + +const EyeIcon: FunctionComponent = ({ + color = "#E1DCEA", + width = 17, +}) => { + return ( + + + + + ); +}; + +export default EyeIcon; diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index e75d64cb..0299a64f 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -6,39 +6,41 @@ import React, { useState, } from "react"; import styles from "@styles/dashboard.module.css"; -import CopyIcon from "@components/UI/iconsComponents/icons/copyIcon"; import { CDNImage } from "@components/cdn/image"; -import { useStarkProfile,type Address } from "@starknet-react/core"; -import { minifyAddress } from "@utils/stringService"; +import { useStarkProfile, type Address } from "@starknet-react/core"; import trophyIcon from "public/icons/trophy.svg"; import xpIcon from "public/icons/xpBadge.svg"; import useCreationDate from "@hooks/useCreationDate"; import shareSrc from "public/icons/share.svg"; import theme from "@styles/theme"; -import { Tooltip } from "@mui/material"; -import CopyAddress from "@components/UI/CopyAddress"; +import EyeIcon from "../iconsComponents/icons/eyeIcon"; import ProfilIcon from "../iconsComponents/icons/profilIcon"; import Link from "next/link"; import SocialMediaActions from "../actions/socialmediaActions"; -import { getTweetLink, writeToClipboard } from "@utils/browserService"; +import { getTweetLink } from "@utils/browserService"; import { hexToDecimal } from "@utils/feltService"; -import { Url } from "next/dist/shared/lib/router/router"; import { TEXT_TYPE } from "@constants/typography"; import Typography from "../typography/typography"; -const ProfileCard: FunctionComponent = ({ +type ProfileCardProps = { + rankingData: RankingData; + identity: Identity; + leaderboardData: LeaderboardToppersData; + isOwner: boolean; +}; + +const ProfileCard: FunctionComponent = ({ rankingData, identity, leaderboardData, - addressOrDomain, isOwner, }) => { - const [copied, setCopied] = useState(false); + const [userXp, setUserXp] = useState(); const sinceDate = useCreationDate(identity); - const formattedAddress = (identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`) as Address; + const formattedAddress = ( + identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}` + ) as Address; const { data: profileData } = useStarkProfile({ address: formattedAddress }); - const [userXp, setUserXp] = useState(); - const rankFormatter = useCallback((rank: number) => { if (rank > 10000) return "+10k"; @@ -54,7 +56,7 @@ const ProfileCard: FunctionComponent = ({ leaderboardData && leaderboardData?.total_users > 0 ) { - const user = rankingData.ranking.find( + const user = rankingData?.ranking?.find( (user) => user.address === hexToDecimal(identity.owner) ); if (user) { @@ -65,81 +67,94 @@ const ProfileCard: FunctionComponent = ({ useEffect(() => { computeData(); - }, [rankingData, identity, leaderboardData]); + }, [computeData]); - const shareLink: Url = useMemo(() => { + const tweetShareLink: string = useMemo(() => { return `${getTweetLink( `Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${ window.location.href } #Starknet #StarknetID` )}`; - }, []); + }, [isOwner]); return (
{profileData?.profilePicture ? ( - + ) : ( )}
-
- - {sinceDate ? `${sinceDate}` : ""} - - {identity.domain.domain} -
- - - {minifyAddress(addressOrDomain ?? identity?.owner, 8)} +
+ + {sinceDate ? `${sinceDate}` : ""} + + + {identity.domain?.domain || "Unknown Domain"} + +
+
+ + $2,338.34 +
-
- - +
+
+ + {tweetShareLink && ( +
Share
-
+ )}
-
-
-
-
- - +
+
+
+
+
+ + {tweetShareLink && ( +
Share
-
+ )}
+
- {leaderboardData && leaderboardData?.total_users > 0 ? ( + {leaderboardData && leaderboardData.total_users > 0 && (
= ({ type={TEXT_TYPE.BODY_SMALL} className={styles.statsText} > - {leaderboardData?.position - ? rankFormatter(leaderboardData?.position) + {leaderboardData.position + ? rankFormatter(leaderboardData.position) : "NA"}
- ) : null} - {userXp !== undefined ? ( + )} + {userXp !== undefined && (
= ({ {userXp ?? "0"}
- ) : null} + )}
diff --git a/package-lock.json b/package-lock.json index c3fce457..a0fdbaf2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17300,4 +17300,4 @@ } } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index c9c4d50d..78f017a5 100644 --- a/package.json +++ b/package.json @@ -77,4 +77,4 @@ "ts-jest": "^29.0.3", "typescript": "^5.3.2" } -} +} \ No newline at end of file diff --git a/styles/dashboard.module.css b/styles/dashboard.module.css index 0a89662c..59154576 100644 --- a/styles/dashboard.module.css +++ b/styles/dashboard.module.css @@ -1,478 +1,487 @@ .dashboard_container { - display: flex; - flex-direction: column; - width: 100%; - justify-content: center; - align-items: center; - padding: 20px; + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + padding: 20px; } .dashboard_wrapper { - display: flex; - width: 100%; - justify-content: center; - margin-top: 12vh; - max-width: var(--dashboard-max-width); - margin-bottom: 24px; + display: flex; + width: 100%; + justify-content: center; + margin-top: 12vh; + max-width: var(--dashboard-max-width); + margin-bottom: 24px; } .dashboard_skeleton { - display: flex; - width: 100%; - margin-top: 12vh; - max-width: var(--dashboard-max-width); + display: flex; + width: 100%; + margin-top: 12vh; + max-width: var(--dashboard-max-width); } .profileCardSkeleton { - height: 30vh; - position: relative; - overflow: hidden; - width: 100%; + height: 30vh; + position: relative; + overflow: hidden; + width: 100%; } .profileCardLoading { - position: absolute; - top: 0; - left: 0; - width: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; } .dashboardSkeleton { - height: 30vh; - width: 100%; - margin-top: 6vh; - max-width: var(--dashboard-max-width); + height: 30vh; + width: 100%; + margin-top: 6vh; + max-width: var(--dashboard-max-width); } .dashboardLoading { - position: absolute; - top: 0; - left: 0; - width: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; } .questsCompletedTitleSkeleton { - display: flex; - width: 100%; - margin-top: 6vh; - max-width: var(--dashboard-max-width); + display: flex; + width: 100%; + margin-top: 6vh; + max-width: var(--dashboard-max-width); } .questsCompletedTitleLoading { - position: absolute; - top: 0; - left: 0; - width: 2rem; + position: absolute; + top: 0; + left: 0; + width: 2rem; } .blur1 { - display: none; - position: absolute; - left: 0; - top: 0; - z-index: -1; + display: none; + position: absolute; + left: 0; + top: 0; + z-index: -1; } .blur2 { - display: none; - position: absolute; - right: 0; - bottom: 0; - z-index: -1; + display: none; + position: absolute; + right: 0; + bottom: 0; + z-index: -1; } .dashboard_profile_card { - display: flex; - width: 100%; - padding: 1.5rem 2.5rem; - background: linear-gradient(var(--background600), transparent); - align-items: center; - border-radius: 8px; - margin-top: 2rem; + display: flex; + width: 100%; + padding: 1.5rem 2.5rem; + background: linear-gradient(var(--background600), transparent); + align-items: center; + border-radius: 8px; + margin-top: 2rem; } .profile_picture_div { - border-radius: 50%; - width: 150px; - height: 150px; - background-color: transparent; - display: flex; - justify-content: center; - align-items: center; + border-radius: 50%; + width: 150px; + height: 150px; + background-color: transparent; + display: flex; + justify-content: center; + align-items: center; } .profile_picture_img { - position: absolute; + position: absolute; } .child { - flex: 1; + flex: 1; } .left { - width: 80%; - display: flex; - flex-direction: row; - align-items: center; - height: 100%; - gap: 2rem; + width: 80%; + display: flex; + flex-direction: row; + align-items: center; + height: 100%; + gap: 2rem; } .center { - padding-left: 3rem; - display: flex; - flex-direction: column; - gap: 1rem; - height: 100%; + padding-left: 3rem; + display: flex; + flex-direction: column; + gap: 1rem; + height: 100%; } .divider { - height: 10px; - width: 100%; + height: 10px; + width: 100%; } - .flexDiv { - display: flex; - + display: flex; } .right { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - width: 20%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 20%; } .right_top { - display: flex; - justify-content: flex-end; - width: 100%; - gap: 20px; - align-items: center; + display: flex; + justify-content: flex-end; + width: 100%; + gap: 20px; + align-items: center; } .right_socials { - display: flex; - align-items: center; - gap: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; } .social_icon_wrap { - cursor: pointer; + cursor: pointer; } .social_icon { - width: 32px; - height: 32px; - border-radius: 12px; - background-color: white; - cursor: pointer; + width: 32px; + height: 32px; + border-radius: 12px; + background-color: white; + cursor: pointer; } .right_share_button { - width: auto; - height: 32px; - border-radius: 12px; - background-color: rgb(13, 13, 13); - padding: 20px; - display: flex; - justify-content: center; - align-items: center; - gap: 5px; + width: auto; + height: 32px; + border-radius: 12px; + background-color: rgb(13, 13, 13); + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; } .right_middle { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .right_bottom { - display: flex; - justify-content: flex-end; - gap: 2rem; - align-items: center; - width: 100%; + display: flex; + justify-content: flex-end; + gap: 2rem; + align-items: center; + width: 100%; } .right_bottom_content { - display: flex; - align-items: center; - gap: 5px; + display: flex; + align-items: center; + gap: 5px; } - @keyframes spin { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } .profile_name { - font-size: 30px; - font-weight: bold; + font-size: 30px; + font-weight: bold; } .accountCreationDate { - font-size: 14px; - font-weight: 400; - line-height: 16px; + font-size: 14px; + font-weight: 400; + line-height: 16px; +} + +.wallet_amount { + color: var(--Secondary-600, #f4faff); + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + + /* Body/middle/bold */ + font-family: Sora; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + letter-spacing: 0.18px; } .addressText, .accountCreationDate { - font-size: 14px; - font-weight: 400; - line-height: 16px; + font-size: 14px; + font-weight: 400; + line-height: 16px; } .percentileText { - font-size: 14px; - margin-top: 10px; + font-size: 14px; + margin-top: 10px; } .small_divider { - width: 20px; + width: 20px; } .address_div { - display: flex; - align-items: center; - gap: 0.25rem; + display: flex; + align-items: center; + gap: 0.25rem; } .green_span { - font-size: 16px; - color: rgb(144, 246, 194); + font-size: 16px; + color: rgb(144, 246, 194); } .second_header_label { - margin-right: auto; + margin-right: auto; } .second_header { - font-size: 18px; - font-weight: bold; - margin-bottom: 2rem; + font-size: 18px; + font-weight: bold; + margin-bottom: 2rem; } .questContainer, .container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - text-align: center; - overflow: hidden; - width: 100%; - margin-bottom: 3rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + overflow: hidden; + width: 100%; + margin-bottom: 3rem; } .questContainer { - flex-direction: row; - flex-wrap: wrap; - gap: 2rem; - max-width: var(--dashboard-max-width); - margin-bottom: 3rem; - justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + gap: 2rem; + max-width: var(--dashboard-max-width); + margin-bottom: 3rem; + justify-content: space-between; } .dashboard_completed_tasks_container { - display: flex; - flex-direction: column; - width: 100%; - margin-top: 6vh; - max-width: var(--dashboard-max-width); - margin-bottom: 24px; + display: flex; + flex-direction: column; + width: 100%; + margin-top: 6vh; + max-width: var(--dashboard-max-width); + margin-bottom: 24px; } .quests_container { - min-height: 350px; - height: 100%; - display: flex; - flex-wrap: wrap; + min-height: 350px; + height: 100%; + display: flex; + flex-wrap: wrap; } .leftAligned { - justify-content: flex-start; + justify-content: flex-start; } .centerAligned { - justify-content: center; + justify-content: center; } .statsText { - font-family: 'Sora-Bold'; - font-size: 14px; - text-align: center; + font-family: "Sora-Bold"; + font-size: 14px; + text-align: center; } .dashboard_portfolio_summary_container { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; - width: 100%; - margin-top: 6vh; - max-width: var(--dashboard-max-width); - margin-bottom: 24px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + width: 100%; + margin-top: 6vh; + max-width: var(--dashboard-max-width); + margin-bottom: 24px; } .dashboard_portfolio_summary { - width: 47%; - margin-bottom: 6vh; + width: 47%; + margin-bottom: 6vh; } .dashboard_portfolio_summary_info { - border-radius: 8px; - padding: 24px; + border-radius: 8px; + padding: 24px; + width: 100%; + height: 200px; + display: flex; + flex-direction: row; + background-color: var(--menu-background); + justify-content: space-between; + align-items: flex-start; + align-self: stretch; + border: solid 1px transparent; +} + +@media (max-width: 768px) { + .dashboard_profile_card { + flex-direction: column; + text-align: center; + padding: 1rem; + } + + .right { width: 100%; - height: 200px; + justify-content: center; + } + + .dashboard_container { + padding: 5px; + } + + .second_header { + margin-bottom: 0; + } + + .dashboard_wrapper { + padding: 20px; + padding-bottom: 30px; + } + + .right_top { + justify-content: center; + margin-top: 10px; + margin-bottom: 10px; + } + + .right_bottom { + justify-content: center; + gap: 0.7rem; + } + + .accountCreationDate { + padding-bottom: 10px; + } + + .dashboard_portfolio_summary_container { + flex-direction: column; + align-items: center; + width: var(--dashboard-max-width); + } + + .dashboard_portfolio_summary { + width: 90%; + } + + .dashboard_portfolio_summary_info { + flex-direction: column-reverse; + align-items: center; + height: fit-content; + } + + .quests_container { display: flex; + flex-direction: column; + justify-content: center; + } + + .questContainer { flex-direction: row; - background-color: var(--menu-background); - justify-content: space-between; - align-items: flex-start; - align-self: stretch; - border: solid 1px transparent; -} + flex-wrap: wrap; + gap: 2rem; + max-width: var(--dashboard-max-width); + margin-bottom: 3rem; + margin-top: 1rem; + margin-top: 3rem; + justify-content: center; + } -@media (max-width: 768px) { - .dashboard_profile_card { - flex-direction: column; - text-align: center; - padding: 1rem; - } - - .right { - width: 100%; - justify-content: center; - } - - .dashboard_container { - padding: 5px; - } - - .second_header { - margin-bottom: 0; - } - - .dashboard_wrapper { - padding: 20px; - padding-bottom: 30px; - } - - .right_top { - justify-content: center; - margin-top: 10px; - margin-bottom: 10px; - } - - .right_bottom { - justify-content: center; - gap: 0.7rem; - } - - .accountCreationDate { - padding-bottom: 10px; - } - - .dashboard_portfolio_summary_container { - flex-direction: column; - align-items: center; - width: var(--dashboard-max-width); - } - - .dashboard_portfolio_summary { - width: 90%; - } - - .dashboard_portfolio_summary_info { - flex-direction: column-reverse; - align-items: center; - height: fit-content; - } - - .quests_container { - display: flex; - flex-direction: column; - justify-content: center; - } - - .questContainer { - flex-direction: row; - flex-wrap: wrap; - gap: 2rem; - max-width: var(--dashboard-max-width); - margin-bottom: 3rem; - margin-top: 1rem; - margin-top: 3rem; - justify-content: center; - } - - .profile_name { - margin-bottom: 10px; - } - - .center { - gap: 0; - padding-left: unset; - } - - .address_div { - justify-content: center; - gap: 0.5rem; - } - - .profile_picture_div { - width: 120px; - height: 120px; - } - - .addressText { - font-size: 10px; - } - - .accountCreationDate { - padding-top: 10px; - font-size: 12px; - } - - .percentileText { - font-size: 14px; - margin-bottom: 10px; - color: var(--secondary); - } - - .second_header_label { - text-align: center; - } - - .statsText { - font-family: 'Sora-ExtraBold'; - font-size: 20px; - text-align: center; - } - - .second_header_label { - margin: auto; - } - - .noBoosts { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .left { - flex-direction: column; - gap: 0.75rem; - } - -} \ No newline at end of file + .profile_name { + margin-bottom: 10px; + } + + .center { + gap: 0; + padding-left: unset; + } + + .address_div { + justify-content: center; + gap: 0.5rem; + } + + .profile_picture_div { + width: 120px; + height: 120px; + } + + .addressText { + font-size: 10px; + } + + .accountCreationDate { + padding-top: 10px; + font-size: 12px; + } + + .percentileText { + font-size: 14px; + margin-bottom: 10px; + color: var(--secondary); + } + + .second_header_label { + text-align: center; + } + + .statsText { + font-family: "Sora-ExtraBold"; + font-size: 20px; + text-align: center; + } + + .second_header_label { + margin: auto; + } + + .noBoosts { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .left { + flex-direction: column; + gap: 0.75rem; + } +}