Skip to content

Commit

Permalink
fix contact modal rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@chalabi2
chalabi2 committed Nov 4, 2024
1 parent 960112f commit eea0ef5
Show file tree
Hide file tree
Showing 7 changed files with 247 additions and 135 deletions.
21 changes: 15 additions & 6 deletions components/factory/forms/BurnForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Formik, Form } from 'formik';
import Yup from '@/utils/yupExtensions';
import { NumberInput, TextInput } from '@/components/react/inputs';
import { ExtendedMetadataSDKType, truncateString } from '@/utils';
import { TailwindModal } from '@/components/react/modal';

interface BurnPair {
address: string;
Expand Down Expand Up @@ -46,6 +47,8 @@ export default function BurnForm({
const [isModalOpen, setIsModalOpen] = useState(false);
const [burnPairs, setBurnPairs] = useState<BurnPair[]>([{ address: '', amount: '' }]);

const [isContactsOpen, setIsContactsOpen] = useState(false);

const { tx, isSigning, setIsSigning } = useTx(chainName);
const { estimateFee } = useFeeEstimation(chainName);
const { burn } = osmosis.tokenfactory.v1beta1.MessageComposer.withTypeUrl;
Expand Down Expand Up @@ -290,12 +293,9 @@ export default function BurnForm({
rightElement={
<button
type="button"
style={{ transition: 'none' }}
onClick={() => {
setRecipient(address);
setFieldValue('recipient', address);
}}
className="btn btn-primary transition-none btn-sm text-white absolute right-2 top-1/2 -translate-y-1/2"
aria-label="contacts-btn"
onClick={() => setIsContactsOpen(true)}
className="btn btn-primary btn-sm text-white"
>
<MdContacts className="w-5 h-5" />
</button>
Expand Down Expand Up @@ -324,6 +324,15 @@ export default function BurnForm({
)}
</button>
</div>
<TailwindModal
isOpen={isContactsOpen}
setOpen={setIsContactsOpen}
showContacts={true}
onSelect={(selectedAddress: string) => {
setRecipient(selectedAddress);
setFieldValue('recipient', selectedAddress);
}}
/>
</Form>
)}
</Formik>
Expand Down
16 changes: 12 additions & 4 deletions components/factory/forms/MintForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Formik, Form } from 'formik';
import Yup from '@/utils/yupExtensions';
import { NumberInput, TextInput } from '@/components/react/inputs';
import { ExtendedMetadataSDKType, truncateString } from '@/utils';
import { TailwindModal } from '@/components/react/modal';

export default function MintForm({
isAdmin,
Expand All @@ -32,6 +33,7 @@ export default function MintForm({
}>) {
const [amount, setAmount] = useState('');
const [recipient, setRecipient] = useState(address);
const [isContactsOpen, setIsContactsOpen] = useState(false);

const { tx, isSigning, setIsSigning } = useTx(chainName);
const { estimateFee } = useFeeEstimation(chainName);
Expand Down Expand Up @@ -199,10 +201,7 @@ export default function MintForm({
<button
type="button"
style={{ transition: 'none' }}
onClick={() => {
setRecipient(address);
setFieldValue('recipient', address);
}}
onClick={() => setIsContactsOpen(true)}
className="btn btn-primary transition-none btn-sm text-white absolute right-2 top-1/2 -translate-y-1/2"
>
<MdContacts className="w-5 h-5" />
Expand Down Expand Up @@ -234,6 +233,15 @@ export default function MintForm({
</button>
)}
</div>
<TailwindModal
isOpen={isContactsOpen}
setOpen={setIsContactsOpen}
showContacts={true}
onSelect={(selectedAddress: string) => {
setRecipient(selectedAddress);
setFieldValue('recipient', selectedAddress);
}}
/>
</Form>
)}
</Formik>
Expand Down
1 change: 1 addition & 0 deletions components/groups/components/groupProposals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { GroupInfo } from '../modals/groupInfo';
import { ExtendedGroupType } from '@/hooks/useQueries';
import { MemberManagementModal } from '../modals/memberManagmentModal';
import { ThresholdDecisionPolicy } from '@chalabi/manifestjs/dist/codegen/cosmos/group/v1/types';
import { TailwindModal } from '@/components/react';

type GroupProposalsProps = {
policyAddress: string;
Expand Down
7 changes: 6 additions & 1 deletion components/groups/forms/proposals/ProposalMessages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1023,7 +1023,10 @@ const CustomSendMessageFields: React.FC<CustomSendMessageFieldsProps> = ({
<button
type="button"
aria-label="contacts-btn"
onClick={() => setIsContactsOpen(true)}
onClick={() => {
(document.getElementById('message_edit_modal') as HTMLDialogElement)?.close();
setIsContactsOpen(true);
}}
className="btn btn-primary btn-sm text-white"
>
<MdContacts className="w-5 h-5" />
Expand Down Expand Up @@ -1061,10 +1064,12 @@ const CustomSendMessageFields: React.FC<CustomSendMessageFieldsProps> = ({
isOpen={isContactsOpen}
setOpen={setIsContactsOpen}
showContacts={true}
showMessageEditModal={true}
onSelect={(selectedAddress: string) => {
handleChange('to_address', selectedAddress);
setIsContactsOpen(false);
}}
currentAddress={currentAddress}
/>
</div>
);
Expand Down
230 changes: 138 additions & 92 deletions components/groups/modals/memberManagmentModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { chainName } from '@/config';
import { Any } from '@chalabi/manifestjs/dist/codegen/google/protobuf/any';
import { MemberSDKType } from '@chalabi/manifestjs/dist/codegen/cosmos/group/v1/types';
import { CopyIcon, TrashIcon } from '@/components/icons';
import { MdContacts } from 'react-icons/md';
import { TailwindModal } from '@/components/react/modal';

interface ExtendedMember extends MemberSDKType {
isNew: boolean;
Expand Down Expand Up @@ -145,10 +147,18 @@ export function MemberManagementModal({
setIsSigning(false);
};

const [isContactsOpen, setIsContactsOpen] = useState(false);
const [activeIndex, setActiveIndex] = useState<number | null>(null);

const handleContactButtonClick = (index: number) => {
setActiveIndex(index);
setIsContactsOpen(true);
};

return (
<dialog id="member-management-modal" className="modal">
<dialog id="member-management-modal" className="modal z-[150]">
<div className="flex flex-col items-center w-full h-full">
<div className="modal-box dark:bg-[#1D192D] bg-[#FFFFFF] rounded-[24px] max-w-[39rem] p-6 dark:text-white text-black">
<div className=" modal-box dark:bg-[#1D192D] bg-[#FFFFFF] rounded-[24px] max-w-[39rem] p-6 dark:text-white text-black">
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
Expand All @@ -169,101 +179,137 @@ export function MemberManagementModal({
onSubmit={handleConfirm}
enableReinitialize
>
{({ values, errors, touched, isValid }) => (
<Form>
<div className="flex items-center mb-4 px-4 text-sm text-gray-400">
<div className="w-[10%] ml-3">#</div>
<div className="w-[35%] ml-11">Name</div>
<div className="w-[45%]">Address</div>
<div className="w-[10%]"></div>
{({ values, errors, touched, isValid, setFieldValue }) => (
<>
<div className="z-[9999]">
<TailwindModal
isOpen={isContactsOpen}
setOpen={setIsContactsOpen}
showContacts={true}
showMemberManagementModal={true}
onSelect={(selectedAddress: string) => {
if (activeIndex !== null) {
const fieldName = `members.${activeIndex}.address`;
setFieldValue(fieldName, selectedAddress);
}
setIsContactsOpen(false);
}}
currentAddress={address}
/>
</div>
<div className="space-y-4 max-h-[420px] overflow-y-auto">
{values.members.map((member, index) => (
<div
key={index}
className={`flex items-center dark:bg-[#2D2A3E] bg-[#0000000A] rounded-[12px] p-3 ${
member.markedForDeletion ? 'opacity-50' : ''
}`}
>
<div className="w-[10%] text-center">{index + 1}</div>
{/* Name Field with Daisy UI Tooltip */}
<div className="w-[35%] ml-12 pr-6 relative">
<Field name={`members.${index}.metadata`}>
{({ field, meta }: FieldProps) => (
<div>
<input
{...field}
type="text"
className={`input input-sm focus:outline-none input-ghost bg-transparent w-full max-w-xs ${
meta.touched && meta.error ? 'input-error' : ''
}`}
placeholder="member name"
disabled={member.markedForDeletion}
/>
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-primary dark:text-white text-white text-xs mt-1 absolute left-1/2 transform translate-y-7 -translate-x-4 z-50"
data-tip={meta.error}
>
{/* Invisible element to anchor the tooltip */}
<div className="w-0 h-0"></div>
</div>
)}
</div>
)}
</Field>
</div>
{/* Address Field with Daisy UI Tooltip */}
<div className="w-[45%] flex items-center relative">
<Field name={`members.${index}.address`}>
{({ field, meta }: FieldProps) => (
<div className="flex-grow">
<input
{...field}
type="text"
className={`input input-sm focus:outline-none disabled:bg-transparent disabled:border-none bg-transparent input-ghost w-full ${
meta.touched && meta.error ? 'input-error' : ''
}`}
placeholder="manifest1..."
disabled={!member.isNew || member.markedForDeletion}
/>
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-primary dark:text-white text-white text-xs mt-1 absolute left-1/2 transform translate-y-7 -translate-x-4 z-50"
data-tip={meta.error}
>
<div className="w-0 h-0 "></div>
</div>
)}
</div>
)}
</Field>
<button
onClick={e => {
e.preventDefault();
navigator.clipboard.writeText(member.address);
}}
className="btn btn-ghost hover:bg-transparent btn-sm -ml-2"
>
<CopyIcon className="w-4 h-4" />
</button>
<Form>
<div className="flex items-center mb-4 px-4 text-sm text-gray-400">
<div className="w-[10%] ml-3">#</div>
<div className="w-[35%] ml-11">Name</div>
<div className="w-[45%]">Address</div>
<div className="w-[10%]"></div>
</div>
<div className="space-y-4 max-h-[420px] overflow-y-auto">
{values.members.map((member, index) => (
<div
key={index}
className={`flex items-center dark:bg-[#2D2A3E] bg-[#0000000A] rounded-[12px] p-3 ${
member.markedForDeletion ? 'opacity-50' : ''
}`}
>
<div className="w-[10%] text-center">{index + 1}</div>
{/* Name Field with Daisy UI Tooltip */}
<div className="w-[35%] ml-12 pr-6 relative">
<Field name={`members.${index}.metadata`}>
{({ field, meta }: FieldProps) => (
<div>
<input
{...field}
type="text"
className={`input input-sm focus:outline-none input-ghost bg-transparent w-full max-w-xs ${
meta.touched && meta.error ? 'input-error' : ''
}`}
placeholder="member name"
disabled={member.markedForDeletion}
/>
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-primary dark:text-white text-white text-xs mt-1 absolute left-1/2 transform translate-y-7 -translate-x-4 z-50"
data-tip={meta.error}
>
{/* Invisible element to anchor the tooltip */}
<div className="w-0 h-0"></div>
</div>
)}
</div>
)}
</Field>
</div>
{/* Address Field with Daisy UI Tooltip */}
<div className="w-[45%] flex items-center relative">
<Field name={`members.${index}.address`}>
{({ field, meta }: FieldProps) => (
<div className="flex-grow relative">
<input
{...field}
type="text"
className={`input input-sm focus:outline-none disabled:bg-transparent disabled:border-none bg-transparent input-ghost w-full ${
meta.touched && meta.error ? 'input-error' : ''
}`}
placeholder="manifest1..."
disabled={!member.isNew || member.markedForDeletion}
/>
{member.isNew && !member.markedForDeletion && (
<button
type="button"
aria-label="contacts-btn"
onClick={() => {
handleContactButtonClick(index);
(
document.getElementById(
'member-management-modal'
) as HTMLDialogElement
).close();
}}
className="btn btn-primary btn-xs text-white absolute right-2 top-1"
>
<MdContacts className="w-4 h-4" />
</button>
)}
{meta.touched && meta.error && (
<div
className="tooltip tooltip-bottom tooltip-open tooltip-primary dark:text-white text-white text-xs mt-1 absolute left-1/2 transform translate-y-7 -translate-x-4 z-50"
data-tip={meta.error}
>
<div className="w-0 h-0"></div>
</div>
)}
</div>
)}
</Field>
<button
onClick={e => {
e.preventDefault();
navigator.clipboard.writeText(member.address);
}}
className="btn btn-ghost hover:bg-transparent btn-sm ml-2"
>
<CopyIcon className="w-4 h-4" />
</button>
</div>
<div className="w-[10%] flex justify-end">
<button
type="button"
onClick={() => handleMemberToggleDeletion(index)}
className={`btn btn-primary btn-square rounded-[12px] btn-sm `}
>
<TrashIcon className="text-white w-5 h-5" />
</button>
</div>
</div>
<div className="w-[10%] flex justify-end">
<button
type="button"
onClick={() => handleMemberToggleDeletion(index)}
className={`btn btn-primary btn-square rounded-[12px] btn-sm `}
>
<TrashIcon className="text-white w-5 h-5" />
</button>
</div>
</div>
))}
</div>
</Form>
))}
</div>
</Form>
</>
)}
</Formik>
</div>

<div className="mt-4 flex justify-center w-full">
<button
type="button"
Expand Down
Loading

0 comments on commit eea0ef5

Please sign in to comment.