From 9badd6b010d0f51e549d0d49a18ccd57b139a36c Mon Sep 17 00:00:00 2001 From: vuonghuuhung Date: Thu, 24 Oct 2024 09:51:08 +0700 Subject: [PATCH 1/4] remove svg on root --- custom.svg | 4 ---- full-range.svg | 5 ----- narrow.svg | 6 ------ wide.svg | 14 -------------- 4 files changed, 29 deletions(-) delete mode 100644 custom.svg delete mode 100644 full-range.svg delete mode 100644 narrow.svg delete mode 100644 wide.svg diff --git a/custom.svg b/custom.svg deleted file mode 100644 index 19d1947fa..000000000 --- a/custom.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/full-range.svg b/full-range.svg deleted file mode 100644 index 6bc46f539..000000000 --- a/full-range.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/narrow.svg b/narrow.svg deleted file mode 100644 index 68a3a1126..000000000 --- a/narrow.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/wide.svg b/wide.svg deleted file mode 100644 index 46a6c00f4..000000000 --- a/wide.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - From d54f603d970d2aa3ed7437a1b44729b7f34aad5d Mon Sep 17 00:00:00 2001 From: vuonghuuhung Date: Thu, 24 Oct 2024 16:22:47 +0700 Subject: [PATCH 2/4] optimize chart performance --- .../ConcentratedLiquidityDepthChart/index.tsx | 34 +- .../CreatePositionForm/index.module.scss | 11 +- .../components/CreatePositionForm/index.tsx | 4 +- .../HistoricalChartDataWrapper/index.tsx | 3 + .../components/HistoricalPriceChart/index.tsx | 320 +--------------- .../LiquidityChartWrapper/index.tsx | 4 + .../ManuallyAddLiquidity/index.module.scss | 343 +++++++++--------- .../components/ManuallyAddLiquidity/index.tsx | 112 +++--- .../components/ZapInTab/index.module.scss | 74 +++- .../Pool-V3/components/ZapInTab/index.tsx | 65 ++-- src/pages/Pool-V3/hooks/useCreatePosition.ts | 6 +- src/reducer/poolDetailV3.ts | 5 +- src/rest/graphClient.ts | 7 +- src/styles/_themes.scss | 4 + 14 files changed, 365 insertions(+), 627 deletions(-) diff --git a/src/pages/Pool-V3/components/ConcentratedLiquidityDepthChart/index.tsx b/src/pages/Pool-V3/components/ConcentratedLiquidityDepthChart/index.tsx index 3cb19cc13..128d33f08 100644 --- a/src/pages/Pool-V3/components/ConcentratedLiquidityDepthChart/index.tsx +++ b/src/pages/Pool-V3/components/ConcentratedLiquidityDepthChart/index.tsx @@ -41,6 +41,7 @@ export const ConcentratedLiquidityDepthChart: FC<{ horizontal?: boolean; fullRange?: boolean; rangeAnnotation?: DepthData[]; + theme?: 'light' | 'dark'; }> = ({ data, min, @@ -55,7 +56,8 @@ export const ConcentratedLiquidityDepthChart: FC<{ onSubmitMax, offset, horizontal = true, - fullRange = false + fullRange = false, + theme = 'dark' }) => { const xMax = xRange[1]; const showMinDragHandler = min !== undefined && Boolean(onMoveMin) && Boolean(onSubmitMin); @@ -106,15 +108,15 @@ export const ConcentratedLiquidityDepthChart: FC<{ theme={buildChartTheme({ backgroundColor: 'transparent', colors: ['white'], - gridColor: theme.colors.osmoverse['600'], - gridColorDark: theme.colors.osmoverse['300'], + gridColor: 'red', + gridColorDark: 'green', svgLabelSmall: { - fill: theme.colors.osmoverse['300'], + fill: 'blue', fontSize: 12, fontWeight: 500 }, svgLabelBig: { - fill: theme.colors.osmoverse['300'], + fill: 'grey', fontSize: 12, fontWeight: 500 }, @@ -139,7 +141,7 @@ export const ConcentratedLiquidityDepthChart: FC<{ data={data} xAccessor={(d: DepthData) => d?.depth} yAccessor={(d: DepthData) => d?.price} - colorAccessor={() => theme.colors.barFill} + colorAccessor={() => (theme === 'dark' ? '#373F31' : '#D7F5BF')} /> {annotationDatum && ( @@ -174,7 +176,7 @@ export const ConcentratedLiquidityDepthChart: FC<{ @@ -186,7 +188,7 @@ export const ConcentratedLiquidityDepthChart: FC<{ defaultValue={fullRange ? yRange[1] * 0.95 : max} length={xMax} scale={yScale} - stroke={'#FFF27A'} + stroke={theme === 'dark' ? '#FFF27A' : '#C68E00'} onMove={onMoveMaxBoundary} onSubmit={onSubmitMax} /> @@ -197,14 +199,14 @@ export const ConcentratedLiquidityDepthChart: FC<{ defaultValue={fullRange ? yRange[0] * 1.05 : min} length={xMax} scale={yScale} - stroke={'#0ECB81'} + stroke={theme === 'dark' ? '#0ECB81' : '#03A66D'} onMove={onMoveMinBoundary} onSubmit={onSubmitMin} /> )} @@ -231,16 +233,16 @@ const DragContainer: FC<{ canEditSubject canEditLabel={false} onDragMove={({ event, ...nextPos }) => { - event.preventDefault() - event.stopPropagation() + event.preventDefault(); + event.stopPropagation(); if (props.onMove) { const val = props.scale.invert(nextPos.y); props.onMove(+Math.max(0, val)); } }} onDragEnd={({ event, ...nextPos }) => { - event.preventDefault() - event.stopPropagation() + event.preventDefault(); + event.stopPropagation(); if (props.onSubmit) { const val = props.scale.invert(nextPos.y); props.onSubmit(+Math.max(0, val)); diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss b/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss index 2a640efef..89806eb11 100644 --- a/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss +++ b/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss @@ -266,6 +266,7 @@ .menuWrapper { width: 100%; display: flex; + flex-direction: row; align-items: center; gap: 10px; align-self: stretch; @@ -285,7 +286,7 @@ display: flex; height: 48px; padding: 4px; - // flex-direction: column; + flex-direction: column; justify-content: center; align-items: center; gap: 5px; @@ -396,10 +397,10 @@ align-self: stretch; margin-bottom: 24px; - @include small-mobile { - flex-direction: column; - gap: 8px; - } + // @include small-mobile { + // flex-direction: column; + // gap: 8px; + // } @include theme { border-bottom: 1px solid theme-get('neutral-border-border-bold'); diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.tsx b/src/pages/Pool-V3/components/CreatePositionForm/index.tsx index 1ef10b7f6..12a3fe736 100644 --- a/src/pages/Pool-V3/components/CreatePositionForm/index.tsx +++ b/src/pages/Pool-V3/components/CreatePositionForm/index.tsx @@ -47,7 +47,7 @@ const CreatePositionForm: FC = ({ poolId, slippage, sho const { poolPrice: extendPrices } = useGetPoolList(prices); const [walletAddress] = useConfigReducer('address'); - + const loadOraichainToken = useLoadOraichainTokens(); const navigate = useNavigate(); const { feeDailyData } = useGetFeeDailyData(); @@ -209,7 +209,7 @@ const CreatePositionForm: FC = ({ poolId, slippage, sho

Current pool price

{tokenX && tokenY && currentPrice && (

- {numberWithCommas(currentPrice, undefined, { maximumFractionDigits: 2 })}{' '} + {numberWithCommas(currentPrice, undefined, { maximumFractionDigits: currentPrice >= 0.01 ? 2 : 9 })}{' '} {isXToY ? `${tokenY.name} per ${tokenX.name}` : `${tokenX.name} per ${tokenY.name}`}

)} diff --git a/src/pages/Pool-V3/components/HistoricalChartDataWrapper/index.tsx b/src/pages/Pool-V3/components/HistoricalChartDataWrapper/index.tsx index 67e0b8622..1fd9f4080 100644 --- a/src/pages/Pool-V3/components/HistoricalChartDataWrapper/index.tsx +++ b/src/pages/Pool-V3/components/HistoricalChartDataWrapper/index.tsx @@ -5,6 +5,7 @@ import { TokenItemType } from '@oraichain/oraidex-common'; import { TimeDuration, TokenPairHistoricalPrice } from 'reducer/poolDetailV3'; import { Dec } from '@keplr-wallet/unit'; import { isMobile } from '@walletconnect/browser-utils'; +import useTheme from 'hooks/useTheme'; interface HistoricalChartDataWrapperProps { @@ -40,6 +41,7 @@ const HistoricalChartDataWrapper: FC = ({ // maxDecimals: 8, // notation: 'standard' // }) || ''; + const theme = useTheme(); const chartDataToNow = [...historicalChartData]; // if (historicalChartData.length > 0) { @@ -61,6 +63,7 @@ const HistoricalChartDataWrapper: FC = ({ }} extendLeft={historicalChartData[0]?.close <= 0.001 ? 30 : 10} xNumTicks={2} + theme={theme} /> ); diff --git a/src/pages/Pool-V3/components/HistoricalPriceChart/index.tsx b/src/pages/Pool-V3/components/HistoricalPriceChart/index.tsx index 7408a90e8..2ed7d4e52 100644 --- a/src/pages/Pool-V3/components/HistoricalPriceChart/index.tsx +++ b/src/pages/Pool-V3/components/HistoricalPriceChart/index.tsx @@ -24,303 +24,11 @@ import cn from 'classnames/bind'; import { format, formatDefaultLocale } from '@visx/vendor/d3-format'; export const theme = { - colors: { - white: { - full: '#FFFFFF', - high: 'rgba(255, 255, 255, 0.95)', - emphasis: 'rgba(255, 255, 255, 0.87)', - mid: 'rgba(255, 255, 255, 0.6)', - disabled: 'rgba(255, 255, 255, 0.38)', - faint: 'rgba(255, 255, 255, 0.12)' - }, - wosmongton: { - 100: '#D3D1FF', - 200: '#AEE67F', - 300: '#AEE67F', - 400: '#6A67EA', - 500: '#FFF27A', - 700: '#462ADF', - 800: '#361FB2', - 900: '#2D1B8F' - }, - ion: { - 100: '#DCF9FF', - 300: '#87DDF8', - 400: '#64C5EE', - 500: '#2994D0', - 700: '#1469AF' - }, - bullish: { - 100: '#EBFFFB', - 300: '#95EEDE', - 400: '#6BDEC9', - 500: '#29D0B2', - 600: '#00A399' - }, - osmoverse: { - 100: '#E4E1FB', - 200: '#CEC8F3', - 300: '#373F31', - 400: '#958FC0', - 500: '#736CA3', - 600: '#979995', - 700: '#3C356D', - 800: '#282750', - 810: '#241E4B', - 825: '#232047', - 850: '#201B43', - 860: '#19183A', - 900: '#140F34', - 1000: '#090524' - }, - 'osmoverse-alpha': { - 700: 'rgba(107, 98, 173, 0.47)', - 800: '#3E386A', - 850: 'rgba(60, 53, 109, 0.29)' - }, - ammelia: { - 300: '#E196DB', - 400: '#D779CF', - 500: '#CC54C2', - 600: '#CA2EBD', - 900: '#87087C' - }, - rust: { - 200: '#F8C2B0', - 300: '#F5A68C', - 400: '#F99575', - 500: '#FA825D', - 600: '#E06640', - 700: '#C6451C', - 800: '#B03A20' - }, - wireframes: { - darkGrey: '#282828', - grey: '#818181', - lightGrey: '#B7B7B7' - }, - error: '#EF3456', - missionError: '#EF3456', - superfluid: '#8A86FF', - supercharged: '#64C5EE', - transparent: 'transparent', - black: 'black', - inherit: 'inherit', - barFill: '#373F31', - chartGradientPrimary: 'rgba(174, 230, 127, 0.3)', - chartGradientSecondary: 'rgba(174, 230, 127, 0)', - yourBalanceActionButton: '#2A2553' - }, - fontSize: { - xxs: '0.5rem', - xs: '0.75rem', - sm: '0.875rem', - base: '1rem', - lg: '1.25rem', - xl: '1.5rem', - '2xl': '2.25rem', - '3xl': '3rem', - '4xl': '3.75rem', - '5xl': '6rem', - h1: ['6rem', { lineHeight: '7rem', letterSpacing: '-1.5px' }], - h2: ['3.75rem', { lineHeight: '4.5rem', letterSpacing: '-0.5px' }], - h3: ['3rem', { lineHeight: '3.5rem', letterSpacing: '0' }], - h4: ['2.25rem', { lineHeight: '2.25rem', letterSpacing: '0' }], - h5: ['1.5rem', { lineHeight: '2rem', letterSpacing: '0.18px' }], - h6: ['1.25rem', { lineHeight: '1.5rem', letterSpacing: '0.15px' }], - subtitle1: ['1rem', { lineHeight: '1.5rem', letterSpacing: '0.15px' }], - subtitle2: ['0.875rem', { lineHeight: '1.5rem', letterSpacing: '0.1px' }], - body1: ['1rem', { lineHeight: '1.5rem', letterSpacing: '0.5px' }], - body2: ['0.875rem', { lineHeight: '1.25rem', letterSpacing: '0.25px' }], - button: ['0.875rem', { lineHeight: '1rem', letterSpacing: '0' }], - caption: ['0.75rem', { lineHeight: '0.875rem', letterSpacing: '0.4px' }], - overline: ['0.625rem', { lineHeight: '1rem', letterSpacing: '2.5px' }] - }, - fontFamily: { - h1: ['Poppins', 'ui-sans-serif', 'system-ui'], - h2: ['Poppins', 'ui-sans-serif', 'system-ui'], - h3: ['Poppins', 'ui-sans-serif', 'system-ui'], - h4: ['Poppins', 'ui-sans-serif', 'system-ui'], - h5: ['Poppins', 'ui-sans-serif', 'system-ui'], - h6: ['Poppins', 'ui-sans-serif', 'system-ui'], - subtitle1: ['Inter', 'ui-sans-serif', 'system-ui'], - subtitle2: ['Inter', 'ui-sans-serif', 'system-ui'], - body1: ['Inter', 'ui-sans-serif', 'system-ui'], - body2: ['Inter', 'ui-sans-serif', 'system-ui'], - button: ['Inter', 'ui-sans-serif', 'system-ui'], - caption: ['Inter', 'ui-sans-serif', 'system-ui'], - overline: ['Poppins', 'ui-sans-serif', 'system-ui'] - }, - fontWeight: { - // ...defaultTheme.fontWeight, - h1: 600, - h2: 600, - h3: 600, - h4: 600, - h5: 600, - h6: 600, - subtitle1: 600, - subtitle2: 400, - body1: 500, - body2: 500, - button: 600, - caption: 400, - overline: 400 - }, - backgroundImage: { - none: 'none', - 'home-bg-pattern': "url('/images/osmosis-home-bg-pattern.svg')", - 'loading-bar': - 'linear-gradient(to left,rgba(251, 251, 251, 0.1),rgba(251, 251, 251, 0.2),rgba(251, 251, 251, 0.3),rgba(251, 251, 251, 0.2),rgba(251, 251, 251, 0.1))', - superfluid: 'linear-gradient(270deg, #64C5EE 0%, #EE64E8 100%);', - supercharged: 'linear-gradient(270deg, #64C5EE 0%, #EE64E8 100%);', - 'gradient-alert': 'linear-gradient(134deg, #12705F 0%, #233078 46.87%, #0D7389 100%);', - 'superfluid-20': 'linear-gradient(90deg, rgba(138, 134, 255, 0.2) 0.04%, rgba(225, 60, 189, 0.2) 99.5%)', - 'gradient-neutral': 'linear-gradient(96.42deg, #462ADF -0.59%, #8A86FF 100%);', - 'gradient-positive': 'linear-gradient(96.28deg, #899EFF 0%, #28F6AF 99.28%);', - 'gradient-negative': 'linear-gradient(96.42deg, #B03A20 -0.59%, #FA825D 100%);', - 'gradient-supercharged': 'linear-gradient(270deg, #64C5EE 0%, #EE64E8 100%);', - 'gradient-hero-card': 'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.8));', - 'gradient-dummy-notifications': 'linear-gradient(0deg, #282750 0%, rgba(40, 39, 80, 0.00) 100%)', - 'gradient-token-details-shadow': 'linear-gradient(0deg, #090524 6.87%, rgba(20, 15, 52, 0) 100%);', - 'gradient-scrollable-allocation-list': 'linear-gradient(0deg, #201B43 20%, rgba(20, 15, 52, 0) 100%);', - 'gradient-scrollable-allocation-list-reverse': 'linear-gradient(180deg, #201B43 10%, rgba(20, 15, 52, 0) 30%);', - 'gradient-earnpage-position-bg': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #462ADF 100%)', - 'gradient-earnpage-tvl-depositcap': 'linear-gradient(to right, #462ADF, #8A86FF)' - }, - screens: { - '3xl': { max: '1792px' }, - // => @media (max-width: 1792px) { ... } - - '2xl': { max: '1536px' }, - // => @media (max-width: 1536px) { ... } - - '1.5xl': { max: '1408px' }, - // => @media (max-width: 1408px) { ... } - - xl: { max: '1280px' }, - // => @media (max-width: 1280px) { ... } + dark: { - '1.5lg': { max: '1152px' }, - // => @media (max-width: 1152px) { ... } - - lg: { max: '1024px' }, - // => @media (max-width: 1024px) { ... } - - '1.5md': { max: '896px' }, - // => @media (max-width: 896px) { ... } - - md: { max: '768px' }, - // => @media (max-width: 768px) { ... } - - sm: { max: '640px' }, - // => @media (max-width: 640px) { ... } - - '1.5xs': { max: '512px' }, - // => @media (max-width: 512px) { ... } - - xs: { max: '420px' } }, - extend: { - height: { - navbar: '72px', - 'navbar-mobile': '65px', - content: 'calc(100vh - 72px)', - 'content-mobile': 'calc(100vh - 58px)' - }, - flex: { - 'basis-50': '0 1 50%' - }, - gridTemplateColumns: { - tokenpage: 'minmax(0, 1fr), minmax(0, 430px)', - tokenStats: 'repeat(auto-fill, minmax(150px, 1fr))', - earnpage: 'minmax(0, 1fr), minmax(0, 332px)', - earnpositions: 'minmax(0, 1fr), 1px, minmax(0, 284px)' - }, - width: { - 25: '6.25rem', - loader: { - 1: '3.75rem', - 2: '4rem', - 3: '4.25rem', - 4: '4.5rem', - 5: '4.75rem', - 6: '5rem' - } - }, - spacing: { - navbar: '72px', - 'navbar-mobile': '65px', - sidebar: '14.58rem', - 'mobile-header': '6rem', - 'rewards-w': '108px', - 0.25: '1px', - 4.5: '18px', - 10.5: '2.625rem', - 13: '3.25rem' - }, - maxWidth: { - container: '70rem', - clipboard: '32.5rem', - modal: '42rem', - 35: '35%' - }, - maxHeight: { - terms: '28rem' - }, - minWidth: { - 10: '2.5rem', - 'rewards-container': '332px', - 'multi-radio': '290px', - 'dropdown-with-label': '200px', - 'strategy-buttons': '186px' - }, - keyframes: { - loading: { - '0%': { transform: 'translateX(-150%)' }, - '100%': { transform: 'translateX(200%)' } - }, - flash: { - '0%': { color: 'inherit' }, - '50%': { color: '#29D0B2' }, - '100%': { opacity: 'inherit' } - } - }, - animation: { - loading: 'loading 1s ease-in-out infinite', - 'spin-slow': 'spin 1.5s ease-in-out infinite', - flash: 'flash 1s ease-in-out infinite' - }, - boxShadow: { - separator: '0px -1px 0px 0px rgba(255, 255, 255, 0.12)', - md: '0px 6px 8px rgba(9, 5, 36, 0.2)', - 'volatility-preset': '0px 0px 12px 2px #8C8AF9' - }, - borderRadius: { - none: '0', - lginset: '0.438rem', // 1px smaller than rounded-lg - xlinset: '0.688rem', // 1px smaller than rounded-xl - '2xlinset': '0.938rem', // 1 px smaller than rounded-2xl - '3x4pxlinset': '1.25rem', // 4px smaller than rounded-3xl - '4x4pxlinset': '1.5rem', // 4px smaller than 4xl - '4xl': '1.75rem', - '5xl': '2rem' - }, - transitionTimingFunction: { - bounce: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', - inOutBack: 'cubic-bezier(0.7, -0.4, 0.4, 1.4)', - outBack: 'cubic-bezier(0.46, 0.47, 0.4, 1.4)', - inBack: 'cubic-bezier(0.7, -0.4, 0.52, 0.51)' - }, - transitionProperty: { - height: 'height', - width: 'width', - borderRadius: 'border-radius' - }, - letterSpacing: { - wide: '.009375em', - wider: '.025em' - } + light: { + } }; @@ -354,6 +62,7 @@ const HistoricalPriceChart: FC<{ showTooltip?: boolean; fiatSymbol?: string; extendLeft: number; + theme?: 'light' | 'dark'; }> = memo( ({ data, @@ -366,7 +75,8 @@ const HistoricalPriceChart: FC<{ xNumTicks = 3, showTooltip = false, fiatSymbol, - extendLeft = 0 + extendLeft = 0, + theme = 'dark' }) => ( {({ height, width }) => { @@ -399,8 +109,8 @@ const HistoricalPriceChart: FC<{ }} theme={buildChartTheme({ backgroundColor: 'transparent', - colors: ['#A6BE93'], - gridColor: '#232521', + colors: [theme === 'dark' ? '#A6BE93' : '#5EA402'], + gridColor: theme === 'dark' ? '#232521' : 'white', gridColorDark: '#232521', svgLabelSmall: { fill: '#979995', @@ -440,8 +150,10 @@ const HistoricalPriceChart: FC<{ /> d?.time} yAccessor={(d: { time: number; close: number }) => d?.close} - stroke={theme.colors.wosmongton['200']} + stroke={'black'} /> )} @@ -471,7 +183,7 @@ const HistoricalPriceChart: FC<{ @@ -486,7 +198,7 @@ const HistoricalPriceChart: FC<{ @@ -499,7 +211,7 @@ const HistoricalPriceChart: FC<{ strokeWidth: 2, strokeDasharray: '5 5', opacity: 0.17, - stroke: theme.colors.osmoverse['300'] + stroke: 'yellow' }} verticalCrosshairStyle={{ strokeWidth: 1, diff --git a/src/pages/Pool-V3/components/LiquidityChartWrapper/index.tsx b/src/pages/Pool-V3/components/LiquidityChartWrapper/index.tsx index c4e4bdaa1..d9c1ab83a 100644 --- a/src/pages/Pool-V3/components/LiquidityChartWrapper/index.tsx +++ b/src/pages/Pool-V3/components/LiquidityChartWrapper/index.tsx @@ -3,6 +3,7 @@ import styles from './index.module.scss'; import { ConcentratedLiquidityDepthChart } from '../ConcentratedLiquidityDepthChart'; import { LiquidityChartData } from 'reducer/poolDetailV3'; import { OptionType } from 'pages/Pool-V3/hooks/useCreatePositionForm'; +import useTheme from 'hooks/useTheme'; interface LiquidityChartWrapperProps { minPrice: number; @@ -35,6 +36,8 @@ const LiquidityChartWrapper: FC = ({ resetRange, setOptionType }) => { + const theme = useTheme(); + return (
@@ -75,6 +78,7 @@ const LiquidityChartWrapper: FC = ({ offset={{ top: 0, right: 36, bottom: 24 + 28, left: 0 }} horizontal fullRange={fullRange} + theme={theme} />
diff --git a/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.module.scss b/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.module.scss index 603bd4d69..5fe298248 100644 --- a/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.module.scss +++ b/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.module.scss @@ -1,202 +1,215 @@ @import 'src/styles/themes'; @import 'src/styles/mixins'; - .itemInput { + display: flex; + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 12px; + align-self: stretch; + border-radius: 16px; + margin-bottom: 8px; + + @include theme { + background: theme-get('neutral-6'); + } + + &.disabled { + opacity: 0.5; + filter: blur(2px); + pointer-events: none; + } + + .tokenInfo { display: flex; - padding: 16px; - flex-direction: column; - align-items: flex-start; - gap: 12px; - align-self: stretch; - border-radius: 16px; - margin-bottom: 8px; - - @include theme { - background: theme-get('neutral-6'); - } - - &.disabled { - opacity: 0.5; - filter: blur(2px); - pointer-events: none; - } - - .tokenInfo { + justify-content: space-between; + align-items: center; + // align-self: stretch; + width: 100%; + height: 44px; + + .name { display: flex; - justify-content: space-between; + padding: 8px 12px 8px 12px; align-items: center; - align-self: stretch; - gap: 12px; - - .name { - height: 40px; - display: flex; - padding: 8px 12px 8px 8px; - align-items: center; - gap: 8px; - flex-wrap: nowrap; - white-space: nowrap; - max-width: 8rem; - - border-radius: var(--Dimension-Corner-Radius-button, 99px); - - @include theme { - border: 1px solid theme-get('neutral-border-border-xbold'); - background: theme-get('colors-neutral-border-border-bold'); + gap: 8px; + flex-wrap: nowrap; + white-space: nowrap; + max-width: 8rem; + + border-radius: var(--Dimension-Corner-Radius-button, 99px); + + @include theme { + border: 1px solid theme-get('neutral-border-border-xbold'); + background: theme-get('colors-neutral-border-border-bold'); + color: theme-get('colors-neutral-text-text-token-name'); + } + + font-size: 16px; + font-weight: 400; + line-height: 150%; + + svg { + width: 28px; + height: 28px; + } + } + + .input { + flex: 1; + text-align: right; + display: flex; + flex-direction: column; + + .amount { + flex-grow: 1; + opacity: 1; + width: inherit; + text-align: right; + font-size: 30px; + font-weight: 400; + max-width: 267px; + line-height: 127%; + + @include theme() { color: theme-get('colors-neutral-text-text-token-name'); } - - font-size: 16px; - font-weight: 500; - line-height: 150%; - - svg { - width: 28px; - height: 28px; + + @include mobile { + width: 100%; + font-size: 24px; } } - - .input { - flex: 1; - text-align: right; + + .usd { + font-weight: 400; + font-size: 13px; + + @include theme() { + color: theme-get('colors-neutral-text-body'); + } + display: flex; - flex-direction: column; - - .amount { - flex-grow: 1; - max-width: 100%; - opacity: 1; - width: inherit; - text-align: right; - font-size: 20px; - font-weight: 500; - line-height: 127%; - - @include theme() { - color: theme-get('colors-neutral-text-text-token-name'); - } - - @include mobile { - width: 100%; - font-size: 24px; - } + justify-content: flex-end; + } + } + } + + .balance { + width: 100%; + + @include theme { + color: theme-get('neutral-8'); + } + + font-size: 12px; + font-weight: 400; + line-height: 150%; + /* 18px */ + letter-spacing: 0.012px; + + display: flex; + justify-content: space-between; + align-items: center; + + .bal { + margin-right: 8px; + + p { + @include theme { + color: theme-get('colors-neutral-text-text-token-name'); } - - .usd { - font-weight: 400; - font-size: 13px; - - @include theme() { - color: theme-get('colors-neutral-text-body'); - } - - display: flex; - justify-content: flex-end; + } + + .value { + @include theme { + color: theme-get('neutral-text-title'); + } + } + + .max { + margin-left: 8px; + cursor: pointer; + + @include theme { + color: theme-get('primary-1'); } } } - - .balance { - width: 100%; - + + .btnGroup { + display: flex; + flex-wrap: nowrap; + gap: 4px; + } + + button { + display: flex; + width: 40px; + height: 22px; + padding: 8px 0px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: var(--Dimension-Corner-Radius-button, 99px); + @include theme { - color: theme-get('neutral-8'); + background: theme-get('primary-highlight-section'); + color: theme-get('colors-neutral-text-text-btn-default'); } - + font-size: 12px; font-weight: 400; line-height: 150%; - /* 18px */ letter-spacing: 0.012px; - - display: flex; - justify-content: space-between; - align-items: center; - - .bal { - margin-right: 8px; - - p { - @include theme { - color: theme-get('colors-neutral-text-text-token-name'); - } - } - } - - .btnGroup { - display: flex; - flex-wrap: nowrap; - gap: 4px; - } - - button { - display: flex; - width: 40px; - height: 22px; - padding: 8px 0px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: var(--Dimension-Corner-Radius-button, 99px); - - @include theme { - background: theme-get('primary-highlight-section'); - color: theme-get('colors-neutral-text-text-btn-default'); - } - - font-size: 12px; - font-weight: 400; - line-height: 150%; - letter-spacing: 0.012px; - cursor: pointer; - transition: all ease-in-out 0.3s; - - &:hover { - filter: brightness(1.25); - } + cursor: pointer; + transition: all ease-in-out 0.3s; + + &:hover { + filter: brightness(1.25); } } } +} - .aprWrapper { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 16px 20px; - border-radius: 12px; +.aprWrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 16px 20px; + border-radius: 12px; + + @include theme { + border: 1px solid theme-get('neutral-border-border-default'); + } + + .title { + font-size: 14px; + font-weight: 500; + align-self: center; @include theme { - border: 1px solid theme-get('neutral-border-border-default'); + color: theme-get('colors-neutral-text-body'); } + } + .amountWrap { + display: flex; + flex-direction: row; + gap: 6px; - .title { - font-size: 14px; - font-weight: 500; + svg { align-self: center; - - @include theme { - color: theme-get('colors-neutral-text-body'); - } } - .amountWrap { - display: flex; - flex-direction: row; - gap: 6px; - - svg { - align-self: center; - } + .amount { + font-size: 20px; + font-weight: 600; - .amount { - font-size: 20px; - font-weight: 600; - - @include theme { - color: theme-get('primary-1'); - } + @include theme { + color: theme-get('primary-1'); } } - } \ No newline at end of file + } +} diff --git a/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.tsx b/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.tsx index 4f82b2081..fd96df1da 100644 --- a/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.tsx +++ b/src/pages/Pool-V3/components/ManuallyAddLiquidity/index.tsx @@ -44,46 +44,13 @@ const ManuallyAddLiquidity: FC = ({ return ( <>
-
-

- Balance: {numberWithCommas(toDisplay(amounts[tokenFrom?.denom] || '0', tokenFrom.decimals))}{' '} - {tokenFrom?.name} -

-
- - -
-
- {TokenFromIcon ? ( + {TokenFromIcon && ( <> {TokenFromIcon}  {tokenFrom.name} - ) : ( - 'Select Token' )}
@@ -96,7 +63,7 @@ const ManuallyAddLiquidity: FC = ({ decimalScale={tokenFrom?.decimals || 6} disabled={isFromBlocked} type="text" - value={amountFrom} + value={amountFrom === 0 ? '' : amountFrom} onChange={() => {}} isAllowed={(values) => { const { floatValue } = values; @@ -107,53 +74,38 @@ const ManuallyAddLiquidity: FC = ({ setAmountFrom(floatValue); }} /> -
- ≈ ${amountFrom ? numberWithCommas(Number(fromUsd) || 0, undefined, { maximumFractionDigits: 6 }) : 0} -
-
-

- Balance: {numberWithCommas(toDisplay(amounts[tokenTo?.denom] || '0', tokenTo.decimals))}{' '} - {tokenTo?.name} -

-
- - + Max + +

+
+ ≈ ${amountFrom ? numberWithCommas(Number(fromUsd) || 0, undefined, { maximumFractionDigits: 6 }) : 0}
+
+
- {TokenToIcon ? ( + {TokenToIcon && ( <> {TokenToIcon}  {tokenTo.name} - ) : ( - 'Select Token' )}
@@ -166,7 +118,7 @@ const ManuallyAddLiquidity: FC = ({ decimalScale={tokenTo?.decimals || 6} disabled={isToBlocked} type="text" - value={amountTo} + value={amountTo === 0 ? '' : amountTo} onChange={() => {}} isAllowed={(values) => { const { floatValue } = values; @@ -177,9 +129,27 @@ const ManuallyAddLiquidity: FC = ({ setAmountTo(floatValue); }} /> -
- ≈ ${amountTo ? numberWithCommas(Number(toUsd) || 0, undefined, { maximumFractionDigits: 6 }) : 0} -
+
+
+
+

+ Balance:{' '} + + {numberWithCommas(toDisplay(amounts[tokenTo?.denom] || '0', tokenTo.decimals))} {tokenTo?.name} + + { + const val = toDisplay(amounts[tokenTo?.denom] || '0', tokenTo.decimals); + setAmountTo(val); + setFocusId('y'); + }} + > + Max + +

+
+ ≈ ${amountTo ? numberWithCommas(Number(toUsd) || 0, undefined, { maximumFractionDigits: 6 }) : 0}
diff --git a/src/pages/Pool-V3/components/ZapInTab/index.module.scss b/src/pages/Pool-V3/components/ZapInTab/index.module.scss index 186d38af9..3d06b7640 100644 --- a/src/pages/Pool-V3/components/ZapInTab/index.module.scss +++ b/src/pages/Pool-V3/components/ZapInTab/index.module.scss @@ -49,10 +49,10 @@ .itemInput { display: flex; - padding: 14px; + padding: 16px; flex-direction: column; align-items: flex-start; - gap: 6px; + gap: 12px; align-self: stretch; border-radius: 16px; margin-bottom: 2px; @@ -71,15 +71,16 @@ display: flex; justify-content: space-between; align-items: center; - align-self: stretch; - gap: 12px; + // align-self: stretch; + width: 100%; + height: 44px; .name { - height: 40px; display: flex; - padding: 8px 12px 8px 8px; + padding: 12px 12px 12px 12px; align-items: center; gap: 8px; + height: 44px; flex-wrap: nowrap; white-space: nowrap; max-width: 8rem; @@ -93,7 +94,7 @@ } font-size: 16px; - font-weight: 500; + font-weight: 400; line-height: 150%; svg { @@ -110,12 +111,12 @@ .amount { flex-grow: 1; - max-width: 100%; opacity: 1; width: inherit; text-align: right; - font-size: 20px; - font-weight: 500; + font-size: 30px; + font-weight: 400; + max-width: 243px; line-height: 127%; @include theme() { @@ -167,6 +168,21 @@ color: theme-get('colors-neutral-text-text-token-name'); } } + + .value { + @include theme { + color: theme-get('neutral-text-title'); + } + } + + .max { + margin-left: 8px; + cursor: pointer; + + @include theme { + color: theme-get('primary-1'); + } + } } .btnGroup { @@ -212,11 +228,21 @@ .bar { flex: 1; - border-top: 1px solid #232521; + + @include theme { + border-top: 1px solid theme-get('neutral-surface-bg-modal'); + } } svg { vertical-align: middle; + + rect { + @include theme { + stroke: theme-get('bg-result-arrow-stroke'); + fill: theme-get('bg-result-arrow'); + } + } } } @@ -245,14 +271,19 @@ flex: 1; border-radius: 16px; - background: var(--Colors-Neutral-Surface-bg-swap-pair, #232521); + + @include theme { + background: theme-get('neutral-surface-bg-modal'); + } .info { display: flex; align-items: center; gap: 8px; - color: var(--Colors-Neutral-Text-title, #efefef); + @include theme { + color: theme-get('sea-stone-200'); + } font-size: 18px; font-weight: 400; line-height: 150%; @@ -276,7 +307,9 @@ width: 60%; position: relative; - color: var(--Colors-Neutral-Text-title, #efefef); + @include theme { + color: theme-get('sea-stone-200'); + } font-size: 18px; font-weight: 400; line-height: 120%; @@ -323,7 +356,6 @@ border: 1px solid theme-get('neutral-border-border-default'); } - .title { font-size: 14px; font-weight: 500; @@ -346,7 +378,7 @@ .amount { font-size: 20px; font-weight: 600; - + @include theme { color: theme-get('primary-1'); } @@ -462,3 +494,13 @@ } } } + +.simulating { + font-style: italic; + font-size: 'small'; + + + @include theme { + color: theme-get('basic-primary-surface-default'); + } +} diff --git a/src/pages/Pool-V3/components/ZapInTab/index.tsx b/src/pages/Pool-V3/components/ZapInTab/index.tsx index bfd3de0f9..3cbae8a34 100644 --- a/src/pages/Pool-V3/components/ZapInTab/index.tsx +++ b/src/pages/Pool-V3/components/ZapInTab/index.tsx @@ -82,37 +82,6 @@ const ZapInTab: FC = ({ //
<>
-
-

- Balance: {numberWithCommas(toDisplay(amounts[tokenZap?.denom] || '0', tokenZap.decimals))}{' '} - {tokenZap?.name} -

-
- - -
-
{/*
*/} = ({ decimalScale={tokenZap?.decimals || 6} disabled={false} type="text" - value={zapAmount} + value={zapAmount === 0 ? '' : zapAmount} onChange={() => {}} isAllowed={(values) => { const { floatValue } = values; @@ -146,18 +115,36 @@ const ZapInTab: FC = ({ setZapAmount(floatValue); }} /> -
- ≈ $ - {zapAmount - ? numberWithCommas(Number(zapUsd) || 0, undefined, { maximumFractionDigits: tokenZap.decimals }) - : 0} -
+
+
+
+

+ Balance:{' '} + + {numberWithCommas(toDisplay(amounts[tokenZap?.denom] || '0', tokenZap.decimals))} {tokenZap?.name} + + { + const val = toDisplay(amounts[tokenZap?.denom] || '0', tokenZap.decimals); + setZapAmount(val); + setFocusId('zap'); + }} + > + Max + +

+
+ ≈ $ + {zapAmount + ? numberWithCommas(Number(zapUsd) || 0, undefined, { maximumFractionDigits: tokenZap.decimals }) + : 0}
{simulating && (
- +
diff --git a/src/pages/Pool-V3/hooks/useCreatePosition.ts b/src/pages/Pool-V3/hooks/useCreatePosition.ts index 15ee59beb..97f754c22 100644 --- a/src/pages/Pool-V3/hooks/useCreatePosition.ts +++ b/src/pages/Pool-V3/hooks/useCreatePosition.ts @@ -68,6 +68,10 @@ const useCreatePosition = ( useEffect(() => { (async () => { + if (amountX === 0 && amountY === 0) { + setApr(0); + return; + } if (pool && poolKey && tokenX && tokenY) { const apr = await fetchPositionAprInfo( { @@ -89,7 +93,7 @@ const useCreatePosition = ( } } })(); - }, [pool, poolKey, tokenX, tokenY, xUsd, yUsd]); + }, [pool, poolKey, tokenX, tokenY, xUsd, yUsd, amountX, amountY]); useEffect(() => { if (!(pool && minTick && maxTick)) return; diff --git a/src/reducer/poolDetailV3.ts b/src/reducer/poolDetailV3.ts index 03179fc50..7a3d11d7c 100644 --- a/src/reducer/poolDetailV3.ts +++ b/src/reducer/poolDetailV3.ts @@ -142,11 +142,9 @@ export const poolDetailV3Slice = createSlice({ const [min, max] = state.yRange; - console.log('state.liquidityTicks', min, max); if (min === max) state.liquidityChartData = []; else { if (state.liquidityTicks.length === 0) { - console.log('go here'); const depths: { price: number; depth: number }[] = []; for (let price = min; price <= max; price += (max - min) / 20) { @@ -331,6 +329,7 @@ export const fetchHistoricalPriceData3M = createAsyncThunk( export const fetchHistoricalPriceData7D = createAsyncThunk( 'poolDetailV3/fetchHistoricalPriceData7D', async (poolId: string) => { + console.time('fetchHistoricalPriceData7D'); return await getHistoricalPriceDataInHour(poolId, '7d'); } ); @@ -338,7 +337,7 @@ export const fetchHistoricalPriceData7D = createAsyncThunk( export const fetchHistoricalPriceData1M = createAsyncThunk( 'poolDetailV3/fetchHistoricalPriceData1M', async (poolId: string) => { - return await getHistoricalPriceDataInHour(poolId, '1mo'); + return await getHistoricalPriceDataInDay(poolId, '1mo'); } ); diff --git a/src/rest/graphClient.ts b/src/rest/graphClient.ts index 16e88fcc2..4f9d6addc 100644 --- a/src/rest/graphClient.ts +++ b/src/rest/graphClient.ts @@ -578,8 +578,7 @@ export const getHistoricalPriceDataInHour = async ( // create array of chunkOffset: [hourIndex, hourIndex + CHUNK_QUERY, ...] to current Index const length = Math.ceil((currentIndex - hourIndex) / CHUNK_QUERY); const chunkOffset = Array.from({ length }, (_, i) => hourIndex + i * CHUNK_QUERY); - if (currentIndex > chunkOffset[length - 1]) chunkOffset.push(currentIndex); - + // if (currentIndex > chunkOffset[length - 1]) chunkOffset.push(currentIndex); let finalResult = []; // const before = performance.now(); @@ -616,8 +615,6 @@ export const getHistoricalPriceDataInHour = async ( return graphqlClient.request(document); }) ); - // const after = performance.now(); - finalResult = historicalData.flatMap((item) => item.query.poolHourData.nodes); // if (timeRange === '1y') console.log('getHistoricalPriceData', after - before); @@ -693,7 +690,7 @@ export const getHistoricalPriceDataInDay = async ( // create array of chunkOffset: [dayIndex, dayIndex + CHUNK_QUERY, ...] to current Index const length = Math.ceil((currentIndex - dayIndex) / CHUNK_QUERY); const chunkOffset = Array.from({ length }, (_, i) => dayIndex + i * CHUNK_QUERY); - if (currentIndex > chunkOffset[length - 1]) chunkOffset.push(currentIndex); + // if (currentIndex > chunkOffset[length - 1]) chunkOffset.push(currentIndex); let finalResult = []; diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index 5bc317a91..8259cc75c 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -153,6 +153,8 @@ $themes: ( 'bg-overlay-section': rgba(7, 10, 19, 0.4), 'bg-linear-highlight': linear-gradient(180deg, #152703 0%, #181a17 298px), 'bg-linear-section': linear-gradient(180deg, #232521 0%, #181a17 100%), + 'bg-result-arrow': #222521, + 'bg-result-arrow-stroke': none, 'neutral-surface-btn-default': #152703, 'neutral-text-btn-default': #152703, 'neutral-surface-bg-3': #f7f7f7, @@ -257,6 +259,8 @@ $themes: ( 'bg-iframe-modal': #fff, 'bg-linear-highlight': linear-gradient(180deg, #eaffd0 0%, #fff 298px), 'bg-linear-section': linear-gradient(180deg, #f5f5f5 0%, rgba(251, 251, 251, 0) 100%), + 'bg-result-arrow': #ffffff, + 'bg-result-arrow-stroke': #ffffff, 'neutral-surface-btn-default': #eef9e5, 'neutral-text-btn-default': #232521, 'bg-overlay-section': rgba(255, 255, 255, 0.5), From c272bd878a3718dbbb497efb7b0f99a89057aa76 Mon Sep 17 00:00:00 2001 From: vuonghuuhung Date: Thu, 24 Oct 2024 16:43:18 +0700 Subject: [PATCH 3/4] remove console.log --- src/rest/graphClient.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/rest/graphClient.ts b/src/rest/graphClient.ts index 4f9d6addc..6e7cb8d04 100644 --- a/src/rest/graphClient.ts +++ b/src/rest/graphClient.ts @@ -637,8 +637,6 @@ export const getHistoricalPriceDataInHour = async ( poolId }; - console.log({ res }); - return res; } catch (error) { console.log('error getHistoricalPriceData', error); From bb7f45ef26c07e3627b5358d7cbc83fc9572c597 Mon Sep 17 00:00:00 2001 From: vuonghuuhung Date: Thu, 24 Oct 2024 16:50:08 +0700 Subject: [PATCH 4/4] resolve font --- src/pages/Pool-V3/components/ZapInTab/index.module.scss | 2 +- src/reducer/poolDetailV3.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Pool-V3/components/ZapInTab/index.module.scss b/src/pages/Pool-V3/components/ZapInTab/index.module.scss index 3d06b7640..a0352e86a 100644 --- a/src/pages/Pool-V3/components/ZapInTab/index.module.scss +++ b/src/pages/Pool-V3/components/ZapInTab/index.module.scss @@ -497,7 +497,7 @@ .simulating { font-style: italic; - font-size: 'small'; + font-size: small; @include theme { diff --git a/src/reducer/poolDetailV3.ts b/src/reducer/poolDetailV3.ts index 7a3d11d7c..144cabd09 100644 --- a/src/reducer/poolDetailV3.ts +++ b/src/reducer/poolDetailV3.ts @@ -329,7 +329,6 @@ export const fetchHistoricalPriceData3M = createAsyncThunk( export const fetchHistoricalPriceData7D = createAsyncThunk( 'poolDetailV3/fetchHistoricalPriceData7D', async (poolId: string) => { - console.time('fetchHistoricalPriceData7D'); return await getHistoricalPriceDataInHour(poolId, '7d'); } );