withdraw modal ui

2022-07-24 15:45:11 +10:00 · 2022-07-24 15:45:11 +10:00 · 69caf3eb00
parent e5e691d9a4
commit 69caf3eb00
12 changed files with 240 additions and 57 deletions
--- a/components/modals/DepositModal.tsx
+++ b/components/modals/DepositModal.tsx
@ -74,7 +74,7 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
        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">Select Token</h2>
+        <h2 className="mb-4 text-center">{t('select-token')}</h2>
        <DepositTokenList onSelect={handleSelectToken} />
      </EnterBottomExitBottom>
      <FadeInFadeOut
@ -83,7 +83,7 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
      >
        <div>
          <h2 className="mb-4 text-center">{t('deposit')}</h2>
-          <div className="mb-4 grid grid-cols-2">
+          <div className="grid grid-cols-2 pb-6">
            <div className="col-span-2 flex justify-between">
              <Label text={t('token')} />
              <LinkButton
@ -132,22 +132,24 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
          <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="font-bold text-th-green">+12%</p>
+              <p className="text-th-green">+12%</p>
            </div>
            <div className="flex justify-between">
              <p>{t('deposit-value')}</p>
-              <p className="font-bold text-th-fgd-1">$1,000.00</p>
+              <p className="text-th-fgd-1">$1,000.00</p>
            </div>
            <div className="flex justify-between">
              <div className="flex items-center">
-                <p>{t('collateral-multiplier', { token: selectedToken })}</p>
+                <p>
+                  {t('token-collateral-multiplier', { token: selectedToken })}
+                </p>
                <InfoTooltip content={t('collateral-multiplier-desc')} />
              </div>
-              <p className="font-bold text-th-fgd-1">0.8x</p>
+              <p className="text-th-fgd-1">0.8x</p>
            </div>
            <div className="flex justify-between">
              <p>{t('collateral-value')}</p>
-              <p className="font-bold text-th-fgd-1">$800.00</p>
+              <p className="text-th-fgd-1">$800.00</p>
            </div>
          </div>
        </div>
--- a/components/modals/WithdrawModal.tsx
+++ b/components/modals/WithdrawModal.tsx
@ -1,16 +1,25 @@
-import { useState } from 'react'
+import { ChevronDownIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import { ChangeEvent, useState } from 'react'

 import mangoStore from '../../store/state'
 import { ModalProps } from '../../types/modal'
 import { notify } from '../../utils/notifications'
-import Button from '../shared/Button'
+import Input from '../forms/Input'
+import Label from '../forms/Label'
+import Button, { LinkButton } from '../shared/Button'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
+import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
+import WithdrawTokenList from '../shared/WithdrawTokenList'

 function WithdrawModal({ isOpen, onClose }: ModalProps) {
+  const { t } = useTranslation('common')
  const [inputAmount, setInputAmount] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [selectedToken, setSelectedToken] = useState('USDC')
+  const [showTokenList, setShowTokenList] = useState(false)

  const handleWithdraw = async () => {
    const client = mangoStore.getState().client
@ -46,14 +55,73 @@ function WithdrawModal({ isOpen, onClose }: ModalProps) {
    }
  }

-  const handleTokenSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedToken(e.target.value)
+  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>
+        <WithdrawTokenList onSelect={handleSelectToken} />
+      </EnterBottomExitBottom>
+      <FadeInFadeOut
+        className="flex h-96 flex-col justify-between"
+        show={isOpen}
+      >
        <div>
-        <div className="relative mt-1 rounded-md shadow-sm">
+          <h2 className="mb-4 text-center">{t('withdraw')}</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('available-balance')}
+                </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="withdraw"
+                id="withdraw"
+                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="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
@ -79,13 +147,29 @@ function WithdrawModal({ isOpen, onClose }: ModalProps) {
            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>
+              <p className="text-th-red">-12%</p>
+            </div>
+            <div className="flex justify-between">
+              <p>{t('withdrawal-value')}</p>
+              <p className="text-th-fgd-1">$1,000.00</p>
+            </div>
          </div>
        </div>
        <div className="mt-4 flex justify-center">
-        <Button onClick={handleWithdraw} className="flex items-center">
-          {submitting ? <Loading className="mr-2 h-5 w-5" /> : null} Withdraw
+          <Button
+            onClick={handleWithdraw}
+            className="flex w-full items-center justify-center"
+            size="large"
+            disabled={!inputAmount}
+          >
+            {submitting ? <Loading className="mr-2 h-5 w-5" /> : t('withdraw')}
          </Button>
        </div>
+      </FadeInFadeOut>
    </Modal>
  )
 }
