2022-07-20 21:50:56 -07:00
|
|
|
import { Transition } from '@headlessui/react'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-07-21 22:09:04 -07:00
|
|
|
import { ChangeEvent, useEffect, useState } from 'react'
|
2022-07-20 21:50:56 -07:00
|
|
|
import { ModalProps } from '../../types/modal'
|
|
|
|
import { PROFILE_CATEGORIES } from '../../utils/profile'
|
|
|
|
import Input from '../forms/Input'
|
|
|
|
import Label from '../forms/Label'
|
|
|
|
import Select from '../forms/Select'
|
|
|
|
import Button, { LinkButton } from '../shared/Button'
|
|
|
|
import InlineNotification from '../shared/InlineNotification'
|
|
|
|
import Modal from '../shared/Modal'
|
|
|
|
import useLocalStorageState from '../../hooks/useLocalStorageState'
|
2022-07-21 22:09:04 -07:00
|
|
|
import Checkbox from '../forms/Checkbox'
|
|
|
|
import { CheckCircleIcon } from '@heroicons/react/solid'
|
|
|
|
import WalletSelect from '../wallet/WalletSelect'
|
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
|
|
import { handleWalletConnect } from '../../utils/wallet'
|
|
|
|
import mangoStore from '../../store/state'
|
|
|
|
import Image from 'next/image'
|
|
|
|
import { formatDecimal } from '../../utils/numbers'
|
|
|
|
import { IS_ONBOARDED_KEY } from '../shared/Layout'
|
2022-07-20 21:50:56 -07:00
|
|
|
|
|
|
|
const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
|
|
|
const { t } = useTranslation()
|
2022-07-21 22:09:04 -07:00
|
|
|
const { connected, wallet } = useWallet()
|
|
|
|
const group = mangoStore((s) => s.group)
|
|
|
|
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
2022-07-20 21:50:56 -07:00
|
|
|
const [profileName, setProfileName] = useState('')
|
|
|
|
const [accountName, setAccountName] = useState('')
|
|
|
|
const [profileCategory, setProfileCategory] = useState('')
|
2022-07-21 22:09:04 -07:00
|
|
|
const [showSetupStep, setShowSetupStep] = useState(0)
|
|
|
|
const [acceptRisks, setAcceptRisks] = useState(false)
|
|
|
|
const [depositToken, setDepositToken] = useState('')
|
|
|
|
const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
|
|
|
|
|
|
|
const banks = group?.banksMap
|
|
|
|
? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
|
|
|
|
: []
|
|
|
|
|
|
|
|
const handleNextStep = () => {
|
|
|
|
setShowSetupStep(showSetupStep + 1)
|
|
|
|
}
|
2022-07-20 21:50:56 -07:00
|
|
|
|
|
|
|
const handleSaveProfile = () => {
|
2022-07-21 22:09:04 -07:00
|
|
|
// save profile details to db then:
|
|
|
|
|
|
|
|
setShowSetupStep(3)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleCreateAccount = () => {
|
|
|
|
// create account then:
|
2022-07-20 21:50:56 -07:00
|
|
|
|
2022-07-21 22:09:04 -07:00
|
|
|
setShowSetupStep(4)
|
2022-07-20 21:50:56 -07:00
|
|
|
}
|
|
|
|
|
2022-07-21 22:09:04 -07:00
|
|
|
const handleDeposit = () => {
|
|
|
|
// deposit funds then:
|
|
|
|
|
|
|
|
setIsOnboarded(true)
|
|
|
|
onClose()
|
2022-07-20 21:50:56 -07:00
|
|
|
}
|
|
|
|
|
2022-07-21 22:09:04 -07:00
|
|
|
const handleEndOnboarding = () => {
|
|
|
|
setIsOnboarded(true)
|
2022-07-20 21:50:56 -07:00
|
|
|
onClose()
|
|
|
|
}
|
|
|
|
|
2022-07-21 22:09:04 -07:00
|
|
|
const connectWallet = () => {
|
|
|
|
if (wallet) {
|
|
|
|
handleWalletConnect(wallet)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (connected && mangoAccount) {
|
|
|
|
onClose()
|
|
|
|
}
|
|
|
|
if (connected && !mangoAccount) {
|
|
|
|
setShowSetupStep(2)
|
|
|
|
}
|
|
|
|
}, [mangoAccount, connected])
|
|
|
|
|
2022-07-20 21:50:56 -07:00
|
|
|
return (
|
|
|
|
<Modal isOpen={isOpen} onClose={onClose} hideClose>
|
2022-07-22 04:22:35 -07:00
|
|
|
<div className="flex h-1 flex-grow rounded bg-th-bkg-4">
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: `${(showSetupStep / 4) * 100}%`,
|
|
|
|
}}
|
|
|
|
className="default-transition flex rounded bg-th-fgd-4"
|
|
|
|
></div>
|
|
|
|
</div>
|
|
|
|
<p className="mt-1.5 flex justify-end text-xs">
|
|
|
|
Step {showSetupStep + 1}/5
|
|
|
|
</p>
|
|
|
|
<div className="h-[392px]">
|
2022-07-21 22:09:04 -07:00
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="absolute top-14 left-0 z-20 h-full w-full bg-th-bkg-1 p-6 pt-0"
|
2022-07-21 22:09:04 -07:00
|
|
|
show={showSetupStep === 0}
|
|
|
|
enter="transition-all ease-in duration-500"
|
|
|
|
enterFrom="opacity-0"
|
|
|
|
enterTo="opacity-100"
|
|
|
|
leave="transition-all ease-out duration-500"
|
|
|
|
leaveFrom="transform translate-x-0"
|
|
|
|
leaveTo="transform -translate-x-full"
|
|
|
|
>
|
|
|
|
<h2 className="mb-1">Welcome.</h2>
|
|
|
|
<p className="mb-4">
|
|
|
|
You're seconds away from trading the most liquid dex markets on
|
|
|
|
Solana.
|
2022-07-20 21:50:56 -07:00
|
|
|
</p>
|
2022-07-21 22:09:04 -07:00
|
|
|
<div className="mb-6 space-y-2 border-y border-th-bkg-4 py-4">
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<CheckCircleIcon className="h-5 w-5 text-th-green" />
|
|
|
|
<p className="text-th-fgd-1">Trusted by 1,000s of DeFi users</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<CheckCircleIcon className="h-5 w-5 text-th-green" />
|
|
|
|
<p className="text-th-fgd-1">Deeply liquid markets</p>
|
2022-07-20 21:50:56 -07:00
|
|
|
</div>
|
2022-07-21 22:09:04 -07:00
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<CheckCircleIcon className="h-5 w-5 text-th-green" />
|
|
|
|
<p className="text-th-fgd-1">
|
|
|
|
Up to 20x leverage across 100s of tokens
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<CheckCircleIcon className="h-5 w-5 text-th-green" />
|
|
|
|
<p className="text-th-fgd-1">Earn interest on your deposits</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<CheckCircleIcon className="h-5 w-5 text-th-green" />
|
|
|
|
<p className="text-th-fgd-1">
|
|
|
|
Borrow 100s of tokens with many collateral options
|
|
|
|
</p>
|
2022-07-20 21:50:56 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-21 22:09:04 -07:00
|
|
|
<Button className="w-full" onClick={handleNextStep} size="large">
|
|
|
|
Let's Go
|
|
|
|
</Button>
|
|
|
|
</Transition>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="absolute top-14 left-0 z-20 w-full bg-th-bkg-1 p-6 pt-0"
|
2022-07-21 22:09:04 -07:00
|
|
|
show={showSetupStep === 1}
|
|
|
|
enter="transition-all ease-in duration-500"
|
|
|
|
enterFrom="transform translate-x-full"
|
|
|
|
enterTo="transform translate-x-0"
|
|
|
|
leave="transition-all ease-out duration-500"
|
|
|
|
leaveFrom="transform translate-x-0"
|
|
|
|
leaveTo="transform -translate-x-full"
|
2022-07-22 04:22:35 -07:00
|
|
|
style={{ height: 'calc(100% - 64px)' }}
|
2022-07-21 22:09:04 -07:00
|
|
|
>
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
|
|
<div>
|
|
|
|
<h2 className="mb-4">Choose Wallet</h2>
|
|
|
|
<div className="thin-scroll max-h-56 overflow-y-auto">
|
|
|
|
<WalletSelect />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<Button className="w-full" onClick={connectWallet} size="large">
|
|
|
|
Connect
|
2022-07-20 21:50:56 -07:00
|
|
|
</Button>
|
|
|
|
</div>
|
2022-07-21 22:09:04 -07:00
|
|
|
</Transition>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="absolute top-14 left-0 z-20 w-full bg-th-bkg-1 p-6 pt-0"
|
2022-07-21 22:09:04 -07:00
|
|
|
show={showSetupStep === 2}
|
|
|
|
enter="transition-all ease-in duration-500"
|
|
|
|
enterFrom="transform translate-x-full"
|
|
|
|
enterTo="transform translate-x-0"
|
|
|
|
leave="transition-all ease-out duration-500"
|
|
|
|
leaveFrom="transform translate-x-0"
|
|
|
|
leaveTo="transform -translate-x-full"
|
2022-07-22 04:22:35 -07:00
|
|
|
style={{ height: 'calc(100% - 64px)' }}
|
2022-07-21 22:09:04 -07:00
|
|
|
>
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
|
|
<div>
|
|
|
|
<div className="pb-4">
|
|
|
|
<h2 className="mb-1">Create Profile</h2>
|
|
|
|
<p>Your public facing identity on Mango...</p>
|
|
|
|
</div>
|
|
|
|
<div className="pb-4">
|
|
|
|
<Label text="Profile Name" />
|
|
|
|
<Input
|
|
|
|
type="text"
|
|
|
|
value={profileName}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
setProfileName(e.target.value)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="pb-6">
|
|
|
|
<Label text="Profile Category" />
|
|
|
|
<Select
|
|
|
|
value={profileCategory}
|
|
|
|
onChange={(cat: string) => setProfileCategory(cat)}
|
|
|
|
className="w-full"
|
|
|
|
>
|
|
|
|
{PROFILE_CATEGORIES.map((cat) => (
|
|
|
|
<Select.Option key={cat} value={cat}>
|
|
|
|
{cat}
|
|
|
|
</Select.Option>
|
|
|
|
))}
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center">
|
|
|
|
<Button
|
2022-07-22 04:22:35 -07:00
|
|
|
className="mb-4 w-full"
|
2022-07-21 22:09:04 -07:00
|
|
|
onClick={handleSaveProfile}
|
|
|
|
size="large"
|
|
|
|
>
|
|
|
|
Save Profile
|
|
|
|
</Button>
|
|
|
|
<LinkButton onClick={handleNextStep}>Skip for now</LinkButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Transition>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="absolute top-14 left-0 z-20 w-full bg-th-bkg-1 p-6 pt-0"
|
2022-07-21 22:09:04 -07:00
|
|
|
show={showSetupStep === 3}
|
|
|
|
enter="transition-all ease-in duration-500"
|
|
|
|
enterFrom="transform translate-x-full"
|
|
|
|
enterTo="transform translate-x-0"
|
|
|
|
leave="transition-all ease-out duration-500"
|
|
|
|
leaveFrom="transform translate-x-0"
|
|
|
|
leaveTo="transform -translate-x-full"
|
2022-07-22 04:22:35 -07:00
|
|
|
style={{ height: 'calc(100% - 64px)' }}
|
2022-07-21 22:09:04 -07:00
|
|
|
>
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
|
|
<div>
|
|
|
|
<div className="pb-4">
|
|
|
|
<h2 className="mb-1">Account Setup</h2>
|
|
|
|
<p>You need a Mango Account to DeFi on Mango</p>
|
|
|
|
</div>
|
|
|
|
<div className="pb-4">
|
|
|
|
{/* Not sure if we need to name the first account or if every users first account should have the same name "Main Account" or something similar */}
|
|
|
|
|
|
|
|
<Label text="Account Name" optional />
|
|
|
|
<Input
|
|
|
|
type="text"
|
|
|
|
value={accountName}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
setAccountName(e.target.value)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<InlineNotification type="info" desc={t('insufficient-sol')} />
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
<Button
|
|
|
|
className="w-full"
|
|
|
|
onClick={handleCreateAccount}
|
|
|
|
size="large"
|
|
|
|
>
|
|
|
|
Create Account
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Transition>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="absolute top-14 left-0 z-20 w-full bg-th-bkg-1 p-6 pt-0"
|
2022-07-21 22:09:04 -07:00
|
|
|
show={showSetupStep === 4}
|
|
|
|
enter="transition-all ease-in duration-500"
|
|
|
|
enterFrom="transform translate-x-full"
|
|
|
|
enterTo="transform translate-x-0"
|
|
|
|
leave="transition-all ease-out duration-500"
|
|
|
|
leaveFrom="transform translate-x-0"
|
|
|
|
leaveTo="transform -translate-x-full"
|
2022-07-22 04:22:35 -07:00
|
|
|
style={{ height: 'calc(100% - 64px)' }}
|
2022-07-21 22:09:04 -07:00
|
|
|
>
|
|
|
|
<div className="flex h-full flex-col justify-between">
|
|
|
|
<div>
|
|
|
|
<div className="pb-4">
|
2022-07-22 04:22:35 -07:00
|
|
|
<h2 className="mb-1">Fund Your Account</h2>
|
2022-07-21 22:09:04 -07:00
|
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 px-4 pb-2">
|
|
|
|
<div className="col-span-1">
|
|
|
|
<p className="text-xs">Token</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-1 flex justify-end">
|
|
|
|
<p className="text-xs">Deposit Rate (APR)</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-1 flex justify-end">
|
|
|
|
<p className="text-xs">Collateral Weight</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="space-y-2 pb-6">
|
|
|
|
{banks.map((bank) => (
|
|
|
|
<button className="grid w-full grid-cols-3 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4">
|
|
|
|
<div className="col-span-1 flex items-center">
|
|
|
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
|
|
|
<Image
|
|
|
|
alt=""
|
|
|
|
width="24"
|
|
|
|
height="24"
|
|
|
|
src={`/icons/${bank.value.name.toLowerCase()}.svg`}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<p className="font-bold text-th-fgd-1">
|
|
|
|
{bank.value.name}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-1 flex justify-end">
|
|
|
|
<p className="text-th-green">
|
|
|
|
{formatDecimal(
|
|
|
|
bank.value.getDepositRate().toNumber(),
|
|
|
|
2
|
|
|
|
)}
|
|
|
|
%
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-1 flex justify-end">
|
|
|
|
<p className="text-th-fgd-1">100%</p>
|
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center">
|
|
|
|
<Button
|
|
|
|
onClick={handleDeposit}
|
2022-07-22 04:22:35 -07:00
|
|
|
className="mb-4 w-full"
|
2022-07-21 22:09:04 -07:00
|
|
|
size="large"
|
|
|
|
>
|
|
|
|
Deposit
|
|
|
|
</Button>
|
|
|
|
<LinkButton onClick={handleEndOnboarding}>
|
|
|
|
Skip for now
|
|
|
|
</LinkButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
2022-07-20 21:50:56 -07:00
|
|
|
</Modal>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default UserSetupModal
|