move error messages into buttons

2022-08-26 10:27:05 +10:00 · 2022-08-26 10:27:05 +10:00 · b70394263c
parent 647454dc50
commit b70394263c
8 changed files with 63 additions and 43 deletions
--- a/components/modals/BorrowModal.tsx
+++ b/components/modals/BorrowModal.tsx
@ -4,7 +4,7 @@ import {
  MangoAccount,
  toUiDecimals,
 } from '@blockworks-foundation/mango-v4'
-import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import React, { ChangeEvent, useCallback, useMemo, useState } from 'react'
@ -149,6 +149,8 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
    return []
  }, [mangoAccount, group])

+  const showInsufficientBalance = tokenMax < Number(inputAmount)
+
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <EnterBottomExitBottom
@ -251,10 +253,19 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
        <Button
          onClick={handleWithdraw}
          className="flex w-full items-center justify-center"
-          disabled={!inputAmount}
+          disabled={!inputAmount || showInsufficientBalance}
          size="large"
        >
-          {submitting ? <Loading className="mr-2 h-5 w-5" /> : t('borrow')}
+          {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('trade:insufficient-collateral')}
+            </div>
+          ) : (
+            t('borrow')
+          )}
        </Button>
      </FadeInFadeOut>
    </Modal>
--- a/components/modals/DepositModal.tsx
+++ b/components/modals/DepositModal.tsx
@ -1,5 +1,5 @@
 import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
-import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
 import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
@ -177,6 +177,8 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
    )
  }, [inputAmount])

+  const showInsufficientBalance = tokenMax.maxAmount < Number(inputAmount)
+
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <EnterBottomExitBottom
@ -304,24 +306,23 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
            onClick={handleDeposit}
            className="mt-6 flex w-full items-center justify-center"
            disabled={
-              !inputAmount ||
-              exceedsAlphaMax ||
-              tokenMax.maxAmount < Number(inputAmount)
+              !inputAmount || exceedsAlphaMax || showInsufficientBalance
            }
            size="large"
          >
-            {submitting ? <Loading className="mr-2 h-5 w-5" /> : t('deposit')}
-          </Button>
-          {tokenMax.maxAmount < Number(inputAmount) ? (
-            <div className="pt-4">
-              <InlineNotification
-                type="error"
-                desc={t('trade:insufficient-balance', {
+            {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('trade:insufficient-balance', {
                  symbol: selectedToken,
                })}
-              />
-            </div>
-          ) : null}
+              </div>
+            ) : (
+              t('deposit')
+            )}
+          </Button>
        </div>
      </FadeInFadeOut>
    </Modal>
--- a/components/modals/WithdrawModal.tsx
+++ b/components/modals/WithdrawModal.tsx
@ -1,5 +1,5 @@
 import { Bank, Group, MangoAccount } from '@blockworks-foundation/mango-v4'
-import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
 import { PublicKey } from '@solana/web3.js'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
@ -153,6 +153,8 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
    return []
  }, [mangoAccount, group])

+  const showInsufficientBalance = tokenMax < Number(inputAmount)
+
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <div className="h-[420px]">
@ -250,25 +252,22 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
              onClick={handleWithdraw}
              className="flex w-full items-center justify-center"
              size="large"
-              disabled={!inputAmount || Number(inputAmount) > tokenMax}
+              disabled={!inputAmount || showInsufficientBalance}
            >
              {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('trade:insufficient-balance', {
+                    symbol: selectedToken,
+                  })}
+                </div>
              ) : (
                t('withdraw')
              )}
            </Button>
          </div>
-          {Number(inputAmount) > tokenMax ? (
-            <div className="pt-4">
-              <InlineNotification
-                type="error"
-                desc={t('trade:insufficient-balance', {
-                  symbol: selectedToken,
-                })}
-              />
-            </div>
-          ) : null}
        </FadeInFadeOut>
      </div>
    </Modal>
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@ -1,6 +1,11 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
 import { PublicKey } from '@solana/web3.js'
