97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import Modal from './Modal'
|
|
import { ElementTitle } from './styles'
|
|
import Button from './Button'
|
|
import Input from './Input'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
|
import Select from './Select'
|
|
|
|
const NODE_URLS = [
|
|
{ label: 'Mango Node', value: 'https://mango.rpcpool.com' },
|
|
{
|
|
label: 'Genesys Go',
|
|
value: 'https://lokidfxnwlabdq.main.genesysgo.net:8899/',
|
|
},
|
|
{
|
|
label: 'Project Serum',
|
|
value: 'https://solana-api.projectserum.com/',
|
|
},
|
|
{ label: 'Custom', value: '' },
|
|
]
|
|
|
|
const CUSTOM_NODE = NODE_URLS.find((n) => n.label === 'Custom')
|
|
|
|
export const NODE_URL_KEY = 'node-url-key-0.4'
|
|
|
|
const SettingsModal = ({ isOpen, onClose }) => {
|
|
const actions = useMangoStore((s) => s.actions)
|
|
const [rpcEndpointUrl, setRpcEndpointUrl] = useLocalStorageState(
|
|
NODE_URL_KEY,
|
|
NODE_URLS[0].value
|
|
)
|
|
const rpcEndpoint =
|
|
NODE_URLS.find((node) => node.value === rpcEndpointUrl) || CUSTOM_NODE
|
|
|
|
console.log('rpcEndpoint', rpcEndpointUrl)
|
|
|
|
const handleSetEndpointUrl = (endpointUrl) => {
|
|
setRpcEndpointUrl(endpointUrl)
|
|
actions.updateConnection(endpointUrl)
|
|
onClose()
|
|
}
|
|
|
|
const handleSelectEndpointUrl = (url) => {
|
|
setRpcEndpointUrl(url)
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
<Modal.Header>
|
|
<ElementTitle noMarignBottom>Advanced Settings</ElementTitle>
|
|
</Modal.Header>
|
|
<div className="flex flex-col items-center text-th-fgd-1">
|
|
<Select
|
|
value={rpcEndpoint.label}
|
|
onChange={(url) => handleSelectEndpointUrl(url)}
|
|
className="w-full"
|
|
>
|
|
<div className="space-y-2">
|
|
{NODE_URLS.map((node) => (
|
|
<Select.Option
|
|
key={node.value}
|
|
value={node.value}
|
|
className={`bg-th-bkg-1 relative rounded-md w-full px-3 py-3 cursor-pointer default-transition flex hover:bg-th-bkg-3 focus:outline-none`}
|
|
>
|
|
<div className="flex items-center justify-between w-full">
|
|
{node.label}
|
|
</div>
|
|
</Select.Option>
|
|
))}
|
|
</div>
|
|
</Select>
|
|
{rpcEndpoint.label === 'Custom' ? (
|
|
<Input.Group className="w-full mt-4">
|
|
<Input
|
|
type="text"
|
|
value={rpcEndpointUrl}
|
|
onChange={(e) => setRpcEndpointUrl(e.target.value)}
|
|
prefix="RPC Node URL"
|
|
/>
|
|
</Input.Group>
|
|
) : null}
|
|
<div className={`flex justify-center w-full mt-4`}>
|
|
<Button
|
|
onClick={() => handleSetEndpointUrl(rpcEndpointUrl)}
|
|
className="w-full"
|
|
>
|
|
<div className={`flex items-center justify-center`}>Save</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default React.memo(SettingsModal)
|