feat(suite-native): send redirects to transaction details

trezor · Sep 5, 2024 · d916c7a · d916c7a
1 parent 318acee
commit d916c7a
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 83 deletions.
diff --git a/suite-native/graph/src/hooks.ts b/suite-native/graph/src/hooks.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { captureException } from '@sentry/react-native';
+import { A } from '@mobily/ts-belt';
 
 import {
     AccountItem,
@@ -29,7 +30,6 @@ import {
     setAccountGraphTimeframe,
     setPortfolioGraphTimeframe,
 } from './slice';
-import { A } from '@mobily/ts-belt';
 
 const useWatchTimeframeChangeForAnalytics = (
     timeframeHours: TimeframeHoursValue,

diff --git a/suite-native/module-send/package.json b/suite-native/module-send/package.json
@@ -36,7 +36,6 @@
         "@suite-native/navigation": "workspace:*",
         "@suite-native/settings": "workspace:*",
         "@suite-native/toasts": "workspace:*",
-        "@trezor/connect": "workspace:*",
         "@trezor/react-utils": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",

diff --git a/suite-native/module-send/src/components/OutputsReviewFooter.tsx b/suite-native/module-send/src/components/OutputsReviewFooter.tsx
@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Animated, { SlideInDown } from 'react-native-reanimated';
 
 import { CommonActions, useNavigation } from '@react-navigation/native';
-import { isRejected } from '@reduxjs/toolkit';
+import { isFulfilled } from '@reduxjs/toolkit';
 
 import {
     AccountsRootState,
@@ -11,15 +11,18 @@ import {
 } from '@suite-common/wallet-core';
 import { AccountKey } from '@suite-common/wallet-types';
 import { Button } from '@suite-native/atoms';
-import { RootStackRoutes, AppTabsRoutes } from '@suite-native/navigation';
-import { useToast } from '@suite-native/toasts';
+import { RootStackRoutes, AppTabsRoutes, RootStackParamList } from '@suite-native/navigation';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { ConfirmOnTrezorImage } from '@suite-native/device';
 
 import { sendTransactionAndCleanupSendFormThunk } from '../sendFormThunks';
 
-const navigateToAccountDetail = ({ accountKey }: { accountKey: AccountKey }) =>
+const navigateToAccountDetail = ({
+    accountKey,
+    txid,
+    closeActionType,
+}: RootStackParamList[RootStackRoutes.TransactionDetail]) =>
     // Reset navigation stack to the account detail screen with HomeStack as a previous step, so the user can navigate back there.
     CommonActions.reset({
         index: 1,
@@ -31,9 +34,11 @@ const navigateToAccountDetail = ({ accountKey }: { accountKey: AccountKey }) =>
                 },
             },
             {
-                name: RootStackRoutes.AccountDetail,
+                name: RootStackRoutes.TransactionDetail,
                 params: {
                     accountKey,
+                    txid,
+                    closeActionType,
                 },
             },
         ],
@@ -46,7 +51,6 @@ const footerStyle = prepareNativeStyle(utils => ({
 
 export const OutputsReviewFooter = ({ accountKey }: { accountKey: AccountKey }) => {
     const dispatch = useDispatch();
-    const { showToast } = useToast();
     const navigation = useNavigation();
     const { applyStyle } = useNativeStyles();
 
@@ -61,17 +65,14 @@ export const OutputsReviewFooter = ({ accountKey }: { accountKey: AccountKey })
     if (!signedTransaction || !account) return <ConfirmOnTrezorImage />;
 
     const handleSendTransaction = async () => {
-        const sendResponse = await dispatch(
-            sendTransactionAndCleanupSendFormThunk({ account, signedTransaction }),
-        );
+        const sendResponse = await dispatch(sendTransactionAndCleanupSendFormThunk({ account }));
 
-        if (isRejected(sendResponse)) {
-            // TODO: set error state
+        if (isFulfilled(sendResponse)) {
+            const { txid } = sendResponse.payload;
+            navigation.dispatch(
+                navigateToAccountDetail({ accountKey, txid, closeActionType: 'close' }),
+            );
         }
-
-        showToast({ variant: 'success', message: 'Transaction sent', icon: 'check' });
-
-        navigation.dispatch(navigateToAccountDetail({ accountKey }));
     };
 
     return (

diff --git a/suite-native/module-send/src/sendFormThunks.ts b/suite-native/module-send/src/sendFormThunks.ts
@@ -3,6 +3,7 @@ import { isRejected } from '@reduxjs/toolkit';
 
 import { createThunk } from '@suite-common/redux-utils';
 import {
+    PushTransactionError,
     deviceActions,
     enhancePrecomposedTransactionThunk,
     pushSendFormTransactionThunk,
@@ -18,7 +19,6 @@ import {
     GeneralPrecomposedTransactionFinal,
 } from '@suite-common/wallet-types';
 import { requestPrioritizedDeviceAccess } from '@suite-native/device-mutex';
-import { SignedTransaction } from '@trezor/connect';
 
 const SEND_MODULE_PREFIX = '@suite-native/send';
 
@@ -87,26 +87,25 @@ export const cleanupSendFormThunk = createThunk(
     },
 );
 
-export const sendTransactionAndCleanupSendFormThunk = createThunk(
+export const sendTransactionAndCleanupSendFormThunk = createThunk<
+    { txid: string },
+    { account: Account },
+    { rejectValue: PushTransactionError }
+>(
     `${SEND_MODULE_PREFIX}/sendTransactionAndCleanupSendFormThunk`,
-    async (
-        {
-            account,
-        }: { account: Account; signedTransaction: SignedTransaction['signedTransaction'] },
-        { dispatch, rejectWithValue },
-    ) => {
+    async ({ account }, { dispatch, rejectWithValue }) => {
         const response = await dispatch(
             pushSendFormTransactionThunk({
                 selectedAccount: account,
             }),
         );
 
         if (isRejected(response)) {
-            return rejectWithValue(response.error);
+            return rejectWithValue(response.payload!);
         }
 
         dispatch(cleanupSendFormThunk({ accountKey: account.key }));
 
-        return response.payload;
+        return response.payload.payload;
     },
 );
diff --git a/suite-native/module-send/tsconfig.json b/suite-native/module-send/tsconfig.json
@@ -41,7 +41,6 @@
         { "path": "../navigation" },
         { "path": "../settings" },
         { "path": "../toasts" },
-        { "path": "../../packages/connect" },
         { "path": "../../packages/react-utils" },
         { "path": "../../packages/styles" },
         { "path": "../../packages/theme" },

diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -165,6 +165,7 @@ export type RootStackParamList = {
     [RootStackRoutes.TransactionDetail]: {
         txid: string;
         accountKey: AccountKey;
+        closeActionType?: CloseActionType;
         tokenTransfer?: TokenTransfer;
     };
     [RootStackRoutes.DevUtilsStack]: undefined;

diff --git a/...-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx b/...-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx
@@ -13,30 +13,43 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { selectTransactionAddresses } from '../../selectors';
 import { TransactionDetailAddressesSection } from './TransactionDetailAddressesSection';
 
-type VerticalSeparatorProps = { isMultiInputTransaction: boolean };
+type VerticalSeparatorProps = { inputsCount: number };
 
 const SEPARATOR_TOP_OFFSET = 37;
 const SEPARATOR_LEFT_OFFSET = 7.5;
 const SINGLE_INPUT_SEPARATOR_HEIGHT = 34;
+const TWO_INPUTS_SEPARATOR_HEIGHT = 60;
 const MULTIPLE_INPUT_SEPARATOR_HEIGHT = 90;
 
-const separatorStyle = prepareNativeStyle<VerticalSeparatorProps>(
-    (utils, { isMultiInputTransaction }) => ({
-        position: 'absolute',
-        left: SEPARATOR_LEFT_OFFSET,
-        top: SEPARATOR_TOP_OFFSET,
-        width: utils.borders.widths.small,
-        height: isMultiInputTransaction
-            ? MULTIPLE_INPUT_SEPARATOR_HEIGHT
-            : SINGLE_INPUT_SEPARATOR_HEIGHT,
-        backgroundColor: utils.colors.backgroundNeutralSubdued,
-    }),
-);
+const separatorStyle = prepareNativeStyle<VerticalSeparatorProps>((utils, { inputsCount }) => ({
+    position: 'absolute',
+    left: SEPARATOR_LEFT_OFFSET,
+    top: SEPARATOR_TOP_OFFSET,
+    width: utils.borders.widths.small,
+    height: SINGLE_INPUT_SEPARATOR_HEIGHT,
+    backgroundColor: utils.colors.backgroundNeutralSubdued,
 
-export const VerticalSeparator = ({ isMultiInputTransaction }: VerticalSeparatorProps) => {
+    extend: [
+        {
+            condition: inputsCount === 2,
+            style: {
+                height: TWO_INPUTS_SEPARATOR_HEIGHT,
+            },
+        },
+        {
+            // Two addresses are displayed at maximum, other is hidden behind `Show more` button.
+            condition: inputsCount > 2,
+            style: {
+                height: MULTIPLE_INPUT_SEPARATOR_HEIGHT,
+            },
+        },
+    ],
+}));
+
+export const VerticalSeparator = ({ inputsCount }: VerticalSeparatorProps) => {
     const { applyStyle } = useNativeStyles();
 
-    return <Box style={applyStyle(separatorStyle, { isMultiInputTransaction })} />;
+    return <Box style={applyStyle(separatorStyle, { inputsCount })} />;
 };
 
 export const NetworkTransactionDetailSummary = ({
@@ -79,7 +92,7 @@ export const NetworkTransactionDetailSummary = ({
                     onShowMore={onShowMore}
                 />
             )}
-            <VerticalSeparator isMultiInputTransaction={transactionInputAddresses.length > 1} />
+            <VerticalSeparator inputsCount={transactionInputAddresses.length} />
         </VStack>
     );
 };
diff --git a/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx b/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx
@@ -36,7 +36,7 @@ export const TokenTransactionDetailSummary = ({
                 addresses={outputAddresses}
                 onShowMore={onShowMore}
             />
-            <VerticalSeparator isMultiInputTransaction={inputAddresses.length > 2} />
+            <VerticalSeparator inputsCount={inputAddresses.length} />
         </VStack>
     );
 };
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx
@@ -2,7 +2,6 @@ import { useSelector } from 'react-redux';
 
 import { AlertBox, Box, Card, Text, VStack } from '@suite-native/atoms';
 import { AccountKey, Timestamp } from '@suite-common/wallet-types';
-import { Icon } from '@suite-common/icons-deprecated';
 import { useFormatters } from '@suite-common/formatters';
 import { CryptoAmountFormatter, CryptoToFiatAmountFormatter } from '@suite-native/formatters';
 import {

diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
@@ -1,12 +1,6 @@
-import { useSelector } from 'react-redux';
-
 import { Badge, Box, DiscreetTextTrigger, Text, VStack } from '@suite-native/atoms';
-import { Icon, IconName } from '@suite-common/icons-deprecated';
-import { FiatRatesRootState, selectHistoricFiatRatesByTimestamp } from '@suite-common/wallet-core';
-import { getFiatRateKey, isPending } from '@suite-common/wallet-utils';
-import { Timestamp } from '@suite-common/wallet-types';
-import { SignValue } from '@suite-common/suite-types';
-import { AccountKey, TransactionType } from '@suite-common/wallet-types';
+import { isPending } from '@suite-common/wallet-utils';
+import { AccountKey } from '@suite-common/wallet-types';
 import {
     CryptoAmountFormatter,
     CryptoToFiatAmountFormatter,
@@ -15,7 +9,6 @@ import {
     SignValueFormatter,
 } from '@suite-native/formatters';
 import { EthereumTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
-import { selectFiatCurrencyCode } from '@suite-native/settings';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Translation } from '@suite-native/intl';
 

diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx
@@ -7,8 +7,6 @@ import { TokenDefinitionsRootState } from '@suite-common/token-definitions';
 import { TransactionsRootState } from '@suite-common/wallet-core';
 import { AccountKey } from '@suite-common/wallet-types';
 import { Box, Text, VStack } from '@suite-native/atoms';
-import { FiatRatesRootState, TransactionsRootState } from '@suite-common/wallet-core';
-import { SettingsSliceRootState } from '@suite-native/settings';
 import { useTranslate } from '@suite-native/intl';
 
 import { selectTransactionInputAndOutputTransfers, TransactionTranfer } from '../../selectors';

diff --git a/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx
@@ -6,7 +6,6 @@ import {
 import { EthereumTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
 
 import { useTransactionFiatRate } from '../../hooks/useTransactionFiatRate';
-import { signValueMap } from '../TransactionDetail/TransactionDetailHeader';
 import { TransactionListItemContainer } from './TransactionListItemContainer';
 import { getTransactionValueSign } from '../../utils';
 

diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItem.tsx
@@ -1,20 +1,13 @@
 import { useSelector } from 'react-redux';
-import { AccountKey, Timestamp, TransactionType } from '@suite-common/wallet-types';
-import { SignValue } from '@suite-common/suite-types';
+
+import { AccountKey } from '@suite-common/wallet-types';
 import {
     CryptoAmountFormatter,
     CryptoToFiatAmountFormatter,
     SignValueFormatter,
 } from '@suite-native/formatters';
-
 import { Box } from '@suite-native/atoms';
-import {
-    AccountsRootState,
-    FiatRatesRootState,
-    selectHistoricFiatRatesByTimestamp,
-    selectIsTestnetAccount,
-} from '@suite-common/wallet-core';
-import { getFiatRateKey } from '@suite-common/wallet-utils';
+import { AccountsRootState, selectIsTestnetAccount } from '@suite-common/wallet-core';
 import { EmptyAmountText } from '@suite-native/formatters/src/components/EmptyAmountText';
 import { WalletAccountTransaction } from '@suite-native/tokens';
 

diff --git a/suite-native/transactions/src/screens/TransactionDetailScreen.tsx b/suite-native/transactions/src/screens/TransactionDetailScreen.tsx
@@ -7,9 +7,8 @@ import {
     selectTransactionByTxidAndAccountKey,
     TransactionsRootState,
 } from '@suite-common/wallet-core';
-import { TokenAddress, TokenSymbol } from '@suite-common/wallet-types';
 import { analytics, EventType } from '@suite-native/analytics';
-import { Box, Button, Button, Text, Divider, VStack } from '@suite-native/atoms';
+import { Button, Text, VStack } from '@suite-native/atoms';
 import { useOpenLink } from '@suite-native/link';
 import {
     RootStackParamList,
@@ -18,24 +17,13 @@ import {
     ScreenSubHeader,
     StackProps,
 } from '@suite-native/navigation';
-import { EthereumTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
-import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import {
-    BlockchainRootState,
-    selectBlockchainExplorerBySymbol,
-    selectTransactionByTxidAndAccountKey,
-    TransactionsRootState,
-} from '@suite-common/wallet-core';
 import { useNativeStyles } from '@trezor/styles';
-import { analytics, EventType } from '@suite-native/analytics';
 import { EthereumTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
 import { TokenAddress, TokenSymbol, TransactionType } from '@suite-common/wallet-types';
-import { useOpenLink } from '@suite-native/link';
 import { Translation } from '@suite-native/intl';
 
 import { TransactionDetailData } from '../components/TransactionDetail/TransactionDetailData';
 import { TransactionDetailHeader } from '../components/TransactionDetail/TransactionDetailHeader';
-import { TransactionDetailSheets } from '../components/TransactionDetail/TransactionDetailSheets';
 
 const typeHeaderMap = {
     recv: 'Received',
@@ -51,7 +39,7 @@ export const TransactionDetailScreen = ({
     route,
 }: StackProps<RootStackParamList, RootStackRoutes.TransactionDetail>) => {
     const { utils } = useNativeStyles();
-    const { txid, accountKey, tokenTransfer } = route.params;
+    const { txid, accountKey, tokenTransfer, closeActionType = 'back' } = route.params;
     const openLink = useOpenLink();
     const transaction = useSelector((state: TransactionsRootState) =>
         selectTransactionByTxidAndAccountKey(state, txid, accountKey),
@@ -86,6 +74,7 @@ export const TransactionDetailScreen = ({
             customHorizontalPadding={utils.spacings.medium}
             screenHeader={
                 <ScreenSubHeader
+                    closeActionType={closeActionType}
                     content={
                         <Text>
                             <Translation

diff --git a/yarn.lock b/yarn.lock
@@ -10276,7 +10276,6 @@ __metadata:
     "@suite-native/navigation": "workspace:*"
     "@suite-native/settings": "workspace:*"
     "@suite-native/toasts": "workspace:*"
-    "@trezor/connect": "workspace:*"
     "@trezor/react-utils": "workspace:*"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"