Merge pull request #491 from secretkeylabs/imamahzafar/eng-2248-recei…

…ve-address-alert-showing-in-other-open-tabs Show receive alert pop up in specific screens only
secretkeylabs · Jun 27, 2023 · 3d39518 · 3d39518
2 parents e4f5dd6 + a309c67
commit 3d39518
Show file tree

Hide file tree

Showing 11 changed files with 16,037 additions and 908 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx
@@ -1,7 +1,4 @@
-import AlertMessage from '@components/alertMessage';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
@@ -35,29 +32,8 @@ const TestnetText = styled.h1((props) => ({
 function ExtendedScreenContainer(): JSX.Element {
   const {
     network,
-    showBtcReceiveAlert,
-    showOrdinalReceiveAlert,
   } = useWalletSelector();
   const { t } = useTranslation('translation');
-  const [dontShowOrdinalReceiveAlert, setDontShowOrdinalReceiveAlert] = useState<boolean>(false);
-  const [dontShowBtcReceiveAlert, setDontShowBtcReceiveAlert] = useState<boolean>(false);
-  const dispatch = useDispatch();
-
-  const onReceiveAlertClose = () => {
-    if (dontShowBtcReceiveAlert) { dispatch(ChangeShowBtcReceiveAlertAction(null)); } else dispatch(ChangeShowBtcReceiveAlertAction(false));
-  };
-
-  const onReceiveOrdinalAlertClose = () => {
-    if (dontShowOrdinalReceiveAlert) { dispatch(ChangeShowOrdinalReceiveAlertAction(null)); } else dispatch(ChangeShowOrdinalReceiveAlertAction(false));
-  };
-
-  const onDontShowReceiveBtcAlert = () => {
-    setDontShowBtcReceiveAlert(true);
-  };
-
-  const onDontShowReceiveOrdinalAlert = () => {
-    setDontShowOrdinalReceiveAlert(true);
-  };
 
   return (
     <ExtendedScreenRouteContainer>
@@ -66,28 +42,6 @@ function ExtendedScreenContainer(): JSX.Element {
           <TestnetText>{t('SETTING_SCREEN.TESTNET')}</TestnetText>
         </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}
-        />
-      )}
-      {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}
-      />
-      )}
       <Outlet />
     </ExtendedScreenRouteContainer>
   );

diff --git a/src/app/components/receiveCardComponent/index.tsx b/src/app/components/receiveCardComponent/index.tsx
@@ -6,15 +6,14 @@ import Copy from '@assets/img/nftDashboard/Copy.svg';
 import QrCode from '@assets/img/nftDashboard/QrCode.svg';
 import { useTranslation } from 'react-i18next';
 import { ReactNode } from 'react';
