Merge pull request #212 from secretkeylabs/release/v0.34.1

release: v0.34.1 to main

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "private": true,
   "engines": {
     "node": "^18.18.2"

src/app/components/confirmBtcTransaction/delegateSection.tsx

@@ -0,0 +1,114 @@
+import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
+import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
+import { WarningOctagon } from '@phosphor-icons/react';
+import { animated, config, useSpring } from '@react-spring/web';
+import { RuneSummary } 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';
+
+const Container = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  background: props.theme.colors.elevation1,
+  borderRadius: 12,
+  padding: `${props.theme.space.m} 0`,
+  justifyContent: 'center',
+  marginBottom: props.theme.space.s,
+}));
+
+const RowContainer = styled.div((props) => ({
+  padding: `0 ${props.theme.space.m}`,
+  marginTop: `${props.theme.space.m}`,
+}));
+
+const RowCenter = styled.div<{ spaceBetween?: boolean }>((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: props.spaceBetween ? 'space-between' : 'initial',
+}));
+
+const Header = styled(RowCenter)((props) => ({
+  padding: `0 ${props.theme.space.m}`,
+}));
+
+const WarningButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${(props) => props.theme.colors.elevation1};
+  padding: ${(props) => props.theme.space.m};
+  padding-bottom: 0;
+`;
+
+const DelegationDescription = styled(StyledP)`
+  padding: ${(props) => props.theme.space.s} ${(props) => props.theme.space.m};
+  padding-bottom: ${(props) => props.theme.space.xs};
+`;
+
+const Title = styled(StyledP)`
+  margin-left: ${(props) => props.theme.space.xxs};
+`;
+
+type Props = {
+  delegations?: RuneSummary['burns'];
+};
+
+function DelegateSection({ delegations }: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+
+  const [showDelegationInfo, setShowDelegationInfo] = useState(false);
+
+  const slideInStyles = useSpring({
+    config: { ...config.gentle, duration: 200 },
+    from: { opacity: 0, maxHeight: 0 },
+    to: { opacity: 1, maxHeight: 100 },
+    reverse: !showDelegationInfo,
+  });
+
+  const arrowRotation = useSpring({
+    transform: showDelegationInfo ? 'rotate(180deg)' : 'rotate(0deg)',
+    config: { ...config.stiff },
+  });
+
+  if (!delegations?.length) return null;
+
+  return (
+    <Container>
+      <Header>
+        <StyledP typography="body_medium_m" color="white_200">
+          {t('YOU_WILL_DELEGATE')}
+        </StyledP>
+      </Header>
+      {delegations.map((delegation) => (
+        <RowContainer key={delegation.runeName}>
+          <RuneAmount
+            tokenName={delegation.runeName}
+            amount={String(delegation.amount)}
+            divisibility={delegation.divisibility}
+          />
+        </RowContainer>
+      ))}
+      <WarningButton type="button" onClick={() => setShowDelegationInfo((prevState) => !prevState)}>
+        <RowCenter>
+          <WarningOctagon weight="fill" color={Theme.colors.caution} size={16} />
+          <Title typography="body_medium_s" color="caution">
+            {t('UNKNOWN_RUNE_RECIPIENTS')}
+          </Title>
+        </RowCenter>
+        <animated.img style={arrowRotation} src={DropDownIcon} alt="Drop Down" />
+      </WarningButton>
+      <animated.div style={slideInStyles}>
+        <DelegationDescription typography="body_medium_s" color="white_200">
+          {t('RUNE_DELEGATION_DESCRIPTION')}
+        </DelegationDescription>
+      </animated.div>
+    </Container>
+  );
+}
+
+export default DelegateSection;

src/app/components/confirmBtcTransaction/index.tsx

@@ -1,6 +1,7 @@
 import { delay } from '@common/utils/ledger';
 import BottomModal from '@components/bottomModal';
 import ActionButton from '@components/button';
+import { Tab } from '@components/tabBar';
 import useWalletSelector from '@hooks/useWalletSelector';
 import TransportFactory from '@ledgerhq/hw-transport-webusb';
 import { RuneSummary, Transport, btcTransaction } from '@secretkeylabs/xverse-core';
@@ -47,6 +48,7 @@ type Props = {
   outputs: btcTransaction.EnhancedOutput[];
   feeOutput?: btcTransaction.TransactionFeeOutput;
   runeSummary?: RuneSummary;
+  showCenotaphCallout: boolean;
   isLoading: boolean;
   isSubmitting: boolean;
   isBroadcast?: boolean;
@@ -66,13 +68,16 @@ type Props = {
   onFeeRateSet?: (feeRate: number) => void;
   feeRate?: number;
   hasSigHashNone?: boolean;
+  title?: string;
+  selectedBottomTab?: Tab;
 };
 
 function ConfirmBtcTransaction({
   inputs,
   outputs,
   feeOutput,
   runeSummary,
+  showCenotaphCallout,
   isLoading,
   isSubmitting,
   isBroadcast,
@@ -89,6 +94,8 @@ function ConfirmBtcTransaction({
   onFeeRateSet,
   feeRate,
   hasSigHashNone = false,
+  title,
+  selectedBottomTab,
 }: Props) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [currentStep, setCurrentStep] = useState(Steps.ConnectLedger);
@@ -177,14 +184,14 @@ function ConfirmBtcTransaction({
   ) : (
     <>
       <SendLayout
-        selectedBottomTab="dashboard"
+        selectedBottomTab={selectedBottomTab ?? 'dashboard'}
         onClickBack={onBackClick}
         hideBackButton={hideBackButton}
         showAccountHeader={showAccountHeader}
         hideBottomBar={hideBottomBar}
       >
         <ReviewTransactionText typography="headline_s">
-          {t('REVIEW_TRANSACTION')}
+          {title || t('REVIEW_TRANSACTION')}
         </ReviewTransactionText>
         {hasSigHashNone && (
           <SpacedCallout
@@ -200,6 +207,7 @@ function ConfirmBtcTransaction({
           outputs={outputs}
           feeOutput={feeOutput}
           isPartialTransaction={isPartialTransaction}
+          showCenotaphCallout={showCenotaphCallout}
           getFeeForFeeRate={getFeeForFeeRate}
           onFeeRateSet={onFeeRateSet}
           feeRate={feeRate}

src/app/components/confirmBtcTransaction/receiveSection.tsx

@@ -56,12 +56,14 @@ function ReceiveSection({ outputs, netAmount, onShowInscription, runeReceipts }:
     ordinalsAddress,
   });
 
-  // if receiving runes from own addresses, hide it because it is change
+  // if receiving runes from own addresses, hide it because it is change, unless it swap addresses (recover runes)
   const filteredRuneReceipts =
     runeReceipts?.filter(
       (receipt) =>
         !receipt.sourceAddresses.some(
-          (address) => address === ordinalsAddress || address === btcAddress,
+          (address) =>
+            (address === ordinalsAddress && receipt.destinationAddress === ordinalsAddress) ||
+            (address === btcAddress && receipt.destinationAddress === btcAddress),
         ),
     ) ?? [];
   const ordinalRuneReceipts = filteredRuneReceipts.filter(

src/app/components/confirmBtcTransaction/transactionSummary.tsx

@@ -14,6 +14,7 @@ import BigNumber from 'bignumber.js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+import DelegateSection from './delegateSection';
 import AmountWithInscriptionSatribute from './itemRow/amountWithInscriptionSatribute';
 import ReceiveSection from './receiveSection';
 import TransferSection from './transferSection';
@@ -33,6 +34,7 @@ const WarningCallout = styled(Callout)`
 
 type Props = {
   isPartialTransaction: boolean;
+  showCenotaphCallout: boolean;
   inputs: btcTransaction.EnhancedInput[];
   outputs: btcTransaction.EnhancedOutput[];
   feeOutput?: btcTransaction.TransactionFeeOutput;
@@ -48,6 +50,7 @@ type Props = {
 
 function TransactionSummary({
   isPartialTransaction,
+  showCenotaphCallout,
   inputs,
   outputs,
   feeOutput,
@@ -100,6 +103,8 @@ function TransactionSummary({
 
   const showFeeSelector = !!(feeRate && getFeeForFeeRate && onFeeRateSet);
 
+  const hasRuneDelegation = (runeSummary?.burns.length ?? 0) > 0 && isPartialTransaction;
+
   return (
     <>
       {inscriptionToShow && (
@@ -124,12 +129,16 @@ function TransactionSummary({
       {isUnConfirmedInput && (
         <WarningCallout bodyText={t('UNCONFIRMED_UTXO_WARNING')} variant="warning" />
       )}
+      {showCenotaphCallout && (
+        <WarningCallout variant="danger" bodyText={t('RUNES_CENOTAPH_WARNING')} />
+      )}
       {runeSummary?.mint && !runeSummary?.mint?.runeIsOpen && (
         <WarningCallout bodyText={t('RUNE_TERM_ENDED')} variant="danger" />
       )}
       {runeSummary?.mint && !runeSummary?.mint?.runeIsMintable && (
         <WarningCallout bodyText={t('RUNE_IS_CLOSED')} variant="danger" />
       )}
+      {hasRuneDelegation && <DelegateSection delegations={runeSummary?.burns} />}
       <TransferSection
         outputs={outputs}
         inputs={inputs}
@@ -144,7 +153,7 @@ function TransactionSummary({
         netAmount={netAmount}
         runeReceipts={runeSummary?.receipts}
       />
-      <BurnSection burns={runeSummary?.burns} />
+      {!hasRuneDelegation && <BurnSection burns={runeSummary?.burns} />}
       <MintSection mints={[runeSummary?.mint]} />
       <TxInOutput inputs={inputs} outputs={outputs} />
       {hasOutputScript && !runeSummary && <WarningCallout bodyText={t('SCRIPT_OUTPUT_TX')} />}

src/app/routes/index.tsx

@@ -47,6 +47,7 @@ import RareSatsBundle from '@screens/rareSatsBundle';
 import RareSatsDetailScreen from '@screens/rareSatsDetail/rareSatsDetail';
 import Receive from '@screens/receive';
 import RestoreFunds from '@screens/restoreFunds';
+import RecoverRunes from '@screens/restoreFunds/recoverRunes';
 import RestoreOrdinals from '@screens/restoreFunds/restoreOrdinals';
 import RestoreWallet from '@screens/restoreWallet';
 // import SendBrc20Screen from '@screens/sendBrc20';
@@ -340,6 +341,10 @@ const router = createHashRouter([
         path: 'restore-ordinals',
         element: <RestoreOrdinals />,
       },
+      {
+        path: 'recover-runes',
+        element: <RecoverRunes />,
+      },
       {
         path: 'fiat-currency',
         element: <FiatCurrencyScreen />,

src/app/screens/confirmBtcTransaction/index.tsx

@@ -242,7 +242,7 @@ function ConfirmBtcTransaction() {
           description={t('BTC_TRANSFER_DANGER_ALERT_DESC')}
           buttonText={t('BACK')}
           onClose={onClosePress}
-          secondButtonText={t('CONITNUE')}
+          secondButtonText={t('CONTINUE')}
           onButtonClick={onClosePress}
           onSecondButtonClick={onContinueButtonClick}
           isWarningAlert

src/app/screens/confirmInscriptionRequest/index.tsx

@@ -344,7 +344,7 @@ function ConfirmInscriptionRequest() {
           description={t('CONFIRM_TRANSACTION.BTC_TRANSFER_DANGER_ALERT_DESC')}
           buttonText={t('CONFIRM_TRANSACTION.BACK')}
           onClose={onClosePress}
-          secondButtonText={t('CONITNUE')}
+          secondButtonText={t('CONTINUE')}
           onButtonClick={onClosePress}
           onSecondButtonClick={onContinueButtonClick}
           isWarningAlert

src/app/screens/restoreFunds/fundsRow.tsx

@@ -4,7 +4,6 @@ const Icon = styled.img((props) => ({
   marginRight: props.theme.spacing(8),
   width: 32,
   height: 32,
-  borderRadius: 30,
 }));
 
 const TitleText = styled.h1((props) => ({
@@ -34,18 +33,24 @@ const RowContainer = styled.button((props) => ({
   background: 'transparent',
   width: '100%',
   marginBottom: 12,
+  ':disabled': {
+    backgroundColor: props.theme.colors.elevation0,
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
 }));
 
 interface Props {
   image: string;
   title: string;
   description: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 
-function FundsRow({ image, title, description, onClick }: Props) {
+function FundsRow({ image, title, description, onClick, disabled }: Props) {
   return (
-    <RowContainer onClick={onClick}>
+    <RowContainer onClick={onClick} disabled={disabled}>
       <Icon src={image} />
       <Container>
         <TitleText>{title}</TitleText>