Skip to content

Fix/perp share interface #8998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: x
Choose a base branch
from
+193 −149
Open

Fix/perp share interface #8998

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef8b185
fix: update price label and value scaling, enhance layout spacing, an…
Kahnchan Nov 14, 2025
11b30c8
fix: adjust icon size in PositionsRow and update color constants for …
Kahnchan Nov 14, 2025
69c3e89
feat: enhance PreSwapInfoGroup and SwapServiceFeeOverview components …
Kahnchan Nov 14, 2025
68f6fb8
fix: update fee label in PreSwapInfoGroup and add wallet fee translat…
Kahnchan Nov 14, 2025
85ee7dd
fix: update skeleton loading components for improved UI consistency a…
Kahnchan Nov 14, 2025
a416a30
Merge branch 'x' into fix/perp-share-interface
Kahnchan Nov 14, 2025
ec65f42
Merge branch 'x' into fix/perp-share-interface
Kahnchan Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 5 additions & 12 deletions packages/kit/src/views/Perp/components/OrderBook/DefaultLoadingNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,18 +175,11 @@ export function DefaultLoadingNode({
</YStack>
</XStack>

<YStack gap="$1.5">
{MOBILE_ROWS.map((row, index) => (
<Stack
key={index}
h={row.height}
borderRadius={4}
overflow="hidden"
w="100%"
>
<Skeleton w={row.width} h="100%" radius="square" />
</Stack>
))}
<YStack gap="$1.5" flex={1}>
<Skeleton w="100%" h={MOBILE_ROW_HEIGHT} radius="round" />
<Skeleton w="80%" h={MOBILE_ROW_HEIGHT} radius="round" />
<Skeleton w="60%" h={MOBILE_ROW_HEIGHT} radius="round" />
<Skeleton w="40%" h={MOBILE_ROW_HEIGHT} radius="round" />
</YStack>
</YStack>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/kit/src/views/Perp/components/OrderInfoPanel/Components/PositionsRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ const PositionRowDesktopPnL = memo(() => {
variant="tertiary"
size="small"
icon="ShareOutline"
iconSize="$4"
iconSize="$3.5"
onPress={onShare}
cursor="pointer"
/>
Expand Down Expand Up @@ -734,7 +734,7 @@ const PositionRowMobileHeader = memo(() => {
variant="tertiary"
size="small"
icon="ShareOutline"
iconSize="$4"
iconSize="$3.5"
onPress={onShare}
cursor="pointer"
/>
Expand Down
36 changes: 5 additions & 31 deletions packages/kit/src/views/Perp/components/OrderInfoPanel/List/CommonTableListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
ScrollView,
SizableText,
Skeleton,
Spinner,
Stack,
Tabs,
Tooltip,
Expand Down Expand Up @@ -558,38 +559,11 @@ export function CommonTableListView({
listLoading ? (
<YStack
flex={1}
justifyContent="flex-start"
alignItems="flex-start"
p="$5"
gap="$3"
justifyContent="center"
alignItems="center"
p="$20"
>
{[...Array(5)].map((_, index) => (
<XStack
key={index}
flex={1}
py="$1.5"
px="$3"
alignItems="center"
minWidth={minTableWidth}
{...(index % 2 === 1 && {
backgroundColor: '$bgSubdued',
})}
>
{columns.map((column, colIndex) => (
<XStack
key={column.key}
{...getColumnStyle(column)}
justifyContent={calcCellAlign(column.align) as any}
alignItems="center"
{...(colIndex === 0 && {
pl: '$2',
})}
>
<Skeleton h="$3" w="$16" />
</XStack>
))}
</XStack>
))}
<Spinner size="large" />
</YStack>
) : (
<YStack
Expand Down
2 changes: 1 addition & 1 deletion packages/kit/src/views/Perp/components/PerpOrderBook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ function MobileHeader() {
</DashText>

{showSkeleton ? (
<Skeleton width={120} height={16} />
<Skeleton width={180} height={14} radius="round" />
) : (
<XStack alignItems="center" gap={6}>
<SizableText size="$bodySmMedium" color={fundingColor}>
Expand Down
16 changes: 9 additions & 7 deletions packages/kit/src/views/Perp/components/PositionShare/ShareContentRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function ShareContentRenderer({
const pnlDisplayText = getPnlDisplayInfo(data, pnlDisplayMode);
const pnlFontSize =
pnlDisplayText.length > 6
? scaledFonts.pnl * (1 - (pnlDisplayText.length - 6) * 0.055)
? scaledFonts.pnl * (1 - (pnlDisplayText.length - 6) * 0.06)
: scaledFonts.pnl;

const imageLoadCountRef = useRef(0);
Expand Down Expand Up @@ -228,7 +228,7 @@ export function ShareContentRenderer({
(scaledFonts.priceLabel * layout.lineHeight) / 2
}
left={scaledPadding}
gap={layout.priceGap}
gap={layout.priceGap * scale}
>
<SizableText
fontSize={scaledFonts.priceLabel}
Expand Down Expand Up @@ -260,7 +260,7 @@ export function ShareContentRenderer({
(scaledFonts.priceLabel * layout.lineHeight) / 2
}
left={scaledPadding}
gap={layout.priceGap}
gap={layout.priceGap * scale}
>
<SizableText
fontSize={scaledFonts.priceLabel}
Expand All @@ -270,7 +270,9 @@ export function ShareContentRenderer({
lineHeight={scaledFonts.priceLabel * layout.lineHeight}
>
{priceType === 'exit'
? 'Exit Price'
? appLocale.intl.formatMessage({
id: ETranslations.perp_position_exit_price,
})
: appLocale.intl.formatMessage({
id: ETranslations.perp_position_mark_price,
})}
Expand Down Expand Up @@ -315,8 +317,8 @@ export function ShareContentRenderer({
justifyContent="space-between"
width="100%"
>
<YStack gap={layout.priceGap}>
{/* <SizableText
<YStack gap={layout.priceGap * scale}>
<SizableText
fontSize={scaledFonts.priceLabel}
fontWeight="600"
color={colors.textTertiary}
Expand All @@ -326,7 +328,7 @@ export function ShareContentRenderer({
{appLocale.intl.formatMessage({
id: ETranslations.referral_referral_link,
})}
</SizableText> */}
</SizableText>
<SizableText
fontSize={scaledFonts.priceValue}
fontWeight="600"
Expand Down
21 changes: 11 additions & 10 deletions packages/kit/src/views/Perp/components/PositionShare/ShareImageGenerator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const ShareImageGenerator = forwardRef<
const pnlDisplayText = getPnlDisplayInfo(data, config.pnlDisplayMode);
const pnlFontSize =
pnlDisplayText.length > 6
? fonts.pnl * (1 - (pnlDisplayText.length - 6) * 0.045)
? fonts.pnl * (1 - (pnlDisplayText.length - 6) * 0.06)
: fonts.pnl;

const selectedBackground = isProfit
Expand Down Expand Up @@ -238,7 +238,9 @@ export const ShareImageGenerator = forwardRef<
ctx.globalAlpha = layout.labelOpacity;
ctx.fillText(
priceType === 'exit'
? 'Exit Price'
? appLocale.intl.formatMessage({
id: ETranslations.perp_position_exit_price,
})
: appLocale.intl.formatMessage({
id: ETranslations.perp_position_mark_price,
}),
Expand Down Expand Up @@ -289,7 +291,6 @@ export const ShareImageGenerator = forwardRef<

const qrCodeImg = await loadImage(qrCodeDataUrl);
if (qrCodeImg) {
// Draw QR code centered in the white background
ctx.drawImage(
qrCodeImg,
qrCodeX + qrCodePadding,
Expand All @@ -307,13 +308,13 @@ export const ShareImageGenerator = forwardRef<
ctx.textBaseline = 'middle';
ctx.font = toCanvasFont(fonts.priceLabel);
ctx.globalAlpha = layout.labelOpacity;
// ctx.fillText(
// appLocale.intl.formatMessage({
// id: ETranslations.referral_referral_link,
// }),
// padding,
// rectY + rectHeight / 2 - layout.referralOffset,
// );
ctx.fillText(
appLocale.intl.formatMessage({
id: ETranslations.referral_referral_link,
}),
padding,
rectY + rectHeight / 2 - layout.referralOffset,
);
ctx.globalAlpha = 1;
ctx.font = toCanvasFont(fonts.priceValue);
const referralTextX = padding;
Expand Down
22 changes: 11 additions & 11 deletions packages/kit/src/views/Perp/components/PositionShare/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,22 @@ export function getCanvasConfig(currentSize = 1080): ICanvasConfig {

colors: {
background: ['#1a1a1a', '#0a0a0a', '#1a1a1a'],
long: '#24FF00',
long: '#44D62C',
short: '#FF0000',
textPrimary: '#ffffff',
textSecondary: '#FFFFFF',
textTertiary: '#ffffff',
referralBackground: '#00000080',
sideLongBackground: '#0C5300',
sideShortBackground: '#630A0A',
referralBackground: '#000000B3',
sideLongBackground: '#073100',
sideShortBackground: '#3F0000',
},

fonts: {
coin: scale(67.5, currentSize),
side: scale(24, currentSize),
side: scale(28, currentSize),
pnl: scale(180, currentSize),
priceLabel: scale(25, currentSize),
priceValue: scale(25, currentSize),
priceLabel: scale(28, currentSize),
priceValue: scale(28, currentSize),
},

layout: {
Expand All @@ -133,12 +133,12 @@ export function getCanvasConfig(currentSize = 1080): ICanvasConfig {
pnlY: scale(426, currentSize, true),
entryPriceY: scale(580, currentSize, true),
markPriceY: scale(700, currentSize, true),
priceSpacingY: scale(40, currentSize, true),
priceSpacingY: scale(50, currentSize, true),
badgePaddingX: scale(20, currentSize, true),
badgePaddingY: scale(18, currentSize, true),
tokenSpacing: scale(40, currentSize, true),
priceGap: scale(1.5, currentSize),
referralOffset: scale(20, currentSize, true),
tokenSpacing: scale(48, currentSize, true),
priceGap: scale(8, currentSize),
referralOffset: scale(25, currentSize, true),
lineHeight: 1.2,
badgeRadius: scale(58, currentSize, true),
labelOpacity: 0.5,
Expand Down
35 changes: 28 additions & 7 deletions packages/kit/src/views/Swap/components/PreSwapInfoGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Select,
SizableText,
Skeleton,
Stack,
XStack,
YStack,
} from '@onekeyhq/components';
Expand All @@ -25,6 +26,7 @@ import {
import { useSwapStepNetFeeLevelAtom } from '../../../states/jotai/contexts/swap';

import PreSwapInfoItem from './PreSwapInfoItem';
import { ProtocolFeeComparisonList } from './ProtocolFeeComparisonList';

interface IPreSwapInfoGroupProps {
preSwapData: ISwapPreSwapData;
Expand All @@ -38,6 +40,8 @@ const PreSwapInfoGroup = ({
const intl = useIntl();
const [settings] = useSettingsPersistAtom();
const [swapStepNetFeeLevel] = useSwapStepNetFeeLevelAtom();

const serviceFee = Number(preSwapData?.fee?.percentageFee ?? 0.3);
const networkFeeLevelArray = useMemo(() => {
const feeArray = [
ESwapNetworkFeeLevel.LOW,
Expand Down Expand Up @@ -215,15 +219,32 @@ const PreSwapInfoGroup = ({
) : null}
<PreSwapInfoItem
title={intl.formatMessage({
id: ETranslations.provider_ios_popover_onekey_fee,
id: ETranslations.provider_ios_popover_wallet_fee,
})}
value={fee}
popoverContent={intl.formatMessage(
{
id: ETranslations.provider_ios_popover_onekey_fee_content,
},
{ num: `${preSwapData?.fee?.percentageFee ?? '0'}%` },
)}
popoverContent={
<Stack gap="$4">
<Stack gap="$1">
<SizableText size="$bodyMd" color="$textSubdued">
{intl.formatMessage(
{
id: ETranslations.provider_ios_popover_onekey_fee_content,
},
{ num: `${serviceFee}%` },
)}
</SizableText>
<SizableText size="$bodyMd" color="$textSubdued">
{intl.formatMessage(
{
id: ETranslations.provider_ios_popover_onekey_fee_content_2,
},
{ num: `${serviceFee}%` },
)}
</SizableText>
</Stack>
<ProtocolFeeComparisonList serviceFee={serviceFee} />
</Stack>
}
/>
{preSwapData.supportNetworkFeeLevel ? (
<PreSwapInfoItem
Expand Down
12 changes: 8 additions & 4 deletions packages/kit/src/views/Swap/components/PreSwapInfoItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from '@onekeyhq/components';

interface IPreSwapInfoItemProps {
popoverContent?: string;
popoverContent?: string | React.ReactNode;
title: string;
value: string | React.ReactNode;
}
Expand Down Expand Up @@ -37,9 +37,13 @@ const PreSwapInfoItem = ({
renderContent={() => {
return (
<Stack p="$4">
<SizableText size="$bodyMd" color="$text">
{popoverContent}
</SizableText>
{typeof popoverContent === 'string' ? (
<SizableText size="$bodyMd" color="$text">
{popoverContent}
</SizableText>
) : (
popoverContent
)}
</Stack>
);
}}
Expand Down
Loading
Loading