@headlessui/react#Switch TypeScript Examples
The following examples show how to use
@headlessui/react#Switch.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ThemeSwitch.tsx From thvu-blog with MIT License | 5 votes |
|
ThemeSwitch = () => {
const [isDark, mounted, setTheme] = useDarkTheme();
return (
<div className="flex items-center w-12 h-6 ml-4">
{mounted && (
<Switch
checked={isDark}
title="Theme switch"
onChange={() => setTheme(isDark ? "light" : "dark")}
className={`${isDark ? "bg-gray-700" : "bg-gray-300"}
relative inline-flex shrink-0 h-6 w-12 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span className="sr-only">Use setting</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className={`${
isDark ? "translate-x-6" : "translate-x-0"
} border-2 border-transparent absolute h-6 w-6 text-gray-900 dark:text-gray-100 transition ease-in-out duration-200`}
>
{isDark ? (
<path
fillRule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clipRule="evenodd"
/>
) : (
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
)}
</svg>
<span
aria-hidden="true"
className={`${
isDark ? "translate-x-0 " : "translate-x-6"
} bg-gray-100 pointer-events-none inline-block h-6 w-6 rounded-full shadow-lg transform ring-0 transition ease-in-out duration-200 `}
></span>
</Switch>
)}
</div>
);
}
Example #2
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 5 votes |
|
Toggle = ({ checked, className, onChange, ...rest }: Props): JSX.Element => {
return (
<Switch
checked={checked}
onChange={onChange}
className={clsx(
checked
? clsx(
{ 'bg-interlayDenim-600': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT },
{ 'dark:bg-kintsugiMidnight-600': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA }
)
: 'bg-gray-200',
'relative',
'inline-flex',
'flex-shrink-0',
'h-6',
'w-11',
'border-2',
'border-transparent',
'rounded-full',
'cursor-pointer',
'transition-colors',
'ease-in-out',
'duration-200',
'focus:outline-none',
'focus:ring-2',
'focus:ring-offset-2',
{ 'focus:ring-interlayDenim': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT },
{ 'dark:focus:ring-kintsugiSupernova': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA },
className
)}
{...rest}
>
<span className='sr-only'>Use setting</span>
<span
aria-hidden='true'
className={clsx(
checked ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none',
'inline-block',
'h-5',
'w-5',
'rounded-full',
'bg-white',
'shadow',
'transform',
'ring-0',
'transition',
'ease-in-out',
'duration-200'
)}
/>
</Switch>
);
}
Example #3
| Source File: index.tsx From polkabtc-ui with Apache License 2.0 | 5 votes |
|
Toggle = ({
checked,
className,
onChange,
...rest
}: Props): JSX.Element => {
return (
<Switch
checked={checked}
onChange={onChange}
className={clsx(
checked ? 'bg-primary-600' : 'bg-gray-200',
'relative',
'inline-flex',
'flex-shrink-0',
'h-6',
'w-11',
'border-2',
'border-transparent',
'rounded-full',
'cursor-pointer',
'transition-colors',
'ease-in-out',
'duration-200',
'focus:outline-none',
'focus:ring-2',
'focus:ring-offset-2',
'focus:ring-primary',
className
)}
{...rest}>
<span className='sr-only'>Use setting</span>
<span
aria-hidden='true'
className={clsx(
checked ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none',
'inline-block',
'h-5',
'w-5',
'rounded-full',
'bg-white',
'shadow',
'transform',
'ring-0',
'transition',
'ease-in-out',
'duration-200'
)} />
</Switch>
);
}
Example #4
| Source File: settings.tsx From pagely with MIT License | 4 votes |
|
Page = () => {
const router = useRouter();
const { data } = useClerkSWR<ghSites>(
`/api/getSiteData/github/?siteId=${router.query.siteId}`
);
const urlWithSession = useUserWithSession(
'/api/updateSiteData/github/showcase'
);
const deleteUrlWithSession = useUserWithSession('/api/deleteSite/github');
const [enabled, setEnabled] = useState(data?.inShowcase);
const [isLoading, setIsLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<div>
<div>
<GitHubSiteLayout activeTab='settings'>
<h1 className='text-4xl font-extrabold'>Settings</h1>
<p className='mt-4 text-gray-800 font-base'>
{data?.siteName || 'Just a second...'}
</p>
<div className='mt-8'>
<h2 className='text-2xl font-bold'>Showcase Settings</h2>
<div className='flex items-center my-5'>
<span className='inline-block mr-2'>
I prefer not to display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in showcase
</span>
<Switch
checked={enabled}
onChange={setEnabled}
style={{ zoom: 0.5 }}
className={`${enabled ? 'bg-gray-900' : 'bg-gray-700'}
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}>
<span className='sr-only'>Use setting</span>
<span
aria-hidden='true'
className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
/>
</Switch>
<span className='inline-block ml-2'>
Display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in{' '}
<Link href='/showcase'>
<a className='text-blue-500 hover:underline'>Showcase</a>
</Link>
</span>
</div>
<button
onClick={() => {
setIsLoading(true);
axios
.post(urlWithSession, {
inShowcase: enabled,
siteId: data.id,
})
.then((res) => {
console.log(res);
toast.success(
enabled
? `Yay ?, ${data?.siteName} will be displayed in showcase soon.`
: `${data?.siteName} will be removed showcase soon.`,
{
duration: 5000,
}
);
setIsLoading(false);
});
}}
className={`h-10 px-3 mb-10 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700 ${
isLoading && 'opacity-50 cursor-wait'
}`}>
Update Showcase Settings
</button>
</div>
<hr className='w-[70vw] my-3 text-gray-200' />
<div className='mt-8'>
<h2 className='text-2xl font-bold text-red-500'>Danger Zone</h2>
<div className='mt-5'>
<button
onClick={openModal}
className='h-10 px-3 mb-10 bg-red-600 rounded shadow-md text-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-800 hover:bg-red-400'>
{/* <button className='px-2 py-1 text-red-600 border border-red-500 rounded shadow bg-red-50 hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-200'> */}
Delete <strong>{data?.siteName}</strong>
</button>
</div>
</div>
</GitHubSiteLayout>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 z-10 overflow-y-auto'
onClose={closeModal}>
<div className='min-h-screen px-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'>
<Dialog.Overlay className='fixed inset-0 backdrop-filter backdrop-blur-sm bg-white/40' />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className='inline-block h-screen align-middle'
aria-hidden='true'>
​
</span>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'>
<div className='inline-block w-full max-w-lg p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white border rounded-md shadow-xl border-gray-500/40'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-red-700'>
Are you sure that you want to delete{' '}
<strong>{data?.siteName}</strong>?
</Dialog.Title>
<div className='mt-2 mb-10'>
<p className='text-sm text-gray-500'>
Proceed with caution. This action cannot be reversed.
</p>
</div>
<div className='mt-4'>
<button
type='button'
className='inline-flex justify-center px-4 py-1 mr-2 text-sm font-medium text-blue-900 bg-blue-100 border border-blue-500 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500'
onClick={closeModal}>
Cancel
</button>
<button
type='button'
className='inline-flex justify-center px-4 py-1 text-sm font-medium text-red-900 bg-red-100 border border-red-500 rounded-md hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500'
onClick={() => {
axios
.post(deleteUrlWithSession, {
siteId: data?.id,
})
.then((res) => {
if (res.data.success) {
toast.success('Site deleted successfully', {
duration: 2000,
});
setTimeout(() => {
router.push('/dashboard');
}, 2000);
} else {
toast.error('Site deletion failed');
}
});
}}>
Delete
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
</div>
);
}
Example #5
| Source File: settings.tsx From pagely with MIT License | 4 votes |
|
Page = () => {
const router = useRouter();
const { data } = useClerkSWR<notionSites>(
`/api/getSiteData/notion/?siteId=${router.query.notionId}`
);
const urlWithSession = useUserWithSession(
'/api/updateSiteData/notion/showcase'
);
const deleteUrlWithSession = useUserWithSession('/api/deleteSite/notion');
const [enabled, setEnabled] = useState(data?.inShowcase);
const [isLoading, setIsLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<div>
<div>
<SidebarLayout activeTab='settings'>
<h1 className='text-4xl font-extrabold'>Settings</h1>
<p className='mt-4 text-gray-800 font-base'>
{data?.siteName || 'Just a second...'}
</p>
<div className='mt-8'>
<h2 className='text-2xl font-bold'>Showcase Settings</h2>
<div className='flex items-center my-5'>
<span className='inline-block mr-2'>
I prefer not to display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in showcase
</span>
<Switch
checked={enabled}
onChange={setEnabled}
style={{ zoom: 0.5 }}
className={`${enabled ? 'bg-gray-900' : 'bg-gray-700'}
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}>
<span className='sr-only'>Use setting</span>
<span
aria-hidden='true'
className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
/>
</Switch>
<span className='inline-block ml-2'>
Display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in{' '}
<Link href='/showcase'>
<a className='text-blue-500 hover:underline'>Showcase</a>
</Link>
</span>
</div>
<button
onClick={() => {
setIsLoading(true);
axios
.post(urlWithSession, {
inShowcase: enabled,
siteId: data.id,
})
.then((res) => {
console.log(res);
toast.success(
enabled
? `Yay ?, ${data?.siteName} will be displayed in showcase soon.`
: `${data?.siteName} will be removed showcase soon.`,
{
duration: 5000,
}
);
setIsLoading(false);
});
}}
className={`h-10 px-3 mb-10 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700 ${
isLoading && 'opacity-50 cursor-wait'
}`}>
Update Showcase Settings
</button>
</div>
<hr className='w-[70vw] my-3 text-gray-200' />
<div className='mt-8'>
<h2 className='text-2xl font-bold'>Password protection</h2>
{data?.isPasswordProtected ? (
<div>
<div className='flex items-center my-5'>
<span className='inline-block'>
<strong>{data?.siteName}</strong> has already been password
protected
</span>
</div>
<button className='h-10 px-3 mb-10 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700'>
<a
href='https://staticshield.vercel.app/dashboard'
target='_blank'
rel='noopener noreferrer'>
View details
</a>
</button>
</div>
) : (
<div>
<div className='flex items-center my-5'>
<span className='inline-block'>
Password protect <strong>{data?.siteName}</strong>
</span>
</div>
<button
onClick={() => {
window.open(
`https://staticshield.vercel.app/new/?name=${data?.siteName}&desc=${data?.siteDesc}&url=${data?.subdomain}.pagely.site&id=${data?.id}`,
'_blank'
);
}}
className={`mb-10 h-10 inline-flex items-center px-3 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700`}>
Password protect{' '}
<strong className='mx-1'>{data?.siteName}</strong> with{' '}
<span className='inline-flex !items-center justify-center p-1 mx-1 bg-white rounded'>
<Image
src='/staticshield.png'
alt=''
width='20'
height='20'
// className='block mt-2'
/>
</span>
StaticShield
</button>
</div>
)}
</div>
<hr className='w-[70vw] my-3 text-gray-200' />
<div className='mt-8'>
<h2 className='text-2xl font-bold text-red-500'>Danger Zone</h2>
<div className='mt-5'>
<button
onClick={openModal}
className='h-10 px-3 mb-10 bg-red-600 rounded shadow-md text-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-800 hover:bg-red-400'>
{/* <button className='px-2 py-1 text-red-600 border border-red-500 rounded shadow bg-red-50 hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-200'> */}
Delete <strong>{data?.siteName}</strong>
</button>
</div>
</div>
</SidebarLayout>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 z-10 overflow-y-auto'
onClose={closeModal}>
<div className='min-h-screen px-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'>
<Dialog.Overlay className='fixed inset-0 backdrop-filter backdrop-blur-sm bg-white/40' />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className='inline-block h-screen align-middle'
aria-hidden='true'>
​
</span>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'>
<div className='inline-block w-full max-w-lg p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white border rounded-md shadow-xl border-gray-500/40'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-red-700'>
Are you sure that you want to delete{' '}
<strong>{data?.siteName}</strong>?
</Dialog.Title>
<div className='mt-2 mb-10'>
<p className='text-sm text-gray-500'>
Proceed with caution. This action cannot be reversed.
</p>
</div>
<div className='mt-4'>
<button
type='button'
className='inline-flex justify-center px-4 py-1 mr-2 text-sm font-medium text-blue-900 bg-blue-100 border border-blue-500 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500'
onClick={closeModal}>
Cancel
</button>
<button
type='button'
className='inline-flex justify-center px-4 py-1 text-sm font-medium text-red-900 bg-red-100 border border-red-500 rounded-md hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500'
onClick={() => {
axios
.post(deleteUrlWithSession, {
siteId: data?.id,
})
.then((res) => {
if (res.data.success) {
toast.success('Site deleted successfully', {
duration: 2000,
});
setTimeout(() => {
router.push('/dashboard');
}, 2000);
} else {
toast.error('Site deletion failed');
}
});
}}>
Delete
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
</div>
);
}
Example #6
| Source File: SendSys.tsx From pali-wallet with MIT License | 4 votes |
|
SendSys = () => {
const { getFiatAmount } = usePrice();
const controller = getController();
const { alert, navigate } = useUtils();
const { activeNetwork, fiat, activeAccount } = useStore();
const [verifyAddress, setVerifyAddress] = useState<boolean>(true);
const [ZDAG, setZDAG] = useState<boolean>(false);
const [selectedAsset, setSelectedAsset] = useState<any | null>(null);
const [recommend, setRecommend] = useState(0.00001);
const [fiatValueToShow, setFiatValueToShow] = useState('');
const [form] = Form.useForm();
const handleGetFee = useCallback(async () => {
const recommendFee =
await controller.wallet.account.sys.tx.getRecommendedFee(
activeNetwork.url
);
setRecommend(recommendFee);
form.setFieldsValue({ fee: recommendFee });
}, [controller.wallet.account, form]);
useEffect(() => {
handleGetFee();
form.setFieldsValue({
verify: true,
ZDAG: false,
fee: recommend,
});
}, [form, handleGetFee]);
const assets = activeAccount.assets
? Object.values(activeAccount.assets)
: [];
const hasAccountAssets = assets && assets.length > 0;
const handleSelectedAsset = (item: number) => {
console.log('selected item', item);
if (assets) {
const getAsset = assets.find((asset: any) => asset.assetGuid === item);
if (getAsset) {
setSelectedAsset(getAsset);
return;
}
setSelectedAsset(null);
}
};
const verifyOnChange = (value: any) => {
setVerifyAddress(value);
form.setFieldsValue({ verify: value });
};
const ZDAGOnChange = (value: any) => {
setZDAG(value);
form.setFieldsValue({ ZDAG: value });
};
const nextStep = ({ receiver, amount, fee }: any) => {
try {
navigate('/send/confirm', {
state: {
tx: {
sender: activeAccount.address,
receivingAddress: receiver,
amount: Number(amount),
fee,
token: selectedAsset ? selectedAsset.assetGuid : null,
isToken: !!selectedAsset,
rbf: !ZDAG,
},
},
});
} catch (error) {
alert.removeAll();
alert.error('An internal error has occurred.');
}
};
const returnFiatAmount = async () => {
if (!selectedAsset) {
const value = await getFiatAmount(
Number(recommend),
6,
String(fiat.asset)
);
setFiatValueToShow(value);
}
const value = await getFiatAmount(
Number(recommend) + Number(recommend),
6,
String(fiat.asset)
);
setFiatValueToShow(value);
};
useEffect(() => {
returnFiatAmount();
}, [selectedAsset]);
return (
<div className="mt-4">
<p className="flex flex-col items-center justify-center text-center font-rubik">
<span className="text-brand-royalblue font-poppins font-thin">
Balance
</span>
{selectedAsset
? getAssetBalance(selectedAsset, activeAccount)
: activeAccount.balances.syscoin}
</p>
<Form
form={form}
id="send-form"
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
initialValues={{
verify: true,
ZDAG: false,
fee: recommend,
}}
onFinish={nextStep}
autoComplete="off"
className="standard flex flex-col gap-3 items-center justify-center mt-4 text-center md:w-full"
>
<Form.Item
name="receiver"
className="md:w-full md:max-w-md"
hasFeedback
rules={[
{
required: true,
message: '',
},
() => ({
validator(_, value) {
if (
!value ||
isValidSYSAddress(value, activeNetwork, verifyAddress)
) {
return Promise.resolve();
}
return Promise.reject();
},
}),
]}
>
<Input type="text" placeholder="Receiver" className="large" />
</Form.Item>
<div className="flex items-center justify-center md:w-full md:max-w-md">
{hasAccountAssets && (
<Form.Item
name="asset"
className=""
rules={[
{
required: false,
message: '',
},
]}
>
<Menu>
<div className="relative inline-block text-left">
<Menu.Button
disabled={!hasAccountAssets}
className="inline-flex justify-center py-3 w-20 text-white text-sm font-medium bg-fields-input-primary hover:bg-opacity-30 border border-fields-input-border focus:border-fields-input-borderfocus rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
{selectedAsset?.symbol
? formatUrl(String(selectedAsset?.symbol), 2)
: 'SYS'}
<ChevronDoubleDownIcon
className="text-violet-200 hover:text-violet-100 -mr-1 ml-2 w-5 h-5"
aria-hidden="true"
/>
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
{hasAccountAssets && (
<Menu.Items className="scrollbar-styled absolute z-10 left-0 mt-2 py-3 w-44 h-56 text-brand-white font-poppins bg-fields-input-primary border border-fields-input-border focus:border-fields-input-borderfocus rounded-lg shadow-2xl overflow-auto origin-top-right">
{activeAccount && (
<>
{hasAccountAssets &&
Object.values(activeAccount.assets).map(
(item: any) => (
<>
<Menu.Item>
<button
onClick={() => handleSelectedAsset(-1)}
className="group flex items-center justify-between px-2 py-2 w-full hover:text-brand-royalblue text-brand-white font-poppins text-sm border-0 border-transparent transition-all duration-300"
>
<p>SYS</p>
<small>Native</small>
</button>
</Menu.Item>
<Menu.Item>
<button
onClick={() =>
handleSelectedAsset(item.assetGuid)
}
className="group flex items-center justify-between px-2 py-2 w-full hover:text-brand-royalblue text-brand-white font-poppins text-sm border-0 border-transparent transition-all duration-300"
>
<p>{item.symbol}</p>
<small>
{isNFT(item.assetGuid)
? 'NFT'
: 'SPT'}
</small>
</button>
</Menu.Item>
</>
)
)}
</>
)}
</Menu.Items>
)}
</Transition>
</div>
</Menu>
</Form.Item>
)}
<div
className={`${
hasAccountAssets ? 'w-48 ml-4' : 'w-72'
} flex gap-x-0.5 items-center justify-center md:w-full`}
>
<Form.Item
id="verify-address-switch"
name="verify"
className="flex-1 w-32 text-center bg-fields-input-primary border border-fields-input-border focus:border-fields-input-borderfocus rounded-l-full md:w-full"
rules={[
{
required: false,
message: '',
},
]}
>
<Tooltip
childrenClassName="text-brand-white h-4"
content="Pali verifies your address to check if it is a valid SYS address. It's useful disable this verification if you want to send to specific type of addresses, like legacy. Only disable this verification if you are fully aware of what you are doing."
>
<p
className={`${
!hasAccountAssets && ' absolute top-0 left-8'
} text-10px cursor-default`}
>
Verify address
</p>
</Tooltip>
<Switch
checked={verifyAddress}
onChange={verifyOnChange}
className="relative inline-flex items-center w-9 h-4 border border-brand-royalblue rounded-full"
>
<span className="sr-only">Verify address</span>
<span
className={`${
verifyAddress
? 'translate-x-6 bg-warning-success'
: 'translate-x-1'
} inline-block w-2 h-2 transform bg-warning-error rounded-full`}
/>
</Switch>
</Form.Item>
<Form.Item
name="ZDAG"
className="flex-1 w-32 text-center bg-fields-input-primary border border-fields-input-border focus:border-fields-input-borderfocus rounded-r-full"
rules={[
{
required: false,
message: '',
},
]}
>
<Tooltip
childrenClassName="text-brand-white h-4"
content="Disable this option for Replace-by-fee (RBF) and enable for Z-DAG, a exclusive Syscoin feature. Z-DAG enables faster transactions but should not be used for high amounts."
>
<p
className={`${
!hasAccountAssets && 'absolute top-0 right-14'
} text-10px cursor-default`}
>
Z-DAG
</p>
</Tooltip>
<Switch
checked={ZDAG}
onChange={ZDAGOnChange}
className="relative inline-flex items-center w-9 h-4 bg-transparent border border-brand-royalblue rounded-full"
>
<span className="sr-only">Z-DAG</span>
<span
className={`${
ZDAG
? 'bg-warning-success translate-x-6'
: 'bg-warning-error translate-x-1'
} inline-block w-2 h-2 transform rounded-full`}
id="z-dag-switch"
/>
</Switch>
</Form.Item>
</div>
</div>
<Form.Item
name="amount"
className="md:w-full md:max-w-md"
hasFeedback
rules={[
{
required: true,
message: '',
},
() => ({
validator(_, value) {
const balance = selectedAsset
? selectedAsset.balance / 10 ** selectedAsset.decimals
: Number(activeAccount?.balances.syscoin);
if (value > balance) {
return Promise.reject();
}
return Promise.resolve();
},
}),
]}
>
<Input className="large" type="number" placeholder="Amount" />
</Form.Item>
<div className="flex gap-x-0.5 items-center justify-center mx-2 md:w-full md:max-w-md">
<Form.Item
name="recommend"
className="py-1.5 w-12 text-center bg-fields-input-primary border border-fields-input-border focus:border-fields-input-borderfocus rounded-l-full opacity-50"
rules={[
{
required: false,
message: '',
},
]}
>
<Tooltip content="Use recommended fee. Disabled for SYS networks because the fee used in transactions is already the recommended with current network conditions.">
<div>
<Icon
wrapperClassname="w-6 ml-3 mb-1"
name="verified"
className="text-warning-success opacity-50 cursor-not-allowed"
/>
</div>
</Tooltip>
</Form.Item>
<Form.Item
name="fee"
className="md:w-full"
hasFeedback
rules={[
{
required: true,
message: '',
},
]}
>
<Tooltip content="Network fee">
<Input
disabled
className="block pl-4 pr-8 py-3 w-60 text-brand-white text-sm bg-fields-input-primary border border-fields-input-border rounded-r-full outline-none opacity-50 cursor-not-allowed md:w-full"
id="fee-input"
type="number"
placeholder="Fee network"
value={recommend}
/>
</Tooltip>
</Form.Item>
</div>
<p className="flex flex-col items-center justify-center p-0 max-w-xs text-center text-brand-royalblue sm:w-full md:my-4">
<span className="text-xs">
{`With current network conditions we recommend a fee of ${recommend} SYS`}
</span>
<span className="mt-0.5 text-brand-white font-rubik text-xs">
{'≈ '}
{fiatValueToShow}
</span>
</p>
<SecondaryButton type="submit" id="next-btn">
Next
</SecondaryButton>
</Form>
</div>
);
}
Example #7
| Source File: CustomRPC.tsx From pali-wallet with MIT License | 4 votes |
|
CustomRPCView = ({
selectedToEdit,
isSyscoinToEdit,
}: {
isSyscoinToEdit?: boolean;
selectedToEdit?: INetwork;
}) => {
const [loading, setLoading] = useState(false);
const [edit, setEdit] = useState(false);
const [isSyscoinRpc, setIsSyscoinRpc] = useState(Boolean(isSyscoinToEdit));
const { alert } = useUtils();
const controller = getController();
const onSubmit = async (data: CustomRpcParams) => {
setLoading(true);
const customRpc = {
...data,
isSyscoinRpc,
};
try {
if (!selectedToEdit) await controller.wallet.addCustomRpc(customRpc);
else await controller.wallet.editCustomRpc(customRpc, selectedToEdit);
setEdit(true);
} catch (error: any) {
console.log('error custom rpc', error);
alert.removeAll();
alert.error(error.message);
}
setLoading(false);
};
return (
<>
{edit ? (
<ManageNetwork />
) : (
<Layout title="CUSTOM RPC">
<Form
id="rpc"
name="rpc"
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
initialValues={
selectedToEdit && {
label: selectedToEdit.label ?? '',
rpcUrl: selectedToEdit.url ?? '',
chainId: selectedToEdit.chainId ?? '',
}
}
onFinish={onSubmit}
autoComplete="off"
className="standard flex flex-col gap-2 items-center justify-center text-center"
>
<Form.Item
id="network-switch"
name="network-switch"
rules={[
{
required: false,
message: '',
},
]}
>
<div className="flex gap-x-2 my-4 text-xs">
<p>Ethereum</p>
<Switch
checked={isSyscoinRpc}
onChange={() => setIsSyscoinRpc(!isSyscoinRpc)}
className="relative inline-flex items-center w-9 h-4 border border-brand-royalblue rounded-full"
>
<span className="sr-only">Syscoin Network</span>
<span
className={`${
isSyscoinRpc
? 'translate-x-6 bg-brand-royalblue'
: 'translate-x-1 bg-brand-deepPink100'
} inline-block w-2 h-2 transform rounded-full`}
/>
</Switch>
<p>Syscoin</p>
</div>
</Form.Item>
<Form.Item
name="label"
className="md:w-full"
hasFeedback
rules={[
{
required: true,
message: '',
},
]}
>
<Input type="text" placeholder="Label" className="large" />
</Form.Item>
<Form.Item
name="rpcUrl"
className="md:w-full"
hasFeedback
rules={[
{
required: true,
message: '',
},
]}
>
<Input
type="text"
placeholder={`${
isSyscoinRpc ? 'Trezor Block Explorer' : 'RPC URL'
}`}
className="large"
/>
</Form.Item>
<Form.Item
name="chainId"
hasFeedback
className="md:w-full"
rules={[
{
required: !isSyscoinRpc,
message: '',
},
]}
>
<Input
type="text"
placeholder="Chain ID"
className={`${isSyscoinRpc ? 'hidden' : 'block'} large`}
/>
</Form.Item>
<Form.Item
hasFeedback
className="md:w-full"
name="token_contract_address"
rules={[
{
required: false,
message: '',
},
]}
>
<Input
type="text"
placeholder="Token Contract Address (optional)"
className={`${isSyscoinRpc ? 'hidden' : 'block'} large`}
/>
</Form.Item>
<p className="px-8 py-4 text-center text-brand-white font-poppins text-sm">
You can edit this later if you need on network settings menu.
</p>
<div className="absolute bottom-12 md:static">
<SecondaryButton type="submit" loading={loading}>
Save
</SecondaryButton>
</div>
</Form>
</Layout>
)}
</>
);
}
