Merge pull request #4722 from leather-wallet/release/recursive-inscriptions

Release/recursive inscriptions

Author: pete-watters

package.json

@@ -122,7 +122,7 @@
   "dependencies": {
     "@bitcoinerlab/secp256k1": "1.0.2",
     "@coinbase/cbpay-js": "1.0.2",
-    "@dlc-link/dlc-tools": "1.0.9",
+    "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.1.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",

scripts/generate-manifest.js

@@ -30,10 +30,15 @@ const environmentIcons = {
   },
 };
 
+const devCsp =
+  "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src https://ordinals.com/; frame-ancestors 'none';";
+
+const prodCsp = `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src https://ordinals.com/; frame-ancestors 'none';`;
+
 const contentSecurityPolicyEnvironment = {
-  development:
-    "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';",
-  production: `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src 'none'; frame-ancestors 'none';`,
+  testing: prodCsp,
+  development: devCsp,
+  production: prodCsp,
 };
 
 const defaultIconEnvironment = {

src/app/common/hooks/use-bitcoin-contracts.ts

@@ -207,17 +207,27 @@ export function useBitcoinContracts() {
     close();
   }
 
-  async function getAllSignedBitcoinContracts(): Promise<BitcoinContractListItem[] | undefined> {
+  async function getAllActiveBitcoinContracts(): Promise<BitcoinContractListItem[] | undefined> {
     const bitcoinContractInterface = await getBitcoinContractInterface();
 
     if (!bitcoinContractInterface) return;
 
+    await bitcoinContractInterface.periodic_check();
     const bitcoinContracts = await bitcoinContractInterface.get_contracts();
-    const signedBitcoinContracts = bitcoinContracts.filter(
-      (bitcoinContract: BitcoinContractListItem) => bitcoinContract.state === 'Signed'
-    );
 
-    return signedBitcoinContracts;
+    const stateOrder = ['Signed', 'Confirmed'];
+
+    const activeBitcoinContracts = bitcoinContracts
+      .filter(
+        (bitcoinContract: BitcoinContractListItem) =>
+          bitcoinContract.state === 'Signed' || bitcoinContract.state === 'Confirmed'
+      )
+      .sort(
+        (a: BitcoinContractListItem, b: BitcoinContractListItem) =>
+          stateOrder.indexOf(a.state) - stateOrder.indexOf(b.state)
+      );
+
+    return activeBitcoinContracts;
   }
 
   function getTransactionDetails(txId: string, bitcoinCollateral: number) {
@@ -239,7 +249,7 @@ export function useBitcoinContracts() {
 
   async function sumBitcoinContractCollateralAmounts(): Promise<Money> {
     let bitcoinContractsCollateralSum = 0;
-    const bitcoinContracts = await getAllSignedBitcoinContracts();
+    const bitcoinContracts = await getAllActiveBitcoinContracts();
     if (!bitcoinContracts) return createMoneyFromDecimal(0, 'BTC');
 
     bitcoinContracts.forEach((bitcoinContract: BitcoinContractListItem) => {
@@ -313,7 +323,7 @@ export function useBitcoinContracts() {
     handleOffer,
     handleAccept,
     handleReject,
-    getAllSignedBitcoinContracts,
+    getAllActiveBitcoinContracts,
     sumBitcoinContractCollateralAmounts,
     sendRpcResponse,
   };

src/app/components/brc20-tokens-loader.tsx

@@ -1,13 +1,13 @@
 import {
   Brc20Token,
-  useBrc20TokensQuery,
+  useGetBrc20TokensQuery,
 } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 
 interface Brc20TokensLoaderProps {
   children(brc20Tokens: Brc20Token[]): React.JSX.Element;
 }
 export function Brc20TokensLoader({ children }: Brc20TokensLoaderProps) {
-  const { data: allBrc20TokensResponse } = useBrc20TokensQuery();
+  const { data: allBrc20TokensResponse } = useGetBrc20TokensQuery();
   const brc20Tokens = allBrc20TokensResponse?.pages
     .flatMap(page => page.brc20Tokens)
     .filter(token => token.length > 0)

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -23,7 +23,7 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
   const [_, meta] = useField('fee');
 
   return (
-    <HStack gap="space.04" width="100%" {...rest}>
+    <HStack gap="space.04" width="100%" {...rest} flexWrap="wrap">
       <HStack alignItems="center" justifyContent="space-between" position="relative" width="100%">
         <HStack alignItems="center" width="100%">
           <Tooltip label={feesInfo} placement="bottom">
@@ -39,7 +39,7 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
         {feeField}
       </HStack>
       {isSponsored && <SponsoredLabel />}
-      {!meta.error && fieldWarning && <WarningLabel>{fieldWarning}</WarningLabel>}
+      {!meta.error && fieldWarning && <WarningLabel width="100%">{fieldWarning}</WarningLabel>}
     </HStack>
   );
 }

src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { AudioIcon } from '@app/ui/components/icons/audio-icon';
+
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { CollectiblePlaceholderLayout } from './collectible-placeholder.layout';
+
+interface CollectibleAudioProps extends Omit<CollectibleItemLayoutProps, 'children'> {
+  icon: ReactNode;
+}
+export function CollectibleAudio({ icon, ...props }: CollectibleAudioProps) {
+  return (
+    <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+      <CollectiblePlaceholderLayout>
+        <AudioIcon size="xl" />
+      </CollectiblePlaceholderLayout>
+    </CollectibleItemLayout>
+  );
+}

src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, useState } from 'react';
+
+import { Iframe } from '@app/ui/components/iframe';
+
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { ImageUnavailable } from '../image-unavailable';
+
+interface CollectibleIframeProps extends Omit<CollectibleItemLayoutProps, 'children'> {
+  icon: ReactNode;
+  src: string;
+}
+export function CollectibleIframe({ icon, src, ...props }: CollectibleIframeProps) {
+  const [isError, setIsError] = useState(false);
+
+  if (isError)
+    return (
+      <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+        <ImageUnavailable />
+      </CollectibleItemLayout>
+    );
+
+  return (
+    <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+      <Iframe
+        aspectRatio="1 / 1"
+        height="100%"
+        objectFit="cover"
+        onError={() => setIsError(true)}
+        src={src}
+        width="100%"
+        zIndex={99}
+      />
+    </CollectibleItemLayout>
+  );
+}

src/app/features/collectibles/components/_collectible-types/collectible-image.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
 import { ImageUnavailable } from '../image-unavailable';
 
 interface CollectibleImageProps extends Omit<CollectibleItemLayoutProps, 'children'> {
   alt?: string;
-  icon: React.JSX.Element;
+  icon: ReactNode;
   src: string;
 }
 export function CollectibleImage(props: CollectibleImageProps) {

src/app/features/collectibles/components/_collectible-types/collectible-placeholder.layout.tsx

@@ -0,0 +1,19 @@
+import { Flex } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+export function CollectiblePlaceholderLayout({ children }: HasChildren) {
+  return (
+    <Flex
+      alignItems="center"
+      bg="accent.component-background-default"
+      flexDirection="column"
+      height="100%"
+      justifyContent="center"
+      textAlign="center"
+      width="100%"
+    >
+      {children}
+    </Flex>
+  );
+}

src/app/features/collectibles/components/bitcoin/inscription.tsx

@@ -7,6 +7,8 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { convertInscriptionToSupportedInscriptionType } from '@app/query/bitcoin/ordinals/inscription.hooks';
 import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
 
+import { CollectibleAudio } from '../_collectible-types/collectible-audio';
+import { CollectibleIframe } from '../_collectible-types/collectible-iframe';
 import { CollectibleImage } from '../_collectible-types/collectible-image';
 import { CollectibleOther } from '../_collectible-types/collectible-other';
 import { InscriptionText } from './inscription-text';
@@ -26,7 +28,32 @@ export function Inscription({ rawInscription }: InscriptionProps) {
   }
 
   switch (inscription.type) {
-    case 'image': {
+    case 'audio':
+      return (
+        <CollectibleAudio
+          icon={<OrdinalIcon size="lg" />}
+          key={inscription.title}
+          onClickCallToAction={() => openInNewTab(inscription.infoUrl)}
+          onClickSend={() => openSendInscriptionModal()}
+          subtitle="Ordinal inscription"
+          title={`# ${inscription.number}`}
+        />
+      );
+    case 'html':
+    case 'svg':
+    case 'video':
+      return (
+        <CollectibleIframe
+          icon={<OrdinalIcon size="lg" />}
+          key={inscription.title}
+          onClickCallToAction={() => openInNewTab(inscription.infoUrl)}
+          onClickSend={() => openSendInscriptionModal()}
+          src={inscription.src}
+          subtitle="Ordinal inscription"
+          title={`# ${inscription.number}`}
+        />
+      );
+    case 'image':
       return (
         <CollectibleImage
           icon={<OrdinalIcon size="lg" />}
@@ -38,8 +65,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           title={`# ${inscription.number}`}
         />
       );
-    }
-    case 'text': {
+    case 'text':
       return (
         <InscriptionText
           contentSrc={inscription.contentSrc}
@@ -48,8 +74,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           onClickSend={() => openSendInscriptionModal()}
         />
       );
-    }
-    case 'other': {
+    case 'other':
       return (
         <CollectibleOther
           key={inscription.title}
@@ -61,9 +86,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           <OrdinalIcon />
         </CollectibleOther>
       );
-    }
-    default: {
+    default:
       return null;
-    }
   }
 }