Send btc integrate with tx consolidation logic

package.json

@@ -11,7 +11,7 @@
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
     "@scure/btc-signer": "1.2.1",
-    "@secretkeylabs/xverse-core": "10.0.0",
+    "@secretkeylabs/xverse-core": "11.0.0",
     "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
     "@stacks/transactions": "6.9.0",
@@ -32,12 +32,14 @@
     "classnames": "^2.3.2",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.29.3",
+    "i": "0.3.7",
     "i18next": "^21.9.1",
     "js-sha256": "^0.10.1",
     "jsontokens": "^4.0.1",
     "mixpanel-browser": "^2.47.0",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
+    "npm": "10.4.0",
     "p-queue": "^7.3.4",
     "process": "^0.11.10",
     "qr-code-styling": "^1.5.0",
@@ -55,7 +57,6 @@
     "react-router-dom": "^6.4.0",
     "react-select": "^5.4.0",
     "react-share": "^4.4.1",
-    "react-spinners": "^0.13.7",
     "react-switch": "^7.0.0",
     "react-tabs": "^6.0.2",
     "react-tooltip": "^5.4.0",

src/app/components/accountRow/index.tsx

@@ -8,13 +8,13 @@
 import { CaretDown, DotsThreeVertical } from '@phosphor-icons/react';
 import { Account, currencySymbolMap } from '@secretkeylabs/xverse-core';
 import InputFeedback from '@ui-library/inputFeedback';
+import Spinner from '@ui-library/spinner';
 import { EMPTY_LABEL, LoaderSize, MAX_ACC_NAME_LENGTH } from '@utils/constants';
 import { getAccountGradient } from '@utils/gradient';
 import { isLedgerAccount, validateAccountName } from '@utils/helper';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
-import { MoonLoader } from 'react-spinners';
 import 'react-tooltip/dist/react-tooltip.css';
 import styled from 'styled-components';
 
@@ -293,7 +293,7 @@
       }
       handleRenameAccountModalClose();
     } catch (err) {
       console.error(err);
     } finally {
       setIsAccountNameChangeLoading(false);
     }
@@ -330,7 +330,7 @@
               {isAccountListView && !totalBalance && (
                 <Balance isSelected={isSelected}>
                   {EMPTY_LABEL}
-                  <MoonLoader color="white" size={12} />
+                  <Spinner color="white" size={12} />
                 </Balance>
               )}
             </TransparentSpan>

src/app/components/button/index.tsx

