Skip to content

Commit ea788ce

Browse files
neikopneikop
committed
Action form to the right
1 parent 3d94344 commit ea788ce

File tree

7 files changed

+55
-30
lines changed

7 files changed

+55
-30
lines changed

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/index.tsx‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { PoolType, Pool as ZapPool, ZapRouteDetail } from '@kyber/schema'
33
import { translateFriendlyErrorMessage, translateZapMessage } from '@kyber/ui'
44
import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
55
import { BuildZapInData, prepareBuildZapInRouteRequest, useBuildZapInRouteMutation } from 'services/zap'
6+
import styled from 'styled-components'
67

78
import { HStack, Stack } from 'components/Stack'
89
import { useActiveWeb3React, useWeb3React } from 'hooks'
@@ -65,6 +66,30 @@ type AddLiquidityTracking = {
6566
addTransactionWithType: (transaction: TransactionHistory) => void
6667
}
6768

69+
const PoolInformationColumn = styled(Stack)`
70+
flex: 1 1 480px;
71+
min-width: 0;
72+
gap: 24px;
73+
order: 1;
74+
75+
${({ theme }) => theme.mediaWidth.upToSmall`
76+
order: 2;
77+
`}
78+
`
79+
80+
const AddLiquidityColumn = styled(Stack)`
81+
flex: 1 1 480px;
82+
max-width: 480px;
83+
min-width: 0;
84+
gap: 16px;
85+
order: 2;
86+
87+
${({ theme }) => theme.mediaWidth.upToSmall`
88+
order: 1;
89+
max-width: none;
90+
`}
91+
`
92+
6893
const TRACKING_EVENT_MAP: Record<string, TRACKING_EVENT_TYPE> = {
6994
LIQ_TOKEN_SELECTED: TRACKING_EVENT_TYPE.LIQ_TOKEN_SELECTED,
7095
LIQ_MAX_CLICKED: TRACKING_EVENT_TYPE.LIQ_MAX_CLICKED,
@@ -94,7 +119,17 @@ const AddLiquidityBody = ({
94119
return (
95120
<>
96121
<HStack align="flex-start" gap={24} wrap="wrap" width="100%">
97-
<Stack flex="1 1 480px" maxWidth="480px" minWidth={0} gap={16}>
122+
<PoolInformationColumn>
123+
<AddLiquidityRoutePreview
124+
inputTokens={state.tokenInput.tokens}
125+
inputAmounts={state.tokenInput.amounts}
126+
pool={normalizedPool}
127+
zapRoute={state.route.data}
128+
/>
129+
{children}
130+
</PoolInformationColumn>
131+
132+
<AddLiquidityColumn>
98133
<AddLiquidityWidget
99134
context={{
100135
chainId,
@@ -124,17 +159,7 @@ const AddLiquidityBody = ({
124159
) : null}
125160
</Stack>
126161
) : null}
127-
</Stack>
128-
129-
<Stack flex="1 1 480px" gap={24} minWidth={0}>
130-
<AddLiquidityRoutePreview
131-
inputTokens={state.tokenInput.tokens}
132-
inputAmounts={state.tokenInput.amounts}
133-
pool={normalizedPool}
134-
zapRoute={state.route.data}
135-
/>
136-
{children}
137-
</Stack>
162+
</AddLiquidityColumn>
138163
</HStack>
139164

140165
{reviewState ? (

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/Information/AnalyticsTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ const AnalyticsTab = () => {
2828

2929
return (
3030
<Stack gap={20}>
31-
<TopMetricsStrip items={metrics} split={true} />
31+
<TopMetricsStrip items={metrics} split />
3232

3333
<PoolPriceChart chainId={chainId} poolAddress={poolAddress} />
3434

35-
<LiquidityFlowsChart chainId={chainId} onCurrentTvlChange={setCurrentTvl} poolAddress={poolAddress} />
35+
<LiquidityFlowsChart chainId={chainId} poolAddress={poolAddress} onCurrentTvlChange={setCurrentTvl} />
3636
</Stack>
3737
)
3838
}

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/Information/EarningsTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const EarningsTab = () => {
1919
<Stack gap={20}>
2020
<PoolEarningChart chainId={chainId} poolAddress={poolAddress} window={window} onWindowChange={setWindow} />
2121

22-
<Box height={1} backgroundColor={rgba(theme.text, 0.06)} />
22+
<Box backgroundColor={rgba(theme.text, 0.06)} height={1} />
2323

2424
<Stack gap={24}>
2525
<PoolEarningApr />

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/PoolEarningApr.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ const PoolEarningApr = () => {
8989
</AprBadge>
9090
</Stack>
9191

92-
{!upToSmall && <Box width="1px" backgroundColor={rgba(theme.text, 0.08)} />}
92+
{!upToSmall && <Box backgroundColor={rgba(theme.text, 0.08)} width="1px" />}
9393

94-
<Stack flex="1 1 320px" justify="flex-start" gap={8} px={12}>
94+
<Stack flex="1 1 320px" gap={8} justify="flex-start" px={12}>
9595
<HStack align="baseline" gap="12px 24px" wrap="wrap">
9696
{hasActiveApr && (
9797
<BaselineRow>

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/PoolEarningChart.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -257,9 +257,9 @@ const PoolEarningChart = ({ chainId, onWindowChange, poolAddress, window }: Pool
257257
<PoolChartWrapper $height={chartHeight}>
258258
<ResponsiveContainer height="100%" width="100%">
259259
<ComposedChart
260+
barCategoryGap={upToSmall ? '24%' : '18%'}
260261
data={chartData}
261262
margin={{ top: 16, right: 0, bottom: 8, left: 0 }}
262-
barCategoryGap={upToSmall ? '24%' : '18%'}
263263
>
264264
<CartesianGrid stroke={rgba(theme.subText, 0.12)} vertical={false} />
265265
<XAxis
@@ -268,8 +268,8 @@ const PoolEarningChart = ({ chainId, onWindowChange, poolAddress, window }: Pool
268268
minTickGap={24}
269269
stroke={theme.subText}
270270
tick={{ fill: theme.subText, fontSize: 12 }}
271-
tickFormatter={(value: number) => formatAxisTimeLabel(value, resolvedWindow)}
272271
tickLine={false}
272+
tickFormatter={(value: number) => formatAxisTimeLabel(value, resolvedWindow)}
273273
/>
274274
<YAxis
275275
axisLine={false}
@@ -320,22 +320,22 @@ const PoolEarningChart = ({ chainId, onWindowChange, poolAddress, window }: Pool
320320
direction={upToSmall ? 'column' : 'row'}
321321
gap={upToSmall ? 12 : 20}
322322
justify="center"
323-
width={upToSmall ? '100%' : 'fit-content'}
324323
sx={{ margin: '0 auto' }}
324+
width={upToSmall ? '100%' : 'fit-content'}
325325
>
326-
<Stack height={breakdownChartSize} position="relative" width={breakdownChartSize} sx={{ flexShrink: 0 }}>
326+
<Stack height={breakdownChartSize} position="relative" sx={{ flexShrink: 0 }} width={breakdownChartSize}>
327327
<ResponsiveContainer height="100%" width="100%">
328328
<PieChart>
329329
<Pie
330-
data={pieData}
331-
dataKey="value"
330+
cornerRadius={4}
332331
cx="50%"
333332
cy="50%"
333+
data={pieData}
334+
dataKey="value"
334335
innerRadius="60%"
335336
outerRadius="100%"
336337
paddingAngle={3}
337338
stroke="transparent"
338-
cornerRadius={4}
339339
>
340340
{pieData.map(item => (
341341
<Cell fill={item.color} key={item.key} />
@@ -346,10 +346,10 @@ const PoolEarningChart = ({ chainId, onWindowChange, poolAddress, window }: Pool
346346

347347
<Stack
348348
align="center"
349-
position="absolute"
350-
textAlign="center"
351349
justify="center"
350+
position="absolute"
352351
sx={{ inset: 0, pointerEvents: 'none' }}
352+
textAlign="center"
353353
>
354354
<Text color={theme.subText} fontSize={14}>
355355
Total Earn

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/PoolEarningReward.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ const RewardCardItem = ({ apr, chainIcon, chainName, from, icon, name, to, token
213213
return (
214214
<RewardCard>
215215
<HStack align="center" gap={8} wrap="wrap">
216-
<HStack flex="0 0 auto" align="flex-end">
216+
<HStack align="flex-end" flex="0 0 auto">
217217
<TokenLogo size={24} src={icon} />
218218
<TokenLogo size={16} src={chainIcon} translateLeft translateTop />
219219
</HStack>
@@ -259,11 +259,11 @@ const RewardCardItem = ({ apr, chainIcon, chainName, from, icon, name, to, token
259259

260260
<Stack position="relative">
261261
<ProgressBar
262+
backgroundColor={rgba(theme.white, 0.08)}
262263
color="#05966B"
263264
height="16px"
264265
percent={progressPercent}
265266
width="100%"
266-
backgroundColor={rgba(theme.white, 0.08)}
267267
/>
268268
<ProgressLabelWrapper $width={`${Math.max(progressPercent, 12)}%`}>
269269
<Text color={theme.white} fontSize={12} fontWeight={600}>

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/TopMetricsStrip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const EllipsisText = styled(Text)`
6666
const MetricValue = ({ value }: { value: ReactNode }) => {
6767
if (typeof value === 'string' || typeof value === 'number') {
6868
return (
69-
<EllipsisText fontWeight={500} color="text">
69+
<EllipsisText color="text" fontWeight={500}>
7070
{value}
7171
</EllipsisText>
7272
)
@@ -80,7 +80,7 @@ const TopMetricsStrip = ({ items, split = false }: { items: TopMetricItem[]; spl
8080
<MetricsGrid $columns={items.length} $split={split}>
8181
{items.map(metric => (
8282
<MetricCard $split={split} key={metric.label}>
83-
<EllipsisText fontSize={14} color="subText">
83+
<EllipsisText color="subText" fontSize={14}>
8484
{metric.label}
8585
</EllipsisText>
8686
<MetricValue value={metric.value} />

0 commit comments

Comments
 (0)