--- a/components/shared/DepositTokenItem.tsx
+++ b/components/shared/DepositTokenItem.tsx
@ -12,7 +12,7 @@ const DepositTokenItem = ({
  const { name } = bank
  return (
    <button
-      className="grid w-full grid-cols-3 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
+      className="grid w-full grid-cols-3 gap-4 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
      onClick={() => onSelect(name)}
    >
      <div className="col-span-1 flex items-center">
@ -24,7 +24,7 @@ const DepositTokenItem = ({
            src={`/icons/${name.toLowerCase()}.svg`}
          />
        </div>
-        <p className="font-bold text-th-fgd-1">{name}</p>
+        <p className="text-th-fgd-1">{name}</p>
      </div>
      <div className="col-span-1 flex justify-end">
        <p className="text-th-green">
@ -32,7 +32,7 @@ const DepositTokenItem = ({
        </p>
      </div>
      <div className="col-span-1 flex justify-end">
-        <p className="text-th-fgd-1">100%</p>
+        <p className="text-th-fgd-1">0.8x</p>
      </div>
    </button>
  )
--- a/components/shared/DepositTokenList.tsx
+++ b/components/shared/DepositTokenList.tsx
@ -1,22 +1,26 @@
+import { useTranslation } from 'next-i18next'
 import mangoStore from '../../store/state'
 import DepositTokenItem from './DepositTokenItem'

 const DepositTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
+  const { t } = useTranslation('common')
  const group = mangoStore((s) => s.group)
  const banks = group?.banksMap
    ? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
    : []
  return (
    <>
-      <div className="grid grid-cols-3 px-4 pb-2">
+      <div className="grid grid-cols-3 gap-4 px-4 pb-2">
        <div className="col-span-1">
-          <p className="text-xs">Token</p>
+          <p className="text-xs">{t('token')}</p>
        </div>
        <div className="col-span-1 flex justify-end">
-          <p className="text-xs">Deposit Rate (APR)</p>
+          <p className="text-xs">{t('rate')}</p>
        </div>
        <div className="col-span-1 flex justify-end">
-          <p className="text-xs">Collateral Weight</p>
+          <p className="whitespace-nowrap text-xs">
+            {t('collateral-multiplier')}
+          </p>
        </div>
      </div>
      <div className="space-y-2">
--- a/components/shared/WithdrawTokenItem.tsx
+++ b/components/shared/WithdrawTokenItem.tsx
@ -0,0 +1,36 @@
+import { Bank } from '@blockworks-foundation/mango-v4'
+import Image from 'next/image'
+import { formatDecimal } from '../../utils/numbers'
+
+const WithdrawTokenItem = ({
+  bank,
+  onSelect,
+}: {
+  bank: Bank
+  onSelect: (x: any) => void
+}) => {
+  const { name } = bank
+  return (
+    <button
+      className="grid w-full grid-cols-2 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
+      onClick={() => onSelect(name)}
+    >
+      <div className="col-span-1 flex items-center">
+        <div className="mr-2.5 flex flex-shrink-0 items-center">
+          <Image
+            alt=""
+            width="24"
+            height="24"
+            src={`/icons/${name.toLowerCase()}.svg`}
+          />
+        </div>
+        <p className="text-th-fgd-1">{name}</p>
+      </div>
+      <div className="col-span-1 flex justify-end">
+        <p className="text-th-fgd-1">0</p>
+      </div>
+    </button>
+  )
+}
+
+export default WithdrawTokenItem
--- a/components/shared/WithdrawTokenList.tsx
+++ b/components/shared/WithdrawTokenList.tsx
@ -0,0 +1,35 @@
+import { useTranslation } from 'next-i18next'
+import mangoStore from '../../store/state'
+import DepositTokenItem from './DepositTokenItem'
+import WithdrawTokenItem from './WithdrawTokenItem'
+
+const WithdrawTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
+  const { t } = useTranslation('common')
+  const group = mangoStore((s) => s.group)
+  const banks = group?.banksMap
+    ? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
+    : []
+  return (
+    <>
+      <div className="grid grid-cols-2 px-4 pb-2">
+        <div className="col-span-1">
+          <p className="text-xs">{t('token')}</p>
+        </div>
+        <div className="col-span-1 flex justify-end">
+          <p className="text-xs">{t('available-balance')}</p>
+        </div>
+      </div>
+      <div className="space-y-2">
+        {banks.map((bank) => (
+          <WithdrawTokenItem
+            bank={bank.value}
+            key={bank.value.name}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default WithdrawTokenList
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@ -182,8 +182,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                <>
                  <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                    <FlipNumbers
-                      height={36}
-                      width={24}
+                      height={40}
+                      width={26}
                      play
                      delay={0.025}
                      duration={1}
@ -214,8 +214,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                <>
                  <div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
                    <FlipNumbers
-                      height={36}
-                      width={24}
+                      height={40}
+                      width={26}
                      play
                      numbers={formatFixedDecimals(
                        chartData[chartData.length - 1]['price']
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -32,21 +32,21 @@ const Index: NextPage = () => {
          <p className="mb-1">{t('account-value')}</p>
          <div className="flex items-center text-5xl font-bold text-th-fgd-1">
            $
+            {mangoAccount ? (
              <FlipNumbers
                height={48}
                width={32}
-              play={mangoAccount}
+                play
                delay={0.05}
                duration={1}
-              numbers={
-                mangoAccount
-                  ? formatDecimal(
+                numbers={formatDecimal(
                  toUiDecimals(mangoAccount.getEquity().toNumber()),
                  2
-                    )
-                  : (0).toFixed(2)
-              }
+                )}
              />
+            ) : (
+              (0).toFixed(2)
+            )}
          </div>
          {/* <div className="text-5xl font-bold text-th-fgd-1">
            $
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -1,10 +1,11 @@
 {
   "account-value": "Account Value",
+   "available-balance": "Available Balance",
   "balance": "Balance",
   "borrow": "Borrow",
   "buy": "Buy",
   "close-account": "Close Account",
-   "collateral-multiplier": "{{token}} Collateral Multiplier",
+   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
@ -25,13 +26,18 @@
   "more": "More",
   "portfolio": "Portfolio",
   "price": "Price",
+   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
   "rolling-change": "24h Change",
+   "select-token": "Select Token",
   "sell": "Sell",
   "settings": "Settings",
   "stats": "Stats",
   "token": "Token",
+   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "trade": "Trade",
   "wallet-balance": "Wallet Balance",
-   "withdraw": "Withdraw"
+   "withdraw": "Withdraw",
+   "withdrawal-value": "Withdrawal Value"
 }
+ 
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -1,10 +1,11 @@
 {
   "account-value": "Account Value",
+   "available-balance": "Available Balance",
   "balance": "Balance",
   "borrow": "Borrow",
   "buy": "Buy",
   "close-account": "Close Account",
-   "collateral-multiplier": "{{token}} Collateral Multiplier",
+   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
@ -25,13 +26,18 @@
   "more": "More",
   "portfolio": "Portfolio",
   "price": "Price",
+   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
   "rolling-change": "24h Change",
+   "select-token": "Select Token",
   "sell": "Sell",
   "settings": "Settings",
   "stats": "Stats",
   "token": "Token",
+   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "trade": "Trade",
   "wallet-balance": "Wallet Balance",
-   "withdraw": "Withdraw"
+   "withdraw": "Withdraw",
+   "withdrawal-value": "Withdrawal Value"
 }
+ 
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -1,10 +1,11 @@
 {
    "account-value": "Account Value",
+    "available-balance": "Available Balance",
    "balance": "Balance",
    "borrow": "Borrow",
    "buy": "Buy",
    "close-account": "Close Account",
-    "collateral-multiplier": "{{token}} Collateral Multiplier",
+    "collateral-multiplier": "Collateral Multiplier",
    "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
    "collateral-value": "Collateral Value",
    "connect": "Connect",
@ -25,14 +26,18 @@
    "more": "More",
    "portfolio": "Portfolio",
    "price": "Price",
+    "rate": "Rate (APR)",
    "rates": "Rates (APR)",
    "rolling-change": "24h Change",
+    "select-token": "Select Token",
    "sell": "Sell",
    "settings": "Settings",
    "stats": "Stats",
    "token": "Token",
+    "token-collateral-multiplier": "{{token}} Collateral Multiplier",
    "trade": "Trade",
    "wallet-balance": "Wallet Balance",
-    "withdraw": "Withdraw"
+    "withdraw": "Withdraw",
+    "withdrawal-value": "Withdrawal Value"
  }
  
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -1,10 +1,11 @@
 {
  "account-value": "Account Value",
+  "available-balance": "Available Balance",
  "balance": "Balance",
  "borrow": "Borrow",
  "buy": "Buy",
  "close-account": "Close Account",
-  "collateral-multiplier": "{{token}} Collateral Multiplier",
+  "collateral-multiplier": "Collateral Multiplier",
  "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
  "collateral-value": "Collateral Value",
  "connect": "Connect",
@ -25,13 +26,17 @@
  "more": "More",
  "portfolio": "Portfolio",
  "price": "Price",
+  "rate": "Rate (APR)",
  "rates": "Rates (APR)",
  "rolling-change": "24h Change",
+  "select-token": "Select Token",
  "sell": "Sell",
  "settings": "Settings",
  "stats": "Stats",
  "token": "Token",
+  "token-collateral-multiplier": "{{token}} Collateral Multiplier",
  "trade": "Trade",
  "wallet-balance": "Wallet Balance",
-  "withdraw": "Withdraw"
+  "withdraw": "Withdraw",
+  "withdrawal-value": "Withdrawal Value"
 }