@@ -1,4 +1,4 @@
-import { MoonLoader } from 'react-spinners';
+import Spinner from '@ui-library/spinner';
 import styled from 'styled-components';
 
 interface ButtonProps {
@@ -117,7 +117,7 @@ function ActionButton({
         disabled={disabled || processing}
       >
         {processing ? (
-          <MoonLoader color="white" size={10} />
+          <Spinner color="white" size={10} />
         ) : (
           <>
             {src && <ButtonImage src={src} />}
@@ -138,7 +138,7 @@ function ActionButton({
       warning={warning}
     >
       {processing ? (
-        <MoonLoader color="#12151E" size={12} />
+        <Spinner color="#12151E" size={12} />
       ) : (
         <>
           {src && <ButtonImage src={src} />}

src/app/components/confirmBtcTransaction/index.tsx

@@ -9,10 +9,10 @@
 import { btcTransaction, Transport } from '@secretkeylabs/xverse-core';
 import Callout from '@ui-library/callout';
 import { StickyHorizontalSplitButtonContainer, StyledP } from '@ui-library/common.styled';
+import Spinner from '@ui-library/spinner';
 import { isLedgerAccount } from '@utils/helper';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MoonLoader } from 'react-spinners';
 import styled from 'styled-components';
 import SendLayout from '../../layouts/sendLayout';
 import TransactionSummary from './transactionSummary';
@@ -60,8 +60,12 @@
   onCancel: () => void;
   onBackClick?: () => void;
   confirmDisabled?: boolean;
-  getFeeForFeeRate?: (feeRate: number, useEffectiveFeeRate?: boolean) => Promise<number>;
+  getFeeForFeeRate?: (
+    feeRate: number,
+    useEffectiveFeeRate?: boolean,
+  ) => Promise<number | undefined>;
   onFeeRateSet?: (feeRate: number) => void;
+  feeRate?: number;
 };
 
 function ConfirmBtcTransaction({
@@ -82,6 +86,7 @@
   confirmDisabled = false,
   getFeeForFeeRate,
   onFeeRateSet,
+  feeRate,
 }: Props) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -109,7 +114,7 @@
 
   const handleConnectAndConfirm = async () => {
     if (!selectedAccount) {
       console.error('No account selected');
       return;
     }
     setIsButtonDisabled(true);
@@ -130,7 +135,7 @@
     try {
       onConfirm(transport);
     } catch (err) {
       console.error(err);
       setIsTxRejected(true);
     }
   };
@@ -146,7 +151,7 @@
 
   return isLoading ? (
     <LoaderContainer>
-      <MoonLoader color="white" size={50} />
+      <Spinner size={50} />
     </LoaderContainer>
   ) : (
     <>
@@ -168,6 +173,7 @@
           isPartialTransaction={isPartialTransaction}
           getFeeForFeeRate={getFeeForFeeRate}
           onFeeRateSet={onFeeRateSet}
+          feeRate={feeRate}
           isSubmitting={isSubmitting}
         />
         {!isLoading && (

src/app/components/confirmBtcTransaction/transactionSummary.tsx

@@ -3,18 +3,28 @@ import useWalletSelector from '@hooks/useWalletSelector';
 
 import AssetModal from '@components/assetModal';
 import TransferFeeView from '@components/transferFeeView';
-import { btcTransaction } from '@secretkeylabs/xverse-core';
+import useBtcFeeRate from '@hooks/useBtcFeeRate';
+import { btcTransaction, getBtcFiatEquivalent } from '@secretkeylabs/xverse-core';
+import SelectFeeRate from '@ui-components/selectFeeRate';
 import Callout from '@ui-library/callout';
 import { BLOG_LINK } from '@utils/constants';
 import BigNumber from 'bignumber.js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+import AmountWithInscriptionSatribute from './itemRow/amountWithInscriptionSatribute';
 import ReceiveSection from './receiveSection';
 import TransferSection from './transferSection';
 import TxInOutput from './txInOutput/txInOutput';
 import { getNetAmount, isScriptOutput, isSpendOutput } from './utils';
 
+const Container = styled.div((props) => ({
+  background: props.theme.colors.elevation1,
+  borderRadius: 12,
+  padding: '12px 16px',
+  marginBottom: 12,
+}));
+
 const ScriptCallout = styled(Callout)`
   margin-bottom: ${(props) => props.theme.space.s};
 `;
@@ -32,12 +42,12 @@ type Props = {
   inputs: btcTransaction.EnhancedInput[];
   outputs: btcTransaction.EnhancedOutput[];
   feeOutput?: btcTransaction.TransactionFeeOutput;
-
-  // TODO: these are for txn screens which we will tackle next
-  // TODO: By having these as generic props here, we can use the generic set fee rate component for all use cases
-  getFeeForFeeRate?: (feeRate: number, useEffectiveFeeRate?: boolean) => Promise<number>;
+  getFeeForFeeRate?: (
+    feeRate: number,
+    useEffectiveFeeRate?: boolean,
+  ) => Promise<number | undefined>;
   onFeeRateSet?: (feeRate: number) => void;
-  // TODO: use this to disable the edit fee component when it is created
+  feeRate?: number;
   isSubmitting?: boolean;
 };
 
@@ -49,15 +59,19 @@ function TransactionSummary({
   isSubmitting,
   getFeeForFeeRate,
   onFeeRateSet,
+  feeRate,
 }: Props) {
   const [inscriptionToShow, setInscriptionToShow] = useState<
     btcTransaction.IOInscription | undefined
   >(undefined);
 
-  const { network } = useWalletSelector();
+  const { network, fiatCurrency, btcFiatRate } = useWalletSelector();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const { t: rareSatsT } = useTranslation('translation', { keyPrefix: 'RARE_SATS' });
+  const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
+
   const { btcAddress, ordinalsAddress } = useWalletSelector();
+  const { data: recommendedFees } = useBtcFeeRate();
 
   const hasOutputScript = outputs.some((output) => isScriptOutput(output));
 
@@ -85,6 +99,11 @@ function TransactionSummary({
   const feesHaveInscribedRareSats = feeOutput?.inscriptions.length || feeOutput?.satributes.length;
   const showInscribeRareSatWarning = paymentHasInscribedRareSats || feesHaveInscribedRareSats;
 
+  const satsToFiat = (sats: string) =>
+    getBtcFiatEquivalent(new BigNumber(sats), new BigNumber(btcFiatRate)).toNumber().toFixed(2);
+
+  const showFeeSelector = !!(feeRate && getFeeForFeeRate && onFeeRateSet);
+
   return (
     <>
       {inscriptionToShow && (
@@ -131,7 +150,7 @@ function TransactionSummary({
 
       <TransactionDetailComponent title={t('NETWORK')} value={network.type} />
 
-      {feeOutput && (
+      {feeOutput && !showFeeSelector && (
         <TransferFeeView
           fee={new BigNumber(feeOutput.amount)}
           currency={t('SATS')}
@@ -140,6 +159,31 @@ function TransactionSummary({
           onShowInscription={setInscriptionToShow}
         />
       )}
+      {feeOutput && showFeeSelector && (
+        <Container>
+          <SelectFeeRate
+            fee={feeOutput.amount.toString()}
+            feeUnits="Sats"
+            feeRate={feeRate.toString()}
+            feeRateUnits={tUnits('SATS_PER_VB')}
+            setFeeRate={(newFeeRate) => onFeeRateSet(+newFeeRate)}
+            baseToFiat={satsToFiat}
+            fiatUnit={fiatCurrency}
+            getFeeForFeeRate={getFeeForFeeRate}
+            feeRates={{
+              medium: recommendedFees?.regular,
+              high: recommendedFees?.priority,
+            }}
+            feeRateLimits={recommendedFees?.limits}
+            isLoading={isSubmitting}
+          />
+          <AmountWithInscriptionSatribute
+            inscriptions={feeOutput.inscriptions}
+            satributes={feeOutput.satributes}
+            onShowInscription={setInscriptionToShow}
+          />
+        </Container>
+      )}
     </>
   );
 }

src/app/components/confirmBtcTransaction/transferSection.tsx

@@ -73,6 +73,13 @@ function TransferSection({
     satributesFromPayment.push(...item.satributes);
   });
 
+  const hasData =
+    showAmount ||
+    (isPartialTransaction && inputFromOrdinal.length > 0) ||
+    outputsFromOrdinal.length > 0;
+
+  if (!hasData) return null;
+
   return (
     <Container>
       <Header spaceBetween>

src/app/components/speedUpTransaction/btc.tsx

@@ -71,6 +71,7 @@ function SpeedUpBtcTransaction({
   isBroadcasting,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SPEED_UP_TRANSACTION' });
+  const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
   const { btcFiatRate, fiatCurrency } = useWalletSelector();
   const theme = useTheme();
 
@@ -91,7 +92,7 @@ function SpeedUpBtcTransaction({
             value={rbfTxSummary?.currentFeeRate}
             displayType="text"
             thousandSeparator
-            suffix=" Sats /vB"
+            suffix={` ${tUnits('SATS_PER_VB')}`}
           />
         </HighlightedText>
       </DetailText>
@@ -124,7 +125,7 @@ function SpeedUpBtcTransaction({
                         value={obj.feeRate}
                         displayType="text"
                         thousandSeparator
-                        suffix=" Sats /vByte"
+                        suffix={` ${tUnits('SATS_PER_VB')}`}
                       />
                     </SecondaryText>
                   </div>
@@ -179,7 +180,7 @@ function SpeedUpBtcTransaction({
                       value={customFeeRate}
                       displayType="text"
                       thousandSeparator
-                      suffix=" Sats /vByte"
+                      suffix={` ${tUnits('SATS_PER_VB')}`}
                     />
                   </SecondaryText>
                 </>

src/app/components/transactionSetting/editBtcFee.tsx

@@ -178,6 +178,7 @@ function EditBtcFee({
   feeOptionSelected,
 }: Props) {
   const { t } = useTranslation('translation');
+
   const { network, btcAddress, btcFiatRate, fiatCurrency, selectedAccount, ordinalsAddress } =
     useWalletSelector();
   const [totalFee, setTotalFee] = useState(fee);
@@ -389,12 +390,12 @@ function EditBtcFee({
               value={feeRateInput?.toString()}
               onChange={onInputEditFeesChange}
             />
-            <FeeText>Sats /vByte</FeeText>
+            <FeeText>{t('UNITS.SATS_PER_VB')}</FeeText>
           </InputContainer>
           <CustomTextsContainer>
             <Row>
               <TotalFeeText typography="body_medium_m" color="white_200">
-                {t('TRANSACTION_SETTING.TOTAL_FEE')}
+                {t('TRANSACTION_SETTING.TOTAL_FEE')}:
               </TotalFeeText>
               <NumericFormat
                 value={totalFee}

src/app/components/transactionSetting/feeItem.tsx

@@ -1,8 +1,8 @@
 import { Bicycle, CarProfile, RocketLaunch } from '@phosphor-icons/react';
 import { ErrorCodes } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
+import Spinner from '@ui-library/spinner';
 import { useTranslation } from 'react-i18next';
-import { MoonLoader } from 'react-spinners';
 import styled from 'styled-components';
 import Theme from 'theme';
 
@@ -160,7 +160,7 @@ function FeeItem({
 
         {!totalFee && !error && (
           <LoaderContainer>
-            <MoonLoader color="white" size={20} />
+            <Spinner color="white" size={20} />
           </LoaderContainer>
         )}
       </TextsContainer>

src/app/components/transferFeeView/index.tsx

@@ -57,6 +57,8 @@ function TransferFeeView({
   onShowInscription = () => {},
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+  const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
+
   const { btcFiatRate, stxBtcRate, fiatCurrency } = useSelector(
     (state: StoreState) => state.walletState,
   );
@@ -112,7 +114,7 @@ function TransferFeeView({
               value={feePerVByte?.toString()}
               displayType="text"
               thousandSeparator
-              suffix=" sats/vB"
+              suffix={` ${tUnits('SATS_PER_VB')}`}
               renderText={(value: string) => (
                 <StyledP typography="body_s" color="white_400">
                   {value}

src/app/routes/index.tsx

@@ -147,10 +147,6 @@ const router = createHashRouter([
         path: 'send-ft',
         element: <SendFtScreen />,
       },
-      {
-        path: 'send-btc',
-        element: <SendBtcScreen />,
-      },
       {
         path: 'add-stx-address-ledger',
         element: <LedgerAddStxAddress />,
@@ -419,6 +415,10 @@ const router = createHashRouter([
     element: <ExtendedScreenContainer />,
     errorElement: <ErrorBoundary />,
     children: [
+      {
+        path: 'send-btc',
+        element: <SendBtcScreen />,
+      },
       {
         path: 'confirm-btc-tx',
         element: <ConfirmBtcTransaction />,