more background
This commit is contained in:
saml33
parent
5e2285ab02
commit
782168283d
|
|
@ -3,41 +3,45 @@ export const fetchChartData = async (
|
|||
quoteTokenId: string,
|
||||
daysToShow: number
|
||||
) => {
|
||||
const [inputResponse, outputResponse] = await Promise.all([
|
||||
fetch(
|
||||
`https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
|
||||
),
|
||||
fetch(
|
||||
`https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
|
||||
),
|
||||
])
|
||||
try {
|
||||
const [inputResponse, outputResponse] = await Promise.all([
|
||||
fetch(
|
||||
`https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
|
||||
),
|
||||
fetch(
|
||||
`https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
|
||||
),
|
||||
])
|
||||
|
||||
const [inputData, outputData] = await Promise.all([
|
||||
inputResponse.json(),
|
||||
outputResponse.json(),
|
||||
])
|
||||
const [inputData, outputData] = await Promise.all([
|
||||
inputResponse.json(),
|
||||
outputResponse.json(),
|
||||
])
|
||||
|
||||
let data: any[] = []
|
||||
if (Array.isArray(inputData)) {
|
||||
data = data.concat(inputData)
|
||||
}
|
||||
if (Array.isArray(outputData)) {
|
||||
data = data.concat(outputData)
|
||||
}
|
||||
|
||||
const formattedData = data.reduce((a, c) => {
|
||||
const found = a.find((price: any) => price.time === c[0])
|
||||
if (found) {
|
||||
if (['usd-coin', 'tether'].includes(quoteTokenId)) {
|
||||
found.price = found.inputPrice / c[4]
|
||||
} else {
|
||||
found.price = c[4] / found.inputPrice
|
||||
}
|
||||
} else {
|
||||
a.push({ time: c[0], inputPrice: c[4] })
|
||||
let data: any[] = []
|
||||
if (Array.isArray(inputData)) {
|
||||
data = data.concat(inputData)
|
||||
}
|
||||
return a
|
||||
}, [])
|
||||
formattedData[formattedData.length - 1].time = Date.now()
|
||||
return formattedData.filter((d: any) => d.price)
|
||||
if (Array.isArray(outputData)) {
|
||||
data = data.concat(outputData)
|
||||
}
|
||||
|
||||
const formattedData = data.reduce((a, c) => {
|
||||
const found = a.find((price: any) => price.time === c[0])
|
||||
if (found) {
|
||||
if (['usd-coin', 'tether'].includes(quoteTokenId)) {
|
||||
found.price = found.inputPrice / c[4]
|
||||
} else {
|
||||
found.price = c[4] / found.inputPrice
|
||||
}
|
||||
} else {
|
||||
a.push({ time: c[0], inputPrice: c[4] })
|
||||
}
|
||||
return a
|
||||
}, [])
|
||||
formattedData[formattedData.length - 1].time = Date.now()
|
||||
return formattedData.filter((d: any) => d.price)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import ConnectedMenu from './wallet/ConnectedMenu'
|
|||
import { ConnectWalletButton } from './wallet/ConnectWalletButton'
|
||||
import { IS_ONBOARDED_KEY } from '../utils/constants'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import UserSetupModal from './modals/UserSetupModal'
|
||||
import CreateAccountModal from './modals/CreateAccountModal'
|
||||
import MangoAccountsListModal from './modals/MangoAccountsListModal'
|
||||
import { useRouter } from 'next/router'
|
||||
|
|
@ -19,19 +18,20 @@ const TopBar = () => {
|
|||
const { t } = useTranslation('common')
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const connected = mangoStore((s) => s.connected)
|
||||
const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const [showUserSetupModal, setShowUserSetupModal] = useState(false)
|
||||
const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const [showUserSetup, setShowUserSetup] = useState(false)
|
||||
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
||||
const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
|
||||
const router = useRouter()
|
||||
const { query } = router
|
||||
|
||||
const handleCloseModal = useCallback(() => {
|
||||
setShowUserSetupModal(false)
|
||||
const handleCloseSetup = useCallback(() => {
|
||||
setShowUserSetup(false)
|
||||
setIsOnboarded(true)
|
||||
}, [])
|
||||
|
||||
const handleShowModal = useCallback(() => {
|
||||
setShowUserSetupModal(true)
|
||||
const handleShowSetup = useCallback(() => {
|
||||
setShowUserSetup(true)
|
||||
}, [])
|
||||
|
||||
const handleShowAccounts = useCallback(() => {
|
||||
|
|
@ -95,7 +95,7 @@ const TopBar = () => {
|
|||
) : (
|
||||
<button
|
||||
className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
|
||||
onClick={handleShowModal}
|
||||
onClick={handleShowSetup}
|
||||
>
|
||||
<WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
{t('connect')}
|
||||
|
|
@ -108,12 +108,7 @@ const TopBar = () => {
|
|||
onClose={() => setShowMangoAccountsModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
{showUserSetupModal ? (
|
||||
<UserSetup
|
||||
// isOpen={showUserSetupModal}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
) : null}
|
||||
{showUserSetup ? <UserSetup onClose={handleCloseSetup} /> : null}
|
||||
{showCreateAccountModal ? (
|
||||
<CreateAccountModal
|
||||
isOpen={showCreateAccountModal}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@ import { Wallet } from '@project-serum/anchor'
|
|||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import Decimal from 'decimal.js'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { IS_ONBOARDED_KEY } from 'utils/constants'
|
||||
import { notify } from 'utils/notifications'
|
||||
import { floorToDecimal } from 'utils/numbers'
|
||||
import ActionTokenList from './account/ActionTokenList'
|
||||
|
|
@ -25,11 +23,10 @@ import Label from './forms/Label'
|
|||
import WalletIcon from './icons/WalletIcon'
|
||||
import { walletBalanceForToken } from './modals/DepositModal'
|
||||
import ParticlesBackground from './ParticlesBackground'
|
||||
import BounceLoader from './shared/BounceLoader'
|
||||
import Button, { IconButton, LinkButton } from './shared/Button'
|
||||
import InlineNotification from './shared/InlineNotification'
|
||||
import Loading from './shared/Loading'
|
||||
import MaxAmountButton from './shared/MaxAmountButton'
|
||||
import { EnterRightExitLeft, FadeInFadeOut } from './shared/Transitions'
|
||||
import { handleWalletConnect } from './wallet/ConnectWalletButton'
|
||||
|
||||
const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
||||
|
|
@ -41,20 +38,17 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
const [accountName, setAccountName] = useState('')
|
||||
const [loadingAccount, setLoadingAccount] = useState(false)
|
||||
const [showSetupStep, setShowSetupStep] = useState(0)
|
||||
const [depositToken, setDepositToken] = useState('')
|
||||
const [depositToken, setDepositToken] = useState('USDC')
|
||||
const [depositAmount, setDepositAmount] = useState('')
|
||||
const [submitDeposit, setSubmitDeposit] = useState(false)
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const [showEditProfilePic, setShowEditProfilePic] = useState(false)
|
||||
const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
// const [showEditProfilePic, setShowEditProfilePic] = useState(false)
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
||||
const connectWallet = async () => {
|
||||
if (wallet) {
|
||||
try {
|
||||
await handleWalletConnect(wallet)
|
||||
setShowSetupStep(2)
|
||||
setIsOnboarded(true)
|
||||
} catch (e) {
|
||||
notify({
|
||||
title: 'Setup failed. Refresh and try again.',
|
||||
|
|
@ -64,6 +58,12 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (connected) {
|
||||
setShowSetupStep(2)
|
||||
}
|
||||
}, [connected])
|
||||
|
||||
const handleCreateAccount = useCallback(async () => {
|
||||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
|
|
@ -82,7 +82,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
)
|
||||
actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
|
||||
if (tx) {
|
||||
setLoadingAccount(false)
|
||||
actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent
|
||||
setShowSetupStep(3)
|
||||
notify({
|
||||
title: t('new-account-success'),
|
||||
|
|
@ -91,13 +91,14 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
})
|
||||
}
|
||||
} catch (e: any) {
|
||||
setLoadingAccount(false)
|
||||
notify({
|
||||
title: t('new-account-failed'),
|
||||
txid: e?.signature,
|
||||
type: 'error',
|
||||
})
|
||||
console.error(e)
|
||||
} finally {
|
||||
setLoadingAccount(false)
|
||||
}
|
||||
}, [accountName, wallet, t])
|
||||
|
||||
|
|
@ -189,8 +190,31 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-30 grid grid-cols-2 overflow-hidden">
|
||||
<div className="col-span-1 flex flex-col items-center justify-center bg-th-bkg-1 p-6 pt-24">
|
||||
<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 / 3) * 100}%`,
|
||||
}}
|
||||
className="flex bg-th-primary 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-2" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
|
||||
<Transition
|
||||
appear={true}
|
||||
className="h-full w-full max-w-md"
|
||||
|
|
@ -202,7 +226,9 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<h2 className="mb-4 text-5xl">Better than your average exchange</h2>
|
||||
<h2 className="mb-4 text-5xl lg:text-6xl">
|
||||
Not your average exchange
|
||||
</h2>
|
||||
<p className="mb-4 text-base">
|
||||
We've got DeFi covered. Trade, swap, borrow and lend all of
|
||||
your favorite tokens with low fees and lightning execution.
|
||||
|
|
@ -237,7 +263,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleNextStep} size="large">
|
||||
<Button className="w-44" onClick={handleNextStep} size="large">
|
||||
<div className="flex items-center justify-center">
|
||||
<FireIcon className="mr-2 h-5 w-5" />
|
||||
{"Let's Go"}
|
||||
|
|
@ -254,13 +280,9 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
{connected && mangoAccountLoading ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader />
|
||||
</div>
|
||||
) : (
|
||||
{showSetupStep === 1 ? (
|
||||
<div>
|
||||
<h2 className="mb-6 text-5xl">Connect Wallet</h2>
|
||||
<h2 className="mb-6 text-5xl lg:text-6xl">Connect Wallet</h2>
|
||||
<p className="mb-2 text-base">Choose Wallet</p>
|
||||
<div className="space-y-2">
|
||||
{wallets?.map((w) => (
|
||||
|
|
@ -286,18 +308,26 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Button className="mt-10" onClick={connectWallet} size="large">
|
||||
<div className="flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
<Button
|
||||
className="mt-10 flex w-44 items-center justify-center"
|
||||
onClick={connectWallet}
|
||||
size="large"
|
||||
>
|
||||
{connected && mangoAccountLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</Transition>
|
||||
<Transition
|
||||
className="h-full w-full max-w-md"
|
||||
show={showSetupStep === 2}
|
||||
show={showSetupStep === 2 && !mangoAccountLoading}
|
||||
enter="transition ease-in duration-300 delay-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
|
|
@ -305,14 +335,12 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
{loadingAccount ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader loadingMessage="Creating Account..." />
|
||||
</div>
|
||||
) : (
|
||||
{showSetupStep === 2 ? (
|
||||
<div>
|
||||
<div className="pb-6">
|
||||
<h2 className="mb-4 text-5xl">Create Your Account</h2>
|
||||
<h2 className="mb-4 text-5xl lg:text-6xl">
|
||||
Create Your Account
|
||||
</h2>
|
||||
<p className="text-base">
|
||||
You need a Mango Account to get started.
|
||||
</p>
|
||||
|
|
@ -337,14 +365,18 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
<InlineNotification type="info" desc={t('insufficient-sol')} />
|
||||
<div className="mt-10">
|
||||
<Button
|
||||
className="mb-6"
|
||||
onClick={() => handleCreateAccount()}
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
onClick={handleCreateAccount}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<PlusCircleIcon className="mr-2 h-5 w-5" />
|
||||
Create Account
|
||||
</div>
|
||||
{loadingAccount ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<PlusCircleIcon className="mr-2 h-5 w-5" />
|
||||
Create Account
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<LinkButton onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
|
|
@ -354,7 +386,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</Transition>
|
||||
<Transition
|
||||
className="h-full w-full max-w-md"
|
||||
|
|
@ -366,157 +398,138 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
{submitDeposit ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader loadingMessage="Funding your account..." />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div className="relative">
|
||||
<h2 className="mb-6 text-4xl">Fund Your Account</h2>
|
||||
<Transition
|
||||
show={depositToken.length > 0}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<Label text="Amount" />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label="Wallet Max"
|
||||
onClick={() =>
|
||||
setDepositAmount(
|
||||
floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()
|
||||
)
|
||||
}
|
||||
value={floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<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-transparent px-4 hover:bg-transparent"
|
||||
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-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}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition
|
||||
show={depositToken.length === 0}
|
||||
enter="transition ease-in duration-300 delay-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
className="thin-scroll h-full w-full overflow-auto"
|
||||
style={{ maxHeight: 'calc(100vh - 268px)' }}
|
||||
{showSetupStep === 3 ? (
|
||||
<div className="relative">
|
||||
<h2 className="mb-6 text-5xl lg:text-6xl">Fund Your Account</h2>
|
||||
<Transition
|
||||
show={depositToken.length > 0}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<Label text="Amount" />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label="Wallet Max"
|
||||
onClick={() =>
|
||||
setDepositAmount(
|
||||
floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()
|
||||
)
|
||||
}
|
||||
value={floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-10 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="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')}
|
||||
<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>
|
||||
<ActionTokenList
|
||||
banks={banks}
|
||||
onSelect={setDepositToken}
|
||||
showDepositRates
|
||||
sortByKey="walletBalanceValue"
|
||||
valueKey="walletBalance"
|
||||
</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}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<Button
|
||||
className="mb-6"
|
||||
className="mb-6 flex w-44 items-center justify-center"
|
||||
disabled={!depositAmount || !depositToken}
|
||||
onClick={handleDeposit}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<ArrowDownTrayIcon className="mr-2 h-5 w-5" />
|
||||
Deposit
|
||||
</div>
|
||||
{submitDeposit ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<ArrowDownTrayIcon className="mr-2 h-5 w-5" />
|
||||
Deposit
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<LinkButton onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
Skip for now
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition
|
||||
show={depositToken.length === 0}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-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>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="radial-gradient-bg relative col-span-1 h-screen">
|
||||
<div className="absolute top-6 right-6 z-10" id="repulse">
|
||||
<IconButton hideBg onClick={() => onClose()}>
|
||||
<XMarkIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div
|
||||
className="absolute left-1/2 top-1/2 z-10 flex-shrink-0 -translate-x-1/2 -translate-y-1/2"
|
||||
// id="repulse"
|
||||
>
|
||||
<img
|
||||
className="h-96 w-96 flex-shrink-0"
|
||||
src="/logos/logo-mark.svg"
|
||||
alt="next"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 hidden h-screen lg:block">
|
||||
<ParticlesBackground />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const ActionTokenItem = ({
|
|||
|
||||
return (
|
||||
<button
|
||||
className="default-transition grid w-full auto-cols-fr grid-flow-col rounded-md border border-th-bkg-4 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
|
||||
className="default-transition flex grid w-full auto-cols-fr grid-flow-col items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
|
||||
onClick={() => onSelect(name)}
|
||||
disabled={customValue <= 0}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
|
|||
onClose()
|
||||
}
|
||||
|
||||
// TODO extract into a shared hook for UserSetupModal.tsx
|
||||
// TODO extract into a shared hook for UserSetup.tsx
|
||||
const banks = useMemo(() => {
|
||||
const banks = group?.banksMapByName
|
||||
? Array.from(group?.banksMapByName, ([key, value]) => {
|
||||
|
|
|
|||
|
|
@ -1,557 +0,0 @@
|
|||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
import Input from '../forms/Input'
|
||||
import Label from '../forms/Label'
|
||||
import Button, { IconButton, LinkButton } from '../shared/Button'
|
||||
import InlineNotification from '../shared/InlineNotification'
|
||||
import useLocalStorageState from '../../hooks/useLocalStorageState'
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
CheckCircleIcon,
|
||||
FireIcon,
|
||||
PencilIcon,
|
||||
PlusCircleIcon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import {
|
||||
EnterBottomExitBottom,
|
||||
EnterRightExitLeft,
|
||||
FadeInFadeOut,
|
||||
} from '../shared/Transitions'
|
||||
import Image from 'next/legacy/image'
|
||||
import BounceLoader from '../shared/BounceLoader'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import { Wallet } from '@project-serum/anchor'
|
||||
import ActionTokenList from '../account/ActionTokenList'
|
||||
import { walletBalanceForToken } from './DepositModal'
|
||||
import { floorToDecimal } from '../../utils/numbers'
|
||||
import { handleWalletConnect } from '../wallet/ConnectWalletButton'
|
||||
import { IS_ONBOARDED_KEY } from '../../utils/constants'
|
||||
import ParticlesBackground from '../ParticlesBackground'
|
||||
import ButtonGroup from '../forms/ButtonGroup'
|
||||
import Decimal from 'decimal.js'
|
||||
import WalletIcon from '../icons/WalletIcon'
|
||||
import EditProfileForm from '@components/profile/EditProfileForm'
|
||||
import EditNftProfilePic from '@components/profile/EditNftProfilePic'
|
||||
|
||||
const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
||||
const { t } = useTranslation()
|
||||
const group = mangoStore((s) => s.group)
|
||||
const { connected, select, wallet, wallets } = useWallet()
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
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('')
|
||||
const [depositAmount, setDepositAmount] = useState('')
|
||||
const [submitDeposit, setSubmitDeposit] = useState(false)
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const [showEditProfilePic, setShowEditProfilePic] = useState(false)
|
||||
const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
||||
const handleNextStep = () => {
|
||||
setShowSetupStep(showSetupStep + 1)
|
||||
}
|
||||
|
||||
const connectWallet = async () => {
|
||||
if (wallet) {
|
||||
try {
|
||||
await handleWalletConnect(wallet)
|
||||
setShowSetupStep(2)
|
||||
setIsOnboarded(true)
|
||||
} catch (e) {
|
||||
notify({
|
||||
title: 'Setup failed. Refresh and try again.',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
setLoadingAccount(false)
|
||||
setShowSetupStep(3)
|
||||
notify({
|
||||
title: t('new-account-success'),
|
||||
type: 'success',
|
||||
txid: tx,
|
||||
})
|
||||
}
|
||||
} catch (e: any) {
|
||||
setLoadingAccount(false)
|
||||
notify({
|
||||
title: t('new-account-failed'),
|
||||
txid: e?.signature,
|
||||
type: 'error',
|
||||
})
|
||||
console.error(e)
|
||||
}
|
||||
}, [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()
|
||||
onClose()
|
||||
setSubmitDeposit(false)
|
||||
} catch (e: any) {
|
||||
notify({
|
||||
title: 'Transaction failed',
|
||||
description: e.message,
|
||||
txid: e?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
setSubmitDeposit(false)
|
||||
console.error(e)
|
||||
}
|
||||
}, [depositAmount, depositToken, onClose])
|
||||
|
||||
useEffect(() => {
|
||||
if (mangoAccount && showSetupStep === 2) {
|
||||
onClose()
|
||||
}
|
||||
}, [mangoAccount, showSetupStep, onClose])
|
||||
|
||||
// TODO extract into a shared hook for DepositModal.tsx
|
||||
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 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 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]
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
className="fixed inset-0 z-30 overflow-y-auto"
|
||||
>
|
||||
<div className="min-h-screen px-4 text-center">
|
||||
<Dialog.Overlay
|
||||
className={`intro-bg pointer-events-none fixed inset-0 bg-th-bkg-1 opacity-80`}
|
||||
/>
|
||||
{/* <div className="absolute top-6 left-6 z-10" id="repulse">
|
||||
<img className="h-10 w-auto" src="/logos/logo-mark.svg" alt="next" />
|
||||
</div> */}
|
||||
<div className="absolute top-6 right-6 z-10" id="repulse">
|
||||
<IconButton hideBg onClick={() => onClose()}>
|
||||
<XMarkIcon className="h-6 w-6 text-th-fgd-2" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="absolute bottom-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 rounded bg-th-primary transition-all duration-700 ease-out"
|
||||
/>
|
||||
</div>
|
||||
<ParticlesBackground />
|
||||
<span className="inline-block h-screen align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div className="m-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg p-6 text-left align-middle">
|
||||
<div className="h-[420px]">
|
||||
<Transition
|
||||
appear={true}
|
||||
className="absolute top-0.5 left-0 z-20 h-full w-full rounded-lg bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 0}
|
||||
enter="transition ease-in duration-500"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-500"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="-translate-x-full"
|
||||
>
|
||||
<h2 className="mb-6 text-4xl">Welcome</h2>
|
||||
<p className="mb-4">
|
||||
{
|
||||
"You're seconds away from trading the most liquid dex markets on Solana."
|
||||
}
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full" onClick={handleNextStep} size="large">
|
||||
<div className="flex items-center justify-center">
|
||||
<FireIcon className="mr-2 h-5 w-5" />
|
||||
{"Let's Go"}
|
||||
</div>
|
||||
</Button>
|
||||
</Transition>
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 1}
|
||||
style={{ height: 'calc(100% - 12px)' }}
|
||||
>
|
||||
{connected && mangoAccountLoading ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<h2 className="mb-6 text-4xl">Connect Wallet</h2>
|
||||
</div>
|
||||
<p className="mb-2">Choose Wallet</p>
|
||||
<div className="thin-scroll grid max-h-56 grid-flow-row grid-cols-3 gap-2 overflow-y-auto">
|
||||
{wallets?.map((w) => (
|
||||
<button
|
||||
className={`col-span-1 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-primary text-th-fgd-1 md:hover:border-th-primary'
|
||||
: '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>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={connectWallet}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<WalletIcon className="mr-2 h-5 w-5" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</EnterRightExitLeft>
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 2}
|
||||
style={{ height: 'calc(100% - 12px)' }}
|
||||
>
|
||||
{loadingAccount ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader loadingMessage="Creating Account..." />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<div className="pb-4">
|
||||
<h2 className="mb-6 text-4xl">Create Account</h2>
|
||||
<p>You need a Mango Account to get started.</p>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<Label text="Account Name" optional />
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Account"
|
||||
value={accountName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setAccountName(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={t('insufficient-sol')}
|
||||
/>
|
||||
<div className="">
|
||||
<Button
|
||||
className="mb-4 w-full"
|
||||
onClick={() => handleCreateAccount()}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<PlusCircleIcon className="mr-2 h-5 w-5" />
|
||||
Create Account
|
||||
</div>
|
||||
</Button>
|
||||
<LinkButton
|
||||
className="flex w-full justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
Skip for now
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</EnterRightExitLeft>
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 3}
|
||||
style={{ height: 'calc(100% - 12px)' }}
|
||||
>
|
||||
{submitDeposit ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<BounceLoader loadingMessage="Funding your account..." />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div className="relative">
|
||||
<h2 className="mb-6 text-4xl">Fund Your Account</h2>
|
||||
<FadeInFadeOut show={!!depositToken}>
|
||||
<div className="flex justify-between">
|
||||
<Label text="Amount" />
|
||||
<LinkButton
|
||||
className="mb-2 no-underline"
|
||||
onClick={() =>
|
||||
setDepositAmount(
|
||||
floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="mr-1 text-sm font-normal text-th-fgd-4">
|
||||
{t('wallet-balance')}:
|
||||
</span>
|
||||
<span className="text-th-fgd-1 underline">
|
||||
{floorToDecimal(
|
||||
tokenMax.amount,
|
||||
tokenMax.decimals
|
||||
).toFixed()}
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
<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-transparent px-4 hover:bg-transparent"
|
||||
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-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}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInFadeOut>
|
||||
{!depositToken ? (
|
||||
<div className="thin-scroll absolute top-14 mt-2 h-52 w-full overflow-auto">
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<Button
|
||||
className="mb-4 w-full"
|
||||
disabled={!depositAmount || !depositToken}
|
||||
onClick={handleDeposit}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<ArrowDownTrayIcon className="mr-2 h-5 w-5" />
|
||||
Deposit
|
||||
</div>
|
||||
</Button>
|
||||
<LinkButton onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
Skip for now
|
||||
</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</EnterRightExitLeft>
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 4}
|
||||
style={{ height: 'calc(100% - 12px)' }}
|
||||
>
|
||||
<h2 className="mb-2 text-4xl">Your Profile</h2>
|
||||
<p className="text-sm">
|
||||
Add an NFT profile pic and edit your assigned name. Your profile
|
||||
will be used for social features in the app.
|
||||
</p>
|
||||
<EditProfileForm
|
||||
onFinish={onClose}
|
||||
onEditProfileImage={() => setShowEditProfilePic(true)}
|
||||
/>
|
||||
<LinkButton className="mx-auto mt-4" onClick={onClose}>
|
||||
<span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
Skip and Finish
|
||||
</span>
|
||||
</LinkButton>
|
||||
<EnterBottomExitBottom
|
||||
className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
|
||||
show={showEditProfilePic}
|
||||
>
|
||||
<EditNftProfilePic
|
||||
onClose={() => setShowEditProfilePic(false)}
|
||||
/>
|
||||
</EnterBottomExitBottom>
|
||||
</EnterRightExitLeft>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserSetupModal
|
||||
|
|
@ -4,6 +4,8 @@ import SwapOnboardingTour from '@components/tours/SwapOnboardingTour'
|
|||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import SwapInfoTabs from './SwapInfoTabs'
|
||||
import dynamic from 'next/dynamic'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { IS_ONBOARDED_KEY } from 'utils/constants'
|
||||
const SwapTokenChart = dynamic(() => import('./SwapTokenChart'), { ssr: false })
|
||||
|
||||
const SwapPage = () => {
|
||||
|
|
@ -11,6 +13,7 @@ const SwapPage = () => {
|
|||
const outputTokenInfo = mangoStore((s) => s.swap.outputTokenInfo)
|
||||
const { connected } = useWallet()
|
||||
const tourSettings = mangoStore((s) => s.settings.tours)
|
||||
const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -31,7 +34,7 @@ const SwapPage = () => {
|
|||
<SwapInfoTabs />
|
||||
</div>
|
||||
</div>
|
||||
{!tourSettings?.swap_tour_seen && connected ? (
|
||||
{!tourSettings?.swap_tour_seen && isOnboarded && connected ? (
|
||||
<SwapOnboardingTour />
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
const chartDataQuery = useQuery(
|
||||
['chart-data', baseTokenId, quoteTokenId, daysToShow],
|
||||
() => fetchChartData(baseTokenId, quoteTokenId, daysToShow),
|
||||
{ staleTime: 120000 }
|
||||
{ staleTime: 0 }
|
||||
)
|
||||
const chartData = chartDataQuery.data
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
|
|||
import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
|
||||
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { GRID_LAYOUT_KEY } from 'utils/constants'
|
||||
import { GRID_LAYOUT_KEY, IS_ONBOARDED_KEY } from 'utils/constants'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
|
|
@ -53,6 +53,7 @@ const TradeAdvancedPage = () => {
|
|||
const showMobileView = width <= breakpoints.md
|
||||
const tourSettings = mangoStore((s) => s.settings.tours)
|
||||
const { connected } = useWallet()
|
||||
const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
||||
|
||||
const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
|
||||
const topnavbarHeight = 67
|
||||
|
|
@ -224,7 +225,7 @@ const TradeAdvancedPage = () => {
|
|||
<OrderbookAndTrades />
|
||||
</div>
|
||||
</ResponsiveGridLayout>
|
||||
{!tourSettings?.trade_tour_seen && connected ? (
|
||||
{!tourSettings?.trade_tour_seen && isOnboarded && connected ? (
|
||||
<TradeOnboardingTour />
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
|
|
@ -420,12 +420,10 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
|
||||
.radial-gradient-bg {
|
||||
background-image: radial-gradient(
|
||||
at -100% -100%,
|
||||
var(--red) 0,
|
||||
transparent 65%
|
||||
),
|
||||
radial-gradient(at 300% 200%, var(--button) 0, transparent 75%);
|
||||
/* radial-gradient(at -100% 200%, var(--primary) 0, transparent 65%); */
|
||||
at 300% 100%,
|
||||
var(--button) 0,
|
||||
transparent 75%
|
||||
);
|
||||
@apply bg-th-bkg-1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue