payback loan (#1370)

* initial design

* updates

mobile-app/app/components/FeeInfoRow.tsx

@@ -34,7 +34,7 @@ export function FeeInfoRow (props: FeeInfoRowProps): JSX.Element {
       <View style={tailwind('w-5/12')}>
         <View style={tailwind('flex-row items-center justify-start')}>
           <ThemedText style={tailwind('text-sm mr-1')} testID={`${props.testID}_label`}>
-            {translate('components/FeeInfoRow', props.type === 'ESTIMATED_FEE' ? estimatedFee.title : vaultFee.title)}
+            {translate('components/BottomSheetInfo', props.type === 'ESTIMATED_FEE' ? estimatedFee.title : vaultFee.title)}
           </ThemedText>
           <BottomSheetInfo alertInfo={props.type === 'ESTIMATED_FEE' ? estimatedFee : vaultFee} name={props.type === 'ESTIMATED_FEE' ? estimatedFee.title : vaultFee.title} />
         </View>

mobile-app/app/screens/AppNavigator/screens/Loans/LoansNavigator.tsx

@@ -2,7 +2,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import * as React from 'react'
 import { HeaderFont } from '@components/Text'
 import { HeaderTitle } from '@components/HeaderTitle'
-import { LoanScheme, LoanToken, LoanVaultActive } from '@defichain/whale-api-client/dist/api/loan'
+import { LoanScheme, LoanToken, LoanVaultActive, LoanVaultTokenAmount } from '@defichain/whale-api-client/dist/api/loan'
 import { translate } from '@translations'
 import { NetworkDetails } from '../Settings/screens/NetworkDetails'
 import { LoadingState, LoansScreen } from './LoansScreen'
@@ -23,6 +23,8 @@ import { tailwind } from '@tailwind'
 import { TokenData } from '@defichain/whale-api-client/dist/api/tokens'
 import { LoansFaq } from '@screens/WalletNavigator/screens/CreateWallet/LoansFaq'
 import { TabKey } from '@screens/AppNavigator/screens/Loans/VaultDetail/components/VaultDetailTabSection'
+import { PaybackLoanScreen } from '@screens/AppNavigator/screens/Loans/screens/PaybackLoanScreen'
+import { ConfirmPaybackLoanScreen } from '@screens/AppNavigator/screens/Loans/screens/ConfirmPaybackLoanScreen'
 
 export interface LoanParamList {
   LoansScreen: {
@@ -68,6 +70,16 @@ export interface LoanParamList {
     fee: BigNumber
     conversion?: ConversionParam
   }
+  PaybackLoanScreen: {
+    loanToken: LoanVaultTokenAmount
+    vault: LoanVaultActive
+  }
+  ConfirmPaybackLoanScreen: {
+    fee: BigNumber
+    amountToPay: BigNumber
+    vault: LoanVaultActive
+    loanToken: LoanVaultTokenAmount
+  }
   [key: string]: undefined | object
 }
 
@@ -231,6 +243,30 @@ export function LoansNavigator (): JSX.Element {
           headerBackTitleVisible: false
         }}
       />
+      <LoansStack.Screen
+        component={PaybackLoanScreen}
+        name='PaybackLoanScreen'
+        options={{
+          headerBackTitleVisible: false,
+          headerTitle: () => (
+            <HeaderTitle
+              text={translate('screens/LoansScreen', 'Payback Loan')}
+            />
+          )
+        }}
+      />
+      <LoansStack.Screen
+        component={ConfirmPaybackLoanScreen}
+        name='ConfirmPaybackLoanScreen'
+        options={{
+          headerBackTitleVisible: false,
+          headerTitle: () => (
+            <HeaderTitle
+              text={translate('screens/ConfirmPaybackLoanScreen', 'Confirm Loan Payment')}
+            />
+          )
+        }}
+      />
     </LoansStack.Navigator>
   )
 }

mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx

