Bug fixes (NFT & Coin Dashboard)

src/app/components/confirmStxTransactionComponent/index.tsx

@@ -1,6 +1,4 @@
-import TopRow from '@components/topRow';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { ReactNode, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
@@ -90,13 +88,8 @@ function ConfirmStxTransationComponent({
   } = useSelector((state: StoreState) => state.walletState);
   const [stateTx] = useState(initialStxTransactions);
   const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
-  const navigate = useNavigate();
   const [buttonLoading, setButtonLoading] = useState(loading);
 
-  const handleBackButtonClick = () => {
-    navigate(-1);
-  };
-
   useEffect(() => {
     setButtonLoading(loading);
   }, [loading]);
@@ -154,50 +147,46 @@ function ConfirmStxTransationComponent({
   };
 
   return (
-    <>
-      <TopRow title={t('SEND')} onClick={handleBackButtonClick} />
-      <Container>
-        {children}
-        <TransferFeeView
-          fee={microstacksToStx(getFee())}
-          currency="STX"
-        />
-        {!isSponsored && (
+    <Container>
+      {children}
+      <TransferFeeView
+        fee={microstacksToStx(getFee())}
+        currency="STX"
+      />
+      {!isSponsored && (
         <Button onClick={onAdvancedSettingClick}>
           <>
             <ButtonImage src={SettingIcon} />
             <ButtonText>{t('ADVANCED_SETTING')}</ButtonText>
           </>
         </Button>
-        )}
-        <TransactionSettingAlert
-          visible={openTransactionSettingModal}
-          fee={microstacksToStx(getFee()).toString()}
-          type="STX"
-          nonce={getTxNonce()}
-          onApplyClick={applyTxSettings}
-          onCrossClick={closeTransactionSettingAlert}
-        />
-        <ButtonContainer>
-          <TransparentButtonContainer>
-            <ActionButton
-              text={t('CANCEL')}
-              transparent
-              disabled={buttonLoading}
-              onPress={onCancelClick}
-            />
-          </TransparentButtonContainer>
-
+      )}
+      <TransactionSettingAlert
+        visible={openTransactionSettingModal}
+        fee={microstacksToStx(getFee()).toString()}
+        type="STX"
+        nonce={getTxNonce()}
+        onApplyClick={applyTxSettings}
+        onCrossClick={closeTransactionSettingAlert}
+      />
+      <ButtonContainer>
+        <TransparentButtonContainer>
           <ActionButton
-            text={t('CONFIRM')}
+            text={t('CANCEL')}
+            transparent
             disabled={buttonLoading}
-            processing={buttonLoading}
-            onPress={onConfirmButtonClick}
+            onPress={onCancelClick}
           />
-        </ButtonContainer>
-      </Container>
+        </TransparentButtonContainer>
 
-    </>
+        <ActionButton
+          text={t('CONFIRM')}
+          disabled={buttonLoading}
+          processing={buttonLoading}
+          onPress={onConfirmButtonClick}
+        />
+      </ButtonContainer>
+    </Container>
   );
 }
 

src/app/components/sendForm/index.tsx

@@ -339,7 +339,7 @@ function SendForm({
   };
 
   const onBuyClick = () => {
-    navigate(`/buy-stx/${currencyType}`);
+    navigate(`/buy/${currencyType}`);
   };
 
   const buyCryptoMessage = balance === 0 && (currencyType === 'STX' || currencyType === 'BTC') && (
@@ -355,6 +355,13 @@ function SendForm({
     </BuyCryptoContainer>
   );
 
+  const checkIfEnableButton = () => {
+    if (disableAmountInput) {
+      if (recipientAddress !== '' || associatedAddress !== '') { return true; }
+    } else if ((amount !== '' && recipientAddress !== '') || associatedAddress !== '') return true;
+    return false;
+  };
+
   return (
     <>
       <ScrollContainer>
@@ -390,7 +397,7 @@ function SendForm({
       <ErrorContainer>
         <ErrorText>{showError}</ErrorText>
       </ErrorContainer>
-      <SendButtonContainer enabled={amount !== '' && recipientAddress !== ''}>
+      <SendButtonContainer enabled={checkIfEnableButton()}>
         <ActionButton
           text={buttonText ?? t('NEXT')}
           processing={processing}

src/app/components/shareNft/index.tsx

@@ -18,7 +18,7 @@ const Container = styled.button((props) => ({
   paddingRight: props.theme.spacing(8),
   paddingTop: props.theme.spacing(8),
   paddingBottom: props.theme.spacing(8),
-  borderRadius: props.theme.radius(6),
+  borderRadius: 12,
   width: 260,
   background: props.theme.colors.background.elevation2,
 }));

src/app/components/tokenTile/index.tsx

@@ -19,16 +19,15 @@ interface TileProps {
 interface TickerProps {
   enlargeTicker? : boolean;
 }
-const TileContainer = styled.div<TileProps>((props) => ({
+const TileContainer = styled.button<TileProps>((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  alignItems: 'flex-start',
-  justifyContent: 'space-between',
   backgroundColor: props.color,
+  width: '100%',
   paddingLeft: props.theme.spacing(8),
   paddingRight: props.theme.spacing(8),
-  paddingTop: props.theme.spacing(6),
-  paddingBottom: props.margin ?? props.theme.spacing(6),
+  paddingTop: props.theme.spacing(7.25),
+  paddingBottom: props.margin ?? props.theme.spacing(7.25),
   borderRadius: props.theme.radius(2),
   marginBottom: props.theme.spacing(6),
 }));
@@ -60,14 +59,20 @@ const TickerIconText = styled.h1((props) => ({
   fontSize: 10,
 }));
 
+const RowContainer = styled.div({
+  flex: 1,
+  display: 'flex',
+});
+
 const TextContainer = styled.div((props) => ({
-  flex: 2,
   marginLeft: props.theme.spacing(6),
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
 }));
 
 const AmountContainer = styled.div({
   alignContent: 'flex-end',
-  flex: 1,
 });
 
 const LoaderMainContainer = styled.div((props) => ({
@@ -309,11 +314,13 @@ function TokenTile({
 
   return (
     <TileContainer color={underlayColor} margin={margin} onClick={handleTokenPressed}>
-      {renderIcon()}
-      <TextContainer>
-        <CoinTickerText>{getTickerTitle()}</CoinTickerText>
-        <SubText>{title}</SubText>
-      </TextContainer>
+      <RowContainer>
+        {renderIcon()}
+        <TextContainer>
+          <CoinTickerText>{getTickerTitle()}</CoinTickerText>
+          <SubText>{title}</SubText>
+        </TextContainer>
+      </RowContainer>
       {loading ? (
         <TokenLoader />
       ) : (

src/app/hooks/useNftReducer.ts

@@ -1,15 +1,17 @@
-import { NftDetailResponse } from '@secretkeylabs/xverse-core/types';
+import { NftData } from '@secretkeylabs/xverse-core/types/api/gamma/currency';
 import { setNftDataAction } from '@stores/nftData/actions/actionCreator';
 import { useDispatch } from 'react-redux';
 import useNftDataSelector from './useNftDataSelector';
 
 const useNftDataReducer = () => {
   const { nftData } = useNftDataSelector();
   const dispatch = useDispatch();
-  const storeNftData = (data:NftDetailResponse) => {
-    if (data && !nftData.includes(data.data)) {
+
+  const storeNftData = (data:NftData) => {
+    const nftExists = nftData.find((nftItem) => nftItem?.token_id === data?.token_id);
+    if (data && !nftExists) {
       const modifiedNftList = [...nftData];
-      modifiedNftList.push(data.data);
+      modifiedNftList.push(data);
       dispatch(setNftDataAction(modifiedNftList));
     }
   };

src/app/routes/index.tsx

@@ -85,10 +85,6 @@ const router = createHashRouter([
         path: 'send-btc',
         element: <SendBtcScreen />,
       },
-      {
-        path: 'nft-dashboard/nft-detail/:id/send-nft',
-        element: <SendNft />,
-      },
       {
         path: 'confirm-stx-tx',
         element: <ConfirmStxTransaction />,
@@ -101,10 +97,6 @@ const router = createHashRouter([
         path: 'confirm-btc-tx',
         element: <ConfirmBtcTransaction />,
       },
-      {
-        path: 'tx-status',
-        element: <TransactionStatus />,
-      },
       {
         path: 'backup',
         element: <BackupWallet />,
@@ -162,13 +154,14 @@ const router = createHashRouter([
         element: <BackupWalletScreen />,
       },
       {
-        path: 'buy-stx/:currency',
-        element: <Buy />,
+        path: 'tx-status',
+        element: <TransactionStatus />,
       },
       {
-        path: 'confirm-nft-tx/:id',
-        element: <ConfirmNftTransaction />,
+        path: 'buy/:currency',
+        element: <Buy />,
       },
+
       {
         path: 'coinDashboard/:coin',
         element: <CoinDashboard />,
@@ -191,6 +184,15 @@ const router = createHashRouter([
         path: 'nft-dashboard/nft-detail/:id',
         element: <NftDetailScreen />,
       },
+      {
+        path: 'nft-dashboard/nft-detail/:id/send-nft',
+        element: <SendNft />,
+      },
+      {
+        path: 'confirm-nft-tx/:id',
+        element: <ConfirmNftTransaction />,
+      },
+
     ],
   },
 ]);

src/app/screens/coinDashboard/coinHeader.tsx

@@ -297,6 +297,18 @@ export default function CoinHeader(props: CoinBalanceProps) {
     }
   };
 
+  const goToSendScreen = () => {
+    if (coin === 'STX' || coin === 'BTC') {
+      navigate(`/send-${coin}`);
+    } else {
+      navigate('/send-ft', {
+        state: {
+          fungibleToken,
+        },
+      });
+    }
+  };
+
   return (
     <Container>
       <BalanceInfoContainer>
@@ -328,7 +340,7 @@ export default function CoinHeader(props: CoinBalanceProps) {
       {renderStackingBalances()}
       <RowButtonContainer>
         <ButtonContainer>
-          <ActionButton src={ArrowUpRight} text="Send" onPress={() => navigate(`/send-${coin}`)} />
+          <ActionButton src={ArrowUpRight} text="Send" onPress={() => goToSendScreen()} />
         </ButtonContainer>
         <ButtonContainer>
           <ActionButton
@@ -339,7 +351,7 @@ export default function CoinHeader(props: CoinBalanceProps) {
         </ButtonContainer>
         {!fungibleToken && (
           <ButtonContainer>
-            <ActionButton src={CreditCard} text="Buy" onPress={() => null} />
+            <ActionButton src={CreditCard} text="Buy" onPress={() => navigate(`/buy/${coin}`)} />
           </ButtonContainer>
         )}
       </RowButtonContainer>

src/app/screens/confirmFtTransaction/index.tsx

@@ -13,6 +13,7 @@ import RecipientAddressView from '@components/recipinetAddressView';
 import TransferAmountView from '@components/transferAmountView';
 import ConfirmStxTransationComponent from '@components/confirmStxTransactionComponent';
 import { getTicker } from '@utils/helper';
+import TopRow from '@components/topRow';
 
 const InfoContainer = styled.div((props) => ({
   display: 'flex',
@@ -102,8 +103,13 @@ function ConfirmFtTransaction() {
     } return '';
   }
 
+  const handleBackButtonClick = () => {
+    navigate(-1);
+  };
+
   return (
     <>
+      <TopRow title={t('CONFIRM_TX')} onClick={handleBackButtonClick} />
       <ConfirmStxTransationComponent
         initialStxTransactions={[unsignedTx]}
         loading={isLoading}