Merge pull request #694 from secretkeylabs/release/v0.25.0

release: v0.25.0 to main
secretkeylabs · Dec 6, 2023 · 49e1bd5 · 49e1bd5
2 parents 3858d8e + 7b04bfc
commit 49e1bd5
Show file tree

Hide file tree

Showing 38 changed files with 1,082 additions and 545 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -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": "4.0.0",
+    "@secretkeylabs/xverse-core": "5.0.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -24,6 +24,7 @@ import {
 } from '@secretkeylabs/xverse-core';
 import { useMutation } from '@tanstack/react-query';
 import Callout from '@ui-library/callout';
+import { StickyHorizontalSplitButtonContainer } from '@ui-library/common.styled';
 import { CurrencyTypes } from '@utils/constants';
 import BigNumber from 'bignumber.js';
 import { ReactNode, useEffect, useState } from 'react';
@@ -40,35 +41,8 @@ interface MainContainerProps {
 const OuterContainer = styled.div<MainContainerProps>`
   display: flex;
   flex-direction: column;
-  flex: 1;
-  flex-grow: 1;
-  ...${(props) => (props.isGalleryOpen ? props.theme.scrollbar : {})};
 `;
 
-const Container = styled.div((props) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginTop: props.theme.spacing(11),
-}));
-
-interface ButtonProps {
-  isBtcSendBrowserTx?: boolean;
-}
-
-const ButtonContainer = styled.div<ButtonProps>((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  position: 'relative',
-  marginBottom: props.isBtcSendBrowserTx ? props.theme.spacing(20) : props.theme.spacing(5),
-}));
-
-const TransparentButtonContainer = styled.div((props) => ({
-  marginLeft: props.theme.spacing(2),
-  marginRight: props.theme.spacing(2),
-  width: '100%',
-}));
-
 const Button = styled.button((props) => ({
   display: 'flex',
   flexDirection: 'row',
@@ -77,6 +51,7 @@ const Button = styled.button((props) => ({
   backgroundColor: 'transparent',
   width: '100%',
   marginTop: props.theme.spacing(10),
+  marginBottom: props.theme.space.m,
 }));
 
 const ButtonText = styled.div((props) => ({
@@ -129,7 +104,6 @@ interface Props {
   assetDetailValue?: string;
   isRestoreFundFlow?: boolean;
   nonOrdinalUtxos?: UTXO[];
-  isBtcSendBrowserTx?: boolean;
   currencyType?: CurrencyTypes;
   isPartOfBundle?: boolean;
   ordinalBundle?: Bundle;
@@ -139,7 +113,6 @@ interface Props {
   setCurrentFeeRate: (feeRate: BigNumber) => void;
   onConfirmClick: (signedTxHex: string) => void;
   onCancelClick: () => void;
-  onBackButtonClick: () => void;
 }
 
 function ConfirmBtcTransactionComponent({
@@ -154,7 +127,6 @@ function ConfirmBtcTransactionComponent({
   assetDetailValue,
   isRestoreFundFlow,
   nonOrdinalUtxos,
-  isBtcSendBrowserTx,
   isPartOfBundle,
   currencyType,
   ordinalBundle,
@@ -164,7 +136,6 @@ function ConfirmBtcTransactionComponent({
   setCurrentFeeRate,
   onConfirmClick,
   onCancelClick,
-  onBackButtonClick,
 }: Props) {
   const { t } = useTranslation('translation');
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
@@ -382,117 +353,100 @@ function ConfirmBtcTransactionComponent({
   return (
     <>
       <OuterContainer isGalleryOpen={isGalleryOpen}>
-        <Container>
-          {showFeeWarning && (
-            <InfoContainer
-              type="Warning"
-              bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')}
-            />
-          )}
-
-          {children}
-          <ReviewTransactionText centerAligned={currencyType === 'Ordinal'}>
-            {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')}
-          </ReviewTransactionText>
-
-          {isPartOfBundle && (
-            <CalloutContainer>
-              <Callout
-                bodyText={t('NFT_DASHBOARD_SCREEN.FROM_RARE_SAT_BUNDLE')}
-                variant="warning"
-              />
-            </CalloutContainer>
-          )}
-          {holdsRareSats && (
-            <CalloutContainer>
-              <Callout bodyText={t('NFT_DASHBOARD_SCREEN.HOLDS_RARE_SAT')} variant="warning" />
-            </CalloutContainer>
-          )}
-
-          {bundle && <SatsBundle bundle={bundle} />}
-
-          {ordinalTxUtxo ? (
+        {showFeeWarning && (
+          <InfoContainer type="Warning" bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')} />
+        )}
+        {/* TODO tim: refactor this not to use children. it should be just another prop */}
+        {children}
+        <ReviewTransactionText centerAligned={currencyType === 'Ordinal'}>
+          {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')}
+        </ReviewTransactionText>
+        {isPartOfBundle && (
+          <CalloutContainer>
+            <Callout bodyText={t('NFT_DASHBOARD_SCREEN.FROM_RARE_SAT_BUNDLE')} variant="warning" />
+          </CalloutContainer>
+        )}
+        {holdsRareSats && (
+          <CalloutContainer>
+            <Callout bodyText={t('NFT_DASHBOARD_SCREEN.HOLDS_RARE_SAT')} variant="warning" />
+          </CalloutContainer>
+        )}
+        {currencyType !== 'BTC' && bundle && <SatsBundle bundle={bundle} />}
+        {ordinalTxUtxo ? (
+          <RecipientComponent
+            address={recipients[0]?.address}
+            value={assetDetail ?? ''}
+            valueDetail={assetDetailValue}
+            icon={AssetIcon}
+            currencyType={currencyType || 'Ordinal'}
+            title={t('CONFIRM_TRANSACTION.ASSET')}
+          />
+        ) : (
+          recipients?.map((recipient, index) => (
             <RecipientComponent
-              address={recipients[0]?.address}
-              value={assetDetail ?? ''}
-              valueDetail={assetDetailValue}
-              icon={AssetIcon}
-              currencyType={currencyType || 'Ordinal'}
-              title={t('CONFIRM_TRANSACTION.ASSET')}
+              key={recipient.address}
+              recipientIndex={index + 1}
+              address={recipient.address}
+              value={satsToBtc(recipient.amountSats).toString()}
+              totalRecipient={recipients.length}
+              currencyType="BTC"
+              title={t('CONFIRM_TRANSACTION.AMOUNT')}
+              showSenderAddress={isRestoreFundFlow}
             />
-          ) : (
-            recipients?.map((recipient, index) => (
-              <RecipientComponent
-                key={recipient.address}
-                recipientIndex={index + 1}
-                address={recipient.address}
-                value={satsToBtc(recipient.amountSats).toString()}
-                totalRecipient={recipients.length}
-                currencyType="BTC"
-                title={t('CONFIRM_TRANSACTION.AMOUNT')}
-                showSenderAddress={isRestoreFundFlow}
-              />
-            ))
-          )}
-
+          ))
+        )}
+        <TransactionDetailComponent title={t('CONFIRM_TRANSACTION.NETWORK')} value={network.type} />
+        <TransferFeeView
+          feePerVByte={currentFeeRate}
+          fee={currentFee}
+          currency={t('CONFIRM_TRANSACTION.SATS')}
+        />
+        {!ordinalTxUtxo && (
           <TransactionDetailComponent
-            title={t('CONFIRM_TRANSACTION.NETWORK')}
-            value={network.type}
-          />
-          <TransferFeeView
-            feePerVByte={currentFeeRate}
-            fee={currentFee}
-            currency={t('CONFIRM_TRANSACTION.SATS')}
-          />
-          {!ordinalTxUtxo && (
-            <TransactionDetailComponent
-              title={t('CONFIRM_TRANSACTION.TOTAL')}
-              value={getAmountString(satsToBtc(total), t('BTC'))}
-              subValue={getBtcFiatEquivalent(total, BigNumber(btcFiatRate))}
-              subTitle={t('CONFIRM_TRANSACTION.AMOUNT_PLUS_FEES')}
-            />
-          )}
-          <Button onClick={onAdvancedSettingClick}>
-            <>
-              <ButtonImage src={SettingIcon} />
-              <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
-            </>
-          </Button>
-          <TransactionSettingAlert
-            visible={showFeeSettings}
-            fee={new BigNumber(currentFee).toString()}
-            feePerVByte={feePerVByte}
-            type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
-            btcRecipients={recipients}
-            ordinalTxUtxo={ordinalTxUtxo}
-            onApplyClick={onApplyClick}
-            onCrossClick={closeTransactionSettingAlert}
-            nonOrdinalUtxos={nonOrdinalUtxos}
-            loading={loading || ordinalsLoading}
-            isRestoreFlow={isRestoreFundFlow}
-            showFeeSettings={showFeeSettings}
-            setShowFeeSettings={setShowFeeSettings}
+            title={t('CONFIRM_TRANSACTION.TOTAL')}
+            value={getAmountString(satsToBtc(total), t('BTC'))}
+            subValue={getBtcFiatEquivalent(total, BigNumber(btcFiatRate))}
+            subTitle={t('CONFIRM_TRANSACTION.AMOUNT_PLUS_FEES')}
           />
-        </Container>
-        <ErrorContainer>
-          <ErrorText>{error}</ErrorText>
-        </ErrorContainer>
+        )}
+        <Button onClick={onAdvancedSettingClick}>
+          <ButtonImage src={SettingIcon} />
+          <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
+        </Button>
+        <TransactionSettingAlert
+          visible={showFeeSettings}
+          fee={new BigNumber(currentFee).toString()}
+          feePerVByte={feePerVByte}
+          type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
+          btcRecipients={recipients}
+          ordinalTxUtxo={ordinalTxUtxo}
+          onApplyClick={onApplyClick}
+          onCrossClick={closeTransactionSettingAlert}
+          nonOrdinalUtxos={nonOrdinalUtxos}
+          loading={loading || ordinalsLoading}
+          isRestoreFlow={isRestoreFundFlow}
+          showFeeSettings={showFeeSettings}
+          setShowFeeSettings={setShowFeeSettings}
+        />
+        {!!error && (
+          <ErrorContainer>
+            <ErrorText>{error}</ErrorText>
+          </ErrorContainer>
+        )}
       </OuterContainer>
-      <ButtonContainer isBtcSendBrowserTx={isBtcSendBrowserTx}>
-        <TransparentButtonContainer>
-          <ActionButton
-            text={t('CONFIRM_TRANSACTION.CANCEL')}
-            transparent
-            onPress={onCancelClick}
-            disabled={
-              loadingBroadcastedTx ||
-              isLoading ||
-              isLoadingOrdData ||
-              isLoadingNonOrdinalBtcSend ||
-              ordinalsLoading
-            }
-          />
-        </TransparentButtonContainer>
+      <StickyHorizontalSplitButtonContainer>
+        <ActionButton
+          text={t('CONFIRM_TRANSACTION.CANCEL')}
+          transparent
+          onPress={onCancelClick}
+          disabled={
+            loadingBroadcastedTx ||
+            isLoading ||
+            isLoadingOrdData ||
+            isLoadingNonOrdinalBtcSend ||
+            ordinalsLoading
+          }
+        />
         <ActionButton
           text={t('CONFIRM_TRANSACTION.CONFIRM')}
           disabled={
@@ -511,7 +465,7 @@ function ConfirmBtcTransactionComponent({
           }
           onPress={handleOnConfirmClick}
         />
-      </ButtonContainer>
+      </StickyHorizontalSplitButtonContainer>
     </>
   );
 }