-import { ArrowDownIcon, ArrowRightIcon, CogIcon } from '@heroicons/react/solid'
+import {
+  ArrowDownIcon,
+  ArrowRightIcon,
+  CogIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/solid'
 import { RouteInfo } from '@jup-ag/core'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import Decimal from 'decimal.js'
@ -26,7 +31,6 @@ import {
  INPUT_TOKEN_DEFAULT,
  OUTPUT_TOKEN_DEFAULT,
 } from '../../utils/constants'
-import InlineNotification from '../shared/InlineNotification'

 const MAX_DIGITS = 11
 const withValueLimit = (values: NumberFormatValues): boolean => {
@ -181,6 +185,10 @@ const SwapForm = () => {

  const showHealthImpact = !!inputTokenInfo && !!outputTokenInfo && !!amountOut

+  const showInsufficientBalance =
+    (!useMargin && amountIn.toNumber() > tokenMax) ||
+    (useMargin && amountIn.toNumber() > amountWithBorrow)
+
  return (
    <ContentBox hidePadding showBackground className="relative overflow-hidden">
      <div className="p-6">
@ -333,12 +341,19 @@ const SwapForm = () => {
            !routes?.length ||
            !selectedRoute ||
            !outputTokenInfo ||
-            (!useMargin && amountIn.toNumber() > tokenMax)
+            showInsufficientBalance
          }
          size="large"
        >
          {connected ? (
-            isLoadingTradeDetails ? (
+            showInsufficientBalance ? (
+              <div className="flex items-center">
+                <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                {t('trade:insufficient-balance', {
+                  symbol: inputTokenInfo?.symbol,
+                })}
+              </div>
+            ) : isLoadingTradeDetails ? (
              <Loading />
            ) : (
              <div className="flex items-center">{t('trade:review-trade')}</div>
@ -347,16 +362,6 @@ const SwapForm = () => {
            t('connect')
          )}
        </Button>
-        {!useMargin && amountIn.toNumber() > tokenMax ? (
-          <div className="pt-4">
-            <InlineNotification
-              type="error"
-              desc={t('trade:insufficient-balance', {
-                symbol: inputTokenInfo?.symbol,
-              })}
-            />
-          </div>
-        ) : null}
      </div>

      {!!mangoAccount ? (
--- a/public/locales/en/trade.json
+++ b/public/locales/en/trade.json
@ -4,6 +4,7 @@
    "fees-paid-to": "Fees Paid to {{route}}",
    "health-impact": "Health Impact",
    "insufficient-balance": "Insufficient {{symbol}} Balance",
+    "insufficient-collateral": "Insufficient Collateral",
    "minimum-received": "Minimum Received",
    "rate": "Rate",
    "review-trade": "Review Trade",
--- a/public/locales/es/trade.json
+++ b/public/locales/es/trade.json
@ -4,6 +4,7 @@
    "fees-paid-to": "Fees Paid to {{route}}",
    "health-impact": "Health Impact",
    "insufficient-balance": "Insufficient {{symbol}} Balance",
+    "insufficient-collateral": "Insufficient Collateral",
    "minimum-received": "Minimum Received",
    "rate": "Rate",
    "review-trade": "Review Trade",
--- a/public/locales/zh/trade.json
+++ b/public/locales/zh/trade.json
@ -4,6 +4,7 @@
    "fees-paid-to": "Fees Paid to {{route}}",
    "health-impact": "Health Impact",
    "insufficient-balance": "Insufficient {{symbol}} Balance",
+    "insufficient-collateral": "Insufficient Collateral",
    "minimum-received": "Minimum Received",
    "rate": "Rate",
    "review-trade": "Review Trade",
--- a/public/locales/zh_tw/trade.json
+++ b/public/locales/zh_tw/trade.json
@ -4,6 +4,7 @@
    "fees-paid-to": "Fees Paid to {{route}}",
    "health-impact": "Health Impact",
    "insufficient-balance": "Insufficient {{symbol}} Balance",
+    "insufficient-collateral": "Insufficient Collateral",
    "minimum-received": "Minimum Received",
    "rate": "Rate",
    "review-trade": "Review Trade",