pass token to action modals

components/TokenList.tsx

@@ -2,13 +2,15 @@ import { Transition } from '@headlessui/react'
 import { ChevronDownIcon, DotsHorizontalIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
-import { useRouter } from 'next/router'
 import { Fragment, useState } from 'react'
 import { useViewport } from '../hooks/useViewport'
 
 import mangoStore from '../store/state'
 import { formatDecimal, numberFormat } from '../utils/numbers'
 import { breakpoints } from '../utils/theme'
+import BorrowModal from './modals/BorrowModal'
+import DepositModal from './modals/DepositModal'
+import WithdrawModal from './modals/WithdrawModal'
 import Button, { IconButton, LinkButton } from './shared/Button'
 import ContentBox from './shared/ContentBox'
 import { UpTriangle } from './shared/DirectionTriangles'
@@ -17,10 +19,12 @@ import IconDropMenu from './shared/IconDropMenu'
 const TokenList = () => {
   const { t } = useTranslation('common')
   const [showTokenDetails, setShowTokenDetails] = useState('')
+  const [showDepositModal, setShowDepositModal] = useState(false)
+  const [showWithdrawModal, setShowWithdrawModal] = useState(false)
+  const [showBorrowModal, setShowBorrowModal] = useState(false)
+  const [selectedToken, setSelectedToken] = useState('')
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const group = mangoStore((s) => s.group)
-  const router = useRouter()
-  const { asPath } = router
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
 
@@ -32,6 +36,18 @@ const TokenList = () => {
     showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
   }
 
+  const handleShowActionModals = (
+    token: string,
+    action: 'borrow' | 'deposit' | 'withdraw'
+  ) => {
+    setSelectedToken(token)
+    action === 'borrow'
+      ? setShowBorrowModal(true)
+      : action === 'deposit'
+      ? setShowDepositModal(true)
+      : setShowWithdrawModal(true)
+  }
+
   return (
     <ContentBox hideBorder hidePadding>
       <h2>{t('tokens')}</h2>
@@ -150,7 +166,9 @@ const TokenList = () => {
                         <LinkButton
                           className="w-full text-left"
                           disabled={!mangoAccount}
-                          // onClick={}
+                          onClick={() =>
+                            handleShowActionModals(bank.value.name, 'deposit')
+                          }
                         >
                           {t('deposit')}
                         </LinkButton>
@@ -158,7 +176,12 @@ const TokenList = () => {
                           <LinkButton
                             className="w-full text-left"
                             disabled={!mangoAccount}
-                            // onClick={}
+                            onClick={() =>
+                              handleShowActionModals(
+                                bank.value.name,
+                                'withdraw'
+                              )
+                            }
                           >
                             {t('withdraw')}
                           </LinkButton>
@@ -166,7 +189,9 @@ const TokenList = () => {
                           <LinkButton
                             className="w-full text-left"
                             disabled={!mangoAccount}
-                            // onClick={}
+                            onClick={() =>
+                              handleShowActionModals(bank.value.name, 'borrow')
+                            }
                           >
                             {t('borrow')}
                           </LinkButton>
@@ -311,6 +336,27 @@ const TokenList = () => {
           })}
         </div>
       )}
+      {showDepositModal ? (
+        <DepositModal
+          isOpen={showDepositModal}
+          onClose={() => setShowDepositModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
+      {showWithdrawModal ? (
+        <WithdrawModal
+          isOpen={showWithdrawModal}
+          onClose={() => setShowWithdrawModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
+      {showBorrowModal ? (
+        <BorrowModal
+          isOpen={showBorrowModal}
+          onClose={() => setShowBorrowModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
     </ContentBox>
   )
 }

components/modals/BorrowModal.tsx

@@ -0,0 +1,119 @@
+import { ChevronDownIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import React, { ChangeEvent, useState } from 'react'
+// import mangoStore from '../../store/state'
+import { ModalProps } from '../../types/modal'
+// import { notify } from '../../utils/notifications'
+import Input from '../forms/Input'
+import Label from '../forms/Label'
+import Button, { LinkButton } from '../shared/Button'
+import DepositTokenList from '../shared/DepositTokenList'
+import Loading from '../shared/Loading'
+import Modal from '../shared/Modal'
+import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
+
+interface BorrowModalProps {
+  token?: string
+}
+
+type ModalCombinedProps = BorrowModalProps & ModalProps
+
+function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
+  const { t } = useTranslation('common')
+  const [inputAmount, setInputAmount] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [selectedToken, setSelectedToken] = useState(token || 'USDC')
+  const [showTokenList, setShowTokenList] = useState(false)
+
+  const handleSelectToken = (token: string) => {
+    setSelectedToken(token)
+    setShowTokenList(false)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <EnterBottomExitBottom
+        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
+        show={showTokenList}
+      >
+        <h2 className="mb-4 text-center">{t('select-token')}</h2>
+        <DepositTokenList onSelect={handleSelectToken} />
+      </EnterBottomExitBottom>
+      <FadeInFadeOut
+        className="flex h-96 flex-col justify-between"
+        show={isOpen}
+      >
+        <div>
+          <h2 className="mb-4 text-center">{t('borrow')}</h2>
+          <div className="grid grid-cols-2 pb-6">
+            <div className="col-span-2 flex justify-between">
+              <Label text={t('token')} />
+              <LinkButton
+                className="mb-2 no-underline"
+                onClick={() => console.log('Set max input amount')}
+              >
+                <span className="mr-1 font-normal text-th-fgd-3">
+                  {t('max')}
+                </span>
+                <span className="text-th-fgd-1">0</span>
+              </LinkButton>
+            </div>
+            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
+              <button
+                onClick={() => setShowTokenList(true)}
+                className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
+              >
+                <div className="mr-2.5 flex min-w-[24px] items-center">
+                  <Image
+                    alt=""
+                    width="24"
+                    height="24"
+                    src={`/icons/${selectedToken.toLowerCase()}.svg`}
+                  />
+                </div>
+                <div className="flex w-full items-center justify-between">
+                  <div className="text-xl font-bold">{selectedToken}</div>
+                  <ChevronDownIcon className="h-6 w-6" />
+                </div>
+              </button>
+            </div>
+            <div className="col-span-1">
+              <Input
+                type="text"
+                name="borrow"
+                id="borrow"
+                className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
+                placeholder="0.00"
+                value={inputAmount}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setInputAmount(e.target.value)
+                }
+              />
+            </div>
+          </div>
+          <div className="space-y-2 border-y border-th-bkg-3 py-4">
+            <div className="flex justify-between">
+              <p>{t('health-impact')}</p>
+              <p className="text-th-red">-12%</p>
+            </div>
+            <div className="flex justify-between">
+              <p>{t('borrow-value')}</p>
+              <p className="text-th-fgd-1">$1,000.00</p>
+            </div>
+          </div>
+        </div>
+        <Button
+          onClick={() => console.log('hanlde borrow')}
+          className="flex w-full items-center justify-center"
+          disabled={!inputAmount}
+          size="large"
+        >
+          {submitting ? <Loading className="mr-2 h-5 w-5" /> : t('borrow')}
+        </Button>
+      </FadeInFadeOut>
+    </Modal>
+  )
+}
+
+export default BorrowModal

components/modals/DepositModal.tsx

@@ -14,11 +14,17 @@ import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
 
-function DepositModal({ isOpen, onClose }: ModalProps) {
+interface DepositModalProps {
+  token?: string
+}
+
+type ModalCombinedProps = DepositModalProps & ModalProps
+
+function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const { t } = useTranslation('common')
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
-  const [selectedToken, setSelectedToken] = useState('USDC')
+  const [selectedToken, setSelectedToken] = useState(token || 'USDC')
   const [showTokenList, setShowTokenList] = useState(false)
 
   const handleSelectToken = (token: string) => {
@@ -64,10 +70,6 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
     onClose()
   }
 
-  const handleTokenSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedToken(e.target.value)
-  }
-
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <EnterBottomExitBottom

components/modals/WithdrawModal.tsx

@@ -14,11 +14,17 @@ import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
 import WithdrawTokenList from '../shared/WithdrawTokenList'
 
-function WithdrawModal({ isOpen, onClose }: ModalProps) {
+interface WithdrawModalProps {
+  token?: string
+}
+
+type ModalCombinedProps = WithdrawModalProps & ModalProps
+
+function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const { t } = useTranslation('common')
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
-  const [selectedToken, setSelectedToken] = useState('USDC')
+  const [selectedToken, setSelectedToken] = useState(token || 'USDC')
   const [showTokenList, setShowTokenList] = useState(false)
 
   const handleWithdraw = async () => {
@@ -121,33 +127,6 @@ function WithdrawModal({ isOpen, onClose }: ModalProps) {
               />
             </div>
           </div>
-          {/* <div className="relative mt-1 rounded-md shadow-sm">
-          <div className="absolute inset-y-0 left-0 flex items-center">
-            <label htmlFor="token" className="sr-only">
-              Token
-            </label>
-            <select
-              id="token"
-              name="token"
-              autoComplete="token"
-              className="h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-              onChange={handleTokenSelect}
-            >
-              <option>USDC</option>
-              <option>BTC</option>
-              <option>SOL</option>
-            </select>
-          </div>
-          <input
-            type="text"
-            name="withdraw"
-            id="withdraw"
-            className="block w-full rounded-md border-gray-300 pl-24 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-            placeholder="0.00"
-            value={inputAmount}
-            onChange={(e) => setInputAmount(e.target.value)}
-          />
-        </div> */}
           <div className="space-y-2 border-y border-th-bkg-3 py-4">
             <div className="flex justify-between">
               <p>{t('health-impact')}</p>

public/locales/en/common.json

@@ -3,6 +3,7 @@
    "available-balance": "Available Balance",
    "balance": "Balance",
    "borrow": "Borrow",
+   "borrow-value": "Borrow Value",
    "buy": "Buy",
    "close-account": "Close Account",
    "collateral-multiplier": "Collateral Multiplier",

public/locales/es/common.json

@@ -3,6 +3,7 @@
    "available-balance": "Available Balance",
    "balance": "Balance",
    "borrow": "Borrow",
+   "borrow-value": "Borrow Value",
    "buy": "Buy",
    "close-account": "Close Account",
    "collateral-multiplier": "Collateral Multiplier",

public/locales/zh/common.json

@@ -3,6 +3,7 @@
     "available-balance": "Available Balance",
     "balance": "Balance",
     "borrow": "Borrow",
+    "borrow-value": "Borrow Value",
     "buy": "Buy",
     "close-account": "Close Account",
     "collateral-multiplier": "Collateral Multiplier",

public/locales/zh_tw/common.json

@@ -3,6 +3,7 @@
   "available-balance": "Available Balance",
   "balance": "Balance",
   "borrow": "Borrow",
+  "borrow-value": "Borrow Value",
   "buy": "Buy",
   "close-account": "Close Account",
   "collateral-multiplier": "Collateral Multiplier",