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 ;
}