From 7c0ec2b8b4ca86bb84f5f70106593d7e2f21e8a0 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:25:46 +0100
Subject: [PATCH] chore: migrate inscription text components
---
apps/mobile/src/app/_layout.tsx | 1 -
.../collectibles/collectibles-widget.tsx | 63 ++++++++++++-------
.../collectibles/collectibles.mocks.d.ts | 46 --------------
.../collectibles/collectibles.mocks.d.ts.map | 1 -
packages/ui/native.ts | 1 -
packages/ui/package.json | 1 +
.../src/components/collectibles/index.web.ts | 3 +
.../native/collectible-card-layout.native.tsx | 3 +-
.../native/collectible-card.native.tsx | 3 +-
.../native/collectible-html.native.tsx | 3 +-
.../native/collectible-image.native.tsx | 2 +-
.../native/collectible-text.native.tsx | 7 +--
.../web/collectible.layout.web.tsx | 54 ----------------
.../web/image-unavailable.web.tsx | 3 +-
.../components/inscription-image.web.tsx | 11 ++++
.../components/inscription-metadata.web.tsx | 31 +++++++++
.../inscription-preview.layout.web.tsx | 19 ++++++
.../inscription-text.layout.web.tsx | 31 +++++++++
.../web/inscription-preview-card/index.web.ts | 4 ++
.../inscription-preview-card.web.tsx | 39 ++++++++++++
.../collectibles/web/inscription-text.web.tsx | 31 +++++++++
pnpm-lock.yaml | 3 +
22 files changed, 219 insertions(+), 141 deletions(-)
delete mode 100644 apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts
delete mode 100644 apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts.map
delete mode 100644 packages/ui/src/components/collectibles/web/collectible.layout.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-image.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-metadata.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-preview.layout.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-text.layout.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/index.web.ts
create mode 100644 packages/ui/src/components/collectibles/web/inscription-preview-card/inscription-preview-card.web.tsx
create mode 100644 packages/ui/src/components/collectibles/web/inscription-text.web.tsx
diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
index 3c69aca6..1ac33230 100644
--- a/apps/mobile/src/app/_layout.tsx
+++ b/apps/mobile/src/app/_layout.tsx
@@ -28,7 +28,6 @@ export { ErrorBoundary } from 'expo-router';
export const unstable_settings = { initialRouteName: '/' };
initiateI18n();
-persistor.purge();
export default function RootLayout() {
void SplashScreen.hideAsync();
diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx b/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx
index 58e9cde4..a20ae83a 100644
--- a/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx
+++ b/apps/mobile/src/components/widgets/collectibles/collectibles-widget.tsx
@@ -1,6 +1,5 @@
import React, { useRef } from 'react';
-import { Text } from '@leather.io/ui/native';
import { CollectibleCard, SheetRef } from '@leather.io/ui/native';
import { TokenBalance } from '../components/balance/token-balance';
@@ -28,9 +27,45 @@ export function CollectiblesWidget({ collectibles, totalBalance }: CollectiblesW
balance={collectibles.length > 0 && }
>
{/* Collectibles */}
- {collectibles.map((collectible: Collectible, index: number) => (
- collectible.metadata.name
- ))}
+ {/* {collectibles.map((collectible: Collectible, index: number) => ( */}
+ <>
+ {/*
+ {'name' in collectible ? collectible.name : collectible.metadata.name}
+ */}
+
+ >
+ {/* ))} */}
{/* */}
- {/* */}
);
}
diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts b/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts
deleted file mode 100644
index 997e3771..00000000
--- a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export declare const mockTotalBalance: {
- totalUsdBalance: string;
- totalBtcBalance: string;
- totalStxBalance: string;
-};
-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 type Collectible = Ordinal | StacksNft;
-export declare const mockCollectibles: (Ordinal | StacksNft)[];
-//# sourceMappingURL=collectibles.mocks.d.ts.map
\ No newline at end of file
diff --git a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts.map b/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts.map
deleted file mode 100644
index 9f97a2cc..00000000
--- a/apps/mobile/src/components/widgets/collectibles/collectibles.mocks.d.ts.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"collectibles.mocks.d.ts","sourceRoot":"","sources":["collectibles.mocks.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AA2CD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,sBAAsB,EAAE,MAAM,CAAC;QAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;YACjB,UAAU,EAAE,MAAM,CAAC;YACnB,KAAK,EAAE,MAAM,CAAC;YACd,YAAY,CAAC,EAAE,MAAM,CAAC;SACvB,CAAC,CAAC;QACH,UAAU,CAAC,EAAE;YACX,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;SACpB,CAAC;KACH,CAAC;CACH;AAyMD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,gBAAgB,EAAE,CAAC,OAAO,GAAG,SAAS,CAAC,EAAyC,CAAC"}
\ No newline at end of file
diff --git a/packages/ui/native.ts b/packages/ui/native.ts
index 992e18ac..4f8492e2 100644
--- a/packages/ui/native.ts
+++ b/packages/ui/native.ts
@@ -39,4 +39,3 @@ export { SheetHeader } from './src/components/sheet/components/sheet-header.nati
export { RadioButton } from './src/components/radio-button/radio-button.native';
export { Switch } from './src/components/switch/switch.native';
export * from './src/components/collectibles/index.native';
-export { CollectibleCard } from './src/components/collectibles/native/collectible-card.native';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 0cf65c28..6cef0506 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -69,6 +69,7 @@
"@babel/runtime": "7.25.0",
"@leather.io/eslint-config": "workspace:*",
"@leather.io/panda-preset": "workspace:*",
+ "@leather.io/models": "workspace:*",
"@microsoft/api-extractor": "7.47.6",
"@pandacss/dev": "0.46.0",
"@react-native-async-storage/async-storage": "1.23.1",
diff --git a/packages/ui/src/components/collectibles/index.web.ts b/packages/ui/src/components/collectibles/index.web.ts
index 5ee58f5c..3b6b4433 100644
--- a/packages/ui/src/components/collectibles/index.web.ts
+++ b/packages/ui/src/components/collectibles/index.web.ts
@@ -3,3 +3,6 @@ export * from './web/collectible-image.web';
export * from './web/collectible-text.web';
export * from './web/collectible-other.web';
export * from './web/collectible-iframe.web';
+export * from './web/image-unavailable.web';
+export * from './web/inscription-preview-card/index.web';
+export * from './web/collectible-item.layout.web';
diff --git a/packages/ui/src/components/collectibles/native/collectible-card-layout.native.tsx b/packages/ui/src/components/collectibles/native/collectible-card-layout.native.tsx
index a64e09b3..7eb25500 100644
--- a/packages/ui/src/components/collectibles/native/collectible-card-layout.native.tsx
+++ b/packages/ui/src/components/collectibles/native/collectible-card-layout.native.tsx
@@ -1,7 +1,6 @@
import { BaseTheme, BoxProps } from '@shopify/restyle';
-import { Box, Theme } from '@leather.io/ui/native';
-
+import { Box, Theme } from '../../../../native';
import { HasChildren } from '../../../utils/has-children.shared';
type CollectibleCardLayoutProps = BoxProps & HasChildren;
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 1d521110..793a1e0d 100644
--- a/packages/ui/src/components/collectibles/native/collectible-card.native.tsx
+++ b/packages/ui/src/components/collectibles/native/collectible-card.native.tsx
@@ -25,8 +25,7 @@ export function CollectibleCard({ collectible }: CollectibleCardProps) {
return (
);
}
diff --git a/packages/ui/src/components/collectibles/native/collectible-html.native.tsx b/packages/ui/src/components/collectibles/native/collectible-html.native.tsx
index 3f30d763..fb67f372 100644
--- a/packages/ui/src/components/collectibles/native/collectible-html.native.tsx
+++ b/packages/ui/src/components/collectibles/native/collectible-html.native.tsx
@@ -1,7 +1,6 @@
import { WebView } from 'react-native-webview';
-import { Box } from '@leather.io/ui/native';
-
+import { Box } from '../../../../native';
import { CollectibleCardLayout } from './collectible-card-layout.native';
interface CollectibleHtmlProps {
diff --git a/packages/ui/src/components/collectibles/native/collectible-image.native.tsx b/packages/ui/src/components/collectibles/native/collectible-image.native.tsx
index d74e18be..c8aec4a5 100644
--- a/packages/ui/src/components/collectibles/native/collectible-image.native.tsx
+++ b/packages/ui/src/components/collectibles/native/collectible-image.native.tsx
@@ -1,6 +1,6 @@
import { Image } from 'react-native';
-import { Box } from '@leather.io/ui/native';
+import { Box } from '../../../../native';
interface CollectibleImageProps {
alt: string;
diff --git a/packages/ui/src/components/collectibles/native/collectible-text.native.tsx b/packages/ui/src/components/collectibles/native/collectible-text.native.tsx
index 0ace6edb..07670e14 100644
--- a/packages/ui/src/components/collectibles/native/collectible-text.native.tsx
+++ b/packages/ui/src/components/collectibles/native/collectible-text.native.tsx
@@ -1,8 +1,7 @@
import { useEffect, useState } from 'react';
// import { sanitize } from 'dompurify';
-import { Text } from '@leather.io/ui/native';
-
+import { Text } from '../../../../native';
import { CollectibleCardLayout } from './collectible-card-layout.native';
interface CollectibleTextProps {
@@ -21,9 +20,7 @@ export function CollectibleText({ src }: CollectibleTextProps) {
}
const data = await response.json();
setContent(JSON.stringify(data, null, 2));
- } catch (err) {
- console.log('Error fetching content:', err);
- }
+ } catch (err) {}
};
void fetchContent();
diff --git a/packages/ui/src/components/collectibles/web/collectible.layout.web.tsx b/packages/ui/src/components/collectibles/web/collectible.layout.web.tsx
deleted file mode 100644
index 7311d92e..00000000
--- a/packages/ui/src/components/collectibles/web/collectible.layout.web.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Flex, Grid, HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
-
-import { ArrowRotateRightLeftIcon, Spinner } from '@leather.io/ui';
-
-import { LoadingSpinner } from '../../spinner/loading-spinner.web';
-
-interface CollectiblesLayoutProps {
- title: string;
- isLoading: boolean;
- isLoadingMore?: boolean;
- onRefresh(): void;
- subHeader?: React.ReactNode;
- children: React.ReactNode;
-}
-export function CollectiblesLayout({
- title,
- isLoading,
- onRefresh,
- subHeader,
- isLoadingMore,
- children,
-}: CollectiblesLayoutProps) {
- return (
- <>
-
-
-
- {title}
-
- {isLoading ? (
-
- ) : (
- onRefresh()}
- variant="small"
- />
- )}
-
- {subHeader}
-
-
- {children}
-
- {isLoadingMore && }
- >
- );
-}
diff --git a/packages/ui/src/components/collectibles/web/image-unavailable.web.tsx b/packages/ui/src/components/collectibles/web/image-unavailable.web.tsx
index 7e0e32c4..e0070e50 100644
--- a/packages/ui/src/components/collectibles/web/image-unavailable.web.tsx
+++ b/packages/ui/src/components/collectibles/web/image-unavailable.web.tsx
@@ -1,7 +1,6 @@
import { styled } from 'leather-styles/jsx';
-import { Eye1ClosedIcon } from '@leather.io/ui';
-
+import { Eye1ClosedIcon } from '../../../../native';
import { CollectiblePlaceholderLayout } from './collectible-placeholder.layout.web';
export function ImageUnavailable() {
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-image.web.tsx b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-image.web.tsx
new file mode 100644
index 00000000..241170bb
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-image.web.tsx
@@ -0,0 +1,11 @@
+interface InscriptionImageProps {
+ src: string;
+}
+export function InscriptionImage({ src }: InscriptionImageProps) {
+ return (
+
+ );
+}
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-metadata.web.tsx b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-metadata.web.tsx
new file mode 100644
index 00000000..2ec88112
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-metadata.web.tsx
@@ -0,0 +1,31 @@
+import { Flex, styled } from 'leather-styles/jsx';
+
+import { Link } from '../../../../link/link.web';
+
+interface InscriptionMetadataProps {
+ action?(): void;
+ actionLabel?: string;
+ icon?: React.JSX.Element;
+ subtitle: string;
+ title: string;
+}
+export function InscriptionMetadata({
+ action,
+ actionLabel,
+ icon,
+ subtitle,
+ title,
+}: InscriptionMetadataProps) {
+ return (
+
+ {icon && icon}
+ {title}
+ {subtitle}
+ {action ? (
+ action()} textStyle="caption.01" variant="text">
+ {actionLabel}
+
+ ) : null}
+
+ );
+}
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-preview.layout.web.tsx b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-preview.layout.web.tsx
new file mode 100644
index 00000000..26641546
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-preview.layout.web.tsx
@@ -0,0 +1,19 @@
+import { Box, BoxProps } from 'leather-styles/jsx';
+
+import { HasChildren } from '../../../../../utils/has-children.shared';
+
+export function InscriptionPreviewLayout({ children, ...props }: HasChildren & BoxProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-text.layout.web.tsx b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-text.layout.web.tsx
new file mode 100644
index 00000000..96d5ceb4
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/components/inscription-text.layout.web.tsx
@@ -0,0 +1,31 @@
+import { sanitize } from 'dompurify';
+import { Box } from 'leather-styles/jsx';
+
+interface InscriptionTextLayoutProps {
+ content: string;
+}
+export function InscriptionTextLayout({ content }: InscriptionTextLayoutProps) {
+ return (
+
+ {sanitize(content)}
+
+ );
+}
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/index.web.ts b/packages/ui/src/components/collectibles/web/inscription-preview-card/index.web.ts
new file mode 100644
index 00000000..2c875e58
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/index.web.ts
@@ -0,0 +1,4 @@
+export { InscriptionPreviewCard } from './inscription-preview-card.web';
+export { InscriptionTextLayout } from './components/inscription-text.layout.web';
+export { InscriptionPreviewLayout } from './components/inscription-preview.layout.web';
+export { InscriptionImage } from './components/inscription-image.web';
diff --git a/packages/ui/src/components/collectibles/web/inscription-preview-card/inscription-preview-card.web.tsx b/packages/ui/src/components/collectibles/web/inscription-preview-card/inscription-preview-card.web.tsx
new file mode 100644
index 00000000..d46a3c41
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-preview-card/inscription-preview-card.web.tsx
@@ -0,0 +1,39 @@
+import { Flag } from '../../../../../web';
+import { InscriptionMetadata } from './components/inscription-metadata.web';
+
+interface InscriptionPreviewCardProps {
+ action?(): void;
+ actionLabel?: string;
+ hideBorder?: boolean;
+ icon?: React.JSX.Element;
+ image: React.JSX.Element;
+ subtitle: string;
+ title: string;
+}
+export function InscriptionPreviewCard({
+ action,
+ actionLabel,
+ hideBorder,
+ icon,
+ image,
+ subtitle,
+ title,
+}: InscriptionPreviewCardProps) {
+ return (
+
+
+
+ );
+}
diff --git a/packages/ui/src/components/collectibles/web/inscription-text.web.tsx b/packages/ui/src/components/collectibles/web/inscription-text.web.tsx
new file mode 100644
index 00000000..96d5ceb4
--- /dev/null
+++ b/packages/ui/src/components/collectibles/web/inscription-text.web.tsx
@@ -0,0 +1,31 @@
+import { sanitize } from 'dompurify';
+import { Box } from 'leather-styles/jsx';
+
+interface InscriptionTextLayoutProps {
+ content: string;
+}
+export function InscriptionTextLayout({ content }: InscriptionTextLayoutProps) {
+ return (
+
+ {sanitize(content)}
+
+ );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ae1850b..aba91b0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -919,6 +919,9 @@ importers:
'@leather.io/eslint-config':
specifier: workspace:*
version: link:../eslint-config
+ '@leather.io/models':
+ specifier: workspace:*
+ version: link:../models
'@leather.io/panda-preset':
specifier: workspace:*
version: link:../panda-preset