Jon/swap-success-update

CHANGELOG.md

@@ -2,11 +2,13 @@
 
 ## Unreleased
 
+- added: "Transaction Details" button to `SwapSuccessScene`
 - added: `WalletRestoreScene`
 - added: Button to access the `WalletRestoreScene` on `WalletListScene` if applicable
 - added: "Go to Parent Wallet" `WalletListMenuModal` option
 - added: Earn Scene
 - added: Include wallet creation date in wallet data in log output
+- changed: Wording on `SwapSuccessScene`
 - changed: `SettingsScene` disables "Restore Wallets" option if there are no wallets to restore
 - changed: FIO Home Scene tile replaced with Earn
 - changed: Stake Overview Scene `StakingReturnsCard` redesigned

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)
@@ -65,13 +76,19 @@ export const SwapSuccessScene = (props: Props) => {
       <View style={styles.container}>
         <EdgeText style={styles.title}>{lstrings.exchange_congratulations}</EdgeText>
         <EdgeText style={styles.text} numberOfLines={2}>
-          {lstrings.exchange_congratulations_msg}
+          {lstrings.exchange_congratulations_success}
         </EdgeText>
         <EdgeText style={[styles.text, styles.textInfo]} numberOfLines={3}>
-          {lstrings.exchange_congratulations_msg_info}
+          {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

@@ -154,8 +154,8 @@ const strings = {
     'The "%1$s" application is requesting full access to your account and all wallets. \n\nOnly accept this login request if you trust this application and where it was downloaded from.',
   exchange_failed: 'Exchange Failed',
   exchange_congratulations: 'Congratulations!',
-  exchange_congratulations_msg: 'Your exchange has been successfully completed!',
-  exchange_congratulations_msg_info: 'Exchanges may take a few minutes and up to 24 hours to process.',
+  exchange_congratulations_success: 'Your exchange is being processed!',
+  exchange_congratulations_note: 'Processing may take up to 24 hours to complete.',
   no_exchange_amount: 'No Amount Selected',
   select_exchange_amount: 'Please enter an amount to exchange',
   select_exchange_amount_short: 'Enter an Amount',
@@ -678,6 +678,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

@@ -101,8 +101,8 @@
   "edge_description_warning": "The \"%1$s\" application is requesting full access to your account and all wallets. \n\nOnly accept this login request if you trust this application and where it was downloaded from.",
   "exchange_failed": "Exchange Failed",
   "exchange_congratulations": "Congratulations!",
-  "exchange_congratulations_msg": "Your exchange has been successfully completed!",
-  "exchange_congratulations_msg_info": "Exchanges may take a few minutes and up to 24 hours to process.",
+  "exchange_congratulations_success": "Your exchange is being processed!",
+  "exchange_congratulations_note": "Processing may take up to 24 hours to complete.",
   "no_exchange_amount": "No Amount Selected",
   "select_exchange_amount": "Please enter an amount to exchange",
   "select_exchange_amount_short": "Enter an Amount",
@@ -610,6 +610,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

@@ -53,6 +53,7 @@ import type { StakeOverviewParams } from '../components/scenes/Staking/StakeOver
 import type { SwapConfirmationParams } from '../components/scenes/SwapConfirmationScene'
 import type { SwapCreateParams } from '../components/scenes/SwapCreateScene'
 import type { SwapProcessingParams } from '../components/scenes/SwapProcessingScene'
+import { SwapSuccessParams } from '../components/scenes/SwapSuccessScene'
 import type { SweepPrivateKeyCalculateFeeParams } from '../components/scenes/SweepPrivateKeyCalculateFeeScene'
 import type { SweepPrivateKeyCompletionParams } from '../components/scenes/SweepPrivateKeyCompletionScene'
 import type { SweepPrivateKeyProcessingParams } from '../components/scenes/SweepPrivateKeyProcessingScene'
@@ -186,7 +187,7 @@ export type EdgeAppStackParamList = {} & {
   stakeOptions: StakeOptionsParams
   stakeOverview: StakeOverviewParams
   swapSettings: undefined
-  swapSuccess: undefined
+  swapSuccess: SwapSuccessParams
   sweepPrivateKeyCalculateFee: SweepPrivateKeyCalculateFeeParams
   sweepPrivateKeyCompletion: SweepPrivateKeyCompletionParams
   sweepPrivateKeyProcessing: SweepPrivateKeyProcessingParams