feat: ui fixes

shapeshift · Nov 23, 2023 · 40b9893 · 40b9893
1 parent 9f90944
commit 40b9893
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 7 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -2214,6 +2214,7 @@
     "risky": "Risky",
     "confirmAndBorrow": "Confirm and Borrow",
     "confirmAndRepay": "Confirm and Repay",
+    "borrowAgain": "Borrow Again",
     "transactionInfo": "Transaction Summary",
     "repayNoticeTitle": "Hold Up!",
     "repayNoticeCta": "I understand",

diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
@@ -1,4 +1,14 @@
-import { Button, CardFooter, Collapse, Skeleton, Stack } from '@chakra-ui/react'
+import { ArrowDownIcon } from '@chakra-ui/icons'
+import {
+  Button,
+  CardFooter,
+  Collapse,
+  Divider,
+  Flex,
+  IconButton,
+  Skeleton,
+  Stack,
+} from '@chakra-ui/react'
 import { type AccountId, type AssetId } from '@shapeshiftoss/caip'
 import noop from 'lodash/noop'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -79,6 +89,7 @@ export const BorrowInput = ({
   }, [borrowAssets, setBorrowAsset])
 
   const collateralAsset = useAppSelector(state => selectAssetById(state, collateralAssetId))
+  const swapIcon = useMemo(() => <ArrowDownIcon />, [])
 
   const percentOptions = useMemo(() => [0], [])
 
