feat: collectibles widget #481

pete-watters · 2024-09-26T05:30:33Z

This PR:

Adds collectibles widget to the native app using mock data
Migrates some similar UI components from the extension to the monorepo

Once the UI package is released I can complete leather-io/extension#5876

Mobile demo

collectibles.mp4

Mobile storybook demo

collectible-storybook.mp4

There are some remaining items to figure out:

An alternative for dompurify.sanitize for text ordinals
Stopping scroll on WebView ordinals
Fixing padding and margin on all widgets @edgarkhanzadian - I'll do this in

codecov · 2024-09-26T05:39:32Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 22.38%. Comparing base (7d1707f) to head (58c3b69).
Report is 1 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev     #481   +/-   ##
=======================================
  Coverage   22.38%   22.38%           
=======================================
  Files         132      132           
  Lines        5521     5521           
  Branches      241      241           
=======================================
  Hits         1236     1236           
  Misses       4285     4285

Components	Coverage Δ
bitcoin	`53.77% <ø> (ø)`
query	`12.05% <ø> (ø)`
utils	`52.45% <ø> (ø)`
crypto	`69.40% <ø> (ø)`
stacks	`53.27% <ø> (ø)`

pete-watters · 2024-09-27T07:04:41Z

packages/ui/src/hooks/use-pressable.web.tsx

@@ -0,0 +1,67 @@
+import { Square, SquareProps } from 'leather-styles/jsx';


I moved this as it was the only other thing using use-events so I can also move that package here.

We use that in CollectibleItemLayout which I migrated here but could revert to the extension if desired.

The hook usePressable is only used once in the extension accounts.tsx = AddAccountAction

pete-watters · 2024-09-27T07:12:18Z

packages/ui/src/components/collectibles/collectibles.shared.tsx

+  src: string;
+}
+
+const mockOrdinals: Ordinal[] = [


I obtained these mocks by logging all the inscriptions we have on Leather Dev wallet and picking out different samples.

The structure here is what we are sending to the components but it seems different than the BIS docs and also what we have in leather.io/query for mock-inscriptions Today I found this other utils that is mapping BIS to this format - createBestInSlotInscription

I think it's OK for now and we can improve this and share the mocks better if needed / ditch these altogether when connecting the API.

pete-watters · 2024-09-27T07:21:15Z

packages/ui/src/components/collectibles/native/collectible-card.native.stories.tsx

+};
+
+export default meta;
+


I added some mocks of what we use to actually render inscriptions here.

Video seems to be handled the same as html / svg in an iframe anyway.

Audio seems to just show an icon now

I can inscribe audio + video on ordinals bot if we think that's useful. For video the network fee is high so it's ~ $392 for what I tested. Audio can be cheaper ~ $122.02.

pete-watters · 2024-09-27T08:54:42Z

packages/ui/src/components/collectibles/native/collectible-html.native.tsx

