Skip to content

Commit

Permalink
Merge branch 'dev-fees' into fees
Browse files Browse the repository at this point in the history
  • Loading branch information
@manishiwa
manishiwa committed Apr 24, 2024
2 parents 862cf0b + 05ddf6b commit c28d3a8
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 56 deletions.
123 changes: 71 additions & 52 deletions app/(fees)/fees/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -936,7 +936,9 @@ export default function FeesPage() {
const getNumFractionDigits = useCallback(
(x) => {
if (showUsd) {
// if showCents is true, show 2 decimal places
if (showCents) return 1;
// if showCents is false, show 3 decimal places if x < 1, otherwise show 2 decimal places
return x < 1 ? 3 : 2;
}

Expand Down Expand Up @@ -977,13 +979,27 @@ export default function FeesPage() {
]
: null;

const usdClasses = "justify-center w-[65px] -mr-2.5";
const usdClasses = "justify-center w-[60px] md:w-[65px] -mr-1.5";
const gweiClasses = "justify-end w-[75px] md:w-[85px] -mr-1.5";
const centsClasses = "justify-end w-[75px] md:w-[85px] -mr-1.5";
const centsClasses = "justify-end w-[65px] md:w-[75px] -mr-1.5";

let classes = usdClasses;
if (showGwei && !showUsd) classes = gweiClasses;
if (showCents && showUsd) classes = centsClasses;
// if (showGwei && !showUsd) classes = gweiClasses;
// if (showCents && showUsd) classes = centsClasses;

if (showUsd) {
if (showCents) {
classes = centsClasses;
} else {
classes = usdClasses;
}
} else {
if (showGwei) {
classes = gweiClasses;
} else {
classes = centsClasses;
}
}

// return N/A if value is null
if (value === null)
Expand Down Expand Up @@ -1025,8 +1041,8 @@ export default function FeesPage() {
<div className="flex items-center">
{Intl.NumberFormat(undefined, {
notation: "compact",
maximumFractionDigits: showCents ? fractionDigits : 3,
minimumFractionDigits: showCents ? fractionDigits : 3,
maximumFractionDigits: fractionDigits,
minimumFractionDigits: fractionDigits,
}).format(multipliedValue)}
</div>
{showUsd && showCents && (
Expand Down Expand Up @@ -1061,8 +1077,8 @@ export default function FeesPage() {
<div>
{Intl.NumberFormat(undefined, {
notation: "compact",
maximumFractionDigits: showCents ? fractionDigits : 3,
minimumFractionDigits: showCents ? fractionDigits : 3,
maximumFractionDigits: fractionDigits,
minimumFractionDigits: fractionDigits,
}).format(multipliedValue)}
</div>
{showUsd && showCents && (
Expand Down Expand Up @@ -1295,7 +1311,7 @@ export default function FeesPage() {
>
<div className="pl-[10px] flex-1 flex">
<div
className={`flex items-center gap-x-[5px] hover:cursor-pointer ${
className={`flex items-center gap-x-[5px] ${
isMobile ? "w-[23%]" : "w-[27%]"
}`}
>
Expand All @@ -1309,7 +1325,7 @@ export default function FeesPage() {
/>
</div>
<div
className="flex items-center gap-x-0.5"
className="flex items-center gap-x-0.5 cursor-pointer"
onClick={() => {
if (selectedQualitative === "chain") {
setSortOrder(!sortOrder);
Expand All @@ -1335,7 +1351,7 @@ export default function FeesPage() {
/>{" "}
</div>
<div
className="bg-[#344240] text-[8px] flex rounded-full font-normal items-center px-[5px] py-[4px] gap-x-[2px] hover:cursor-pointer whitespace-nowrap"
className="bg-[#344240] text-[8px] flex rounded-full font-normal items-center px-[5px] py-[4px] gap-x-[2px] cursor-pointer whitespace-nowrap"
onClick={
!availabilityFilter
? () => setAvailabilityFilter(!availabilityFilter)
Expand All @@ -1358,11 +1374,12 @@ export default function FeesPage() {
</div>
</div>
<div
className={`relative flex items-center justify-end cursor-pointer ${
className={`flex items-center justify-end ${
isMobile ? "w-[15%]" : "w-[15%]"
}`}
>
<div
className="flex items-center gap-x-0.5 cursor-pointer -mr-[12px] z-10"
onClick={() => {
if (selectedQuantitative === "txcosts_median") {
if (selectedQualitative) {
Expand All @@ -1376,31 +1393,32 @@ export default function FeesPage() {
}
}}
>
Median Fee
<div>Median Fee</div>
<Icon
icon={
!selectedQualitative &&
selectedQuantitative === "txcosts_median"
? sortOrder
? "formkit:arrowdown"
: "formkit:arrowup"
: "formkit:arrowdown"
}
className={`dark:text-white text-black w-[10px] h-[10px] ${
!selectedQualitative &&
selectedQuantitative === "txcosts_median"
? "opacity-100"
: "opacity-20"
}`}
/>
</div>
<Icon
icon={
!selectedQualitative &&
selectedQuantitative === "txcosts_median"
? sortOrder
? "formkit:arrowdown"
: "formkit:arrowup"
: "formkit:arrowdown"
}
className={`absolute -right-3 top-1 dark:text-white text-black w-[10px] h-[10px] ${
!selectedQualitative &&
selectedQuantitative === "txcosts_median"
? "opacity-100"
: "opacity-20"
}`}
/>{" "}
</div>
<div
className={`relative flex items-center justify-end hover:cursor-pointer ${
className={`flex items-center justify-end ${
isMobile ? "w-[16%]" : "w-[16%]"
}`}
>
<div
className="flex items-center gap-x-0.5 cursor-pointer -mr-[12px] z-10"
onClick={() => {
if (selectedQuantitative === "txcosts_native_median") {
if (selectedQualitative) {
Expand All @@ -1414,31 +1432,32 @@ export default function FeesPage() {
}
}}
>
Transfer ETH
<div>Transfer ETH</div>
<Icon
icon={
!selectedQualitative &&
selectedQuantitative === "txcosts_native_median"
? sortOrder
? "formkit:arrowdown"
: "formkit:arrowup"
: "formkit:arrowdown"
}
className={`dark:text-white text-black w-[10px] h-[10px] ${
!selectedQualitative &&
selectedQuantitative === "txcosts_native_median"
? "opacity-100"
: "opacity-20"
}`}
/>
</div>
<Icon
icon={
!selectedQualitative &&
selectedQuantitative === "txcosts_native_median"
? sortOrder
? "formkit:arrowdown"
: "formkit:arrowup"
: "formkit:arrowdown"
}
className={`absolute -right-3 top-1 dark:text-white text-black w-[10px] h-[10px] ${
!selectedQualitative &&
selectedQuantitative === "txcosts_native_median"
? "opacity-100"
: "opacity-20"
}`}
/>{" "}
</div>
<div
className={`pr-[20px] relative flex items-center justify-end gap-x-0.5 hover:cursor-pointer ${
className={`pr-[20px] flex items-center justify-end ${
isMobile ? "w-[16.5%]" : "w-[19.5%]"
}`}
>
<div
className="flex items-center gap-x-0.5 cursor-pointer -mr-[12px] z-10"
onClick={() => {
if (selectedQuantitative === "txcosts_swap") {
if (selectedQualitative) {
Expand All @@ -1452,8 +1471,7 @@ export default function FeesPage() {
}
}}
>
Swap Token{" "}
</div>
<div>Swap Token</div>
<Icon
icon={
!selectedQualitative &&
Expand All @@ -1463,13 +1481,14 @@ export default function FeesPage() {
: "formkit:arrowup"
: "formkit:arrowdown"
}
className={`absolute right-[8px] top-1 dark:text-white text-black w-[10px] h-[10px] ${
className={`dark:text-white text-black w-[10px] h-[10px] ${
!selectedQualitative &&
selectedQuantitative === "txcosts_swap"
? "opacity-100"
: "opacity-20"
}`}
/>{" "}
/>
</div>
</div>
<div
className={`relative pl-[14px] flex flex-col justify-end space-x-[1px] font-normal ${
Expand Down
18 changes: 14 additions & 4 deletions components/Embed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import Image from "next/image";
import { BASE_URLS } from "@/lib/helpers";
import { useMediaQuery } from "usehooks-ts";

const BASE_URL = BASE_URLS[process.env.NEXT_PUBLIC_VERCEL_ENV ?? "production"];
const BASE_URL = BASE_URLS[
process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL?.includes("dev-fees")
? "preview"
: "production"
];

const pathToEmbed = (pathname: string) => {
if (pathname === "/") return `${BASE_URL}/embed/user-base`;
Expand All @@ -15,8 +19,14 @@ const pathToEmbed = (pathname: string) => {

const showEmbed = (pathname: string | null) => {
if (!pathname) return false;
if (pathname === "/") return true;
if (pathname.includes("fundamentals/")) return true;

if(BASE_URL.includes("fees.")){
if (pathname === "/") return false;
}else{
if (pathname === "/") return true;
if (pathname.includes("fundamentals/")) return true;
}

return false;
};

Expand All @@ -36,7 +46,7 @@ export default function Embed() {
//Initialize URL
useEffect(() => {
setcurrentURL(
BASE_URLS[process.env.NEXT_PUBLIC_VERCEL_ENV ?? "production"] + pathname,
BASE_URL + pathname,
);
}, [pathname]);

Expand Down

0 comments on commit c28d3a8

Please sign in to comment.