combine borrow and repay modals

2022-12-18 23:30:49 +11:00 · 2022-12-18 23:30:49 +11:00 · d7ccc7b4a6
parent 7c58c11bea
commit d7ccc7b4a6
15 changed files with 207 additions and 132 deletions
--- a/components/modals/BorrowModal.tsx
+++ b/components/modals/BorrowModal.tsx
@ -10,20 +10,21 @@ import Image from 'next/legacy/image'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
-import { ModalProps } from '../../types/modal'
-import { INPUT_TOKEN_DEFAULT } from '../../utils/constants'
-import { notify } from '../../utils/notifications'
-import { floorToDecimal, formatFixedDecimals } from '../../utils/numbers'
-import ActionTokenList from '../account/ActionTokenList'
-import ButtonGroup from '../forms/ButtonGroup'
-import Label from '../forms/Label'
-import Button from '../shared/Button'
-import InlineNotification from '../shared/InlineNotification'
-import Loading from '../shared/Loading'
-import Modal from '../shared/Modal'
-import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
-import { withValueLimit } from '../swap/SwapForm'
-import { getMaxWithdrawForBank } from '../swap/useTokenMax'
+import {
+  ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
+  INPUT_TOKEN_DEFAULT,
+} from './../utils/constants'
+import { notify } from './../utils/notifications'
+import { floorToDecimal, formatFixedDecimals } from './../utils/numbers'
+import ActionTokenList from './account/ActionTokenList'
+import ButtonGroup from './forms/ButtonGroup'
+import Label from './forms/Label'
+import Button from './shared/Button'
+import InlineNotification from './shared/InlineNotification'
+import Loading from './shared/Loading'
+import { EnterBottomExitBottom, FadeInFadeOut } from './shared/Transitions'
+import { withValueLimit } from './swap/SwapForm'
+import { getMaxWithdrawForBank } from './swap/useTokenMax'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import Tooltip from '@components/shared/Tooltip'
@ -32,13 +33,12 @@ import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
 import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'

-interface BorrowModalProps {
+interface BorrowFormProps {
+  onSuccess: () => void
  token?: string
 }

-type ModalCombinedProps = BorrowModalProps & ModalProps
-
-function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
+function BorrowForm({ onSuccess, token }: BorrowFormProps) {
  const { t } = useTranslation('common')
  const { group } = useMangoGroup()
  const [inputAmount, setInputAmount] = useState('')
@ -114,7 +114,9 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
        type: 'success',
        txid: tx,
      })
-      actions.reloadMangoAccount()
+      await actions.reloadMangoAccount()
+      setSubmitting(false)
+      onSuccess()
    } catch (e: any) {
      console.error(e)
      notify({
@ -123,9 +125,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
        txid: e?.txid,
        type: 'error',
      })
-    } finally {
      setSubmitting(false)
-      onClose()
    }
  }

@ -165,12 +165,12 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
    : false

  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <>
      <EnterBottomExitBottom
        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto rounded-lg bg-th-bkg-1 p-6"
        show={showTokenList}
      >
-        <h2 className="mb-4 text-center">{t('select-token')}</h2>
+        <h2 className="mb-4 text-center text-lg">{t('select-borrow-token')}</h2>
        <div className="grid auto-cols-fr grid-flow-col  px-4 pb-2">
          <div className="">
            <p className="text-xs">{t('token')}</p>
@ -190,9 +190,11 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
          valueKey="maxAmount"
        />
      </EnterBottomExitBottom>
-      <FadeInFadeOut className="flex flex-col justify-between" show={isOpen}>
+      <FadeInFadeOut
+        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
+        show={!showTokenList}
+      >
        <div>
-          <h2 className="mb-4 text-center">{t('borrow')}</h2>
          {initHealth && initHealth <= 0 ? (
            <div className="mb-4">
              <InlineNotification
@ -203,7 +205,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
          ) : null}
          <div className="grid grid-cols-2">
            <div className="col-span-2 flex justify-between">
-              <Label text={t('token')} />
+              <Label text={`${t('borrow')} ${t('token')}`} />
              <MaxAmountButton
                className="mb-2"
                label={t('max')}
@ -301,34 +303,36 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
            </div>
          ) : null}
        </div>
