From 96ce70044c1b599a9a4e694c4315fcdd454d1465 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Thu, 26 Sep 2024 11:17:03 +0100 Subject: [PATCH] chore: clean code --- apps/mobile/src/components/home/home.tsx | 12 +- .../collectibles/collectibles-serializer.ts | 23 +++ .../collectibles/collectibles-widget.tsx | 27 +--- .../collectibles/collectibles.mocks.tsx | 134 +++++++++++------- .../components/widgets/collectibles/index.ts | 3 + .../src/components/widgets/tokens/index.ts | 2 + .../collectibles/collectibles.shared.tsx | 78 +++++----- .../collectible-card.native.stories.tsx | 100 +++++-------- .../native/collectible-card.native.tsx | 38 +++-- 9 files changed, 213 insertions(+), 204 deletions(-) create mode 100644 apps/mobile/src/components/widgets/collectibles/collectibles-serializer.ts create mode 100644 apps/mobile/src/components/widgets/collectibles/index.ts create mode 100644 apps/mobile/src/components/widgets/tokens/index.ts diff --git a/apps/mobile/src/components/home/home.tsx b/apps/mobile/src/components/home/home.tsx index 03adc73d..76f3782b 100644 --- a/apps/mobile/src/components/home/home.tsx +++ b/apps/mobile/src/components/home/home.tsx @@ -1,8 +1,10 @@ import { AccountsWidget } from '@/components/widgets/accounts/accounts-widget'; -import { CollectiblesWidget } from '@/components/widgets/collectibles/collectibles-widget'; -import { mockCollectibles } from '@/components/widgets/collectibles/collectibles.mocks'; -import { TokensWidget } from '@/components/widgets/tokens/tokens-widget'; -import { getMockTokens, mockTotalBalance } from '@/components/widgets/tokens/tokens.mocks'; +import { + CollectiblesWidget, + mockCollectibles, + serializeCollectibles, +} from '@/components/widgets/collectibles'; +import { TokensWidget, getMockTokens, mockTotalBalance } from '@/components/widgets/tokens'; import { useAccounts } from '@/store/accounts/accounts.read'; import { useWallets } from '@/store/wallets/wallets.read'; import { useLingui } from '@lingui/react'; @@ -19,7 +21,7 @@ export function Home() { diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles-serializer.ts b/apps/mobile/src/components/widgets/collectibles/collectibles-serializer.ts new file mode 100644 index 00000000..5708e7cf --- /dev/null +++ b/apps/mobile/src/components/widgets/collectibles/collectibles-serializer.ts @@ -0,0 +1,23 @@ +import { CollectibleCardProps } from '@leather.io/ui/native'; + +import { type Collectible } from './collectibles.mocks'; + +export function serializeCollectibles(collectibles: Collectible[]): CollectibleCardProps[] { + return collectibles.map(collectible => { + const isOrdinal = 'name' in collectible && 'mimeType' in collectible; + if (isOrdinal) { + return { + type: 'inscription', + name: collectible.title, + src: collectible.src, + mimeType: collectible.mimeType, + }; + } + return { + type: 'stacks', + name: collectible.metadata.name, + src: collectible.metadata.cached_image, + mimeType: null, + }; + }); +} diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx b/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx index 389a43f7..6a7bce3d 100644 --- a/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx +++ b/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx @@ -1,22 +1,20 @@ import React, { useRef } from 'react'; import { CollectibleCard, SheetRef } from '@leather.io/ui/native'; +import { CollectibleCardProps } from '@leather.io/ui/native'; import { TokenBalance } from '../components/balance/token-balance'; import { CollectiblesHeader } from './collectibles-header'; import { CollectiblesWidgetLayout } from './collectibles-widget.layout'; -import { type Collectible } from './collectibles.mocks'; interface CollectiblesWidgetProps { - collectibles: Collectible[]; + collectibles: CollectibleCardProps[]; totalBalance: string; } export function CollectiblesWidget({ collectibles, totalBalance }: CollectiblesWidgetProps) { const sheetRef = useRef(null); - console.log('PETE collectibles', collectibles); - return ( 0 && } > - {collectibles.length && - collectibles.map((collectible: Collectible) => ( - <> - {/* - {'name' in collectible ? collectible.name : collectible.metadata.name} - */} - {/* - // TODO: fix this - If I do this then rebuild the app, it crashes - has to be some issue with the collectible-card.native.tsx OR the mock data - it was working ok before the refactor to the collectibles-widget.tsx - maybe map it to sanitise the data first? - - */} - {/* {collectible && ( */} - - {/* )} */} - - ))} + {collectibles.map((collectible: CollectibleCardProps, index) => ( + + ))} ); } diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.tsx b/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.tsx index a3b6bd32..c4da4413 100644 --- a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.tsx +++ b/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.tsx @@ -45,26 +45,60 @@ const mockOrdinals: Ordinal[] = [ name: 'inscription', src: 'https://ordinals.com/preview/a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949i0', }, - // { - // id: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - // number: 73858867, - // output: '0', - // txid: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062', - // offset: '0', - // address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', - // preview: - // 'https://ordinals.hiro.so/inscription/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - // title: 'Inscription 73858867', - // genesisBlockHeight: 855754, - // genesisBlockHash: '000000000000000000021972c2000a8d347dbac1a2540112fadf81219b188796', - // genesisTimestamp: 1723027746, - // value: '546', - // mimeType: 'text', - // name: 'inscription', - // src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - // }, - // ... (other ordinals) - // on leather dev wallet all seem to be mimeType: 'text' / 'html + { + id: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', + number: 73858867, + output: '0', + txid: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062', + offset: '0', + address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', + preview: + 'https://ordinals.hiro.so/inscription/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', + title: 'Inscription 73858867', + genesisBlockHeight: 855754, + genesisBlockHash: '000000000000000000021972c2000a8d347dbac1a2540112fadf81219b188796', + genesisTimestamp: 1723027746, + value: '546', + mimeType: 'text', + name: 'inscription', + src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', + }, + { + id: 'cd27e71f955e021dd0840aa0544067fc92c3608009f2191a405f9f4910712b78i0', + number: 55549412, + output: '0', + txid: 'cd27e71f955e021dd0840aa0544067fc92c3608009f2191a405f9f4910712b78', + offset: '0', + address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', + preview: + 'https://ordinals.hiro.so/inscription/cd27e71f955e021dd0840aa0544067fc92c3608009f2191a405f9f4910712b78i0', + title: 'Inscription 55549412', + genesisBlockHeight: 825933, + genesisBlockHash: '00000000000000000002f95317315f9d00b2299eb3499b0f499a707506ad6735', + genesisTimestamp: 1705356588, + value: '600', + mimeType: 'image', + name: 'inscription', + src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/cd27e71f955e021dd0840aa0544067fc92c3608009f2191a405f9f4910712b78i0', + }, + { + id: 'e59434da4436cbdcdcf6b7b31fb734d43b304e981a2e3b69092bd6ca83108009i1286', + number: 64484111, + output: '1287', + txid: 'e59434da4436cbdcdcf6b7b31fb734d43b304e981a2e3b69092bd6ca83108009', + offset: '0', + address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', + preview: + 'https://ordinals.hiro.so/inscription/e59434da4436cbdcdcf6b7b31fb734d43b304e981a2e3b69092bd6ca83108009i1286', + title: 'Inscription 64484111', + genesisBlockHeight: 834795, + genesisBlockHash: '00000000000000000000a3f2c9b0459df8eda99abca3c83f0e94a2a224badaba', + genesisTimestamp: 1710504509, + value: '546', + mimeType: 'gltf', + name: 'inscription', + src: 'https://ordinals.com/preview/e59434da4436cbdcdcf6b7b31fb734d43b304e981a2e3b69092bd6ca83108009i1286', + }, ]; export interface StacksNft { @@ -90,36 +124,36 @@ export interface StacksNft { } const mockStacksNfts: StacksNft[] = [ - // { - // token_uri: 'ipfs://ipfs/QmQ63rXC9F7GyLYoYNyqxeiYvbBUvmHmL36PrfYNxpw5sT/90.json', - // metadata: { - // sip: 16, - // name: 'BlockSurvey #90', - // description: 'Worlds First Software License as an NFT', - // image: 'ipfs://QmZXkLMrN2ejpzGv1wk4HgcuL6XbyLVieW3Zm9wyAoDk18/90.png', - // cached_image: - // 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90.png', - // cached_thumbnail_image: - // 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90-thumb.png', - // attributes: [ - // { - // trait_type: 'NightBackground', - // value: 'MidnightMoss', - // display_type: '', - // }, - // { - // trait_type: 'NightLogo', - // value: 'AtomicTangerine', - // display_type: '', - // }, - // { - // trait_type: 'SignatureWhite', - // value: 'SignatureWhite', - // display_type: '', - // }, - // ], - // }, - // }, + { + token_uri: 'ipfs://ipfs/QmQ63rXC9F7GyLYoYNyqxeiYvbBUvmHmL36PrfYNxpw5sT/90.json', + metadata: { + sip: 16, + name: 'BlockSurvey #90', + description: 'Worlds First Software License as an NFT', + image: 'ipfs://QmZXkLMrN2ejpzGv1wk4HgcuL6XbyLVieW3Zm9wyAoDk18/90.png', + cached_image: + 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90.png', + cached_thumbnail_image: + 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90-thumb.png', + attributes: [ + { + trait_type: 'NightBackground', + value: 'MidnightMoss', + display_type: '', + }, + { + trait_type: 'NightLogo', + value: 'AtomicTangerine', + display_type: '', + }, + { + trait_type: 'SignatureWhite', + value: 'SignatureWhite', + display_type: '', + }, + ], + }, + }, // { // token_uri: 'ipfs://ipfs/QmWRQyaVxUjHGjBUoZqGcNjL37VN99jcFwmoB1wZnpjJEg/', // metadata: { diff --git a/apps/mobile/src/components/widgets/collectibles/index.ts b/apps/mobile/src/components/widgets/collectibles/index.ts new file mode 100644 index 00000000..42ac9d40 --- /dev/null +++ b/apps/mobile/src/components/widgets/collectibles/index.ts @@ -0,0 +1,3 @@ +export { CollectiblesWidget } from './collectibles-widget'; +export { serializeCollectibles } from './collectibles-serializer'; +export { mockCollectibles } from './collectibles.mocks'; diff --git a/apps/mobile/src/components/widgets/tokens/index.ts b/apps/mobile/src/components/widgets/tokens/index.ts new file mode 100644 index 00000000..e3a08698 --- /dev/null +++ b/apps/mobile/src/components/widgets/tokens/index.ts @@ -0,0 +1,2 @@ +export { TokensWidget } from './tokens-widget'; +export { getMockTokens, mockTotalBalance } from './tokens.mocks'; diff --git a/packages/ui/src/components/collectibles/collectibles.shared.tsx b/packages/ui/src/components/collectibles/collectibles.shared.tsx index b5bc597f..60eb984a 100644 --- a/packages/ui/src/components/collectibles/collectibles.shared.tsx +++ b/packages/ui/src/components/collectibles/collectibles.shared.tsx @@ -1,40 +1,40 @@ -export interface StacksNft { - token_uri: string; - metadata: { - sip: number; - name: string; - description: string; - image: string; - cached_image: string; - cached_thumbnail_image: string; - attributes?: Array<{ - trait_type: string; - value: string; - display_type?: string; - }>; - properties?: { - collection?: string; - collectionId?: string; - [key: string]: any; - }; - }; -} -export interface Ordinal { - id: string; - number: number; - output: string; - txid: string; - offset: string; - address: string; - preview: string; - title: string; - genesisBlockHeight: number; - genesisBlockHash: string; - genesisTimestamp: number; - value: string; - mimeType: string; - name: string; - src: string; -} +// export interface StacksNft { +// token_uri: string; +// metadata: { +// sip: number; +// name: string; +// description: string; +// image: string; +// cached_image: string; +// cached_thumbnail_image: string; +// attributes?: Array<{ +// trait_type: string; +// value: string; +// display_type?: string; +// }>; +// properties?: { +// collection?: string; +// collectionId?: string; +// [key: string]: any; +// }; +// }; +// } +// export interface Ordinal { +// id: string; +// number: number; +// output: string; +// txid: string; +// offset: string; +// address: string; +// preview: string; +// title: string; +// genesisBlockHeight: number; +// genesisBlockHash: string; +// genesisTimestamp: number; +// value: string; +// mimeType: string; +// name: string; +// src: string; +// } -export type Collectible = Ordinal | StacksNft; +// export type Collectible = Ordinal | StacksNft; diff --git a/packages/ui/src/components/collectibles/native/collectible-card.native.stories.tsx b/packages/ui/src/components/collectibles/native/collectible-card.native.stories.tsx index bfb4cffa..c7b12497 100644 --- a/packages/ui/src/components/collectibles/native/collectible-card.native.stories.tsx +++ b/packages/ui/src/components/collectibles/native/collectible-card.native.stories.tsx @@ -13,86 +13,52 @@ const meta: Meta = { export default meta; +export const OrdinalHtmlCollectibleCardStory = { + args: { + mimeType: 'html', + name: 'Inscription 74703951', + src: 'https://ordinals.com/preview/a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949i0', + type: 'inscription', + }, + argTypes: {}, +} satisfies StoryObj; + export const OrdinalTextCollectibleCardStory = { args: { - collectible: { - id: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - number: 73858867, - output: '0', - txid: '335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062', - offset: '0', - address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', - preview: - 'https://ordinals.hiro.so/inscription/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - title: 'Inscription 73858867', - genesisBlockHeight: 855754, - genesisBlockHash: '000000000000000000021972c2000a8d347dbac1a2540112fadf81219b188796', - genesisTimestamp: 1723027746, - value: '546', - mimeType: 'text', - name: 'inscription', - src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', - }, + mimeType: 'text', + name: 'Inscription 73858867', + src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/335209b72c452f52199ae09e8ce586a451ce452c73326f01f958d8aa8417e062i0', + type: 'inscription', }, argTypes: {}, } satisfies StoryObj; -export const OrdinalHtmlCollectibleCardStory = { +export const OrdinalImageCollectibleCardStory = { + args: { + mimeType: 'image', + name: 'Inscription 55549412', + src: 'https://bis-ord-content.fra1.cdn.digitaloceanspaces.com/ordinals/cd27e71f955e021dd0840aa0544067fc92c3608009f2191a405f9f4910712b78i0', + type: 'inscription', + }, + argTypes: {}, +} satisfies StoryObj; + +export const OrdinalGltfCollectibleCardStory = { args: { - collectible: { - id: 'a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949i0', - number: 74703951, - output: '0', - txid: 'a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949', - offset: '0', - address: 'bc1pwz9n62p9dhjpqcpdmfcrewdnz3nk8jcved242vd2lj9fgvtvwnwscvdyre', - preview: - 'https://ordinals.hiro.so/inscription/a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949i0', - title: 'Inscription 74703951', - genesisBlockHeight: 857719, - genesisBlockHash: '00000000000000000002bc6789fc6742da4958d003d3abff740687a863613a46', - genesisTimestamp: 1724219117, - value: '546', - mimeType: 'html', - name: 'inscription', - src: 'https://ordinals.com/preview/a494e48bf7120c959239e8c544bc821ca4fb5a46e5fff79938943d434f252949i0', - }, + mimeType: 'gltf', + name: 'Inscription 64484111', + src: 'https://ordinals.com/preview/e59434da4436cbdcdcf6b7b31fb734d43b304e981a2e3b69092bd6ca83108009i1286', + type: 'inscription', }, argTypes: {}, } satisfies StoryObj; export const StxNftCollectibleCardStory = { args: { - collectible: { - token_uri: 'ipfs://ipfs/QmQ63rXC9F7GyLYoYNyqxeiYvbBUvmHmL36PrfYNxpw5sT/90.json', - metadata: { - sip: 16, - name: 'BlockSurvey #90', - description: 'Worlds First Software License as an NFT', - image: 'ipfs://QmZXkLMrN2ejpzGv1wk4HgcuL6XbyLVieW3Zm9wyAoDk18/90.png', - cached_image: - 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90.png', - cached_thumbnail_image: - 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90-thumb.png', - attributes: [ - { - trait_type: 'NightBackground', - value: 'MidnightMoss', - display_type: '', - }, - { - trait_type: 'NightLogo', - value: 'AtomicTangerine', - display_type: '', - }, - { - trait_type: 'SignatureWhite', - value: 'SignatureWhite', - display_type: '', - }, - ], - }, - }, + mimeType: null, + name: 'BlockSurvey #90', + src: 'https://assets.hiro.so/api/mainnet/token-metadata-api/SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey/90.png', + type: 'stacks', }, argTypes: {}, } satisfies StoryObj; diff --git a/packages/ui/src/components/collectibles/native/collectible-card.native.tsx b/packages/ui/src/components/collectibles/native/collectible-card.native.tsx index ebb89084..bd8c9f0f 100644 --- a/packages/ui/src/components/collectibles/native/collectible-card.native.tsx +++ b/packages/ui/src/components/collectibles/native/collectible-card.native.tsx @@ -1,35 +1,31 @@ -import { type Collectible } from '../collectibles.shared'; import { CollectibleHtml } from './collectible-html.native'; import { CollectibleImage } from './collectible-image.native'; import { CollectibleText } from './collectible-text.native'; -interface CollectibleCardProps { - collectible: Collectible; +export interface CollectibleCardProps { + name: string; + type: 'inscription' | 'stacks'; + src: string; + mimeType?: string | null; } -export function CollectibleCard({ collectible }: CollectibleCardProps) { - console.log('PETE collectible', collectible); - const isOrdinal = 'name' in collectible; +export function CollectibleCard({ name, type, src, mimeType }: CollectibleCardProps) { + const isOrdinal = type === 'inscription'; - const imageSource = isOrdinal ? collectible.src : collectible.metadata.cached_thumbnail_image; - - console.log('PETE imageSource', imageSource); - - // try hardcoding the imageSource to see if it works if (isOrdinal) { - switch (collectible.mimeType) { + switch (mimeType) { + // TODO: add audio support + // case 'audio': + // return ; case 'text': - return ; + return ; case 'html': - return ; - // Add more cases for other mimeTypes as needed + case 'gltf': + case 'svg': + case 'video': + return ; } } - return ( - - ); + return ; }