From 77080d064a958040793bb08810f5d79cb5983a98 Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Tue, 28 Mar 2023 18:25:35 +0200 Subject: [PATCH] Borrow functionality (#144) * remove hard coded data * add borrow message * update deposit message * update borrow and deposit * :heavy_plus_sign: add tailwind-elements * :bento: add plus, shield, arrowbullish * configuration for tw-elements * add accordion + account summary * remove tw-elements and update accordion * update borrowmodal * fixed svgs * re-add blur for modals * fix build errors and warnings --- src/components/Accordion.tsx | 36 ++++++ src/components/Account/AccountMenu.tsx | 7 +- src/components/Account/AccountSummary.tsx | 53 ++++++++- src/components/BorrowModal.tsx | 63 ++++++++--- src/components/Card.tsx | 2 +- src/components/Icons/ArrowChartLineUp.svg | 3 + src/components/Icons/Plus.svg | 3 + src/components/Icons/Shield.svg | 3 + src/components/Icons/index.ts | 7 +- src/components/Modal.tsx | 6 +- src/components/TokenInput.tsx | 2 +- src/pages/api/accounts/[id]/debts.ts | 2 +- src/store/slices/broadcast.ts | 50 ++++++--- src/utils/contants.ts | 2 +- yarn.lock | 128 +--------------------- 15 files changed, 191 insertions(+), 176 deletions(-) create mode 100644 src/components/Accordion.tsx create mode 100644 src/components/Icons/ArrowChartLineUp.svg create mode 100644 src/components/Icons/Plus.svg create mode 100644 src/components/Icons/Shield.svg diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx new file mode 100644 index 00000000..365364dc --- /dev/null +++ b/src/components/Accordion.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react' + +import { Text } from 'components/Text' + +import { Plus, Subtract } from './Icons' +import Card from './Card' + +interface Props { + items: Item[] +} + +interface Item { + title: string + content: React.ReactNode +} + +export default function Accordion(props: Props) { + return ( + + {props.items.map((item, index) => ( +
+ + {item.title} +
+ +
+
+ +
+ +
{item.content}
+
+ ))} + + ) +} diff --git a/src/components/Account/AccountMenu.tsx b/src/components/Account/AccountMenu.tsx index c8079e1f..9002e8ff 100644 --- a/src/components/Account/AccountMenu.tsx +++ b/src/components/Account/AccountMenu.tsx @@ -30,6 +30,7 @@ export default function AccountMenu() { const deleteCreditAccount = useStore((s) => s.deleteCreditAccount) const creditAccounts = useStore((s) => s.creditAccounts) const address = useStore((s) => s.address) + const deposit = useStore((s) => s.deposit) const hasCreditAccounts = !!creditAccounts?.length const accountSelected = !!selectedAccount && !isNaN(Number(selectedAccount)) @@ -113,7 +114,11 @@ export default function AccountMenu() { text='Fund' leftIcon={} onClick={() => { - useStore.setState({ fundAccountModal: true }) + deposit({ + fee: hardcodedFee, + accountId: params.account, + coin: { denom: 'uosmo', amount: '10000000' }, + }) setShowMenu(false) }} /> diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx index 89e48d97..657ae42d 100644 --- a/src/components/Account/AccountSummary.tsx +++ b/src/components/Account/AccountSummary.tsx @@ -1,12 +1,53 @@ +import Accordion from 'components/Accordion' import Card from 'components/Card' +import { ArrowChartLineUp, Shield } from 'components/Icons' +import { Text } from 'components/Text' +import useParams from 'hooks/useParams' export default function AccountSummary() { + const params = useParams() + return ( - -
Hello
-
Hello
-
Hello
-
Hello
- +
+ + + $90,000 + + + + + + 4.5x + + + + + + + + + + + + + My content

}, + { title: 'Risk Score: 60/100', content:

My content

}, + { title: 'Balances', content:

My content

}, + ]} + /> +
+ ) +} + +function Item(props: React.HTMLAttributes) { + return ( +
+ {props.children} +
) } diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx index 0378e323..f15927c1 100644 --- a/src/components/BorrowModal.tsx +++ b/src/components/BorrowModal.tsx @@ -14,33 +14,48 @@ import Divider from 'components/Divider' import TokenInput from 'components/TokenInput' import { Button } from 'components/Button' import { ArrowRight } from 'components/Icons' +import useParams from 'hooks/useParams' +import { hardcodedFee } from 'utils/contants' export default function BorrowModal() { - const modal = useStore((s) => s.borrowModal) + const params = useParams() const [percentage, setPercentage] = useState(0) const [value, setValue] = useState(0) + const [selectedAccount, setSelectedAccount] = useState(params.account) + const modal = useStore((s) => s.borrowModal) + const borrow = useStore((s) => s.borrow) + const creditAccounts = useStore((s) => s.creditAccounts) - const onSliderChange = useCallback( - (percentage: number) => onPercentageChange(percentage), - [onPercentageChange], - ) - const onInputChange = useCallback((value: number) => onValueChange(value), [onValueChange]) + function onAccountSelect(accountId: string) { + setSelectedAccount(accountId) + } function setOpen(isOpen: boolean) { useStore.setState({ borrowModal: null }) } - function onBorrowClick() {} + function onBorrowClick() { + if (!modal?.asset) return - function onPercentageChange(percentage: number) { - setPercentage(percentage) - setValue(new BigNumber(percentage).div(100).times(liquidityAmount).toNumber()) + const amount = new BigNumber(value).shiftedBy(modal.asset.decimals) + + borrow({ + fee: hardcodedFee, + accountId: selectedAccount, + coin: { denom: modal.asset.denom, amount: amount.toString() }, + }) } - function onValueChange(value: number) { + const onSliderChange = useCallback( + (percentage: number, liquidityAmount: number) => + setValue(new BigNumber(percentage).div(100).times(liquidityAmount).toNumber()), + [], + ) + + const onInputChange = useCallback((value: number, liquidityAmount: number) => { setValue(value) setPercentage(new BigNumber(value).div(liquidityAmount).times(100).toNumber()) - } + }, []) if (!modal) return null @@ -82,16 +97,32 @@ export default function BorrowModal() { sub={'Liquidity available'} /> -
- +
+ onInputChange(value, liquidityAmount)} value={value} max={liquidityAmount} /> - + onSliderChange(value, liquidityAmount)} /> + Borrow to +