Merge branch 'develop' of https://github.com/secretkeylabs/xverse-web…

…-extension into imamahzafar/switch-fiat
secretkeylabs · Feb 27, 2023 · 3c81a02 · 3c81a02
2 parents 4b7e69c + 4be4bf2
commit 3c81a02
Show file tree

Hide file tree

Showing 27 changed files with 3,262 additions and 9,048 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "0.7.4",
+    "@secretkeylabs/xverse-core": "0.8.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",

diff --git a/src/app/components/AlertMessage/index.tsx b/src/app/components/AlertMessage/index.tsx
@@ -11,7 +11,7 @@ const Container = styled.div((props) => ({
   transform: 'translate(-50%, -50%)',
   width: 312,
   borderRadius: 12,
-  zIndex: 2000,
+  zIndex: 16000,
   background: props.theme.colors.background.elevation2,
   filter: 'drop-shadow(0px 16px 36px rgba(0, 0, 0, 0.5))',
 }));
@@ -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/infoContainer/index.tsx b/src/app/components/infoContainer/index.tsx
@@ -1,15 +1,18 @@
 import styled from 'styled-components';
 import InfoIcon from '@assets/img/info.svg';
+import WarningIcon from '@assets/img/Warning.svg';
 
-const Container = styled.div((props) => ({
+const Container = styled.div<{ type: 'Info' | 'Warning' | undefined }>((props) => ({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: 12,
   alignItems: 'flex-start',
   backgroundColor: 'transparent',
   padding: props.theme.spacing(8),
   marginBottom: props.theme.spacing(6),
-  border: '1px solid rgba(255, 255, 255, 0.2)',
+  border: `1px solid ${
+    props.type === 'Warning' ? props.theme.colors.feedback.error_700 : 'rgba(255, 255, 255, 0.2)'
+  }`,
 }));
 
 const TextContainer = styled.div((props) => ({
@@ -38,20 +41,22 @@ const Text = styled.h1((props) => ({
 interface Props {
   titleText?: string;
   bodyText: string;
+  type?: 'Info' | 'Warning';
 }
 
-function InfoContainer({ titleText, bodyText }: Props) {
+function InfoContainer({ titleText, bodyText, type }: Props) {
   return (
-    <Container>
-      <img src={InfoIcon} alt="alert" />
+    <Container type={type}>
+      <img src={type === 'Warning' ? WarningIcon : InfoIcon} alt="alert" />
       <TextContainer>
         {titleText ? (
           <>
             <BoldText>{titleText}</BoldText>
             <SubText>{bodyText}</SubText>
           </>
-        )
-          : <Text>{bodyText}</Text>}
+        ) : (
+          <Text>{bodyText}</Text>
+        )}
       </TextContainer>
     </Container>
   );

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