make onboarding transitions smoother

2023-12-07 10:26:30 +11:00 · 2023-12-07 10:26:30 +11:00 · 0566345311
parent 814d76430a
commit 0566345311
7 changed files with 369 additions and 330 deletions
--- a/components/BorrowForm.tsx
+++ b/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, {
-  NumberFormatValues,
-  SourceInfo,
-} from 'react-number-format'
+import NumberFormat 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>
--- a/components/DepositForm.tsx
+++ b/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) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                  onValueChange={(values, source) =>
+                    handleInputChange(
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                    )
-                  }}
+                  }
                  isAllowed={withValueLimit}
                />
              </div>
--- a/components/RepayForm.tsx
+++ b/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) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                  onValueChange={(values, source) =>
+                    handleInputChange(
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                    )
-                  }}
+                  }
                  isAllowed={withValueLimit}
                />
              </div>
--- a/components/WithdrawForm.tsx
+++ b/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) =>
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                  onValueChange={(values, source) =>
+                    handleInputChange(
+                      values,
+                      source,
+                      setInputAmount,
+                      setSizePercentage,
                    )
                  }
                  isAllowed={withValueLimit}
--- a/components/modals/UserSetupModal.tsx
+++ b/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,6 +285,13 @@ const UserSetupModal = ({
          />
        </div>
        <div className="relative z-10 col-span-1 flex flex-col items-center justify-center p-6 pt-24">
+          {connected && mangoAccountLoading ? (
+            <div className="flex h-full flex-col items-center justify-center">
+              <BounceLoader loadingMessage="Connecting to Mango..." />
+            </div>
+          ) : (
+            <>
+              {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')}
@ -350,8 +359,9 @@ const UserSetupModal = ({
                    {t('agree-and-continue')}
                  </Button>
                </UserSetupTransition>
-          <UserSetupTransition delay show={showSetupStep === 1}>
+              ) : null}
              {showSetupStep === 1 ? (
+                <UserSetupTransition show={showSetupStep === 1}>
                  <div>
                    <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
                      {t('onboarding:connect-wallet')}
@ -399,15 +409,17 @@ const UserSetupModal = ({
                      >
                        <div>More</div>
                        <div>
-                      <ChevronDownIcon className={`h-5 w-5 flex-shrink-0`} />
+                          <ChevronDownIcon
+                            className={`h-5 w-5 flex-shrink-0`}
+                          />
                        </div>
                      </button>
                    ) : null}
                  </div>
-            ) : null}
                </UserSetupTransition>
-          <UserSetupTransition delay show={showSetupStep === 2}>
-            {!mangoAccountLoading ? (
+              ) : null}
+              {showSetupStep === 2 ? (
+                <UserSetupTransition show={showSetupStep === 2}>
                  <div>
                    <div className="pb-6">
                      <h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl">
@ -432,7 +444,9 @@ const UserSetupModal = ({
                    <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>
+                        <p className="text-th-fgd-2">
+                          {t('enable-notifications')}
+                        </p>
                        <p className="text-xs">{t('asked-sign-transaction')}</p>
                      </div>
                      <Switch
@ -463,11 +477,9 @@ const UserSetupModal = ({
                      </div>
                    </div>
                  </div>
-            ) : (
-              <Loading />
-            )}
                </UserSetupTransition>
-          <UserSetupTransition delay show={showSetupStep === 3}>
+              ) : null}
+              <UserSetupTransition show={showSetupStep === 3}>
                {showSetupStep === 3 ? (
                  <div className="relative">
                    <h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl">
@ -524,11 +536,14 @@ const UserSetupModal = ({
                            className={ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES}
                            placeholder="0.00"
                            value={depositAmount}
-                        onValueChange={(e: NumberFormatValues) => {
-                          setDepositAmount(
-                            !Number.isNaN(Number(e.value)) ? e.value : '',
+                            onValueChange={(values, source) =>
+                              handleInputChange(
+                                values,
+                                source,
+                                setDepositAmount,
+                                setSizePercentage,
                              )
-                        }}
+                            }
                            isAllowed={withValueLimit}
                          />
                          <div className="col-span-2 mt-2">
@ -638,6 +653,8 @@ const UserSetupModal = ({
                  </div>
                ) : 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"
--- a/hooks/useBanksWithBalances.ts
+++ b/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
 }
--- a/utils/account.ts
+++ b/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 : '')
+}