Merge pull request #267 from secretkeylabs/imamahzafar/show-copy-addr…

…ess-alert Show alert when user copies BTC and Ordinal Address
secretkeylabs · Feb 23, 2023 · 77b44b3 · 77b44b3
2 parents 6e98d7e + fdc2bf6
commit 77b44b3
Show file tree

Hide file tree

Showing 12 changed files with 356 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/AlertMessage/index.tsx b/src/app/components/AlertMessage/index.tsx
@@ -35,6 +35,21 @@ const RowContainer = styled.div((props) => ({
   borderBottom: `1px solid ${props.theme.colors.background.elevation3}`,
 }));
 
+const TickMarkButtonContainer = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginLeft: props.theme.spacing(8),
+  marginRight: props.theme.spacing(8),
+  marginBottom: props.theme.spacing(18),
+}));
+
+const TickMarkButtonText = styled.h1((props) => ({
+  ...props.theme.body_m,
+  color: props.theme.colors.white[0],
+  marginLeft: props.theme.spacing(4.25),
+}));
+
 const TransparentButtonContainer = styled.div((props) => ({
   marginRight: props.theme.spacing(6),
   width: '100%',
@@ -44,6 +59,30 @@ const ButtonImage = styled.button({
   backgroundColor: 'transparent',
 });
 
+const TickButton = styled.input.attrs({ type: 'checkbox' })`
+  appearance: none;
+  border: 1.3px solid #ffffff;
+  width: 12px;
+  height: 12px;
+
+  &:checked {
+    position: relative;
+    &::before {
+      content: '\\2713';
+      font-size: 10px;
+      color: #fff;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &:hover {
+    background-color: #303354;
+  }
+`;
+
 const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
@@ -71,12 +110,15 @@ interface Props {
   description: string;
   buttonText?: string;
   secondButtonText?: string;
+  tickMarkButtonText?: string;
   onButtonClick?: () => void;
   onSecondButtonClick?: () => void;
+  tickMarkButtonClick?:() => void;
+
 }
 
 function AlertMessage({
-  onClose, title, description, buttonText, secondButtonText, onButtonClick, onSecondButtonClick,
+  onClose, title, description, buttonText, secondButtonText, tickMarkButtonText, onButtonClick, onSecondButtonClick, tickMarkButtonClick,
 }: Props) {
   return (
     <>
@@ -104,6 +146,26 @@ function AlertMessage({
           />
         </ButtonContainer>
         )}
+        {!onSecondButtonClick && onButtonClick && (
+        <ButtonContainer>
+          <ActionButton
+            text={buttonText ?? 'Yes'}
+            onPress={onButtonClick}
+          />
+        </ButtonContainer>
+        )}
+        { tickMarkButtonText && tickMarkButtonClick && (
+        <TickMarkButtonContainer>
+          <TickButton
+            type="checkbox"
+            defaultChecked={false}
+            onChange={() => {
+              tickMarkButtonClick();
+            }}
+          />
+          <TickMarkButtonText>{tickMarkButtonText}</TickMarkButtonText>
+        </TickMarkButtonContainer>
+        )}
       </Container>
 
     </>

diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -9,6 +9,9 @@ import Copy from '@assets/img/Copy.svg';
 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 useWalletSelector from '@hooks/useWalletSelector';
 
 interface GradientCircleProps {
   firstGradient: string;
@@ -107,12 +110,19 @@ interface Props {
 }
 
 function AccountRow({
-  account, isSelected, onAccountSelected, allowCopyAddress,
+  account,
+  isSelected,
+  onAccountSelected,
+  allowCopyAddress,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
+  const {
+    showBtcReceiveAlert,
+  } = useWalletSelector();
   const gradient = getAccountGradient(account?.stxAddress!);
   const [onStxCopied, setOnStxCopied] = useState(false);
   const [onBtcCopied, setOnBtcCopied] = useState(false);
+  const dispatch = useDispatch();
 
   function getName() {
     return account?.bnsName ?? `${t('ACCOUNT_NAME')} ${`${(account?.id ?? 0) + 1}`}`;
@@ -122,6 +132,7 @@ function AccountRow({
     navigator.clipboard.writeText(account?.btcAddress!);
     setOnBtcCopied(true);
     setOnStxCopied(false);
+    if (showBtcReceiveAlert !== null) { dispatch(ChangeShowBtcReceiveAlertAction(true)); }
   };
 
   const handleOnStxAddressClick = () => {
@@ -131,7 +142,9 @@ function AccountRow({
   };
 
   const onRowClick = () => {
-    if (!allowCopyAddress) { onAccountSelected(account!); }
+    if (!allowCopyAddress) {
+      onAccountSelected(account!);
+    }
   };
 
   const onClick = () => {

diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx
@@ -1,5 +1,9 @@
+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';
 
@@ -31,15 +35,59 @@ const TestnetText = styled.h1((props) => ({
 function ExtendedScreenContainer(): JSX.Element {
   const {
     network,
+    showBtcReceiveAlert,
+    showOrdinalReceiveAlert,
   } = useWalletSelector();
-  const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
+  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>
       {network.type === 'Testnet' && (
         <TestnetContainer>
-          <TestnetText>{t('TESTNET')}</TestnetText>
+          <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/screenContainer/index.tsx b/src/app/components/screenContainer/index.tsx
@@ -1,5 +1,9 @@
+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';
 
@@ -32,15 +36,59 @@ const TestnetText = styled.h1((props) => ({
 function ScreenContainer(): JSX.Element {
   const {
     network,
+    showBtcReceiveAlert,
+    showOrdinalReceiveAlert,
   } = useWalletSelector();
-  const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
+  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>
       {network.type === 'Testnet' && (
         <TestnetContainer>
-          <TestnetText>{t('TESTNET')}</TestnetText>
+          <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/screens/home/index.tsx b/src/app/screens/home/index.tsx
@@ -111,7 +111,6 @@ function Home() {
   const {
     stxAddress,
     btcAddress,
-    ordinalsAddress,
     masterPubKey,
     fiatCurrency,
     btcFiatRate,

diff --git a/src/app/screens/nftDashboard/receiveNft/receiveCardComponent/index.tsx b/src/app/screens/nftDashboard/receiveNft/receiveCardComponent/index.tsx
@@ -5,6 +5,9 @@ import { getShortTruncatedAddress } from '@utils/helper';
 import Copy from '@assets/img/nftDashboard/Copy.svg';
 import QrCode from '@assets/img/nftDashboard/QrCode.svg';
 import { useTranslation } from 'react-i18next';
+import { ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
+import { useDispatch } from 'react-redux';
+import useWalletSelector from '@hooks/useWalletSelector';
 
 interface Props {
   icon: string;
@@ -83,7 +86,13 @@ function ReceiveCardComponent({
   icon, title, address, onQrAddressClick,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
+  const dispatch = useDispatch();
+  const {
+    ordinalsAddress,
+    showOrdinalReceiveAlert,
+  } = useWalletSelector();
   const onCopyClick = () => {
+    if (ordinalsAddress === address && showOrdinalReceiveAlert !== null) { dispatch(ChangeShowOrdinalReceiveAlertAction(true)); }
     navigator.clipboard.writeText(address);
   };
 

diff --git a/src/app/screens/receive/index.tsx b/src/app/screens/receive/index.tsx
@@ -10,6 +10,8 @@ import ActionButton from '@components/button';
 import useWalletSelector from '@hooks/useWalletSelector';
 import BottomTabBar from '@components/tabBar';
 import InfoContainer from '@components/infoContainer';
+import { useDispatch } from 'react-redux';
+import { ChangeShowBtcReceiveAlertAction, ChangeShowOrdinalReceiveAlertAction } from '@stores/wallet/actions/actionCreators';
 
 const OuterContainer = styled.div`
   display: flex;
@@ -94,11 +96,14 @@ function Receive(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'RECEIVE' });
   const [addressCopied, setAddressCopied] = useState(false);
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const {
     stxAddress,
     btcAddress,
     ordinalsAddress,
     selectedAccount,
+    showBtcReceiveAlert,
+    showOrdinalReceiveAlert,
   } = useWalletSelector();
 
   const { currency } = useParams();
@@ -142,6 +147,8 @@ function Receive(): JSX.Element {
   const handleOnClick = () => {
     navigator.clipboard.writeText(getAddress());
     setAddressCopied(true);
+    if (currency === 'BTC' && showBtcReceiveAlert !== null) { dispatch(ChangeShowBtcReceiveAlertAction(true)); }
+    if (currency === 'ORD' && showOrdinalReceiveAlert !== null) { dispatch(ChangeShowOrdinalReceiveAlertAction(true)); }
   };
   return (
     <>

diff --git a/src/app/stores/wallet/actions/actionCreators.ts b/src/app/stores/wallet/actions/actionCreators.ts
@@ -270,3 +270,17 @@ export function ChangeActivateOrdinalsAction(hasActivatedOrdinalsKey: boolean):
     hasActivatedOrdinalsKey,
   };
 }
+
+export function ChangeShowBtcReceiveAlertAction(showBtcReceiveAlert: boolean | null): actions.ChangeShowBtcReceiveAlert {
+  return {
+    type: actions.ChangeShowBtcReceiveAlertKey,
+    showBtcReceiveAlert,
+  };
+}
+
+export function ChangeShowOrdinalReceiveAlertAction(showOrdinalReceiveAlert: boolean | null): actions.ChangeShowOrdinalReceiveAlert {
+  return {
+    type: actions.ChangeShowOrdinalReceiveAlertKey,
+    showOrdinalReceiveAlert,
+  };
+}