Skip to content

Commit

Permalink
repay confirm
Browse files Browse the repository at this point in the history
  • Loading branch information
@reallybeard
reallybeard committed Sep 29, 2023
1 parent 878aeb0 commit 6d47889
Show file tree
Hide file tree
Showing 11 changed files with 257 additions and 140 deletions.
2 changes: 2 additions & 0 deletions src/assets/translations/en/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2136,6 +2136,8 @@
"healthy": "Healthy",
"caution": "Caution",
"risky": "Risky",
"confirmAndBorrow": "Confirm and Borrow",
"confirmAndRepay": "Confirm and Repay",
"repayNoticeTitle": "Hold Up!",
"repayNoticeCta": "I understand",
"repayNotice": "To get back your collateral you will need to repay 100% of your debt.",
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Lending/Pool/Pool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export const Pool = () => {
</TabPanel>
</TabPanels>
</Tabs>
<Input value={value} onChange={value => setValue(value.target.value)} />
{/* <Input value={value} onChange={value => setValue(value.target.value)} /> */}
</Card>
</Stack>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Lending/Pool/components/Borrow/Borrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { AnimatePresence } from 'framer-motion'
import { memo } from 'react'
import { MemoryRouter, Route, Switch, useLocation } from 'react-router'

import { BorrowConfirm } from './BorrowConfirm'
import { BorrowInput } from './BorrowInput'
import { BorrowConfirm } from './Confirm'
import { BorrowRoutePaths } from './types'

const BorrowEntries = [BorrowRoutePaths.Input, BorrowRoutePaths.Confirm]
Expand Down
78 changes: 78 additions & 0 deletions src/pages/Lending/Pool/components/Borrow/BorrowConfirm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { Button, CardFooter, CardHeader, Divider, Flex, Heading, Stack } from '@chakra-ui/react'
import { btcAssetId } from '@shapeshiftoss/caip'
import { TxStatus } from '@shapeshiftoss/unchained-client'
import { useCallback } from 'react'
import { useTranslate } from 'react-polyglot'
import { useHistory } from 'react-router'
import { usdcAssetId } from 'test/mocks/accounts'
import { Amount } from 'components/Amount/Amount'
import { AssetToAsset } from 'components/MultiHopTrade/components/TradeConfirm/AssetToAsset'
import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButton'
import { Row } from 'components/Row/Row'
import { SlideTransition } from 'components/SlideTransition'
import { Text } from 'components/Text'
import { selectAssetById } from 'state/slices/selectors'
import { useAppSelector } from 'state/store'

import { LoanSummary } from '../LoanSummary'
import { BorrowRoutePaths } from './types'

export const BorrowConfirm = () => {
const history = useHistory()
const translate = useTranslate()
const collateralAsset = useAppSelector(state => selectAssetById(state, btcAssetId))
const debtAsset = useAppSelector(state => selectAssetById(state, usdcAssetId))
const handleBack = useCallback(() => {
history.push(BorrowRoutePaths.Input)
}, [history])
return (
<SlideTransition>
<Flex flexDir='column' width='full'>
<CardHeader>
<WithBackButton handleBack={handleBack}>
<Heading as='h5' textAlign='center'>
<Text translation='Confirm' />
</Heading>
</WithBackButton>
</CardHeader>
<Stack spacing={0} divider={<Divider />}>
<AssetToAsset
buyIcon={debtAsset?.icon ?? ''}
sellIcon={collateralAsset?.icon ?? ''}
buyColor={debtAsset?.color ?? ''}
sellColor={collateralAsset?.color ?? ''}
status={TxStatus.Unknown}
px={6}
mb={4}
/>
<LoanSummary borderTopWidth={0} mt={0} />
<Stack py={4} spacing={4} px={6} fontSize='sm' fontWeight='medium'>
<Row fontSize='sm' fontWeight='medium'>
<Row.Label>{translate('common.slippage')}</Row.Label>
<Row.Value>
<Amount.Crypto value='20' symbol='BTC' />
</Row.Value>
</Row>
<Row fontSize='sm' fontWeight='medium'>
<Row.Label>{translate('common.gasFee')}</Row.Label>
<Row.Value>
<Amount.Fiat value='10' />
</Row.Value>
</Row>
<Row fontSize='sm' fontWeight='medium'>
<Row.Label>{translate('common.fees')}</Row.Label>
<Row.Value>
<Amount.Fiat value='0' />
</Row.Value>
</Row>
</Stack>
<CardFooter px={4} py={4}>
<Button colorScheme='blue' size='lg' width='full'>
{translate('lending.confirmAndBorrow')}
</Button>
</CardFooter>
</Stack>
</Flex>
</SlideTransition>
)
}
6 changes: 4 additions & 2 deletions src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ArrowDownIcon } from '@chakra-ui/icons'
import { Button, CardFooter, Divider, Flex, IconButton, Stack } from '@chakra-ui/react'
import { Button, CardFooter, Collapse, Divider, Flex, IconButton, Stack } from '@chakra-ui/react'
import { btcAssetId } from '@shapeshiftoss/caip'
import { useCallback } from 'react'
import { useTranslate } from 'react-polyglot'
Expand Down Expand Up @@ -96,7 +96,9 @@ export const BorrowInput = () => {
/>
}
/>
<LoanSummary show />
<Collapse in={true}>
<LoanSummary />
</Collapse>
<CardFooter
borderTopWidth={1}
borderColor='border.subtle'
Expand Down
28 changes: 0 additions & 28 deletions src/pages/Lending/Pool/components/Borrow/Confirm.tsx
View file