@@ -201,7 +201,7 @@ function VaultInfoSection (props: { vault?: LoanVault }): JSX.Element | null {
             />
             <VaultSectionTextRow
               value={new BigNumber(props.vault.loanValue).toFixed(2)}
-              lhs={translate('screens/VaultDetailScreen', 'Total loan (USD)')}
+              lhs={translate('screens/VaultDetailScreen', 'Total loans (USD)')}
               testID='text_total_loan_value'
               prefix='$'
             />

mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx

@@ -121,7 +121,7 @@ function CollateralizationRatioSection (props: CollateralizationRatioSectionProp
           />
         )}
       <NumberRow
-        lhs={translate('components/VaultDetailDetailsTab', 'Total collaterals (USD)')}
+        lhs={translate('components/VaultDetailDetailsTab', 'Total collateral (USD)')}
         rhs={{
           value: props.totalCollateralsValue.toFixed(2),
           testID: 'text_collateral_value',

mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx

@@ -1,23 +1,30 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
-import { ThemedIcon, ThemedText, ThemedView } from '@components/themed'
+import { ThemedText, ThemedView } from '@components/themed'
 import { tailwind } from '@tailwind'
 import { View } from '@components'
 import { SymbolIcon } from '@components/SymbolIcon'
 import { IconButton } from '@components/IconButton'
 import { translate } from '@translations'
-import { TouchableOpacity } from 'react-native'
 import { LoanVault } from '@store/loans'
-import { LoanVaultState } from '@defichain/whale-api-client/dist/api/loan'
+import {
+  LoanVaultActive,
+  LoanVaultState,
+  LoanVaultTokenAmount
+} from '@defichain/whale-api-client/dist/api/loan'
 import { VaultSectionTextRow } from '../../components/VaultSectionTextRow'
 import { EmptyLoan } from './EmptyLoan'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
+import { LoanParamList } from '@screens/AppNavigator/screens/Loans/LoansNavigator'
 
 interface LoanCardProps {
   symbol: string
   displaySymbol: string
   amount: string
   interestAmount?: string
   vaultState: LoanVaultState
+  vault?: LoanVaultActive
+  loanToken: LoanVaultTokenAmount
 }
 
 export function LoansTab (props: { vault: LoanVault }): JSX.Element {
@@ -40,6 +47,7 @@ export function LoansTab (props: { vault: LoanVault }): JSX.Element {
               displaySymbol={batch.loan.displaySymbol}
               amount={batch.loan.amount}
               vaultState={LoanVaultState.IN_LIQUIDATION}
+              loanToken={batch.loan}
             />
           ))
         )
@@ -52,6 +60,8 @@ export function LoansTab (props: { vault: LoanVault }): JSX.Element {
               amount={loan.amount}
               interestAmount={vault.interestAmounts.find(interest => interest.symbol === loan.symbol)?.amount}
               vaultState={vault.state}
+              vault={vault}
+              loanToken={loan}
             />
           ))
         )}
@@ -118,16 +128,22 @@ function LoanCard (props: LoanCardProps): JSX.Element {
           />
         )}
       </View>
-      <ActionButtons hide />
+
+      {
+        props.vaultState !== LoanVaultState.IN_LIQUIDATION && props.vault !== undefined && (
+          <ActionButtons vault={props.vault} loanToken={props.loanToken} />
+        )
+      }
     </ThemedView>
   )
 }
 
 // TODO: show button when payback is ready
