add particle background
This commit is contained in:
saml33
parent
6f6ee459a8
commit
31f0b48b1d
|
|
@ -0,0 +1,160 @@
|
|||
import { useCallback } from 'react'
|
||||
import Particles from 'react-tsparticles'
|
||||
import { loadFull } from 'tsparticles'
|
||||
|
||||
const ParticlesBackground = () => {
|
||||
const particlesInit = useCallback(async (engine: any) => {
|
||||
console.log(engine)
|
||||
|
||||
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
|
||||
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
|
||||
// starting from v2 you can add only the features you need reducing the bundle size
|
||||
await loadFull(engine)
|
||||
}, [])
|
||||
|
||||
const particlesLoaded = useCallback(async (container: any) => {
|
||||
await console.log(container)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
init={particlesInit}
|
||||
loaded={particlesLoaded}
|
||||
options={{
|
||||
interactivity: {
|
||||
detect_on: 'canvas',
|
||||
events: {
|
||||
onHover: {
|
||||
enable: true,
|
||||
mode: 'attract',
|
||||
},
|
||||
resize: true,
|
||||
},
|
||||
},
|
||||
particles: {
|
||||
groups: {
|
||||
z5000: {
|
||||
number: {
|
||||
value: 70,
|
||||
},
|
||||
zIndex: {
|
||||
value: 50,
|
||||
},
|
||||
},
|
||||
z7500: {
|
||||
number: {
|
||||
value: 30,
|
||||
},
|
||||
zIndex: {
|
||||
value: 75,
|
||||
},
|
||||
},
|
||||
z2500: {
|
||||
number: {
|
||||
value: 50,
|
||||
},
|
||||
zIndex: {
|
||||
value: 25,
|
||||
},
|
||||
},
|
||||
z1000: {
|
||||
number: {
|
||||
value: 40,
|
||||
},
|
||||
zIndex: {
|
||||
value: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
move: {
|
||||
angle: 10,
|
||||
attract: {
|
||||
rotate: {
|
||||
x: 600,
|
||||
y: 1200,
|
||||
},
|
||||
},
|
||||
direction: 'right',
|
||||
enable: true,
|
||||
speed: 1,
|
||||
},
|
||||
},
|
||||
emitters: {
|
||||
autoPlay: true,
|
||||
life: {
|
||||
wait: false,
|
||||
},
|
||||
rate: {
|
||||
quantity: 1,
|
||||
delay: 8,
|
||||
},
|
||||
particles: {
|
||||
opacity: {
|
||||
value: 100,
|
||||
},
|
||||
shape: {
|
||||
type: 'images',
|
||||
options: {
|
||||
images: [
|
||||
{
|
||||
src: '/icons/mngo.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
{
|
||||
src: '/icons/btc.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
{
|
||||
src: '/icons/eth.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
{
|
||||
src: '/icons/sol.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
{
|
||||
src: '/icons/usdc.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
value: 16,
|
||||
},
|
||||
move: {
|
||||
speed: 3,
|
||||
straight: true,
|
||||
},
|
||||
zIndex: {
|
||||
value: 0,
|
||||
},
|
||||
rotate: {
|
||||
value: {
|
||||
min: 0,
|
||||
max: 360,
|
||||
},
|
||||
animation: {
|
||||
enable: true,
|
||||
speed: 10,
|
||||
sync: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
position: {
|
||||
x: -5,
|
||||
y: -5,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ParticlesBackground
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Transition } from '@headlessui/react'
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
|
|
@ -23,6 +23,7 @@ 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'
|
||||
|
||||
const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
|
@ -167,111 +168,138 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
}, [group?.banksMapByName, walletTokens])
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} disableOutsideClose hideClose>
|
||||
<div className="absolute top-0 left-0 flex h-0.5 w-full flex-grow bg-th-bkg-4">
|
||||
<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`}
|
||||
/>
|
||||
{/* <div className="absolute top-6 left-6 z-10">
|
||||
<img className="h-12 w-auto" src="/logos/logo-mark.svg" alt="next" />
|
||||
</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 / 3) * 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
|
||||
style={{
|
||||
width: `${(showSetupStep / 4) * 100}%`,
|
||||
}}
|
||||
className="default-transition flex rounded bg-th-primary"
|
||||
></div>
|
||||
</div>
|
||||
<div className="h-[392px]">
|
||||
<Transition
|
||||
appear={true}
|
||||
className="absolute top-0.5 left-0 z-20 h-full w-full 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"
|
||||
id="repulse-div"
|
||||
className="m-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg p-6 text-left align-middle"
|
||||
>
|
||||
<h2 className="mb-1">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
|
||||
<div className="h-[392px]">
|
||||
<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-4 text-4xl">Welcome</h2>
|
||||
<p className="mb-4">
|
||||
{
|
||||
"You're seconds away from trading the most liquid dex markets on Solana."
|
||||
}
|
||||
</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">
|
||||
{"Let's Go"}
|
||||
</Button>
|
||||
</Transition>
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full 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-1">Connect Wallet</h2>
|
||||
<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>
|
||||
<p className="mb-2 font-bold">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 md:hover:border-th-primary'
|
||||
: 'border-th-bkg-4'
|
||||
}`}
|
||||
onClick={() => {
|
||||
select(w.adapter.name)
|
||||
}}
|
||||
key={w.adapter.name}
|
||||
>
|
||||
<div className="flex items-center text-th-fgd-4">
|
||||
<img
|
||||
src={w.adapter.icon}
|
||||
className="mr-2 h-5 w-5"
|
||||
alt={`${w.adapter.name} icon`}
|
||||
/>
|
||||
{w.adapter.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
<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={connectWallet} size="large">
|
||||
Connect Wallet
|
||||
<Button className="w-full" onClick={handleNextStep} size="large">
|
||||
{"Let's Go"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</EnterRightExitLeft>
|
||||
{/* <EnterRightExitLeft
|
||||
</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-4 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"
|
||||
>
|
||||
Connect Wallet
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</EnterRightExitLeft>
|
||||
{/* <EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full bg-th-bkg-1 p-6"
|
||||
show={showSetupStep === 2}
|
||||
style={{ height: 'calc(100% - 12px)' }}
|
||||
|
|
@ -319,152 +347,157 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
</div>
|
||||
</div>
|
||||
</EnterRightExitLeft> */}
|
||||
<EnterRightExitLeft
|
||||
className="absolute top-0.5 left-0 z-20 w-full 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-1">Create Account</h2>
|
||||
<p>You need a Mango Account to get started.</p>
|
||||
<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="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"
|
||||
>
|
||||
Create Account
|
||||
</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 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-4">Fund Your Account</h2>
|
||||
<FadeInFadeOut show={!!depositToken}>
|
||||
<Label text="Amount" />
|
||||
<div className="grid grid-cols-2">
|
||||
<button
|
||||
className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1 px-4 hover:bg-th-bkg-2"
|
||||
onClick={() => setDepositToken('')}
|
||||
>
|
||||
<div className="ml-1.5 flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/icons/${depositToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
<p className="ml-1.5 text-xl font-bold text-th-fgd-1">
|
||||
{depositToken}
|
||||
</p>
|
||||
</div>
|
||||
<PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
|
||||
</div>
|
||||
</button>
|
||||
<Input
|
||||
className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
|
||||
type="text"
|
||||
name="deposit"
|
||||
id="deposit"
|
||||
placeholder="0.00"
|
||||
value={depositAmount}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setDepositAmount(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</FadeInFadeOut>
|
||||
{!depositToken ? (
|
||||
<div className="absolute top-10 mt-2 h-56 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 className="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<div className="pb-4">
|
||||
<h2 className="mb-1">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>
|
||||
<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"
|
||||
>
|
||||
Deposit
|
||||
</Button>
|
||||
<LinkButton onClick={handleEndOnboarding}>
|
||||
<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>
|
||||
<div className="space-y-6">
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={t('insufficient-sol')}
|
||||
/>
|
||||
<div className="">
|
||||
<Button
|
||||
className="mb-4 w-full"
|
||||
onClick={() => handleCreateAccount()}
|
||||
size="large"
|
||||
>
|
||||
Create Account
|
||||
</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-4">Fund Your Account</h2>
|
||||
<FadeInFadeOut show={!!depositToken}>
|
||||
<Label text="Amount" />
|
||||
<div className="grid grid-cols-2">
|
||||
<button
|
||||
className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-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>
|
||||
</FadeInFadeOut>
|
||||
{!depositToken ? (
|
||||
<div className="absolute top-10 mt-2 h-56 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"
|
||||
>
|
||||
Deposit
|
||||
</Button>
|
||||
<LinkButton onClick={handleEndOnboarding}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,8 +35,10 @@
|
|||
"react-dom": "18.0.0",
|
||||
"react-flip-numbers": "^3.0.5",
|
||||
"react-number-format": "^4.9.2",
|
||||
"react-tsparticles": "^2.2.4",
|
||||
"react-window": "^1.8.7",
|
||||
"recharts": "^2.1.12",
|
||||
"tsparticles": "^2.2.4",
|
||||
"zustand": "^4.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export const COLORS: any = {
|
||||
BKG1: { Mango: '#141026', Dark: '#101012', Light: '#FDFDFD' },
|
||||
GREEN: { Mango: '#AFD803', Dark: '#5EBF4d', Light: '#5EBF4d' },
|
||||
PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
|
||||
RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
|
||||
|
|
|
|||
|
|
@ -302,3 +302,9 @@ input[type='range']::-webkit-slider-thumb {
|
|||
input[type='range']::-webkit-slider-runnable-track {
|
||||
@apply appearance-none border-0 bg-transparent shadow-none;
|
||||
}
|
||||
|
||||
.intro-bg {
|
||||
background-color: #141026;
|
||||
background-image: radial-gradient(at -40% -10%, #5b48ad 0, transparent 40%),
|
||||
radial-gradient(at 150% 150%, #e54033 0, transparent 50%);
|
||||
}
|
||||
|
|
|
|||
324
yarn.lock
324
yarn.lock
|
|
@ -4355,6 +4355,14 @@ react-transition-group@2.9.0:
|
|||
prop-types "^15.6.2"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
|
||||
react-tsparticles@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/react-tsparticles/-/react-tsparticles-2.2.4.tgz#37400f4dcf6d28f91ec8ff75e314c03a664d92a5"
|
||||
integrity sha512-ndhMVUcXNYBT7tufHoOF3B8o7KoG23bPIZdBvb8202z2b/rb3Ufu3gIkDqnuzxwljBu4SaCu962UId9xCaGA7g==
|
||||
dependencies:
|
||||
fast-deep-equal "^3.1.3"
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
react-window@^1.8.7:
|
||||
version "1.8.7"
|
||||
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
|
||||
|
|
@ -4895,6 +4903,322 @@ tslib@^2.3.1:
|
|||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
|
||||
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
|
||||
|
||||
tsparticles-engine@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-engine/-/tsparticles-engine-2.2.4.tgz#b45f56ad3f3f7c5cc0ace466815305e19cb554fc"
|
||||
integrity sha512-glpUmRJKdbtItcHqJhE05V224DsGSV283oXR9dR6aiqA92BX/2dxU/03YrvcbPTppuMo7rFsBMf4NrPV3tXEfw==
|
||||
|
||||
tsparticles-interaction-external-attract@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.2.4.tgz#e8324502060dadac5f7593255b48ffa8d4022ed9"
|
||||
integrity sha512-o0eWDFX/wLu1Oih5/fdqhxAPPepjHCEX2iiheHe5EUYpRoGrtLy9feJ7fnRAklVsNKMaSx2+rG7mWYd7s/MPKQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-bounce@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.2.4.tgz#b9d4f5e589d7edfe8c40b53a92195a290005afb3"
|
||||
integrity sha512-G7cDmYAxWPaP3WXDHKxvKFVy1EMOQWQQtsxp56d5r4wc7xhjvBPzEAfockt3+m7Qg5J0wzTb4CIpDQerfey4Sw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-bubble@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.2.4.tgz#6fcbdd460ed5322ca3b14abd85231bce93ec02a6"
|
||||
integrity sha512-apE8iL8GkKbn5IL/sTD0HvQLe1jobJayv4QDZAUJDfBBNY3/RkSU1eUBjz4vtrDHJK3sq8AURI5L8h01qY0Nqg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-connect@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.2.4.tgz#121ed27e936c4e140523935e8b8fe38fe92fa3a0"
|
||||
integrity sha512-X+aA06pge48cAhjxrQ6gAmJeQnkp18mewA+syW/SLzHmMHRWkVAw94n4/pjRZ32OxtGP+a2ANBPeENxHxZVqZA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-grab@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.2.4.tgz#6fc83628c4187d2a50b9ca671ce184b05f4d3a64"
|
||||
integrity sha512-bYSoKqFPKBVtSKWCmQlgxVKRkMpVmvMTNn3cWRi+4+fp9hurpnudYTznEIV5k9swFLfL+8o1DyJZIaSHl89zsQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-pause@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.2.4.tgz#6f5c1f9e00caa769bd820aade4fd032a9d6c060f"
|
||||
integrity sha512-YfK0zmTieY3pODSahaDyPQSula28sAztecLKWzWz6zV16OWS8DulFhj0xLd3TTn4p8c2nZcFspapvwK6Tyq3dQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-push@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.2.4.tgz#00a447f546fa728ef03c5166b2c23353ea375722"
|
||||
integrity sha512-wyqRNGpgWPSbntz2G3lwccrau7/LwsBF31BI7Kv49rcb/qGmVoEvZyakY6tRtIncCJHXXWXvvbeWeDdF/Ku39w==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-remove@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.2.4.tgz#b154eecbcb5b1f5e308dfa70dd34c1d38bfab699"
|
||||
integrity sha512-RJi+npaklbV51IiTPAs2y7Exzw1NR6lKqkIDs3DP3evbusifTp9Q55+9aNmSLtXmzba8RIa/MbkMFob6YAvW0w==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-repulse@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.2.4.tgz#19ae444f683aae16bf311e17f2bfe29aaca4b4c0"
|
||||
integrity sha512-R9yLwXdHMP1Zb3C9KgDfHT1pRyrKk12CfcwZXh3Zv90fPiR2k5RjoPZ+4twVF3wYShFnUvQzSoZRuyBWIp/9pw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-external-trail@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.2.4.tgz#a19f8d03788846a075d38ade280dd8475589daff"
|
||||
integrity sha512-vmA9qA7BRUGl+KAgoUph/6IOO+ykd9G86yuUamMkHLoz68NzIzz1ExndOOmh4z0zp0YQMpDtOTisyPJ9carvjQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-particles-attract@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.2.4.tgz#a7eebab7196873a590ac25cb12f38424461096c0"
|
||||
integrity sha512-9m0Yy5IdJL96Y9M/MjPV4bfT5oC1rtbJOhRPTgBwMF+386hreIQhefJmyoDjhkpiUTdvckHJfq/6eFo+48dVWQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-particles-collisions@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.2.4.tgz#7b5f8c98458b12430b4924fd3dd575b58c30bd08"
|
||||
integrity sha512-6JudVbhB+PIJ/pZxV6yX3Wsy3o0zIg3R72nX18lZ2GtCLETjlri6dD6baMmnVJ65sst3LDuCp+1hRyOj9YJhfw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-interaction-particles-links@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.2.4.tgz#a24061874abe32e18609d686cf354f339d6f8b79"
|
||||
integrity sha512-3HtU6ONKBd89KAMMEhRhesrNP6O1CoWscAt/685R65j7jHEJ4ic07c3dZMT4+7ToqlJxgEqYnu39URPBvUywlw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-move-base@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-move-base/-/tsparticles-move-base-2.2.4.tgz#131ef3cd737554ddacb50006fe91e30efe7f0012"
|
||||
integrity sha512-eTtwBc/4QztBly08jrsWpiVitIQi9mWCbNQqKVB7YsFjy8uujOX9TWWLT7rxsRQcmVpt6j3M/N2wgZqAOFooZw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-move-parallax@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-move-parallax/-/tsparticles-move-parallax-2.2.4.tgz#6d1988e071236b8eec2f3b2c48ba1c57aea4a4e0"
|
||||
integrity sha512-5PjRqtTN0npCwuL+iQxrn3H4e1nk+whPOR/SFMu6NMXN066RMXv4gzWiAAgrX4LKRd0BrOaewJX7c5k+N865gQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-particles.js@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-particles.js/-/tsparticles-particles.js-2.2.4.tgz#5a91294582eed01580b48b603fdffeb017233c53"
|
||||
integrity sha512-AV+vFXWoJNlFCu2UGddQTGUR2WacZCWxRNaLTPzPrrAT14IF17v+tCENOCxczwq6ObV07s4MOjcX34RG3D3kXA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-plugin-absorbers@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.2.4.tgz#ce6803534b6480ba66e3e3458acfe0679fa1fef5"
|
||||
integrity sha512-JueNw4F+5x2VJ5N0HemkjbXhjKRFzZdq5WQAOk82gdUrbOmd5hL+ihjcpXlP9L4wro4vlUxJZVoR6WdHiVhjwg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-plugin-emitters@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.2.4.tgz#206c7cc37861548d9fc7a48db2ed0455342567a7"
|
||||
integrity sha512-jhoexCFYvJxXIC0S7F7h/BAdK/R71jymg8XLe+uXdmgNTihJV80AERJKd2NhmiFSmOCu8G2H7a4aLKgByVBSDQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-plugin-polygon-mask@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-plugin-polygon-mask/-/tsparticles-plugin-polygon-mask-2.2.4.tgz#b942ddc7794962b8ce1d4aae3e5212e988cd22ed"
|
||||
integrity sha512-v2rh2ONaFPA+Ryp3zyI+eP/sa3jQoA5V5gUn9cLvP8sg3F22lIVPiQP9kAhTK9TvNIZdynC2/hIYvM9vN5/dVg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-circle@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-circle/-/tsparticles-shape-circle-2.2.4.tgz#865c3eed706a9a0da5e56934f994225433048731"
|
||||
integrity sha512-l1hheEG9ZUeqYztyJc3oy/754J5M3+VFloXA2BaTquxBqZ8X2x1mfivZT3H9ODNKTTta9Wj1ZVgexQyQVZISnw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-image@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-image/-/tsparticles-shape-image-2.2.4.tgz#affa4248095929435df47994358dc90e8aebaec4"
|
||||
integrity sha512-p/P0HFBtVScvzrSP6uyCcrIyeHU2HDkiPIgfG1Wjyq7xuUFEif/Wga8OHaF8zwvrtMma60UTajmJLS/r9opKHA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-line@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-line/-/tsparticles-shape-line-2.2.4.tgz#0706a485c85c7e8ac61886c8bc9b65e914f7b7e8"
|
||||
integrity sha512-ln+uH9OiHy0YSBNRwvHSnL7mQNNBdf3v69o8inHFLmlB258T9XoddWCLypaeRX6n3PLPZmSTlRNejVB5ib8sFA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-polygon@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.2.4.tgz#4fcb951e7eb896e21aa8e66a8abf1d3736d7b890"
|
||||
integrity sha512-+jKeYKyL1WP86wYzgTUqcEKAXJNfFvfixxDeOLA+3XBD7ZOFZOr3/F9CjwL3riQv2abvD/c9B01oDWh2qn/d2w==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-square@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-square/-/tsparticles-shape-square-2.2.4.tgz#c88b869bad575caa8b2b7ff4111b4d4274ce75d8"
|
||||
integrity sha512-0ryM88UcWxzRxFbskgEiHs8U3nGR78qADH+DmHHNhZBOCm5FnzOlvbrAX45mK2zkexqwmqx9S3T29ff8UgsAuw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-star@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-star/-/tsparticles-shape-star-2.2.4.tgz#bb1a6f4a0a5ea28606c69bfe93e3102cda7ae80a"
|
||||
integrity sha512-r9qVueaJ7htqElH5PQTGHLCVvFfR4BMlVy7ygmxkp+X2Yx9ICqwiBbAcwiFykcC1MPruU17YB7NpFYPwxrsL7A==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-shape-text@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-shape-text/-/tsparticles-shape-text-2.2.4.tgz#35f9b78d8f25e77b9c67cd6b514fc1665e3de59e"
|
||||
integrity sha512-jvndhUDvuyMqf6GEm9ijpD9Ymbow15JxbX+xJ2Vap2ztpWKbfAsVr7B4wDZaGIDAIo0aOJsvaCAL5nrL2r3NBA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-slim@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-slim/-/tsparticles-slim-2.2.4.tgz#3fc73c5ddb598f467c68653cce98767b8a96ab0d"
|
||||
integrity sha512-ubtDlAMRJowbPriDddcBLqtmGKq3ag34Rfxe3pmbuCiI070rd5y/kKusXyGodyoJFDj52icAeZgDkcLR2/Uydw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
tsparticles-interaction-external-attract "^2.2.4"
|
||||
tsparticles-interaction-external-bounce "^2.2.4"
|
||||
tsparticles-interaction-external-bubble "^2.2.4"
|
||||
tsparticles-interaction-external-connect "^2.2.4"
|
||||
tsparticles-interaction-external-grab "^2.2.4"
|
||||
tsparticles-interaction-external-pause "^2.2.4"
|
||||
tsparticles-interaction-external-push "^2.2.4"
|
||||
tsparticles-interaction-external-remove "^2.2.4"
|
||||
tsparticles-interaction-external-repulse "^2.2.4"
|
||||
tsparticles-interaction-particles-attract "^2.2.4"
|
||||
tsparticles-interaction-particles-collisions "^2.2.4"
|
||||
tsparticles-interaction-particles-links "^2.2.4"
|
||||
tsparticles-move-base "^2.2.4"
|
||||
tsparticles-move-parallax "^2.2.4"
|
||||
tsparticles-particles.js "^2.2.4"
|
||||
tsparticles-shape-circle "^2.2.4"
|
||||
tsparticles-shape-image "^2.2.4"
|
||||
tsparticles-shape-line "^2.2.4"
|
||||
tsparticles-shape-polygon "^2.2.4"
|
||||
tsparticles-shape-square "^2.2.4"
|
||||
tsparticles-shape-star "^2.2.4"
|
||||
tsparticles-shape-text "^2.2.4"
|
||||
tsparticles-updater-angle "^2.2.4"
|
||||
tsparticles-updater-color "^2.2.4"
|
||||
tsparticles-updater-life "^2.2.4"
|
||||
tsparticles-updater-opacity "^2.2.4"
|
||||
tsparticles-updater-out-modes "^2.2.4"
|
||||
tsparticles-updater-size "^2.2.4"
|
||||
tsparticles-updater-stroke-color "^2.2.4"
|
||||
|
||||
tsparticles-updater-angle@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-angle/-/tsparticles-updater-angle-2.2.4.tgz#719903dc4ea70e201eeed901ff886b7f9cc41843"
|
||||
integrity sha512-1qEObvQUP8A864HHDvlfsfOOIGwQpa/vCpnge+ohdQ1Iu5a2/bClDsgXtYCsZFw85YQl8FdLVIzGQir9zfiv7g==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-color@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-color/-/tsparticles-updater-color-2.2.4.tgz#eeb109d7a53a5c116582f7a8b45c6cc6af030f53"
|
||||
integrity sha512-8iwiJA0pg96M/AaZDyWzhsm+sey6u1JA/UigV4krp0ihZ/5noZGzTrg6Fm+ki/yLKDv2ovOMfxTHfUa0qutlLQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-life@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-life/-/tsparticles-updater-life-2.2.4.tgz#c03b7c74466a80eb829d198a2519c6edca2c2731"
|
||||
integrity sha512-5wlVkoBwzRkNOe38WZftnjYm5dm99XW2Sq0MfsPrLyKMxxD0TeZDTdZW1TNrJpk7fwSNA8vGcbbWai0GF58frg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-opacity@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.2.4.tgz#619cd592e6a6c3dc2831c2e6b3571c6e94a9808b"
|
||||
integrity sha512-klpMCY+y85oXjUatVd7LEROEC2brVTgRULJoN8yphWchmWs/LPLfBPwSz6rA6NGerYZAcbEsHT1uMn76zvxIQQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-out-modes@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.2.4.tgz#ae0d78d8518adb0c71af81819c67051120e8d066"
|
||||
integrity sha512-bZheTxw01eSpsc+ipj+e14dgR9znsQjR9FtP7MIT7yFevqu8bqdHteO7dArRlPAZvf7gqpD706/uEdGLXSGN8Q==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-roll@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-roll/-/tsparticles-updater-roll-2.2.4.tgz#2bde2c47a5787e849766d5e6168cbd32d27315de"
|
||||
integrity sha512-klbOxUSCBdIzfwAt8jsLN1XP52e2UuMj5BQ7bMZ/fGzpHjVv85ebYPd2g7hiKOwCZ5lUrCaKNxDS1b9+TPOLzg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-size@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-size/-/tsparticles-updater-size-2.2.4.tgz#a8d669bcdb5696b709373f621b853855db3b9c50"
|
||||
integrity sha512-J0rq+Sh3+uvgkx4a5QRouPHbhOZLH4sElnPgg8fzd43/Tc8cg0Xp9BV1wDxDWY4TB5mgwwe21JJqmYzV/6hvYw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-stroke-color@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.2.4.tgz#9d7adc076b1e10b3d0f7baf9b4f83777f9797985"
|
||||
integrity sha512-gsVoWDnmgoc0qsH2heDz6KzXe/KNJtU0mnN7S8St5o7xgGfGkd/wyTqgS4y4VYoi5pX99HwCQvd8aQ88b3VJHg==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-tilt@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.2.4.tgz#7e1c0d9082f8555cf9cf299dde414259a72136cd"
|
||||
integrity sha512-cSfm9VyhK+SFxepGkODBB5QQi0ZCusGbU6LNNQLEEd5Ra6q42xA+gptLhzjJUhSwfjwEFILOuqQX6yYoGhC6Tw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-twinkle@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-twinkle/-/tsparticles-updater-twinkle-2.2.4.tgz#bd3171b7db1c5d7d58178b17225e076bb801aa81"
|
||||
integrity sha512-5OgGlaNaXmGJJyCr1b2zlmylVEaorsDJr+16rUytkIId/qwvuoL3zakyPFIjnhjpyQ8u2VTITkcwPX1EfafJhw==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles-updater-wobble@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.2.4.tgz#45e3a51e7beda41681c093c4cb151da25fdbc4e8"
|
||||
integrity sha512-7zmFNT4Qdix3GKQ7Mtj70X6/SmFwBykKUG0FGcQxWOh5h5ALtYlzEZIKeoG9LrO1nll5f0H74tUFemUiy5YvIQ==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
|
||||
tsparticles@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-2.2.4.tgz#997ba6f9e63d11e2151887bc9790186b52d4ef5d"
|
||||
integrity sha512-XMVDcmrrXDx61NUhRPWF0acwrSwLeeDDhK2icvTiYrp/lyKX3csJRAVszzahcsUeKwGmKDJb7CGyt+KThlFtLA==
|
||||
dependencies:
|
||||
tsparticles-engine "^2.2.4"
|
||||
tsparticles-interaction-external-trail "^2.2.4"
|
||||
tsparticles-plugin-absorbers "^2.2.4"
|
||||
tsparticles-plugin-emitters "^2.2.4"
|
||||
tsparticles-plugin-polygon-mask "^2.2.4"
|
||||
tsparticles-slim "^2.2.4"
|
||||
tsparticles-updater-roll "^2.2.4"
|
||||
tsparticles-updater-tilt "^2.2.4"
|
||||
tsparticles-updater-twinkle "^2.2.4"
|
||||
tsparticles-updater-wobble "^2.2.4"
|
||||
|
||||
tsutils@^3.21.0:
|
||||
version "3.21.0"
|
||||
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
|
||||
|
|
|
|||
Loading…
Reference in New Issue