chore: migrate inscription text components

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();

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 && <TokenBalance balance={totalBalance} />}
     >
       {/* <Text>Collectibles</Text> */}
-      {collectibles.map((collectible: Collectible, index: number) => (
-        <Text key={`collectible-${index}`}>collectible.metadata.name</Text>
-      ))}
+      {/* {collectibles.map((collectible: Collectible, index: number) => ( */}
+      <>
+        {/* <Text key={`collectible-${index}`}>
+            {'name' in collectible ? collectible.name : collectible.metadata.name}
+          </Text> */}
+        <CollectibleCard
+          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: '',
+                },
+              ],
+            },
+          }}
+        />
+      </>
+      {/* ))} */}
 
       {/* <CollectibleCard
         collectible={{
@@ -64,26 +99,6 @@ export function CollectiblesWidget({ collectibles, totalBalance }: CollectiblesW
           },
         }}
       /> */}
-      {/* <CollectibleCard
-        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',
-        }}
-      /> */}
     </CollectiblesWidgetLayout>
   );
 }

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

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",

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

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<Theme extends BaseTheme> = BoxProps<Theme> & HasChildren;

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

@@ -25,8 +25,7 @@ export function CollectibleCard({ collectible }: CollectibleCardProps) {
   return (
     <CollectibleImage
       source={imageSource}
-      // alt={isOrdinal ? String(collectible.name) : collectible.metadata.name}
-      alt="test"
+      alt={isOrdinal ? String(collectible.name) : collectible.metadata.name}
     />
   );
 }

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 {

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;

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();

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() {

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 (
+    <img
+      src={src}
+      style={{ width: '100%', height: '100%', aspectRatio: '1 / 1', objectFit: 'cover' }}
+    />
+  );
+}

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 (
+    <Flex alignItems="flex-start" flexDirection="column" justifyContent="center">
+      {icon && icon}
+      <styled.span textStyle="label.01">{title}</styled.span>
+      <styled.span textStyle="caption.01">{subtitle}</styled.span>
+      {action ? (
+        <Link color="stacks" onClick={() => action()} textStyle="caption.01" variant="text">
+          {actionLabel}
+        </Link>
+      ) : null}
+    </Flex>
+  );
+}

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 (
+    <Box
+      bg="black"
+      borderRadius="xs"
+      width="100px"
+      height="100px"
+      overflow="hidden"
+      position="relative"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

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 (
+    <Box
+      _after={{
+        content: '""',
+        position: 'absolute',
+        bottom: '0',
+        left: '0',
+        height: '30px',
+        width: '100%',
+        backgroundImage: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1))',
+      }}
+      color="white"
+      fontSize="9px"
+      height="100%"
+      p="space.03"
+      position="relative"
+      overflow="hidden"
+      textAlign="left"
+      width="100%"
+    >
+      <pre>{sanitize(content)}</pre>
+    </Box>
+  );
+}

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