deposit from onboarding flow

components/forms/Input.tsx

@@ -34,7 +34,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         </div>
       ) : null}
       <input
-        className={`${className} h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
+        className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
           text-th-fgd-1 ${
             error ? 'border-th-red' : 'border-th-bkg-4'
           } hover:border-th-fgd-4 

components/modals/UserSetupModal.tsx

@@ -10,15 +10,16 @@ import Button, { LinkButton } from '../shared/Button'
 import InlineNotification from '../shared/InlineNotification'
 import Modal from '../shared/Modal'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
-import { CheckCircleIcon } from '@heroicons/react/solid'
+import { CheckCircleIcon, PencilIcon } from '@heroicons/react/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { handleWalletConnect } from '../../utils/wallet'
 import mangoStore from '../../store/state'
 import { IS_ONBOARDED_KEY } from '../Layout'
 import DepositTokenList from '../shared/DepositTokenList'
-import { EnterRightExitLeft } from '../shared/Transitions'
+import { EnterRightExitLeft, FadeInFadeOut } from '../shared/Transitions'
 import Image from 'next/image'
 import BounceLoader from '../shared/BounceLoader'
+import { notify } from '../../utils/notifications'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
@@ -30,7 +31,9 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const [showSetupStep, setShowSetupStep] = useState(0)
   // const [acceptRisks, setAcceptRisks] = useState(false)
   const [depositToken, setDepositToken] = useState('')
-  const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+  const [depositAmount, setDepositAmount] = useState('')
+  const [submitDeposit, setSubmitDeposit] = useState(false)
+  const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
 
   const handleNextStep = () => {
     setShowSetupStep(showSetupStep + 1)
@@ -42,13 +45,6 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
     setShowSetupStep(2)
   }
 
-  const handleDeposit = () => {
-    // deposit funds then:
-
-    setIsOnboarded(true)
-    onClose()
-  }
-
   const handleEndOnboarding = () => {
     setIsOnboarded(true)
     onClose()
@@ -66,6 +62,44 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
     }
   }, [mangoAccount])
 
+  const handleDeposit = async () => {
+    const client = mangoStore.getState().client
+    const group = mangoStore.getState().group
+    const actions = mangoStore.getState().actions
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+
+    if (!mangoAccount || !group) return
+
+    try {
+      setSubmitDeposit(true)
+      const tx = await client.tokenDeposit(
+        group,
+        mangoAccount,
+        depositToken,
+        parseFloat(depositAmount)
+      )
+      notify({
+        title: 'Transaction confirmed',
+        type: 'success',
+        txid: tx,
+      })
+
+      await actions.reloadAccount()
+      setIsOnboarded(true)
+      onClose()
+      setSubmitDeposit(false)
+    } catch (e: any) {
+      notify({
+        title: 'Transaction failed',
+        description: e.message,
+        txid: e?.txid,
+        type: 'error',
+      })
+      setSubmitDeposit(false)
+      console.log('Error depositing:', e)
+    }
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} hideClose>
       <div className="absolute top-0 left-0 flex h-0.5 w-full flex-grow bg-th-bkg-4">
@@ -235,26 +269,70 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
           show={showSetupStep === 3}
           style={{ height: 'calc(100% - 12px)' }}
         >
-          <div className="flex h-full flex-col justify-between">
-            <div>
-              <div className="pb-4">
-                <h2 className="mb-1">Fund Your Account</h2>
+          {submitDeposit ? (
+            <div className="flex h-full items-center justify-center">
+              <BounceLoader />
+            </div>
+          ) : (
+            <div className="flex h-full flex-col justify-between">
+              <div>
+                <h2 className="mb-4">Fund Your Account</h2>
+                <FadeInFadeOut className="relative" show={!!depositToken}>
+                  <Label text="Amount" />
+                  <div className="grid grid-cols-2">
+                    <button
+                      className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1 px-4 hover:bg-th-bkg-2"
+                      onClick={() => setDepositToken('')}
+                    >
+                      <div className="ml-1.5 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-1.5 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>
+                    <Input
+                      className="col-span-1 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"
+                      type="text"
+                      name="deposit"
+                      id="deposit"
+                      placeholder="0.00"
+                      value={depositAmount}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setDepositAmount(e.target.value)
+                      }
+                    />
+                  </div>
+                </FadeInFadeOut>
+                {!depositToken ? (
+                  <div className="absolute top-16 mt-2">
+                    <DepositTokenList onSelect={setDepositToken} />
+                  </div>
+                ) : null}
+              </div>
+              <div className="flex flex-col items-center">
+                <Button
+                  className="mb-4 w-full"
+                  disabled={!depositAmount || !depositToken}
+                  onClick={handleDeposit}
+                  size="large"
+                >
+                  Deposit
+                </Button>
+                <LinkButton onClick={handleEndOnboarding}>
+                  Skip for now
+                </LinkButton>
               </div>
-              <DepositTokenList onSelect={setDepositToken} />
             </div>
-            <div className="flex flex-col items-center">
-              <Button
-                onClick={handleDeposit}
-                className="mb-4 w-full"
-                size="large"
-              >
-                Deposit
-              </Button>
-              <LinkButton onClick={handleEndOnboarding}>
-                Skip for now
-              </LinkButton>
-            </div>
-          </div>
+          )}
         </EnterRightExitLeft>
       </div>
     </Modal>

components/shared/DepositTokenList.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'next-i18next'
 import mangoStore from '../../store/state'
 import DepositTokenItem from './DepositTokenItem'
+import { FadeInList } from './Transitions'
 
 const DepositTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
   const { t } = useTranslation('common')
@@ -24,12 +25,10 @@ const DepositTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
         </div>
       </div>
       <div className="space-y-2">
-        {banks.map((bank) => (
-          <DepositTokenItem
-            bank={bank.value}
-            key={bank.value.name}
-            onSelect={onSelect}
-          />
+        {banks.map((bank, index) => (
+          <FadeInList index={index} key={bank.value.name}>
+            <DepositTokenItem bank={bank.value} onSelect={onSelect} />
+          </FadeInList>
         ))}
       </div>
     </>

components/shared/Transitions.tsx

@@ -92,9 +92,12 @@ export const FadeInList = ({
     appear={true}
     as={as}
     show={true}
-    enter={`transition-all ease-in duration-300`}
+    enter={transitionEnterStyle}
     enterFrom="opacity-0"
     enterTo="opacity-100"
+    leave={transitionExitStyle}
+    leaveFrom="opacity-100"
+    leaveTo="opacity-0"
     style={{ transitionDelay: `${index * 300}ms` }}
   >
     {children}