merge develop

secretkeylabs · Sep 13, 2023 · eacf1b3 · eacf1b3
2 parents 808c60d + 4cce684
commit eacf1b3
Show file tree

Hide file tree

Showing 86 changed files with 5,027 additions and 2,914 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -28,6 +28,7 @@
     "no-param-reassign": "off",
     "react/require-default-props": "off",
     "consistent-return": "off",
+    "no-promise-executor-return": "warn",
     "max-len": "off",
     "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/no-unused-vars": [
@@ -38,7 +39,8 @@
         "ignoreRestSiblings": true,
         "argsIgnorePattern": "^_"
       }
-    ]
+    ],
+    "no-plusplus": "off"
   },
   "settings": {
     "import/resolver": {

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.17.0",
+  "version": "0.18.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.6.5",
+    "@secretkeylabs/xverse-core": "1.7.2",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",
@@ -52,7 +52,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-state-sync": "^3.1.4",
-    "sats-connect": "1.0.0",
+    "sats-connect": "1.1.1",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",
@@ -80,7 +80,8 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "prettier --write"
+      "prettier --write",
+      "eslint"
     ],
     "*.json": [
       "prettier --write"

diff --git a/src/app/components/accountHeader/index.tsx b/src/app/components/accountHeader/index.tsx
@@ -1,16 +1,16 @@
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import { useState } from 'react';
 import threeDotsIcon from '@assets/img/dots_three_vertical.svg';
-import ResetWalletPrompt from '@components/resetWallet';
+import AccountRow from '@components/accountRow';
 import PasswordInput from '@components/passwordInput';
+import ResetWalletPrompt from '@components/resetWallet';
 import useWalletReducer from '@hooks/useWalletReducer';
-import AccountRow from '@components/accountRow';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
+import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { isHardwareAccount } from '@utils/helper';
-import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
 
 const SelectedAccountContainer = styled.div((props) => ({
   paddingLeft: '5%',
@@ -79,7 +79,7 @@ interface AccountHeaderComponentProps {
 }
 
 function AccountHeaderComponent({
-  disableMenuOption,
+  disableMenuOption = false,
   disableAccountSwitch = false,
   disableCopy = false,
 }: AccountHeaderComponentProps) {
@@ -176,6 +176,7 @@ function AccountHeaderComponent({
           isSelected
           allowCopyAddress={!disableCopy && !isHardwareAccount(selectedAccount)}
           onAccountSelected={handleAccountSelect}
+          disabledAccountSelect={disableAccountSwitch}
         />
         {!disableMenuOption && (
           <OptionsButton onClick={openOptionsDialog}>

diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -1,28 +1,28 @@
-import styled from 'styled-components';
-import { getAccountGradient } from '@utils/gradient';
-import { Tooltip } from 'react-tooltip';
-import 'react-tooltip/dist/react-tooltip.css';
+import Copy from '@assets/img/Copy.svg';
+import threeDotsIcon from '@assets/img/dots_three_vertical.svg';
+import LedgerBadge from '@assets/img/ledger/ledger_badge.svg';
 import OrdinalsIcon from '@assets/img/nftDashboard/white_ordinals_icon.svg';
-import { useTranslation } from 'react-i18next';
-import { getTruncatedAddress, getAddressDetail, isHardwareAccount } from '@utils/helper';
 import BarLoader from '@components/barLoader';
-import Copy from '@assets/img/Copy.svg';
-import { LoaderSize } from '@utils/constants';
+import BottomModal from '@components/bottomModal';
+import ActionButton from '@components/button';
+import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
+import useResetUserFlow from '@hooks/useResetUserFlow';
+import useWalletReducer from '@hooks/useWalletReducer';
+import useWalletSelector from '@hooks/useWalletSelector';
 import { Account } from '@secretkeylabs/xverse-core';
-import { useState, useEffect, useRef } from 'react';
-import { useDispatch } from 'react-redux';
 import {
   ChangeShowBtcReceiveAlertAction,
   selectAccount,
 } from '@stores/wallet/actions/actionCreators';
-import useWalletSelector from '@hooks/useWalletSelector';
-import LedgerBadge from '@assets/img/ledger/ledger_badge.svg';
-import threeDotsIcon from '@assets/img/dots_three_vertical.svg';
-import ActionButton from '@components/button';
-import BottomModal from '@components/bottomModal';
-import useWalletReducer from '@hooks/useWalletReducer';
-import useResetUserFlow from '@hooks/useResetUserFlow';
-import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
+import { LoaderSize } from '@utils/constants';
+import { getAccountGradient } from '@utils/gradient';
+import { getAddressDetail, getTruncatedAddress, isHardwareAccount } from '@utils/helper';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+import styled from 'styled-components';
 
 const RowContainer = styled.div({
   display: 'flex',
@@ -41,14 +41,14 @@ const GradientCircle = styled.div<GradientCircleProps>((props) => ({
   background: `linear-gradient(to bottom,${props.firstGradient}, ${props.secondGradient},${props.thirdGradient} )`,
 }));
 
-const TopSectionContainer = styled.div((props) => ({
+const TopSectionContainer = styled.div<{ disableClick?: boolean }>((props) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingTop: props.theme.spacing(8),
   backgroundColor: 'transparent',
-  cursor: 'pointer',
+  cursor: props.disableClick ? 'initial' : 'pointer',
 }));
 
 const AccountInfoContainer = styled.div({
@@ -81,12 +81,13 @@ const CurrentUnSelectedAccountText = styled.h1((props) => ({
   textAlign: 'start',
 }));
 
-const CurrentAccountDetailText = styled.h1((props) => ({
+const CurrentAccountDetailText = styled.h1<{ disableClick?: boolean }>((props) => ({
   ...props.theme.body_m,
   color: props.theme.colors.white['400'],
   marginTop: props.theme.spacing(1),
   display: 'flex',
   justifyContent: 'flex-start',
+  cursor: props.disableClick ? 'initial' : 'cursor',
 }));
 
 const BarLoaderContainer = styled.div((props) => ({
@@ -214,6 +215,7 @@ interface Props {
   showOrdinalAddress?: boolean;
   onAccountSelected: (account: Account) => void;
   isAccountListView?: boolean;
+  disabledAccountSelect?: boolean;
 }
 
 function AccountRow({
@@ -223,6 +225,7 @@ function AccountRow({
   allowCopyAddress,
   showOrdinalAddress,
   isAccountListView = false,
+  disabledAccountSelect = false,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
   const { t: optionsDialogTranslation } = useTranslation('translation', {
@@ -386,13 +389,13 @@ function AccountRow({
       />
     </RowContainer>
   ) : (
-    <CurrentAccountDetailText>
+    <CurrentAccountDetailText disableClick={disabledAccountSelect}>
       {showOrdinalAddress ? showOrdinalBtcAddress : getAddressDetail(account!)}
     </CurrentAccountDetailText>
   );
 
   return (
-    <TopSectionContainer>
+    <TopSectionContainer disableClick={disabledAccountSelect}>
       <AccountInfoContainer onClick={handleClick}>
         <GradientCircle
           firstGradient={gradient[0]}

diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx
@@ -24,6 +24,7 @@ interface Props {
   visible: boolean;
   children: React.ReactNode;
   onClose: () => void;
+  overlayStylesOverriding?: {};
 }
 
 const CustomisedModal = styled(Modal)`
@@ -35,7 +36,7 @@ const CustomisedModal = styled(Modal)`
   position: absolute;
 `;
 
-function BottomModal({ header, children, visible, onClose }: Props) {
+function BottomModal({ header, children, visible, onClose, overlayStylesOverriding }: Props) {
   const theme = useTheme();
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
   const customStyles = {
@@ -45,6 +46,7 @@ function BottomModal({ header, children, visible, onClose }: Props) {
       width: 360,
       margin: 'auto',
       zIndex: 15000,
+      ...overlayStylesOverriding,
     },
     content: {
       inset: 'auto auto 0px auto',

diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
@@ -71,8 +71,16 @@ const ButtonImage = styled.img((props) => ({
   transform: 'all',
 }));
 
+const ButtonIconContainer = styled.div((props) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginRight: props.theme.spacing(3),
+}));
+
 interface Props {
   src?: string;
+  icon?: JSX.Element;
   text: string;
   onPress: () => void;
   processing?: boolean;
@@ -83,6 +91,7 @@ interface Props {
 
 function ActionButton({
   src,
+  icon,
   text,
   onPress,
   processing = false,
@@ -104,6 +113,7 @@ function ActionButton({
         ) : (
           <>
             {src && <ButtonImage src={src} />}
+            {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
             <AnimatedButtonText>{text}</AnimatedButtonText>
           </>
         )}
@@ -118,6 +128,7 @@ function ActionButton({
       ) : (
         <>
           {src && <ButtonImage src={src} />}
+          {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
           <ButtonText warning={warning}>{text}</ButtonText>
         </>
       )}

diff --git a/src/app/components/confirmBtcTransactionComponent/inputOutputComponent.tsx b/src/app/components/confirmBtcTransactionComponent/inputOutputComponent.tsx
@@ -2,13 +2,14 @@ import styled from 'styled-components';
 import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
 import OutputIcon from '@assets/img/transactions/output.svg';
 import IconBitcoin from '@assets/img/dashboard/bitcoin_icon.svg';
+import ScriptIcon from '@assets/img/transactions/ScriptIcon.svg';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import BigNumber from 'bignumber.js';
 import { animated, config, useSpring } from '@react-spring/web';
 import { StoreState } from '@stores/index';
 import TransferDetailView from '@components/transferDetailView';
-import { ParsedPSBT, PSBTInput, satsToBtc } from '@secretkeylabs/xverse-core';
+import { ParsedPSBT, PSBTInput, PSBTOutput, satsToBtc } from '@secretkeylabs/xverse-core';
 import { getTruncatedAddress } from '@utils/helper';
 
 const Container = styled.div((props) => ({
@@ -104,7 +105,7 @@ interface Props {
 function InputOutputComponent({ address, parsedPsbt, isExpanded, onArrowClick }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const { btcAddress, ordinalsAddress } = useSelector((state: StoreState) => state.walletState);
-
+  let scriptOutputCount = 1;
   const slideInStyles = useSpring({
     config: { ...config.gentle, duration: 400 },
     from: { opacity: 0, height: 0 },
@@ -128,16 +129,52 @@ function InputOutputComponent({ address, parsedPsbt, isExpanded, onArrowClick }:
     ) : (
       <SubValueText>{getTruncatedAddress(addressToBeDisplayed)}</SubValueText>
     );
-  const renderSubValue = (input: PSBTInput, address: string) =>
+  const renderSubValue = (input: PSBTInput, signedAddress: string) =>
     input.userSigns ? (
-      renderAddress(address)
+      renderAddress(signedAddress)
     ) : (
       <TxIdContainer>
         <SubValueText>{getTruncatedAddress(input.txid)}</SubValueText>
         <TxIdText>(txid)</TxIdText>
       </TxIdContainer>
     );
 
+  function showPsbtOutput(output: PSBTOutput) {
+    const detailViewIcon = output.outputScript ? ScriptIcon : OutputIcon;
+    const detailViewHideCopyButton = output.outputScript
+      ? true
+      : btcAddress === output.address || ordinalsAddress === output.address;
+    const showAddress =
+      output.address === btcAddress || output.address === ordinalsAddress ? (
+        <TxIdContainer>
+          <YourAddressText>(Your Address)</YourAddressText>
+          <SubValueText>{getTruncatedAddress(output.address)}</SubValueText>
+        </TxIdContainer>
+      ) : (
+        <SubValueText>{getTruncatedAddress(output.address)}</SubValueText>
+      );
+    const detailViewValue = output.outputScript ? (
+      <SubValueText>{`${t('SCRIPT_OUTPUT')} #${scriptOutputCount}`}</SubValueText>
+    ) : (
+      showAddress
+    );
+    return (
+      <TransferDetailView
+        icon={detailViewIcon}
+        hideAddress
+        hideCopyButton={detailViewHideCopyButton}
+        amount={`${satsToBtc(
+          new BigNumber(output ? output.amount.toString() : '0'),
+        ).toString()} BTC`}
+        address={output.address}
+        outputScript={output.outputScript}
+        outputScriptIndex={output.outputScript ? scriptOutputCount++ : undefined}
+      >
+        {detailViewValue}
+      </TransferDetailView>
+    );
+  }
+
   return (
     <Container>
       <RowContainer>
@@ -157,7 +194,7 @@ function InputOutputComponent({ address, parsedPsbt, isExpanded, onArrowClick }:
                 icon={IconBitcoin}
                 hideAddress
                 hideCopyButton={btcAddress === address[index] || ordinalsAddress === address[index]}
-                amount={`${satsToBtc(new BigNumber(input.value)).toString()} BTC`}
+                amount={`${satsToBtc(new BigNumber(input.value.toString())).toString()} BTC`}
                 address={input.userSigns ? address[index] : input.txid}
               >
                 {renderSubValue(input, address[index])}
@@ -167,24 +204,7 @@ function InputOutputComponent({ address, parsedPsbt, isExpanded, onArrowClick }:
 
           <OutputTitleText>{t('OUTPUT')}</OutputTitleText>
           {parsedPsbt?.outputs.map((output) => (
-            <TransferDetailContainer>
-              <TransferDetailView
-                icon={OutputIcon}
-                hideAddress
-                hideCopyButton={btcAddress === output.address || ordinalsAddress === output.address}
-                amount={`${satsToBtc(new BigNumber(output ? output.amount : 0n)).toString()} BTC`}
-                address={output.address}
-              >
-                {output.address === btcAddress || output.address === ordinalsAddress ? (
-                  <TxIdContainer>
-                    <YourAddressText>(Your Address)</YourAddressText>
-                    <SubValueText>{getTruncatedAddress(output.address)}</SubValueText>
-                  </TxIdContainer>
-                ) : (
-                  <SubValueText>{getTruncatedAddress(output.address)}</SubValueText>
-                )}
-              </TransferDetailView>
-            </TransferDetailContainer>
+            <TransferDetailContainer>{showPsbtOutput(output)}</TransferDetailContainer>
           ))}
         </ExpandedContainer>
       )}