@chakra-ui/react#Radio JavaScript Examples
The following examples show how to use
@chakra-ui/react#Radio.
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: components.js From idena-web with MIT License | 6 votes |
|
export function ChooseItemRadio({isChecked, onChange, ...props}) {
return (
<Radio
isChecked={isChecked}
onChange={onChange}
borderColor="white"
sx={{
'&[data-checked]': {
color: 'gray.500',
},
}}
_disabled={{
bg: 'none',
borderColor: 'gray.300',
}}
{...props}
/>
)
}
Example #2
| Source File: components.js From idena-web with MIT License | 6 votes |
|
VotingOption = React.forwardRef(
({value, annotation, children = value, ...props}, ref) => (
<Flex
align="center"
justify="space-between"
border="1px"
borderColor="gray.100"
borderRadius="md"
px={3}
py={2}
>
<Radio
ref={ref}
borderColor="gray.100"
value={value}
title={children.length > 50 ? children : ''}
{...props}
>
<Text maxW="xs" isTruncated>
{children}
</Text>
</Radio>
<Text color="muted" fontSize="sm">
{annotation}
</Text>
</Flex>
)
)
Example #3
| Source File: components.js From idena-web with MIT License | 6 votes |
|
PresetFormControlOption = React.forwardRef(
({isChecked, ...props}, ref) => (
<Radio
ref={ref}
borderColor="gray.100"
borderWidth={1}
borderRadius="md"
p={2}
px={3}
isChecked={isChecked}
{...props}
/>
)
)
Example #4
| Source File: containers.js From idena-web with MIT License | 5 votes |
|
export function NewOraclePresetDialog({onChoosePreset, onCancel, ...props}) {
const {t} = useTranslation()
const [preset, setPreset] = React.useState()
return (
<Dialog size="lg" onClose={onCancel} {...props}>
<DialogHeader mb={4}>{t('New Oracle voting')}</DialogHeader>
<DialogBody>
<Stack>
<Text color="muted" fontSize="sm">
{t('Choose an option to vote')}
</Text>
<RadioGroup spacing={0} onChange={value => setPreset(value)}>
<Stack>
<Radio
value="fact"
alignItems="flex-start"
borderColor="gray.100"
>
<Stack spacing={1}>
<Text>{t('Fact certification')}</Text>
<Text color="muted">
{t(
'Oracles who vote against the majority are penalized. Voting will be started in a future date.'
)}
</Text>
</Stack>
</Radio>
<Radio
value="poll"
alignItems="flex-start"
borderColor="gray.100"
>
<Stack spacing={1}>
<Text>{t('Poll')}</Text>
<Text color="muted">
{t(
'Oracles can vote for any option. Rewards will be paid to everyone regardless of the outcome of the vote.'
)}
</Text>
</Stack>
</Radio>
<Radio
value="decision"
alignItems="flex-start"
borderColor="gray.100"
>
<Stack spacing={1}>
<Text>{t('Making decision')}</Text>
<Text color="muted">
{t('51% consensus is required to make a decision')}
</Text>
</Stack>
</Radio>
<Radio value="custom" borderColor="gray.100">
{t('Custom')}
</Radio>
</Stack>
</RadioGroup>
</Stack>
</DialogBody>
<DialogFooter>
<SecondaryButton onClick={onCancel}>{t('Cancel')}</SecondaryButton>
<PrimaryButton onClick={() => onChoosePreset(preset)}>
{t('Continue')}
</PrimaryButton>
</DialogFooter>
</Dialog>
)
}
Example #5
| Source File: index.jsx From UpStats with MIT License | 4 votes |
|
export default function Dashboard() {
const api = create({
baseURL: "/api",
});
const toast = useToast();
const router = useRouter();
const [systems, setSystems] = useState([]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [mailing, setMailing] = useState(false);
const [currentEditSystem, setCurrentEditSystem] = useState({
name: "",
url: "",
});
const [subsCount, setSubsCount] = useState(0);
const loadSystems = async () => {
try {
const { data } = await http.get("/systems");
setSystems(data);
} catch (e) {
toast({
title: "Error",
description: "Error Loading Systems",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
const loadConfig = async () => {
try {
const { data } = await http.get("/config");
setMailing(data.mailing);
} catch (e) {
console.log("Error Loading Config");
}
};
const loadCount = async () => {
try {
const { data } = await http.get("/subs");
setSubsCount(data.length);
} catch (e) {
toast({
title: "Error",
description: "Error Loading Subs Count",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
useEffect(() => {
const token = window.localStorage.getItem("token");
http.setJwt(token);
if (!token) {
setIsLoggedIn(false);
toast({
title: "Error",
description: "Redirecting to Login Page",
status: "warning",
duration: 9000,
isClosable: true,
});
router.push("/login");
} else setIsLoggedIn(true);
}, []);
useEffect(() => {
loadSystems();
}, []);
useEffect(() => {
loadCount();
}, []);
useEffect(() => {
loadConfig();
}, []);
const handleDelete = async (system) => {
const originalSystems = systems;
const newSystems = originalSystems.filter((s) => s._id !== system._id);
setSystems(newSystems);
try {
await http.delete(`/systems/${system._id}`);
} catch (ex) {
if (ex.response && ex.response.status === 404)
toast({
title: "Error",
description: "System May be Already Deleted",
status: "error",
duration: 9000,
isClosable: true,
});
setSystems(originalSystems);
}
};
const handleAdd = async (system) => {
try {
const { data } = await api.post("/systems", system, {
headers: localStorage.getItem("token"),
});
setSystems([...systems, data]);
} catch (ex) {
toast({
title: "Error",
description: "Submit Unsuccessful",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
const formik = useFormik({
initialValues: {
name: "",
url: "",
type: "web",
},
validationSchema: Yup.object({
name: Yup.string()
.max(15, "Must be 15 characters or less")
.required("Required"),
url: Yup.string().required("Required"),
type: Yup.string(),
}),
onSubmit: (values) => {
handleAdd(values);
//alert(JSON.stringify(values, null, 2));
},
});
const handleEdit = async () => {
const originalSystems = systems;
let newSystems = [...systems];
const idx = newSystems.findIndex(
(sys) => sys._id === currentEditSystem._id
);
newSystems[idx] = { ...currentEditSystem };
setSystems(newSystems);
try {
await http.put(`/systems/${currentEditSystem._id}`, {
name: currentEditSystem.name,
url: currentEditSystem.url,
type: currentEditSystem.type,
});
setCurrentEditSystem({ name: "", url: "" });
} catch (ex) {
toast({
title: "Error",
description: "Error Updating The System",
status: "error",
duration: 9000,
isClosable: true,
});
setSystems(originalSystems);
setCurrentEditSystem({ name: "", url: "" });
}
};
const handleChangeConfig = async () => {
try {
await http.put(`/config`, {
mailing: mailing,
});
} catch (ex) {
toast({
title: "Error",
description: "Error Updating The Config",
status: "error",
duration: 9000,
isClosable: true,
});
}
};
return (
<FormikProvider value={formik}>
<>
<Layout>
{isLoggedIn ? (
<>
<div className=" mt-12 mx-auto">
<div>
<div className="m-auto p-4 md:w-1/4 sm:w-1/2 w-full">
<div className="p-12 py-6 rounded-lg">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="w-12 h-12 inline-block users-status"
viewBox="0 0 24 24"
>
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
<circle cx={9} cy={7} r={4} />
<path d="M23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75" />
</svg>
<h2 className="title-font font-medium text-3xl">
{subsCount}
</h2>
<p className="leading-relaxed ">Users Subscribed</p>
</div>
</div>
</div>
</div>
{/* CRUD Status List */}
<div className="w-full max-w-sm overflow-hidden rounded-lg items-center mx-auto">
<h3 className="text-2xl font-black text-black">
Add New System
</h3>
<form onSubmit={formik.handleSubmit} className="p-3">
<Stack>
<Text>System Title</Text>
<Input
id="name"
name="name"
type="text"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.name}
placeholder="Enter here"
isInvalid={
formik.touched.name && formik.errors.name ? true : false
}
/>
{formik.touched.name && formik.errors.name ? (
<Alert status="error">
<AlertIcon />
{formik.errors.name}
</Alert>
) : null}
</Stack>
<Stack mt={2}>
<Text>System URL</Text>
<Input
placeholder="Enter here"
id="url"
name="url"
type="text"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.url}
isInvalid={
formik.touched.url && formik.errors.url ? true : false
}
/>
{formik.touched.url && formik.errors.url ? (
<Alert status="error">
<AlertIcon />
{formik.errors.url}
</Alert>
) : null}
</Stack>
{/* Select System Type */}
<RadioGroup>
<Stack mt={5}>
<Field as={Radio} type="radio" name="type" value="web">
Web
</Field>
<Field
as={Radio}
type="radio"
name="type"
value="telegram"
>
Telegram Bot
</Field>
</Stack>
</RadioGroup>
{/* Add */}
<div className="mt-4">
<button
style={{ backgroundColor: "#3747D4" }}
className="px-4 py-2 text-white rounded hover:bg-black focus:outline-none"
type="submit"
>
Add
</button>
</div>
</form>
{/* Status Page List */}
{/* Show Sites here */}
{systems.map((system) => (
<div key={system._id} className="status-items-manage">
<div className="items">
<span className="site-title">{system?.name}</span>
<div className="i">
<EditIcon
mr="2"
onClick={() => {
setCurrentEditSystem(system);
}}
/>
<DeleteIcon
color="red"
m="2"
onClick={() => {
handleDelete(system);
}}
/>
</div>
</div>
</div>
))}
{/* End */}
{currentEditSystem.name ? (
<div className="mt-4">
<Stack>
<h3 className="text-2xl font-black text-black">
Edit System
</h3>
<Stack>
<Text>System Title</Text>
<Input
id="name"
name="name"
type="text"
value={currentEditSystem.name}
onChange={(e) => {
setCurrentEditSystem({
...currentEditSystem,
name: e.target.value,
});
}}
placeholder="Enter here"
/>
</Stack>
<Stack mt={2}>
<Text>System URL</Text>
<Input
placeholder="Enter here"
id="url"
name="url"
type="text"
value={currentEditSystem.url}
onChange={(e) =>
setCurrentEditSystem({
...currentEditSystem,
url: e.target.value,
})
}
/>
</Stack>
</Stack>
{/* Add */}
<div className="mt-4">
<button
onClick={handleEdit}
style={{ backgroundColor: "#3747D4" }}
className="px-4 py-2 text-white rounded hover:bg-black focus:outline-none"
>
Done
</button>
</div>
</div>
) : (
""
)}
<Stack mt={12}>
<h3 className="text-xl font-black text-bold">Configs</h3>
<p className="text-md font-black text-bold">Mailing</p>
<Switch
size="lg"
isChecked={mailing}
onChange={(e) => setMailing(e.target.checked)}
/>
<div className="mt-4">
<button
onClick={handleChangeConfig}
style={{ backgroundColor: "#3747D4" }}
className="px-4 py-2 text-white rounded hover:bg-black focus:outline-none"
>
Done
</button>
</div>
</Stack>
</div>
</>
) : (
""
)}
{/* Total No. of Users Subscribed */}
</Layout>
</>
</FormikProvider>
);
}
Example #6
| Source File: rent.js From idena-web with MIT License | 4 votes |
|
export default function Rent() {
const router = useRouter()
const {t} = useTranslation()
const {coinbase} = useAuthState()
const buySharedNodeDisclosure = useDisclosure()
const [state, setState] = useState(0)
const [checkedProviders, setCheckedProviders] = useState([])
const {
data: indexerData,
isFetched: indexerIsFetched,
isLoading: indexerIsLoading,
} = useQuery(['last-block'], () => getLastBlock(), {
retry: false,
refetchOnWindowFocus: false,
})
const {data: identity, isLoading: identityIsLoading} = useQuery(
['fetch-identity', coinbase],
() => fetchIdentity(coinbase, true),
{
enabled: !!coinbase,
refetchOnWindowFocus: false,
}
)
const {data: providers, isLoading: providersIsLoading} = useQuery(
['providers'],
getProviders,
{
initialData: [],
enabled: !!indexerIsFetched,
refetchOnWindowFocus: false,
}
)
const indexerLastBlock = indexerData?.height || 0
useEffect(() => {
async function updateStatus() {
const shuffled = shuffle(providers.filter(x => Boolean(x.slots)))
shuffled.forEach(provider => {
checkProviderSyncing(provider.data.url)
.then(response =>
setCheckedProviders(prev => {
const blocksLeft = indexerLastBlock - response?.currentBlock
return mergeProviders(prev, {
...provider,
duration: response.duration,
blocksLeft,
status:
blocksLeft > SYNCING_DIFF
? ProviderStatus.OutOfSync
: ProviderStatus.Success,
})
})
)
.catch(() =>
setCheckedProviders(prev =>
mergeProviders(prev, {
...provider,
duration: MAX_DURATION,
status: ProviderStatus.Error,
})
)
)
})
}
if (providers.length) updateStatus()
}, [indexerLastBlock, providers])
const isLoading = indexerIsLoading || identityIsLoading || providersIsLoading
const isDesktop = useIsDesktop()
const {
isOpen: isOpenRentDetailDrawer,
onOpen: onOpenRentDetailDrawer,
onClose: onCloseRentDetailDrawer,
} = useDisclosure()
const selectedProvider = checkedProviders.length && checkedProviders[state]
return (
<Layout canRedirect={false}>
<Page mb={14} pt={[4, 6]}>
<Box w="full">
<Flex align="center" justify="space-between">
<AngleArrowBackIcon
stroke="#578FFF"
display={['block', 'none']}
position="absolute"
left={4}
top={4}
h="28px"
w="28px"
onClick={() => {
router.back()
}}
/>
<PageTitleNew>{t('Rent a shared node')}</PageTitleNew>
<CloseButton
display={['none', 'flex']}
onClick={() => router.back()}
/>
</Flex>
<Box>
<Table>
<Thead display={['none', 'table-header-group']}>
<Tr>
<RoundedTh isLeft width={rem(40)}></RoundedTh>
<RoundedTh>{t('Node URL')}</RoundedTh>
<RoundedTh>{t('Owner')}</RoundedTh>
<RoundedTh>{t('Location')}</RoundedTh>
<RoundedTh>{t('Latency, sec')}</RoundedTh>
<RoundedTh textAlign="right">
{t('Slots available')}
</RoundedTh>
<RoundedTh isRight textAlign="right">
{t('Price per validation')}
</RoundedTh>
</Tr>
</Thead>
<Tbody>
{isLoading
? new Array(10).fill(0).map((_, idx) => (
<Tr key={idx}>
<Td colSpan={7} px={0}>
<Skeleton h={[32, 8]} />
</Td>
</Tr>
))
: checkedProviders.map((p, idx) => (
<Tr key={idx}>
<Td display={['none', 'table-cell']}>
<Radio
isChecked={state === idx}
onClick={() => setState(idx)}
borderColor="#d2d4d9"
/>
</Td>
<Td
borderBottom={['solid 0px', 'solid 1px #e8eaed']}
px={[0, 3]}
py={[1, 2]}
>
<Flex
direction="column"
border={['solid 1px', 'initial']}
borderColor={['gray.100', 'inherit']}
borderRadius={['8px', 0]}
p={[4, 0]}
onClick={() => {
setState(idx)
if (!isDesktop) onOpenRentDetailDrawer()
}}
>
<Flex justifyContent="flex-start">
<Flex
direction="column"
maxW={['100%', 'initial']}
>
<Text
fontSize={['mdx', 'md']}
fontWeight={[500, 400]}
isTruncated
>
{p.data.url}
</Text>
<ProviderStatusLabel
status={p.status}
blocksLeft={p.blocksLeft}
></ProviderStatusLabel>
</Flex>
<Flex display="none">
<Text
fontSize="mdx"
fontWeight={500}
color="gray.064"
>
FILL_RATING
</Text>
<SoftStarIcon mt="3px" ml="3px" h={4} w={4} />
</Flex>
</Flex>
<Flex
display={['flex', 'none']}
justifyContent="flex-start"
>
<Flex
direction="column"
fontSize="base"
color="gray.064"
mt={4}
w="50%"
>
<Text>{t('Latency, sec')}</Text>
<Flex>
<Text color="gray.500" mr={1}>
{p.status === ProviderStatus.Error
? '—'
: (p.duration / 1000).toFixed(3)}
</Text>
<Text display="none">/ FILL_SLOTS</Text>
</Flex>
</Flex>
<Flex
direction="column"
fontSize="base"
color="gray.064"
mt={4}
w="50%"
>
<Text>Price</Text>
<Flex>
<Text color="gray.500">
{GetProviderPrice(
p.data,
identity?.state,
identity?.age
)}{' '}
iDNA
</Text>
</Flex>
</Flex>
</Flex>
</Flex>
</Td>
<Td display={['none', 'table-cell']}>
<Link
target="_blank"
rel="noreferrer"
color="brandBlue.100"
href={`https://t.me/${p.data.ownerName}`}
>
{p.data.ownerName}
</Link>
</Td>
<Td display={['none', 'table-cell']}>
{p.data.location}
</Td>
<Td display={['none', 'table-cell']}>
{p.status === ProviderStatus.Error
? '—'
: (p.duration / 1000).toFixed(3)}
</Td>
<Td display={['none', 'table-cell']} textAlign="right">
{p.slots}
</Td>
<Td display={['none', 'table-cell']} textAlign="right">
{GetProviderPrice(
p.data,
identity?.state,
identity?.age
)}{' '}
iDNA
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
</Box>
<Stack
display={['none', 'flex']}
isInline
spacing={2}
justify="flex-end"
bg="white"
borderTop="1px"
borderTopColor="gray.100"
px={4}
py={3}
h={14}
position="fixed"
bottom={0}
left={0}
right={0}
>
<SecondaryButton onClick={router.back}>Cancel</SecondaryButton>
<PrimaryButton onClick={buySharedNodeDisclosure.onOpen}>
{t('Continue')}
</PrimaryButton>
</Stack>
</Page>
{selectedProvider && identity && (
<ProviderInfoDrawer
p={selectedProvider}
identity={identity}
isOpen={isOpenRentDetailDrawer}
onClose={onCloseRentDetailDrawer}
onSubmit={buySharedNodeDisclosure.onOpen}
/>
)}
<BuySharedNodeForm
{...buySharedNodeDisclosure}
providerId={selectedProvider && selectedProvider.id}
url={selectedProvider && selectedProvider.data.url}
from={coinbase}
amount={
selectedProvider &&
GetProviderPrice(
selectedProvider.data,
identity?.state,
identity?.age
)
}
to={selectedProvider && selectedProvider.data.address}
/>
</Layout>
)
}
Example #7
| Source File: components.js From idena-web with MIT License | 4 votes |
|
export function ActivateMiningDrawer({
mode,
delegationEpoch,
pendingUndelegation,
currentEpoch,
isLoading,
onChangeMode,
onActivate,
onClose,
...props
}) {
const {t} = useTranslation()
const [delegatee, setDelegatee] = useState(pendingUndelegation)
const {onCopy, hasCopied} = useClipboard('https://www.idena.io/download')
const sizeInput = useBreakpointValue(['lg', 'md'])
const sizeButton = useBreakpointValue(['mdx', 'md'])
const variantRadio = useBreakpointValue(['mobile', 'bordered'])
const variantPrimary = useBreakpointValue(['primaryFlat', 'primary'])
const variantSecondary = useBreakpointValue(['secondaryFlat', 'secondary'])
const waitForDelegationEpochs =
3 - (currentEpoch - delegationEpoch) <= 0
? 3
: 3 - (currentEpoch - delegationEpoch)
return (
<AdDrawer isMining={isLoading} onClose={onClose} {...props}>
<DrawerHeader>
<Flex
direction="column"
textAlign={['center', 'start']}
justify={['space-between', 'flex-start']}
>
<Flex
order={[2, 1]}
mt={[6, 0]}
align="center"
justify="center"
bg="blue.012"
h={12}
w={12}
rounded="xl"
>
<UserIcon boxSize={6} color="blue.500" />
</Flex>
<Heading
order={[1, 2]}
color="brandGray.500"
fontSize={['base', 'lg']}
fontWeight={[['bold', 500]]}
lineHeight="base"
mt={[0, 4]}
>
{t('Miner status')}
</Heading>
</Flex>
</DrawerHeader>
<DrawerBody>
<Stack spacing={[6]} mt={[0, 30]}>
<FormControl as={Stack} spacing={[1, 3]}>
<FormLabel
fontSize={['11px', '13px']}
fontWieght={['400!important', '500']}
color={['muted', 'initial']}
mb={[0, 2]}
p={0}
>
{t('Type')}
</FormLabel>
<RadioGroup
isInline
d="flex"
flexDirection={['column', 'row']}
value={mode}
onChange={onChangeMode}
>
<Radio
variant={variantRadio}
value={NodeType.Miner}
flex={['0 0 56px', 1]}
fontSize={['base', 'md']}
fontWeight={['500', '400']}
px={[4, 2]}
py={['18px', 2]}
mr={2}
>
{t('Mining')}
</Radio>
<Radio
variant={variantRadio}
value={NodeType.Delegator}
flex={['0 0 56px', 1]}
fontSize={['base', 'md']}
fontWeight={['500', '400']}
px={[4, 2]}
py={['18px', 2]}
>
{t('Delegation')}
</Radio>
</RadioGroup>
</FormControl>
{mode === NodeType.Delegator ? (
<Stack spacing={5}>
<FormControl as={Stack} spacing={[0, 3]}>
<FormLabel fontSize={['base', 'md']}>
{t('Delegation address')}
</FormLabel>
<Input
size={sizeInput}
value={delegatee}
isDisabled={Boolean(pendingUndelegation)}
onChange={e => setDelegatee(e.target.value)}
/>
</FormControl>
{pendingUndelegation ? (
<ErrorAlert>
{t(
'You have recently disabled delegation. You need to wait for {{count}} epochs to delegate to a new address.',
{count: waitForDelegationEpochs}
)}
</ErrorAlert>
) : (
<ErrorAlert alignItems="start" pb="3">
<Stack>
<Text>
{t(
'You can lose your stake, all your mining and validation rewards if you delegate your mining status.'
)}
</Text>
<Text>
{t('You can disable delegation at the next epoch only.')}
</Text>
</Stack>
</ErrorAlert>
)}
</Stack>
) : (
<Stack spacing={[4, 5]}>
<Text fontSize={['mdx', 'md']} mb={[0, 3]}>
{t(
'To activate mining status please download the desktop version of Idena app'
)}
</Text>
<Flex
borderY={[0, '1px']}
h={16}
alignItems="center"
justifyContent="space-between"
sx={{
'&': {
borderColor: 'gray.100',
},
}}
>
<Flex w={['100%', 'auto']}>
<Stack
w={['100%', 'auto']}
spacing={[4, 2]}
isInline
align="center"
color="brand.gray"
>
<Flex
shrink={0}
boxSize={[8, 5]}
align="center"
justify="center"
backgroundColor={['brandGray.012', 'initial']}
borderRadius="10px"
>
<LaptopIcon boxSize={5} />
</Flex>
<Flex
direction="row"
w={['100%', 'auto']}
justify={['space-between', 'flex-start']}
borderBottom={['1px', 0]}
borderColor="gray.100"
lineHeight={['48px', 'auto']}
>
<Text as="span" fontSize={['base', 14]} fontWeight={500}>
{t('Desktop App')}
</Text>
{hasCopied ? (
<Text
display={['block', 'none']}
as="span"
color="green.500"
fontSize="base"
fontWeight={500}
>
{t('Copied')}
</Text>
) : (
<FlatButton
display={['block', 'none']}
onClick={onCopy}
fontWeight="500"
>
{t('Copy link')}
</FlatButton>
)}
</Flex>
</Stack>
</Flex>
<Flex display={['none', 'flex']}>
<Link
href="https://www.idena.io/download"
target="_blank"
color="brandBlue.500"
rounded="md"
fontWeight={500}
fontSize={13}
>
{t('Download')}
</Link>
</Flex>
</Flex>
<Flex
rounded="md"
bg="gray.50"
borderColor="gray.50"
borderWidth={1}
px={6}
py={4}
>
<Text color="muted" fontSize={['mdx', 'md']} lineHeight="20px">
{t(
'Use your private key backup to migrate your account. You can import your private key backup at the Settings page in Idena Desktop app.'
)}
</Text>
</Flex>
</Stack>
)}
</Stack>
<PrimaryButton
display={['flex', 'none']}
mt={4}
w="100%"
fontSize="mobile"
size="lg"
isDisabled={mode === NodeType.Miner}
isLoading={isLoading}
onClick={() => {
onActivate({delegatee})
}}
loadingText={t('Waiting...')}
>
{t('Submit')}
</PrimaryButton>
</DrawerBody>
<DrawerFooter display={['none', 'flex']} mt={[6, 0]} px={0}>
<Flex width="100%" justify={['space-evenly', 'flex-end']}>
<Button
variant={variantSecondary}
order={[3, 1]}
size={sizeButton}
type="button"
onClick={onClose}
>
{t('Cancel')}
</Button>
<Divider
order="2"
display={['block', 'none']}
h={10}
orientation="vertical"
color="gray.100"
/>
<Button
variant={variantPrimary}
order={[1, 3]}
size={sizeButton}
ml={[0, 2]}
isDisabled={mode === NodeType.Miner}
isLoading={isLoading}
onClick={() => {
onActivate({delegatee})
}}
loadingText={t('Waiting...')}
>
{t('Submit')}
</Button>
</Flex>
</DrawerFooter>
</AdDrawer>
)
}
