From 1ec9580a8f1e03d55a5b9792c229ea6fcf7b1fe6 Mon Sep 17 00:00:00 2001
From: JJ Adonis <josejaimecareers@gmail.com>
Date: Sun, 21 Nov 2021 11:31:26 +0800
Subject: [PATCH] `payback loan`  (#1370)

* initial design

* updates
---
 mobile-app/app/components/FeeInfoRow.tsx      |   2 +-
 .../screens/Loans/LoansNavigator.tsx          |  38 ++-
 .../Loans/VaultDetail/VaultDetailScreen.tsx   |   2 +-
 .../VaultDetail/components/DetailsTab.tsx     |   2 +-
 .../Loans/VaultDetail/components/LoansTab.tsx |  62 ++--
 .../components/AddOrRemoveCollateralForm.tsx  |   5 +-
 .../screens/Loans/components/VaultCard.tsx    |   8 +-
 .../screens/Loans/components/Vaults.tsx       |   6 +-
 .../__snapshots__/VaultCard.test.tsx.snap     |  83 +----
 .../screens/Loans/hooks/CollateralPrice.ts    |   6 +
 .../Loans/screens/BorrowLoanTokenScreen.tsx   |  30 +-
 .../screens/ConfirmBorrowLoanTokenScreen.tsx  |  40 ++-
 .../screens/ConfirmEditCollateralScreen.tsx   |   2 +-
 .../screens/ConfirmPaybackLoanScreen.tsx      | 278 +++++++++++++++
 .../Loans/screens/EditCollateralScreen.tsx    |  12 +-
 .../Loans/screens/PaybackLoanScreen.tsx       | 317 ++++++++++++++++++
 shared/translations/languages/de.json         | 119 ++++++-
 shared/translations/languages/zh-Hans.json    |   6 +-
 shared/translations/languages/zh-Hant.json    |   6 +-
 19 files changed, 843 insertions(+), 181 deletions(-)
 create mode 100644 mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmPaybackLoanScreen.tsx
 create mode 100644 mobile-app/app/screens/AppNavigator/screens/Loans/screens/PaybackLoanScreen.tsx

diff --git a/mobile-app/app/components/FeeInfoRow.tsx b/mobile-app/app/components/FeeInfoRow.tsx
index a9e4a7940a..57b7e3ca44 100644
--- a/mobile-app/app/components/FeeInfoRow.tsx
+++ b/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>
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/LoansNavigator.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/LoansNavigator.tsx
index 2e3bff7de4..7e29afca4f 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/LoansNavigator.tsx
+++ b/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>
   )
 }
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx
index ff5907999c..3a5095d7a9 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx
+++ b/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='$'
             />
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx
index 9a2f057ba8..55f60352f1 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx
+++ b/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',
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx
index 848ceefb7a..1fa55d3fed 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx
@@ -1,16 +1,21 @@
 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