-        <Button
-          onClick={handleWithdraw}
-          className="flex w-full items-center justify-center"
-          disabled={!inputAmount || showInsufficientBalance}
-          size="large"
-        >
-          {submitting ? (
-            <Loading className="mr-2 h-5 w-5" />
-          ) : showInsufficientBalance ? (
-            <div className="flex items-center">
-              <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-              {t('swap:insufficient-collateral')}
+        <div className="flex justify-center">
+          <Button
+            onClick={handleWithdraw}
+            className="flex w-full items-center justify-center"
+            disabled={!inputAmount || showInsufficientBalance}
+            size="large"
+          >
+            {submitting ? (
+              <Loading className="mr-2 h-5 w-5" />
+            ) : showInsufficientBalance ? (
+              <div className="flex items-center">
+                <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                {t('swap:insufficient-collateral')}
+              </div>
+            ) : (
+              <div className="flex items-center">
+                <CurrencyDollarIcon className="mr-2 h-5 w-5" />
+                {t('borrow')}
+              </div>
+            )}
+          </Button>
+          {bank ? (
+            <div className="pt-4">
+              <TokenVaultWarnings bank={bank} />
            </div>
-          ) : (
-            <div className="flex items-center">
-              <CurrencyDollarIcon className="mr-2 h-5 w-5" />
-              {t('borrow')}
-            </div>
-          )}
-        </Button>
-        {bank ? (
-          <div className="pt-4">
-            <TokenVaultWarnings bank={bank} />
-          </div>
-        ) : null}
+          ) : null}
+        </div>
      </FadeInFadeOut>
-    </Modal>
+    </>
  )
 }

-export default BorrowModal
+export default BorrowForm
--- a/components/DepositForm.tsx
+++ b/components/DepositForm.tsx
@ -12,7 +12,11 @@ import Image from 'next/legacy/image'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
-import { ALPHA_DEPOSIT_LIMIT, INPUT_TOKEN_DEFAULT } from './../utils/constants'
+import {
+  ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
+  ALPHA_DEPOSIT_LIMIT,
+  INPUT_TOKEN_DEFAULT,
+} from './../utils/constants'
 import { notify } from './../utils/notifications'
 import { floorToDecimal, formatFixedDecimals } from './../utils/numbers'
 import { TokenAccount } from './../utils/tokens'
@ -219,7 +223,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
        />
      </EnterBottomExitBottom>
      <FadeInFadeOut
-        className="flex h-full flex-col justify-between"
+        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
        show={!showTokenList}
      >
        <div>
--- a/components/modals/RepayModal.tsx
+++ b/components/modals/RepayModal.tsx
@ -12,32 +12,30 @@ import Image from 'next/legacy/image'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
-import { ModalProps } from '../../types/modal'
-import { notify } from '../../utils/notifications'
-import { floorToDecimal, formatFixedDecimals } from '../../utils/numbers'
-import ActionTokenList from '../account/ActionTokenList'
-import ButtonGroup from '../forms/ButtonGroup'
-import Label from '../forms/Label'
-import Button from '../shared/Button'
-import Loading from '../shared/Loading'
-import Modal from '../shared/Modal'
-import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
-import { withValueLimit } from '../swap/SwapForm'
+import { notify } from './../utils/notifications'
+import { floorToDecimal, formatFixedDecimals } from './../utils/numbers'
+import ActionTokenList from './account/ActionTokenList'
+import ButtonGroup from './forms/ButtonGroup'
+import Label from './forms/Label'
+import Button from './shared/Button'
+import Loading from './shared/Loading'
+import { EnterBottomExitBottom, FadeInFadeOut } from './shared/Transitions'
+import { withValueLimit } from './swap/SwapForm'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
-import { walletBalanceForToken } from '../DepositForm'
+import { walletBalanceForToken } from './DepositForm'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
+import { ACCOUNT_ACTION_MODAL_INNER_HEIGHT } from 'utils/constants'

