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..88109a21c07 --- /dev/null +++ b/packages/kit/src/views/Developer/pages/Gallery/Components/stories/SignatureConfirmation.tsx @@ -0,0 +1,611 @@ +/* eslint-disable import-path/parent-depth */ +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'; + +import type { ITokenProps } from '../../../../../../components/Token'; + +/* + do not use this demo-only component +*/ +function FakeWrapper({ children, ...rest }: IYStackProps) { + return ( + + {children} + + ); +} + +/* + Mock data for demo +*/ +const MOCK_DATA = { + alert: [ + 'The spender is an EOA and may be a scam address', + "You're using permit authorization, ensure the dApp is trustworthy to avoid asset loss.", + ], + items: [ + { + type: 'network', + label: 'Network', + networkId: 'evm--1', + }, + { + type: 'address', + label: 'Account address', + address: '0x13b30304dAa2129a21e42df663e8f49C49b276e8', + tags: [{ type: 'success', name: 'Wallet 1 / Account #1' }], + }, + { + type: 'address', + label: 'To', + address: '0x76f3f64cb3cd19debee51436df630a342b736c24', + tags: [ + { type: 'critical', name: 'Contract' }, + { type: 'default', name: 'Uniswap V1' }, + { type: 'warning', name: 'Initial interact' }, + ], + }, + { + type: 'token', + label: 'Asset', + token: { + type: 'ERC-20', + address: '', + isNative: true, + name: 'Ethereum', + symbol: 'ETH', + decimals: 18, + totalSupply: '', + logoURI: + 'https://uni.onekey-asset.com/server-service-indexer/evm--1/tokens/address--1721282106924.png', + }, + amount: '100', + amountParsed: '1.000000000000000000', + networkId: 'evm--1', + showNetwork: false, + editable: true, + }, + { + type: 'token', + label: 'Pay', + token: { + type: 'ERC-20', + address: '0xdac17f958d2ee523a2206206994597c13d831ec7', + isNative: false, + name: 'Tether USD', + symbol: 'USDT', + decimals: 6, + totalSupply: '', + logoURI: + 'https://uni.onekey-asset.com/server-service-indexer/evm--1/tokens/address-0xdac17f958d2ee523a2206206994597c13d831ec7-1722246302921.png', + }, + amount: '100000', + amountParsed: '0.100000', + networkId: 'evm--1', + showNetwork: true, + }, + { + type: 'nft', + label: 'Asset', + nft: { + address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d', + type: 'ERC-721', + id: '8762', + isNative: false, + name: 'BoredApeYachtClub', + symbol: 'BAYC', + decimals: null, + totalSupply: '', + logoURI: '', + metadata: { + image: + 'https://nft-cdn.alchemy.com/eth-mainnet/8abd7e99c75d2165047dd68583b4593b', + source: + 'https://quicknode-content.quicknode-ipfs.com/ipfs/QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/8762', + attributes: [ + { value: 'Discomfort', trait_type: 'Mouth' }, + { value: 'Silver Stud', trait_type: 'Earring' }, + { value: 'Robot', trait_type: 'Eyes' }, + { value: 'Sushi Chef Headband', trait_type: 'Hat' }, + { value: 'Prom Dress', trait_type: 'Clothes' }, + { value: 'Purple', trait_type: 'Background' }, + { value: 'Blue', trait_type: 'Fur' }, + ], + }, + }, + amount: '1', + }, + { + type: 'nft', + label: 'Asset', + nft: { + address: '0x22c36bfdcef207f9c0cc941936eff94d4246d14a', + type: 'ERC-1155', + id: '1', + isNative: false, + name: 'Bored Ape Chemistry Club', + symbol: '', + decimals: null, + totalSupply: '', + logoURI: '', + metadata: { + name: 'M2 Mutant Serum', + image: + 'https://nft-cdn.alchemy.com/eth-mainnet/bc0be4896821c7f29b5bd6828632ea0e', + source: + 'https://quicknode-content.quicknode-ipfs.com/ipfs/QmdtARLUPQeqXrVcNzQuRqr9UCFoFvn76X9cdTczt4vqfw/1', + attributes: [{ value: 'M2', trait_type: 'Serum Type' }], + }, + }, + amount: '2', + }, + ], +}; + +/* + Primitive item +*/ +function SignatureDetailItemLabel(props: ISizableTextProps) { + 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 ( + + {/* maps alerts */} + {MOCK_DATA.alert.map((alert) => ( + + ))} + + {/* site mark */} + + + {/* 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} + + {/* @ts-expect-error - fallback case */} + {item.value || ''} + + + ); + })} + + {/* Custom item */} + + { + console.log('clicked'); + }} + > + Resource + + + + 0 Energy + 268 Energy + + + The fee required for this transaction will be automatically deducted + + + + {/* Message */} + + + {/* Advance */} + + + ); +} + +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', }