From 611edca768e0da80657bdb27255171122f4374be Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 18 Dec 2024 13:49:56 +0800 Subject: [PATCH 1/6] init --- packages/kit/src/components/TxItem/index.tsx | 22 ++++++++++ .../stories/SignatureConfirmation.tsx | 43 +++++++++++++++++++ .../views/Developer/pages/Gallery/index.tsx | 11 +++++ packages/shared/src/routes/gallery.ts | 1 + 4 files changed, 77 insertions(+) create mode 100644 packages/kit/src/components/TxItem/index.tsx create mode 100644 packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx diff --git a/packages/kit/src/components/TxItem/index.tsx b/packages/kit/src/components/TxItem/index.tsx new file mode 100644 index 00000000000..8a83cacc1ab --- /dev/null +++ b/packages/kit/src/components/TxItem/index.tsx @@ -0,0 +1,22 @@ +import type { IXStackProps, IYStackProps } from '@onekeyhq/components'; +import { SizableText, XStack, YStack } from '@onekeyhq/components'; + +type ITxItemTextProsp = IXStackProps & { + label?: string; +}; + +type ITxItemProps = IYStackProps & { + label?: string; + value?: string; +}; + +export function TxItem({ children, label, value, ...rest }: ITxItemProps) { + return ( + + + {label} + + {value} + + ); +} diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx new file mode 100644 index 00000000000..d145bc875f0 --- /dev/null +++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx @@ -0,0 +1,43 @@ +import type { IYStackProps } from '@onekeyhq/components'; +import { SizableText, YStack } from '@onekeyhq/components'; + +import { Layout } from './utils/Layout'; + +// do not use this demo-only component +function FakeWrapper({ children, ...rest }: IYStackProps) { + return ( + + {children} + + ); +} + +function YourComponentDemo() { + return ( + + 123 + + ); +} + +const SignatureConfirmationGallery = () => ( + , + }, + ]} + /> +); + +export default SignatureConfirmationGallery; diff --git a/packages/kit/src/views/Developer/pages/Gallery/index.tsx b/packages/kit/src/views/Developer/pages/Gallery/index.tsx index 604539a114c..5e959c81cf4 100644 --- a/packages/kit/src/views/Developer/pages/Gallery/index.tsx +++ b/packages/kit/src/views/Developer/pages/Gallery/index.tsx @@ -473,6 +473,13 @@ const LetterAvatarGallery = LazyLoadPage( ), ); +const SignatureConfirmationGallery = LazyLoadPage( + () => + import( + '@onekeyhq/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation' + ), +); + export const galleryScreenList: { name: EGalleryRoutes; component: ComponentType; @@ -685,4 +692,8 @@ export const galleryScreenList: { name: EGalleryRoutes.LetterAvatarGallery, component: LetterAvatarGallery, }, + { + name: EGalleryRoutes.SignatureConfirmationGallery, + component: SignatureConfirmationGallery, + }, ]; diff --git a/packages/shared/src/routes/gallery.ts b/packages/shared/src/routes/gallery.ts index 2d6a5a66eb4..47a0d002936 100644 --- a/packages/shared/src/routes/gallery.ts +++ b/packages/shared/src/routes/gallery.ts @@ -75,4 +75,5 @@ export enum EGalleryRoutes { ComponentTradingViewGallery = 'component-TradingView', PasswordKeyboardGallery = 'component-PasswordKeyboard', LetterAvatarGallery = 'component-LetterAvatar', + SignatureConfirmationGallery = 'component-SignatureConfirmation', } From 8b3c2d9776d6af13a573c044a0d09b46e1a69681 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 25 Dec 2024 17:12:31 +0800 Subject: [PATCH 2/6] components and demo --- .../DAppRequestLayout/DAppSiteMark.tsx | 31 +- .../stories/SignatureConfirmation.tsx | 574 +++++++++++++++++- 2 files changed, 575 insertions(+), 30 deletions(-) diff --git a/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx b/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx index d4f7c44ca66..3d50b457140 100644 --- a/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx +++ b/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx @@ -47,7 +47,7 @@ function DAppSiteMark({ const defaultStyle = { bg: '$bgSubdued', borderColor: '$borderSubdued', - textColor: '$textSubdued', + textColor: '$text', iconName: null, iconColor: null, }; @@ -89,43 +89,24 @@ function DAppSiteMark({ }, [urlSecurityInfo?.level]); return ( - - + + - + - + {content} {riskyStyle.iconName && riskyStyle.iconColor ? ( ) : null} diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx index d145bc875f0..2ccbb156e37 100644 --- a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx +++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx @@ -1,9 +1,33 @@ -import type { IYStackProps } from '@onekeyhq/components'; -import { SizableText, YStack } from '@onekeyhq/components'; +import { StyleSheet } from 'react-native'; + +import type { + IBadgeType, + ISizableTextProps, + IYStackProps, +} from '@onekeyhq/components'; +import { + Accordion, + Alert, + Badge, + Icon, + IconButton, + ScrollView, + SizableText, + XStack, + YStack, +} from '@onekeyhq/components'; + +import { NetworkAvatar } from '../../../../../../components/NetworkAvatar'; +import { Token } from '../../../../../../components/Token'; +import { DAppSiteMark } from '../../../../../DAppConnection/components/DAppRequestLayout'; import { Layout } from './utils/Layout'; -// do not use this demo-only component +import type { ITokenProps } from '../../../../../../components/Token'; + +/* + do not use this demo-only component +*/ function FakeWrapper({ children, ...rest }: IYStackProps) { return ( ; +} + +function SignatureDetailItemValue(props: ISizableTextProps) { + return ; +} + +type ISignatureDetailItemType = IYStackProps; + +function SignatureDetailItem(props: ISignatureDetailItemType) { + return ; +} + +SignatureDetailItem.Label = SignatureDetailItemLabel; +SignatureDetailItem.Value = SignatureDetailItemValue; + +/* + Address item +*/ +function SignatureAddressDetailItem({ + label, + address, + tags, + ...rest +}: { + label: string; + address: string; + tags?: { + type: IBadgeType; + name: string; + }[]; +} & ISignatureDetailItemType) { + return ( + + {label} + {address} + {tags?.length ? ( + + {tags.map((tag) => ( + + {tag.name} + + ))} + + ) : null} + + ); +} + +/* + Network item +*/ +function SignatureNetworkDetailItem({ + label, + networkId, + ...rest +}: { + label: string; + networkId: string; +} & ISignatureDetailItemType) { + return ( + + {label} + + + Ethereum + + + ); +} + +/* + Asset item +*/ +function SignatureAssetDetailItem({ + type, + label, + showNetwork, + amount, + symbol, + editable, + tokenProps, + ...rest +}: { + type?: 'token' | 'nft'; + label: string; + amount: string; + symbol: string; + editable?: boolean; + showNetwork?: boolean; + tokenProps?: Omit; +} & ISignatureDetailItemType) { + return ( + + {label} + + + + { + console.log('clicked'); + }, + p: '$1', + m: '$-1', + borderRadius: '$2', + userSelect: 'none', + hoverStyle: { + bg: '$bgSubdued', + }, + pressStyle: { + bg: '$bgActive', + }, + focusable: true, + focusVisibleStyle: { + outlineColor: '$focusRing', + outlineWidth: 2, + outlineStyle: 'solid', + outlineOffset: 0, + }, + })} + > + {amount ? ( + {amount} + ) : null} + {symbol} + {editable ? ( + + ) : null} + + {showNetwork ? ( + + Ethereum + + ) : null} + + + + ); +} + +function DataViewer() { + return ( + + jason data here... + + ); +} + +function SignatureMessageSection() { + return ( + + Message + + + ); +} + +function SignatureAdvanceSection() { + return ( + + + + + {({ open }: { open: boolean }) => ( + <> + + Advance + + + + + + )} + + + + + + + {[ + { isActive: true, title: 'Data' }, + { isActive: false, title: 'ABI' }, + { isActive: false, title: 'Hex' }, + ].map((item) => ( + { + console.log('clicked'); + }} + > + + {item.title} + + + ))} + + + + + + + + + + + ); +} + +/* + Demo +*/ function YourComponentDemo() { return ( - - 123 + + {/* maps alerts */} + {MOCK_DATA.alert.map((alert) => ( + + ))} + + {/* sitemark */} + + + {/* map items */} + {MOCK_DATA.items.map((item) => { + if (item.type === 'address') { + return ( + ({ + ...tag, + type: tag.type as IBadgeType, + }))} + /> + ); + } + + if (item.type === 'network') { + return ( + + ); + } + + if (item.type === 'token' || item.type === 'nft') { + return ( + + ); + } + + return ( + + {item.label} + {item.value} + + ); + })} + + {/* Custom item */} + + { + console.log('clicked'); + }} + > + Resource + + + + 0 Energy + 268 Energy + + + The fee required for this transaction will be automatically deducted + + + + {/* Message */} + + + {/* Advance */} + ); } From 5ca9e132f187e118ea96f321ecbb7be20ba4bbe6 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 25 Dec 2024 17:25:03 +0800 Subject: [PATCH 3/6] reset dappsitemark component --- .../stories/SignatureConfirmation.tsx | 574 +++++++++++++++++- 1 file changed, 569 insertions(+), 5 deletions(-) diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx index d145bc875f0..2ccbb156e37 100644 --- a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx +++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx @@ -1,9 +1,33 @@ -import type { IYStackProps } from '@onekeyhq/components'; -import { SizableText, YStack } from '@onekeyhq/components'; +import { StyleSheet } from 'react-native'; + +import type { + IBadgeType, + ISizableTextProps, + IYStackProps, +} from '@onekeyhq/components'; +import { + Accordion, + Alert, + Badge, + Icon, + IconButton, + ScrollView, + SizableText, + XStack, + YStack, +} from '@onekeyhq/components'; + +import { NetworkAvatar } from '../../../../../../components/NetworkAvatar'; +import { Token } from '../../../../../../components/Token'; +import { DAppSiteMark } from '../../../../../DAppConnection/components/DAppRequestLayout'; import { Layout } from './utils/Layout'; -// do not use this demo-only component +import type { ITokenProps } from '../../../../../../components/Token'; + +/* + do not use this demo-only component +*/ function FakeWrapper({ children, ...rest }: IYStackProps) { return ( ; +} + +function SignatureDetailItemValue(props: ISizableTextProps) { + return ; +} + +type ISignatureDetailItemType = IYStackProps; + +function SignatureDetailItem(props: ISignatureDetailItemType) { + return ; +} + +SignatureDetailItem.Label = SignatureDetailItemLabel; +SignatureDetailItem.Value = SignatureDetailItemValue; + +/* + Address item +*/ +function SignatureAddressDetailItem({ + label, + address, + tags, + ...rest +}: { + label: string; + address: string; + tags?: { + type: IBadgeType; + name: string; + }[]; +} & ISignatureDetailItemType) { + return ( + + {label} + {address} + {tags?.length ? ( + + {tags.map((tag) => ( + + {tag.name} + + ))} + + ) : null} + + ); +} + +/* + Network item +*/ +function SignatureNetworkDetailItem({ + label, + networkId, + ...rest +}: { + label: string; + networkId: string; +} & ISignatureDetailItemType) { + return ( + + {label} + + + Ethereum + + + ); +} + +/* + Asset item +*/ +function SignatureAssetDetailItem({ + type, + label, + showNetwork, + amount, + symbol, + editable, + tokenProps, + ...rest +}: { + type?: 'token' | 'nft'; + label: string; + amount: string; + symbol: string; + editable?: boolean; + showNetwork?: boolean; + tokenProps?: Omit; +} & ISignatureDetailItemType) { + return ( + + {label} + + + + { + console.log('clicked'); + }, + p: '$1', + m: '$-1', + borderRadius: '$2', + userSelect: 'none', + hoverStyle: { + bg: '$bgSubdued', + }, + pressStyle: { + bg: '$bgActive', + }, + focusable: true, + focusVisibleStyle: { + outlineColor: '$focusRing', + outlineWidth: 2, + outlineStyle: 'solid', + outlineOffset: 0, + }, + })} + > + {amount ? ( + {amount} + ) : null} + {symbol} + {editable ? ( + + ) : null} + + {showNetwork ? ( + + Ethereum + + ) : null} + + + + ); +} + +function DataViewer() { + return ( + + jason data here... + + ); +} + +function SignatureMessageSection() { + return ( + + Message + + + ); +} + +function SignatureAdvanceSection() { + return ( + + + + + {({ open }: { open: boolean }) => ( + <> + + Advance + + + + + + )} + + + + + + + {[ + { isActive: true, title: 'Data' }, + { isActive: false, title: 'ABI' }, + { isActive: false, title: 'Hex' }, + ].map((item) => ( + { + console.log('clicked'); + }} + > + + {item.title} + + + ))} + + + + + + + + + + + ); +} + +/* + Demo +*/ function YourComponentDemo() { return ( - - 123 + + {/* maps alerts */} + {MOCK_DATA.alert.map((alert) => ( + + ))} + + {/* sitemark */} + + + {/* map items */} + {MOCK_DATA.items.map((item) => { + if (item.type === 'address') { + return ( + ({ + ...tag, + type: tag.type as IBadgeType, + }))} + /> + ); + } + + if (item.type === 'network') { + return ( + + ); + } + + if (item.type === 'token' || item.type === 'nft') { + return ( + + ); + } + + return ( + + {item.label} + {item.value} + + ); + })} + + {/* Custom item */} + + { + console.log('clicked'); + }} + > + Resource + + + + 0 Energy + 268 Energy + + + The fee required for this transaction will be automatically deducted + + + + {/* Message */} + + + {/* Advance */} + ); } From e90c6f5ceb2f58dab69cb3c2948b4a20729a3097 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 25 Dec 2024 17:30:34 +0800 Subject: [PATCH 4/6] reset dappsitemark component --- .../DAppRequestLayout/DAppSiteMark.tsx | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx b/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx index 3d50b457140..d4f7c44ca66 100644 --- a/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx +++ b/packages/kit/src/views/DAppConnection/components/DAppRequestLayout/DAppSiteMark.tsx @@ -47,7 +47,7 @@ function DAppSiteMark({ const defaultStyle = { bg: '$bgSubdued', borderColor: '$borderSubdued', - textColor: '$text', + textColor: '$textSubdued', iconName: null, iconColor: null, }; @@ -89,24 +89,43 @@ function DAppSiteMark({ }, [urlSecurityInfo?.level]); return ( - - + + - + - + {content} {riskyStyle.iconName && riskyStyle.iconColor ? ( ) : null} From 94712509fa0a3249fc28c6507f34c727b4583692 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 25 Dec 2024 17:32:57 +0800 Subject: [PATCH 5/6] remove unused folder and file --- packages/kit/src/components/TxItem/index.tsx | 22 -------------------- 1 file changed, 22 deletions(-) delete mode 100644 packages/kit/src/components/TxItem/index.tsx diff --git a/packages/kit/src/components/TxItem/index.tsx b/packages/kit/src/components/TxItem/index.tsx deleted file mode 100644 index 8a83cacc1ab..00000000000 --- a/packages/kit/src/components/TxItem/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { IXStackProps, IYStackProps } from '@onekeyhq/components'; -import { SizableText, XStack, YStack } from '@onekeyhq/components'; - -type ITxItemTextProsp = IXStackProps & { - label?: string; -}; - -type ITxItemProps = IYStackProps & { - label?: string; - value?: string; -}; - -export function TxItem({ children, label, value, ...rest }: ITxItemProps) { - return ( - - - {label} - - {value} - - ); -} From 601f77138088e51a38df49197f93979a9e90de44 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 25 Dec 2024 17:44:35 +0800 Subject: [PATCH 6/6] fix lint issue --- .../Gallery/Components/stories/SignatureConfirmation.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx index 2ccbb156e37..88109a21c07 100644 --- a/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx +++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import-path/parent-depth */ import { StyleSheet } from 'react-native'; import type { @@ -478,7 +479,7 @@ function YourComponentDemo() { /> ))} - {/* sitemark */} + {/* site mark */} {/* map items */} @@ -538,7 +539,10 @@ function YourComponentDemo() { return ( {item.label} - {item.value} + + {/* @ts-expect-error - fallback case */} + {item.value || ''} + ); })}