-interface RepayModalProps {
+interface RepayFormProps {
+  onSuccess: () => void
  token?: string
 }

-type ModalCombinedProps = RepayModalProps & ModalProps
-
-function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
+function RepayForm({ onSuccess, token }: RepayFormProps) {
  const { t } = useTranslation('common')
  const { group } = useMangoGroup()
  const { mangoAccount } = useMangoAccount()
@ -115,8 +113,8 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
      if (!mangoAccount || !group || !bank || !wallet) return
      console.log('inputAmount: ', amount)

+      setSubmitting(true)
      try {
-        setSubmitting(true)
        const tx = await client.tokenDeposit(
          group,
          mangoAccount,
@ -132,6 +130,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
        await actions.reloadMangoAccount()
        actions.fetchWalletTokens(wallet.adapter as unknown as Wallet)
        setSubmitting(false)
+        onSuccess()
      } catch (e: any) {
        notify({
          title: 'Transaction failed',
@ -140,11 +139,10 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
          type: 'error',
        })
        console.error('Error repaying:', e)
+        setSubmitting(false)
      }
-
-      onClose()
    },
-    [bank, wallet, onClose]
+    [bank, wallet]
  )

  const banks = useMemo(() => {
@ -174,13 +172,13 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {

  const showInsufficientBalance = walletBalance.maxAmount < Number(inputAmount)

-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+  return banks.length ? (
+    <>
      <EnterBottomExitBottom
        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto rounded-lg bg-th-bkg-1 p-6"
        show={showTokenList}
      >
-        <h2 className="mb-4 text-center">{t('select-token')}</h2>
+        <h2 className="mb-4 text-center text-lg">{t('select-repay-token')}</h2>
        <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
          <div className="text-left">
            <p className="text-xs">{t('token')}</p>
@ -197,19 +195,20 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
        />
      </EnterBottomExitBottom>
      <FadeInFadeOut
-        className="flex h-full flex-col justify-between"
-        show={isOpen}
+        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
+        show={!showTokenList}
      >
        <div>
-          <h2 className="mb-2 text-center">{t('repay-borrow')}</h2>
-          <SolBalanceWarnings
-            amount={inputAmount}
-            setAmount={setInputAmount}
-            selectedToken={selectedToken}
-          />
-          <div className="mt-4 grid grid-cols-2">
+          <div className="-mt-2 mb-2">
+            <SolBalanceWarnings
+              amount={inputAmount}
+              setAmount={setInputAmount}
+              selectedToken={selectedToken}
+            />
+          </div>
+          <div className="grid grid-cols-2">
            <div className="col-span-2 flex justify-between">
-              <Label text={t('token')} />
+              <Label text={`${t('repay')} ${t('token')}`} />
              <MaxAmountButton
                className="mb-2"
                label={t('amount-owed')}
@ -298,32 +297,37 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
              </p>
            </div>
          </div>
-          <Button
-            onClick={() => handleDeposit(inputAmount)}
-            className="flex w-full items-center justify-center"
-            disabled={!inputAmount || showInsufficientBalance}
-            size="large"
-          >
-            {submitting ? (
-              <Loading className="mr-2 h-5 w-5" />
-            ) : showInsufficientBalance ? (
-              <div className="flex items-center">
-                <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-                {t('swap:insufficient-balance', {
-                  symbol: selectedToken,
-                })}
-              </div>
-            ) : (
-              <div className="flex items-center">
-                <BanknotesIcon className="mr-2 h-5 w-5" />
-                {t('repay')}
-              </div>
-            )}
-          </Button>
        </div>
+        <Button
+          onClick={() => handleDeposit(inputAmount)}
+          className="flex w-full items-center justify-center"
+          disabled={!inputAmount || showInsufficientBalance}
+          size="large"
+        >
+          {submitting ? (
+            <Loading className="mr-2 h-5 w-5" />
+          ) : showInsufficientBalance ? (
+            <div className="flex items-center">
+              <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+              {t('swap:insufficient-balance', {
+                symbol: selectedToken,
+              })}
+            </div>
+          ) : (
+            <div className="flex items-center">
+              <BanknotesIcon className="mr-2 h-5 w-5" />
+              {t('repay')}
+            </div>
+          )}
+        </Button>
      </FadeInFadeOut>
-    </Modal>
+    </>
+  ) : (
+    <div className="flex h-[356px] flex-col items-center justify-center">
+      <span className="text-2xl">😎</span>
+      <p>No borrows to repay...</p>
+    </div>
  )
 }

-export default RepayModal
+export default RepayForm
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@ -1,5 +1,4 @@
 import Link from 'next/link'
-import TradeIcon from './icons/TradeIcon'
 import {
  EllipsisHorizontalIcon,
  BuildingLibraryIcon,
@ -10,6 +9,7 @@ import {
  ChartBarIcon,
  Cog8ToothIcon,
  ArrowsRightLeftIcon,
+  ArrowTrendingUpIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@ -87,7 +87,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
            <MenuItem
              active={pathname === '/trade'}
              collapsed={collapsed}
-              icon={<TradeIcon className="h-5 w-5" />}
+              icon={<ArrowTrendingUpIcon className="h-5 w-5" />}
              title={t('trade')}
              pagePath="/trade"
            />
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@ -20,18 +20,17 @@ import {
 } from '../utils/numbers'
 import { breakpoints } from '../utils/theme'
 import Switch from './forms/Switch'
-import BorrowModal from './modals/BorrowModal'
 import { IconButton, LinkButton } from './shared/Button'
 import ContentBox from './shared/ContentBox'
 import IconDropMenu from './shared/IconDropMenu'
 import Tooltip from './shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
-import RepayModal from './modals/RepayModal'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useJupiterMints from '../hooks/useJupiterMints'
 import { Table, Td, Th, TrBody, TrHead } from './shared/TableElements'
 import useMangoGroup from 'hooks/useMangoGroup'
 import DepositWithdrawModal from './modals/DepositWithdrawModal'
+import BorrowRepayModal from './modals/BorrowRepayModal'

 const TokenList = () => {
  const { t } = useTranslation(['common', 'token', 'trade'])
@ -569,14 +568,16 @@ const ActionsMenu = ({
        />
      ) : null}
      {showBorrowModal ? (
-        <BorrowModal
+        <BorrowRepayModal
+          action="borrow"
          isOpen={showBorrowModal}
          onClose={() => setShowBorrowModal(false)}
          token={selectedToken}
        />
      ) : null}
      {showRepayModal ? (
-        <RepayModal
+        <BorrowRepayModal
+          action="repay"
          isOpen={showRepayModal}
          onClose={() => setShowRepayModal(false)}
          token={selectedToken}
--- a/components/WithdrawForm.tsx
+++ b/components/WithdrawForm.tsx
@ -11,7 +11,10 @@ import { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'

 import mangoStore from '@store/mangoStore'
-import { INPUT_TOKEN_DEFAULT } from './../utils/constants'
+import {
+  ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
+  INPUT_TOKEN_DEFAULT,
+} from './../utils/constants'
 import { notify } from './../utils/notifications'
 import { floorToDecimal, formatFixedDecimals } from './../utils/numbers'
 import ActionTokenList from './account/ActionTokenList'
@ -184,7 +187,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
        />
      </EnterBottomExitBottom>
      <FadeInFadeOut
-        className="flex h-[386px] flex-col justify-between"
+        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
        show={!showTokenList}
      >
        <div>
--- a/components/account/AccountActions.tsx
+++ b/components/account/AccountActions.tsx
@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react'
 import Button, { LinkButton } from '../shared/Button'
 import {
-  ArrowUpTrayIcon,
-  BanknotesIcon,
+  ArrowDownRightIcon,
+  ArrowUpLeftIcon,
  DocumentDuplicateIcon,
  EllipsisHorizontalIcon,
  PencilIcon,
@ -20,11 +20,10 @@ import {
  HealthType,
  toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
-import RepayModal from '@components/modals/RepayModal'
 import DelegateModal from '@components/modals/DelegateModal'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
-import BorrowModal from '@components/modals/BorrowModal'
+import BorrowRepayModal from '@components/modals/BorrowRepayModal'

 const AccountActions = () => {
  const { t } = useTranslation(['common', 'close-account'])
@ -51,7 +50,7 @@ const AccountActions = () => {
    return (
      toUiDecimalsForQuote(
        mangoAccount.getLiabsValue(group, HealthType.init).toNumber()
-      ) >= 10
+      ) >= 1
    )
  }, [mangoAccount, group])

@ -64,7 +63,7 @@ const AccountActions = () => {
            disabled={!mangoAccount}
            onClick={() => setShowRepayModal(true)}
          >
-            <BanknotesIcon className="mr-2 h-5 w-5" />
+            <ArrowDownRightIcon className="mr-2 h-5 w-5" />
            {t('repay')}
          </Button>
        ) : null}
@ -74,7 +73,7 @@ const AccountActions = () => {
          onClick={() => setShowBorrowModal(true)}
          secondary={hasBorrows}
        >
-          <ArrowUpTrayIcon className="mr-2 h-5 w-5" />
+          <ArrowUpLeftIcon className="mr-2 h-5 w-5" />
          {t('borrow')}
        </Button>
        <IconDropMenu
@ -130,14 +129,15 @@ const AccountActions = () => {
        />
      ) : null}
      {showBorrowModal ? (
-        <BorrowModal
+        <BorrowRepayModal
+          action="borrow"
          isOpen={showBorrowModal}
          onClose={() => setShowBorrowModal(false)}
        />
      ) : null}
-
      {showRepayModal ? (
-        <RepayModal
+        <BorrowRepayModal
+          action="repay"
          isOpen={showRepayModal}
          onClose={() => setShowRepayModal(false)}
        />
--- a/components/modals/BorrowRepayModal.tsx
+++ b/components/modals/BorrowRepayModal.tsx
@ -0,0 +1,45 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import { useState } from 'react'
+import TabUnderline from '@components/shared/TabUnderline'
+import BorrowForm from '@components/BorrowForm'
+import RepayForm from '@components/RepayForm'
+import { ACCOUNT_ACTION_MODAL_HEIGHT } from 'utils/constants'
+
+interface BorrowRepayModalProps {
+  action: 'borrow' | 'repay'
+  token?: string
+}
+
+type ModalCombinedProps = BorrowRepayModalProps & ModalProps
+
+const BorrowRepayModal = ({
+  action,
+  isOpen,
+  onClose,
+  token,
+}: ModalCombinedProps) => {
+  const [activeTab, setActiveTab] = useState(action)
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className={`h-[${ACCOUNT_ACTION_MODAL_HEIGHT}]`}>
+        <div className="pb-2">
+          <TabUnderline
+            activeValue={activeTab}
+            values={['borrow', 'repay']}
+            onChange={(v) => setActiveTab(v)}
+          />
+        </div>
+        {activeTab === 'borrow' ? (
+          <BorrowForm onSuccess={onClose} token={token} />
+        ) : null}
+        {activeTab === 'repay' ? (
+          <RepayForm onSuccess={onClose} token={token} />
+        ) : null}
+      </div>
+    </Modal>
+  )
+}
+
+export default BorrowRepayModal
--- a/components/token/ActionPanel.tsx
+++ b/components/token/ActionPanel.tsx
@ -1,5 +1,5 @@
 import { Bank } from '@blockworks-foundation/mango-v4'
-import BorrowModal from '@components/modals/BorrowModal'
+import BorrowRepayModal from '@components/modals/BorrowRepayModal'
 import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
 import Button from '@components/shared/Button'
 import mangoStore from '@store/mangoStore'
@ -95,7 +95,8 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
        />
      ) : null}
      {showBorrowModal ? (
-        <BorrowModal
+        <BorrowRepayModal
+          action="borrow"
          isOpen={showBorrowModal}
          onClose={() => setShowBorrowModal(false)}
          token={bank!.name}
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -94,7 +94,9 @@
  "repayment-value": "Repayment Value",
  "rolling-change": "24h Change",
  "save": "Save",
+  "select-borrow-token": "Select Borrow Token",
  "select-deposit-token": "Select Deposit Token",
+  "select-repay-token": "Select Repay Token",
  "select-token": "Select Token",
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -94,7 +94,9 @@
  "repayment-value": "Repayment Value",
  "rolling-change": "24h Change",
  "save": "Save",
+  "select-borrow-token": "Select Borrow Token",
  "select-deposit-token": "Select Deposit Token",
+  "select-repay-token": "Select Repay Token",
  "select-token": "Select Token",
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -94,7 +94,9 @@
  "repayment-value": "Repayment Value",
  "rolling-change": "24h Change",
  "save": "Save",
+  "select-borrow-token": "Select Borrow Token",
  "select-deposit-token": "Select Deposit Token",
+  "select-repay-token": "Select Repay Token",
  "select-token": "Select Token",
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -94,7 +94,9 @@
  "repayment-value": "Repayment Value",
  "rolling-change": "24h Change",
  "save": "Save",
+  "select-borrow-token": "Select Borrow Token",
  "select-deposit-token": "Select Deposit Token",
+  "select-repay-token": "Select Repay Token",
  "select-token": "Select Token",
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -94,7 +94,9 @@
  "repayment-value": "Repayment Value",
  "rolling-change": "24h Change",
  "save": "Save",
+  "select-borrow-token": "Select Borrow Token",
  "select-deposit-token": "Select Deposit Token",
+  "select-repay-token": "Select Repay Token",
  "select-token": "Select Token",
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -48,6 +48,9 @@ export const GRID_LAYOUT_KEY = 'savedLayouts-0.1'

 export const NOTIFICATION_POSITION_KEY = 'notificationPosition'

+export const FAVORITE_MARKETS_KEY = 'favoriteMarkets'
+
 export const MIN_SOL_BALANCE = 0.04

-export const FAVORITE_MARKETS_KEY = 'favoriteMarkets'
+export const ACCOUNT_ACTION_MODAL_HEIGHT = '448px'
+export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '386px'