make onboarding transitions smoother

components/BorrowForm.tsx

@@ -8,10 +8,7 @@ import {
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useMemo, useState } from 'react'
-import NumberFormat, {
+import NumberFormat from 'react-number-format'
-  NumberFormatValues,
-  SourceInfo,
-} from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import {
   ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
@@ -43,6 +40,7 @@ import { isMangoError } from 'types'
 import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
+import { handleInputChange } from 'utils/account'
 
 interface BorrowFormProps {
   onSuccess: () => void
@@ -155,13 +153,6 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
     }
   }, [bank, inputAmount, onSuccess, publicKey])
 
-  const handleInputChange = (e: NumberFormatValues, info: SourceInfo) => {
-    if (info.source === 'event') {
-      setSizePercentage('')
-    }
-    setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
-  }
-
   const initHealth = useMemo(() => {
     return group && mangoAccount
       ? mangoAccount.getHealthRatioUi(group, HealthType.init)
@@ -245,7 +236,14 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={handleInputChange}
+                  onValueChange={(values, source) =>
+                    handleInputChange(
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
+                    )
+                  }
                   isAllowed={withValueLimit}
                 />
               </div>

components/DepositForm.tsx

@@ -6,7 +6,7 @@ import {
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import {
   ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
@@ -38,6 +38,7 @@ import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useTokenPositionsFull from 'hooks/useTokenPositionsFull'
 import AccountSlotsFullNotification from './shared/AccountSlotsFullNotification'
+import { handleInputChange } from 'utils/account'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -246,11 +247,14 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                   className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
+                  onValueChange={(values, source) =>
-                    setInputAmount(
+                    handleInputChange(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                     )
-                  }}
+                  }
                   isAllowed={withValueLimit}
                 />
               </div>

components/RepayForm.tsx

@@ -3,7 +3,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat from 'react-number-format'
 import mangoStore from '@store/mangoStore'
 import { notify } from './../utils/notifications'
 import { formatNumericValue } from './../utils/numbers'
@@ -30,6 +30,7 @@ import TokenListButton from './shared/TokenListButton'
 import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 import TokenLogo from './shared/TokenLogo'
 import InlineNotification from './shared/InlineNotification'
+import { handleInputChange } from 'utils/account'
 
 interface RepayFormProps {
   onSuccess: () => void
@@ -235,11 +236,14 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
                   className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
+                  onValueChange={(values, source) =>
-                    setInputAmount(
+                    handleInputChange(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                     )
-                  }}
+                  }
                   isAllowed={withValueLimit}
                 />
               </div>

components/WithdrawForm.tsx

@@ -7,7 +7,7 @@ import {
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
 import { useCallback, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat from 'react-number-format'
 
 import mangoStore from '@store/mangoStore'
 import {
@@ -38,6 +38,7 @@ import TokenListButton from './shared/TokenListButton'
 import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
+import { handleInputChange } from 'utils/account'
 
 interface WithdrawFormProps {
   onSuccess: () => void
@@ -237,9 +238,12 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
                   className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                   placeholder="0.00"
                   value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) =>
+                  onValueChange={(values, source) =>
-                    setInputAmount(
+                    handleInputChange(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                     )
                   }
                   isAllowed={withValueLimit}

components/modals/UserSetupModal.tsx

@@ -35,7 +35,7 @@ import Loading from '../shared/Loading'
 import MaxAmountButton from '../shared/MaxAmountButton'
 import SolBalanceWarnings from '../shared/SolBalanceWarnings'
 import Modal from '../shared/Modal'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import NumberFormat from 'react-number-format'
 import { withValueLimit } from '@components/swap/MarketSwapForm'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
@@ -51,6 +51,8 @@ import { usePlausible } from 'next-plausible'
 import { TelemetryEvents } from 'utils/telemetry'
 import { waitForSlot } from 'utils/network'
 import Checkbox from '@components/forms/Checkbox'
+import { handleInputChange } from 'utils/account'
+import BounceLoader from '@components/shared/BounceLoader'
 
 const UserSetupModal = ({
   isOpen,
@@ -283,19 +285,26 @@ const UserSetupModal = ({
           />
         </div>
         <div className="relative z-10 col-span-1 flex flex-col items-center justify-center p-6 pt-24">
-          <UserSetupTransition show={showSetupStep === 0}>
+          {connected && mangoAccountLoading ? (
-            <h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl lg:max-w-[400px]">
+            <div className="flex h-full flex-col items-center justify-center">
-              {t('onboarding:intro-heading')}
+              <BounceLoader loadingMessage="Connecting to Mango..." />
-            </h2>
-            <p className="text-base sm:mb-2 lg:text-lg">
-              {t('onboarding:intro-desc')}
-            </p>
-            <div className="mb-3 space-y-2 py-3">
-              <CheckBullet text={t('onboarding:bullet-1')} />
-              <CheckBullet text={t('onboarding:bullet-2')} />
-              <CheckBullet text={t('onboarding:bullet-3')} />
             </div>
-            {/* <div className="mb-4 rounded-md bg-th-bkg-2 p-4">
+          ) : (
+            <>
+              {showSetupStep === 0 ? (
+                <UserSetupTransition show={showSetupStep === 0}>
+                  <h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl lg:max-w-[400px]">
+                    {t('onboarding:intro-heading')}
+                  </h2>
+                  <p className="text-base sm:mb-2 lg:text-lg">
+                    {t('onboarding:intro-desc')}
+                  </p>
+                  <div className="mb-3 space-y-2 py-3">
+                    <CheckBullet text={t('onboarding:bullet-1')} />
+                    <CheckBullet text={t('onboarding:bullet-2')} />
+                    <CheckBullet text={t('onboarding:bullet-3')} />
+                  </div>
+                  {/* <div className="mb-4 rounded-md bg-th-bkg-2 p-4">
               <div className="flex items-center space-x-4">
                 <Image
                   src="/images/rewards/chest.png"
@@ -312,244 +321,250 @@ const UserSetupModal = ({
                 </div>
               </div>
             </div> */}
-            <div className="mb-8 flex items-center space-x-2">
+                  <div className="mb-8 flex items-center space-x-2">
-              <Checkbox
+                    <Checkbox
-                checked={termsAccepted}
+                      checked={termsAccepted}
-                onChange={(e) => setTermsAccepted(e.target.checked)}
+                      onChange={(e) => setTermsAccepted(e.target.checked)}
-              >
-                <p className="flex flex-wrap">
-                  <span className="mr-1">{t('accept-terms-desc')}</span>
-                  <a
-                    className="flex items-center"
-                    href="https://docs.mango.markets/legal/terms-of-use"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {t('terms-of-use')}
-                    <ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
-                  </a>
-                  <span className="mx-1">and</span>
-                  <a
-                    className="flex items-center"
-                    href="https://docs.mango.markets/mango-markets/risks"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {t('risks')}
-                    <ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
-                  </a>
-                </p>
-              </Checkbox>
-            </div>
-            <Button
-              className="mb-12"
-              disabled={!termsAccepted}
-              onClick={handleNextStep}
-              size="large"
-            >
-              {t('agree-and-continue')}
-            </Button>
-          </UserSetupTransition>
-          <UserSetupTransition delay show={showSetupStep === 1}>
-            {showSetupStep === 1 ? (
-              <div>
-                <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
-                  {t('onboarding:connect-wallet')}
-                </h2>
-                <p className="mb-2 text-base">
-                  {t('onboarding:choose-wallet')}
-                </p>
-                <div className="space-y-2">
-                  {walletsDisplayed?.map((w) => (
-                    <button
-                      className={`col-span-1 w-full rounded-md border px-4 py-3 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
-                        w.adapter.name === wallet?.adapter.name
-                          ? 'border-th-active text-th-fgd-1 md:hover:border-th-active'
-                          : 'border-th-bkg-4 text-th-fgd-2'
-                      }`}
-                      onClick={() => {
-                        if (wallet) {
-                          connect()
-                        }
-                        select(w.adapter.name)
-                      }}
-                      key={w.adapter.name}
                     >
-                      <div className="flex items-center justify-between">
+                      <p className="flex flex-wrap">
-                        <div className="flex items-center">
+                        <span className="mr-1">{t('accept-terms-desc')}</span>
-                          <img
+                        <a
-                            src={w.adapter.icon}
+                          className="flex items-center"
-                            className="mr-2 h-5 w-5"
+                          href="https://docs.mango.markets/legal/terms-of-use"
-                            alt={`${w.adapter.name} icon`}
+                          rel="noopener noreferrer"
-                          />
+                          target="_blank"
-                          <div className="ml-2">{w.adapter.name}</div>
+                        >
-                        </div>
+                          {t('terms-of-use')}
-                        {w.readyState === WalletReadyState.Installed ||
+                          <ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
-                        w.readyState === WalletReadyState.Loadable ? (
+                        </a>
-                          <div className="text-xs">Detected</div>
+                        <span className="mx-1">and</span>
-                        ) : null}
+                        <a
-                      </div>
+                          className="flex items-center"
-                    </button>
+                          href="https://docs.mango.markets/mango-markets/risks"
-                  ))}
+                          rel="noopener noreferrer"
-                </div>
+                          target="_blank"
-                {walletsToDisplay !== 'all' ? (
+                        >
-                  <button
+                          {t('risks')}
-                    className="mt-4 flex w-full items-center justify-center text-base text-th-fgd-3 hover:text-th-fgd-1"
+                          <ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
-                    onClick={() => setWalletstoDisplay('all')}
+                        </a>
+                      </p>
+                    </Checkbox>
+                  </div>
+                  <Button
+                    className="mb-12"
+                    disabled={!termsAccepted}
+                    onClick={handleNextStep}
+                    size="large"
                   >
-                    <div>More</div>
+                    {t('agree-and-continue')}
-                    <div>
+                  </Button>
-                      <ChevronDownIcon className={`h-5 w-5 flex-shrink-0`} />
+                </UserSetupTransition>
-                    </div>
+              ) : null}
-                  </button>
+              {showSetupStep === 1 ? (
-                ) : null}
+                <UserSetupTransition show={showSetupStep === 1}>
-              </div>
-            ) : null}
-          </UserSetupTransition>
-          <UserSetupTransition delay show={showSetupStep === 2}>
-            {!mangoAccountLoading ? (
-              <div>
-                <div className="pb-6">
-                  <h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl">
-                    {t('onboarding:create-account')}
-                  </h2>
-                  <p className="text-base">{t('insufficient-sol')}</p>
-                </div>
-                <div className="mb-4">
-                  <Label text={t('account-name')} optional />
-                  <Input
-                    type="text"
-                    name="name"
-                    id="name"
-                    placeholder="e.g. Main Account"
-                    value={accountName}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      setAccountName(e.target.value)
-                    }
-                    maxLength={30}
-                  />
-                </div>
-                <SolBalanceWarnings className="mt-4" />
-                <div className="flex items-center justify-between rounded-md border border-th-bkg-3 px-3 py-2">
                   <div>
-                    <p className="text-th-fgd-2">{t('enable-notifications')}</p>
+                    <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
-                    <p className="text-xs">{t('asked-sign-transaction')}</p>
+                      {t('onboarding:connect-wallet')}
-                  </div>
+                    </h2>
-                  <Switch
+                    <p className="mb-2 text-base">
-                    className="text-th-fgd-3"
+                      {t('onboarding:choose-wallet')}
-                    checked={signToNotifications}
+                    </p>
-                    onChange={(checked) => setSignToNotifications(checked)}
+                    <div className="space-y-2">
-                  />
+                      {walletsDisplayed?.map((w) => (
-                </div>
+                        <button
-                <div className="space-y-3">
+                          className={`col-span-1 w-full rounded-md border px-4 py-3 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
-                  <div className="mt-10">
+                            w.adapter.name === wallet?.adapter.name
-                    <Button
+                              ? 'border-th-active text-th-fgd-1 md:hover:border-th-active'
-                      className="mb-6 flex items-center justify-center"
+                              : 'border-th-bkg-4 text-th-fgd-2'
-                      disabled={maxSolDeposit <= 0}
+                          }`}
-                      onClick={handleCreateAccount}
+                          onClick={() => {
-                      size="large"
+                            if (wallet) {
-                    >
+                              connect()
-                      {loadingNewAccount ? (
+                            }
-                        <Loading />
+                            select(w.adapter.name)
-                      ) : (
+                          }}
-                        <div className="flex items-center justify-center">
+                          key={w.adapter.name}
-                          {t('create-account')}
+                        >
-                        </div>
+                          <div className="flex items-center justify-between">
-                      )}
+                            <div className="flex items-center">
-                    </Button>
+                              <img
-                    <LinkButton onClick={onClose}>
+                                src={w.adapter.icon}
-                      {t('onboarding:skip')}
+                                className="mr-2 h-5 w-5"
-                    </LinkButton>
+                                alt={`${w.adapter.name} icon`}
-                  </div>
+                              />
-                </div>
+                              <div className="ml-2">{w.adapter.name}</div>
-              </div>
+                            </div>
-            ) : (
+                            {w.readyState === WalletReadyState.Installed ||
-              <Loading />
+                            w.readyState === WalletReadyState.Loadable ? (
-            )}
+                              <div className="text-xs">Detected</div>
-          </UserSetupTransition>
+                            ) : null}
-          <UserSetupTransition delay show={showSetupStep === 3}>
-            {showSetupStep === 3 ? (
-              <div className="relative">
-                <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
-                  {t('onboarding:fund-account')}
-                </h2>
-                {depositToken ? (
-                  <>
-                    <div className="mb-4">
-                      <SolBalanceWarnings
-                        amount={depositAmount}
-                        className="mt-4"
-                        setAmount={setDepositAmount}
-                        selectedToken={depositToken}
-                      />
-                    </div>
-                    <div className="flex justify-between">
-                      <Label text={t('amount')} />
-                      <MaxAmountButton
-                        className="mb-2"
-                        decimals={tokenMax.decimals}
-                        label="Max"
-                        onClick={setMax}
-                        value={tokenMax.amount}
-                      />
-                    </div>
-                    <div className="mb-6 grid grid-cols-2">
-                      <button
-                        className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg px-4"
-                        onClick={() => setDepositToken('')}
-                      >
-                        <div className="flex w-full items-center justify-between">
-                          <div className="flex items-center">
-                            <Image
-                              alt=""
-                              width="20"
-                              height="20"
-                              src={`/icons/${depositToken.toLowerCase()}.svg`}
-                            />
-                            <p className="ml-2 text-xl font-bold text-th-fgd-1">
-                              {depositToken}
-                            </p>
                           </div>
-                          <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
+                        </button>
+                      ))}
+                    </div>
+                    {walletsToDisplay !== 'all' ? (
+                      <button
+                        className="mt-4 flex w-full items-center justify-center text-base text-th-fgd-3 hover:text-th-fgd-1"
+                        onClick={() => setWalletstoDisplay('all')}
+                      >
+                        <div>More</div>
+                        <div>
+                          <ChevronDownIcon
+                            className={`h-5 w-5 flex-shrink-0`}
+                          />
                         </div>
                       </button>
-                      <NumberFormat
+                    ) : null}
-                        name="amountIn"
+                  </div>
-                        id="amountIn"
+                </UserSetupTransition>
-                        inputMode="decimal"
+              ) : null}
-                        thousandSeparator=","
+              {showSetupStep === 2 ? (
-                        allowNegative={false}
+                <UserSetupTransition show={showSetupStep === 2}>
-                        isNumericString={true}
+                  <div>
-                        decimalScale={tokenMax.decimals || 6}
+                    <div className="pb-6">
-                        className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
+                      <h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl">
-                        placeholder="0.00"
+                        {t('onboarding:create-account')}
-                        value={depositAmount}
+                      </h2>
-                        onValueChange={(e: NumberFormatValues) => {
+                      <p className="text-base">{t('insufficient-sol')}</p>
-                          setDepositAmount(
+                    </div>
-                            !Number.isNaN(Number(e.value)) ? e.value : '',
+                    <div className="mb-4">
-                          )
+                      <Label text={t('account-name')} optional />
-                        }}
+                      <Input
-                        isAllowed={withValueLimit}
+                        type="text"
+                        name="name"
+                        id="name"
+                        placeholder="e.g. Main Account"
+                        value={accountName}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                          setAccountName(e.target.value)
+                        }
+                        maxLength={30}
                       />
-                      <div className="col-span-2 mt-2">
+                    </div>
-                        <ButtonGroup
+                    <SolBalanceWarnings className="mt-4" />
-                          activeValue={sizePercentage}
+                    <div className="flex items-center justify-between rounded-md border border-th-bkg-3 px-3 py-2">
-                          onChange={(p) => handleSizePercentage(p)}
+                      <div>
-                          values={['10', '25', '50', '75', '100']}
+                        <p className="text-th-fgd-2">
-                          unit="%"
+                          {t('enable-notifications')}
-                        />
+                        </p>
+                        <p className="text-xs">{t('asked-sign-transaction')}</p>
+                      </div>
+                      <Switch
+                        className="text-th-fgd-3"
+                        checked={signToNotifications}
+                        onChange={(checked) => setSignToNotifications(checked)}
+                      />
+                    </div>
+                    <div className="space-y-3">
+                      <div className="mt-10">
+                        <Button
+                          className="mb-6 flex items-center justify-center"
+                          disabled={maxSolDeposit <= 0}
+                          onClick={handleCreateAccount}
+                          size="large"
+                        >
+                          {loadingNewAccount ? (
+                            <Loading />
+                          ) : (
+                            <div className="flex items-center justify-center">
+                              {t('create-account')}
+                            </div>
+                          )}
+                        </Button>
+                        <LinkButton onClick={onClose}>
+                          {t('onboarding:skip')}
+                        </LinkButton>
                       </div>
                     </div>
-                    {depositBank ? (
+                  </div>
-                      <div className="border-y border-th-bkg-3">
+                </UserSetupTransition>
-                        <div className="flex justify-between px-2 py-4">
+              ) : null}
-                          <p>{t('deposit-amount')}</p>
+              <UserSetupTransition show={showSetupStep === 3}>
-                          <p className="font-mono text-th-fgd-2">
+                {showSetupStep === 3 ? (
-                            <BankAmountWithValue
+                  <div className="relative">
-                              amount={depositAmount}
+                    <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
-                              bank={depositBank}
+                      {t('onboarding:fund-account')}
+                    </h2>
+                    {depositToken ? (
+                      <>
+                        <div className="mb-4">
+                          <SolBalanceWarnings
+                            amount={depositAmount}
+                            className="mt-4"
+                            setAmount={setDepositAmount}
+                            selectedToken={depositToken}
+                          />
+                        </div>
+                        <div className="flex justify-between">
+                          <Label text={t('amount')} />
+                          <MaxAmountButton
+                            className="mb-2"
+                            decimals={tokenMax.decimals}
+                            label="Max"
+                            onClick={setMax}
+                            value={tokenMax.amount}
+                          />
+                        </div>
+                        <div className="mb-6 grid grid-cols-2">
+                          <button
+                            className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg px-4"
+                            onClick={() => setDepositToken('')}
+                          >
+                            <div className="flex w-full items-center justify-between">
+                              <div className="flex items-center">
+                                <Image
+                                  alt=""
+                                  width="20"
+                                  height="20"
+                                  src={`/icons/${depositToken.toLowerCase()}.svg`}
+                                />
+                                <p className="ml-2 text-xl font-bold text-th-fgd-1">
+                                  {depositToken}
+                                </p>
+                              </div>
+                              <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
+                            </div>
+                          </button>
+                          <NumberFormat
+                            name="amountIn"
+                            id="amountIn"
+                            inputMode="decimal"
+                            thousandSeparator=","
+                            allowNegative={false}
+                            isNumericString={true}
+                            decimalScale={tokenMax.decimals || 6}
+                            className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
+                            placeholder="0.00"
+                            value={depositAmount}
+                            onValueChange={(values, source) =>
+                              handleInputChange(
+                                values,
+                                source,
+                                setDepositAmount,
+                                setSizePercentage,
+                              )
+                            }
+                            isAllowed={withValueLimit}
+                          />
+                          <div className="col-span-2 mt-2">
+                            <ButtonGroup
+                              activeValue={sizePercentage}
+                              onChange={(p) => handleSizePercentage(p)}
+                              values={['10', '25', '50', '75', '100']}
+                              unit="%"
                             />
-                            {/* {depositAmount ? (
+                          </div>
+                        </div>
+                        {depositBank ? (
+                          <div className="border-y border-th-bkg-3">
+                            <div className="flex justify-between px-2 py-4">
+                              <p>{t('deposit-amount')}</p>
+                              <p className="font-mono text-th-fgd-2">
+                                <BankAmountWithValue
+                                  amount={depositAmount}
+                                  bank={depositBank}
+                                />
+                                {/* {depositAmount ? (
                             <>
                               <FormatNumericValue
                                 value={depositAmount}
@@ -575,69 +590,71 @@ const UserSetupModal = ({
                               </span>
                             </>
                           )} */}
-                          </p>
+                              </p>
+                            </div>
+                          </div>
+                        ) : null}
+                        <Button
+                          className="mb-6 mt-10 flex items-center justify-center"
+                          disabled={
+                            !depositAmount ||
+                            !depositToken ||
+                            showInsufficientBalance
+                          }
+                          onClick={handleDeposit}
+                          size="large"
+                        >
+                          {submitDeposit ? (
+                            <Loading />
+                          ) : showInsufficientBalance ? (
+                            <div className="flex items-center">
+                              <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                              {t('swap:insufficient-balance', {
+                                symbol: depositToken,
+                              })}
+                            </div>
+                          ) : (
+                            <div className="flex items-center justify-center">
+                              <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
+                              {t('deposit')}
+                            </div>
+                          )}
+                        </Button>
+                        <LinkButton onClick={onClose}>
+                          {t('onboarding:skip')}
+                        </LinkButton>
+                      </>
+                    ) : (
+                      <div
+                        className="thin-scroll w-full overflow-auto"
+                        style={{ height: 'calc(100vh - 380px)' }}
+                      >
+                        <div className="flex items-center px-4 pb-2">
+                          <div className="w-1/4">
+                            <p className="text-xs">{t('token')}</p>
+                          </div>
+                          <div className="w-1/4 text-right">
+                            <p className="text-xs">{t('deposit-rate')}</p>
+                          </div>
+                          <div className="w-1/2 text-right">
+                            <p className="whitespace-nowrap text-xs">
+                              {t('wallet-balance')}
+                            </p>
+                          </div>
                         </div>
+                        <ActionTokenList
+                          banks={banks}
+                          onSelect={setDepositToken}
+                          showDepositRates
+                          valueKey="walletBalance"
+                        />
                       </div>
-                    ) : null}
+                    )}
-                    <Button
-                      className="mb-6 mt-10 flex items-center justify-center"
-                      disabled={
-                        !depositAmount ||
-                        !depositToken ||
-                        showInsufficientBalance
-                      }
-                      onClick={handleDeposit}
-                      size="large"
-                    >
-                      {submitDeposit ? (
-                        <Loading />
-                      ) : showInsufficientBalance ? (
-                        <div className="flex items-center">
-                          <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-                          {t('swap:insufficient-balance', {
-                            symbol: depositToken,
-                          })}
-                        </div>
-                      ) : (
-                        <div className="flex items-center justify-center">
-                          <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
-                          {t('deposit')}
-                        </div>
-                      )}
-                    </Button>
-                    <LinkButton onClick={onClose}>
-                      {t('onboarding:skip')}
-                    </LinkButton>
-                  </>
-                ) : (
-                  <div
-                    className="thin-scroll w-full overflow-auto"
-                    style={{ height: 'calc(100vh - 380px)' }}
-                  >
-                    <div className="flex items-center px-4 pb-2">
-                      <div className="w-1/4">
-                        <p className="text-xs">{t('token')}</p>
-                      </div>
-                      <div className="w-1/4 text-right">
-                        <p className="text-xs">{t('deposit-rate')}</p>
-                      </div>
-                      <div className="w-1/2 text-right">
-                        <p className="whitespace-nowrap text-xs">
-                          {t('wallet-balance')}
-                        </p>
-                      </div>
-                    </div>
-                    <ActionTokenList
-                      banks={banks}
-                      onSelect={setDepositToken}
-                      showDepositRates
-                      valueKey="walletBalance"
-                    />
                   </div>
-                )}
+                ) : null}
-              </div>
+              </UserSetupTransition>
-            ) : null}
+            </>
-          </UserSetupTransition>
+          )}
         </div>
         <div className="relative col-span-1 hidden h-screen lg:block">
           {/* <ParticlesBackground /> */}
@@ -677,7 +694,7 @@ const UserSetupTransition = ({
   return (
     <Transition
       appear
-      className="h-full w-full max-w-md"
+      className="relative top-0 h-full w-full max-w-md"
       show={show}
       enter={`transition ease-in duration-300 ${delay ? 'delay-300' : ''}`}
       enterFrom="opacity-0"

hooks/useBanksWithBalances.ts

@@ -5,7 +5,6 @@ import mangoStore from '@store/mangoStore'
 import { useMemo } from 'react'
 import useMangoAccount from './useMangoAccount'
 import useMangoGroup from './useMangoGroup'
-import { floorToDecimal } from 'utils/numbers'
 import Decimal from 'decimal.js'
 
 export interface BankWithBalance {
@@ -87,7 +86,7 @@ export default function useBanksWithBalances(
       return sortedBanks
     }
     return []
-  }, [group, mangoAccount])
+  }, [group, mangoAccount, walletTokens])
 
   return banks
 }

utils/account.ts

@@ -11,6 +11,7 @@ import {
 import { MANGO_DATA_API_URL } from './constants'
 import dayjs from 'dayjs'
 import Decimal from 'decimal.js'
+import { NumberFormatValues, SourceInfo } from 'react-number-format'
 
 export const fetchAccountPerformance = async (
   mangoAccountPk: string,
@@ -185,3 +186,15 @@ export const fetchFilledOrders = async (
     console.log('Failed to fetch filled orders', e)
   }
 }
+
+export const handleInputChange = (
+  e: NumberFormatValues,
+  info: SourceInfo,
+  setInputAmount: (amt: string) => void,
+  setSizePercentage: (pct: string) => void,
+) => {
+  if (info.source === 'event') {
+    setSizePercentage('')
+  }
+  setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
+}