Add "Transaction Details" button to SwapSuccessScene

CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## Unreleased
 
+- added: "Transaction Details" button to `SwapSuccessScene`
 - added: Include wallet creation date in wallet data in log output
+- changed: Wording on `SwapSuccessScene`
 - changed: Android `AutoLogoutModal` duration picker
 - changed: Enable Ethereum staking
 - changed: Prevent exchange rate fluctuations from restarting transaction list stream

src/__tests__/scenes/SwapSuccessScene.test.tsx

@@ -62,7 +62,27 @@ describe('SwapSuccessSceneComponent', () => {
 
     const renderer = TestRenderer.create(
       <FakeProviders initialState={fakeState}>
-        <SwapSuccessScene {...fakeSceneProps('swapSuccess', undefined)} />
+        <SwapSuccessScene
+          {...fakeSceneProps('swapSuccess', {
+            walletId: fakeCoreWallet.id,
+            edgeTransaction: {
+              blockHeight: 0,
+              currencyCode: 'BTC',
+              date: 1535752780.947, // 2018-08-31T21:59:40.947Z
+              isSend: false,
+              memos: [],
+              metadata: { name: 'timmy' },
+              nativeAmount: '12300000',
+              networkFee: '1',
+              otherParams: {},
+              ourReceiveAddresses: ['this is an address'],
+              signedTx: 'this is a signed tx',
+              tokenId: null,
+              txid: 'this is the txid',
+              walletId: fakeCoreWallet.id
+            }
+          })}
+        />
       </FakeProviders>
     )
 

src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap

@@ -290,7 +290,7 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = `
           ]
         }
       >
-        Your exchange has been successfully completed!
+        Your exchange is being processed!
       </Text>
       <Text
         adjustsFontSizeToFit={true}
@@ -320,7 +320,7 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = `
           ]
         }
       >
-        Exchanges may take a few minutes and up to 24 hours to process.
+        Processing may take up to 24 hours to complete.
       </Text>
     </View>
   </View>,

src/components/scenes/SwapConfirmationScene.tsx

@@ -186,7 +186,10 @@ export const SwapConfirmationScene = (props: Props) => {
         nativeAmount ${networkFee.nativeAmount}
 `)
 
-      navigation.push('swapSuccess')
+      navigation.push('swapSuccess', {
+        edgeTransaction: result.transaction,
+        walletId: request.fromWallet.id
+      })
 
       // Dispatch the success action and callback
       onApprove()

src/components/scenes/SwapSuccessScene.tsx

@@ -1,3 +1,4 @@
+import { EdgeTransaction } from 'edge-core-js'
 import * as React from 'react'
 import { View } from 'react-native'
 import ConfettiCannon from 'react-native-confetti-cannon'
@@ -14,6 +15,11 @@ import { SceneWrapper } from '../common/SceneWrapper'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from '../themed/EdgeText'
 
+export interface SwapSuccessParams {
+  edgeTransaction: EdgeTransaction
+  walletId: string
+}
+
 interface Props extends EdgeSceneProps<'swapSuccess'> {}
 
 const confettiProps = {
@@ -23,7 +29,8 @@ const confettiProps = {
 }
 
 export const SwapSuccessScene = (props: Props) => {
-  const { navigation } = props
+  const { navigation, route } = props
+  const { edgeTransaction, walletId } = route.params
   const theme = useTheme()
   const styles = getStyles(theme)
 
@@ -33,11 +40,15 @@ export const SwapSuccessScene = (props: Props) => {
   const userId = useSelector(state => state.core.account.id)
   const disklet = useSelector(state => state.core.disklet)
 
-  const done = useHandler(() => {
+  const handleDone = useHandler(() => {
     setShowButton(false)
     navigation.navigate('swapTab', { screen: 'swapCreate' })
   })
 
+  const handleTransactionDetails = useHandler(() => {
+    navigation.replace('transactionDetails', { edgeTransaction, walletId })
+  })
+
   useAsyncEffect(
     async () => {
       const show: boolean = await needToShowConfetti(userId, disklet)
@@ -71,7 +82,13 @@ export const SwapSuccessScene = (props: Props) => {
           {lstrings.exchange_congratulations_note}
         </EdgeText>
         <EdgeAnim style={styles.animOverlay} visible={showButton} enter={fadeIn}>
-          <SceneButtons absolute primary={{ label: lstrings.string_done_cap, onPress: done }} />
+          <SceneButtons
+            primary={{ label: lstrings.string_done_cap, onPress: handleDone }}
+            secondary={{
+              label: lstrings.transaction_details,
+              onPress: handleTransactionDetails
+            }}
+          />
         </EdgeAnim>
         {renderConfetti()}
       </View>
@@ -82,8 +99,8 @@ export const SwapSuccessScene = (props: Props) => {
 const getStyles = cacheStyles((theme: Theme) => ({
   animOverlay: {
     position: 'absolute',
-    width: '100%',
-    height: '100%'
+    height: '100%',
+    width: '100%'
   },
   container: {
     flexGrow: 1,

src/locales/en_US.ts

@@ -1,3 +1,5 @@
+import { transaction } from '../reducers/SpendingLimitsReducer'
+
 export type LocaleStringKey = keyof typeof strings
 
 const strings = {
@@ -672,6 +674,7 @@ const strings = {
   trade_currency: 'Trade',
   trade_s: 'Trade %1$s',
   swap_s_to_from_crypto: 'Swap %1$s to/from another crypto',
+  transaction_details: 'Transaction Details',
   transaction_details_category_title: 'Category',
   transaction_details_payee: 'Payee',
   transaction_details_payer: 'Payer',

src/locales/strings/enUS.json

@@ -604,6 +604,7 @@
   "trade_currency": "Trade",
   "trade_s": "Trade %1$s",
   "swap_s_to_from_crypto": "Swap %1$s to/from another crypto",
+  "transaction_details": "Transaction Details",
   "transaction_details_category_title": "Category",
   "transaction_details_payee": "Payee",
   "transaction_details_payer": "Payer",

src/types/routerTypes.tsx

@@ -70,6 +70,7 @@ import type { FiatPluginSepaTransferParams } from '../plugins/gui/scenes/InfoDis
 import type { RewardsCardDashboardParams } from '../plugins/gui/scenes/RewardsCardDashboardScene'
 import type { RewardsCardWelcomeParams } from '../plugins/gui/scenes/RewardsCardWelcomeScene'
 import type { FiatPluginSepaFormParams } from '../plugins/gui/scenes/SepaFormScene'
+import { SwapSuccessParams } from '../components/scenes/SwapSuccessScene'
 
 // -------------------------------------------------------------------------
 // Router types
@@ -184,7 +185,7 @@ export type EdgeAppStackParamList = {} & {
   stakeOptions: StakeOptionsParams
   stakeOverview: StakeOverviewParams
   swapSettings: undefined
-  swapSuccess: undefined
+  swapSuccess: SwapSuccessParams
   sweepPrivateKeyCalculateFee: SweepPrivateKeyCalculateFeeParams
   sweepPrivateKeyCompletion: SweepPrivateKeyCompletionParams
   sweepPrivateKeyProcessing: SweepPrivateKeyProcessingParams