+export function CollectibleHtml({ src }: CollectibleHtmlProps) {
+  return (
+    <CollectibleCardLayout>
+      <WebView source={{ uri: src }} width={200} height={200} style={{ overflow: 'hidden' }} />


I need to do a bit more work here as I still see some scroll bars

html_scroll.mp4

pete-watters · 2024-09-27T08:59:33Z

apps/mobile/src/components/widgets/collectibles/collectibles-serializer.ts

@@ -0,0 +1,21 @@
+import { type Collectible, type CollectibleCardProps } from '@leather.io/ui/native';


I added this as a way to just get only the data we need to display from the mocks.

Later I found createBestInSlotInscription which is actually giving us this data and more.

I will investigate more when hooking up APIs but maybe it could be good to have a BE proxy for this type of stuff - data we need for App Home for example.

pete-watters · 2024-09-27T09:02:16Z

packages/ui/src/components/collectibles/native/collectible-text.native.tsx

+        - I tried using jsdom as a polyfill but then hit an error Can't resolve 'vm' in jsdom
+        - maybe we should write our own sanitizer?
+        */}
+        {/* {content ? sanitize(content) : ''} */}


I tried using dompurify.sanitize here but it seems not to work on native.

I tried a polyfill of jsdom but then that failed and needed another polyfill so I need to investigate a better way.

Maybe we could run sanitize in the query instead? So that we just provide the data ready to render

packages/ui/src/components/collectibles/native/collectible-card.native.tsx

apps/mobile/src/components/widgets/collectibles/collectibles-widget.layout.tsx

fbwoolf

Looks great, @pete-watters.

kyranjamie · 2024-09-27T11:10:50Z

packages/ui/src/components/collectibles/collectibles.shared.tsx

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


Think this should live in models pkg

I'll move it when connecting to real data

kyranjamie · 2024-09-30T07:14:23Z

packages/ui/src/components/approver/animations/approver-animation.web.tsx

@@ -1,6 +1,6 @@
 import { motion, stagger, useAnimate } from 'framer-motion';
 import { css } from 'leather-styles/css';
-import { HasChildren } from 'src/utils/has-children';
+import { HasChildren } from 'src/utils/has-children.shared';


Can you rebase on dev and make sure there are no src/ imports? Think they should cause type errors on rebase

I rebased and cleaned this up. I think we should add path aliases to the tsconfig to clean up all of the relative path imports. Is there a reason not to do that?

It would mean we need to have the src/ path in ui/tsconfig.json:

"paths": { "leather-styles/*": ["leather-styles/*"], "@components/*": ["src/components/*"], "@icons/*": ["src/icons/*"], "@hooks/*": ["src/hooks/*"], "@utils/*": ["src/utils/*"],

pete-watters force-pushed the feat/222/collectibles-widget branch from e6f0956 to 7c0ec2b Compare September 26, 2024 05:46

pete-watters changed the title ~~Feat/222/collectibles widget~~ feat: collectibles widget Sep 26, 2024

pete-watters force-pushed the feat/222/collectibles-widget branch 2 times, most recently from afdc14d to e8d90a8 Compare September 26, 2024 10:43

pete-watters mentioned this pull request Sep 26, 2024

chore: refactor collectibles UI to UI package leather-io/extension#5876

Closed

pete-watters force-pushed the feat/222/collectibles-widget branch from 3501687 to 2bd391c Compare September 27, 2024 06:30

pete-watters closed this Sep 27, 2024

pete-watters reopened this Sep 27, 2024

pete-watters mentioned this pull request Sep 27, 2024

feat: collectibles widget #458

Closed

pete-watters commented Sep 27, 2024

View reviewed changes

pete-watters force-pushed the feat/222/collectibles-widget branch 3 times, most recently from 5951b4d to 432e828 Compare September 27, 2024 08:51

pete-watters commented Sep 27, 2024

View reviewed changes

packages/ui/src/components/collectibles/native/collectible-card.native.tsx Outdated Show resolved Hide resolved

pete-watters marked this pull request as ready for review September 27, 2024 09:03

pete-watters requested review from kyranjamie, fbwoolf and edgarkhanzadian September 27, 2024 09:03

fbwoolf reviewed Sep 27, 2024

View reviewed changes

apps/mobile/src/components/widgets/collectibles/collectibles-widget.layout.tsx Outdated Show resolved Hide resolved

fbwoolf approved these changes Sep 27, 2024

View reviewed changes

kyranjamie approved these changes Sep 30, 2024

View reviewed changes

pete-watters force-pushed the feat/222/collectibles-widget branch 2 times, most recently from 168c039 to 355ae5b Compare September 30, 2024 09:07

feat: add collectibles widget, ref leather-io/issues#222

58c3b69

pete-watters force-pushed the feat/222/collectibles-widget branch from 355ae5b to 58c3b69 Compare September 30, 2024 09:14

pete-watters added this pull request to the merge queue Sep 30, 2024

Merged via the queue into dev with commit 70d4ae2 Sep 30, 2024
13 checks passed

pete-watters deleted the feat/222/collectibles-widget branch September 30, 2024 09:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: collectibles widget #481

feat: collectibles widget #481

pete-watters commented Sep 26, 2024 •

edited

Loading

codecov bot commented Sep 26, 2024 •

edited

Loading

pete-watters Sep 27, 2024

pete-watters Sep 27, 2024 •

edited

Loading

pete-watters Sep 27, 2024

pete-watters Sep 27, 2024

pete-watters Sep 27, 2024

pete-watters Sep 27, 2024

fbwoolf left a comment

kyranjamie Sep 27, 2024

pete-watters Sep 30, 2024

kyranjamie Sep 30, 2024

pete-watters Sep 30, 2024

		@@ -0,0 +1,67 @@
		import { Square, SquareProps } from 'leather-styles/jsx';

		@@ -0,0 +1,21 @@
		import { type Collectible, type CollectibleCardProps } from '@leather.io/ui/native';

feat: collectibles widget #481

feat: collectibles widget #481

Conversation

pete-watters commented Sep 26, 2024 • edited Loading

codecov bot commented Sep 26, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

pete-watters Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fbwoolf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pete-watters commented Sep 26, 2024 •

edited

Loading

codecov bot commented Sep 26, 2024 •

edited

Loading

pete-watters Sep 27, 2024 •

edited

Loading