Skip to content

Commit

Permalink
Merge pull request #1967 from zeitgeistpm/staging
Browse files Browse the repository at this point in the history
  • Loading branch information
@github-actions
github-actions[bot] authored Nov 7, 2023
2 parents d9c7dc8 + 46e9aa1 commit c283ddf
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 63 deletions.
10 changes: 5 additions & 5 deletions components/portfolio/Breakdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,13 @@ export const BreakdownSlot = ({
}: BreakdownSlotProps) => {
return (
<>
<h4 className="font-medium text-sky-600 text-ztg-12-150 mb-1">{title}</h4>
<div className="flex text-lg mb-1 items-center">
<div className="w-2/3 font-semibold text-ztg-16-150">
<h4 className="font-medium text-sky-600 text-xs mb-1">{title}</h4>
<div className="flex font-mono mb-1 items-center">
<div className="sm:w-2/3 font-semibold">
{formatNumberLocalized(value.div(ZTG).toNumber())} ZTG
</div>
<div
className={`flex-1 w-1/3 text-ztg-14-120 ${
className={`hidden sm:block flex-1 w-1/3 ${
changePercentage < 0.01
? "text-gray-800"
: changePercentage < 0
Expand All @@ -130,7 +130,7 @@ export const BreakdownSlot = ({
{Math.abs(changePercentage).toFixed(1)}%
</div>
</div>
<div className="text-sky-600 mb-1 text-ztg-14-150">
<div className="text-sky-600 font-mono mb-1 text-sm">
$
{formatNumberLocalized(
usdZtgPrice?.mul(value.div(ZTG)).toNumber() ?? 0,
Expand Down
2 changes: 1 addition & 1 deletion components/portfolio/MarketPositionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const MarketPositionHeader = ({
question?: string;
}) => {
return (
<h3 className="text-ztg-16-150 mb-6 font-normal">
<h3 className="text-sm sm:text-base mb-5 font-normal">
<Link href={`/markets/${marketId}`}>{question}</Link>
</h3>
);
Expand Down
29 changes: 17 additions & 12 deletions components/portfolio/PortfolioIdentity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,22 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
return (
<>
<div className="flex flex-col justify-center w-full gap-y-2 sm:gap-y-5 mb-5">
<div className="flex gap-2 sm:gap-5 flex-col sm:flex-row">
<div className="flex gap-5 flex-col sm:flex-row">
<div>{address && <Avatar address={address} size={100} />}</div>
<div className="flex flex-col justify-center">
<div className="flex items-center gap-2 mb-4">
<div className="flex items-center gap-2 mb-2">
<div>
{isOwned && !hasIdentity && (
<div className="-mb-3 font-extrabold text-xs text-gray-500">
<div className="font-extrabold text-xs text-gray-500">
wallet name
</div>
)}
{isOwned && hasIdentity && (
<div className="-mb-3 font-extrabold text-xs text-gray-500">
<div className="font-extrabold text-xs text-gray-500">
on chain name
</div>
)}
<div className="font-extrabold text-[28px] sm:text-[38px]">
<div className="font-extrabold text-xl sm:text-4xl">
{name}{" "}
</div>
</div>
Expand All @@ -68,25 +68,30 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
</div>
)}
</div>
<div className="text-ztg-12-150 sm:text-ztg-16-150">{address}</div>
<div className="hidden sm:block text-sm md:text-base">
{address}
</div>
<div className="sm:hidden text-sm">
{shortenAddress(address, 12, 26)}
</div>
</div>
</div>
<div className="flex flex-wrap gap-3 text-ztg-14-110 text-white">
<div className="flex flex-wrap gap-3 text-sm text-white">
{identity?.twitter && (
<a
className="flex items-center bg-twitter p-[8px] rounded-md"
className="flex items-center bg-twitter p-2 rounded-md"
href={`https://twitter.com/${identity.twitter}`}
target="_blank"
rel="noreferrer"
>
<TwitterIcon fill="white" />
<span className="ml-ztg-10 ">{identity.twitter}</span>
<span className="ml-2.5 ">{identity.twitter}</span>
</a>
)}
{identity?.discord && (
<div className="flex items-center bg-discord p-[8px] rounded-md">
<div className="flex items-center bg-discord p-2 rounded-md">
<DiscordIcon fill="white" />
<span className="ml-ztg-10">{identity.discord}</span>
<span className="ml-2.5">{identity.discord}</span>
</div>
)}
<Transition
Expand All @@ -98,7 +103,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
leaveTo="opacity-0"
show={isProxying}
>
<div className="flex items-center gap-2 p-[8px] rounded-md bg-purple-600 text-white">
<div className="flex items-center gap-2 p-2 rounded-md bg-purple-600 text-white">
<FaNetworkWired size={16} />
Your are acting proxy for this account.
</div>
Expand Down
51 changes: 20 additions & 31 deletions components/ui/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,11 @@ const Cell = ({
isLoadingError: ztgIsLoadingError,
} = useZtgPrice();

const base = `dark:text-white px-ztg-15 h-ztg-72 ${
onClick ? "cursor-pointer" : ""
}`;
const base = `dark:text-white px-4 h-16 ${onClick ? "cursor-pointer" : ""}`;
const style = { height: `${rowHeight}px` };
const skeletonElement = (
<td
className={`font-semibold text-ztg-12-150 ${base}`}
className={`font-semibold text-xs ${base}`}
onClick={onClick}
style={style}
>
Expand All @@ -149,7 +147,7 @@ const Cell = ({
case "text":
return (
<td
className={`text-ztg-14-150 ${base}`}
className={`text-sm ${base}`}
data-test="outcomeText"
onClick={onClick}
style={style}
Expand All @@ -160,7 +158,7 @@ const Cell = ({
case "number":
return (
<td
className={`font-semibold text-ztg-12-150 ${base}`}
className={`font-semibold text-xs ${base}`}
onClick={onClick}
style={style}
>
Expand Down Expand Up @@ -194,7 +192,7 @@ const Cell = ({
case "paragraph":
return (
<td
className={` font-semibold text-ztg-12-150 text-left ${base}`}
className={`font-semibold text-xs text-left ${base}`}
onClick={onClick}
style={style}
>
Expand All @@ -209,10 +207,10 @@ const Cell = ({
) {
return (
<td className={`${base} `} onClick={onClick} style={style}>
<div className="text-ztg-14-150 font-mediun mb-[2px]">
<div className="text-sm mb-0.5">
{formatNumberLocalized(value.value)}
</div>
<div className="text-ztg-12-150 font-light text-sky-600">
<div className="text-xs font-light text-sky-600">
$
{(
value.usdValue ?? (ztgPrice?.toNumber() ?? 0) * value.value
Expand All @@ -228,7 +226,7 @@ const Cell = ({
<td className={` ${base}`} onClick={onClick} style={style}>
<div className="flex items-center">
<Avatar address={typeof value === "string" ? value : ""} />
<div className="font-semibold text-ztg-12-150 ml-ztg-10">
<div className="font-semibold text-xs ml-2.5">
{typeof value === "string" ? value : ""}
</div>
</div>
Expand All @@ -239,10 +237,7 @@ const Cell = ({
return (
<td className={` ${base}`} onClick={onClick} style={style}>
<div className="flex items-center">
<div
className="font-semibold text-ztg-16-150 uppercase"
data-test="tokenText"
>
<div className="font-semibold uppercase" data-test="tokenText">
{value.label}
</div>
</div>
Expand All @@ -255,11 +250,11 @@ const Cell = ({
<td className={` ${base}`} onClick={onClick} style={style}>
<div className="flex items-center">
<img
className="rounded-ztg-5 w-ztg-40 h-ztg-40 mr-ztg-10"
className="rounded-md w-10 h-10 mr-2.5"
src={value.url}
loading="lazy"
/>
<span className="font-semibold text-ztg-10-150 text-sky-600 uppercase">
<span className="font-semibold text-xxs text-sky-600 uppercase">
{value.label}
</span>
</div>
Expand All @@ -268,11 +263,7 @@ const Cell = ({
}
case "percentage":
return (
<td
className={`text-ztg-14-150 ${base}`}
onClick={onClick}
style={style}
>
<td className={`text-sm ${base}`} onClick={onClick} style={style}>
<>{value}</>%
</td>
);
Expand Down Expand Up @@ -322,7 +313,7 @@ const Table = ({
}, [loadMoreRef, loadMoreInView, loadMoreThresholdIndex, data]);

const getHeaderClass = (column: TableColumn) => {
const base = "px-ztg-15 text-[13px] text-left font-medium";
const base = "px-4 text-xxs sm:text-xs text-left font-medium";

if (column.alignment) {
return `${column.alignment} ${base}`;
Expand Down Expand Up @@ -414,7 +405,7 @@ const Table = ({
}
>
<thead>
<tr className="bg-light-gray h-[50px]">
<tr className="bg-light-gray h-12">
{renderColumns.map((column, index) => (
<th
key={index}
Expand All @@ -438,7 +429,7 @@ const Table = ({
role="button"
onClick={handleSortClick}
size={14}
className="ml-ztg-8 cursor-pointer"
className="ml-2 cursor-pointer"
/>
) : (
<></>
Expand Down Expand Up @@ -486,7 +477,7 @@ const Table = ({
: ""
}
${rowColorClass}
${onRowClick ? "cursor-pointer" : ""} mx-ztg-5`}
${onRowClick ? "cursor-pointer" : ""} mx-1`}
onClick={() => handleRowClick(row)}
>
{row.cells
Expand Down Expand Up @@ -516,15 +507,13 @@ const Table = ({
<div className="">
{loadingMore &&
range(0, loadingNumber).map((index) => (
<Skeleton key={index} height={80} className="mb-ztg-16" />
<Skeleton key={index} height={80} className="mb-4" />
))}
</div>

{!loadingMore && rows.length === 0 ? (
<div className="w-full flex justify-center">
<div className="text-ztg-16-120 font-bold mt-ztg-60">
{noDataMessage}
</div>
<div className="font-bold mt-14">{noDataMessage}</div>
</div>
) : (
<></>
Expand All @@ -534,9 +523,9 @@ const Table = ({
{onPaginate ? <Paginator onPlusClicked={handlePlusClicked} /> : <></>}

{onLoadMore && !hideLoadMore && (
<div className="flex justify-center mt-ztg-16 mb-ztg-20">
<div className="flex justify-center mt-4 mb-5">
<div
className="uppercase text-sky-600 font-bold text-ztg-10-150"
className="uppercase text-sky-600 font-bold text-xs"
role="button"
onClick={handleLoadMore}
>
Expand Down
5 changes: 2 additions & 3 deletions lib/util/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,12 @@ const hexChars = [
export const formatNumberLocalized = (
num: number | bigint,
locale: string = "en-US",
maximumFractionDigits: number = 2,
) => {
// Ensure displaying absolute zeros are unsigned(-), because javascript sucks sometimes.
if (num === 0 || num === 0n) num = 0;

return new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(
num,
);
return new Intl.NumberFormat(locale, { maximumFractionDigits }).format(num);
};

export const isValidPolkadotAddress = (address: string) => {
Expand Down
17 changes: 7 additions & 10 deletions pages/portfolio/[address].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,14 @@ import {
MarketPositionsSkeleton,
} from "components/portfolio/MarketPositions";
import PortfolioIdentity from "components/portfolio/PortfolioIdentity";
import { Loader } from "components/ui/Loader";
import SubTabsList from "components/ui/SubTabsList";
import PortfolioLayout from "layouts/PortfolioLayout";
import { NextPageWithLayout } from "layouts/types";
import { usePortfolioPositions } from "lib/hooks/queries/usePortfolioPositions";
import { useZtgPrice } from "lib/hooks/queries/useZtgPrice";
import { useQueryParamState } from "lib/hooks/useQueryParamState";
import { useCrossChainApis } from "lib/state/cross-chain";
import { useDelayQueue } from "lib/state/delay-queue";
import { isValidPolkadotAddress } from "lib/util";
import { assetsAreEqual } from "lib/util/assets-are-equal";
import { groupBy, range } from "lodash-es";
import { useRouter } from "next/router";
import NotFoundPage from "pages/404";
Expand Down Expand Up @@ -90,7 +87,7 @@ const Portfolio: NextPageWithLayout = () => {
return (
<div className="mt-8">
{address && <PortfolioIdentity address={address} />}
<div className="mb-[40px]">
<div className="mb-12">
<PortfolioBreakdown
{...(breakdown ?? {
loading: true,
Expand All @@ -116,14 +113,14 @@ const Portfolio: NextPageWithLayout = () => {
"Badges",
"History",
].map((title, index) => (
<Tab className="px-4" key={index}>
<Tab className="text-sm sm:text-xl" key={index}>
{({ selected }) => (
<div
className={
className={`${
selected
? "font-semibold text-black transition-all"
: "text-sky-600 transition-all"
}
} ${index === 0 ? "px-0 pr-4" : "px-4"}`}
>
{title}
</div>
Expand All @@ -134,10 +131,10 @@ const Portfolio: NextPageWithLayout = () => {
</div>

<Tab.Panels>
<Tab.Panel className="mt-[40px]">
<Tab.Panel className="mt-12">
{!marketPositionsByMarket || !ztgPrice ? (
range(0, 8).map((i) => (
<MarketPositionsSkeleton className="mb-14" key={i} />
<MarketPositionsSkeleton className="mb-8" key={i} />
))
) : Object.values(marketPositionsByMarket).length > 0 ? (
Object.values(marketPositionsByMarket).map(
Expand All @@ -164,7 +161,7 @@ const Portfolio: NextPageWithLayout = () => {
return (
<MarketPositions
key={market.marketId}
className="mb-14"
className="mb-8"
market={market}
usdZtgPrice={ztgPrice}
positions={marketPositions.filter((position) =>
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,8 @@ module.exports = {
"0px 126px 50px rgba(0, 0, 0, 0.01), 0px 71px 43px rgba(0, 0, 0, 0.05), 0px 32px 32px rgba(0, 0, 0, 0.09), 0px 8px 17px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);",
},
fontSize: {
xxs: "0.625rem",
"lg-2": ["1.375rem", "1.875rem"],
xxs: ["0.5625rem", "0.75rem"],
"2.5xl": "1.75rem",

// NEW
Expand Down

0 comments on commit c283ddf

Please sign in to comment.