Added Native Segwit Address to account row if dlcs enabled

secretkeylabs · Apr 12, 2023 · 8c27e88 · 8c27e88
1 parent d9b589d
commit 8c27e88
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 83 deletions.
diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -11,7 +11,7 @@ import { LoaderSize } from '@utils/constants';
 import { Account } from '@secretkeylabs/xverse-core';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { ChangeShowBtcReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
+import { ChangeShowBtcReceiveAlertAction, ChangeShowDlcBtcReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
 import useWalletSelector from '@hooks/useWalletSelector';
 
 interface GradientCircleProps {
@@ -93,7 +93,7 @@ const Button = styled.button`
 
 const CopyButton = styled.button`
   opacity: 0.6;
-  color: #FFFFFF;
+  color: #ffffff;
   margin-top: 3px;
   margin-right: 10px;
   display: flex;
@@ -146,12 +146,11 @@ function AccountRow({
   showOrdinalAddress,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
-  const {
-    showBtcReceiveAlert,
-  } = useWalletSelector();
+  const { showBtcReceiveAlert, showDlcBtcReceiveAlert, hasActivatedDLCsKey, network } = useWalletSelector();
   const gradient = getAccountGradient(account?.stxAddress!);
   const [onStxCopied, setOnStxCopied] = useState(false);
   const [onBtcCopied, setOnBtcCopied] = useState(false);
+  const [onDlcCopied, setOnDlcCopied] = useState(false);
   const dispatch = useDispatch();
 
   function getName() {
@@ -161,13 +160,27 @@ function AccountRow({
   const handleOnBtcAddressClick = () => {
     navigator.clipboard.writeText(account?.btcAddress!);
     setOnBtcCopied(true);
+    setOnDlcCopied(false);
     setOnStxCopied(false);
-    if (showBtcReceiveAlert !== null) { dispatch(ChangeShowBtcReceiveAlertAction(true)); }
+    if (showBtcReceiveAlert !== null) {
+      dispatch(ChangeShowBtcReceiveAlertAction(true));
+    }
+  };
+
+  const handleOnDlcAddressClick = () => {
+    navigator.clipboard.writeText(account?.dlcBtcAddress!);
+    setOnBtcCopied(false);
+    setOnDlcCopied(true);
+    setOnStxCopied(false);
+    if (showDlcBtcReceiveAlert !== null) {
+      dispatch(ChangeShowDlcBtcReceiveAlertAction(true));
+    }
   };
 
   const handleOnStxAddressClick = () => {
     navigator.clipboard.writeText(account?.stxAddress!);
     setOnStxCopied(true);
+    setOnDlcCopied(false);
     setOnBtcCopied(false);
   };
 
@@ -195,37 +208,58 @@ function AccountRow({
   );
 
   const displayAddress = allowCopyAddress ? (
-    <RowContainer>
-      <CopyButton id="bitcoin-address" onClick={handleOnBtcAddressClick}>
-        <CopyImage src={Copy} alt="copy" />
-        <CurrentUnSelectedAccountText>
-          {getTruncatedAddress(account?.btcAddress!)}
-        </CurrentUnSelectedAccountText>
-      </CopyButton>
-      <StyledToolTip
-        anchorId="bitcoin-address"
-        variant="light"
-        content={onBtcCopied ? 'Copied' : 'Bitcoin address'}
-        events={['hover']}
-        place="bottom"
-      />
+    <>
+      <RowContainer>
+        <CopyButton id="bitcoin-address" onClick={handleOnBtcAddressClick}>
+          <CopyImage src={Copy} alt="copy" />
+          <CurrentUnSelectedAccountText>
+            {getTruncatedAddress(account?.btcAddress!)}
+          </CurrentUnSelectedAccountText>
+        </CopyButton>
+        <StyledToolTip
+          anchorId="bitcoin-address"
+          variant="light"
+          content={onBtcCopied ? 'Copied' : 'Bitcoin address'}
+          events={['hover']}
+          place="bottom"
+        />
 
-      <CopyButton id="stacks-address" onClick={handleOnStxAddressClick}>
-        <CopyImage src={Copy} alt="copy" />
-        <CurrentUnSelectedAccountText>
-          {getTruncatedAddress(account?.stxAddress!)}
-        </CurrentUnSelectedAccountText>
-      </CopyButton>
-      <StyledToolTip
-        anchorId="stacks-address"
-        variant="light"
-        content={onStxCopied ? 'Copied' : 'Stacks address'}
-        events={['hover']}
-        place="bottom"
-      />
-    </RowContainer>
+        <CopyButton id="stacks-address" onClick={handleOnStxAddressClick}>
+          <CopyImage src={Copy} alt="copy" />
+          <CurrentUnSelectedAccountText>
+            {getTruncatedAddress(account?.stxAddress!)}
+          </CurrentUnSelectedAccountText>
+        </CopyButton>
+        <StyledToolTip
+          anchorId="stacks-address"
+          variant="light"
+          content={onStxCopied ? 'Copied' : 'Stacks address'}
+          events={['hover']}
+          place="bottom"
+        />
+      </RowContainer>
+      {hasActivatedDLCsKey && network.type === 'Testnet' && (
+        <RowContainer>
+          <CopyButton id="dlc-address" onClick={handleOnDlcAddressClick}>
+            <CopyImage src={Copy} alt="copy" />
+            <CurrentUnSelectedAccountText>
+              {getTruncatedAddress(account?.dlcBtcAddress!)}
+            </CurrentUnSelectedAccountText>
+          </CopyButton>
+          <StyledToolTip
+            anchorId="dlc-address"
+            variant="light"
+            content={onDlcCopied ? 'Copied' : 'DLC address'}
+            events={['hover']}
+            place="bottom"
+          />
+        </RowContainer>
+      )}
+    </>
   ) : (
-    <CurrentAccountDetailText>{showOrdinalAddress ? showOrdinalBtcAddress : getAddressDetail(account!)}</CurrentAccountDetailText>
+    <CurrentAccountDetailText>
+      {showOrdinalAddress ? showOrdinalBtcAddress : getAddressDetail(account!)}
+    </CurrentAccountDetailText>
   );
 
   return (
@@ -237,8 +271,8 @@ function AccountRow({
         onClick={onClick}
       />
       <CurrentAcountContainer>
-        {account
-          && (isSelected ? (
+        {account &&
+          (isSelected ? (
             <Button onClick={onClick}>
               <CurrentSelectedAccountText>{getName()}</CurrentSelectedAccountText>
             </Button>

diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -132,7 +132,7 @@ function ConfirmBtcTransactionComponent({
   const [loading, setLoading] = useState(false);
   const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
   const {
-    btcAddress, selectedAccount, seedPhrase, network, btcFiatRate,
+    btcAddress, dlcBtcAddress, selectedAccount, seedPhrase, network, btcFiatRate,
   } = useSelector(
     (state: StoreState) => state.walletState,
   );

diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx
@@ -1,6 +1,6 @@
 import AlertMessage from '@components/alertMessage';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
+import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction, ChangeShowDlcBtcReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -41,6 +41,7 @@ function ExtendedScreenContainer(): JSX.Element {
   const { t } = useTranslation('translation');
   const [dontShowOrdinalReceiveAlert, setDontShowOrdinalReceiveAlert] = useState<boolean>(false);
   const [dontShowBtcReceiveAlert, setDontShowBtcReceiveAlert] = useState<boolean>(false);
+
   const dispatch = useDispatch();
 
   const onReceiveAlertClose = () => {

diff --git a/src/app/components/screenContainer/index.tsx b/src/app/components/screenContainer/index.tsx
@@ -1,6 +1,10 @@
 import AlertMessage from '@components/alertMessage';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
+import {
+  ChangeShowBtcReceiveAlertAction,
+  ChangeShowOrdinalReceiveAlertAction,
+  ChangeShowDlcBtcReceiveAlertAction,
+} from '@stores/wallet/actions/actionCreators';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -34,28 +38,40 @@ const TestnetText = styled.h1((props) => ({
 }));
 
 function ScreenContainer(): JSX.Element {
-  const {
-    network,
-    showBtcReceiveAlert,
-    showOrdinalReceiveAlert,
-  } = useWalletSelector();
+  const { network, showBtcReceiveAlert, showOrdinalReceiveAlert, showDlcBtcReceiveAlert } = useWalletSelector();
   const { t } = useTranslation('translation');
   const [dontShowOrdinalReceiveAlert, setDontShowOrdinalReceiveAlert] = useState<boolean>(false);
   const [dontShowBtcReceiveAlert, setDontShowBtcReceiveAlert] = useState<boolean>(false);
+  const [dontShowDlcBtcReceiveAlert, setDontShowDlcBtcReceiveAlert] = useState<boolean>(false);
+
   const dispatch = useDispatch();
 
   const onReceiveAlertClose = () => {
-    if (dontShowBtcReceiveAlert) { dispatch(ChangeShowBtcReceiveAlertAction(null)); } else dispatch(ChangeShowBtcReceiveAlertAction(false));
+    if (dontShowBtcReceiveAlert) {
+      dispatch(ChangeShowBtcReceiveAlertAction(null));
+    } else dispatch(ChangeShowBtcReceiveAlertAction(false));
+  };
+
+  const onReceiveDlcAlertClose = () => {
+    if (dontShowDlcBtcReceiveAlert) {
+      dispatch(ChangeShowDlcBtcReceiveAlertAction(null));
+    } else dispatch(ChangeShowDlcBtcReceiveAlertAction(false));
   };
 
   const onReceiveOrdinalAlertClose = () => {
-    if (dontShowOrdinalReceiveAlert) { dispatch(ChangeShowOrdinalReceiveAlertAction(null)); } else dispatch(ChangeShowOrdinalReceiveAlertAction(false));
+    if (dontShowOrdinalReceiveAlert) {
+      dispatch(ChangeShowOrdinalReceiveAlertAction(null));
+    } else dispatch(ChangeShowOrdinalReceiveAlertAction(false));
   };
 
   const onDontShowReceiveBtcAlert = () => {
     setDontShowBtcReceiveAlert(true);
   };
 
+  const onDontShowReceiveDlcBtcAlert = () => {
+    setDontShowDlcBtcReceiveAlert(true);
+  };
+
   const onDontShowReceiveOrdinalAlert = () => {
     setDontShowOrdinalReceiveAlert(true);
   };
@@ -68,26 +84,37 @@ function ScreenContainer(): JSX.Element {
         </TestnetContainer>
       )}
       {showBtcReceiveAlert && (
-      <AlertMessage
-        title={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_BTC')}
-        description={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_BTC_INFO')}
-        buttonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.I_UNDERSTAND')}
-        onClose={onReceiveAlertClose}
-        onButtonClick={onReceiveAlertClose}
-        tickMarkButtonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.DO_NOT_SHOW_MESSAGE')}
-        tickMarkButtonClick={onDontShowReceiveBtcAlert}
-      />
+        <AlertMessage
+          title={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_BTC')}
+          description={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_BTC_INFO')}
+          buttonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.I_UNDERSTAND')}
+          onClose={onReceiveAlertClose}
+          onButtonClick={onReceiveAlertClose}
+          tickMarkButtonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.DO_NOT_SHOW_MESSAGE')}
+          tickMarkButtonClick={onDontShowReceiveBtcAlert}
+        />
+      )}
+      {showDlcBtcReceiveAlert && (
+        <AlertMessage
+          title={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_DLC_BTC')}
+          description={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_DLC_BTC_INFO')}
+          buttonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.I_UNDERSTAND')}
+          onClose={onReceiveDlcAlertClose}
+          onButtonClick={onReceiveDlcAlertClose}
+          tickMarkButtonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.DO_NOT_SHOW_MESSAGE')}
+          tickMarkButtonClick={onDontShowReceiveDlcBtcAlert}
+        />
       )}
       {showOrdinalReceiveAlert && (
-      <AlertMessage
-        title={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_ORDINALS')}
-        description={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_ORDINAL_INFO')}
-        buttonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.I_UNDERSTAND')}
-        onClose={onReceiveOrdinalAlertClose}
-        onButtonClick={onReceiveOrdinalAlertClose}
-        tickMarkButtonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.DO_NOT_SHOW_MESSAGE')}
-        tickMarkButtonClick={onDontShowReceiveOrdinalAlert}
-      />
+        <AlertMessage
+          title={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_ORDINALS')}
+          description={t('ADDRESS_RECEIVE_ALERT_MESSAGE.RECEIVING_ORDINAL_INFO')}
+          buttonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.I_UNDERSTAND')}
+          onClose={onReceiveOrdinalAlertClose}
+          onButtonClick={onReceiveOrdinalAlertClose}
+          tickMarkButtonText={t('ADDRESS_RECEIVE_ALERT_MESSAGE.DO_NOT_SHOW_MESSAGE')}
+          tickMarkButtonClick={onDontShowReceiveOrdinalAlert}
+        />
       )}
       <Outlet />
     </RouteContainer>

diff --git a/src/app/hooks/queries/useBtcWalletData.ts b/src/app/hooks/queries/useBtcWalletData.ts
@@ -11,7 +11,7 @@ export const useBtcWalletData = () => {
   const dispatch = useDispatch();
   const { btcAddress, dlcBtcAddress, network } = useWalletSelector();
   const location = useLocation();
-  const address = location.pathname.startsWith('/dlc')
+  const address = location.pathname.startsWith('/dlc') || location.pathname.endsWith('nested')
     ? dlcBtcAddress
     : btcAddress;
 

diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
@@ -101,7 +101,7 @@ const router = createHashRouter([
         element: <SendBtcScreen />,
       },
       {
-        path: 'dlc/send-btc-prefilled/:r',
+        path: 'send-btc-prefilled/:r',
         element: <SendBtcPrefilledScreen />,
       },
       {