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 (498a1db) to head (432e828).

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

pete-watters · 2024-09-27T09:03:13Z

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

+
+  if (isOrdinal) {
+    switch (mimeType) {
+      // TODO: add audio support


I didn't implement mimeType === 'audio' yet. It seems like on web we just show a Head phone icon unless I am missing something

Yep, that is correct. We didn't want the user to interact with the controls in the iframe so we just render an icon with a link to the audio.

fbwoolf · 2024-09-27T18:44:36Z

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

+
+import { Widget } from '../widget';
+
+interface CollectiblesWidgetProps {


Suggested change

interface CollectiblesWidgetProps {

interface CollectiblesWidgetLayoutProps {

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

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

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

Draft

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 2 times, most recently from 64beb49 to 5951b4d Compare September 27, 2024 08:46

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

432e828

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

pete-watters commented Sep 27, 2024

View reviewed changes

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

fbwoolf approved these changes Sep 27, 2024

View reviewed changes

kyranjamie approved these changes Sep 30, 2024

View reviewed changes

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

pete-watters Sep 27, 2024

fbwoolf Sep 27, 2024

fbwoolf Sep 27, 2024

fbwoolf left a comment

kyranjamie Sep 27, 2024

kyranjamie 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';


		import { Widget } from '../widget';

		interface CollectiblesWidgetProps {

	interface CollectiblesWidgetProps {
	interface CollectiblesWidgetLayoutProps {

feat: collectibles widget #481

Are you sure you want to change the base?

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

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

pete-watters commented Sep 26, 2024 •

edited

Loading

codecov bot commented Sep 26, 2024 •

edited

Loading

pete-watters Sep 27, 2024 •

edited

Loading