deposit from onboarding flow
This commit is contained in:
parent
fcbe40029d
commit
1f3b88a079
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue