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

…-extension into imamahzafar/feat/stacking
secretkeylabs · Nov 21, 2022 · eab617d · eab617d
2 parents 42c3cac + a051132
commit eab617d
Show file tree

Hide file tree

Showing 28 changed files with 1,155 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/.../confirmStxTransactionComponent/index.tsx → .../confirmStxTransactionComponent/index.tsx b/.../confirmStxTransactionComponent/index.tsx → .../confirmStxTransactionComponent/index.tsx
@@ -35,9 +35,8 @@ const Container = styled.div`
 const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
-  marginBottom: props.theme.spacing(8),
+  marginBottom: props.theme.spacing(20),
+  marginTop: props.theme.spacing(24),
 }));
 
 const TransparentButtonContainer = styled.div((props) => ({
@@ -49,12 +48,10 @@ const TransparentButtonContainer = styled.div((props) => ({
 const Button = styled.button((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
   borderRadius: props.theme.radius(1),
   backgroundColor: 'transparent',
   width: '100%',
-  marginTop: props.theme.spacing(5),
+  marginTop: props.theme.spacing(10),
 }));
 
 const ButtonText = styled.div((props) => ({
@@ -76,6 +73,7 @@ interface Props {
   onConfirmClick: (transactions: StacksTransaction[]) => void;
   children: ReactNode;
   isSponsored?: boolean;
+  isNft?: boolean;
 }
 
 function ConfirmStxTransationComponent({
@@ -85,6 +83,7 @@ function ConfirmStxTransationComponent({
   children,
   onConfirmClick,
   onCancelClick,
+  isNft,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const {
@@ -98,7 +97,7 @@ function ConfirmStxTransationComponent({
   const [buttonLoading, setButtonLoading] = useState(loading);
 
   const handleBackButtonClick = () => {
-    navigate('/send-stx');
+    navigate(-1);
   };
 
   useEffect(() => {
@@ -167,7 +166,7 @@ function ConfirmStxTransationComponent({
     <>
       <TopRow title={t('SEND')} onClick={handleBackButtonClick} />
       <Container>
-        <TransferAmountView currency="STX" amount={getAmount()} />
+        {!isNft && <TransferAmountView currency="STX" amount={getAmount()} />}
         {children}
         <TransferFeeView
           fee={microstacksToStx(getFee())}
@@ -189,24 +188,25 @@ function ConfirmStxTransationComponent({
           onApplyClick={applyTxSettings}
           onCrossClick={closeTransactionSettingAlert}
         />
-      </Container>
-      <ButtonContainer>
-        <TransparentButtonContainer>
+        <ButtonContainer>
+          <TransparentButtonContainer>
+            <ActionButton
+              text={t('CANCEL')}
+              transparent
+              disabled={buttonLoading}
+              onPress={onCancelClick}
+            />
+          </TransparentButtonContainer>
+
           <ActionButton
-            text={t('CANCEL')}
-            transparent
+            text={t('CONFIRM')}
             disabled={buttonLoading}
-            onPress={onCancelClick}
+            processing={buttonLoading}
+            onPress={onConfirmButtonClick}
           />
-        </TransparentButtonContainer>
+        </ButtonContainer>
+      </Container>
 
-        <ActionButton
-          text={t('CONFIRM')}
-          disabled={buttonLoading}
-          processing={buttonLoading}
-          onPress={onConfirmButtonClick}
-        />
-      </ButtonContainer>
     </>
   );
 }

diff --git a/src/app/components/recipinetAddressView/index.tsx b/src/app/components/recipinetAddressView/index.tsx
@@ -2,6 +2,8 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import ArrowSquareOut from '@assets/img/arrow_square_out.svg';
 import { getExplorerUrl } from '@utils/helper';
+import { useBnsName } from '@hooks/useBnsName';
+import useWalletSelector from '@hooks/useWalletSelector';
 
 const InfoContainer = styled.div((props) => ({
   display: 'flex',
@@ -47,15 +49,17 @@ interface Props {
   recipient: string;
 }
 function RecipientAddressView({ recipient }: Props) {
+  const { network } = useWalletSelector();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
-
+  const bnsName = useBnsName(recipient, network);
   const handleOnPress = () => {
     window.open(getExplorerUrl(recipient));
   };
 
   return (
     <InfoContainer>
       <TitleText>{t('RECEPIENT_ADDRESS')}</TitleText>
+      <ValueText>{bnsName}</ValueText>
       <RowContainer>
         <ValueText>{recipient}</ValueText>
         <ActionButton onClick={handleOnPress}>

diff --git a/src/app/components/sendForm/index.tsx b/src/app/components/sendForm/index.tsx
@@ -2,7 +2,9 @@ import { CurrencyTypes } from '@utils/constants';
 import { FungibleToken } from '@secretkeylabs/xverse-core/types';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import { SetStateAction, useState } from 'react';
+import {
+  ReactNode, SetStateAction, useEffect, useState,
+} from 'react';
 import BigNumber from 'bignumber.js';
 import IconBitcoin from '@assets/img/send/ic_sats_ticker.svg';
 import IconStacks from '@assets/img/dashboard/stack_icon.svg';
@@ -14,6 +16,7 @@ import ActionButton from '@components/button';
 import {
   btcToSats, getBtcFiatEquivalent, getStxFiatEquivalent, stxToMicrostacks,
 } from '@secretkeylabs/xverse-core/currency';
+import { useBNSResolver, useDebounce } from '@hooks/useBnsName';
 
 const ScrollContainer = styled.div`
   display: flex;
