Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

group page rework / modal fixes #127

Merged
merged 3 commits into from
Dec 9, 2024
Merged

group page rework / modal fixes #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb2d89c
group page rework / modal fixes
chalabi2 Dec 7, 2024
7e90572
fix: finish the group and modal rework
chalabi2 Dec 7, 2024
88d9b10
fix: tests
fmorency Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
263 changes: 147 additions & 116 deletions components/admins/modals/validatorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import * as Yup from 'yup';
import { calculateIsUnsafe } from '@/utils/maths';
import { TextInput } from '@/components/react';
import { createPortal } from 'react-dom';

const PowerUpdateSchema = Yup.object().shape({
power: Yup.number()
Expand Down Expand Up @@ -121,151 +122,181 @@
(document.getElementById(modalId) as HTMLDialogElement)?.close();
};

return (
const modalContent = (
<dialog
id={modalId}
className={`modal ${openValidatorModal ? 'modal-open' : ''}`}
onClose={handleClose}
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 9999,
backgroundColor: 'transparent',
padding: 0,
margin: 0,
height: '100vh',
width: '100vw',
display: openValidatorModal ? 'flex' : 'none',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Formik
initialValues={{ power: power, totalvp, validatorVPArray }}
validationSchema={PowerUpdateSchema}
onSubmit={() => {}}
enableReinitialize
>
{({ isValid, errors, touched }) => {
return (
<div className="modal-box relative max-w-4xl min-h-96 flex flex-col md:flex-row md:ml-20 -mt-12 rounded-[24px] shadow-lg dark:bg-[#1D192D] bg-[#FFFFFF] transition-all duration-300">
<button
className="btn btn-sm btn-circle text-black dark:text-white btn-ghost absolute right-2 top-2"
onClick={handleClose}
type="button"
>
✕
</button>
<div className="flex flex-col flex-grow w-full p-6 space-y-6">
<h3 className="text-2xl font-bold text-black dark:text-white">Validator Details</h3>
<div className="flex flex-col justify-start items-start gap-4">
<span className="text-sm text-gray-500 dark:text-gray-400">VALIDATOR</span>
<div className="flex flex-row justify-start items-center gap-4">
{validator?.logo_url !== '' ? (
<img className="h-16 w-16 rounded-full" src={validator.logo_url} alt="" />
) : (
<ProfileAvatar walletAddress={validator?.operator_address} size={64} />
)}
<span className="text-2xl font-bold text-black dark:text-white">
{validator?.description.moniker}
</span>
</div>
{({ isValid, errors, touched }) => (
<div className="modal-box relative max-w-4xl min-h-96 flex flex-col md:flex-row md:ml-20 -mt-12 rounded-[24px] shadow-lg dark:bg-[#1D192D] bg-[#FFFFFF] transition-all duration-300">
<button
className="btn btn-sm btn-circle text-black dark:text-white btn-ghost absolute right-2 top-2"
onClick={handleClose}
type="button"
>
✕
</button>
<div className="flex flex-col flex-grow w-full p-6 space-y-6">
<h3 className="text-2xl font-bold text-black dark:text-white">Validator Details</h3>
<div className="flex flex-col justify-start items-start gap-4">
<span className="text-sm text-gray-500 dark:text-gray-400">VALIDATOR</span>
<div className="flex flex-row justify-start items-center gap-4">
{validator?.logo_url !== '' ? (
<img className="h-16 w-16 rounded-full" src={validator.logo_url} alt="" />
) : (
<ProfileAvatar walletAddress={validator?.operator_address} size={64} />
)}
<span className="text-2xl font-bold text-black dark:text-white">
{validator?.description.moniker}
</span>
</div>
</div>

<div className="space-y-6">
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">
SECURITY CONTACT
</span>
<p className="text-md text-black dark:text-white mt-2">
{isEmail(validator?.description.security_contact)
? validator?.description.security_contact
: 'No Security Contact'}
</p>
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">POWER</span>
<div className="flex flex-col gap-2 mt-2">
<div className="flex flex-row gap-2 justify-between items-center">
<div className="relative w-2/3">
<Field name="power">
{({ field, meta }: FieldProps) => (
<div className="relative">
<TextInput
showError={false}
{...field}
type="number"
placeholder={validator?.consensus_power?.toString() ?? 'Inactive'}
className={`input input-bordered w-full ${
meta.touched && meta.error ? 'input-error' : ''
}`}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
field.onChange(e);
setPowerInput(e.target.value);
}}
/>
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-error bottom-0 absolute left-1/2 transform -translate-x-1/2 translate-y-full mt-1 z-50 text-white text-xs"
data-tip={meta.error}
>
<div className="w-0 h-0"></div>
</div>
)}
</div>
)}
</Field>
</div>
<button
type="submit"
className="btn btn-gradient w-1/3"
disabled={!isValid || isSigning}
onClick={() => {
handleUpdate({ power: power });
}}
>
{isSigning ? (
<span className="loading loading-dots loading-sm"></span>
) : (
'Update'
<div className="space-y-6">
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">SECURITY CONTACT</span>
<p className="text-md text-black dark:text-white mt-2">
{isEmail(validator?.description.security_contact)
? validator?.description.security_contact
: 'No Security Contact'}
</p>
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">POWER</span>
<div className="flex flex-col gap-2 mt-2">
<div className="flex flex-row gap-2 justify-between items-center">
<div className="relative w-2/3">
<Field name="power">
{({ field, meta }: FieldProps) => (
<div className="relative">
<TextInput
showError={false}
{...field}
type="number"
placeholder={validator?.consensus_power?.toString() ?? 'Inactive'}
className={`input input-bordered w-full ${
meta.touched && meta.error ? 'input-error' : ''
}`}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
field.onChange(e);
setPowerInput(e.target.value);
}}
/>
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-error bottom-0 absolute left-1/2 transform -translate-x-1/2 translate-y-full mt-1 z-50 text-white text-xs"
data-tip={meta.error}
>
<div className="w-0 h-0"></div>
</div>
)}
</div>
)}
</button>
</Field>
</div>
{isUnsafe && Number(power) > 0 && (
<div className="text-warning text-xs">
Warning: This power update may be unsafe
</div>
)}
<button
type="submit"
className="btn btn-gradient w-1/3"
disabled={!isValid || isSigning}
onClick={() => {

Check warning on line 224 in components/admins/modals/validatorModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/modals/validatorModal.tsx#L224 

Added line #L224 was not covered by tests
handleUpdate({ power: power });
}}
>
{isSigning ? (
<span className="loading loading-dots loading-sm"></span>
) : (
'Update'
)}
</button>
</div>
{isUnsafe && Number(power) > 0 && (
<div className="text-warning text-xs">
Warning: This power update may be unsafe
</div>
)}
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">
OPERATOR ADDRESS
</span>
<div className="text-md mt-2">
<TruncatedAddressWithCopy address={validator?.operator_address} slice={42} />
</div>
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<span className="text-sm text-gray-500 dark:text-gray-400">OPERATOR ADDRESS</span>
<div className="text-md mt-2">
<TruncatedAddressWithCopy address={validator?.operator_address} slice={42} />
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<div className="flex flex-row justify-between items-center relative">
<span className="text-sm text-gray-500 dark:text-gray-400">DETAILS</span>
{validator?.description.details.length > 50 && (
<button
className="btn btn-sm btn-ghost hover:bg-transparent absolute -right-2 -top-2"
onClick={handleDescription}
>
<BsThreeDots />
</button>
)}
</div>
<p className="text-md mt-2 text-black dark:text-white" aria-label="details">
{validator?.description.details
? validator.description.details.substring(0, 50) +
(validator.description.details.length > 50 ? '...' : '')
: 'No Details'}
</p>
</div>
<div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
<div className="flex flex-row justify-between items-center relative">
<span className="text-sm text-gray-500 dark:text-gray-400">DETAILS</span>
{validator?.description.details.length > 50 && (
<button
className="btn btn-sm btn-ghost hover:bg-transparent absolute -right-2 -top-2"
onClick={handleDescription}
>
<BsThreeDots />
</button>
)}
</div>
<p className="text-md mt-2 text-black dark:text-white" aria-label="details">
{validator?.description.details
? validator.description.details.substring(0, 50) +
(validator.description.details.length > 50 ? '...' : '')
: 'No Details'}
</p>
</div>
</div>
</div>
);
}}
</div>
)}
</Formik>
<DescriptionModal
type="validator"
modalId="validator-description-modal"
details={validator?.description.details ?? 'No Details'}
/>
<form method="dialog" className="modal-backdrop">
<button onClick={handleClose}>close</button>
<form
method="dialog"
className="modal-backdrop"
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}}
onSubmit={handleClose}
>
<button>close</button>
</form>
</dialog>
);

