LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨Add basic modal for HLS staking (#615)

Browse Source
This commit is contained in:
Bob van der Helm 2023-11-03 16:44:02 +01:00 committed by GitHub
parent 5a775bcc6b
commit 4ec95c885c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 117 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Borrow/BorrowActionButtons.tsx
View File

@ -2,7 +2,7 @@ import { useCallback } from 'react'
import Button from 'components/Button'
import ActionButton from 'components/Button/ActionButton'
import { Plus, ReceiptCheck } from 'components/Icons'
import { HandCoins, Plus } from 'components/Icons'
import useStore from 'store'
import { getEnabledMarketAssets } from 'utils/assets'
@ -37,7 +37,7 @@ export default function BorrowActionButtons(props: Props) {
className='min-w-40 text-center'
/>
{debt && (
<Button color='tertiary' leftIcon={<ReceiptCheck />} text='Repay' onClick={repayHandler} />
<Button color='tertiary' leftIcon={<HandCoins />} text='Repay' onClick={repayHandler} />
)}
</div>
)

50
src/components/HLS/Staking/Table/Columns/Manage.tsx
View File

@ -1,32 +1,44 @@
import React from 'react'
import React, { useCallback, useMemo } from 'react'
import DropDownButton from 'components/Button/DropDownButton'
import { ArrowDownLine, HandCoins, Plus } from 'components/Icons'
import useStore from 'store'
export const MANAGE_META = { id: 'manage' }
const ITEMS: DropDownItem[] = [
{
icon: <Plus width={16} />,
text: 'Deposit more',
onClick: () => {},
},
{
icon: <HandCoins />,
text: 'Repay',
onClick: () => {},
},
{
icon: <ArrowDownLine />,
text: 'Withdraw',
onClick: () => {},
},
]
interface Props {
account: HLSAccountWithStrategy
}
export default function Manage(props: Props) {
const openModal = useCallback(
(action: 'deposit' | 'withdraw' | 'repay') =>
useStore.setState({
hlsManageModal: { staking: { strategy: props.account.strategy, action } },
}),
[props.account.strategy],
)
const ITEMS: DropDownItem[] = useMemo(
() => [
{
icon: <Plus width={16} />,
text: 'Deposit more',
onClick: () => openModal('deposit'),
},
{
icon: <HandCoins />,
text: 'Repay',
onClick: () => openModal('repay'),
},
{
icon: <ArrowDownLine />,
text: 'Withdraw',
onClick: () => openModal('withdraw'),
},
],
[openModal],
)
return <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
}

19
src/components/Modals/HLS/Content/index.tsx
View File

@ -11,17 +11,14 @@ import useIsOpenArray from 'hooks/useIsOpenArray'
import useVault from 'hooks/useVault'
import useStore from 'store'
import { isAccountEmpty } from 'utils/accounts'
import { getAssetByDenom } from 'utils/assets'
interface Props {
borrowDenom: string
collateralDenom: string
borrowAsset: Asset
collateralAsset: Asset
vaultAddress: string | null
}
export default function Controller(props: Props) {
const collateralAsset = getAssetByDenom(props.collateralDenom)
const borrowAsset = getAssetByDenom(props.borrowDenom)
const [selectedAccount, setSelectedAccount] = useState<Account>(EMPTY_ACCOUNT_HLS)
const [isOpen, toggleIsOpen] = useIsOpenArray(4, false)
const address = useStore((s) => s.address)
@ -30,18 +27,16 @@ export default function Controller(props: Props) {
() => hlsAccounts.filter((account) => isAccountEmpty(account)),
[hlsAccounts],
)
const walletCollateralAsset = useCurrentWalletBalance(props.collateralDenom)
const walletCollateralAsset = useCurrentWalletBalance(props.collateralAsset.denom)
const vault = useVault(props.vaultAddress || '')
if (!collateralAsset || !borrowAsset) return null
if (vault)
return (
<Vault
walletCollateralAsset={walletCollateralAsset}
vault={vault}
collateralAsset={collateralAsset}
borrowAsset={borrowAsset}
collateralAsset={props.collateralAsset}
borrowAsset={props.borrowAsset}
emptyHlsAccounts={emptyHlsAccounts}
hlsAccounts={hlsAccounts}
isOpen={isOpen}
@ -54,8 +49,8 @@ export default function Controller(props: Props) {
return (
<StakingContent
walletCollateralAsset={walletCollateralAsset}
collateralAsset={collateralAsset}
borrowAsset={borrowAsset}
collateralAsset={props.collateralAsset}
borrowAsset={props.borrowAsset}
emptyHlsAccounts={emptyHlsAccounts}
hlsAccounts={hlsAccounts}
isOpen={isOpen}

17
src/components/Modals/HLS/Header.tsx
View File

@ -3,23 +3,20 @@ import React from 'react'
import DoubleLogo from 'components/DoubleLogo'
import HLSTag from 'components/HLS/HLSTag'
import Text from 'components/Text'
import { getAssetByDenom } from 'utils/assets'
interface Props {
primaryDenom: string
secondaryDenom: string
primaryAsset: Asset
secondaryAsset: Asset
}
export default function Header(props: Props) {
const primaryAsset = getAssetByDenom(props.primaryDenom)
const secondaryAsset = getAssetByDenom(props.secondaryDenom)
if (!primaryAsset || !secondaryAsset) return null
return (
<div className='flex items-center gap-2'>
<DoubleLogo primaryDenom={props.primaryDenom} secondaryDenom={props.secondaryDenom} />
<Text>{`${primaryAsset.symbol} - ${secondaryAsset.symbol}`}</Text>
<DoubleLogo
primaryDenom={props.secondaryAsset.denom}
secondaryDenom={props.primaryAsset.denom}
/>
<Text>{`${props.secondaryAsset.symbol} - ${props.primaryAsset.symbol}`}</Text>
<HLSTag />
</div>
)

40
src/components/Modals/HLS/Manage/index.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react'
import Modal from 'components/Modal'
import Header from 'components/Modals/HLS/Header'
import useStore from 'store'
import { getAssetByDenom } from 'utils/assets'
export default function HlsManageModalController() {
const modal = useStore((s) => s.hlsManageModal)
const collateralAsset = getAssetByDenom(modal?.staking.strategy.denoms.deposit || '')
const borrowAsset = getAssetByDenom(modal?.staking.strategy.denoms.borrow || '')
if (!modal || !collateralAsset || !borrowAsset) return null
return <HlsModal collateralAsset={collateralAsset} borrowAsset={borrowAsset} />
}
interface Props {
borrowAsset: Asset
collateralAsset: Asset
}
function HlsModal(props: Props) {
function handleClose() {
useStore.setState({ hlsManageModal: null })
}
return (
<Modal
header={<Header primaryAsset={props.collateralAsset} secondaryAsset={props.borrowAsset} />}
headerClassName='gradient-header pl-2 pr-2.5 py-3 border-b-white/5 border-b'
contentClassName='flex flex-col p-6'
modalClassName='max-w-modal-md'
onClose={handleClose}
>
Some kind of text here
</Modal>
)
}

30
src/components/Modals/HLS/index.tsx
View File

@ -4,33 +4,39 @@ import Modal from 'components/Modal'
import Content from 'components/Modals/HLS/Content'
import Header from 'components/Modals/HLS/Header'
import useStore from 'store'
import { getAssetByDenom } from 'utils/assets'
export default function HlsModalController() {
const modal = useStore((s) => s.hlsModal)
const primaryAsset = getAssetByDenom(
modal?.vault?.denoms.primary || modal?.strategy?.denoms.deposit || '',
)
const secondaryAsset = getAssetByDenom(
modal?.vault?.denoms.secondary || modal?.strategy?.denoms.borrow || '',
)
if (!primaryAsset || !secondaryAsset) return null
if (modal?.vault)
return (
<HlsModal
collateralDenom={modal.vault.denoms.primary}
borrowDenom={modal.vault.denoms.secondary}
primaryAsset={primaryAsset}
secondaryAsset={secondaryAsset}
vaultAddress={modal.vault.address}
/>
)
if (modal?.strategy)
return (
<HlsModal
collateralDenom={modal.strategy.denoms.deposit}
borrowDenom={modal.strategy.denoms.borrow}
vaultAddress={null}
/>
<HlsModal primaryAsset={primaryAsset} secondaryAsset={secondaryAsset} vaultAddress={null} />
)
return null
}
interface Props {
borrowDenom: string
collateralDenom: string
primaryAsset: Asset
secondaryAsset: Asset
vaultAddress: string | null
}
@ -41,15 +47,15 @@ function HlsModal(props: Props) {
return (
<Modal
header={<Header primaryDenom={props.collateralDenom} secondaryDenom={props.borrowDenom} />}
header={<Header primaryAsset={props.primaryAsset} secondaryAsset={props.secondaryAsset} />}
headerClassName='gradient-header pl-2 pr-2.5 py-3 border-b-white/5 border-b'
contentClassName='flex flex-col p-6'
modalClassName='max-w-modal-md'
onClose={handleClose}
>
<Content
collateralDenom={props.collateralDenom}
borrowDenom={props.borrowDenom}
collateralAsset={props.primaryAsset}
borrowAsset={props.secondaryAsset}
vaultAddress={props.vaultAddress}
/>
</Modal>

2
src/components/Modals/ModalsContainer.tsx
View File

@ -5,6 +5,7 @@ import {
BorrowModal,
FundAndWithdrawModal,
GetStartedModal,
HlsManageModal,
HlsModal,
LendAndReclaimModalController,
SettingsModal,
@ -30,6 +31,7 @@ export default function ModalsContainer() {
<WalletAssets />
<AlertDialogController />
<HlsModal />
<HlsManageModal />
</>
)
}

1
src/components/Modals/index.tsx
View File

@ -11,3 +11,4 @@ export { default as VaultModal } from 'components/Modals/Vault'
export { default as WalletAssets } from 'components/Modals/WalletAssets'
export { default as WithdrawFromVaultsModal } from 'components/Modals/WithdrawFromVaultsModal'
export { default as HlsModal } from 'components/Modals/HLS'
export { default as HlsManageModal } from 'components/Modals/HLS/Manage'

1
src/store/slices/modal.ts
View File

@ -11,6 +11,7 @@ export default function createModalSlice(set: SetState<ModalSlice>, get: GetStat
fundAndWithdrawModal: null,
getStartedModal: false,
hlsInformationModal: null,
hlsManageModal: null,
lendAndReclaimModal: null,
resetStettingsModal: false,
settingsModal: false,

8
src/types/interfaces/store/modals.d.ts vendored
View File

@ -4,6 +4,7 @@ interface ModalSlice {
alertDialog: AlertDialogConfig | null
assetOverlayState: OverlayState
hlsModal: HlsModal | null
hlsManageModal: HlsManageModal | null
borrowModal: BorrowModal | null
fundAndWithdrawModal: 'fund' | 'withdraw' | null
getStartedModal: boolean
@ -73,3 +74,10 @@ interface HlsModal {
strategy?: HLSStrategy
vault?: Vault
}
interface HlsManageModal {
staking: {
strategy: HLSStrategy
action: 'deposit' | 'withdraw' | 'repay'
}
}