From 295a9b3ad8c4e576d29b82e328b0d5c9f420f1c8 Mon Sep 17 00:00:00 2001 From: robhyrk Date: Thu, 2 Nov 2023 02:24:11 -0400 Subject: [PATCH 1/4] style: adjust title font size and address on mobile --- components/portfolio/PortfolioIdentity.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/portfolio/PortfolioIdentity.tsx b/components/portfolio/PortfolioIdentity.tsx index 56a4fb9d8..97dcd873a 100644 --- a/components/portfolio/PortfolioIdentity.tsx +++ b/components/portfolio/PortfolioIdentity.tsx @@ -37,10 +37,10 @@ const PortfolioIdentity = ({ address }: { address: string }) => { return ( <>
-
+
{address && }
-
+
{isOwned && !hasIdentity && (
@@ -52,7 +52,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => { on chain name
)} -
+
{name}{" "}
@@ -68,7 +68,10 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
)}
-
{address}
+
{address}
+
+ {shortenAddress(address, 12, 26)} +
From 218579e62f6b86dc35fc41831ee5098684f61f51 Mon Sep 17 00:00:00 2001 From: robhyrk Date: Thu, 2 Nov 2023 12:08:42 -0400 Subject: [PATCH 2/4] feat: add param for formatNumberLocalized to specify decimals places --- components/portfolio/Breakdown.tsx | 12 ++++++------ lib/util/index.ts | 5 ++--- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/components/portfolio/Breakdown.tsx b/components/portfolio/Breakdown.tsx index a323321d0..3aef0a441 100644 --- a/components/portfolio/Breakdown.tsx +++ b/components/portfolio/Breakdown.tsx @@ -113,13 +113,13 @@ export const BreakdownSlot = ({ }: BreakdownSlotProps) => { return ( <> -

{title}

-
-
- {formatNumberLocalized(value.div(ZTG).toNumber())} ZTG +

{title}

+
+
+ {formatNumberLocalized(value.div(ZTG).toNumber(), undefined, 0)} ZTG
-
+
$ {formatNumberLocalized( usdZtgPrice?.mul(value.div(ZTG)).toNumber() ?? 0, diff --git a/lib/util/index.ts b/lib/util/index.ts index ce2d44e37..7b68ac583 100644 --- a/lib/util/index.ts +++ b/lib/util/index.ts @@ -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) => { From 8580bd3d37191a86090d775cc6003078cd3b0cdd Mon Sep 17 00:00:00 2001 From: robhyrk Date: Thu, 2 Nov 2023 23:23:24 -0400 Subject: [PATCH 3/4] style: update portoflio page styles, refactor tailwind classes with default --- components/portfolio/Breakdown.tsx | 6 +-- components/portfolio/MarketPositionHeader.tsx | 2 +- components/portfolio/PortfolioIdentity.tsx | 22 ++++---- components/ui/Table.tsx | 51 ++++++++----------- pages/portfolio/[address].tsx | 14 ++--- tailwind.config.js | 2 +- 6 files changed, 44 insertions(+), 53 deletions(-) diff --git a/components/portfolio/Breakdown.tsx b/components/portfolio/Breakdown.tsx index 3aef0a441..0fb060dd2 100644 --- a/components/portfolio/Breakdown.tsx +++ b/components/portfolio/Breakdown.tsx @@ -115,11 +115,11 @@ export const BreakdownSlot = ({ <>

{title}

-
- {formatNumberLocalized(value.div(ZTG).toNumber(), undefined, 0)} ZTG +
+ {formatNumberLocalized(value.div(ZTG).toNumber())} ZTG
{ return ( -

+

{question}

); diff --git a/components/portfolio/PortfolioIdentity.tsx b/components/portfolio/PortfolioIdentity.tsx index 97dcd873a..2914b10c7 100644 --- a/components/portfolio/PortfolioIdentity.tsx +++ b/components/portfolio/PortfolioIdentity.tsx @@ -40,15 +40,15 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
{address && }
-
+
{isOwned && !hasIdentity && ( -
+
wallet name
)} {isOwned && hasIdentity && ( -
+
on chain name
)} @@ -68,28 +68,30 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
)}
-
{address}
+
+ {address} +
{shortenAddress(address, 12, 26)}
-
+
{identity?.twitter && ( - {identity.twitter} + {identity.twitter} )} {identity?.discord && ( -
+
- {identity.discord} + {identity.discord}
)} { leaveTo="opacity-0" show={isProxying} > -
+
Your are acting proxy for this account.
diff --git a/components/ui/Table.tsx b/components/ui/Table.tsx index d6bd47db5..38178f0e9 100644 --- a/components/ui/Table.tsx +++ b/components/ui/Table.tsx @@ -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 = ( @@ -149,7 +147,7 @@ const Cell = ({ case "text": return ( @@ -194,7 +192,7 @@ const Cell = ({ case "paragraph": return ( @@ -209,10 +207,10 @@ const Cell = ({ ) { return ( -
+
{formatNumberLocalized(value.value)}
-
+
$ {( value.usdValue ?? (ztgPrice?.toNumber() ?? 0) * value.value @@ -228,7 +226,7 @@ const Cell = ({
-
+
{typeof value === "string" ? value : ""}
@@ -239,10 +237,7 @@ const Cell = ({ return (
-
+
{value.label}
@@ -255,11 +250,11 @@ const Cell = ({
- + {value.label}
@@ -268,11 +263,7 @@ const Cell = ({ } case "percentage": return ( - + <>{value}% ); @@ -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}`; @@ -414,7 +405,7 @@ const Table = ({ } > - + {renderColumns.map((column, index) => ( ) : ( <> @@ -486,7 +477,7 @@ const Table = ({ : "" } ${rowColorClass} - ${onRowClick ? "cursor-pointer" : ""} mx-ztg-5`} + ${onRowClick ? "cursor-pointer" : ""} mx-1`} onClick={() => handleRowClick(row)} > {row.cells @@ -516,15 +507,13 @@ const Table = ({
{loadingMore && range(0, loadingNumber).map((index) => ( - + ))}
{!loadingMore && rows.length === 0 ? (
-
- {noDataMessage} -
+
{noDataMessage}
) : ( <> @@ -534,9 +523,9 @@ const Table = ({ {onPaginate ? : <>} {onLoadMore && !hideLoadMore && ( -
+
diff --git a/pages/portfolio/[address].tsx b/pages/portfolio/[address].tsx index d2f552152..5a89358ae 100644 --- a/pages/portfolio/[address].tsx +++ b/pages/portfolio/[address].tsx @@ -90,7 +90,7 @@ const Portfolio: NextPageWithLayout = () => { return (
{address && } -
+
{ "Badges", "History", ].map((title, index) => ( - + {({ selected }) => (
{title}
@@ -134,10 +134,10 @@ const Portfolio: NextPageWithLayout = () => {
- + {!marketPositionsByMarket || !ztgPrice ? ( range(0, 8).map((i) => ( - + )) ) : Object.values(marketPositionsByMarket).length > 0 ? ( Object.values(marketPositionsByMarket).map( @@ -164,7 +164,7 @@ const Portfolio: NextPageWithLayout = () => { return ( diff --git a/tailwind.config.js b/tailwind.config.js index 4d2deacb2..56567fc4c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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 From 18e5d94692fe55429ad4ff7ccac3ffbd55cc365f Mon Sep 17 00:00:00 2001 From: robhyrk Date: Sun, 5 Nov 2023 17:14:06 -0500 Subject: [PATCH 4/4] chore: remove unused coode --- pages/portfolio/[address].tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/pages/portfolio/[address].tsx b/pages/portfolio/[address].tsx index 5a89358ae..4e5a148f4 100644 --- a/pages/portfolio/[address].tsx +++ b/pages/portfolio/[address].tsx @@ -12,7 +12,6 @@ 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"; @@ -20,9 +19,7 @@ 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";