Merge remote-tracking branch 'origin/alerts-modal' into main
This commit is contained in:
Tyler Shipe
commit
3de58a6f31
|
|
@ -1,6 +1,10 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { RadioGroup } from '@headlessui/react'
|
||||
import { InformationCircleIcon, DuplicateIcon } from '@heroicons/react/outline'
|
||||
import {
|
||||
InformationCircleIcon,
|
||||
DuplicateIcon,
|
||||
ExclamationIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import PhoneInput from 'react-phone-input-2'
|
||||
import 'react-phone-input-2/lib/plain.css'
|
||||
import Button from './Button'
|
||||
|
|
@ -13,6 +17,7 @@ import Modal from './Modal'
|
|||
import Loading from './Loading'
|
||||
import MarginAccountSelect from './MarginAccountSelect'
|
||||
import Tooltip from './Tooltip'
|
||||
import Select from './Select'
|
||||
|
||||
export default function AlertsModal({ isOpen, onClose }) {
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
|
|
@ -29,6 +34,7 @@ export default function AlertsModal({ isOpen, onClose }) {
|
|||
const [tgCode, setTgCode] = useState<string>('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [isCopied, setIsCopied] = useState(false)
|
||||
const [useCustomRatio, setUseCustomRatio] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
|
|
@ -131,6 +137,8 @@ export default function AlertsModal({ isOpen, onClose }) {
|
|||
})
|
||||
}
|
||||
|
||||
const ratioPresets = [113, 115, 120, 130, 150, 200]
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
{tgCode !== '' ? (
|
||||
|
|
@ -159,125 +167,168 @@ export default function AlertsModal({ isOpen, onClose }) {
|
|||
</Tooltip>
|
||||
</ElementTitle>
|
||||
</Modal.Header>
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>Margin Account</div>
|
||||
<MarginAccountSelect
|
||||
value={marginAccounts[0]}
|
||||
onChange={setSelectedMarginAccount}
|
||||
/>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>
|
||||
Alert me when my collateral ratio is below:
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={collateralRatioThresh}
|
||||
onChange={(e) => setCollateralRatioThresh(e.target.value)}
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>Alert me via:</div>
|
||||
<RadioGroup
|
||||
value={alertProvider}
|
||||
onChange={(val) => setAlertProvider(val)}
|
||||
className="flex border border-th-fgd-4 rounded"
|
||||
>
|
||||
<RadioGroup.Option
|
||||
value="sms"
|
||||
className="flex-1 focus:outline-none"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3 rounded-l' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none border-r border-th-fgd-4 hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
SMS
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option
|
||||
value="mail"
|
||||
className="focus:outline-none flex-1"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none border-r border-th-fgd-4 hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
E-mail
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option
|
||||
value="tg"
|
||||
className="focus:outline-none flex-1"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3 rounded-r' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
Telegram
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
{alertProvider === 'sms' ? (
|
||||
<>
|
||||
<div className={`text-th-fgd-1 pb-2`}>Mobile Number</div>
|
||||
<PhoneInput
|
||||
containerClass="w-full"
|
||||
inputClass="!w-full !bg-th-bkg-1 !rounded !h-10 !text-th-fgd-1
|
||||
!border !border-th-fgd-4 !border-l hover:!border-th-primary focus:!border-th-primary default-transition"
|
||||
buttonClass="!bg-th-bkg-2 !border !border-th-fgd-4 !pl-1 hover:!bg-th-bkg-3 focus:!bg-th-primary !rounded-l default-transition"
|
||||
dropdownClass="!bg-th-bkg-1 !border-0 !pl-1 !text-th-fgd-1 !rounded !mt-2 !max-h-40 thin-scroll"
|
||||
country="us"
|
||||
inputProps={{
|
||||
name: 'phone',
|
||||
required: true,
|
||||
// autoFocus: true,
|
||||
}}
|
||||
onChange={(val) => setPhoneNumber({ phone: val, code: '' })}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
{alertProvider === 'mail' ? (
|
||||
<>
|
||||
<div className={`text-th-fgd-1 pb-2`}>Email</div>
|
||||
<Input
|
||||
value={email}
|
||||
type="mail"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
disabled={!connected}
|
||||
onClick={onSubmit}
|
||||
className="w-full mb-2"
|
||||
>
|
||||
{connected ? (
|
||||
<div className="flex justify-center">
|
||||
{submitting ? (
|
||||
<Loading />
|
||||
) : alertProvider === 'tg' ? (
|
||||
'Generate Telegram Bot Code'
|
||||
{marginAccounts.length > 0 ? (
|
||||
<>
|
||||
{marginAccounts.length > 1 ? (
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>Margin Account</div>
|
||||
<MarginAccountSelect
|
||||
value={marginAccounts[0]}
|
||||
onChange={setSelectedMarginAccount}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>
|
||||
Alert me when my collateral ratio is below:
|
||||
</div>
|
||||
{useCustomRatio ? (
|
||||
<Input
|
||||
type="number"
|
||||
value={collateralRatioThresh}
|
||||
onChange={(e) => setCollateralRatioThresh(e.target.value)}
|
||||
suffix="%"
|
||||
/>
|
||||
) : (
|
||||
'Save Alert'
|
||||
<Select
|
||||
value={collateralRatioThresh + '%'}
|
||||
onChange={(v) => setCollateralRatioThresh(v)}
|
||||
>
|
||||
{ratioPresets.map((option, index) => (
|
||||
<Select.Option key={index} value={option}>
|
||||
{option}%
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
<Button
|
||||
className="px-0 py-0 mt-2 border-0 font-normal text-th-fgd-3 text-xs hover:bg-transparent hover:opacity-60"
|
||||
onClick={() => setUseCustomRatio(!useCustomRatio)}
|
||||
>
|
||||
{useCustomRatio
|
||||
? 'Choose a suggested collateral ratio threshold'
|
||||
: 'Enter a custom collateral ratio threshold'}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
'Connect Wallet To Save'
|
||||
)}
|
||||
</Button>
|
||||
<div className="pb-4">
|
||||
<div className={`text-th-fgd-1 pb-2`}>Alert me via:</div>
|
||||
<RadioGroup
|
||||
value={alertProvider}
|
||||
onChange={(val) => setAlertProvider(val)}
|
||||
className="flex border border-th-fgd-4 rounded"
|
||||
>
|
||||
<RadioGroup.Option
|
||||
value="sms"
|
||||
className="flex-1 focus:outline-none"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3 rounded-l' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none border-r border-th-fgd-4 hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
SMS
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option
|
||||
value="mail"
|
||||
className="focus:outline-none flex-1"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none border-r border-th-fgd-4 hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
E-mail
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option
|
||||
value="tg"
|
||||
className="focus:outline-none flex-1"
|
||||
>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked ? 'bg-th-bkg-3 rounded-r' : ''
|
||||
} font-normal text-th-fgd-1 text-center py-1.5 w-full rounded-none hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
Telegram
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
{alertProvider === 'sms' ? (
|
||||
<>
|
||||
<div className={`text-th-fgd-1 pb-2`}>Mobile Number</div>
|
||||
<PhoneInput
|
||||
containerClass="w-full"
|
||||
inputClass="!w-full !bg-th-bkg-1 !rounded !h-10 !text-th-fgd-1
|
||||
!border !border-th-fgd-4 !border-l hover:!border-th-primary focus:!border-th-primary default-transition"
|
||||
buttonClass="!bg-th-bkg-2 !border !border-th-fgd-4 !pl-1 hover:!bg-th-bkg-3 focus:!bg-th-primary !rounded-l default-transition"
|
||||
dropdownClass="!bg-th-bkg-1 !border-0 !pl-1 !text-th-fgd-1 !rounded !mt-2 !max-h-40 thin-scroll"
|
||||
country="us"
|
||||
inputProps={{
|
||||
name: 'phone',
|
||||
required: true,
|
||||
}}
|
||||
onChange={(val) =>
|
||||
setPhoneNumber({ phone: val, code: '' })
|
||||
}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
{alertProvider === 'mail' ? (
|
||||
<>
|
||||
<div className={`text-th-fgd-1 pb-2`}>Email</div>
|
||||
<Input
|
||||
value={email}
|
||||
type="mail"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
disabled={!connected}
|
||||
onClick={onSubmit}
|
||||
className="w-full mb-2"
|
||||
>
|
||||
{connected ? (
|
||||
<div className="flex justify-center">
|
||||
{submitting ? (
|
||||
<Loading />
|
||||
) : alertProvider === 'tg' ? (
|
||||
'Generate Telegram Bot Code'
|
||||
) : (
|
||||
'Save Alert'
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
'Connect Wallet To Save'
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col items-center text-th-fgd-1 p-4 mb-4 rounded-lg border border-th-fgd-4">
|
||||
<ExclamationIcon className="w-8 h-8 text-th-red" />
|
||||
<div className="font-bold text-base pb-1">
|
||||
No Margin Accounts Found
|
||||
</div>
|
||||
<p className="mb-0">
|
||||
Make a deposit to initialize a margin account.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={onClose} className="w-full">
|
||||
Okay, Got It
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import { Listbox } from '@headlessui/react'
|
||||
import styled from '@emotion/styled'
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
min-height: 2.5rem;
|
||||
`
|
||||
|
||||
const Select = ({
|
||||
value,
|
||||
onChange,
|
||||
|
|
@ -15,10 +20,10 @@ const Select = ({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button
|
||||
className={`h-full w-full font-normal bg-th-bkg-1 border border-th-fgd-4 rounded hover:border-th-primary focus:outline-none focus:border-th-primary`}
|
||||
className={`h-full w-full font-normal bg-th-bkg-1 ring-1 ring-th-fgd-4 ring-inset rounded hover:ring-th-primary focus:outline-none focus:border-th-primary`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-between space-x-4 p-3`}
|
||||
<StyledDiv
|
||||
className={`flex items-center justify-between space-x-4 p-2`}
|
||||
>
|
||||
<span className="text-th-fgd-1">
|
||||
{value ? value : placeholder}
|
||||
|
|
@ -28,12 +33,12 @@ const Select = ({
|
|||
) : (
|
||||
<ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
|
||||
)}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
</Listbox.Button>
|
||||
{open ? (
|
||||
<Listbox.Options
|
||||
static
|
||||
className={`text-th-fgd-1 z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
|
||||
className={`text-th-fgd-1 max-h-40 overflow-auto z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md thin-scroll`}
|
||||
>
|
||||
{children}
|
||||
</Listbox.Options>
|
||||
|
|
|
|||
Loading…
Reference in New Issue