@@ -330,6 +341,20 @@ export const BorrowInput = ({
           layout='inline'
           labelPostFix={collateralAssetSelectComponent}
         />
+        <Flex alignItems='center' justifyContent='center' my={-2}>
+          <Divider />
+          <IconButton
+            isRound
+            size='sm'
+            position='relative'
+            variant='outline'
+            borderColor='border.base'
+            zIndex={1}
+            aria-label={translate('lending.switchAssets')}
+            icon={swapIcon}
+          />
+          <Divider />
+        </Flex>
         <TradeAssetInput
           assetId={borrowAsset?.assetId ?? ''}
           assetSymbol={borrowAsset.symbol}

diff --git a/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx b/src/pages/Lending/Pool/components/Repay/RepayConfirm.tsx
@@ -61,7 +61,7 @@ export const RepayConfirm = ({
   collateralAccountId,
   repaymentAccountId,
 }: RepayConfirmProps) => {
-  const [isLoanClosePending, setIsLoanClosePending] = useState(false)
+  const [isLoanClosePending, setIsLoanClosePending] = useState<boolean | undefined>(undefined)
   const [txHash, setTxHash] = useState<string | null>(null)
 
   const {
@@ -158,7 +158,9 @@ export const RepayConfirm = ({
   )
   const selectedCurrency = useAppSelector(selectSelectedCurrency)
 
-  const handleRepay = useCallback(async () => {
+  const handleConfirm = useCallback(async () => {
+    if (isLoanClosePending === false) return history.push(RepayRoutePaths.Input)
+
     if (
       !(
         repaymentAsset &&
@@ -218,6 +220,8 @@ export const RepayConfirm = ({
     return maybeTxId
   }, [
     chainAdapter,
+    history,
+    isLoanClosePending,
     lendingQuoteCloseData,
     repaymentAccountId,
     repaymentAmountCryptoPrecision,
@@ -238,6 +242,12 @@ export const RepayConfirm = ({
     repaymentAsset,
   })
 
+  const swapStatus = useMemo(() => {
+    if (isLoanClosePending === false) return TxStatus.Confirmed
+    if (isLoanClosePending) return TxStatus.Pending
+    return TxStatus.Unknown
+  }, [isLoanClosePending])
+
   if (!collateralAsset || !repaymentAsset) return null
   return (
     <SlideTransition>
@@ -255,7 +265,7 @@ export const RepayConfirm = ({
             sellIcon={repaymentAsset?.icon ?? ''}
             buyColor={collateralAsset?.color ?? ''}
             sellColor={repaymentAsset?.color ?? ''}
-            status={TxStatus.Unknown}
+            status={swapStatus}
             px={6}
             mb={4}
           />
@@ -347,12 +357,14 @@ export const RepayConfirm = ({
                 isLendingQuoteCloseLoading || isEstimatedFeesDataLoading || isLoanClosePending
               }
               disabled={isLoanClosePending}
-              onClick={handleRepay}
+              onClick={handleConfirm}
               colorScheme='blue'
               size='lg'
               width='full'
             >
-              {translate('lending.confirmAndRepay')}
+              {translate(
+                isLoanClosePending === false ? 'lending.borrowAgain' : 'lending.confirmAndRepay',
+              )}
             </Button>
           </CardFooter>
         </Stack>

diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
@@ -313,7 +313,9 @@ export const RepayInput = ({
           <Flex width='full' justifyContent='space-between' fontSize='xs' color='text.subtle'>
             <Skeleton isLoaded={isLendingPositionDataSuccess}>
               <Amount.Fiat value={0} />
-              {/* Actually defined at display time, see isLoaded above */}
+            </Skeleton>
+            {/* Actually defined at display time, see isLoaded above */}
+            <Skeleton isLoaded={isLendingPositionDataSuccess}>
               <Amount.Fiat value={debtBalanceUserCurrency ?? '0'} />
             </Skeleton>
           </Flex>

diff --git a/src/pages/Lending/YourLoans.tsx b/src/pages/Lending/YourLoans.tsx
@@ -8,9 +8,12 @@ import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
 import { Main } from 'components/Layout/Main'
 import { AssetCell } from 'components/StakingVaults/Cells'
 import { RawText, Text } from 'components/Text'
+import type { TextPropTypes } from 'components/Text/Text'
 import type { Asset } from 'lib/asset-service'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { isSome } from 'lib/utils'
+import { selectAccountNumberByAccountId } from 'state/slices/selectors'
+import { useAppSelector } from 'state/store'
 
 import { LendingHeader } from './components/LendingHeader'
 import { useAllLendingPositionsData } from './hooks/useAllLendingPositionsData'
@@ -47,6 +50,16 @@ const LendingRowGrid = ({ asset, accountId, onPoolClick }: LendingRowGridProps)
     onPoolClick(asset.assetId, accountId)
   }, [accountId, asset.assetId, onPoolClick])
 
+  const accountNumberFilter = useMemo(
+    () => ({ assetId: asset.assetId, accountId }),
+    [accountId, asset.assetId],
+  )
+  const accountNumber = useAppSelector(s => selectAccountNumberByAccountId(s, accountNumberFilter))
+  const accountNumberTranslation: TextPropTypes['translation'] = useMemo(
+    () => ['accounts.accountNumber', { accountNumber }],
+    [accountNumber],
+  )
+
   if (
     lendingPositionData &&
     bnOrZero(lendingPositionData.collateralBalanceCryptoPrecision)
@@ -71,6 +84,11 @@ const LendingRowGrid = ({ asset, accountId, onPoolClick }: LendingRowGridProps)
         onClick={handlePoolClick}
       >
         <AssetCell assetId={asset.assetId} />
+        <Skeleton isLoaded={!isLendingPositionDataLoading}>
+          <Stack spacing={0}>
+            <Text translation={accountNumberTranslation} />
+          </Stack>
+        </Skeleton>
         <Skeleton isLoaded={!isLendingPositionDataLoading}>
           <Stack spacing={0}>
             <Amount.Fiat value={lendingPositionData?.debtBalanceFiatUSD ?? '0'} />
@@ -160,6 +178,9 @@ export const YourLoans = () => {
           fontSize='sm'
         >
           <Text translation='lending.pool' />
+          <HelperTooltip label={translate('assets.assetDetails.assetAccounts.account')}>
+            <Text translation='assets.assetDetails.assetAccounts.account' textAlign='right' />
+          </HelperTooltip>
           <HelperTooltip label={translate('lending.outstandingDebt')}>
             <Text translation='lending.outstandingDebt' textAlign='right' />
           </HelperTooltip>