release v0.20.0 (#29)

* release: v0.19.0 (#607) * release: v0.19.0 * update package-lock * bump xverse core version to fix fee issue --------- Co-authored-by: Yukan <yukanliao@gmail.com> * Build analytics tracking for web-extension (#590) * Build analytics tracking for web-extension * Add `/privacy-preferences` screen * Build analytics tracking for web-extension * Update mixpanel tracking logic * Remove unused wallet action name * Add authorize data collection toggler and popup * Update tracking logic * Add translation keys * Update mixpanel tracking logic * Remove unused imports * Make some code changes after PR review, upgrade `xverse-core` package version * Upgrade `xverse-core` package version * Resolve git conflicts * Handling fees with thresholds (#601) * Handling fees with thresholds * Add margin under the high fees warning * Change the high fees warning position for Ordinals & Brc-20 txs * Show the warning if the initial fee from transaction is greater than the threshold * Add high fee warning for one-step brc20 transfer * update copy --------- Co-authored-by: Yukan <yukanliao@gmail.com> * Refactor ledger-related logic (#586) * Add STX support for Ledger accounts * Update the copy and ledger account import logic * Update the ledger account import logic for STX support * Add `/add-stx-address-ledger` route for adding stx account * Remove the old case handling when there is no `ordinalsAddress` * Add STX address verification with ledger device * Remove the `/send-stx-ledger` path and update `/send-stx` to handle ledger * Handle regular STX transactions * Remove unused `/review-ledger-stx-tx` path, add STX NFT handling * Remove `/review-ledger-ft-tx` and `/send-ft-ledger` routes, update `/send-ft` to support ledger * Enable STX auth requests for ledger accounts that have an STX address * Add link to the auth popup to add the STX Ledger account * Update screen UI for STX NFT sending * Update copy for STX incoming tx signing * Update STX message signing logic * Update STX-related logic for ledger accounts * Update error handling for STX message signing with ledger * Get rid of `findLedgerAccountId` ledger util, move more copy to locales * Fix cropped button container for tx signing popup * Update address index definition for adding stx address * Update address index definition for address verification and stx tx confirmation * Update address index definition for stx jwt auth * Refactor ledger-related logic * Refactor ledger account import * Fix ledger account import when both BTC and STX options are selected * Refactor ledger address verification screen * Refactor ledger tx confirmation screen * Refactor Add stx address screen * Fix `unsignedTx` type * Add `StacksRecipient` type and make some small code fixes * Add `icon` prop for the `ActionButton` component * Change the ledger steps in a callback * Add types for ledger tx state objects * Fix account index for stx account import, update ledger tx types and utils * Change the import path for `StacksRecipient` * Change the steps numeration for ledger account import * Get rid of unused step changing logic for ledger account import * Add more error handling * Update xverse-core version for testing purposes * Remove caret symbol in xverse-core package * Fix CI build * Make a couple of code fixes according to PR review comments * Add more transaltions * Add the `DEFAULT_TRANSITION_OPTIONS` constant * Make separate components for Steps and StepControls for the Ledger account import flow * Fix style imports * Upgrade the `xverse-core` package version * Upgrade `xverse-core` package version * Disable PSBT tx signing for ledger accounts * update xverse-core * package-lock --------- Co-authored-by: Yukan <yukanliao@gmail.com> * release v0.20.0 * chore: bump to xverse-core 1.8.2 for bip322 signing fix * fix: collectibles dashboard should ignore invalid params errors (#33) * fix: put in a quick fix for more location.state serialization bugs (#34) * chore: add support for rare sats in tx confirmation screen (#35) * chore: add support for rare sats in tx confirmation screen * chore: remove logs and fix typo * chore: change unknown icon --------- Co-authored-by: Tim Man <timothyc.man@gmail.com> Co-authored-by: Den <36603049+dhriaznov@users.noreply.github.com> Co-authored-by: Tim Man <tim@secretkeylabs.com> Co-authored-by: fede erbes <fedeerbes@gmail.com>
secretkeylabs · Oct 6, 2023 · 1ce9f04 · 1ce9f04
1 parent f48e78c
commit 1ce9f04
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 97 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "1.8.1",
+    "@secretkeylabs/xverse-core": "1.8.2",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",

diff --git a/src/app/components/rareSatIcon/rareSatIcon.tsx b/src/app/components/rareSatIcon/rareSatIcon.tsx
@@ -3,9 +3,9 @@ import Legendary from '@assets/img/nftDashboard/rareSats/legendary.svg';
 import Mythic from '@assets/img/nftDashboard/rareSats/mythic.svg';
 import Rare from '@assets/img/nftDashboard/rareSats/rare.svg';
 import Uncommon from '@assets/img/nftDashboard/rareSats/uncommon.svg';
+import Unknown from '@assets/img/nftDashboard/rareSats/unknown.svg';
 import { RareSatsType, getRareSatsColorsByRareSatsType } from '@utils/rareSats';
 import styled from 'styled-components';
-import { Question } from '@phosphor-icons/react';
 
 import Theme from '../../../theme';
 
@@ -27,9 +27,6 @@ const Image = styled.img`
   height: 100%;
   zindex: 2;
 `;
-const QuestionIcon = styled(Question)((props) => ({
-  color: props.theme.colors.white_0,
-}));
 type GlowProps = {
   color: string;
   outerColor: string;
@@ -79,27 +76,17 @@ function RareSatIcon({
     mythic: Mythic,
     rare: Rare,
     uncommon: Uncommon,
+    unknown: Unknown,
   }[type];
   const backgroundColor = bgColor ? Theme.colors.background[bgColor] : 'transparent';
   const { color, backgroundColor: outerColor } = getRareSatsColorsByRareSatsType(type);
   return (
     <Container bgColor={backgroundColor} padding={padding}>
       <ImageContainer size={size} dynamicSize={isDynamicSize}>
-        {type === 'unknown' ? (
-          <QuestionIcon size="100%" weight="thin" />
-        ) : (
-          <>
-            {glow && (
-              <Glow
-                color={color}
-                outerColor={outerColor}
-                isCollage={isCollage}
-                isGallery={isGallery}
-              />
-            )}
-            <Image src={src} alt={type} />
-          </>
+        {glow && type !== 'unknown' && (
+          <Glow color={color} outerColor={outerColor} isCollage={isCollage} isGallery={isGallery} />
         )}
+        <Image src={src} alt={type} />
       </ImageContainer>
     </Container>
   );

diff --git a/src/app/hooks/useDetectOrdinalInSignPsbt.ts b/src/app/hooks/useDetectOrdinalInSignPsbt.ts
@@ -1,42 +1,34 @@
-import { getOrdinalIdFromUtxo, Inscription, ParsedPSBT, UTXO } from '@secretkeylabs/xverse-core';
+import { getUtxoOrdinalBundle, ParsedPSBT } from '@secretkeylabs/xverse-core';
 import { useEffect, useState } from 'react';
-import useOrdinalsApi from './useOrdinalsApi';
+import { BundleItem, mapRareSatsAPIResponseToRareSats } from '@utils/rareSats';
 import useWalletSelector from './useWalletSelector';
 
 const useDetectOrdinalInSignPsbt = (parsedPsbt: '' | ParsedPSBT) => {
   const [loading, setLoading] = useState(false);
   const [userReceivesOrdinal, setUserReceivesOrdinal] = useState(false);
-  const [ordinalInfoData, setOrdinalInfoData] = useState<Array<Inscription>>([]);
+  const [bundleItemsData, setBundleItemsData] = useState<BundleItem[]>([]);
   const { ordinalsAddress } = useWalletSelector();
-  const OrdinalsApi = useOrdinalsApi();
-
-  const getOrdinalId = async (utxoHash: string, index: number) => {
-    const utxo: UTXO = {
-      txid: utxoHash,
-      vout: index,
-      status: {
-        confirmed: false,
-      },
-      value: 0,
-    };
-    const data = await getOrdinalIdFromUtxo(utxo);
-    return data;
-  };
 
   async function handleOrdinalAndOrdinalInfo() {
-    const ordinals: Inscription[] = [];
+    const bundleItems: BundleItem[] = [];
     if (parsedPsbt) {
       setLoading(true);
       await Promise.all(
         parsedPsbt.inputs.map(async (input) => {
-          const data = await getOrdinalId(input.txid, input.index);
-          if (data) {
-            const response = await OrdinalsApi.getInscription(data);
-            ordinals.push(response);
-          }
+          const data = await getUtxoOrdinalBundle(input.txid, input.index);
+          console.log({ data });
+
+          const bundle = mapRareSatsAPIResponseToRareSats(data);
+          bundle.items.forEach((item) => {
+            // we don't show unknown items for now
+            if (item.type === 'unknown') {
+              return;
+            }
+            bundleItems.push(item);
+          });
         }),
       );
-      setOrdinalInfoData(ordinals);
+      setBundleItemsData(bundleItems);
       setLoading(false);
       parsedPsbt.outputs.forEach(async (output) => {
         if (output.address === ordinalsAddress) {
@@ -52,7 +44,7 @@ const useDetectOrdinalInSignPsbt = (parsedPsbt: '' | ParsedPSBT) => {
 
   return {
     loading,
-    ordinalInfoData,
+    bundleItemsData,
     userReceivesOrdinal,
   };
 };

diff --git a/src/app/screens/confirmOrdinalTransaction/index.tsx b/src/app/screens/confirmOrdinalTransaction/index.tsx
@@ -63,7 +63,16 @@ function ConfirmOrdinalTransaction() {
   const btcClient = useBtcClient();
   const [recipientAddress, setRecipientAddress] = useState('');
   const location = useLocation();
-  const { fee, feePerVByte, signedTxHex, ordinalUtxo, isRareSat } = location.state;
+
+  // TODO tim: refactor to not use location.state.
+  const { feePerVByte, signedTxHex, ordinalUtxo, isRareSat } = location.state;
+  // this hack is necessary because the browser back/forward buttons
+  // serialize BigNumber objects into plain objects
+  let { fee } = location.state;
+  if (!BigNumber.isBigNumber(fee)) {
+    fee = BigNumber(fee);
+  }
+
   const { selectedOrdinal, selectedSatBundle } = useNftDataSelector();
   const { refetch } = useBtcWalletData();
   const [currentFee, setCurrentFee] = useState(fee);

diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx
@@ -19,6 +19,7 @@ import {
 import { useDispatch } from 'react-redux';
 import { StyledHeading } from '@ui-library/common.styled';
 import Dialog from '@ui-library/dialog';
+import { InvalidParamsError } from '@utils/query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MoonLoader } from 'react-spinners';
@@ -286,7 +287,10 @@ const useNftDashboard = (): NftDashboardState => {
   };
 
   const NftListView = useCallback(() => {
-    if (stacksError || ordinalsError) {
+    if (
+      (stacksError && !(stacksError instanceof InvalidParamsError)) ||
+      (ordinalsError && !(ordinalsError instanceof InvalidParamsError))
+    ) {
       return (
         <ErrorContainer>
           <Wrench size={48} />

diff --git a/...ignPsbtRequest/ordinalDetailComponent.tsx → .../signPsbtRequest/bundleItemsComponent.tsx b/...ignPsbtRequest/ordinalDetailComponent.tsx → .../signPsbtRequest/bundleItemsComponent.tsx
@@ -3,8 +3,11 @@ import { useState } from 'react';
 import { animated, useSpring } from '@react-spring/web';
 import Cross from '@assets/img/dashboard/X.svg';
 import styled from 'styled-components';
-import { Inscription } from '@secretkeylabs/xverse-core';
-import OrdinalImage from '@screens/ordinals/ordinalImage';
+import { BundleItem, getBundleItemSubText } from '@utils/rareSats';
+import { useTranslation } from 'react-i18next';
+import IconOrdinal from '@assets/img/transactions/ordinal.svg';
+import RareSatAsset from '@components/rareSatAsset/rareSatAsset';
+import { getTruncatedAddress } from '@utils/helper';
 
 const Container = styled.div((props) => ({
   display: 'flex',
@@ -64,6 +67,9 @@ const InscriptionText = styled.h1((props) => ({
   marginTop: 24,
   textAlign: 'center',
   color: props.theme.colors.white[0],
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
 }));
 
 const ColumnContainer = styled.div({
@@ -117,21 +123,11 @@ const EyeIcon = styled.img({
 });
 
 interface Props {
-  ordinalInscription: string;
-  ordinalDetail?: string;
-  icon: string;
-  title: string;
-  heading?: string;
-  ordinal?: Inscription;
+  item: BundleItem;
+  userReceivesOrdinal: boolean;
 }
-function OrdinalDetailComponent({
-  ordinalInscription,
-  ordinalDetail,
-  icon,
-  title,
-  heading,
-  ordinal,
-}: Props) {
+function BundleItemsComponent({ item, userReceivesOrdinal }: Props) {
+  const { t } = useTranslation('translation');
   const [showOrdinal, setShowOrdinal] = useState(false);
   const styles = useSpring({
     from: {
@@ -151,6 +147,34 @@ function OrdinalDetailComponent({
   const onCrossClick = () => {
     setShowOrdinal(false);
   };
+  const getItemId = () => {
+    if (item.type === 'inscription') {
+      return item.inscription.id;
+    }
+    if (item.type === 'inscribed-sat' || item.type === 'rare-sat') {
+      return item.number;
+    }
+    return '';
+  };
+  const itemSubText = getBundleItemSubText({
+    satType: item.type,
+    rareSatsType: item.rarity_ranking,
+  });
+  const getDetail = () => {
+    if (item.type === 'inscription' || item.type === 'inscribed-sat') {
+      return item.inscription.content_type;
+    }
+    return itemSubText;
+  };
+  const getTitle = () => {
+    if (item.type === 'inscription') {
+      return t('COMMON.INSCRIPTION');
+    }
+    if (item.type === 'inscribed-sat') {
+      return t('RARE_SATS.INSCRIBED_SAT');
+    }
+    return t('RARE_SATS.RARE_SAT');
+  };
   return (
     <>
       {showOrdinal && (
@@ -162,30 +186,34 @@ function OrdinalDetailComponent({
           </CrossContainer>
           <OrdinalOuterImageContainer>
             <OrdinalImageContainer>
-              <OrdinalImage ordinal={ordinal!} />
+              <RareSatAsset item={item} />
             </OrdinalImageContainer>
-            <InscriptionText>{`Inscription ${ordinal?.number} `}</InscriptionText>
+            <InscriptionText>{`${getTitle()} ${getItemId()} `}</InscriptionText>
           </OrdinalOuterImageContainer>
         </OrdinalBackgroundContainer>
       )}
       <Container>
-        {heading && <RecipientTitleText>{heading}</RecipientTitleText>}
+        <RecipientTitleText>
+          {userReceivesOrdinal
+            ? t('CONFIRM_TRANSACTION.YOU_WILL_RECEIVE')
+            : t('CONFIRM_TRANSACTION.YOU_WILL_TRANSFER')}
+        </RecipientTitleText>
         <RowContainer>
-          <Icon src={icon} />
-          <TitleText>{title}</TitleText>
+          <Icon src={IconOrdinal} />
+          <TitleText>{getTitle()}</TitleText>
           <ColumnContainer>
             <RowContainer>
-              <ValueText>{ordinalInscription}</ValueText>
+              <ValueText>{getTruncatedAddress(String(getItemId()))}</ValueText>
               <TransparentButton onClick={onButtonClick}>
                 <EyeIcon src={Eye} alt="show" />
               </TransparentButton>
             </RowContainer>
-            {ordinalDetail && <SubValueText>{ordinalDetail}</SubValueText>}
+            <SubValueText>{getDetail()}</SubValueText>
           </ColumnContainer>
         </RowContainer>
       </Container>
     </>
   );
 }
 
-export default OrdinalDetailComponent;
+export default BundleItemsComponent;