// Only render if we're in the browser
if (typeof document !== 'undefined') {
return createPortal(modalContent, document.body);
}

Check warning on line 299 in components/admins/modals/validatorModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/modals/validatorModal.tsx#L299 

Added line #L299 was not covered by tests

return null;

Check warning on line 301 in components/admins/modals/validatorModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/modals/validatorModal.tsx#L301 

Added line #L301 was not covered by tests
}
47 changes: 42 additions & 5 deletions components/admins/modals/warningModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
import { Any } from '@liftedinit/manifestjs/dist/codegen/google/protobuf/any';
import { MsgRemoveValidator } from '@liftedinit/manifestjs/dist/codegen/strangelove_ventures/poa/v1/tx';
import { useChain } from '@cosmos-kit/react';
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import { PiWarning } from 'react-icons/pi';
import { createPortal } from 'react-dom';

interface WarningModalProps {
admin: string;
Expand Down Expand Up @@ -90,11 +91,27 @@
(document.getElementById(modalId) as HTMLDialogElement)?.close();
};

return (
const modalContent = (
<dialog
id={modalId}
className={`modal ${openWarningModal ? 'modal-open' : ''}`}
onClose={handleClose}
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 9999,
backgroundColor: 'transparent',
padding: 0,
margin: 0,
height: '100vh',
width: '100vw',
display: openWarningModal ? 'flex' : 'none',
alignItems: 'center',
justifyContent: 'center',
}}
>
<form
method="dialog"
Expand All @@ -106,7 +123,7 @@
>
✕
</button>
<div className="p-4 ">
<div className="p-4">
<div className="flex flex-col gap-2 items-center mb-6">
<PiWarning className="text-yellow-200 text-6xl" />
</div>
Expand Down Expand Up @@ -136,9 +153,29 @@
</button>
</div>
</form>
<form method="dialog" className="modal-backdrop">
<button onClick={handleClose}>close</button>
<form
method="dialog"
className="modal-backdrop"
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}}
onSubmit={handleClose}
>
<button>close</button>
</form>
</dialog>
);

// Only render if we're in the browser
if (typeof document !== 'undefined') {
return createPortal(modalContent, document.body);
}

Check warning on line 178 in components/admins/modals/warningModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/modals/warningModal.tsx#L178 

Added line #L178 was not covered by tests

return null;

Check warning on line 180 in components/admins/modals/warningModal.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/modals/warningModal.tsx#L180 

Added line #L180 was not covered by tests
}
Loading
Loading