start onboarding flow
This commit is contained in:
saml33
parent
081a06fe06
commit
b304ea208f
|
|
@ -30,13 +30,18 @@ const AccountActions = () => {
|
|||
return (
|
||||
<>
|
||||
<div className="flex space-x-3">
|
||||
<Button disabled={!connected} onClick={() => setShowDepositModal(true)}>
|
||||
<Button
|
||||
disabled={!connected}
|
||||
onClick={() => setShowDepositModal(true)}
|
||||
size="large"
|
||||
>
|
||||
{t('deposit')}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!connected}
|
||||
onClick={() => setShowWithdrawModal(true)}
|
||||
secondary
|
||||
size="large"
|
||||
>
|
||||
{t('withdraw')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ChangeEvent, forwardRef, ReactNode } from 'react'
|
||||
import { ChangeEvent, forwardRef } from 'react'
|
||||
|
||||
interface InputProps {
|
||||
type: string
|
||||
|
|
@ -34,14 +34,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|||
</div>
|
||||
) : null}
|
||||
<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 ${
|
||||
error ? 'border-th-red' : 'border-th-bkg-4'
|
||||
} default-transition hover:border-th-fgd-4
|
||||
focus:border-th-fgd-4 focus:outline-none
|
||||
error ? 'border-th-red' : 'border-th-fgd-4'
|
||||
} default-transition hover:border-th-fgd-3
|
||||
focus:border-th-fgd-3 focus:outline-none
|
||||
${
|
||||
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' : ''}
|
||||
|
|
@ -63,14 +63,3 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|||
})
|
||||
|
||||
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 mangoStore from '../../store/state'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import Button from '../shared/Button'
|
||||
import Loading from '../shared/Loading'
|
||||
import Modal from '../shared/Modal'
|
||||
|
||||
type DepositModalProps = {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function DepositModal({ isOpen, onClose }: DepositModalProps) {
|
||||
function DepositModal({ isOpen, onClose }: ModalProps) {
|
||||
const [inputAmount, setInputAmount] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
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 mangoStore from '../../store/state'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import Button from '../shared/Button'
|
||||
import Loading from '../shared/Loading'
|
||||
import Modal from '../shared/Modal'
|
||||
|
||||
type WithdrawModalProps = {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function WithdrawModal({ isOpen, onClose }: WithdrawModalProps) {
|
||||
function WithdrawModal({ isOpen, onClose }: ModalProps) {
|
||||
const [inputAmount, setInputAmount] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [selectedToken, setSelectedToken] = useState('USDC')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { FunctionComponent, ReactNode } from 'react'
|
||||
|
||||
interface ButtonProps {
|
||||
interface AllButtonProps {
|
||||
onClick?: (e?: React.MouseEvent) => void
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
|
|
@ -8,21 +8,34 @@ interface ButtonProps {
|
|||
children?: ReactNode
|
||||
}
|
||||
|
||||
const Button: FunctionComponent<ButtonProps> = ({
|
||||
interface ButtonProps {
|
||||
size?: 'large' | 'medium' | 'small'
|
||||
}
|
||||
|
||||
type ButtonCombinedProps = AllButtonProps & ButtonProps
|
||||
|
||||
const Button: FunctionComponent<ButtonCombinedProps> = ({
|
||||
children,
|
||||
onClick,
|
||||
disabled = false,
|
||||
className,
|
||||
secondary,
|
||||
size = 'medium',
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
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'
|
||||
} 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}`}
|
||||
{...props}
|
||||
>
|
||||
|
|
@ -35,7 +48,7 @@ interface IconButtonProps {
|
|||
hideBg?: boolean
|
||||
}
|
||||
|
||||
type IconButtonCombinedProps = ButtonProps & IconButtonProps
|
||||
type IconButtonCombinedProps = AllButtonProps & IconButtonProps
|
||||
|
||||
export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
||||
children,
|
||||
|
|
@ -60,7 +73,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
|||
)
|
||||
}
|
||||
|
||||
export const LinkButton: FunctionComponent<ButtonProps> = ({
|
||||
export const LinkButton: FunctionComponent<AllButtonProps> = ({
|
||||
children,
|
||||
onClick,
|
||||
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 { XIcon } from '@heroicons/react/solid'
|
||||
|
||||
type ModalProps = {
|
||||
title?: string
|
||||
children: React.ReactNode
|
||||
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 (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -110,10 +110,7 @@ const JupiterRoutes = ({
|
|||
) : null}
|
||||
</>
|
||||
<div className="mt-6 flex justify-center">
|
||||
<Button
|
||||
onClick={onSwap}
|
||||
className="flex w-full justify-center py-3 text-lg"
|
||||
>
|
||||
<Button onClick={onSwap} className="w-full text-base" size="large">
|
||||
{submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
|
||||
{t('trade:confirm-trade')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const RouteFeeInfo = ({
|
|||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3>{t('trade:review-trade')}</h3>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
{/* <div className="flex items-center justify-between">
|
||||
<p className="text-th-fgd-3">{t('liquidity')}</p>
|
||||
<Button
|
||||
className="pt-1 pb-1 pl-3 pr-3"
|
||||
|
|
@ -73,7 +73,7 @@ const RouteFeeInfo = ({
|
|||
})}
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div> */}
|
||||
{amountOut && amountIn ? (
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-3">{t('trade:rate')}</p>
|
||||
|
|
|
|||
|
|
@ -343,10 +343,11 @@ const Swap = () => {
|
|||
) : null}
|
||||
<Button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
className="mt-6 flex w-full justify-center py-3 text-lg"
|
||||
className="mt-6 w-full text-base"
|
||||
disabled={
|
||||
!connected || !routes?.length || !selectedRoute || !outputTokenInfo
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
{connected ? (
|
||||
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="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0 md:mb-0 md:mb-12">
|
||||
<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'
|
||||
}`}
|
||||
onClick={() => setDaysToShow(1)}
|
||||
|
|
@ -237,7 +237,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
24H
|
||||
</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'
|
||||
}`}
|
||||
onClick={() => setDaysToShow(7)}
|
||||
|
|
@ -245,7 +245,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
7D
|
||||
</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'
|
||||
}`}
|
||||
onClick={() => setDaysToShow(30)}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import type { NextPage } from 'next'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import AccountActions from '../components/account/AccountActions'
|
||||
import DepositModal from '../components/modals/DepositModal'
|
||||
import UserSetupModal, {
|
||||
SKIP_ACCOUNT_SETUP_KEY,
|
||||
} from '../components/modals/UserSetupModal'
|
||||
import WithdrawModal from '../components/modals/WithdrawModal'
|
||||
import TokenList from '../components/TokenList'
|
||||
import mangoStore from '../store/state'
|
||||
import { formatDecimal } from '../utils/numbers'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
|
|
@ -19,13 +25,22 @@ export async function getStaticProps({ locale }: { locale: string }) {
|
|||
|
||||
const Index: NextPage = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const { connected } = useWallet()
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
||||
const [showDepositModal, setShowDepositModal] = 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 (
|
||||
<>
|
||||
<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>
|
||||
<p className="mb-1">{t('account-value')}</p>
|
||||
<div className="text-5xl font-bold text-th-fgd-1">
|
||||
|
|
@ -40,6 +55,7 @@ const Index: NextPage = () => {
|
|||
</div>
|
||||
<AccountActions />
|
||||
</div>
|
||||
<TokenList />
|
||||
{showDepositModal ? (
|
||||
<DepositModal
|
||||
isOpen={showDepositModal}
|
||||
|
|
@ -52,6 +68,12 @@ const Index: NextPage = () => {
|
|||
onClose={() => setShowWithdrawModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
{showFirstAccountModal ? (
|
||||
<UserSetupModal
|
||||
isOpen={showFirstAccountModal}
|
||||
onClose={() => setShowFirstAccountModal(false)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
"initial-deposit": "Initial Deposit",
|
||||
"insufficient-balance-deposit": "Insufficient balance. Reduce the amount to deposit",
|
||||
"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-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)",
|
||||
|
|
|
|||
|
|
@ -160,23 +160,23 @@ svg {
|
|||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@apply font-bold;
|
||||
@apply font-bold text-th-fgd-1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg;
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-th-fgd-2;
|
||||
@apply text-base text-th-fgd-3;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
|
|
@ -253,3 +253,28 @@ table td {
|
|||
table th {
|
||||
@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