DLC Implementation

package.json

@@ -5,7 +5,8 @@
   "private": true,
   "dependencies": {
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "0.10.0",
+    "@redux-saga/core": "^1.2.3",
+    "@secretkeylabs/xverse-core": "file:../xverse-core",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",
@@ -20,9 +21,11 @@
     "axios": "^1.1.3",
     "bignumber.js": "^9.1.0",
     "bip39": "^3.0.3",
+    "bitcoinjs-lib": "^6.1.0",
     "c32check": "^2.0.0",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.29.3",
+    "dlc-lib": "file:../dlc-lib",
     "i18next": "^21.9.1",
     "jsontokens": "^4.0.1",
     "moment": "^2.29.4",
@@ -46,6 +49,7 @@
     "react-tooltip": "^5.4.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
+    "redux-saga": "^1.2.3",
     "sats-connect": "^0.1.11",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",

src/app/App.tsx

@@ -20,6 +20,7 @@ function App(): JSX.Element {
         <Provider store={rootStore.store}>
           <PersistGate persistor={rootStore.persistedStore} loading={<LoadingScreen />}>
             <ThemeProvider theme={Theme}>
+              {/* <PopupHandler /> */}
               <RouterProvider router={router} />
               <Toaster position="bottom-center" containerStyle={{ bottom: 80 }} />
             </ThemeProvider>

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>

src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx

@@ -111,9 +111,9 @@ function BtcRecipientComponent({
   return (
     <Container>
       {recipientIndex && totalRecipient && (
-        <RecipientTitleText>{`${t(
-          'RECIPIENT'
-        )} ${recipientIndex}/${totalRecipient}`}</RecipientTitleText>
+        <RecipientTitleText>
+          {`${t('RECIPIENT')} ${recipientIndex}/${totalRecipient}`}
+        </RecipientTitleText>
       )}
       {heading && <RecipientTitleText>{heading}</RecipientTitleText>}
       <RowContainer>

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,
   );

src/app/components/dlcButton/index.tsx

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+
+interface ButtonProps {
+  disabled?: boolean;
+}
+
+const Button = styled.button<ButtonProps>((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  width: '100%',
+  height: 88,
+  color: props.theme.colors.white['400'],
+  marginTop: props.theme.spacing(11),
+  padding: props.theme.spacing(6),
+  borderRadius: props.theme.radius(1),
+  border:' 1px solid rgba(0,0,0,0)',
+  background: 'linear-gradient(to right, #93009E, #001FBA, #04BAB2, #2C039E)',
+  backgroundSize: '400%',
+  backgroundPosition: 'left',
+  transition: 'background-position 500ms ease, border-color 500ms ease, color 500ms ease',
+  '&:hover': {
+    backgroundPosition: 'right',
+    borderColor:'#07E8D8',
+    color: '#07E8D8',
+  },
+}));
+
+const ButtonContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+`;
+
+const RowContainer = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  paddingBottom: props.theme.spacing(2),
+}));
+
+const ButtonText = styled.div((props) => ({
+  ...props.theme.headline_m,
+  fontWeight: 600,
+  color: props.theme.colors.white['0'],
+  textAlign: 'center',
+}));
+
+const ButtonSubText = styled.div((props) => ({
+  ...props.theme.body_xs,
+  fontWeight: 400,
+  color: 'inherit',
+  textAlign: 'center',
+}));
+
+const ButtonImage = styled.img((props) => ({
+  marginRight: props.theme.spacing(3),
+  color: 'inherit',
+  alignSelf: 'center',
+  transform: 'all',
+}));
+
+interface Props {
+  src?: string;
+  text: string;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+function DLCActionButton({ src, text, onPress, disabled = false }: Props) {
+  const handleOnPress = () => {
+    if (!disabled) {
+      onPress();
+    }
+  };
+
+  return (
+    <Button onClick={handleOnPress} disabled={disabled}>
+      <ButtonContentContainer>
+        <RowContainer>
+          {src && <ButtonImage src={src} />}
+          <ButtonText>{text}</ButtonText>
+        </RowContainer>
+        <ButtonSubText>powered by DLC.Link</ButtonSubText>
+      </ButtonContentContainer>
+    </Button>
+  );
+}
+export default DLCActionButton;