@@ -18,6 +23,8 @@ interface LoanCardProps {
   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>
   )
 }
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm.tsx
index cd9b5731d3..b1ff3b990c 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/AddOrRemoveCollateralForm.tsx
+++ b/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 && (
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx
index 773cf30662..0b123d1d19 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx
+++ b/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({
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/Vaults.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/Vaults.tsx
index 17b54f2d93..47031378cb 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/Vaults.tsx
+++ b/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 (
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
index 5404a923c4..6ed3c93443 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
@@ -767,7 +767,7 @@ exports[`Vault card should match snapshot of active vault 1`] = `
             }
             testID="vault_total_loan_label"
           >
-            Total loan (USD)
+            Total loans (USD)
           </Text>
         </View>
         <View
@@ -980,31 +980,6 @@ exports[`Vault card should match snapshot of active vault 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        style={
-          Array [
-            Object {
-              "color": undefined,
-              "fontSize": 16,
-            },
-            Array [
-              undefined,
-              Object {
-                "color": "rgba(255, 0, 175, 1)",
-              },
-            ],
-            Object {
-              "fontFamily": "material",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
       <Text
         style={
           Array [
@@ -1804,7 +1779,7 @@ exports[`Vault card should match snapshot of at-risk vault 1`] = `
             }
             testID="vault_total_loan_label"
           >
-            Total loan (USD)
+            Total loans (USD)
           </Text>
         </View>
         <View
@@ -2017,31 +1992,6 @@ exports[`Vault card should match snapshot of at-risk vault 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        style={
-          Array [
-            Object {
-              "color": undefined,
-              "fontSize": 16,
-            },
-            Array [
-              undefined,
-              Object {
-                "color": "rgba(255, 0, 175, 1)",
-              },
-            ],
-            Object {
-              "fontFamily": "material",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
       <Text
         style={
           Array [
@@ -2841,7 +2791,7 @@ exports[`Vault card should match snapshot of healthy vault 1`] = `
             }
             testID="vault_total_loan_label"
           >
-            Total loan (USD)
+            Total loans (USD)
           </Text>
         </View>
         <View
@@ -3054,31 +3004,6 @@ exports[`Vault card should match snapshot of healthy vault 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        style={
-          Array [
-            Object {
-              "color": undefined,
-              "fontSize": 16,
-            },
-            Array [
-              undefined,
-              Object {
-                "color": "rgba(255, 0, 175, 1)",
-              },
-            ],
-            Object {
-              "fontFamily": "material",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
       <Text
         style={
           Array [
@@ -3444,7 +3369,7 @@ exports[`Vault card should match snapshot of liquidated vault 1`] = `
             }
             testID="vault_total_loan_label"
           >
-            Total loan (USD)
+            Total loans (USD)
           </Text>
         </View>
         <View
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/hooks/CollateralPrice.ts b/mobile-app/app/screens/AppNavigator/screens/Loans/hooks/CollateralPrice.ts
index afdecb0f36..109abd2e45 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/hooks/CollateralPrice.ts
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/hooks/CollateralPrice.ts
@@ -21,3 +21,9 @@ export function useCollateralPrice (amount: BigNumber, collateralItem: Collatera
     collateralFactor
   }
 }
+
+export function useResultingCollateralRatio (collateralValue: BigNumber, loanValue: BigNumber, totalLoanWithInterest: BigNumber, activePrice: BigNumber): BigNumber {
+  return new BigNumber(collateralValue).dividedBy(
+    new BigNumber(loanValue).plus(totalLoanWithInterest.multipliedBy(
+      activePrice))).multipliedBy(100)
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/BorrowLoanTokenScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/BorrowLoanTokenScreen.tsx
index fdbd28098a..71154bd506 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/BorrowLoanTokenScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/BorrowLoanTokenScreen.tsx
@@ -221,7 +221,6 @@ export function BorrowLoanTokenScreen ({
           <InputLabel text='SELECT LOAN TOKEN' />
           <LoanTokenInput
             loanTokenId={loanToken.tokenId}
-            symbol={loanToken.token.symbol}
             displaySymbol={loanToken.token.displaySymbol}
             price={loanToken.activePrice}
             interestRate={loanToken.interest}
@@ -267,7 +266,7 @@ export function BorrowLoanTokenScreen ({
               </View>
             )}
             <Button
-              disabled={!valid}
+              disabled={!valid || hasPendingJob || hasPendingBroadcastJob}
               label={translate('screens/BorrowLoanTokenScreen', 'CONTINUE')}
               onPress={onSubmit}
               testID='add_collateral_button'
@@ -282,16 +281,20 @@ export function BorrowLoanTokenScreen ({
             </ThemedText>
           </>
         )}
-        {Platform.OS === 'web' && <BottomSheetWebWithNav
-          modalRef={containerRef}
-          screenList={bottomSheetScreen}
-          isModalDisplayed={isModalDisplayed}
-                                  />}
+        {Platform.OS === 'web' && (
+          <BottomSheetWebWithNav
+            modalRef={containerRef}
+            screenList={bottomSheetScreen}
+            isModalDisplayed={isModalDisplayed}
+          />
+        )}
 
-        {Platform.OS !== 'web' && <BottomSheetWithNav
-          modalRef={bottomSheetRef}
-          screenList={bottomSheetScreen}
-                                  />}
+        {Platform.OS !== 'web' && (
+          <BottomSheetWithNav
+            modalRef={bottomSheetRef}
+            screenList={bottomSheetScreen}
+          />
+        )}
       </ThemedScrollView>
     </View>
   )
@@ -311,7 +314,6 @@ function InputLabel (props: { text: string }): JSX.Element {
 
 interface LoanTokenInputProps {
   loanTokenId: string
-  symbol: string
   displaySymbol: string
   price?: ActivePrice
   interestRate: string
@@ -329,7 +331,7 @@ function LoanTokenInput (props: LoanTokenInputProps): JSX.Element {
     >
       <View style={tailwind('flex flex-row w-2/12 flex-1 items-center')}>
         <SymbolIcon
-          symbol={props.symbol} styleProps={{
+          symbol={props.displaySymbol} styleProps={{
           width: 24,
           height: 24
         }}
@@ -545,7 +547,7 @@ function TransactionDetailsSection (props: TransactionDetailsProps): JSX.Element
           />
         )}
       <NumberRow
-        lhs={translate('screens/BorrowLoanTokenScreen', 'Min. collateralization')}
+        lhs={translate('screens/BorrowLoanTokenScreen', 'Min. collateral ratio')}
         rhs={{
           value: props.vault.loanScheme.minColRatio,
           testID: 'text_col_ratio',
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmBorrowLoanTokenScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmBorrowLoanTokenScreen.tsx
index a6f7f2e53a..0ef0e5a9b7 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmBorrowLoanTokenScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmBorrowLoanTokenScreen.tsx
@@ -24,10 +24,14 @@ import { useWalletContext } from '@shared-contexts/WalletContext'
 import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
 import { ConversionParam } from '../../Balances/BalancesNavigator'
 import { ConversionTag } from '@components/ConversionTag'
+import { useResultingCollateralRatio } from '@screens/AppNavigator/screens/Loans/hooks/CollateralPrice'
 
 type Props = StackScreenProps<LoanParamList, 'ConfirmBorrowLoanTokenScreen'>
 
-export function ConfirmBorrowLoanTokenScreen ({ route, navigation }: Props): JSX.Element {
+export function ConfirmBorrowLoanTokenScreen ({
+  route,
+  navigation
+}: Props): JSX.Element {
   const {
     loanToken,
     vault,
@@ -45,9 +49,8 @@ export function ConfirmBorrowLoanTokenScreen ({ route, navigation }: Props): JSX
   const { address } = useWalletContext()
   const client = useWhaleApiClient()
   const [isOnPage, setIsOnPage] = useState<boolean>(true)
-  const resultCollateralRatio = new BigNumber(vault.collateralValue).dividedBy(
-    new BigNumber(vault.loanValue).plus(totalLoanWithInterest.multipliedBy(
-      loanToken.activePrice?.active?.amount ?? 0))).multipliedBy(100)
+  const resultCollateralRatio = useResultingCollateralRatio(new BigNumber(vault.collateralValue), new BigNumber(vault.loanValue),
+    new BigNumber(totalLoanWithInterest), new BigNumber(loanToken.activePrice?.active?.amount ?? 0))
 
   function onCancel (): void {
     navigation.navigate({
@@ -130,7 +133,7 @@ export function ConfirmBorrowLoanTokenScreen ({ route, navigation }: Props): JSX
   )
 }
 
-function SummaryHeader (props: {amount: BigNumber, displaySymbol: string, conversion?: ConversionParam}): JSX.Element {
+function SummaryHeader (props: { amount: BigNumber, displaySymbol: string, conversion?: ConversionParam }): JSX.Element {
   return (
     <ThemedView
       dark={tailwind('bg-gray-800 border-b border-gray-700')}
@@ -229,7 +232,7 @@ function SummaryTransactionDetails (props: SummaryTransactionDetailsProps): JSX.
   )
 }
 
-function SummaryVaultDetails (props: {vaultId: string, collateralAmount: BigNumber, collateralRatio: BigNumber}): JSX.Element {
+function SummaryVaultDetails (props: { vaultId: string, collateralAmount: BigNumber, collateralRatio: BigNumber }): JSX.Element {
   return (
     <>
       <ThemedSectionTitle
@@ -261,22 +264,22 @@ function SummaryVaultDetails (props: {vaultId: string, collateralAmount: BigNumb
             textStyle={tailwind('text-sm font-normal')}
           />
         )
-      : (
-        <NumberRow
-          lhs={translate('screens/ConfirmBorrowLoanTokenScreen', 'Collateralization ratio')}
-          rhs={{
-            value: props.collateralRatio.toFixed(2),
-            testID: 'text_current_collateral_ratio',
-            suffixType: 'text',
-            suffix: '%'
-          }}
-        />
-      )}
+        : (
+          <NumberRow
+            lhs={translate('screens/ConfirmBorrowLoanTokenScreen', 'Collateralization ratio')}
+            rhs={{
+              value: props.collateralRatio.toFixed(2),
+              testID: 'text_current_collateral_ratio',
+              suffixType: 'text',
+              suffix: '%'
+            }}
+          />
+        )}
     </>
   )
 }
 
-function SummaryTransactionResults (props: {resultCollateralRatio: BigNumber}): JSX.Element {
+function SummaryTransactionResults (props: { resultCollateralRatio: BigNumber }): JSX.Element {
   return (
     <>
       <ThemedSectionTitle
@@ -300,6 +303,7 @@ interface BorrowForm {
   amountToBorrow: BigNumber
   loanToken: LoanToken
 }
+
 async function borrowLoanToken ({
   vaultId,
   amountToBorrow,
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmEditCollateralScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmEditCollateralScreen.tsx
index d8252ab6e2..5d6eacbdcc 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmEditCollateralScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmEditCollateralScreen.tsx
@@ -221,7 +221,7 @@ function CollateralSection (props: CollateralSectionProps): JSX.Element {
         }}
       />
       <NumberRow
-        lhs={translate('screens/ConfirmEditCollateralScreen', 'Collateral amount')}
+        lhs={translate('screens/ConfirmEditCollateralScreen', 'Collateral amount (USD)')}
         rhs={{
           value: props.amount.toFixed(8),
           testID: 'collateral_amount',
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmPaybackLoanScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmPaybackLoanScreen.tsx
new file mode 100644
index 0000000000..cf5d2f96e2
--- /dev/null
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/ConfirmPaybackLoanScreen.tsx
@@ -0,0 +1,278 @@
+import { FeeInfoRow } from '@components/FeeInfoRow'
+import { NumberRow } from '@components/NumberRow'
+import { SummaryTitle } from '@components/SummaryTitle'
+import { TextRow } from '@components/TextRow'
+import { ThemedScrollView, ThemedSectionTitle, ThemedView } from '@components/themed'
+import { tailwind } from '@tailwind'
+import { translate } from '@translations'
+import BigNumber from 'bignumber.js'
+import React, { Dispatch, useEffect, useState } from 'react'
+import { SubmitButtonGroup } from '@components/SubmitButtonGroup'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '@store'
+import { hasTxQueued, transactionQueue } from '@store/transaction_queue'
+import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
+import { LoanParamList } from '../LoansNavigator'
+import { StackScreenProps } from '@react-navigation/stack'
+import { NativeLoggingProps, useLogger } from '@shared-contexts/NativeLoggingProvider'
+import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
+import { CTransactionSegWit } from '@defichain/jellyfish-transaction/dist'
+import { LoanVaultActive, LoanVaultTokenAmount } from '@defichain/whale-api-client/dist/api/loan'
+import { onTransactionBroadcast } from '@api/transaction/transaction_commands'
+import { fetchVaults } from '@store/loans'
+import { useWalletContext } from '@shared-contexts/WalletContext'
+import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
+import { ConversionParam } from '../../Balances/BalancesNavigator'
+import { useCollateralizationRatioColor } from '@screens/AppNavigator/screens/Loans/hooks/CollateralizationRatio'
+
+type Props = StackScreenProps<LoanParamList, 'ConfirmPaybackLoanScreen'>
+
+export function ConfirmPaybackLoanScreen ({
+  route,
+  navigation
+}: Props): JSX.Element {
+  const {
+    vault,
+    amountToPay,
+    fee,
+    loanToken
+  } = route.params
+  const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
+  const hasPendingBroadcastJob = useSelector((state: RootState) => hasBroadcastQueued(state.ocean))
+  const dispatch = useDispatch()
+  const logger = useLogger()
+  const { address } = useWalletContext()
+  const client = useWhaleApiClient()
+  const [isOnPage, setIsOnPage] = useState<boolean>(true)
+
+  function onCancel (): void {
+    navigation.navigate({
+      name: 'PaybackLoanScreen',
+      params: {
+        loanToken,
+        vault
+      },
+      merge: true
+    })
+  }
+
+  async function onSubmit (): Promise<void> {
+    await paybackLoanToken({
+      vaultId: vault.vaultId,
+      loanToken: loanToken,
+      amountToPay
+    }, dispatch, () => {
+      onTransactionBroadcast(isOnPage, navigation.dispatch, 1)
+    }, () => {
+      dispatch(fetchVaults({
+        address,
+        client
+      }))
+    }, logger)
+  }
+
+  function getSubmitLabel (): string {
+    if (!hasPendingBroadcastJob && !hasPendingJob) {
+      return 'CONFIRM PAYMENT'
+    }
+    return 'PAYING'
+  }
+
+  useEffect(() => {
+    setIsOnPage(true)
+    return () => {
+      setIsOnPage(false)
+    }
+  }, [])
+
+  return (
+    <ThemedScrollView>
+      <SummaryHeader
+        amount={new BigNumber(amountToPay)}
+        displaySymbol={loanToken.displaySymbol}
+      />
+      <SummaryTransactionDetails
+        amountToPay={amountToPay}
+        displaySymbol={loanToken.displaySymbol}
+        fee={fee}
+        vault={vault}
+        outstandingBalance={new BigNumber(loanToken.amount).minus(amountToPay)}
+      />
+      <SummaryVaultDetails
+        vault={vault}
+      />
+      <SubmitButtonGroup
+        isDisabled={hasPendingJob || hasPendingBroadcastJob}
+        label={translate('screens/ConfirmPaybackLoanScreen', 'CONFIRM PAYMENT')}
+        isProcessing={hasPendingJob || hasPendingBroadcastJob}
+        processingLabel={translate('screens/ConfirmPaybackLoanScreen', getSubmitLabel())}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        title='payback_loan'
+      />
+    </ThemedScrollView>
+  )
+}
+
+function SummaryHeader (props: { amount: BigNumber, displaySymbol: string, conversion?: ConversionParam }): JSX.Element {
+  return (
+    <ThemedView
+      dark={tailwind('bg-gray-800 border-b border-gray-700')}
+      light={tailwind('bg-white border-b border-gray-300')}
+      style={tailwind('flex-col px-4 py-8')}
+    >
+      <SummaryTitle
+        amount={props.amount}
+        suffix={props.displaySymbol}
+        suffixType='text'
+        testID='text_payment_amount'
+        title={translate('screens/ConfirmPaybackLoanScreen', 'You are paying')}
+      />
+    </ThemedView>
+  )
+}
+
+interface SummaryTransactionDetailsProps {
+  amountToPay: BigNumber
+  outstandingBalance: BigNumber
+  displaySymbol: string
+  fee: BigNumber
+  vault: LoanVaultActive
+}
+
+function SummaryTransactionDetails (props: SummaryTransactionDetailsProps): JSX.Element {
+  return (
+    <>
+      <ThemedSectionTitle
+        text={translate('screens/ConfirmPaybackLoanScreen', 'TRANSACTION DETAILS')}
+      />
+      <TextRow
+        lhs={translate('screens/ConfirmPaybackLoanScreen', 'Transaction type')}
+        rhs={{
+          value: translate('screens/ConfirmPaybackLoanScreen', 'Loan payment'),
+          testID: 'text_transaction_type'
+        }}
+        textStyle={tailwind('text-sm font-normal')}
+      />
+      <NumberRow
+        lhs={translate('screens/ConfirmPaybackLoanScreen', 'Amount to pay')}
+        rhs={{
+          value: props.amountToPay.toFixed(8),
+          testID: 'tokens_to_pay',
+          suffixType: 'text',
+          suffix: props.displaySymbol
+        }}
+      />
+      <NumberRow
+        lhs={translate('screens/PaybackLoanScreen', 'Remaining loan amount')}
+        rhs={{
+          value: props.outstandingBalance.toFixed(8),
+          testID: 'text_resulting_loan_amount',
+          suffixType: 'text',
+          suffix: props.displaySymbol
+        }}
+      />
+      <FeeInfoRow
+        type='ESTIMATED_FEE'
+        value={props.fee.toFixed(8)}
+        testID='estimated_fee'
+        suffix='DFI'
+      />
+    </>
+  )
+}
+
+function SummaryVaultDetails (props: { vault: LoanVaultActive }): JSX.Element {
+  const colRatio = new BigNumber(props.vault.collateralRatio)
+  const colors = useCollateralizationRatioColor({
+    colRatio,
+    minColRatio: new BigNumber(props.vault.loanScheme.minColRatio),
+    totalLoanAmount: new BigNumber(props.vault.loanValue)
+  })
+  return (
+    <>
+      <ThemedSectionTitle
+        text={translate('screens/ConfirmPaybackLoanScreen', 'VAULT DETAILS')}
+      />
+      <TextRow
+        lhs={translate('screens/ConfirmPaybackLoanScreen', 'Vault ID')}
+        rhs={{
+          value: props.vault.vaultId,
+          testID: 'text_vault_id'
+        }}
+        textStyle={tailwind('text-sm font-normal')}
+      />
+      <NumberRow
+        lhs={translate('screens/ConfirmPaybackLoanScreen', 'Collateral amount (USD)')}
+        rhs={{
+          value: new BigNumber(props.vault.collateralValue).toFixed(2),
+          testID: 'text_collateral_amount'
+        }}
+      />
+      {colRatio.isLessThan(0)
+        ? (
+          <TextRow
+            lhs={translate('screens/ConfirmPaybackLoanScreen', 'Collateralization ratio')}
+            rhs={{
+              value: translate('screens/ConfirmPaybackLoanScreen', 'N/A'),
+              testID: 'text_current_collateral_ratio'
+            }}
+            textStyle={tailwind('text-sm font-normal')}
+          />
+        )
+        : (
+          <NumberRow
+            lhs={translate('screens/ConfirmPaybackLoanScreen', 'Collateralization ratio')}
+            rhs={{
+              value: colRatio.toFixed(2),
+              testID: 'text_current_collateral_ratio',
+              suffixType: 'text',
+              suffix: '%'
+            }}
+            rhsThemedProps={colors}
+          />
+        )}
+    </>
+  )
+}
+
+interface PaybackForm {
+  vaultId: string
+  amountToPay: BigNumber
+  loanToken: LoanVaultTokenAmount
+}
+
+async function paybackLoanToken ({
+  vaultId,
+  amountToPay,
+  loanToken
+}: PaybackForm, dispatch: Dispatch<any>, onBroadcast: () => void, onConfirmation: () => void, logger: NativeLoggingProps): Promise<void> {
+  try {
+    const signer = async (account: WhaleWalletAccount): Promise<CTransactionSegWit> => {
+      const script = await account.getScript()
+      const builder = account.withTransactionBuilder()
+      const signed = await builder.loans.paybackLoan({
+        vaultId: vaultId,
+        from: script,
+        tokenAmounts: [{
+          token: +loanToken.id,
+          amount: amountToPay
+        }]
+      }, script)
+      return new CTransactionSegWit(signed)
+    }
+
+    dispatch(transactionQueue.actions.push({
+      sign: signer,
+      title: translate('screens/ConfirmPaybackLoanScreen', 'Paying loan'),
+      description: translate('screens/ConfirmPaybackLoanScreen', 'Paying {{amount}} {{symbol}}', {
+        amount: amountToPay.toFixed(8),
+        symbol: loanToken.displaySymbol
+      }),
+      onBroadcast,
+      onConfirmation
+    }))
+  } catch (e) {
+    logger.error(e)
+  }
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/EditCollateralScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/EditCollateralScreen.tsx
index 4a4d9d6343..9fd30c33ea 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/EditCollateralScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/EditCollateralScreen.tsx
@@ -351,32 +351,32 @@ function VaultIdSection (props: { vault: LoanVaultActive }): JSX.Element {
       <VaultSectionTextRow
         testID='text_total_collateral_value'
         value={new BigNumber(vault.collateralValue ?? 0).toFixed(2)} prefix='$'
-        lhs={translate('components/EditCollateralScreen', 'Total collateral (USD)')}
+        lhs={translate('screens/EditCollateralScreen', 'Total collateral (USD)')}
       />
       <VaultSectionTextRow
         testID='text_total_collateral_value' value={new BigNumber(vault.loanValue ?? 0).toFixed(2)}
         prefix='$'
-        lhs={translate('components/EditCollateralScreen', 'Total loan (USD)')}
+        lhs={translate('screens/EditCollateralScreen', 'Total loans (USD)')}
       />
       <VaultSectionTextRow
         testID='text_total_collateral_value'
         value={BigNumber.maximum(new BigNumber(vault.collateralRatio ?? 0), 0).toFixed(2)}
         suffix='%'
         suffixType='text'
-        lhs={translate('components/EditCollateralScreen', 'Collateralization ratio')}
+        lhs={translate('screens/EditCollateralScreen', 'Collateralization ratio')}
         rhsThemedProps={colors}
       />
       <VaultSectionTextRow
         testID='text_total_collateral_value'
         value={new BigNumber(vault.loanScheme.minColRatio ?? 0).toFixed(2)} suffix='%'
         suffixType='text'
-        lhs={translate('components/EditCollateralScreen', 'Min. collateralization ratio')}
+        lhs={translate('screens/EditCollateralScreen', 'Min. collateralization ratio')}
       />
       <VaultSectionTextRow
         testID='text_vault_interest_value'
         value={new BigNumber(vault.loanScheme.interestRate ?? 0).toFixed(2)} suffix='%'
         suffixType='text'
-        lhs={translate('components/EditCollateralScreen', 'Vault interest')}
+        lhs={translate('screens/EditCollateralScreen', 'Vault interest')}
       />
     </ThemedView>
   )
@@ -545,7 +545,7 @@ function AddCollateralButton (props: { disabled: boolean, onPress: () => void })
   return (
     <TouchableOpacity
       disabled={props.disabled}
-      style={tailwind('my-6 flex flex-row justify-center')}
+      style={tailwind('mt-6 mb-3 flex flex-row justify-center')}
       onPress={props.onPress}
     >
       <ThemedIcon
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/screens/PaybackLoanScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/PaybackLoanScreen.tsx
new file mode 100644
index 0000000000..10806ef18d
--- /dev/null
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/screens/PaybackLoanScreen.tsx
@@ -0,0 +1,317 @@
+import React, { useEffect, useState } from 'react'
+import { StackScreenProps } from '@react-navigation/stack'
+import { LoanParamList } from '@screens/AppNavigator/screens/Loans/LoansNavigator'
+import { View } from 'react-native'
+import {
+  ThemedScrollView,
+  ThemedSectionTitle,
+  ThemedText,
+  ThemedView
+} from '@components/themed'
+import { tailwind } from '@tailwind'
+import { translate } from '@translations'
+import { SymbolIcon } from '@components/SymbolIcon'
+import NumberFormat from 'react-number-format'
+import BigNumber from 'bignumber.js'
+import { ActivePrice } from '@defichain/whale-api-client/dist/api/prices'
+import { LoanVaultActive } from '@defichain/whale-api-client/dist/api/loan'
+import { useVaultStatus, VaultStatusTag } from '@screens/AppNavigator/screens/Loans/components/VaultStatusTag'
+import { useCollateralizationRatioColor } from '@screens/AppNavigator/screens/Loans/hooks/CollateralizationRatio'
+import { WalletTextInput } from '@components/WalletTextInput'
+import { InputHelperText } from '@components/InputHelperText'
+import { useTokensAPI } from '@hooks/wallet/TokensAPI'
+import { useSelector } from 'react-redux'
+import { RootState } from '@store'
+import { hasTxQueued } from '@store/transaction_queue'
+import { hasTxQueued as hasBroadcastQueued } from '@store/ocean'
+import { Button } from '@components/Button'
+import { useLogger } from '@shared-contexts/NativeLoggingProvider'
+import { NumberRow } from '@components/NumberRow'
+import { FeeInfoRow } from '@components/FeeInfoRow'
+import { useWhaleApiClient } from '@shared-contexts/WhaleContext'
+
+type Props = StackScreenProps<LoanParamList, 'PaybackLoanScreen'>
+
+export function PaybackLoanScreen ({
+  navigation,
+  route
+}: Props): JSX.Element {
+  const {
+    loanToken,
+    vault
+  } = route.params
+  const tokens = useTokensAPI()
+  const getTokenAmount = (tokenId: string): BigNumber => {
+    const id = tokenId === '0' ? '0_unified' : tokenId
+    return new BigNumber(tokens.find((t) => t.id === id)?.amount ?? 0)
+  }
+
+  const client = useWhaleApiClient()
+  const token = tokens?.find((t) => t.id === loanToken.id)
+  const tokenBalance = (token != null) ? getTokenAmount(token.id) : 0
+  const [amountToPay, setAmountToPay] = useState(loanToken.amount)
+  const [fee, setFee] = useState<BigNumber>(new BigNumber(0.0001))
+  const [isValid, setIsValid] = useState(false)
+  const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
+  const hasPendingBroadcastJob = useSelector((state: RootState) => hasBroadcastQueued(state.ocean))
+  const logger = useLogger()
+
+  const isFormValid = (): boolean => {
+    const amount = new BigNumber(amountToPay)
+    return !(amount.isNaN() ||
+      amount.isLessThanOrEqualTo(0) || amount.gt(tokenBalance) || amount.gt(loanToken.amount))
+  }
+
+  useEffect(() => {
+    const isValid = isFormValid()
+    setIsValid(isValid)
+  }, [amountToPay])
+
+  useEffect(() => {
+    client.fee.estimate()
+      .then((f) => setFee(new BigNumber(f)))
+      .catch(logger.error)
+  }, [])
+
+  const onSubmit = async (): Promise<void> => {
+    if (!isValid || vault === undefined || hasPendingJob || hasPendingBroadcastJob) {
+      return
+    }
+
+    navigation.navigate({
+      name: 'ConfirmPaybackLoanScreen',
+      params: {
+        vault,
+        amountToPay: new BigNumber(amountToPay),
+        fee,
+        loanToken
+      },
+      merge: true
+    })
+  }
+
+  return (
+    <ThemedScrollView contentContainerStyle={tailwind('pb-8 pt-2')}>
+      <ThemedSectionTitle
+        text={translate('screens/PaybackLoanScreen', 'YOU ARE PAYING FOR LOAN')}
+      />
+      <View style={tailwind('px-4')}>
+        <LoanTokenInput
+          loanTokenId={loanToken.id}
+          displaySymbol={loanToken.displaySymbol}
+          price={loanToken.activePrice}
+          outstandingBalance={new BigNumber(loanToken.amount)}
+        />
+      </View>
+      <ThemedSectionTitle
+        text={translate('screens/PaybackLoanScreen', 'VAULT IN USE')}
+      />
+      <View style={tailwind('px-4')}>
+        <VaultInput vault={vault} />
+      </View>
+      <View style={tailwind('my-2 px-4')}>
+        <WalletTextInput
+          inputType='numeric'
+          value={amountToPay}
+          title={translate('screens/PaybackLoanScreen', 'How much do you want to pay?')}
+          placeholder={translate('screens/PaybackLoanScreen', 'Enter an amount')}
+          onChangeText={(text) => setAmountToPay(text)}
+          displayClearButton={amountToPay !== ''}
+          onClearButtonPress={() => setAmountToPay('')}
+          style={tailwind('h-9 w-3/5 flex-grow')}
+        />
+        <InputHelperText
+          label={`${translate('components/PaybackLoanScreen', 'Available')}: `}
+          content={new BigNumber(tokenBalance).toFixed(8)}
+          suffix={` ${loanToken.displaySymbol}`}
+          styleProps={tailwind('font-medium')}
+        />
+      </View>
+      {
+        isValid && (
+          <View>
+            <TransactionDetailsSection
+              fee={fee} outstandingBalance={new BigNumber(loanToken.amount)}
+              amountToPay={new BigNumber(amountToPay)}
+              displaySymbol={loanToken.displaySymbol}
+            />
+          </View>
+        )
+      }
+      <Button
+        disabled={!isValid || hasPendingJob || hasPendingBroadcastJob}
+        label={translate('screens/PaybackLoanScreen', 'CONTINUE')}
+        onPress={onSubmit}
+        testID='payback_loan_button'
+        margin='mt-12 mb-2 mx-4'
+      />
+      <ThemedText
+        light={tailwind('text-gray-500')}
+        dark={tailwind('text-gray-400')}
+        style={tailwind('text-center text-xs mb-12')}
+      >
+        {translate('screens/PaybackLoanScreen', 'Review and confirm transaction in the next screen')}
+      </ThemedText>
+    </ThemedScrollView>
+  )
+}
+
+interface LoanTokenInputProps {
+  loanTokenId: string
+  displaySymbol: string
+  price?: ActivePrice
+  outstandingBalance: BigNumber
+}
+
+function LoanTokenInput (props: LoanTokenInputProps): JSX.Element {
+  return (
+    <ThemedView
+      light={tailwind('bg-white border-gray-200')}
+      dark={tailwind('bg-gray-800 border-gray-700')}
+      style={tailwind('border p-4 flex flex-col rounded-lg')}
+    >
+      <View style={tailwind('flex flex-row flex-1 items-center mb-2')}>
+        <SymbolIcon
+          symbol={props.displaySymbol} styleProps={{
+          width: 24,
+          height: 24
+        }}
+        />
+        <ThemedText style={tailwind('ml-2 text-sm font-medium')}>{props.displaySymbol}</ThemedText>
+      </View>
+      <View style={tailwind('flex flex-row items-center justify-between mb-1 mt-2')}>
+        <ThemedText
+          light={tailwind('text-gray-500')}
+          dark={tailwind('text-gray-400')}
+          style={tailwind('text-xs')}
+        >
+          {translate('screens/PaybackLoanScreen', 'Outstanding balance')}
+        </ThemedText>
+        <NumberFormat
+          value={new BigNumber(props.outstandingBalance).toFixed(2)}
+          decimalScale={2}
+          thousandSeparator
+          suffix={` ${props.displaySymbol}`}
+          displayType='text'
+          renderText={(value) =>
+            <ThemedText style={tailwind('font-medium')}>
+              {value}
+            </ThemedText>}
+        />
+      </View>
+    </ThemedView>
+  )
+}
+
+interface VaultInputProps {
+  vault: LoanVaultActive
+}
+
+function VaultInput ({ vault }: VaultInputProps): JSX.Element {
+  const vaultState = useVaultStatus(vault.state, new BigNumber(vault.collateralRatio), new BigNumber(vault.loanScheme.minColRatio), new BigNumber(vault.loanValue))
+  const colors = useCollateralizationRatioColor({
+    colRatio: new BigNumber(vault.collateralRatio),
+    minColRatio: new BigNumber(vault.loanScheme.minColRatio),
+    totalLoanAmount: new BigNumber(vault.loanValue)
+  })
+  return (
+    <ThemedView
+      light={tailwind('bg-white border-gray-200')}
+      dark={tailwind('bg-gray-800 border-gray-700')}
+      style={tailwind('border p-4 flex flex-col rounded-lg mb-4')}
+    >
+      <View style={tailwind('flex flex-row justify-between items-center mb-2')}>
+        <View>
+          <ThemedText
+            numberOfLines={1}
+            ellipsizeMode='middle'
+            style={tailwind('mr-2 w-56 flex-shrink text-sm font-medium')}
+          >{vault.vaultId}
+          </ThemedText>
+        </View>
+        <VaultStatusTag status={vaultState} />
+      </View>
+      <View style={tailwind('flex flex-row items-center justify-between mb-1 mt-2')}>
+        <ThemedText
+          light={tailwind('text-gray-500')}
+          dark={tailwind('text-gray-400')}
+          style={tailwind('text-xs')}
+        >
+          {translate('screens/PaybackLoanScreen', 'Collateralization ratio')}
+        </ThemedText>
+        <NumberFormat
+          value={new BigNumber(vault.collateralRatio).toFixed(2)}
+          decimalScale={2}
+          thousandSeparator
+          suffix='%'
+          displayType='text'
+          renderText={(value) =>
+            <ThemedText light={colors.light} dark={colors.dark} style={tailwind('font-medium')}>
+              {value}
+            </ThemedText>}
+        />
+      </View>
+      <View style={tailwind('flex flex-row items-center justify-between mb-1')}>
+        <ThemedText
+          light={tailwind('text-gray-500')}
+          dark={tailwind('text-gray-400')}
+          style={tailwind('text-xs')}
+        >
+          {translate('screens/PaybackLoanScreen', 'Min. collateralization ratio')}
+        </ThemedText>
+        <NumberFormat
+          value={new BigNumber(vault.loanScheme.minColRatio).toFixed(2)}
+          decimalScale={2}
+          thousandSeparator
+          suffix='%'
+          displayType='text'
+          renderText={(value) =>
+            <ThemedText light={colors.light} dark={colors.dark} style={tailwind('font-medium')}>
+              {value}
+            </ThemedText>}
+        />
+      </View>
+    </ThemedView>
+  )
+}
+
+interface TransactionDetailsProps {
+  amountToPay: BigNumber
+  outstandingBalance: BigNumber
+  fee: BigNumber
+  displaySymbol: string
+}
+
+function TransactionDetailsSection (props: TransactionDetailsProps): JSX.Element {
+  return (
+    <>
+      <ThemedSectionTitle
+        text={translate('screens/PaybackLoanScreen', 'TRANSACTION DETAILS')}
+      />
+      <NumberRow
+        lhs={translate('screens/PaybackLoanScreen', 'Amount to pay')}
+        rhs={{
+          value: props.amountToPay.toFixed(8),
+          testID: 'text_amount_to_pay',
+          suffixType: 'text',
+          suffix: props.displaySymbol
+        }}
+      />
+      <NumberRow
+        lhs={translate('screens/PaybackLoanScreen', 'Remaining loan amount')}
+        rhs={{
+          value: props.outstandingBalance.minus(props.amountToPay).toFixed(8),
+          testID: 'text_resulting_loan_amount',
+          suffixType: 'text',
+          suffix: props.displaySymbol
+        }}
+      />
+      <FeeInfoRow
+        type='ESTIMATED_FEE'
+        value={props.fee.toFixed(8)}
+        testID='estimated_fee'
+        suffix='DFI'
+      />
+    </>
+  )
+}
diff --git a/shared/translations/languages/de.json b/shared/translations/languages/de.json
index fc1614ec0f..eccde743dc 100644
--- a/shared/translations/languages/de.json
+++ b/shared/translations/languages/de.json
@@ -619,7 +619,8 @@
     "Vault Detail": "Vault-Detail",
     "Add Collateral": "Sicherheiten Hinzufügen",
     "Confirm Add Collateral": "Bestätige das Hinzufügen von Sicherheiten",
-    "Edit Collaterals": "Sicherheiten bearbeiten"
+    "Edit Collaterals": "Sicherheiten bearbeiten",
+    "Borrow Loan Token": "Borrow Loan Token"
   },
   "components/tabs": {
     "Browse loan tokens": "Darlehen durchsuchen",
@@ -627,7 +628,8 @@
     "Active loan": "Aktuelles Darlehen",
     "Details": "Details",
     "Collaterals": "Sicherheiten",
-    "Auctions": "Auktionen"
+    "Auctions": "Auktionen",
+    "Loans": "Darlehen"
   },
   "components/LoanCard": {
     "Active Price": "Aktueller Preis",
@@ -648,8 +650,9 @@
     "At risk": "Gefährdet",
     "Safe": "Sicher",
     "Active loans": "Aktive Darlehen",
-    "Total loan (USD)": "Gesamtdarlehensbetrag (USD)",
+    "Total loans (USD)": "Gesamtdarlehensbetrag (USD)",
     "Collateral amount (USD)": "Höhe der Sicherheiten (USD)",
+    "Collateral amount": "Höhe der Sicherheiten",
     "Collateral ratio": "Besicherungsquote",
     "n/a": "k.A.",
     "ADD COLLATERAL": "SICHERHEITEN HINZUFÜGEN",
@@ -658,7 +661,13 @@
     "Interest amount (1.5%)": "Zinsbetrag (1.5%)",
     "Amount payable": "Auszahlbarer Betrag",
     "Price per token (USD)": "Preis pro Token (USD)",
-    "EDIT COLLATERALS": "SICHERHEITEN BEARBEITEN"
+    "EDIT COLLATERALS": "SICHERHEITEN BEARBEITEN",
+    "MANAGE LOANS": "MANAGE LOANS",
+    "ACTIVE": "ACTIVE",
+    "HEALTHY": "HEALTHY",
+    "AT RISK": "AT RISK",
+    "HALTED": "HALTED",
+    "IN LIQUIDATION": "IN LIQUIDATION"
   },
   "components/EmptyVault": {
     "No vault created": "Kein Vault erstellt",
@@ -708,12 +717,16 @@
     "Vault ID": "Vault-ID",
     "Your vault is locked for liquidation.": "Dein Vault ist im Rahmen der Liquidation eingefroren.",
     "Your vault is at risk of liquidation. Prevent liquidity by adding more collaterals or paying back loans.": "Dein Vault ist von der Liquidation bedroht. Verhindere die Liquidation, indem du weitere Sicherheiten hinzufügst oder Darlehen zurückzahlst.",
-    "Collaterals required to use this vault.": "Für die Nutzung dieses Vaults sind Sicherheiten erforderlich."    
+    "Collaterals required to use this vault.": "Für die Nutzung dieses Vaults sind Sicherheiten erforderlich.",
+    "Total collateral (USD)": "Gesamter Besicherungswert (USD)",
+    "Total loans (USD)": "Gesamtdarlehensbetrag (USD)",
+    "Vault interest (APR)": "Vault interest (APR)"
   },
   "components/ScrollableButton": {
     "ADD COLLATERAL": "SICHERHEITEN HINZUFÜGEN",
     "TAKE COLLATERAL": "SICHERHEITEN ENTNEHMEN",
-    "EDIT SCHEME": "DARLEHENSMODELL BEARBEITEN"
+    "EDIT SCHEME": "DARLEHENSMODELL BEARBEITEN",
+    "EDIT COLLATERALS": "SICHERHEITEN BEARBEITEN"
   },
   "components/EmptyActiveLoans": {
     "No active loans": "Keine aktiven Darlehen",
@@ -740,13 +753,13 @@
     "VAULT DETAILS": "VAULT-DETAILS",
     "COLLATERALIZATION DETAILS": "COLLATERALIZATION DETAILS",
     "Collateralization ratio": "Besicherungsquote",
-    "Next collateralization": "Next collateralization",
-    "Total collaterals (USD)": "Total collaterals (USD)",
+    "Next collateralization": "Nächste Besicherung",
+    "Total collateral (USD)": "Gesamter Besicherungswert (USD)",
     "Active loans": "Aktive Darlehen",
-    "Total loans (USD)": "Total loans (USD)"
+    "Total loans (USD)": "Gesamtdarlehensbetrag (USD)"
   },
   "components/VaultDetailsCollateralsTab": {
-    "Collateral amount (USD)": "Höhe der Sicherheiten (USD)"
+    "Collateral amount": "Höhe der Sicherheiten"
   },
   "screens/EditCollateralScreen": {
     "COLLATERALS WILL BE ADDED TO VAULT": "DIE SICHERHEITEN WERDEN DEM VAULT HINZUGEFÜGT",
@@ -756,7 +769,7 @@
     "Each token has their own collateral factor that would affect its respective collateral value. ": "Jeder Token hat seinen eigenen Besicherungsfaktor, der sich auf den jeweiligen Besicherungswert auswirkt. ",
     "Learn more": "Erfahre mehr",
     "ADD TOKEN AS COLLATERAL": "TOKEN ALS BESICHERUNG HINZUFÜGEN",
-    "Total collateral value (USD)": "Gesamter Besicherungswert (USD)",
+    "Total collateral (USD)": "Gesamter Besicherungswert (USD)",
     "Vault needs DFI to be in 50% vault share": "Der Vault muss zu 50% aus DFI bestehen",
     "Confirm details in next screen": "Bestätige die Details im nächsten Schritt",
     "Select token to add": "Wähle den Token aus, der hinzugefügt werden soll",
@@ -770,7 +783,11 @@
     "Adding collateral": "Sicherheiten hinzufügen",
     "Adding {{amount}} {{symbol}} as collateral": "Hinzufügen von {{amount}} {{symbol}} als Sicherheit",
     "Removing collateral": "Sicherheiten entfernen",
-    "Removing {{amount}} {{symbol}} collateral from vault": "{{amount}} {{symbol}} Sicherheit aus Vault entfernen"
+    "Removing {{amount}} {{symbol}} collateral from vault": "{{amount}} {{symbol}} Sicherheit aus Vault entfernen",
+    "Total loans (USD)": "Gesamtdarlehensbetrag (USD)",
+    "Collateralization ratio": "Besicherungsquote",
+    "Min. collateral ratio": "Mindestbesicherungsquote",
+    "Vault interest": "Vault-Zins"
   },
   "components/AddOrRemoveCollateralForm": {
     "How much {{symbol}} to add?": "Wie viel von {{symbol}} soll hinzugefügt werden?",
@@ -788,7 +805,7 @@
     "Transaction type": "Transaktionsart",
     "Add collateral": "Sicherheiten hinzufügen",
     "Collateral tokens to add": "Füge Tokens zur Besicherung hinzu",
-    "Total collateral value (USD)": "Gesamter Besicherungswert (USD)",
+    "Total collateral (USD)": "Gesamter Besicherungswert (USD)",
     "COLLATERAL {{index}}": "SICHERHEITEN {{index}}",
     "Token": "Token",
     "Collateralization factor": "Besicherungsfaktor",
@@ -801,5 +818,81 @@
     "Convert & remove collateral": "Umwandeln u. Sicherheiten entfernen",
     "Add Collateral": "Sicherheiten hinzufügen",
     "Remove Collateral": "Sicherheiten entfernen"
+  },
+  "screens/PaybackLoanScreen": {
+    "YOU ARE PAYING FOR LOAN": "YOU ARE PAYING FOR LOAN",
+    "VAULT IN USE": "VAULT IN USE",
+    "How much do you want to pay?": "How much do you want to pay?",
+    "Enter an amount": "Gib eine Menge ein",
+    "Available": "Verfügbar",
+    "CONTINUE": "FORTSETZEN",
+    "Review and confirm transaction in the next screen": "Review and confirm transaction in the next screen",
+    "TRANSACTION DETAILS": "TRANSAKTIONS-DETAILS",
+    "Amount to pay": "Amount to pay",
+    "Remaining loan amount": "Remaining loan amount"
+  },
+  "screens/ConfirmPaybackLoanScreen": {
+    "CONFIRM PAYMENT": "CONFIRM PAYMENT",
+    "PAYING": "PAYING",
+    "You are paying": "You are paying",
+    "TRANSACTION DETAILS": "TRANSAKTIONS-DETAILS",
+    "Transaction type": "Transaktionsart",
+    "Loan payment": "Loan payment",
+    "Amount to pay": "Amount to pay",
+    "Remaining loan amount": "Remaining loan amount",
+    "VAULT DETAILS": "VAULT-DETAILS",
+    "Vault ID": "Vault-ID",
+    "Collateral amount (USD)": "Höhe der Sicherheiten (USD)",
+    "Collateralization ratio": "Besicherungsquote",
+    "Paying loan": "Paying loan",
+    "Paying {{amount}} {{symbol}}": "Paying {{amount}} {{symbol}}",
+    "Confirm Loan Payment": "Confirm Loan Payment"
+  },
+  "components/CollateralizationRatioDisplay": {
+    "Collateralization ratio": "Besicherungsquote",
+    "Min:": "Min:",
+    "Next:": "Next:"
+  },
+  "screens/BorrowLoanTokenScreen": {
+    "Borrow loan token": "Borrow loan token",
+    "SELECT VAULT FOR COLLATERAL": "SELECT VAULT FOR COLLATERAL",
+    "Select a vault to use": "Select a vault to use",
+    "Choose a vault to use": "Choose a vault to use",
+    "Price (USD)": "Preis (USD)",
+    "Interest": "Zins",
+    "Total collateral (USD)": "Gesamter Besicherungswert (USD)",
+    "Vault interest": "Vault-Zins",
+    "How much do you want to borrow?": "How much do you want to borrow?",
+    "Collateral ratio": "Besicherungsquote",
+    "Enter an amount": "Gib eine Menge ein",
+    "TRANSACTION DETAILS": "TRANSAKTIONS-DETAILS",
+    "Collateralization ratio": "Besicherungsquote",
+    "Min. collateral ratio": "Mindestbesicherungsquote",
+    "Interest (Vault + Token)": "Interest (Vault + Token)",
+    "Total interest amount": "Total interest amount",
+    "Total loan + interest": "Total loan + interest",
+    "Review and confirm transaction in the next screen": "Review and confirm transaction in the next screen"
+  },
+  "screens/ConfirmBorrowLoanTokenScreen": {
+    "You are borrowing": "You are borrowing",
+    "TRANSACTION DETAILS": "TRANSAKTIONS-DETAILS",
+    "Transaction type": "Transaktionsart",
+    "Borrow loan token": "Borrow loan token",
+    "Convert & borrow loan token": "Convert & borrow loan token",
+    "Loan tokens to borrow": "Loan tokens to borrow",
+    "Token interest": "Token interest",
+    "Vault interest": "Vault-Zins",
+    "Total interest amount": "Total interest amount",
+    "Total loan + interest": "Total loan + interest",
+    "VAULT DETAILS": "VAULT-DETAILS",
+    "Vault ID": "Vault-ID",
+    "Collateral amount (USD)": "Höhe der Sicherheiten (USD)",
+    "Collateralization ratio": "Besicherungsquote",
+    "TRANSACTION RESULTS": "TRANSAKTIONSERGEBNISSE",
+    "Resulting collateral ratio": "Resulting collateral ratio",
+    "Borrowing loan token": "Borrowing loan token",
+    "Borrowing {{amount}} {{symbol}}": "Borrowing {{amount}} {{symbol}}",
+    "CONFIRM BORROW": "CONFIRM BORROW",
+    "BORROWING": "BORROWING"
   }
 }
\ No newline at end of file
diff --git a/shared/translations/languages/zh-Hans.json b/shared/translations/languages/zh-Hans.json
index fa94bde03a..bc10c60fbe 100644
--- a/shared/translations/languages/zh-Hans.json
+++ b/shared/translations/languages/zh-Hans.json
@@ -645,7 +645,7 @@
     "At risk": "请注意抵押比率",
     "Safe": "安全状态",
     "Active loans": "活跃的贷款",
-    "Total loan (USD)": "贷款总金额 (美金)",
+    "Total loans (USD)": "贷款总金额 (美金)",
     "Collateral amount (USD)": "抵押品金额 (美金)",
     "Collateral ratio": "抵押品比率",
     "n/a": "不适用",
@@ -749,7 +749,7 @@
     "Each token has their own collateral factor that would affect its respective collateral value. ": "每个代币都有不同的抵押品价值因素. ",
     "Learn more": "了解更多",    
     "ADD TOKEN AS COLLATERAL": "添加代币为抵押资金",
-    "Total collateral value (USD)": "抵押资金总价值 (美金)",
+    "Total collateral (USD)": "抵押资金总价值 (美金)",
     "Vault needs DFI to be in 50% vault share": "DFI抵押资金需要占金库的50%",
     "Confirm details in next screen": "在下一个屏幕中确认细节",    
     "Select token to add": "选择要添加的代币",
@@ -781,7 +781,7 @@
     "Transaction type": "交易类型",
     "Add collateral": "添加抵押资金",
     "Collateral tokens to add": "要添加的抵押代币",
-    "Total collateral value (USD)": "抵押资金总价值 (美金)",
+    "Total collateral (USD)": "抵押资金总价值 (美金)",
     "COLLATERAL {{index}}": "抵押品 {{index}}",
     "Token": "代币",
     "Collateralization factor": "抵押品系数",
diff --git a/shared/translations/languages/zh-Hant.json b/shared/translations/languages/zh-Hant.json
index d9edbfd57e..49322138d8 100644
--- a/shared/translations/languages/zh-Hant.json
+++ b/shared/translations/languages/zh-Hant.json
@@ -646,7 +646,7 @@
     "At risk": "請注意抵押比率",
     "Safe": "安全狀態",
     "Active loans": "活躍的貸款",
-    "Total loan (USD)": "貸款總金額 (美金)",
+    "Total loans (USD)": "貸款總金額 (美金)",
     "Collateral amount (USD)": "抵押品金額 (美金)",
     "Collateral ratio": "抵押品比率",
     "n/a": "不適用",
@@ -750,7 +750,7 @@
     "Each token has their own collateral factor that would affect its respective collateral value. ": "每個代幣都有不同的抵押品價值因素. ",
     "Learn more": "了解更多",    
     "ADD TOKEN AS COLLATERAL": "添加代幣為抵押資金",
-    "Total collateral value (USD)": "抵押資金總價值 (美金)",
+    "Total collateral (USD)": "抵押資金總價值 (美金)",
     "Vault needs DFI to be in 50% vault share": "DFI抵押資金需要佔金庫的50%",
     "Confirm details in next screen": "在下一個屏幕中確認細節",    
     "Select token to add": "選擇要添加的代幣",
@@ -782,7 +782,7 @@
     "Transaction type": "交易類型",
     "Add collateral": "添加抵押資金",
     "Collateral tokens to add": "要添加的抵押代幣",
-    "Total collateral value (USD)": "抵押資金總價值 (美金)",
+    "Total collateral (USD)": "抵押資金總價值 (美金)",
     "COLLATERAL {{index}}": "抵押品 {{index}}",
     "Token": "代幣",
     "Collateralization factor": "抵押品係數",