[ENG-3351] feat: exotics v1

package.json

@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "3.1.1",
+    "@secretkeylabs/xverse-core": "4.0.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

src/app/components/assetModal/index.tsx

@@ -0,0 +1,88 @@
+import Cross from '@assets/img/dashboard/X.svg';
+import { animated, useSpring } from '@react-spring/web';
+import OrdinalImage from '@screens/ordinals/ordinalImage';
+import { CondensedInscription, SatRangeInscription } from '@secretkeylabs/xverse-core';
+import styled from 'styled-components';
+
+const TransparentButton = styled.button({
+  background: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: 10,
+});
+
+const CrossContainer = styled.div({
+  display: 'flex',
+  marginTop: 10,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+});
+
+const OrdinalOuterImageContainer = styled.div({
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+const OrdinalImageContainer = styled.div({
+  width: '50%',
+});
+
+const OrdinalBackgroundContainer = styled(animated.div)({
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  position: 'fixed',
+  zIndex: 10,
+  background: 'rgba(18, 21, 30, 0.8)',
+  backdropFilter: 'blur(16px)',
+  padding: 16,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+interface Props {
+  inscription: SatRangeInscription;
+  onClose: () => void;
+}
+
+function AssetModal({ inscription, onClose }: Props) {
+  const consdensedInscription: CondensedInscription = {
+    ...inscription,
+    number: inscription.inscription_number,
+  };
+  const styles = useSpring({
+    from: {
+      opacity: 0,
+      y: 24,
+    },
+    to: {
+      y: 0,
+      opacity: 1,
+    },
+    delay: 100,
+  });
+
+  return (
+    <OrdinalBackgroundContainer style={styles}>
+      <CrossContainer onClick={onClose}>
+        <TransparentButton>
+          <img src={Cross} alt="cross" />
+        </TransparentButton>
+      </CrossContainer>
+      <OrdinalOuterImageContainer>
+        <OrdinalImageContainer>
+          <OrdinalImage ordinal={consdensedInscription} />
+        </OrdinalImageContainer>
+      </OrdinalOuterImageContainer>
+    </OrdinalBackgroundContainer>
+  );
+}
+
+export default AssetModal;

src/app/components/collectibleCollage/collectibleCollage.tsx

@@ -1,7 +1,6 @@
-import RareSatAsset from '@components/rareSatAsset/rareSatAsset';
 import Nft from '@screens/nftDashboard/nft';
-import { NonFungibleToken } from '@secretkeylabs/xverse-core';
-import { BundleItem } from '@utils/rareSats';
+import OrdinalImage from '@screens/ordinals/ordinalImage';
+import { CondensedInscription, NonFungibleToken } from '@secretkeylabs/xverse-core';
 import styled from 'styled-components';
 
 const CollageContainer = styled.div`
@@ -39,10 +38,11 @@ const RemainingAmountOfAssets = styled.div((props) => ({
   },
 }));
 
-function CollectibleCollage({ items }: { items: Array<BundleItem | NonFungibleToken> }) {
+function CollectibleCollage({ items }: { items: Array<CondensedInscription | NonFungibleToken> }) {
   const moreThanFourItems = items.length > 4;
 
-  const isBundleItem = (item: any): boolean => (item as BundleItem).rarity_ranking !== undefined;
+  const isStacksNft = (item: CondensedInscription | NonFungibleToken): boolean =>
+    'asset_identifier' in item;
   return (
     <CollageContainer>
       {items.slice(0, 4).map((item, index) => (
@@ -53,10 +53,10 @@ function CollectibleCollage({ items }: { items: Array<BundleItem | NonFungibleTo
               <p>+{items.length - 4}</p>
             </RemainingAmountOfAssets>
           ) : // Conditionally render RareSatAsset if item is a BundleItem otherwise render Nft
-          isBundleItem(item) ? (
-            <RareSatAsset item={item as BundleItem} isCollage />
-          ) : (
+          isStacksNft(item) ? (
             <Nft asset={item as NonFungibleToken} isGalleryOpen={false} />
+          ) : (
+            <OrdinalImage ordinal={item as CondensedInscription} />
           )}
         </CollageItem>
       ))}

src/app/components/confirmBtcTransactionComponent/bundle.tsx

@@ -0,0 +1,109 @@
+import BundleIcon from '@assets/img/rareSats/satBundle.svg';
+import AssetModal from '@components/assetModal';
+import { CaretDown } from '@phosphor-icons/react';
+import { Bundle, BundleSatRange, SatRangeInscription } from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import Theme from 'theme';
+import BundleItem from './bundleItem';
+
+interface BundleItemContainerProps {
+  addMargin: boolean;
+}
+
+const BundleItemsContainer = styled.div<BundleItemContainerProps>`
+  margin-top: ${(props) => (props.addMargin ? props.theme.space.m : 0)};
+`;
+
+const SatsBundleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.space.s};
+  border-radius: ${(props) => props.theme.space.s};
+  padding: ${(props) => props.theme.space.m};
+  background-color: ${(props) => props.theme.colors.elevation1};
+`;
+
+const SatsBundleButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${(props) => props.theme.colors.elevation1};
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const BundleTitle = styled(StyledP)`
+  margin-left: ${(props) => props.theme.space.s};
+`;
+
+const BundleValue = styled(StyledP)`
+  margin-right: ${(props) => props.theme.space.xs};
+`;
+
+const Title = styled(StyledP)((props) => ({
+  marginBottom: props.theme.space.xs,
+}));
+
+function SatsBundle({ bundle, title }: { bundle: Bundle; title?: string }) {
+  const [showBundleDetail, setShowBundleDetail] = useState(false);
+  const [inscriptionToShow, setInscriptionToShow] = useState<SatRangeInscription | undefined>(
+    undefined,
+  );
+
+  const { t } = useTranslation('translation');
+
+  return (
+    <>
+      {inscriptionToShow && (
+        <AssetModal
+          onClose={() => setInscriptionToShow(undefined)}
+          inscription={inscriptionToShow}
+        />
+      )}
+      <SatsBundleContainer>
+        {title && <Title typography="body_medium_m">{title}</Title>}
+        <SatsBundleButton
+          type="button"
+          onClick={() => setShowBundleDetail((prevState) => !prevState)}
+        >
+          <Row>
+            <img src={BundleIcon} alt="bundle" />
+            <BundleTitle typography="body_medium_m" color="white_200">
+              {t('RARE_SATS.SATS_BUNDLE')}
+            </BundleTitle>
+          </Row>
+          <Row>
+            <BundleValue typography="body_medium_m" color="white_0">{`${bundle.totalExoticSats} ${t(
+              'NFT_DASHBOARD_SCREEN.RARE_SATS',
+            )}`}</BundleValue>
+            <CaretDown color={Theme.colors.white_0} size={16} />
+          </Row>
+        </SatsBundleButton>
+
+        {showBundleDetail &&
+          bundle.satRanges.map((item: BundleSatRange, index: number) => (
+            <BundleItemsContainer key={`${item.block}-${item.offset}`} addMargin={index === 0}>
+              <BundleItem
+                item={item}
+                ordinalEyePressed={(inscription: SatRangeInscription) => {
+                  // show ordinal modal to show asset
+                  setInscriptionToShow(inscription);
+                }}
+                showDivider={index !== bundle.satRanges.length - 1}
+              />
+            </BundleItemsContainer>
+          ))}
+      </SatsBundleContainer>
+    </>
+  );
+}
+
+export default SatsBundle;