@@ -23,6 +26,8 @@ const ScrollContainer = styled.div`
   &::-webkit-scrollbar {
     display: none;
   }
+  margin-left: 5%;
+  margin-right: 5%;
 `;
 const OuterContainer = styled.div({
   display: 'flex',
@@ -39,8 +44,6 @@ const RowContainer = styled.div({
 const InfoContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
   padding: props.theme.spacing(8),
   border: `1px solid ${props.theme.colors.background.elevation3}`,
   borderRadius: 8,
@@ -50,14 +53,10 @@ const Container = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   marginTop: props.theme.spacing(11),
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
 }));
 
 const ErrorContainer = styled.div((props) => ({
   marginTop: props.theme.spacing(8),
-  marginLeft: props.theme.spacing(10),
-  marginRight: props.theme.spacing(10),
 }));
 
 const ErrorText = styled.h1((props) => ({
@@ -94,6 +93,11 @@ const SubText = styled.h1((props) => ({
   color: props.theme.colors.white['400'],
 }));
 
+const AssociatedText = styled.h1((props) => ({
+  ...props.theme.body_xs,
+  wordWrap: 'break-word',
+}));
+
 const BalanceText = styled.h1((props) => ({
   ...props.theme.body_medium_m,
   color: props.theme.colors.white['400'],
@@ -131,8 +135,6 @@ const TickerImage = styled.img((props) => ({
 }));
 
 const SendButtonContainer = styled.div((props) => ({
-  paddingLeft: props.theme.spacing(8),
-  paddingRight: props.theme.spacing(8),
   paddingBottom: props.theme.spacing(8),
   paddingTop: props.theme.spacing(4),
 }));
@@ -146,6 +148,7 @@ interface Props {
   hideMemo?: boolean;
   buttonText?: string;
   processing?: boolean;
+  children?: ReactNode;
 }
 
 function SendForm({
@@ -158,16 +161,35 @@ function SendForm({
   hideMemo = false,
   buttonText,
   processing,
+  children,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
   const [amount, setAmount] = useState('');
   const [memo, setMemo] = useState('');
   const [fiatAmount, setFiatAmount] = useState<string | undefined>('0');
+  const [showError, setShowError] = useState<string | undefined>(error);
   const [recipientAddress, setRecipientAddress] = useState('');
-
-  const { stxBtcRate, btcFiatRate, fiatCurrency } = useSelector(
+  const {
+    stxBtcRate, btcFiatRate, fiatCurrency, stxAddress,
+  } = useSelector(
     (state: StoreState) => state.walletState,
   );
+  const debouncedSearchTerm = useDebounce(recipientAddress, 300);
+  const associatedAddress = useBNSResolver(
+    debouncedSearchTerm,
+    stxAddress,
+    currencyType,
+  );
+
+  useEffect(() => {
+    if (error) {
+      if (associatedAddress !== '' && error.includes(t('ERRORS.ADDRESS_INVALID'))) {
+        setShowError('');
+      } else {
+        setShowError(error);
+      }
+    }
+  }, [error, associatedAddress]);
 
   function getFiatEquivalent(value: number) {
     if ((currencyType === 'FT' && !fungibleToken?.tokenFiatRate) || currencyType === 'NFT') {
@@ -262,6 +284,10 @@ function SendForm({
     );
   }
 
+  const onAddressInputChange = (e: { target: { value: SetStateAction<string> } }) => {
+    setRecipientAddress(e.target.value);
+  };
+
   function renderEnterRecepientSection() {
     return (
       <Container>
@@ -270,22 +296,29 @@ function SendForm({
           <InputFieldContainer>
             <InputField
               placeholder={t('RECEPIENT_PLACEHOLDER')}
-              onChange={(e: { target: { value: SetStateAction<string> } }) => setRecipientAddress(e.target.value)}
+              onChange={onAddressInputChange}
             />
           </InputFieldContainer>
         </AmountInputContainer>
+        {associatedAddress && currencyType !== 'BTC' && (
+        <>
+          <SubText>{t('ASSOCIATED_ADDRESS')}</SubText>
+          <AssociatedText>{associatedAddress}</AssociatedText>
+        </>
+        )}
       </Container>
     );
   }
 
   const handleOnPress = () => {
-    onPressSend(recipientAddress, amount, memo);
+    onPressSend(associatedAddress !== '' ? associatedAddress : debouncedSearchTerm, amount, memo);
   };
 
   return (
     <ScrollContainer>
       <OuterContainer>
         {!disableAmountInput && renderEnterAmountSection()}
+        {children}
         {renderEnterRecepientSection()}
         {currencyType !== 'BTC' && currencyType !== 'NFT' && !hideMemo && (
           <>
@@ -311,7 +344,7 @@ function SendForm({
         )}
       </OuterContainer>
       <ErrorContainer>
-        <ErrorText>{error}</ErrorText>
+        <ErrorText>{showError}</ErrorText>
       </ErrorContainer>
 
       <SendButtonContainer>

diff --git a/src/app/components/shareNft/index.tsx b/src/app/components/shareNft/index.tsx
@@ -13,9 +13,6 @@ import ShareLinkRow from './shareLinkRow';
 const Container = styled.button((props) => ({
   display: 'flex',
   flexDirection: 'column',
-  position: 'absolute',
-  top: 0,
-  right: 0,
   justifyContent: 'center',
   paddingLeft: props.theme.spacing(6),
   paddingRight: props.theme.spacing(8),

diff --git a/src/app/components/topRow/index.tsx b/src/app/components/topRow/index.tsx
@@ -27,8 +27,8 @@ const RowContainer = styled.div((props) => ({
   flexDirection: 'row',
   alignItems: 'center',
   paddingTop: props.theme.spacing(11),
-  paddingLeft: props.theme.spacing(11),
-  paddingRight: props.theme.spacing(11),
+  paddingLeft: '5%',
+  paddingRight: '5%',
 }));
 
 interface Props {

diff --git a/src/app/components/transferFeeView/index.tsx b/src/app/components/transferFeeView/index.tsx
@@ -10,7 +10,7 @@ import styled from 'styled-components';
 const RowContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  marginTop: props.theme.spacing(6),
+  marginTop: props.theme.spacing(8),
 }));
 
 const FeeText = styled.h1((props) => ({