-function ActionButtons (props: { hide: boolean }): JSX.Element {
-  if (props.hide) {
-    return <></>
-  }
+function ActionButtons ({
+  vault,
+  loanToken
+}: { vault: LoanVaultActive, loanToken: LoanVaultTokenAmount }): JSX.Element {
+  const navigation = useNavigation<NavigationProp<LoanParamList>>()
 
   return (
     <View
@@ -137,30 +153,18 @@ function ActionButtons (props: { hide: boolean }): JSX.Element {
         <IconButton
           iconLabel={translate('components/VaultDetailsLoansTab', 'PAYBACK LOAN')}
           style={tailwind('mr-2 mb-2 p-2')}
-          onPress={() => { /* TODO: handle repay loan on press */
-          }}
-        />
-        <IconButton
-          iconLabel={translate('components/VaultDetailsLoansTab', 'BORROW MORE')}
-          style={tailwind('mr-2 mb-2 p-2')}
-          onPress={() => { /* TODO: handle borrow more on press */
+          onPress={() => {
+            navigation.navigate({
+              name: 'PaybackLoanScreen',
+              merge: true,
+              params: {
+                vault,
+                loanToken
+              }
+            })
           }}
         />
       </View>
-      <TouchableOpacity
-        style={tailwind('flex justify-end mb-4')}
-        onPress={() => { /* TODO: handle ... on press */
-        }}
-      >
-        <ThemedIcon
-          iconType='MaterialIcons'
-          name='more-horiz'
-          size={16}
-          light={tailwind('text-primary-500')}
-          dark={tailwind('text-darkprimary-500')}
-        />
-      </TouchableOpacity>
-
     </View>
   )
 }

mobile-app/app/screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm.tsx

@@ -91,9 +91,8 @@ export const AddOrRemoveCollateralForm = React.memo(({ route }: Props): JSX.Elem
     >
       <View style={tailwind('flex flex-row items-center mb-2')}>
         <ThemedText style={tailwind('flex-1 mb-2 text-lg font-medium')}>
-          {translate('components/AddOrRemoveCollateralForm', 'How much {{symbol}} to {{operation}}?', {
-            symbol: token.displaySymbol,
-            operation: isAdd ? 'add' : 'remove'
+          {translate('components/AddOrRemoveCollateralForm', `How much {{symbol}} to ${isAdd ? 'add' : 'remove'}?`, {
+            symbol: token.displaySymbol
           })}
         </ThemedText>
         {onCloseButtonPress !== undefined && (

mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx

@@ -152,7 +152,7 @@ export function VaultCard (props: VaultCardProps): JSX.Element {
             testID={`${props.testID}_total_loan`}
             prefix='$'
             value={new BigNumber(vault.loanValue).toFixed(2)}
-            lhs={translate('components/VaultCard', 'Total loan (USD)')}
+            lhs={translate('components/VaultCard', 'Total loans (USD)')}
           />
           <VaultSectionTextRow
             testID={`${props.testID}_total_collateral`}
@@ -184,10 +184,7 @@ function VaultActionButton ({
       {
         new BigNumber(vault.collateralValue).gt(0) && (
           <IconButton
-            iconType='MaterialIcons'
-            iconName='credit-card'
             iconLabel={translate('components/VaultCard', 'MANAGE LOANS')}
-            iconSize={16}
             style={tailwind('mr-2 mb-2 items-center')}
             onPress={() => {
               navigation.navigate('VaultDetailScreen', {
@@ -199,10 +196,7 @@ function VaultActionButton ({
         )
       }
       <IconButton
-        iconType='MaterialIcons'
-        iconName='edit'
         iconLabel={translate('components/VaultCard', 'EDIT COLLATERALS')}
-        iconSize={16}
         style={tailwind('mr-2 mb-2 items-center')}
         onPress={() => {
           navigation.navigate({

mobile-app/app/screens/AppNavigator/screens/Loans/components/Vaults.tsx

@@ -9,7 +9,7 @@ import { translate } from '@translations'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '@store'
 import { useEffect } from 'react'
-import { fetchVaults } from '@store/loans'
+import { fetchCollateralTokens, fetchVaults } from '@store/loans'
 import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
 import { useWalletContext } from '@shared-contexts/WalletContext'
 
@@ -23,6 +23,10 @@ export function Vaults (): JSX.Element {
   useEffect(() => {
     dispatch(fetchVaults({ address, client }))
   }, [blockCount])
+
+  useEffect(() => {
+    dispatch(fetchCollateralTokens({ client }))
+  }, [])
   const { isBetaFeature } = useFeatureFlagContext()
 
   return (