-import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
-import { useDispatch } from 'react-redux';
-import useWalletSelector from '@hooks/useWalletSelector';
 
 interface Props {
   title: string;
   address: string;
   onQrAddressClick: () => void;
   children: ReactNode;
+  onCopyAddressClick?: () => void;
+
 }
 
 const ReceiveCard = styled.div((props) => ({
@@ -77,20 +76,13 @@ const StyledToolTip = styled(Tooltip)`
 `;
 
 function ReceiveCardComponent({
-  children, title, address, onQrAddressClick,
+  children, title, address, onQrAddressClick, onCopyAddressClick,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
-  const dispatch = useDispatch();
-  const {
-    ordinalsAddress,
-    btcAddress,
-    showOrdinalReceiveAlert,
-    showBtcReceiveAlert,
-  } = useWalletSelector();
+
   const onCopyClick = () => {
-    if (ordinalsAddress === address && showOrdinalReceiveAlert !== null) { dispatch(ChangeShowOrdinalReceiveAlertAction(true)); }
-    if (btcAddress === address && showBtcReceiveAlert !== null) { dispatch(ChangeShowBtcReceiveAlertAction(true)); }
     navigator.clipboard.writeText(address);
+    if(onCopyAddressClick) onCopyAddressClick();
   };
 
   return (

diff --git a/src/app/components/screenContainer/index.tsx b/src/app/components/screenContainer/index.tsx
@@ -1,9 +1,5 @@
-import AlertMessage from '@components/alertMessage';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -36,29 +32,8 @@ const TestnetText = styled.h1((props) => ({
 function ScreenContainer(): JSX.Element {
   const {
     network,
-    showBtcReceiveAlert,
-    showOrdinalReceiveAlert,
   } = useWalletSelector();
   const { t } = useTranslation('translation');
-  const [dontShowOrdinalReceiveAlert, setDontShowOrdinalReceiveAlert] = useState<boolean>(false);
-  const [dontShowBtcReceiveAlert, setDontShowBtcReceiveAlert] = useState<boolean>(false);
-  const dispatch = useDispatch();
-
-  const onReceiveAlertClose = () => {
-    if (dontShowBtcReceiveAlert) { dispatch(ChangeShowBtcReceiveAlertAction(null)); } else dispatch(ChangeShowBtcReceiveAlertAction(false));
-  };
-
-  const onReceiveOrdinalAlertClose = () => {
-    if (dontShowOrdinalReceiveAlert) { dispatch(ChangeShowOrdinalReceiveAlertAction(null)); } else dispatch(ChangeShowOrdinalReceiveAlertAction(false));
-  };
-
-  const onDontShowReceiveBtcAlert = () => {
-    setDontShowBtcReceiveAlert(true);
-  };
-
-  const onDontShowReceiveOrdinalAlert = () => {
-    setDontShowOrdinalReceiveAlert(true);
-  };
 
   return (
     <RouteContainer>
@@ -67,28 +42,6 @@ function ScreenContainer(): JSX.Element {
           <TestnetText>{t('SETTING_SCREEN.TESTNET')}</TestnetText>
         </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}
-      />
-      )}
-      {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}
-      />
-      )}
       <Outlet />
     </RouteContainer>
   );

diff --git a/src/app/components/showBtcReceiveAlert/index.tsx b/src/app/components/showBtcReceiveAlert/index.tsx
@@ -0,0 +1,32 @@
+import AlertMessage from "@components/alertMessage";
+import { ChangeShowBtcReceiveAlertAction } from "@stores/wallet/actions/actionCreators";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+
+
+interface Props {
+  onReceiveAlertClose: () => void;
+}
+function ShowBtcReceiveAlert({ onReceiveAlertClose }: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'ADDRESS_RECEIVE_ALERT_MESSAGE' });
+  const dispatch = useDispatch();
+
+  const onDontShowReceiveBtcAlert = () => {
+    dispatch(ChangeShowBtcReceiveAlertAction(false));
+    onReceiveAlertClose();
+  };
+
+  return (
+    <AlertMessage
+      title={t('RECEIVING_BTC')}
+      description={t('RECEIVING_BTC_INFO')}
+      buttonText={t('I_UNDERSTAND')}
+      onClose={onReceiveAlertClose}
+      onButtonClick={onReceiveAlertClose}
+      tickMarkButtonText={t('DO_NOT_SHOW_MESSAGE')}
+      tickMarkButtonClick={onDontShowReceiveBtcAlert}
+    />
+  )
+}
+
+export default ShowBtcReceiveAlert;
diff --git a/src/app/components/showOrdinalReceiveAlert/index.tsx b/src/app/components/showOrdinalReceiveAlert/index.tsx
@@ -0,0 +1,32 @@
+import AlertMessage from "@components/alertMessage";
+import { ChangeShowOrdinalReceiveAlertAction } from "@stores/wallet/actions/actionCreators";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+
+
+interface Props {
+    onOrdinalReceiveAlertClose: () => void;
+}
+function ShowOrdinalReceiveAlert({ onOrdinalReceiveAlertClose }: Props) {
+    const { t } = useTranslation('translation', { keyPrefix: 'ADDRESS_RECEIVE_ALERT_MESSAGE' });
+    const dispatch = useDispatch();
+
+    const onDontShowReceiveOrdinalAlert = () => {
+        dispatch(ChangeShowOrdinalReceiveAlertAction(false));
+        onOrdinalReceiveAlertClose();
+    };
+
+    return (
+        <AlertMessage
+            title={t('RECEIVING_ORDINALS')}
+            description={t('RECEIVING_ORDINAL_INFO')}
+            buttonText={t('I_UNDERSTAND')}
+            onClose={onOrdinalReceiveAlertClose}
+            onButtonClick={onOrdinalReceiveAlertClose}
+            tickMarkButtonText={t('DO_NOT_SHOW_MESSAGE')}
+            tickMarkButtonClick={onDontShowReceiveOrdinalAlert}
+        />
+    )
+}
+
+export default ShowOrdinalReceiveAlert;
diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx
@@ -30,7 +30,12 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import Theme from 'theme';
+import AlertMessage from '@components/alertMessage';
+import { useDispatch } from 'react-redux';
+import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
 import BalanceCard from './balanceCard';
+import ShowBtcReceiveAlert from '@components/showBtcReceiveAlert';
+import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert';
 
 const Container = styled.div`
   display: flex;
@@ -125,10 +130,13 @@ function Home() {
     keyPrefix: 'DASHBOARD_SCREEN',
   });
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const [openReceiveModal, setOpenReceiveModal] = useState(false);
   const [openSendModal, setOpenSendModal] = useState(false);
   const [openBuyModal, setOpenBuyModal] = useState(false);
-  const { coinsList, stxAddress, btcAddress, ordinalsAddress, brcCoinsList } = useWalletSelector();
+  const [isBtcReceiveAlertVisible, setIsBtcReceiveAlertVisible] = useState(false);
+  const [isOrdinalReceiveAlertVisible, setIsOrdinalReceiveAlertVisible] = useState(false);
+  const { coinsList, stxAddress, btcAddress, ordinalsAddress, brcCoinsList, showBtcReceiveAlert, showOrdinalReceiveAlert } = useWalletSelector();
   const { isLoading: loadingStxWalletData, isRefetching: refetchingStxWalletData } =
     useStxWalletData();
   const { isLoading: loadingBtcWalletData, isRefetching: refetchingBtcWalletData } =
@@ -213,6 +221,24 @@ function Home() {
     navigate('/buy/BTC');
   };
 
+  const onOrdinalReceiveAlertOpen = () => {
+    if (showOrdinalReceiveAlert)
+    setIsOrdinalReceiveAlertVisible(true);
+  };
+
+  const onOrdinalReceiveAlertClose = () => {
+    setIsOrdinalReceiveAlertVisible(false);
+  };
+
+  const onReceiveAlertClose = () => {
+    setIsBtcReceiveAlertVisible(false);
+  };
+
+  const onReceiveAlertOpen = () => {
+    if (showBtcReceiveAlert)
+    setIsBtcReceiveAlertVisible(true);
+  };
+
   const handleTokenPressed = (token: {
     coin: CurrencyTypes;
     ft: string | undefined;
@@ -235,6 +261,7 @@ function Home() {
         title={t('BITCOIN')}
         address={btcAddress}
         onQrAddressClick={onBTCReceiveSelect}
+        onCopyAddressClick={onReceiveAlertOpen}
       >
         <Icon src={BitcoinToken} />
       </ReceiveCardComponent>
@@ -243,6 +270,7 @@ function Home() {
         title={t('ORDINALS')}
         address={ordinalsAddress}
         onQrAddressClick={onOrdinalsReceivePress}
+        onCopyAddressClick={onOrdinalReceiveAlertOpen}
       >
         <MergedIcon src={OrdinalsIcon} />
       </ReceiveCardComponent>
@@ -259,6 +287,8 @@ function Home() {
   return (
     <>
       <AccountHeaderComponent />
+      {isBtcReceiveAlertVisible && <ShowBtcReceiveAlert onReceiveAlertClose={onReceiveAlertClose}/>}
+      {isOrdinalReceiveAlertVisible && <ShowOrdinalReceiveAlert onOrdinalReceiveAlertClose={onOrdinalReceiveAlertClose}/>}
       <Container>
         <BalanceCard
           isLoading={

diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx
@@ -22,6 +22,7 @@ import useAddressInscriptions from '@hooks/queries/ordinals/useAddressInscriptio
 import useStacksCollectibles from '@hooks/queries/useStacksCollectibles';
 import Nft from './nft';
 import ReceiveNftModal from './receiveNft';
+import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert';
 
 const Container = styled.div`
   display: flex;
@@ -193,9 +194,10 @@ function NftDashboard() {
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
   const dispatch = useDispatch();
   const { stxAddress, ordinalsAddress, hasActivatedOrdinalsKey } = useWalletSelector();
-  const [showShareNftOptions, setShowNftOptions] = useState<boolean>(false);
+  const [showShareNftOptions, setShowNftOptions] = useState(false);
   const [openReceiveModal, setOpenReceiveModal] = useState(false);
   const [showActivateOrdinalsAlert, setShowActivateOrdinalsAlert] = useState(false);
+  const [isOrdinalReceiveAlertVisible, setIsOrdinalReceiveAlertVisible] = useState(false);
   const {
     data: nftsList,
     hasNextPage,
@@ -271,6 +273,14 @@ function NftDashboard() {
     [],
   );
 
+  const onOrdinalReceiveAlertOpen = () => {
+    setIsOrdinalReceiveAlertVisible(true);
+  };
+
+  const onOrdinalReceiveAlertClose = () => {
+    setIsOrdinalReceiveAlertVisible(false);
+  };
+
   const NftListView = useCallback(
     () => (totalNfts === 0 && ordinalsLength === 0 ? (
       <NoCollectiblesText>{t('NO_COLLECTIBLES')}</NoCollectiblesText>
@@ -320,6 +330,7 @@ function NftDashboard() {
 
   return (
     <>
+      {isOrdinalReceiveAlertVisible && <ShowOrdinalReceiveAlert onOrdinalReceiveAlertClose={onOrdinalReceiveAlertClose} />}
       {showActivateOrdinalsAlert && (
         <AlertMessage
           title={t('ACTIVATE_ORDINALS')}
@@ -365,6 +376,7 @@ function NftDashboard() {
                 visible={openReceiveModal}
                 isGalleryOpen={isGalleryOpen}
                 onClose={onReceiveModalClose}
+                setOrdinalReceiveAlert={onOrdinalReceiveAlertOpen}
               />
             </ReceiveNftContainer>
           )}