Merge pull request #42 from blockworks-foundation/alpha-updates
alpha updates
This commit is contained in:
tylersssss
GitHub
commit
16611f2eea
|
|
@ -4,6 +4,7 @@ import {
|
|||
ArrowUpLeftIcon,
|
||||
ChevronDownIcon,
|
||||
ExclamationCircleIcon,
|
||||
LinkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import Decimal from 'decimal.js'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -33,6 +34,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
|
|||
import useJupiterMints from 'hooks/useJupiterMints'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
|
||||
interface BorrowFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -51,6 +53,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const { connected } = useWallet()
|
||||
|
||||
const bank = useMemo(() => {
|
||||
const group = mangoStore.getState().group
|
||||
|
|
@ -314,10 +317,15 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
<Button
|
||||
onClick={handleWithdraw}
|
||||
className="flex w-full items-center justify-center"
|
||||
disabled={!inputAmount || showInsufficientBalance}
|
||||
disabled={!inputAmount || showInsufficientBalance || !connected}
|
||||
size="large"
|
||||
>
|
||||
{submitting ? (
|
||||
{!connected ? (
|
||||
<div className="flex items-center">
|
||||
<LinkIcon className="mr-2 h-5 w-5" />
|
||||
{t('connect')}
|
||||
</div>
|
||||
) : submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
ArrowLeftIcon,
|
||||
ChevronDownIcon,
|
||||
ExclamationCircleIcon,
|
||||
LinkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Wallet } from '@project-serum/anchor'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
|
|
@ -89,7 +90,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
return logoURI
|
||||
}, [bank?.mint, mangoTokens])
|
||||
|
||||
const { wallet } = useWallet()
|
||||
const { connected, wallet } = useWallet()
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
||||
const tokenMax = useMemo(() => {
|
||||
|
|
@ -347,11 +348,19 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
onClick={handleDeposit}
|
||||
className="flex w-full items-center justify-center"
|
||||
disabled={
|
||||
!inputAmount || exceedsAlphaMax || showInsufficientBalance
|
||||
!inputAmount ||
|
||||
exceedsAlphaMax ||
|
||||
showInsufficientBalance ||
|
||||
!connected
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
{submitting ? (
|
||||
{!connected ? (
|
||||
<div className="flex items-center">
|
||||
<LinkIcon className="mr-2 h-5 w-5" />
|
||||
{t('connect')}
|
||||
</div>
|
||||
) : submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
ArrowLeftIcon,
|
||||
ChevronDownIcon,
|
||||
ExclamationCircleIcon,
|
||||
LinkIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Wallet } from '@project-serum/anchor'
|
||||
|
|
@ -63,7 +64,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
|
|||
return logoURI
|
||||
}, [bank, mangoTokens])
|
||||
|
||||
const { wallet } = useWallet()
|
||||
const { connected, wallet } = useWallet()
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
||||
const walletBalance = useMemo(() => {
|
||||
|
|
@ -329,6 +330,11 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
|
|||
</Button>
|
||||
</FadeInFadeOut>
|
||||
</>
|
||||
) : !connected ? (
|
||||
<div className="flex h-[356px] flex-col items-center justify-center">
|
||||
<LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||
<p>Connect to repay your borrows</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-[356px] flex-col items-center justify-center">
|
||||
<span className="text-2xl">😎</span>
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ const TokenList = () => {
|
|||
</Th>
|
||||
<Th id="account-step-ten">
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content="The interest rates (per year) for depositing (green/left) and borrowing (red/right).">
|
||||
<Tooltip content="The interest rates for depositing (green/left) and borrowing (red/right).">
|
||||
<span className="tooltip-underline">{t('rates')}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import useLocalStorageState from '../hooks/useLocalStorageState'
|
|||
import CreateAccountModal from './modals/CreateAccountModal'
|
||||
import MangoAccountsListModal from './modals/MangoAccountsListModal'
|
||||
import { useRouter } from 'next/router'
|
||||
import UserSetup from './UserSetup'
|
||||
import UserSetupModal from './modals/UserSetupModal'
|
||||
import SolanaTps from './SolanaTps'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useOnlineStatus from 'hooks/useOnlineStatus'
|
||||
|
|
@ -24,6 +24,8 @@ import { DEFAULT_DELEGATE } from './modals/DelegateModal'
|
|||
import Tooltip from './shared/Tooltip'
|
||||
import { abbreviateAddress } from 'utils/formatting'
|
||||
import DepositWithdrawModal from './modals/DepositWithdrawModal'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
// import ThemeSwitcher from './ThemeSwitcher'
|
||||
|
||||
const TopBar = () => {
|
||||
|
|
@ -31,14 +33,17 @@ const TopBar = () => {
|
|||
const { mangoAccount } = useMangoAccount()
|
||||
const { connected } = useWallet()
|
||||
const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const [showUserSetup, setShowUserSetup] = useState(false)
|
||||
const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit')
|
||||
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
||||
const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
|
||||
const [showUserSetup, setShowUserSetup] = useState(false)
|
||||
const [showDepositWithdrawModal, setShowDepositWithdrawModal] =
|
||||
useState(false)
|
||||
const isOnline = useOnlineStatus()
|
||||
const router = useRouter()
|
||||
const { query } = router
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
|
||||
const handleCloseSetup = useCallback(() => {
|
||||
setShowUserSetup(false)
|
||||
|
|
@ -57,6 +62,15 @@ const TopBar = () => {
|
|||
}
|
||||
}, [mangoAccount])
|
||||
|
||||
const handleDepositWithdrawModal = (action: 'deposit' | 'withdraw') => {
|
||||
if (!connected || mangoAccount) {
|
||||
setAction(action)
|
||||
setShowDepositWithdrawModal(true)
|
||||
} else {
|
||||
setShowCreateAccountModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full items-center justify-between space-x-4">
|
||||
|
|
@ -98,12 +112,13 @@ const TopBar = () => {
|
|||
{/* <div className="px-3 md:px-4">
|
||||
<ThemeSwitcher />
|
||||
</div> */}
|
||||
{!connected && isMobile ? null : (
|
||||
<Button
|
||||
disabled={!connected}
|
||||
onClick={() => setShowDepositWithdrawModal(true)}
|
||||
onClick={() => handleDepositWithdrawModal('deposit')}
|
||||
secondary
|
||||
className="mx-4"
|
||||
>{`${t('deposit')} / ${t('withdraw')}`}</Button>
|
||||
)}
|
||||
{connected ? (
|
||||
<div className="flex items-center pr-4 md:pr-0">
|
||||
<button
|
||||
|
|
@ -153,7 +168,7 @@ const TopBar = () => {
|
|||
</div>
|
||||
{showDepositWithdrawModal ? (
|
||||
<DepositWithdrawModal
|
||||
action="deposit"
|
||||
action={action}
|
||||
isOpen={showDepositWithdrawModal}
|
||||
onClose={() => setShowDepositWithdrawModal(false)}
|
||||
/>
|
||||
|
|
@ -164,7 +179,9 @@ const TopBar = () => {
|
|||
onClose={() => setShowMangoAccountsModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
{showUserSetup ? <UserSetup onClose={handleCloseSetup} /> : null}
|
||||
{showUserSetup ? (
|
||||
<UserSetupModal isOpen={showUserSetup} onClose={handleCloseSetup} />
|
||||
) : null}
|
||||
{showCreateAccountModal ? (
|
||||
<CreateAccountModal
|
||||
isOpen={showCreateAccountModal}
|
||||
|
|
|
|||
|
|
@ -1,607 +0,0 @@
|
|||
import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationCircleIcon,
|
||||
FireIcon,
|
||||
PencilIcon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Wallet } from '@project-serum/anchor'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import Decimal from 'decimal.js'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import useSolBalance from 'hooks/useSolBalance'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import {
|
||||
ChangeEvent,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { ALPHA_DEPOSIT_LIMIT } from 'utils/constants'
|
||||
import { notify } from 'utils/notifications'
|
||||
import { floorToDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import ActionTokenList from './account/ActionTokenList'
|
||||
import ButtonGroup from './forms/ButtonGroup'
|
||||
import Input from './forms/Input'
|
||||
import Label from './forms/Label'
|
||||
import WalletIcon from './icons/WalletIcon'
|
||||
import { walletBalanceForToken } from './DepositForm'
|
||||
import ParticlesBackground from './ParticlesBackground'
|
||||
import EditNftProfilePic from './profile/EditNftProfilePic'
|
||||
import EditProfileForm from './profile/EditProfileForm'
|
||||
import Button, { IconButton, LinkButton } from './shared/Button'
|
||||
import InlineNotification from './shared/InlineNotification'
|
||||
import Loading from './shared/Loading'
|
||||
import MaxAmountButton from './shared/MaxAmountButton'
|
||||
import SolBalanceWarnings from './shared/SolBalanceWarnings'
|
||||
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
|
||||
|
||||
const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
||||
const { t } = useTranslation(['common', 'onboarding', 'swap'])
|
||||
const { group } = useMangoGroup()
|
||||
const { connected, select, wallet, wallets } = useWallet()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||
const [accountName, setAccountName] = useState('')
|
||||
const [loadingAccount, setLoadingAccount] = useState(false)
|
||||
const [showSetupStep, setShowSetupStep] = useState(0)
|
||||
const [depositToken, setDepositToken] = useState('USDC')
|
||||
const [depositAmount, setDepositAmount] = useState('')
|
||||
const [submitDeposit, setSubmitDeposit] = useState(false)
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const [showEditProfilePic, setShowEditProfilePic] = useState(false)
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
const { handleConnect } = useEnhancedWallet()
|
||||
const { maxSolDeposit } = useSolBalance()
|
||||
|
||||
useEffect(() => {
|
||||
if (connected) {
|
||||
setShowSetupStep(2)
|
||||
}
|
||||
}, [connected])
|
||||
|
||||
const handleCreateAccount = useCallback(async () => {
|
||||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
const actions = mangoStore.getState().actions
|
||||
if (!group || !wallet) return
|
||||
setLoadingAccount(true)
|
||||
try {
|
||||
const tx = await client.createMangoAccount(
|
||||
group,
|
||||
0,
|
||||
accountName || 'Account 1',
|
||||
undefined, // tokenCount
|
||||
undefined, // serum3Count
|
||||
8, // perpCount
|
||||
8 // perpOoCount
|
||||
)
|
||||
actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
|
||||
if (tx) {
|
||||
actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent
|
||||
setShowSetupStep(3)
|
||||
notify({
|
||||
title: t('new-account-success'),
|
||||
type: 'success',
|
||||
txid: tx,
|
||||
})
|
||||
}
|
||||
} catch (e: any) {
|
||||
notify({
|
||||
title: t('new-account-failed'),
|
||||
txid: e?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
console.error(e)
|
||||
} finally {
|
||||
setLoadingAccount(false)
|
||||
}
|
||||
}, [accountName, wallet, t])
|
||||
|
||||
const handleDeposit = useCallback(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
|
||||
const bank = group.banksMapByName.get(depositToken)![0]
|
||||
try {
|
||||
setSubmitDeposit(true)
|
||||
const tx = await client.tokenDeposit(
|
||||
group,
|
||||
mangoAccount,
|
||||
bank.mint,
|
||||
parseFloat(depositAmount)
|
||||
)
|
||||
notify({
|
||||
title: 'Transaction confirmed',
|
||||
type: 'success',
|
||||
txid: tx,
|
||||
})
|
||||
|
||||
await actions.reloadMangoAccount()
|
||||
setShowSetupStep(4)
|
||||
setSubmitDeposit(false)
|
||||
} catch (e: any) {
|
||||
notify({
|
||||
title: 'Transaction failed',
|
||||
description: e.message,
|
||||
txid: e?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
setSubmitDeposit(false)
|
||||
console.error(e)
|
||||
}
|
||||
}, [depositAmount, depositToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccount && showSetupStep === 2) {
|
||||
onClose()
|
||||
}
|
||||
}, [mangoAccount, showSetupStep, onClose])
|
||||
|
||||
const banks = useMemo(() => {
|
||||
const banks = group?.banksMapByName
|
||||
? Array.from(group?.banksMapByName, ([key, value]) => {
|
||||
const walletBalance = walletBalanceForToken(walletTokens, key)
|
||||
return {
|
||||
key,
|
||||
value,
|
||||
tokenDecimals: walletBalance.maxDecimals,
|
||||
walletBalance: floorToDecimal(
|
||||
walletBalance.maxAmount,
|
||||
walletBalance.maxDecimals
|
||||
).toNumber(),
|
||||
walletBalanceValue: walletBalance.maxAmount * value?.[0].uiPrice,
|
||||
}
|
||||
})
|
||||
: []
|
||||
return banks
|
||||
}, [group?.banksMapByName, walletTokens])
|
||||
|
||||
const depositBank = useMemo(() => {
|
||||
return banks.find((b) => b.key === depositToken)?.value[0]
|
||||
}, [depositToken, banks])
|
||||
|
||||
const exceedsAlphaMax = useMemo(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
if (!group || !mangoAccount) return
|
||||
if (
|
||||
mangoAccount.owner.toString() ===
|
||||
'8SSLjXBEVk9nesbhi9UMCA32uijbVBUqWoKPPQPTekzt'
|
||||
)
|
||||
return false
|
||||
const accountValue = toUiDecimalsForQuote(
|
||||
mangoAccount.getEquity(group)!.toNumber()
|
||||
)
|
||||
return (
|
||||
parseFloat(depositAmount) * (depositBank?.uiPrice || 1) >
|
||||
ALPHA_DEPOSIT_LIMIT || accountValue > ALPHA_DEPOSIT_LIMIT
|
||||
)
|
||||
}, [depositAmount, depositBank, group])
|
||||
|
||||
const tokenMax = useMemo(() => {
|
||||
const bank = banks.find((bank) => bank.key === depositToken)
|
||||
if (bank) {
|
||||
return { amount: bank.walletBalance, decimals: bank.tokenDecimals }
|
||||
}
|
||||
return { amount: 0, decimals: 0 }
|
||||
}, [banks, depositToken])
|
||||
|
||||
const showInsufficientBalance = tokenMax.amount < Number(depositAmount)
|
||||
|
||||
const handleSizePercentage = useCallback(
|
||||
(percentage: string) => {
|
||||
setSizePercentage(percentage)
|
||||
let amount = new Decimal(tokenMax.amount).mul(percentage).div(100)
|
||||
if (percentage !== '100') {
|
||||
amount = floorToDecimal(amount, tokenMax.decimals)
|
||||
}
|
||||
|
||||
setDepositAmount(amount.toString())
|
||||
},
|
||||
[tokenMax]
|
||||
)
|
||||
|
||||
const handleNextStep = () => {
|
||||
setShowSetupStep(showSetupStep + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="radial-gradient-bg fixed inset-0 z-20 grid overflow-hidden lg:grid-cols-2">
|
||||
<img
|
||||
className="absolute -bottom-6 right-0 hidden h-auto w-[53%] lg:block xl:w-[57%]"
|
||||
src="/images/trade.png"
|
||||
alt="next"
|
||||
/>
|
||||
<img
|
||||
className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`}
|
||||
src="/logos/logo-mark.svg"
|
||||
alt="next"
|
||||
/>
|
||||
<div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
|
||||
<div
|
||||
style={{
|
||||
width: `${(showSetupStep / 4) * 100}%`,
|
||||
}}
|
||||
className="flex bg-th-active transition-all duration-700 ease-out"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute top-6 right-6 z-10">
|
||||
<IconButton hideBg onClick={() => onClose()}>
|
||||
<XMarkIcon className="h-6 w-6 text-th-fgd-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
|
||||
<UserSetupTransition show={showSetupStep === 0}>
|
||||
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
|
||||
{t('onboarding:intro-heading')}
|
||||
</h2>
|
||||
<p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
|
||||
<div className="mb-6 space-y-2 py-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-1')}</p>
|
||||
</div>
|
||||
{/* <div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">Deeply liquid markets</p>
|
||||
</div> */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-2')}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-3')}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-4')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-44" onClick={handleNextStep} size="large">
|
||||
<div className="flex items-center justify-center">
|
||||
<FireIcon className="mr-2 h-5 w-5" />
|
||||
{t('onboarding:lets-go')}
|
||||
</div>
|
||||
</Button>
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 1}>
|
||||
{showSetupStep === 1 ? (
|
||||
<div>
|
||||
<h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
|
||||
{t('onboarding:connect-wallet')}
|
||||
</h2>
|
||||
<p className="mb-2 text-base">{t('onboarding:choose-wallet')}</p>
|
||||
<div className="space-y-2">
|
||||
{wallets?.map((w) => (
|
||||
<button
|
||||
className={`col-span-1 w-full rounded-md border py-3 px-4 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-4'
|
||||
}`}
|
||||
onClick={() => {
|
||||
select(w.adapter.name)
|
||||
}}
|
||||
key={w.adapter.name}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={w.adapter.icon}
|
||||
className="mr-2 h-5 w-5"
|
||||
alt={`${w.adapter.name} icon`}
|
||||
/>
|
||||
{w.adapter.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
className="mt-10 flex w-44 items-center justify-center"
|
||||
onClick={handleConnect}
|
||||
size="large"
|
||||
>
|
||||
{connected && mangoAccountLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5" />
|
||||
|
||||
{t('onboarding:connect-wallet')}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition
|
||||
delay
|
||||
show={showSetupStep === 2 && !mangoAccountLoading}
|
||||
>
|
||||
{showSetupStep === 2 ? (
|
||||
<div>
|
||||
<div className="pb-6">
|
||||
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
|
||||
{t('onboarding:create-account')}
|
||||
</h2>
|
||||
<p className="text-base">
|
||||
{t('onboarding:create-account-desc')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pb-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)
|
||||
}
|
||||
charLimit={30}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InlineNotification type="info" desc={t('insufficient-sol')} />
|
||||
<div className="mt-10">
|
||||
<Button
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
disabled={maxSolDeposit <= 0}
|
||||
onClick={handleCreateAccount}
|
||||
size="large"
|
||||
>
|
||||
{loadingAccount ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
{t('create-account')}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<SolBalanceWarnings />
|
||||
<LinkButton onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 3}>
|
||||
{showSetupStep === 3 ? (
|
||||
<div className="relative">
|
||||
<h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
|
||||
{t('onboarding:fund-account')}
|
||||
</h2>
|
||||
<UserSetupTransition show={depositToken.length > 0}>
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha testing.`}
|
||||
/>
|
||||
<SolBalanceWarnings
|
||||
amount={depositAmount}
|
||||
setAmount={setDepositAmount}
|
||||
selectedToken={depositToken}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Label text={t('amount')} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
disabled={depositToken === 'SOL' && maxSolDeposit <= 0}
|
||||
label="Wallet Max"
|
||||
onClick={() =>
|
||||
setDepositAmount(
|
||||
floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()
|
||||
)
|
||||
}
|
||||
value={floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</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-bkg-4 bg-transparent px-4 hover:bg-transparent"
|
||||
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>
|
||||
<Input
|
||||
className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent 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 className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
disabled={depositToken === 'SOL' && maxSolDeposit <= 0}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-10 border-y border-th-bkg-3">
|
||||
<div className="flex justify-between px-2 py-4">
|
||||
<p>{t('deposit-value')}</p>
|
||||
<p className="font-mono">
|
||||
{depositBank
|
||||
? formatFixedDecimals(
|
||||
depositBank.uiPrice * Number(depositAmount),
|
||||
true
|
||||
)
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
disabled={
|
||||
!depositAmount ||
|
||||
!depositToken ||
|
||||
exceedsAlphaMax ||
|
||||
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={() => setShowSetupStep(4)}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition show={depositToken.length === 0}>
|
||||
<div
|
||||
className="thin-scroll absolute top-36 w-full overflow-auto"
|
||||
style={{ height: 'calc(100vh - 380px)' }}
|
||||
>
|
||||
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
|
||||
<div className="">
|
||||
<p className="text-xs">{t('token')}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs">{t('deposit-rate')}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="whitespace-nowrap text-xs">
|
||||
{t('wallet-balance')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ActionTokenList
|
||||
banks={banks}
|
||||
onSelect={setDepositToken}
|
||||
showDepositRates
|
||||
sortByKey="walletBalanceValue"
|
||||
valueKey="walletBalance"
|
||||
/>
|
||||
</div>
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 4}>
|
||||
{showSetupStep === 4 ? (
|
||||
<div className="relative">
|
||||
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
|
||||
{t('onboarding:your-profile')}
|
||||
</h2>
|
||||
<p className="text-base">{t('onboarding:profile-desc')}</p>
|
||||
{!showEditProfilePic ? (
|
||||
<div className="mt-6 border-t border-th-bkg-3 pt-3">
|
||||
<EditProfileForm
|
||||
onFinish={onClose}
|
||||
onEditProfileImage={() => setShowEditProfilePic(true)}
|
||||
onboarding
|
||||
/>
|
||||
<LinkButton className="mt-6" onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip-finish')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
<UserSetupTransition show={showEditProfilePic}>
|
||||
<div
|
||||
className="thin-scroll absolute mt-6 w-full overflow-auto border-t border-th-bkg-3 px-2 pt-6"
|
||||
style={{ height: 'calc(100vh - 360px)' }}
|
||||
>
|
||||
<EditNftProfilePic
|
||||
onClose={() => setShowEditProfilePic(false)}
|
||||
/>
|
||||
</div>
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
<div className="col-span-1 hidden h-screen lg:block">
|
||||
<ParticlesBackground />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserSetup
|
||||
|
||||
const UserSetupTransition = ({
|
||||
show,
|
||||
children,
|
||||
delay = false,
|
||||
}: {
|
||||
show: boolean
|
||||
children: ReactNode
|
||||
delay?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<Transition
|
||||
appear
|
||||
className="h-full w-full max-w-lg"
|
||||
show={show}
|
||||
enter={`transition ease-in duration-300 ${delay ? 'delay-300' : ''}`}
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
{children}
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import {
|
|||
ArrowUpTrayIcon,
|
||||
ChevronDownIcon,
|
||||
ExclamationCircleIcon,
|
||||
LinkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import Decimal from 'decimal.js'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -33,6 +34,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
|
|||
import useJupiterMints from 'hooks/useJupiterMints'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
|
||||
interface WithdrawFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -51,6 +53,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
|
|||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const { connected } = useWallet()
|
||||
|
||||
const bank = useMemo(() => {
|
||||
const group = mangoStore.getState().group
|
||||
|
|
@ -287,10 +290,18 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
|
|||
className="flex w-full items-center justify-center"
|
||||
size="large"
|
||||
disabled={
|
||||
!inputAmount || showInsufficientBalance || initHealth <= 0
|
||||
!inputAmount ||
|
||||
showInsufficientBalance ||
|
||||
initHealth <= 0 ||
|
||||
!connected
|
||||
}
|
||||
>
|
||||
{submitting ? (
|
||||
{!connected ? (
|
||||
<div className="flex items-center">
|
||||
<LinkIcon className="mr-2 h-5 w-5" />
|
||||
{t('connect')}
|
||||
</div>
|
||||
) : submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ import DelegateModal from '@components/modals/DelegateModal'
|
|||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import CreateAccountModal from '@components/modals/CreateAccountModal'
|
||||
|
||||
export const handleCopyAddress = (
|
||||
mangoAccount: MangoAccount,
|
||||
|
|
@ -46,6 +48,8 @@ const AccountActions = () => {
|
|||
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
||||
const [showRepayModal, setShowRepayModal] = useState(false)
|
||||
const [showDelegateModal, setShowDelegateModal] = useState(false)
|
||||
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
||||
const { connected } = useWallet()
|
||||
|
||||
const hasBorrows = useMemo(() => {
|
||||
if (!mangoAccount || !group) return false
|
||||
|
|
@ -56,12 +60,20 @@ const AccountActions = () => {
|
|||
)
|
||||
}, [mangoAccount, group])
|
||||
|
||||
const handleBorrowModal = () => {
|
||||
if (!connected || mangoAccount) {
|
||||
setShowBorrowModal(true)
|
||||
} else {
|
||||
setShowCreateAccountModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center space-x-2 md:space-x-3">
|
||||
{hasBorrows ? (
|
||||
<Button
|
||||
className="flex items-center"
|
||||
className="flex w-full items-center justify-center sm:w-auto"
|
||||
disabled={!mangoAccount}
|
||||
onClick={() => setShowRepayModal(true)}
|
||||
>
|
||||
|
|
@ -70,10 +82,9 @@ const AccountActions = () => {
|
|||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
className="flex items-center"
|
||||
disabled={!mangoAccount}
|
||||
onClick={() => setShowBorrowModal(true)}
|
||||
secondary={hasBorrows}
|
||||
className="flex w-full items-center justify-center sm:w-auto"
|
||||
onClick={handleBorrowModal}
|
||||
secondary
|
||||
>
|
||||
<ArrowUpLeftIcon className="mr-2 h-5 w-5" />
|
||||
{t('borrow')}
|
||||
|
|
@ -151,6 +162,12 @@ const AccountActions = () => {
|
|||
onClose={() => setShowDelegateModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
{showCreateAccountModal ? (
|
||||
<CreateAccountModal
|
||||
isOpen={showCreateAccountModal}
|
||||
onClose={() => setShowCreateAccountModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,8 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
|
|||
// import AccountOnboardingTour from '@components/tours/AccountOnboardingTour'
|
||||
import dayjs from 'dayjs'
|
||||
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
|
|
@ -73,6 +75,8 @@ const AccountPage = () => {
|
|||
>([])
|
||||
const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
|
||||
const { theme } = useTheme()
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
// const tourSettings = mangoStore((s) => s.settings.tours)
|
||||
// const [isOnBoarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const [animationSettings] = useLocalStorageState(
|
||||
|
|
@ -220,8 +224,8 @@ const AccountPage = () => {
|
|||
|
||||
return !chartToShow ? (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center justify-between border-b-0 border-th-bkg-3 px-6 py-3 md:border-b">
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between md:border-b">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:space-x-6">
|
||||
<div id="account-step-three">
|
||||
<Tooltip
|
||||
maxWidth="20rem"
|
||||
|
|
@ -266,7 +270,7 @@ const AccountPage = () => {
|
|||
{!loadPerformanceData ? (
|
||||
mangoAccount && performanceData.length ? (
|
||||
<div
|
||||
className="relative flex items-end"
|
||||
className="relative flex h-44 items-end sm:h-24 sm:w-48"
|
||||
onMouseEnter={() =>
|
||||
onHoverMenu(showExpandChart, 'onMouseEnter')
|
||||
}
|
||||
|
|
@ -281,16 +285,14 @@ const AccountPage = () => {
|
|||
: COLORS.DOWN[theme]
|
||||
}
|
||||
data={performanceData.concat(latestAccountData)}
|
||||
height={88}
|
||||
name="accountValue"
|
||||
width={180}
|
||||
xKey="time"
|
||||
yKey="account_equity"
|
||||
/>
|
||||
<Transition
|
||||
appear={true}
|
||||
className="absolute right-2 bottom-2"
|
||||
show={showExpandChart}
|
||||
show={showExpandChart || isMobile}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-0 scale-75"
|
||||
enterTo="opacity-100 scale-100"
|
||||
|
|
@ -309,12 +311,12 @@ const AccountPage = () => {
|
|||
</div>
|
||||
) : null
|
||||
) : (
|
||||
<SheenLoader>
|
||||
<div className="h-[88px] w-[180px] rounded-md bg-th-bkg-2" />
|
||||
<SheenLoader className="mt-4 flex flex-1 sm:mt-0">
|
||||
<div className="h-40 w-full rounded-md bg-th-bkg-2 sm:h-24 sm:w-48" />
|
||||
</SheenLoader>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 mb-1 lg:mt-0 lg:mb-0">
|
||||
<div className="mt-6 mb-1 md:mt-0 md:mb-0">
|
||||
<AccountActions />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ const AccountTabs = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="border-b border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={activeTab}
|
||||
onChange={(v) => setActiveTab(v)}
|
||||
|
|
@ -35,6 +36,7 @@ const AccountTabs = () => {
|
|||
showBorders
|
||||
fillWidth={isMobile}
|
||||
/>
|
||||
</div>
|
||||
<TabContent activeTab={activeTab} />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,619 @@
|
|||
import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationCircleIcon,
|
||||
FireIcon,
|
||||
PencilIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Wallet } from '@project-serum/anchor'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import Decimal from 'decimal.js'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import useSolBalance from 'hooks/useSolBalance'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import {
|
||||
ChangeEvent,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { ALPHA_DEPOSIT_LIMIT } from 'utils/constants'
|
||||
import { notify } from 'utils/notifications'
|
||||
import { floorToDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||
import ActionTokenList from '../account/ActionTokenList'
|
||||
import ButtonGroup from '../forms/ButtonGroup'
|
||||
import Input from '../forms/Input'
|
||||
import Label from '../forms/Label'
|
||||
import WalletIcon from '../icons/WalletIcon'
|
||||
import { walletBalanceForToken } from '../DepositForm'
|
||||
import ParticlesBackground from '../ParticlesBackground'
|
||||
import EditNftProfilePic from '../profile/EditNftProfilePic'
|
||||
import EditProfileForm from '../profile/EditProfileForm'
|
||||
import Button, { LinkButton } from '../shared/Button'
|
||||
import InlineNotification from '../shared/InlineNotification'
|
||||
import Loading from '../shared/Loading'
|
||||
import MaxAmountButton from '../shared/MaxAmountButton'
|
||||
import SolBalanceWarnings from '../shared/SolBalanceWarnings'
|
||||
import { useEnhancedWallet } from '../wallet/EnhancedWalletProvider'
|
||||
import Modal from '../shared/Modal'
|
||||
|
||||
const UserSetupModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'onboarding', 'swap'])
|
||||
const { group } = useMangoGroup()
|
||||
const { connected, select, wallet, wallets } = useWallet()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||
const [accountName, setAccountName] = useState('')
|
||||
const [loadingAccount, setLoadingAccount] = useState(false)
|
||||
const [showSetupStep, setShowSetupStep] = useState(0)
|
||||
const [depositToken, setDepositToken] = useState('USDC')
|
||||
const [depositAmount, setDepositAmount] = useState('')
|
||||
const [submitDeposit, setSubmitDeposit] = useState(false)
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const [showEditProfilePic, setShowEditProfilePic] = useState(false)
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
const { handleConnect } = useEnhancedWallet()
|
||||
const { maxSolDeposit } = useSolBalance()
|
||||
|
||||
useEffect(() => {
|
||||
if (connected) {
|
||||
setShowSetupStep(2)
|
||||
}
|
||||
}, [connected])
|
||||
|
||||
const handleCreateAccount = useCallback(async () => {
|
||||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
const actions = mangoStore.getState().actions
|
||||
if (!group || !wallet) return
|
||||
setLoadingAccount(true)
|
||||
try {
|
||||
const tx = await client.createMangoAccount(
|
||||
group,
|
||||
0,
|
||||
accountName || 'Account 1',
|
||||
undefined, // tokenCount
|
||||
undefined, // serum3Count
|
||||
8, // perpCount
|
||||
8 // perpOoCount
|
||||
)
|
||||
actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
|
||||
if (tx) {
|
||||
actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent
|
||||
setShowSetupStep(3)
|
||||
notify({
|
||||
title: t('new-account-success'),
|
||||
type: 'success',
|
||||
txid: tx,
|
||||
})
|
||||
}
|
||||
} catch (e: any) {
|
||||
notify({
|
||||
title: t('new-account-failed'),
|
||||
txid: e?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
console.error(e)
|
||||
} finally {
|
||||
setLoadingAccount(false)
|
||||
}
|
||||
}, [accountName, wallet, t])
|
||||
|
||||
const handleDeposit = useCallback(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
|
||||
const bank = group.banksMapByName.get(depositToken)![0]
|
||||
try {
|
||||
setSubmitDeposit(true)
|
||||
const tx = await client.tokenDeposit(
|
||||
group,
|
||||
mangoAccount,
|
||||
bank.mint,
|
||||
parseFloat(depositAmount)
|
||||
)
|
||||
notify({
|
||||
title: 'Transaction confirmed',
|
||||
type: 'success',
|
||||
txid: tx,
|
||||
})
|
||||
|
||||
await actions.reloadMangoAccount()
|
||||
setShowSetupStep(4)
|
||||
setSubmitDeposit(false)
|
||||
} catch (e: any) {
|
||||
notify({
|
||||
title: 'Transaction failed',
|
||||
description: e.message,
|
||||
txid: e?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
setSubmitDeposit(false)
|
||||
console.error(e)
|
||||
}
|
||||
}, [depositAmount, depositToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccount && showSetupStep === 2) {
|
||||
onClose()
|
||||
}
|
||||
}, [mangoAccount, showSetupStep, onClose])
|
||||
|
||||
const banks = useMemo(() => {
|
||||
const banks = group?.banksMapByName
|
||||
? Array.from(group?.banksMapByName, ([key, value]) => {
|
||||
const walletBalance = walletBalanceForToken(walletTokens, key)
|
||||
return {
|
||||
key,
|
||||
value,
|
||||
tokenDecimals: walletBalance.maxDecimals,
|
||||
walletBalance: floorToDecimal(
|
||||
walletBalance.maxAmount,
|
||||
walletBalance.maxDecimals
|
||||
).toNumber(),
|
||||
walletBalanceValue: walletBalance.maxAmount * value?.[0].uiPrice,
|
||||
}
|
||||
})
|
||||
: []
|
||||
return banks
|
||||
}, [group?.banksMapByName, walletTokens])
|
||||
|
||||
const depositBank = useMemo(() => {
|
||||
return banks.find((b) => b.key === depositToken)?.value[0]
|
||||
}, [depositToken, banks])
|
||||
|
||||
const exceedsAlphaMax = useMemo(() => {
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
if (!group || !mangoAccount) return
|
||||
if (
|
||||
mangoAccount.owner.toString() ===
|
||||
'8SSLjXBEVk9nesbhi9UMCA32uijbVBUqWoKPPQPTekzt'
|
||||
)
|
||||
return false
|
||||
const accountValue = toUiDecimalsForQuote(
|
||||
mangoAccount.getEquity(group)!.toNumber()
|
||||
)
|
||||
return (
|
||||
parseFloat(depositAmount) * (depositBank?.uiPrice || 1) >
|
||||
ALPHA_DEPOSIT_LIMIT || accountValue > ALPHA_DEPOSIT_LIMIT
|
||||
)
|
||||
}, [depositAmount, depositBank, group])
|
||||
|
||||
const tokenMax = useMemo(() => {
|
||||
const bank = banks.find((bank) => bank.key === depositToken)
|
||||
if (bank) {
|
||||
return { amount: bank.walletBalance, decimals: bank.tokenDecimals }
|
||||
}
|
||||
return { amount: 0, decimals: 0 }
|
||||
}, [banks, depositToken])
|
||||
|
||||
const showInsufficientBalance = tokenMax.amount < Number(depositAmount)
|
||||
|
||||
const handleSizePercentage = useCallback(
|
||||
(percentage: string) => {
|
||||
setSizePercentage(percentage)
|
||||
let amount = new Decimal(tokenMax.amount).mul(percentage).div(100)
|
||||
if (percentage !== '100') {
|
||||
amount = floorToDecimal(amount, tokenMax.decimals)
|
||||
}
|
||||
|
||||
setDepositAmount(amount.toString())
|
||||
},
|
||||
[tokenMax]
|
||||
)
|
||||
|
||||
const handleNextStep = () => {
|
||||
setShowSetupStep(showSetupStep + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} fullScreen>
|
||||
<div className="radial-gradient-bg grid h-screen overflow-auto text-left lg:grid-cols-2">
|
||||
<img
|
||||
className="absolute -bottom-6 right-0 hidden h-auto w-[53%] lg:block xl:w-[57%]"
|
||||
src="/images/trade.png"
|
||||
alt="next"
|
||||
/>
|
||||
<img
|
||||
className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`}
|
||||
src="/logos/logo-mark.svg"
|
||||
alt="next"
|
||||
/>
|
||||
<div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
|
||||
<div
|
||||
style={{
|
||||
width: `${(showSetupStep / 4) * 100}%`,
|
||||
}}
|
||||
className="flex bg-th-active transition-all duration-700 ease-out"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
|
||||
<UserSetupTransition show={showSetupStep === 0}>
|
||||
<h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl lg:text-6xl">
|
||||
{t('onboarding:intro-heading')}
|
||||
</h2>
|
||||
<p className="text-base sm:mb-4">{t('onboarding:intro-desc')}</p>
|
||||
<div className="mb-6 space-y-2 py-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-1')}</p>
|
||||
</div>
|
||||
{/* <div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">Deeply liquid markets</p>
|
||||
</div> */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-2')}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-3')}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="h-5 w-5 text-th-success" />
|
||||
<p className="text-base">{t('onboarding:bullet-4')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="mb-12 w-44"
|
||||
onClick={handleNextStep}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<FireIcon className="mr-2 h-5 w-5" />
|
||||
{t('onboarding:lets-go')}
|
||||
</div>
|
||||
</Button>
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 1}>
|
||||
{showSetupStep === 1 ? (
|
||||
<div>
|
||||
<h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl lg:text-6xl">
|
||||
{t('onboarding:connect-wallet')}
|
||||
</h2>
|
||||
<p className="mb-2 text-base">
|
||||
{t('onboarding:choose-wallet')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{wallets?.map((w) => (
|
||||
<button
|
||||
className={`col-span-1 w-full rounded-md border py-3 px-4 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-4'
|
||||
}`}
|
||||
onClick={() => {
|
||||
select(w.adapter.name)
|
||||
}}
|
||||
key={w.adapter.name}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={w.adapter.icon}
|
||||
className="mr-2 h-5 w-5"
|
||||
alt={`${w.adapter.name} icon`}
|
||||
/>
|
||||
{w.adapter.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
className="mt-10 flex w-44 items-center justify-center"
|
||||
onClick={handleConnect}
|
||||
size="large"
|
||||
>
|
||||
{connected && mangoAccountLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5" />
|
||||
|
||||
{t('onboarding:connect-wallet')}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition
|
||||
delay
|
||||
show={showSetupStep === 2 && !mangoAccountLoading}
|
||||
>
|
||||
{showSetupStep === 2 ? (
|
||||
<div>
|
||||
<div className="pb-6">
|
||||
<h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl lg:text-6xl">
|
||||
{t('onboarding:create-account')}
|
||||
</h2>
|
||||
<p className="text-base">
|
||||
{t('onboarding:create-account-desc')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pb-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)
|
||||
}
|
||||
charLimit={30}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={t('insufficient-sol')}
|
||||
/>
|
||||
<div className="mt-10">
|
||||
<Button
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
disabled={maxSolDeposit <= 0}
|
||||
onClick={handleCreateAccount}
|
||||
size="large"
|
||||
>
|
||||
{loadingAccount ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
{t('create-account')}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<SolBalanceWarnings />
|
||||
<LinkButton onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 3}>
|
||||
{showSetupStep === 3 ? (
|
||||
<div className="relative">
|
||||
<h2 className="mb-6 font-display text-3xl tracking-normal md:text-5xl lg:text-6xl">
|
||||
{t('onboarding:fund-account')}
|
||||
</h2>
|
||||
<UserSetupTransition show={depositToken.length > 0}>
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha testing.`}
|
||||
/>
|
||||
<SolBalanceWarnings
|
||||
amount={depositAmount}
|
||||
setAmount={setDepositAmount}
|
||||
selectedToken={depositToken}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Label text={t('amount')} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
disabled={depositToken === 'SOL' && maxSolDeposit <= 0}
|
||||
label="Wallet Max"
|
||||
onClick={() =>
|
||||
setDepositAmount(
|
||||
floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()
|
||||
)
|
||||
}
|
||||
value={floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</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-bkg-4 bg-transparent px-4 hover:bg-transparent"
|
||||
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>
|
||||
<Input
|
||||
className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent 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 className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
disabled={depositToken === 'SOL' && maxSolDeposit <= 0}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-10 border-y border-th-bkg-3">
|
||||
<div className="flex justify-between px-2 py-4">
|
||||
<p>{t('deposit-value')}</p>
|
||||
<p className="font-mono">
|
||||
{depositBank
|
||||
? formatFixedDecimals(
|
||||
depositBank.uiPrice * Number(depositAmount),
|
||||
true
|
||||
)
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
disabled={
|
||||
!depositAmount ||
|
||||
!depositToken ||
|
||||
exceedsAlphaMax ||
|
||||
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={() => setShowSetupStep(4)}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition show={depositToken.length === 0}>
|
||||
<div
|
||||
className="thin-scroll absolute top-36 w-full overflow-auto"
|
||||
style={{ height: 'calc(100vh - 380px)' }}
|
||||
>
|
||||
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
|
||||
<div className="">
|
||||
<p className="text-xs">{t('token')}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs">{t('deposit-rate')}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="whitespace-nowrap text-xs">
|
||||
{t('wallet-balance')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ActionTokenList
|
||||
banks={banks}
|
||||
onSelect={setDepositToken}
|
||||
showDepositRates
|
||||
sortByKey="walletBalanceValue"
|
||||
valueKey="walletBalance"
|
||||
/>
|
||||
</div>
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 4}>
|
||||
{showSetupStep === 4 ? (
|
||||
<div className="relative">
|
||||
<h2 className="mb-4 font-display text-3xl tracking-normal md:text-5xl lg:text-6xl">
|
||||
{t('onboarding:your-profile')}
|
||||
</h2>
|
||||
<p className="text-base">{t('onboarding:profile-desc')}</p>
|
||||
{!showEditProfilePic ? (
|
||||
<div className="mt-6 border-t border-th-bkg-3 pt-3">
|
||||
<EditProfileForm
|
||||
onFinish={onClose}
|
||||
onEditProfileImage={() => setShowEditProfilePic(true)}
|
||||
onboarding
|
||||
/>
|
||||
<LinkButton className="mt-6" onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
{t('onboarding:skip-finish')}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
) : null}
|
||||
<UserSetupTransition show={showEditProfilePic}>
|
||||
<div
|
||||
className="thin-scroll absolute mt-6 w-full overflow-auto border-t border-th-bkg-3 px-2 pt-6"
|
||||
style={{ height: 'calc(100vh - 360px)' }}
|
||||
>
|
||||
<EditNftProfilePic
|
||||
onClose={() => setShowEditProfilePic(false)}
|
||||
/>
|
||||
</div>
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
) : null}
|
||||
</UserSetupTransition>
|
||||
</div>
|
||||
<div className="col-span-1 hidden h-screen lg:block">
|
||||
<ParticlesBackground />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserSetupModal
|
||||
|
||||
const UserSetupTransition = ({
|
||||
show,
|
||||
children,
|
||||
delay = false,
|
||||
}: {
|
||||
show: boolean
|
||||
children: ReactNode
|
||||
delay?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<Transition
|
||||
appear
|
||||
className="h-full w-full max-w-lg"
|
||||
show={show}
|
||||
enter={`transition ease-in duration-300 ${delay ? 'delay-300' : ''}`}
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
{children}
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
|
|
@ -105,8 +105,6 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
return data[0][yKey] <= 0 && data[data.length - 1][yKey] < data[0][yKey]
|
||||
}, [data])
|
||||
|
||||
console.log('title', title?.replace(/\s/g, ''))
|
||||
|
||||
return (
|
||||
<FadeInFadeOut show={true}>
|
||||
<ContentBox hideBorder hidePadding>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
|
|||
type ModalProps = {
|
||||
children: React.ReactNode
|
||||
disableOutsideClose?: boolean
|
||||
fullScreen?: boolean
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
hideClose?: boolean
|
||||
|
|
@ -12,6 +13,7 @@ type ModalProps = {
|
|||
function Modal({
|
||||
children,
|
||||
disableOutsideClose = false,
|
||||
fullScreen = false,
|
||||
isOpen,
|
||||
onClose,
|
||||
hideClose,
|
||||
|
|
@ -28,12 +30,22 @@ function Modal({
|
|||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="fixed inset-0 flex items-center justify-center px-4 text-center">
|
||||
<Dialog.Panel className="relative w-full max-w-md rounded-lg border border-th-bkg-3 bg-th-bkg-1 p-6">
|
||||
<div
|
||||
className={`fixed inset-0 flex items-center text-center sm:justify-center ${
|
||||
fullScreen ? '' : 'sm:px-4'
|
||||
}`}
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={`h-full w-full bg-th-bkg-1 ${
|
||||
fullScreen
|
||||
? ''
|
||||
: 'p-4 pt-6 sm:h-auto sm:max-w-md sm:rounded-lg sm:border sm:border-th-bkg-3 sm:p-6'
|
||||
} relative `}
|
||||
>
|
||||
{!hideClose ? (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`absolute right-4 top-4 z-40 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-active`}
|
||||
className={`absolute right-4 top-4 z-40 text-th-fgd-4 focus:outline-none sm:right-2 sm:top-2 md:hover:text-th-active`}
|
||||
>
|
||||
<XMarkIcon className={`h-6 w-6`} />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
|
|||
<div
|
||||
className={`inline-block rounded uppercase ${
|
||||
side === 'buy' || side === 'long' || side === PerpOrderSide.bid
|
||||
? 'border border-th-up text-th-up'
|
||||
: 'border border-th-down text-th-down'
|
||||
? 'text-th-up md:border md:border-th-up'
|
||||
: 'text-th-down md:border md:border-th-down'
|
||||
}
|
||||
-my-0.5 px-1 text-xs uppercase md:px-1.5 md:py-0.5`}
|
||||
uppercase md:-my-0.5 md:px-1.5 md:py-0.5 md:text-xs`}
|
||||
>
|
||||
{typeof side === 'string'
|
||||
? t(side)
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
import { useMemo } from 'react'
|
||||
import { Area, AreaChart, XAxis, YAxis } from 'recharts'
|
||||
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
|
||||
|
||||
const SimpleAreaChart = ({
|
||||
color,
|
||||
data,
|
||||
height,
|
||||
name,
|
||||
width,
|
||||
xKey,
|
||||
yKey,
|
||||
}: {
|
||||
color: string
|
||||
data: any[]
|
||||
height: number
|
||||
name: string
|
||||
width: number
|
||||
xKey: string
|
||||
yKey: string
|
||||
}) => {
|
||||
|
|
@ -24,7 +20,8 @@ const SimpleAreaChart = ({
|
|||
)
|
||||
|
||||
return (
|
||||
<AreaChart width={width} height={height} data={data}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`gradientArea-${name}`}
|
||||
|
|
@ -47,6 +44,7 @@ const SimpleAreaChart = ({
|
|||
<XAxis dataKey={xKey} hide />
|
||||
<YAxis domain={['dataMin', 'dataMax']} dataKey={yKey} hide />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,11 +21,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex bg-th-bkg-1 text-th-fgd-4 ${
|
||||
showBorders ? 'border-b border-th-bkg-3' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex w-full bg-th-bkg-1 text-th-fgd-4">
|
||||
{values.map(([label, count], i) => (
|
||||
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
|
||||
<button
|
||||
|
|
@ -33,9 +29,9 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
rounded ? 'rounded-md' : 'rounded-none'
|
||||
} ${
|
||||
showBorders
|
||||
? `border-r border-th-bkg-3 ${
|
||||
fillWidth && i === values.length - 1 ? 'border-r-0' : ''
|
||||
}`
|
||||
? fillWidth && i === values.length - 1
|
||||
? 'border-r-0'
|
||||
: 'border-r border-th-bkg-3'
|
||||
: ''
|
||||
} ${
|
||||
label === activeValue
|
||||
|
|
@ -45,7 +41,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
key={`${label}${i}`}
|
||||
onClick={() => onChange(label)}
|
||||
>
|
||||
<span className="font-medium">{t(label)} </span>
|
||||
<span className="font-medium leading-tight">{t(label)}</span>
|
||||
{count ? (
|
||||
<div
|
||||
className={`ml-1.5 rounded ${
|
||||
|
|
|
|||
|
|
@ -88,17 +88,19 @@ const PerpMarketsTable = () => {
|
|||
<Td>
|
||||
{!loadingPrices ? (
|
||||
chartData !== undefined ? (
|
||||
<div className="h-10 w-24">
|
||||
<SimpleAreaChart
|
||||
color={
|
||||
change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
|
||||
change >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
data={chartData}
|
||||
height={40}
|
||||
name={symbol}
|
||||
width={104}
|
||||
xKey="0"
|
||||
yKey="1"
|
||||
/>
|
||||
</div>
|
||||
) : symbol === 'USDC' || symbol === 'USDT' ? null : (
|
||||
<p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
|
||||
)
|
||||
|
|
@ -196,15 +198,15 @@ const MobilePerpMarketItem = ({ market }: { market: PerpMarket }) => {
|
|||
</div>
|
||||
{!loadingPrices ? (
|
||||
chartData !== undefined ? (
|
||||
<div className="h-10 w-24">
|
||||
<SimpleAreaChart
|
||||
color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
|
||||
data={chartData}
|
||||
height={40}
|
||||
name={market.name}
|
||||
width={104}
|
||||
xKey="0"
|
||||
yKey="1"
|
||||
/>
|
||||
</div>
|
||||
) : symbol === 'USDC' || symbol === 'USDT' ? null : (
|
||||
<p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -78,17 +78,19 @@ const SpotMarketsTable = () => {
|
|||
<Td>
|
||||
{!loadingPrices ? (
|
||||
chartData !== undefined ? (
|
||||
<div className="h-10 w-24">
|
||||
<SimpleAreaChart
|
||||
color={
|
||||
change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
|
||||
change >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
data={chartData}
|
||||
height={40}
|
||||
name={bank!.name}
|
||||
width={104}
|
||||
xKey="0"
|
||||
yKey="1"
|
||||
/>
|
||||
</div>
|
||||
) : bank?.name === 'USDC' ||
|
||||
bank?.name === 'USDT' ? null : (
|
||||
<p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
|
||||
|
|
@ -175,15 +177,15 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
|
|||
</div>
|
||||
{!loadingPrices ? (
|
||||
chartData !== undefined ? (
|
||||
<div className="h-10 w-24">
|
||||
<SimpleAreaChart
|
||||
color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
|
||||
data={chartData}
|
||||
height={40}
|
||||
name={bank!.name}
|
||||
width={104}
|
||||
xKey="0"
|
||||
yKey="1"
|
||||
/>
|
||||
</div>
|
||||
) : bank?.name === 'USDC' || bank?.name === 'USDT' ? null : (
|
||||
<p className="mb-0 text-th-fgd-4">{t('unavailable')}</p>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -16,12 +16,14 @@ const StatsPage = () => {
|
|||
}, [])
|
||||
return (
|
||||
<div className="pb-20 md:pb-16">
|
||||
<div className="border-b border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={activeTab}
|
||||
onChange={(v) => setActiveTab(v)}
|
||||
values={tabsWithCount}
|
||||
showBorders
|
||||
/>
|
||||
</div>
|
||||
<TabContent activeTab={activeTab} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const SwapInfoTabs = () => {
|
|||
|
||||
return (
|
||||
<div className="hide-scroll h-full overflow-y-scroll">
|
||||
<div className="sticky top-0 z-10">
|
||||
<div className="sticky top-0 z-10 border-b border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={selectedTab}
|
||||
onChange={(tab: string) => setSelectedTab(tab)}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const ChartTabs = ({ token }: { token: string }) => {
|
|||
['token:deposit-rates', 0],
|
||||
]}
|
||||
/>
|
||||
<div className="px-6 py-4">
|
||||
<div className="border-t border-th-bkg-3 px-6 py-4">
|
||||
{activeDepositsTab === 'token:deposits' ? (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
|
|
@ -79,7 +79,7 @@ const ChartTabs = ({ token }: { token: string }) => {
|
|||
small
|
||||
suffix="%"
|
||||
tickFormat={(x) => `${x.toFixed(2)}%`}
|
||||
title={`${token} ${t('token:deposit-rates')} (APR)`}
|
||||
title={`${token} ${t('token:deposit-rates')} APR`}
|
||||
xKey="date_hour"
|
||||
yKey={'deposit_apr'}
|
||||
/>
|
||||
|
|
@ -98,7 +98,7 @@ const ChartTabs = ({ token }: { token: string }) => {
|
|||
['token:borrow-rates', 0],
|
||||
]}
|
||||
/>
|
||||
<div className="px-6 py-4">
|
||||
<div className="border-t border-th-bkg-3 px-6 py-4">
|
||||
{activeBorrowsTab === 'token:borrows' ? (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
|
|
@ -123,7 +123,7 @@ const ChartTabs = ({ token }: { token: string }) => {
|
|||
hideChange
|
||||
suffix="%"
|
||||
tickFormat={(x) => `${x.toFixed(2)}%`}
|
||||
title={`${token} ${t('token:borrow-rates')} (APR)`}
|
||||
title={`${token} ${t('token:borrow-rates')} APR`}
|
||||
xKey="date_hour"
|
||||
yKey={'borrow_apr'}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ const OpenOrders = () => {
|
|||
const [modifyOrderId, setModifyOrderId] = useState<string | undefined>(
|
||||
undefined
|
||||
)
|
||||
const [loadingModifyOrder, setLoadingModifyOrder] = useState(false)
|
||||
const [modifiedOrderSize, setModifiedOrderSize] = useState('')
|
||||
const [modifiedOrderPrice, setModifiedOrderPrice] = useState('')
|
||||
const { width } = useViewport()
|
||||
|
|
@ -116,6 +117,7 @@ const OpenOrders = () => {
|
|||
const baseSize = modifiedOrderSize ? Number(modifiedOrderSize) : o.size
|
||||
const price = modifiedOrderPrice ? Number(modifiedOrderPrice) : o.price
|
||||
if (!group || !mangoAccount) return
|
||||
setLoadingModifyOrder(true)
|
||||
try {
|
||||
let tx = ''
|
||||
if (o instanceof PerpOrder) {
|
||||
|
|
@ -217,6 +219,7 @@ const OpenOrders = () => {
|
|||
}
|
||||
const cancelEditOrderForm = () => {
|
||||
setModifyOrderId(undefined)
|
||||
setLoadingModifyOrder(false)
|
||||
setModifiedOrderSize('')
|
||||
setModifiedOrderPrice('')
|
||||
}
|
||||
|
|
@ -359,7 +362,11 @@ const OpenOrders = () => {
|
|||
onClick={() => modifyOrder(o)}
|
||||
size="small"
|
||||
>
|
||||
{loadingModifyOrder ? (
|
||||
<Loading className="h-4 w-4" />
|
||||
) : (
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={cancelEditOrderForm}
|
||||
|
|
@ -415,13 +422,12 @@ const OpenOrders = () => {
|
|||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${o.side}${o.size}${o.price}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<TableMarketName market={market} />
|
||||
{modifyOrderId !== o.orderId.toString() ? (
|
||||
<div className="mt-1 flex items-center space-x-1">
|
||||
<SideBadge side={o.side} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 pl-8">
|
||||
<div className="text-right">
|
||||
<p className="mb-0.5 text-th-fgd-4">
|
||||
<p className="text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{o.size.toLocaleString(undefined, {
|
||||
maximumFractionDigits:
|
||||
|
|
@ -429,8 +435,7 @@ const OpenOrders = () => {
|
|||
})}
|
||||
</span>{' '}
|
||||
{baseSymbol}
|
||||
</p>
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
{' for '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{o.price.toLocaleString(undefined, {
|
||||
minimumFractionDigits: getDecimalCount(tickSize),
|
||||
|
|
@ -440,20 +445,42 @@ const OpenOrders = () => {
|
|||
{quoteSymbol}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<IconButton
|
||||
disabled={cancelId === o.orderId.toString()}
|
||||
onClick={() =>
|
||||
o instanceof PerpOrder
|
||||
? handleCancelPerpOrder(o)
|
||||
: handleCancelSerumOrder(o)
|
||||
}
|
||||
>
|
||||
{cancelId === o.orderId.toString() ? (
|
||||
<Loading className="h-4 w-4" />
|
||||
) : (
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
<div className="mt-2 flex space-x-4">
|
||||
<div>
|
||||
<p className="text-xs">{t('trade:size')}</p>
|
||||
<Input
|
||||
className="default-transition h-7 w-full rounded-none border-b-2 border-l-0 border-r-0 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono hover:border-th-fgd-3 focus:border-th-active focus:outline-none"
|
||||
type="text"
|
||||
value={modifiedOrderSize}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setModifiedOrderSize(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs">{t('price')}</p>
|
||||
<Input
|
||||
autoFocus
|
||||
className="default-transition h-7 w-full rounded-none border-b-2 border-l-0 border-r-0 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono hover:border-th-fgd-3 focus:border-th-active focus:outline-none"
|
||||
type="text"
|
||||
value={modifiedOrderPrice}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setModifiedOrderPrice(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 pl-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
{modifyOrderId !== o.orderId.toString() ? (
|
||||
<>
|
||||
<IconButton
|
||||
onClick={() => showEditOrderForm(o, tickSize)}
|
||||
>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
disabled={cancelId === o.orderId.toString()}
|
||||
|
|
@ -469,6 +496,21 @@ const OpenOrders = () => {
|
|||
<TrashIcon className="h-4 w-4" />
|
||||
)}
|
||||
</IconButton>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconButton onClick={() => modifyOrder(o)}>
|
||||
{loadingModifyOrder ? (
|
||||
<Loading className="h-4 w-4" />
|
||||
) : (
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton onClick={cancelEditOrderForm}>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,10 @@ import { PublicKey } from '@solana/web3.js'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useMemo } from 'react'
|
||||
import { formatDecimal } from 'utils/numbers'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import TableMarketName from './TableMarketName'
|
||||
|
||||
const byTimestamp = (a: any, b: any) => {
|
||||
|
|
@ -87,6 +89,8 @@ const TradeHistory = () => {
|
|||
const { selectedMarket } = useSelectedMarket()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const fills = mangoStore((s) => s.selectedMarket.fills)
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
|
||||
const openOrderOwner = useMemo(() => {
|
||||
if (!mangoAccount || !selectedMarket) return
|
||||
|
|
@ -127,6 +131,7 @@ const TradeHistory = () => {
|
|||
|
||||
return connected ? (
|
||||
tradeHistoryFromEventQueue.length ? (
|
||||
showTableView ? (
|
||||
<div>
|
||||
<Table>
|
||||
<thead>
|
||||
|
|
@ -185,6 +190,35 @@ const TradeHistory = () => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{tradeHistoryFromEventQueue.map((trade: any) => {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${trade.marketIndex}`}
|
||||
>
|
||||
<div>
|
||||
<TableMarketName market={selectedMarket} />
|
||||
<div className="mt-1 flex items-center space-x-1">
|
||||
<SideBadge side={trade.side} />
|
||||
<p className="text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{trade.size}
|
||||
</span>
|
||||
{' for '}
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{formatDecimal(trade.price)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-mono">${trade.value.toFixed(2)}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center px-6 pb-8 pt-4">
|
||||
<div className="mb-8 w-full">
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const TradeInfoTabs = () => {
|
|||
|
||||
return (
|
||||
<div className="hide-scroll h-full overflow-y-scroll pb-5">
|
||||
<div className="sticky top-0 z-10">
|
||||
<div className="hide-scroll sticky top-0 z-10 overflow-x-auto border-b border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={selectedTab}
|
||||
onChange={(tab: string) => setSelectedTab(tab)}
|
||||
|
|
|
|||
|
|
@ -514,6 +514,7 @@ table p {
|
|||
.hide-scroll::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.hide-scroll::-webkit-scrollbar-thumb {
|
||||
|
|
|
|||
Loading…
Reference in New Issue