From 606af98aeba844bc554da33b124a499bd0377fcf Mon Sep 17 00:00:00 2001 From: jinoosss <112360739+jinoosss@users.noreply.github.com> Date: Wed, 29 May 2024 18:11:01 +0900 Subject: [PATCH] fix: Fix a ui errors (#367) --- packages/web/public/cosmos.svg | 2 +- .../common/icons/IconArrowRight.tsx | 4 +- .../common/icons/IconBronzeMedal.tsx | 68 ++-- .../components/common/icons/IconGoldMedal.tsx | 68 ++-- .../components/common/icons/IconMeLogo.tsx | 4 +- .../common/icons/IconProgressBroadcast.tsx | 4 +- .../common/icons/IconProgressLoader.tsx | 4 +- .../common/icons/IconProgressSuccess.tsx | 4 +- .../src/components/common/icons/IconPulse.tsx | 6 +- .../common/icons/IconSilverMedal.tsx | 68 ++-- .../common/icons/IconSwapCircle.tsx | 4 +- .../components/common/icons/IconVector.tsx | 6 +- .../common/line-graph/LineGraph.tsx | 299 +++++++++++------- .../HighestAprsCardList.styles.ts | 18 +- .../HighestAprsCardList.tsx | 7 +- .../RecentlyAddedCardList.styles.ts | 19 +- .../RecentlyAddedCardList.tsx | 7 +- .../TrendingCardList.styles.ts | 18 +- .../trending-card-list/TrendingCardList.tsx | 9 +- .../leaderboard/common/common.styles.ts | 2 +- .../LeaderboardSubheader.styles.ts | 2 +- .../LeaderboardTableHeader.styles.ts | 4 +- .../LeaderboardTableRow.styles.ts | 4 +- .../MobileLeaderboardTableRow.styles.ts | 4 +- .../AssetListContainer.tsx | 2 +- .../web/src/hooks/swap/use-swap-handler.tsx | 1 - 26 files changed, 345 insertions(+), 293 deletions(-) diff --git a/packages/web/public/cosmos.svg b/packages/web/public/cosmos.svg index e5bf29e21..b0197d7fb 100644 --- a/packages/web/public/cosmos.svg +++ b/packages/web/public/cosmos.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/web/src/components/common/icons/IconArrowRight.tsx b/packages/web/src/components/common/icons/IconArrowRight.tsx index c6f98990b..0bf2945c9 100644 --- a/packages/web/src/components/common/icons/IconArrowRight.tsx +++ b/packages/web/src/components/common/icons/IconArrowRight.tsx @@ -7,8 +7,8 @@ const IconArrowRight = ({ - - + + diff --git a/packages/web/src/components/common/icons/IconBronzeMedal.tsx b/packages/web/src/components/common/icons/IconBronzeMedal.tsx index 78d2a080c..53639f28e 100644 --- a/packages/web/src/components/common/icons/IconBronzeMedal.tsx +++ b/packages/web/src/components/common/icons/IconBronzeMedal.tsx @@ -12,38 +12,38 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#0355B6" /> @@ -52,8 +52,8 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -62,20 +62,20 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -136,20 +136,20 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#DCA16A" /> @@ -158,20 +158,20 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#F7BA82" /> @@ -180,8 +180,8 @@ const IconBronzeMedal = ({ className }: { className?: string }) => ( fill="#FFD5AE" /> diff --git a/packages/web/src/components/common/icons/IconGoldMedal.tsx b/packages/web/src/components/common/icons/IconGoldMedal.tsx index 5482cf105..07fb2389f 100644 --- a/packages/web/src/components/common/icons/IconGoldMedal.tsx +++ b/packages/web/src/components/common/icons/IconGoldMedal.tsx @@ -12,38 +12,38 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#0355B6" /> @@ -52,8 +52,8 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -62,20 +62,20 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -136,20 +136,20 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#FFBB0D" /> @@ -158,20 +158,20 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#FFDD28" /> @@ -180,8 +180,8 @@ const IconGoldMedal = ({ className }: { className?: string }) => ( fill="#FFEF9C" /> diff --git a/packages/web/src/components/common/icons/IconMeLogo.tsx b/packages/web/src/components/common/icons/IconMeLogo.tsx index 09afba26a..4433ff01e 100644 --- a/packages/web/src/components/common/icons/IconMeLogo.tsx +++ b/packages/web/src/components/common/icons/IconMeLogo.tsx @@ -19,7 +19,7 @@ const IconMeLogo = ({ className }: { className?: string }) => { height="19" rx="3.5" fill="#E0E8F4" - fill-opacity="0.4" + fillOpacity="0.4" /> { height="19" rx="3.5" fill="#141A29" - fill-opacity="0.5" + fillOpacity="0.5" /> ( xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/web/src/components/common/icons/IconProgressLoader.tsx b/packages/web/src/components/common/icons/IconProgressLoader.tsx index b1638e8c7..29dadd8b0 100644 --- a/packages/web/src/components/common/icons/IconProgressLoader.tsx +++ b/packages/web/src/components/common/icons/IconProgressLoader.tsx @@ -13,7 +13,7 @@ const IconProgressLoader = ({ className = "" }: { className?: string }) => ( @@ -26,7 +26,7 @@ const IconProgressLoader = ({ className = "" }: { className?: string }) => ( gradientTransform="translate(8 8.1) rotate(-90) scale(8.1)" > - + diff --git a/packages/web/src/components/common/icons/IconProgressSuccess.tsx b/packages/web/src/components/common/icons/IconProgressSuccess.tsx index e570f4647..2c0f206f6 100644 --- a/packages/web/src/components/common/icons/IconProgressSuccess.tsx +++ b/packages/web/src/components/common/icons/IconProgressSuccess.tsx @@ -8,8 +8,8 @@ const IconProgressSuccess = ({ className = "" }: { className?: string }) => ( xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/web/src/components/common/icons/IconPulse.tsx b/packages/web/src/components/common/icons/IconPulse.tsx index 9a172ba8e..488f7d4b8 100644 --- a/packages/web/src/components/common/icons/IconPulse.tsx +++ b/packages/web/src/components/common/icons/IconPulse.tsx @@ -10,9 +10,9 @@ const IconPulse = ({ className }: { className?: string }) => ( ); diff --git a/packages/web/src/components/common/icons/IconSilverMedal.tsx b/packages/web/src/components/common/icons/IconSilverMedal.tsx index 73e041c55..c5d8b3907 100644 --- a/packages/web/src/components/common/icons/IconSilverMedal.tsx +++ b/packages/web/src/components/common/icons/IconSilverMedal.tsx @@ -12,38 +12,38 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#0355B6" /> @@ -52,8 +52,8 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -62,20 +62,20 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#086FE9" /> @@ -136,20 +136,20 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#BCCCD2" /> @@ -158,20 +158,20 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#C7D4D8" /> @@ -180,8 +180,8 @@ const IconSilverMedal = ({ className }: { className?: string }) => ( fill="#D9EAEF" /> diff --git a/packages/web/src/components/common/icons/IconSwapCircle.tsx b/packages/web/src/components/common/icons/IconSwapCircle.tsx index a4efee54f..815f77517 100644 --- a/packages/web/src/components/common/icons/IconSwapCircle.tsx +++ b/packages/web/src/components/common/icons/IconSwapCircle.tsx @@ -15,8 +15,8 @@ const IconSwapCircle = ({ > diff --git a/packages/web/src/components/common/icons/IconVector.tsx b/packages/web/src/components/common/icons/IconVector.tsx index 685c284b8..d6f1d44fb 100644 --- a/packages/web/src/components/common/icons/IconVector.tsx +++ b/packages/web/src/components/common/icons/IconVector.tsx @@ -10,9 +10,9 @@ const IconVector = ({ className }: { className?: string }) => ( ); diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index 433f67f14..14d0f7adb 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -3,10 +3,7 @@ import React, { useCallback, useEffect, useState, useMemo } from "react"; import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles"; import FloatingTooltip from "../tooltip/FloatingTooltip"; import { Global, css, useTheme } from "@emotion/react"; -import { - subscriptFormat, - toPriceFormat, -} from "@utils/number-utils"; +import { subscriptFormat, toPriceFormat } from "@utils/number-utils"; import { getLocalizeTime } from "@utils/chart"; import { convertToKMB } from "@utils/stake-position-utils"; @@ -78,7 +75,7 @@ export interface LineGraphProps { renderBottom?: (baseLineNumberWidth: number) => React.ReactElement; isShowTooltip?: boolean; onMouseMove?: (LineGraphData?: LineGraphData) => void; - onMouseOut?: ((active: boolean) => void); + onMouseOut?: (active: boolean) => void; baseLineMap?: [boolean, boolean, boolean, boolean]; baseLineLabelsPosition?: "left" | "right"; baseLineLabelsTransform?: (value: string) => string; @@ -191,7 +188,9 @@ const LineGraph: React.FC = ({ }, [activated]); const isSameData = useMemo(() => { - return datas.length > 0 && datas.every(item => item.value === datas[0].value); + return ( + datas.length > 0 && datas.every(item => item.value === datas[0].value) + ); }, [datas]); const updatePoints = ( @@ -213,16 +212,17 @@ const LineGraph: React.FC = ({ const minTime = Math.min(...times); const maxTime = Math.max(...times); - const minValueBigNumber = BigNumber(minValue); const maxValueBigNumber = BigNumber(maxValue); let baseLineNumberWidthComputation = 0; const minMaxGap = (() => { - if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) return maxValueBigNumber.multipliedBy(gapRatio); + if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) + return maxValueBigNumber.multipliedBy(gapRatio); - if (minValueBigNumber.isLessThan(0) || hasOnlyOnePoint) return maxValueBigNumber; + if (minValueBigNumber.isLessThan(0) || hasOnlyOnePoint) + return maxValueBigNumber; return maxValueBigNumber.minus(minValueBigNumber); })(); @@ -232,38 +232,52 @@ const LineGraph: React.FC = ({ .map((value, index) => { // Gap from lowest value or highest value to baseline const additionalGap = (() => { - if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) return minMaxGap.dividedBy(2); + if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) + return minMaxGap.dividedBy(2); return minMaxGap.multipliedBy(gapRatio / 2); })(); // Gap between bottom and top base line const baseLineGap = (() => { - if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) return minMaxGap; + if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) + return minMaxGap; - if (minValueBigNumber.isLessThanOrEqualTo(0)) return maxValueBigNumber; + if (minValueBigNumber.isLessThanOrEqualTo(0)) + return maxValueBigNumber; return minMaxGap.multipliedBy(1 + gapRatio); })(); // Lowest baseline value const tempBottomBaseLineValue = minValueBigNumber.minus(additionalGap); - const bottomBaseLineValue = tempBottomBaseLineValue.isLessThanOrEqualTo(0) ? BigNumber(0) : tempBottomBaseLineValue; - - const currentBaseLineValue = bottomBaseLineValue.plus(baseLineGap.multipliedBy(index / (baseLineCount - 1))); + const bottomBaseLineValue = tempBottomBaseLineValue.isLessThanOrEqualTo( + 0, + ) + ? BigNumber(0) + : tempBottomBaseLineValue; + + const currentBaseLineValue = bottomBaseLineValue.plus( + baseLineGap.multipliedBy(index / (baseLineCount - 1)), + ); if (currentBaseLineValue.isLessThan(-1)) { - return "-" + convertToKMB(currentBaseLineValue.absoluteValue().toFixed(), { - maximumFractionDigits: 2, - minimumFractionDigits: 2, - }); + return ( + "-" + + convertToKMB(currentBaseLineValue.absoluteValue().toFixed(), { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + }) + ); } - if (currentBaseLineValue.isGreaterThan(-1) && currentBaseLineValue.isLessThan(0)) { + if ( + currentBaseLineValue.isGreaterThan(-1) && + currentBaseLineValue.isLessThan(0) + ) { return "-" + subscriptFormat(currentBaseLineValue.abs().toFixed()); } - if (currentBaseLineValue.isLessThan(1)) { return subscriptFormat(currentBaseLineValue.toString(), { significantDigits: 3, @@ -271,7 +285,10 @@ const LineGraph: React.FC = ({ }); } - if (currentBaseLineValue.isGreaterThanOrEqualTo(1) && currentBaseLineValue.isLessThan(100)) { + if ( + currentBaseLineValue.isGreaterThanOrEqualTo(1) && + currentBaseLineValue.isLessThan(100) + ) { return convertToKMB(currentBaseLineValue.toString(), { maximumFractionDigits: 2, minimumFractionDigits: 2, @@ -280,7 +297,8 @@ const LineGraph: React.FC = ({ const result = Math.round(currentBaseLineValue.toNumber()).toString(); - if (currentBaseLineValue.isLessThan(1)) return subscriptFormat(currentBaseLineValue.toFixed()); + if (currentBaseLineValue.isLessThan(1)) + return subscriptFormat(currentBaseLineValue.toFixed()); return convertToKMB(result, { maximumFractionDigits: 2, @@ -301,7 +319,9 @@ const LineGraph: React.FC = ({ } return prev; }); - const transformedLongestNumber = baseLineLabelsTransform ? baseLineLabelsTransform(longestNumber) : longestNumber; + const transformedLongestNumber = baseLineLabelsTransform + ? baseLineLabelsTransform(longestNumber) + : longestNumber; return (transformedLongestNumber.length / maxLength) * 52; })(); @@ -328,19 +348,28 @@ const LineGraph: React.FC = ({ })(); const result = (() => { + if (minMaxGap.isZero()) { + return 0; + } + if (minValue === 0) { - return topFrontierHeight + (graphHeight * (0.05 / 1.05)) - ((value - minValue) * graphHeight) / minMaxGap.toNumber(); + return ( + topFrontierHeight + + graphHeight * (0.05 / 1.05) - + ((value - minValue) * graphHeight) / minMaxGap.toNumber() + ); } if (maxValue - minValue === 0) { return ( topFrontierHeight - - ((value * 0.05) * graphHeight) / minMaxGap.toNumber() + (value * 0.05 * graphHeight) / minMaxGap.toNumber() ); } return ( - topFrontierHeight - ((value - minValue) * graphHeight) / minMaxGap.toNumber() + topFrontierHeight - + ((value - minValue) * graphHeight) / minMaxGap.toNumber() ); })(); @@ -348,8 +377,12 @@ const LineGraph: React.FC = ({ }; const optimizeTime = function (time: number, width: number) { + if (maxTime === minTime) { + return 0; + } + return new BigNumber(time - minTime) - .multipliedBy((width) - baseLineNumberWidthComputation) + .multipliedBy(width - baseLineNumberWidthComputation) .dividedBy(maxTime - minTime) .toNumber(); }; @@ -357,10 +390,12 @@ const LineGraph: React.FC = ({ if (hasOnlyOnePoint) { const onlySingleData = mappedDatas[0]; - setPoints([{ - x: (width + baseLineNumberWidthComputation) / 2, - y: optimizeValue(onlySingleData.value, height), - }]); + setPoints([ + { + x: (width + baseLineNumberWidthComputation) / 2, + y: optimizeValue(onlySingleData.value, height), + }, + ]); return; } @@ -491,13 +526,11 @@ const LineGraph: React.FC = ({ if ( !points || points.length === 0 || - points.some( - point => - point === undefined || point.x === undefined || point.y === undefined, - ) + points.some(point => point === undefined) ) { return undefined; // Or render some fallback UI } + // Start at the first point of the line chart let path = `M ${points[0].x},${points[0].y}`; @@ -544,7 +577,7 @@ const LineGraph: React.FC = ({ isHiddenArrow position={locationTooltipPosition} content={ - (hasTooltipContent && isShowTooltip && currentPointIndex > -1) ? ( + hasTooltipContent && isShowTooltip && currentPointIndex > -1 ? (
@@ -554,14 +587,16 @@ const LineGraph: React.FC = ({ {currentPointIndex === datas.length - 1 ? parseTimeTVL(getLocalizeTime(new Date().toString())) - .time + .time : parseTimeTVL(datas[currentPointIndex]?.time)?.time || - "0"} + "0"} )}
- {`$${toPriceFormat(BigNumber(datas[currentPointIndex]?.value).toString())}`} + {`$${toPriceFormat( + BigNumber(datas[currentPointIndex]?.value).toString(), + )}`}
) : null @@ -588,56 +623,85 @@ const LineGraph: React.FC = ({ const showBaseLine = baseLineMap[index]; const currentHeight = height - (height * index) / (baseLineCount - 1); - const baseWidth = width - ((showBaseLineLabels && baseLineLabelsPosition === "left") ? 0 : baseLineNumberWidth); + const baseWidth = + width - + (showBaseLineLabels && baseLineLabelsPosition === "left" + ? 0 + : baseLineNumberWidth); return ( - {showBaseLine && } - {showBaseLine && showBaseLineLabels && - {baseLineLabelsTransform ? baseLineLabelsTransform(value) : value} - } + {showBaseLine && ( + + )} + {showBaseLine && showBaseLineLabels && ( + + {baseLineLabelsTransform + ? baseLineLabelsTransform(value) + : value} + + )} ); })} )} - {hasOnlyOnePoint && } - {!isSameData && } + {hasOnlyOnePoint && ( + + )} + {!isSameData && ( + + )} - { - point && + {point && points.map((point, index) => ( = ({ r={1} stroke={color} /> - )) - } - + ))} + { - { - firstPointColor && ( - - ) - } + {firstPointColor && ( + + )} {/* { centerLineColor && ( = ({ /> ) } */} - { - isFocus() && currentPoint && ( - - ) - } - { - isFocus() && currentPoint && ( - - ) - } - + {isFocus() && currentPoint && ( + + )} + {isFocus() && currentPoint && ( + + )} + } - - + + {renderBottom && renderBottom(baseLineNumberWidth)} - + ); }; diff --git a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts index 8bb122489..7f7487559 100644 --- a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts +++ b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts @@ -8,23 +8,21 @@ interface SkeletonStyleProps { tdWidth?: CSSProperties["width"]; } -interface Props { - loading: boolean; -} -export const HighestAprsCardListwrapper = styled.div` +export const HighestAprsCardListWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "center")} width: 100%; background-color: ${({ theme }) => theme.color.background06}; border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; - padding: ${({ loading }) => { - return loading ? "15px 0px 15px" : "15px 0px 11px"; - }}; - gap: ${({ loading }) => { - return loading ? "8px" : "12px"; - }}; + padding: 15px 0px 11px; + gap: 12px; + + &.loading { + padding: 15px 0px 15px; + gap: 8px; + } ${media.mobile} { padding: 15px 0px; diff --git a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx index 92bb4439c..0b2b17659 100644 --- a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx +++ b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx @@ -1,13 +1,14 @@ import React, { useMemo } from "react"; import CardList from "@components/home/card-list/CardList"; import { - HighestAprsCardListwrapper, + HighestAprsCardListWrapper, SkeletonItem, } from "./HighestAprsCardList.styles"; import IconDiamond from "@components/common/icons/IconDiamond"; import { DEVICE_TYPE } from "@styles/media"; import { CardListPoolInfo } from "@models/common/card-list-item-info"; import { pulseSkeletonStyle } from "@constants/skeleton.constant"; +import { cx } from "@emotion/css"; interface HighestAprsCardListProps { list: Array; @@ -26,7 +27,7 @@ const HighestAprsCardList: React.FC = ({ return device !== DEVICE_TYPE.MOBILE; }, [device]); return visible ? ( - + {loading ? ( @@ -53,7 +54,7 @@ const HighestAprsCardList: React.FC = ({ ) : ( )} - + ) : null; }; diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts index b5941be12..2782a363b 100644 --- a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts +++ b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts @@ -7,23 +7,20 @@ interface SkeletonStyleProps { tdWidth?: CSSProperties["width"]; } -interface Props { - loading: boolean; -} - -export const RecentlyAddedCardListwrapper = styled.div` +export const RecentlyAddedCardListWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "center")} width: 100%; background-color: ${({ theme }) => theme.color.background06}; border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; - padding: ${({ loading }) => { - return loading ? "15px 0px 15px" : "15px 0px 11px"; - }}; - gap: ${({ loading }) => { - return loading ? "8px" : "12px"; - }}; + padding: 15px 0px 11px; + gap: 12px; + + &.loading { + padding: 15px 0px 15px; + gap: 8px; + } ${media.mobile} { padding: 15px 0px; diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx index dc2b862fe..8ae1b0636 100644 --- a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx +++ b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from "react"; import CardList from "@components/home/card-list/CardList"; import { - RecentlyAddedCardListwrapper, + RecentlyAddedCardListWrapper, SkeletonItem, } from "./RecentlyAddedCardList.styles"; import IconPieChart from "@components/common/icons/IconPieChart"; @@ -10,6 +10,7 @@ import { CardListKeyStats } from "@models/common/card-list-item-info"; import { pulseSkeletonStyle } from "@constants/skeleton.constant"; import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight"; import Link from "next/link"; +import { cx } from "@emotion/css"; interface RecentlyAddedCardListProps { list: Array; @@ -28,7 +29,7 @@ const RecentlyAddedCardList: React.FC = ({ }, [device]); return visible ? ( - + {loading ? ( @@ -59,7 +60,7 @@ const RecentlyAddedCardList: React.FC = ({ ) : ( {}} /> )} - + ) : null; }; diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts index 20712058c..397dfc596 100644 --- a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts +++ b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts @@ -6,23 +6,21 @@ import { CSSProperties } from "react"; interface SkeletonStyleProps { tdWidth?: CSSProperties["width"]; } -interface Props { - loading: boolean; -} -export const TrendingCardListwrapper = styled.div` +export const TrendingCardListWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "flex-start")} width: 100%; background-color: ${({ theme }) => theme.color.background06}; border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; - padding: ${({ loading }) => { - return loading ? "15px 0px 15px" : "15px 0px 11px"; - }}; - gap: ${({ loading }) => { - return loading ? "8px" : "12px"; - }}; + padding: 15px 0px 11px; + gap: 12px; + + &.loading { + padding: 15px 0px 15px; + gap: 8px; + } ${media.mobile} { padding: 15px 0px; diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx b/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx index 52e8e05d9..794351827 100644 --- a/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx +++ b/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx @@ -2,12 +2,13 @@ import React, { useMemo } from "react"; import CardList from "@components/home/card-list/CardList"; import { SkeletonItem, - TrendingCardListwrapper, + TrendingCardListWrapper, } from "./TrendingCardList.styles"; import IconFlame from "@components/common/icons/IconFlame"; import { DEVICE_TYPE } from "@styles/media"; import { CardListTokenInfo } from "@models/common/card-list-item-info"; import { pulseSkeletonStyle } from "@constants/skeleton.constant"; +import { cx } from "@emotion/css"; interface TrendingCardListProps { list: Array; device: DEVICE_TYPE; @@ -26,7 +27,7 @@ const TrendingCardList: React.FC = ({ }, [device]); return visible ? ( - + {loading ? ( @@ -54,8 +55,8 @@ const TrendingCardList: React.FC = ({ ) : ( )} - - ) : null; + + ) : ; }; export default TrendingCardList; diff --git a/packages/web/src/components/leaderboard/common/common.styles.ts b/packages/web/src/components/leaderboard/common/common.styles.ts index 3a8fb2453..16ee7f19b 100644 --- a/packages/web/src/components/leaderboard/common/common.styles.ts +++ b/packages/web/src/components/leaderboard/common/common.styles.ts @@ -4,7 +4,7 @@ import { media } from "@styles/media"; import mixins from "@styles/mixins"; import { ThemeColorType } from "@styles/ThemeTypes"; -export const FontSize16 = styled.p` +export const FontSize16 = styled.div` font-size: 16px; font-weight: 400; line-height: 20.8px; diff --git a/packages/web/src/components/leaderboard/leaderboard-subheader/LeaderboardSubheader.styles.ts b/packages/web/src/components/leaderboard/leaderboard-subheader/LeaderboardSubheader.styles.ts index 1d8f89b4c..7223b4388 100644 --- a/packages/web/src/components/leaderboard/leaderboard-subheader/LeaderboardSubheader.styles.ts +++ b/packages/web/src/components/leaderboard/leaderboard-subheader/LeaderboardSubheader.styles.ts @@ -14,7 +14,7 @@ export const Container = styled.div` } `; -export const TitleWrapper = styled.p` +export const TitleWrapper = styled.div` width: 597px; @media screen and (max-width: 597px) { diff --git a/packages/web/src/components/leaderboard/leaderboard-table-header/LeaderboardTableHeader.styles.ts b/packages/web/src/components/leaderboard/leaderboard-table-header/LeaderboardTableHeader.styles.ts index b3f863b78..7a12804d5 100644 --- a/packages/web/src/components/leaderboard/leaderboard-table-header/LeaderboardTableHeader.styles.ts +++ b/packages/web/src/components/leaderboard/leaderboard-table-header/LeaderboardTableHeader.styles.ts @@ -24,7 +24,7 @@ export const TableHeader = styled.div<{ tdWidth: number }>` ${mixins.flexbox("row", "center", "flex-start")}; - &:first-child { + &:first-of-type { justify-content: center; } @@ -36,7 +36,7 @@ export const TableHeader = styled.div<{ tdWidth: number }>` ${media.mobile} { flex-grow: 2; - &:first-child { + &:first-of-type { flex-grow: 0; } &:last-child { diff --git a/packages/web/src/components/leaderboard/leaderboard-table-row/LeaderboardTableRow.styles.ts b/packages/web/src/components/leaderboard/leaderboard-table-row/LeaderboardTableRow.styles.ts index 2eeec41de..25601b528 100644 --- a/packages/web/src/components/leaderboard/leaderboard-table-row/LeaderboardTableRow.styles.ts +++ b/packages/web/src/components/leaderboard/leaderboard-table-row/LeaderboardTableRow.styles.ts @@ -43,7 +43,7 @@ export const TableColumn = styled.div<{ tdWidth?: number }>` ${mixins.flexbox("row", "center", "flex-start")}; - &:first-child { + &:first-of-type { justify-content: center; } @@ -55,7 +55,7 @@ export const TableColumn = styled.div<{ tdWidth?: number }>` ${media.mobile} { flex-grow: 2; - &:first-child { + &:first-of-type { flex-grow: 0; } &:last-child { diff --git a/packages/web/src/components/leaderboard/mobile-leaderboard-table-row/MobileLeaderboardTableRow.styles.ts b/packages/web/src/components/leaderboard/mobile-leaderboard-table-row/MobileLeaderboardTableRow.styles.ts index 6c4b14377..36879b50c 100644 --- a/packages/web/src/components/leaderboard/mobile-leaderboard-table-row/MobileLeaderboardTableRow.styles.ts +++ b/packages/web/src/components/leaderboard/mobile-leaderboard-table-row/MobileLeaderboardTableRow.styles.ts @@ -25,7 +25,7 @@ export const TableColumn = styled.div<{ tdWidth: number }>` ${mixins.flexbox("row", "center", "flex-start")}; - &:first-child { + &:first-of-type { justify-content: center; } @@ -37,7 +37,7 @@ export const TableColumn = styled.div<{ tdWidth: number }>` ${media.mobile} { flex-grow: 2; - &:first-child { + &:first-of-type { flex-grow: 0; } &:last-child { diff --git a/packages/web/src/containers/asset-list-container/AssetListContainer.tsx b/packages/web/src/containers/asset-list-container/AssetListContainer.tsx index 1000d2b03..df78fca36 100644 --- a/packages/web/src/containers/asset-list-container/AssetListContainer.tsx +++ b/packages/web/src/containers/asset-list-container/AssetListContainer.tsx @@ -416,7 +416,7 @@ const AssetListContainer: React.FC = () => { ); closeWithdraw(); }; - console.log(filteredTokens, "filteredTokens"); + return ( <> { swap(estimatedRoutes, swapAmount) .then(response => { - console.log(response); if (response) { if (response.code === 0) { broadcastPending();