✨Add basic modal for HLS staking (#615)

src/components/Borrow/BorrowActionButtons.tsx

@@ -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>
   )

src/components/HLS/Staking/Table/Columns/Manage.tsx

@@ -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' />
 }

src/components/Modals/HLS/Content/index.tsx

@@ -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
+  borrowAsset: Asset
-  collateralDenom: string
+  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}
+        collateralAsset={props.collateralAsset}
-        borrowAsset={borrowAsset}
+        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}
+      collateralAsset={props.collateralAsset}
-      borrowAsset={borrowAsset}
+      borrowAsset={props.borrowAsset}
       emptyHlsAccounts={emptyHlsAccounts}
       hlsAccounts={hlsAccounts}
       isOpen={isOpen}

src/components/Modals/HLS/Header.tsx

@@ -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
+  primaryAsset: Asset
-  secondaryDenom: string
+  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} />
+      <DoubleLogo
-      <Text>{`${primaryAsset.symbol} - ${secondaryAsset.symbol}`}</Text>
+        primaryDenom={props.secondaryAsset.denom}
+        secondaryDenom={props.primaryAsset.denom}
+      />
+      <Text>{`${props.secondaryAsset.symbol} - ${props.primaryAsset.symbol}`}</Text>
       <HLSTag />
     </div>
   )

src/components/Modals/HLS/Manage/index.tsx

@@ -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>
+  )
+}

src/components/Modals/HLS/index.tsx

@@ -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}
+        primaryAsset={primaryAsset}
-        borrowDenom={modal.vault.denoms.secondary}
+        secondaryAsset={secondaryAsset}
         vaultAddress={modal.vault.address}
       />
     )
   if (modal?.strategy)
     return (
-      <HlsModal
+      <HlsModal primaryAsset={primaryAsset} secondaryAsset={secondaryAsset} vaultAddress={null} />
-        collateralDenom={modal.strategy.denoms.deposit}
-        borrowDenom={modal.strategy.denoms.borrow}
-        vaultAddress={null}
-      />
     )
 
   return null
 }
 
 interface Props {
-  borrowDenom: string
+  primaryAsset: Asset
-  collateralDenom: string
+  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}
+        collateralAsset={props.primaryAsset}
-        borrowDenom={props.borrowDenom}
+        borrowAsset={props.secondaryAsset}
         vaultAddress={props.vaultAddress}
       />
     </Modal>

src/components/Modals/ModalsContainer.tsx

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

src/components/Modals/index.tsx

@@ -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'

src/store/slices/modal.ts

@@ -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,

src/types/interfaces/store/modals.d.ts

@@ -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'
+  }
+}