Merge pull request #701 from secretkeylabs/vic/more-rc-fixes

Fix balance breakdown label for ordinals and tooltip, batch sign loader for listing

src/app/components/batchPsbtSigning/index.tsx

@@ -66,8 +66,7 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
   const [isSigningComplete, setIsSigningComplete] = useState(false);
   const [signingPsbtIndex, setSigningPsbtIndex] = useState(1);
   const [currentPsbtIndex, setCurrentPsbtIndex] = useState(0);
-  const singlePsbt = psbts.length === 1;
-  const [reviewTransaction, setReviewTransaction] = useState(singlePsbt);
+  const [reviewTransaction, setReviewTransaction] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [parsedPsbts, setParsedPsbts] = useState<ParsedPsbt[]>([]);
   const [isLedgerModalVisible, setIsLedgerModalVisible] = useState(false);
@@ -196,12 +195,6 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
     });
 
     const renderBody = () => {
-      if (hasDuplicateInputs) {
-        // if there are duplicate inputs on the individual transactions, we won't show a summary
-        // and will have to ask the user to review each txn individually
-        return null;
-      }
-
       if (isLoading) {
         return (
           <LoaderContainer>
@@ -210,6 +203,12 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
         );
       }
 
+      if (hasDuplicateInputs) {
+        // if there are duplicate inputs on the individual transactions, we won't show a summary
+        // and will have to ask the user to review each txn individually
+        return null;
+      }
+
       return (
         <>
           <OuterContainer>
@@ -247,7 +246,7 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
         {renderBody()}
         <StyledSheet
           header=""
-          visible={reviewTransaction || hasDuplicateInputs}
+          visible={(reviewTransaction || hasDuplicateInputs) && !isLoading}
           onClose={hasDuplicateInputs ? undefined : onReviewDone}
         >
           <OuterContainer>

src/app/components/btcAddressTypeLabel/index.tsx

@@ -1,5 +1,7 @@
 import * as btc from '@scure/btc-signer';
 import type { BtcAddressType, NetworkType } from '@secretkeylabs/xverse-core';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'react-tooltip';
 import styled from 'styled-components';
 
 const LabelContainer = styled.div((props) => ({
@@ -11,14 +13,35 @@ const LabelContainer = styled.div((props) => ({
 const labelMap: Record<BtcAddressType, string> = {
   native: 'Native SegWit',
   nested: 'Nested SegWit',
-  taproot: 'Taproot',
+  taproot: 'Ordinals',
 };
 
+// TODO: centralize this tooltip with the styles
+const StyledTooltip = styled(Tooltip)`
+  ${(props) => props.theme.typography.body_bold_m}
+  max-width: 200px;
+  background-color: ${(props) => props.theme.colors.white_0};
+  color: #12151e;
+  border-radius: ${(props) => props.theme.space.s};
+  padding: 10px 12px;
+`;
+
 type BtcAddressTypeLabelProps = {
   addressType: BtcAddressType;
 };
 
 export function BtcAddressTypeLabel({ addressType }: BtcAddressTypeLabelProps) {
+  const { t } = useTranslation('translation', { keyPrefix: 'INFORMATION' });
+  if (addressType === 'taproot') {
+    return (
+      <>
+        <LabelContainer id="ordinals_address_anchor">{labelMap[addressType]}</LabelContainer>
+        <StyledTooltip anchorId="ordinals_address_anchor" variant="light">
+          {t('ORDINALS_ADDRESS_TOOLTIP')}
+        </StyledTooltip>
+      </>
+    );
+  }
   return <LabelContainer>{labelMap[addressType]}</LabelContainer>;
 }
 

src/app/components/tooltip/index.tsx

@@ -37,7 +37,7 @@ const StyledCallout = styled(Callout)(() => ({
 }));
 
 type Props = CalloutProps & {
-  target: MutableRefObject<HTMLButtonElement | null>;
+  target: MutableRefObject<HTMLElement | null>;
   positionVertical?: 'top' | 'bottom';
   positionHorizontal?: 'left' | 'right';
 };

src/locales/en.json

@@ -23,6 +23,9 @@
     "OPTIONS": "Options",
     "UNDO": "Undo"
   },
+  "INFORMATION": {
+    "ORDINALS_ADDRESS_TOOLTIP": "These sats are used for your ordinals and runes. They cannot be spent with Xverse wallet."
+  },
   "UNITS": {
     "SATS_PER_VB": "sats/vB"
   },