This file was deleted.

152 changes: 75 additions & 77 deletions src/pages/Lending/Pool/components/LoanSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ArrowForwardIcon } from '@chakra-ui/icons'
import type { StackProps } from '@chakra-ui/react'
import { Collapse, Skeleton, Stack } from '@chakra-ui/react'
import { Skeleton, Stack } from '@chakra-ui/react'
import React from 'react'
import { useTranslate } from 'react-polyglot'
import { Amount } from 'components/Amount/Amount'
Expand All @@ -21,84 +21,82 @@ const FromToStack: React.FC<StackProps> = props => (

type LoanSummaryProps = {
isLoading?: boolean
show?: boolean
}
} & StackProps

export const LoanSummary: React.FC<LoanSummaryProps> = ({ isLoading, show }) => {
export const LoanSummary: React.FC<LoanSummaryProps> = ({ isLoading, ...rest }) => {
const translate = useTranslate()
return (
<Collapse in={show}>
<Stack
fontSize='sm'
px={6}
py={4}
spacing={4}
fontWeight='medium'
borderTopWidth={1}
borderColor='border.subtle'
mt={2}
>
<RawText fontWeight='bold'>{translate('lending.loanInformation')}</RawText>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.collateral')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<Amount.Crypto color='text.subtle' value='0' symbol='BTC' />
<Amount.Crypto value='1.0' symbol='BTC' />
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.debt')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<Amount.Fiat color='text.subtle' value='0' />
<Amount.Fiat value='14820' />
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.repaymentLock')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<RawText color='text.subtle'>25 days</RawText>
<RawText>30 days</RawText>
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.collateralizationRatio')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<Amount.Percent value='2.93' color='text.success' />
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.poolDepth')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<RawText color='text.success'>{translate('lending.healthy')}</RawText>
</Skeleton>
</Row.Value>
</Row>
</Stack>
</Collapse>
<Stack
fontSize='sm'
px={6}
py={4}
spacing={4}
fontWeight='medium'
borderTopWidth={1}
borderColor='border.subtle'
mt={2}
{...rest}
>
<RawText fontWeight='bold'>{translate('lending.loanInformation')}</RawText>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.collateral')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<Amount.Crypto color='text.subtle' value='0' symbol='BTC' />
<Amount.Crypto value='1.0' symbol='BTC' />
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.debt')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<Amount.Fiat color='text.subtle' value='0' />
<Amount.Fiat value='14820' />
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.repaymentLock')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<FromToStack>
<RawText color='text.subtle'>25 days</RawText>
<RawText>30 days</RawText>
</FromToStack>
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.collateralizationRatio')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<Amount.Percent value='2.93' color='text.success' />
</Skeleton>
</Row.Value>
</Row>
<Row>
<HelperTooltip label='TBD'>
<Row.Label>{translate('lending.poolDepth')}</Row.Label>
</HelperTooltip>
<Row.Value>
<Skeleton isLoaded={!isLoading}>
<RawText color='text.success'>{translate('lending.healthy')}</RawText>
</Skeleton>
</Row.Value>
</Row>
</Stack>
)
}
28 changes: 0 additions & 28 deletions src/pages/Lending/Pool/components/Repay/Confirm.tsx
View file

This file was deleted.

4 changes: 4 additions & 0 deletions src/pages/Lending/Pool/components/Repay/Repay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { AnimatePresence } from 'framer-motion'
import { memo } from 'react'
import { MemoryRouter, Route, Switch, useLocation } from 'react-router'

import { RepayConfirm } from './RepayConfirm'
import { RepayInput } from './RepayInput'
import { RepayRoutePaths } from './types'

Expand All @@ -23,6 +24,9 @@ const RepayRoutes = memo(() => {
<Route key={RepayRoutePaths.Input} path={RepayRoutePaths.Input}>
<RepayInput />
</Route>
<Route key={RepayRoutePaths.Confirm} path={RepayRoutePaths.Confirm}>
<RepayConfirm />
</Route>
</Switch>
</AnimatePresence>
)
Expand Down
Loading

0 comments on commit 6d47889

Please sign in to comment.