start onboarding flow
This commit is contained in:
parent
081a06fe06
commit
b304ea208f
|
@ -30,13 +30,18 @@ const AccountActions = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
<Button disabled={!connected} onClick={() => setShowDepositModal(true)}>
|
<Button
|
||||||
|
disabled={!connected}
|
||||||
|
onClick={() => setShowDepositModal(true)}
|
||||||
|
size="large"
|
||||||
|
>
|
||||||
{t('deposit')}
|
{t('deposit')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
disabled={!connected}
|
disabled={!connected}
|
||||||
onClick={() => setShowWithdrawModal(true)}
|
onClick={() => setShowWithdrawModal(true)}
|
||||||
secondary
|
secondary
|
||||||
|
size="large"
|
||||||
>
|
>
|
||||||
{t('withdraw')}
|
{t('withdraw')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { ChangeEvent, forwardRef, ReactNode } from 'react'
|
import { ChangeEvent, forwardRef } from 'react'
|
||||||
|
|
||||||
interface InputProps {
|
interface InputProps {
|
||||||
type: string
|
type: string
|
||||||
|
@ -34,14 +34,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<input
|
<input
|
||||||
className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
|
className={`${className} h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
|
||||||
text-th-fgd-1 ${
|
text-th-fgd-1 ${
|
||||||
error ? 'border-th-red' : 'border-th-bkg-4'
|
error ? 'border-th-red' : 'border-th-fgd-4'
|
||||||
} default-transition hover:border-th-fgd-4
|
} default-transition hover:border-th-fgd-3
|
||||||
focus:border-th-fgd-4 focus:outline-none
|
focus:border-th-fgd-3 focus:outline-none
|
||||||
${
|
${
|
||||||
disabled
|
disabled
|
||||||
? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'
|
? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-3'
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
${prefix ? 'pl-8' : ''}
|
${prefix ? 'pl-8' : ''}
|
||||||
|
@ -63,14 +63,3 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
export default Input
|
export default Input
|
||||||
|
|
||||||
interface LabelProps {
|
|
||||||
children: ReactNode
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Label = ({ children, className }: LabelProps) => (
|
|
||||||
<label className={`mb-1.5 block text-th-fgd-2 ${className}`}>
|
|
||||||
{children}
|
|
||||||
</label>
|
|
||||||
)
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
const Label = ({ text }: { text: string }) => (
|
||||||
|
<p className="mb-2 text-sm text-th-fgd-3">{text}</p>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default Label
|
|
@ -0,0 +1,86 @@
|
||||||
|
import { Listbox } from '@headlessui/react'
|
||||||
|
import { ChevronDownIcon } from '@heroicons/react/solid'
|
||||||
|
import { ReactNode } from 'react'
|
||||||
|
|
||||||
|
interface SelectProps {
|
||||||
|
value: string | ReactNode
|
||||||
|
onChange: (x: string) => void
|
||||||
|
children: ReactNode
|
||||||
|
className?: string
|
||||||
|
dropdownPanelClassName?: string
|
||||||
|
placeholder?: string
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Select = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
dropdownPanelClassName,
|
||||||
|
placeholder = 'Select',
|
||||||
|
disabled = false,
|
||||||
|
}: SelectProps) => {
|
||||||
|
return (
|
||||||
|
<div className={`relative ${className}`}>
|
||||||
|
<Listbox value={value} onChange={onChange} disabled={disabled}>
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<Listbox.Button
|
||||||
|
className={`h-full w-full rounded-md bg-th-bkg-1 font-normal ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-3 focus:border-th-fgd-3 focus:outline-none`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex h-12 items-center justify-between space-x-2 px-3 text-base text-th-fgd-1`}
|
||||||
|
>
|
||||||
|
{value ? (
|
||||||
|
value
|
||||||
|
) : (
|
||||||
|
<span className="text-th-fgd-3">{placeholder}</span>
|
||||||
|
)}
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`default-transition h-5 w-5 flex-shrink-0 text-th-fgd-1 ${
|
||||||
|
open ? 'rotate-180 transform' : 'rotate-360 transform'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Listbox.Button>
|
||||||
|
{open ? (
|
||||||
|
<Listbox.Options
|
||||||
|
static
|
||||||
|
className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left overflow-auto rounded-md bg-th-bkg-2 p-2 text-th-fgd-1 outline-none ${dropdownPanelClassName}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Listbox.Options>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Listbox>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OptionProps {
|
||||||
|
value: string
|
||||||
|
children: string | ReactNode
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Option = ({ value, children, className }: OptionProps) => {
|
||||||
|
return (
|
||||||
|
<Listbox.Option className="mb-0" value={value}>
|
||||||
|
{({ selected }) => (
|
||||||
|
<div
|
||||||
|
className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary ${
|
||||||
|
selected ? 'text-th-primary' : ''
|
||||||
|
} ${className}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Listbox.Option>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Select.Option = Option
|
||||||
|
|
||||||
|
export default Select
|
|
@ -1,17 +1,13 @@
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
import mangoStore from '../../store/state'
|
import mangoStore from '../../store/state'
|
||||||
|
import { ModalProps } from '../../types/modal'
|
||||||
import { notify } from '../../utils/notifications'
|
import { notify } from '../../utils/notifications'
|
||||||
import Button from '../shared/Button'
|
import Button from '../shared/Button'
|
||||||
import Loading from '../shared/Loading'
|
import Loading from '../shared/Loading'
|
||||||
import Modal from '../shared/Modal'
|
import Modal from '../shared/Modal'
|
||||||
|
|
||||||
type DepositModalProps = {
|
function DepositModal({ isOpen, onClose }: ModalProps) {
|
||||||
isOpen: boolean
|
|
||||||
onClose: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
function DepositModal({ isOpen, onClose }: DepositModalProps) {
|
|
||||||
const [inputAmount, setInputAmount] = useState('')
|
const [inputAmount, setInputAmount] = useState('')
|
||||||
const [submitting, setSubmitting] = useState(false)
|
const [submitting, setSubmitting] = useState(false)
|
||||||
const [selectedToken, setSelectedToken] = useState('USDC')
|
const [selectedToken, setSelectedToken] = useState('USDC')
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { ModalProps } from '../../types/modal'
|
||||||
|
import Modal from '../shared/Modal'
|
||||||
|
|
||||||
|
const IntroModal = ({ isOpen, onClose }: ModalProps) => {
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose}>
|
||||||
|
<div>Hi</div>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IntroModal
|
|
@ -0,0 +1,127 @@
|
||||||
|
import { Transition } from '@headlessui/react'
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
import { ChangeEvent, useState } from 'react'
|
||||||
|
import { ModalProps } from '../../types/modal'
|
||||||
|
import { PROFILE_CATEGORIES } from '../../utils/profile'
|
||||||
|
import Input from '../forms/Input'
|
||||||
|
import Label from '../forms/Label'
|
||||||
|
import Select from '../forms/Select'
|
||||||
|
import Button, { LinkButton } from '../shared/Button'
|
||||||
|
import InlineNotification from '../shared/InlineNotification'
|
||||||
|
import Modal from '../shared/Modal'
|
||||||
|
import useLocalStorageState from '../../hooks/useLocalStorageState'
|
||||||
|
|
||||||
|
export const SKIP_ACCOUNT_SETUP_KEY = 'skipAccountSetup'
|
||||||
|
|
||||||
|
const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [profileName, setProfileName] = useState('')
|
||||||
|
const [accountName, setAccountName] = useState('')
|
||||||
|
const [profileCategory, setProfileCategory] = useState('')
|
||||||
|
const [showAccountSetup, setShowAccountSetup] = useState(false)
|
||||||
|
const [, setSkipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
|
||||||
|
|
||||||
|
const handleSaveProfile = () => {
|
||||||
|
// save profile details to db...
|
||||||
|
|
||||||
|
setShowAccountSetup(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUserSetup = () => {
|
||||||
|
// create account
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSkipAccountSetup = () => {
|
||||||
|
setSkipAccountSetup(true)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} hideClose>
|
||||||
|
<>
|
||||||
|
<div className="pb-4">
|
||||||
|
<h2 className="mb-1">Create Profile</h2>
|
||||||
|
<p>
|
||||||
|
This is your Mango Identity and is used on our leaderboard and chat
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="pb-4">
|
||||||
|
<Label text="Profile Name" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g. Bill Hwang"
|
||||||
|
value={profileName}
|
||||||
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setProfileName(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pb-6">
|
||||||
|
<Label text="Profile Category" />
|
||||||
|
<Select
|
||||||
|
value={profileCategory}
|
||||||
|
onChange={(cat: string) => setProfileCategory(cat)}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{PROFILE_CATEGORIES.map((cat) => (
|
||||||
|
<Select.Option key={cat} value={cat}>
|
||||||
|
{cat}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Button onClick={handleSaveProfile} size="large">
|
||||||
|
Save Profile
|
||||||
|
</Button>
|
||||||
|
<LinkButton onClick={() => setShowAccountSetup(true)}>
|
||||||
|
I'll do this later
|
||||||
|
</LinkButton>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
<Transition
|
||||||
|
appear={true}
|
||||||
|
className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
|
||||||
|
show={showAccountSetup}
|
||||||
|
enter="transition-all ease-in duration-500"
|
||||||
|
enterFrom="transform translate-x-full"
|
||||||
|
enterTo="transform translate-x-0"
|
||||||
|
leave="transition-all ease-out duration-500"
|
||||||
|
leaveFrom="transform translate-x-0"
|
||||||
|
leaveTo="transform translate-x-full"
|
||||||
|
>
|
||||||
|
<div className="flex h-full flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="pb-4">
|
||||||
|
<h2 className="mb-1">Account Setup</h2>
|
||||||
|
<p>You need a Mango Account to get started</p>
|
||||||
|
</div>
|
||||||
|
<div className="pb-4">
|
||||||
|
{/* Not sure if we need to name the first account or if every users first account should have the same name "Main Account" or something similar */}
|
||||||
|
<Label text="Account Name" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g. Degen Account"
|
||||||
|
value={accountName}
|
||||||
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setAccountName(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<InlineNotification type="info" desc={t('insufficient-sol')} />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Button onClick={handleUserSetup} size="large">
|
||||||
|
Let's Go
|
||||||
|
</Button>
|
||||||
|
<LinkButton onClick={() => handleSkipAccountSetup()}>
|
||||||
|
I'll do this later
|
||||||
|
</LinkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserSetupModal
|
|
@ -1,17 +1,13 @@
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import mangoStore from '../../store/state'
|
import mangoStore from '../../store/state'
|
||||||
|
import { ModalProps } from '../../types/modal'
|
||||||
import { notify } from '../../utils/notifications'
|
import { notify } from '../../utils/notifications'
|
||||||
import Button from '../shared/Button'
|
import Button from '../shared/Button'
|
||||||
import Loading from '../shared/Loading'
|
import Loading from '../shared/Loading'
|
||||||
import Modal from '../shared/Modal'
|
import Modal from '../shared/Modal'
|
||||||
|
|
||||||
type WithdrawModalProps = {
|
function WithdrawModal({ isOpen, onClose }: ModalProps) {
|
||||||
isOpen: boolean
|
|
||||||
onClose: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
function WithdrawModal({ isOpen, onClose }: WithdrawModalProps) {
|
|
||||||
const [inputAmount, setInputAmount] = useState('')
|
const [inputAmount, setInputAmount] = useState('')
|
||||||
const [submitting, setSubmitting] = useState(false)
|
const [submitting, setSubmitting] = useState(false)
|
||||||
const [selectedToken, setSelectedToken] = useState('USDC')
|
const [selectedToken, setSelectedToken] = useState('USDC')
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { FunctionComponent, ReactNode } from 'react'
|
import { FunctionComponent, ReactNode } from 'react'
|
||||||
|
|
||||||
interface ButtonProps {
|
interface AllButtonProps {
|
||||||
onClick?: (e?: React.MouseEvent) => void
|
onClick?: (e?: React.MouseEvent) => void
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
className?: string
|
className?: string
|
||||||
|
@ -8,21 +8,34 @@ interface ButtonProps {
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button: FunctionComponent<ButtonProps> = ({
|
interface ButtonProps {
|
||||||
|
size?: 'large' | 'medium' | 'small'
|
||||||
|
}
|
||||||
|
|
||||||
|
type ButtonCombinedProps = AllButtonProps & ButtonProps
|
||||||
|
|
||||||
|
const Button: FunctionComponent<ButtonCombinedProps> = ({
|
||||||
children,
|
children,
|
||||||
onClick,
|
onClick,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
className,
|
className,
|
||||||
secondary,
|
secondary,
|
||||||
|
size = 'medium',
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={`whitespace-nowrap rounded-md ${
|
className={`whitespace-nowrap rounded-md text-th-fgd-1 ${
|
||||||
secondary ? 'border border-th-bkg-button' : 'bg-th-bkg-button'
|
secondary ? 'border border-th-bkg-button' : 'bg-th-bkg-button'
|
||||||
} px-6 py-2 font-bold drop-shadow-md
|
} ${
|
||||||
|
size === 'medium'
|
||||||
|
? 'h-10 px-4'
|
||||||
|
: size === 'large'
|
||||||
|
? 'h-12 px-6'
|
||||||
|
: 'h-8 px-3'
|
||||||
|
} font-bold drop-shadow-md
|
||||||
focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 md:hover:brightness-[1.1] ${className}`}
|
focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 md:hover:brightness-[1.1] ${className}`}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
|
@ -35,7 +48,7 @@ interface IconButtonProps {
|
||||||
hideBg?: boolean
|
hideBg?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
type IconButtonCombinedProps = ButtonProps & IconButtonProps
|
type IconButtonCombinedProps = AllButtonProps & IconButtonProps
|
||||||
|
|
||||||
export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
||||||
children,
|
children,
|
||||||
|
@ -60,7 +73,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LinkButton: FunctionComponent<ButtonProps> = ({
|
export const LinkButton: FunctionComponent<AllButtonProps> = ({
|
||||||
children,
|
children,
|
||||||
onClick,
|
onClick,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
import { FunctionComponent } from 'react'
|
||||||
|
import {
|
||||||
|
CheckCircleIcon,
|
||||||
|
ExclamationCircleIcon,
|
||||||
|
ExclamationIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
} from '@heroicons/react/solid'
|
||||||
|
|
||||||
|
interface InlineNotificationProps {
|
||||||
|
desc?: string
|
||||||
|
title?: string
|
||||||
|
type: 'error' | 'info' | 'success' | 'warning'
|
||||||
|
}
|
||||||
|
|
||||||
|
const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
|
||||||
|
desc,
|
||||||
|
title,
|
||||||
|
type,
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
className={`border ${
|
||||||
|
type === 'error'
|
||||||
|
? 'border-th-red'
|
||||||
|
: type === 'success'
|
||||||
|
? 'border-th-green'
|
||||||
|
: type === 'info'
|
||||||
|
? 'border-th-bkg-4'
|
||||||
|
: 'border-th-orange'
|
||||||
|
} flex items-center rounded-md p-2`}
|
||||||
|
>
|
||||||
|
{type === 'error' ? (
|
||||||
|
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-red" />
|
||||||
|
) : null}
|
||||||
|
{type === 'success' ? (
|
||||||
|
<CheckCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-green" />
|
||||||
|
) : null}
|
||||||
|
{type === 'warning' ? (
|
||||||
|
<ExclamationIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-orange" />
|
||||||
|
) : null}
|
||||||
|
{type === 'info' ? (
|
||||||
|
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
||||||
|
) : null}
|
||||||
|
<div>
|
||||||
|
<div className="text-th-fgd-3">{title}</div>
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
title && desc && 'pt-1'
|
||||||
|
} text-left text-xs font-normal text-th-fgd-3`}
|
||||||
|
>
|
||||||
|
{desc}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default InlineNotification
|
|
@ -1,26 +1,41 @@
|
||||||
import { useState, useRef } from 'react'
|
|
||||||
import { Dialog } from '@headlessui/react'
|
import { Dialog } from '@headlessui/react'
|
||||||
|
import { XIcon } from '@heroicons/react/solid'
|
||||||
|
|
||||||
type ModalProps = {
|
type ModalProps = {
|
||||||
title?: string
|
title?: string
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
onClose: (x: boolean) => void
|
onClose: () => void
|
||||||
|
hideClose?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
function Modal({ title = '', children, isOpen, onClose }: ModalProps) {
|
function Modal({
|
||||||
|
title = '',
|
||||||
|
children,
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
hideClose,
|
||||||
|
}: ModalProps) {
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
className="fixed inset-0 z-10 overflow-y-auto"
|
className="fixed inset-0 z-30 overflow-y-auto"
|
||||||
>
|
>
|
||||||
<div className="min-h-screen px-4 text-center">
|
<div className="min-h-screen px-4 text-center">
|
||||||
<Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
|
<Dialog.Overlay className="fixed inset-0 bg-black opacity-50" />
|
||||||
<span className="inline-block h-screen align-middle" aria-hidden="true">
|
<span className="inline-block h-screen align-middle" aria-hidden="true">
|
||||||
​
|
​
|
||||||
</span>
|
</span>
|
||||||
<div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-th-bkg-2 p-6 text-left align-middle shadow-xl transition-all">
|
<div className="my-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-xl border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl transition-all">
|
||||||
|
{!hideClose ? (
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className={`absolute right-4 top-4 text-th-fgd-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
|
||||||
|
>
|
||||||
|
<XIcon className={`h-5 w-5`} />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
<Dialog.Title>{title}</Dialog.Title>
|
<Dialog.Title>{title}</Dialog.Title>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -110,10 +110,7 @@ const JupiterRoutes = ({
|
||||||
) : null}
|
) : null}
|
||||||
</>
|
</>
|
||||||
<div className="mt-6 flex justify-center">
|
<div className="mt-6 flex justify-center">
|
||||||
<Button
|
<Button onClick={onSwap} className="w-full text-base" size="large">
|
||||||
onClick={onSwap}
|
|
||||||
className="flex w-full justify-center py-3 text-lg"
|
|
||||||
>
|
|
||||||
{submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
|
{submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
|
||||||
{t('trade:confirm-trade')}
|
{t('trade:confirm-trade')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -49,7 +49,7 @@ const RouteFeeInfo = ({
|
||||||
<div className="mb-4 flex items-center justify-between">
|
<div className="mb-4 flex items-center justify-between">
|
||||||
<h3>{t('trade:review-trade')}</h3>
|
<h3>{t('trade:review-trade')}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
{/* <div className="flex items-center justify-between">
|
||||||
<p className="text-th-fgd-3">{t('liquidity')}</p>
|
<p className="text-th-fgd-3">{t('liquidity')}</p>
|
||||||
<Button
|
<Button
|
||||||
className="pt-1 pb-1 pl-3 pr-3"
|
className="pt-1 pb-1 pl-3 pr-3"
|
||||||
|
@ -73,7 +73,7 @@ const RouteFeeInfo = ({
|
||||||
})}
|
})}
|
||||||
</p>
|
</p>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div> */}
|
||||||
{amountOut && amountIn ? (
|
{amountOut && amountIn ? (
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<p className="text-th-fgd-3">{t('trade:rate')}</p>
|
<p className="text-th-fgd-3">{t('trade:rate')}</p>
|
||||||
|
|
|
@ -343,10 +343,11 @@ const Swap = () => {
|
||||||
) : null}
|
) : null}
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setShowConfirm(true)}
|
onClick={() => setShowConfirm(true)}
|
||||||
className="mt-6 flex w-full justify-center py-3 text-lg"
|
className="mt-6 w-full text-base"
|
||||||
disabled={
|
disabled={
|
||||||
!connected || !routes?.length || !selectedRoute || !outputTokenInfo
|
!connected || !routes?.length || !selectedRoute || !outputTokenInfo
|
||||||
}
|
}
|
||||||
|
size="large"
|
||||||
>
|
>
|
||||||
{connected ? (
|
{connected ? (
|
||||||
isLoadingTradeDetails ? (
|
isLoadingTradeDetails ? (
|
||||||
|
|
|
@ -229,7 +229,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
||||||
<div className="-mt-1 h-28 w-1/2 md:h-72 md:w-auto">
|
<div className="-mt-1 h-28 w-1/2 md:h-72 md:w-auto">
|
||||||
<div className="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0 md:mb-0 md:mb-12">
|
<div className="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0 md:mb-0 md:mb-12">
|
||||||
<button
|
<button
|
||||||
className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
||||||
daysToShow === 1 && 'text-th-primary'
|
daysToShow === 1 && 'text-th-primary'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setDaysToShow(1)}
|
onClick={() => setDaysToShow(1)}
|
||||||
|
@ -237,7 +237,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
||||||
24H
|
24H
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
||||||
daysToShow === 7 && 'text-th-primary'
|
daysToShow === 7 && 'text-th-primary'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setDaysToShow(7)}
|
onClick={() => setDaysToShow(7)}
|
||||||
|
@ -245,7 +245,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
||||||
7D
|
7D
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
|
||||||
daysToShow === 30 && 'text-th-primary'
|
daysToShow === 30 && 'text-th-primary'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setDaysToShow(30)}
|
onClick={() => setDaysToShow(30)}
|
||||||
|
|
|
@ -1,13 +1,19 @@
|
||||||
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
|
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
|
||||||
|
import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
import type { NextPage } from 'next'
|
import type { NextPage } from 'next'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||||
import { useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import AccountActions from '../components/account/AccountActions'
|
import AccountActions from '../components/account/AccountActions'
|
||||||
import DepositModal from '../components/modals/DepositModal'
|
import DepositModal from '../components/modals/DepositModal'
|
||||||
|
import UserSetupModal, {
|
||||||
|
SKIP_ACCOUNT_SETUP_KEY,
|
||||||
|
} from '../components/modals/UserSetupModal'
|
||||||
import WithdrawModal from '../components/modals/WithdrawModal'
|
import WithdrawModal from '../components/modals/WithdrawModal'
|
||||||
|
import TokenList from '../components/TokenList'
|
||||||
import mangoStore from '../store/state'
|
import mangoStore from '../store/state'
|
||||||
import { formatDecimal } from '../utils/numbers'
|
import { formatDecimal } from '../utils/numbers'
|
||||||
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||||
|
|
||||||
export async function getStaticProps({ locale }: { locale: string }) {
|
export async function getStaticProps({ locale }: { locale: string }) {
|
||||||
return {
|
return {
|
||||||
|
@ -19,13 +25,22 @@ export async function getStaticProps({ locale }: { locale: string }) {
|
||||||
|
|
||||||
const Index: NextPage = () => {
|
const Index: NextPage = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
|
const { connected } = useWallet()
|
||||||
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
||||||
const [showDepositModal, setShowDepositModal] = useState(false)
|
const [showDepositModal, setShowDepositModal] = useState(false)
|
||||||
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
||||||
|
const [showFirstAccountModal, setShowFirstAccountModal] = useState(false)
|
||||||
|
const [skipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (connected && !mangoAccount && !skipAccountSetup) {
|
||||||
|
setShowFirstAccountModal(true)
|
||||||
|
}
|
||||||
|
}, [connected])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-end justify-between">
|
<div className="mb-8 flex items-end justify-between border-b border-th-bkg-3 pb-8">
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1">{t('account-value')}</p>
|
<p className="mb-1">{t('account-value')}</p>
|
||||||
<div className="text-5xl font-bold text-th-fgd-1">
|
<div className="text-5xl font-bold text-th-fgd-1">
|
||||||
|
@ -40,6 +55,7 @@ const Index: NextPage = () => {
|
||||||
</div>
|
</div>
|
||||||
<AccountActions />
|
<AccountActions />
|
||||||
</div>
|
</div>
|
||||||
|
<TokenList />
|
||||||
{showDepositModal ? (
|
{showDepositModal ? (
|
||||||
<DepositModal
|
<DepositModal
|
||||||
isOpen={showDepositModal}
|
isOpen={showDepositModal}
|
||||||
|
@ -52,6 +68,12 @@ const Index: NextPage = () => {
|
||||||
onClose={() => setShowWithdrawModal(false)}
|
onClose={() => setShowWithdrawModal(false)}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
{showFirstAccountModal ? (
|
||||||
|
<UserSetupModal
|
||||||
|
isOpen={showFirstAccountModal}
|
||||||
|
onClose={() => setShowFirstAccountModal(false)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -190,7 +190,7 @@
|
||||||
"initial-deposit": "Initial Deposit",
|
"initial-deposit": "Initial Deposit",
|
||||||
"insufficient-balance-deposit": "Insufficient balance. Reduce the amount to deposit",
|
"insufficient-balance-deposit": "Insufficient balance. Reduce the amount to deposit",
|
||||||
"insufficient-balance-withdraw": "Insufficient balance. Borrow funds to withdraw",
|
"insufficient-balance-withdraw": "Insufficient balance. Borrow funds to withdraw",
|
||||||
"insufficient-sol": "The Solana blockchain requires 0.035 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
|
"insufficient-sol": "The Solana blockchain requires 0.035 SOL to create a Mango Account. It will be refunded if you close your account.",
|
||||||
"interest": "Interest",
|
"interest": "Interest",
|
||||||
"interest-chart-title": "{{symbol}} Interest – Last 30 days (current bar is delayed)",
|
"interest-chart-title": "{{symbol}} Interest – Last 30 days (current bar is delayed)",
|
||||||
"interest-chart-value-title": "{{symbol}} Interest Value – Last 30 days (current bar is delayed)",
|
"interest-chart-value-title": "{{symbol}} Interest Value – Last 30 days (current bar is delayed)",
|
||||||
|
|
|
@ -160,23 +160,23 @@ svg {
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
@apply font-bold;
|
@apply font-bold text-th-fgd-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-2xl;
|
@apply text-3xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-xl;
|
@apply text-2xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@apply text-lg;
|
@apply text-xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@apply text-th-fgd-2;
|
@apply text-base text-th-fgd-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Slider */
|
/* Slider */
|
||||||
|
@ -253,3 +253,28 @@ table td {
|
||||||
table th {
|
table th {
|
||||||
@apply text-xs font-normal text-th-fgd-3;
|
@apply text-xs font-normal text-th-fgd-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Scrollbars */
|
||||||
|
|
||||||
|
.thin-scroll::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scroll::-webkit-scrollbar-thumb {
|
||||||
|
@apply rounded bg-th-bkg-4;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scroll::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin-scroll::-webkit-scrollbar-thumb:window-inactive {
|
||||||
|
@apply bg-th-bkg-4;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
export interface ModalProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
export const PROFILE_CATEGORIES = [
|
||||||
|
'borrower',
|
||||||
|
'day-trader',
|
||||||
|
'degen',
|
||||||
|
'discretionary',
|
||||||
|
'loan-shark',
|
||||||
|
'market-maker',
|
||||||
|
'swing-trader',
|
||||||
|
'trader',
|
||||||
|
'yolo',
|
||||||
|
]
|
Loading…
Reference in New Issue