-
Notifications
You must be signed in to change notification settings - Fork 5
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.
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
feat: allow user to leave a group #88
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,11 @@ | ||
import { TruncatedAddressWithCopy } from '@/components/react/addressCopy'; | ||
import { useBalance } from '@/hooks/useQueries'; | ||
import { shiftDigits } from '@/utils'; | ||
import ProfileAvatar from '@/utils/identicon'; | ||
import { ExtendedGroupType } from '@/hooks/useQueries'; | ||
import { UpdateGroupModal } from './updateGroupModal'; | ||
import { ThresholdDecisionPolicySDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types'; | ||
|
||
import { useFeeEstimation, useTx } from '@/hooks'; | ||
import { chainName } from '@/config'; | ||
import { cosmos } from '@liftedinit/manifestjs'; | ||
interface GroupInfoProps { | ||
modalId: string; | ||
group: ExtendedGroupType | null; | ||
|
@@ -15,6 +15,9 @@ interface GroupInfoProps { | |
} | ||
|
||
export function GroupInfo({ modalId, group, policyAddress, address, onUpdate }: GroupInfoProps) { | ||
const { tx, isSigning, setIsSigning } = useTx(chainName); | ||
const { leaveGroup } = cosmos.group.v1.MessageComposer.withTypeUrl; | ||
const { estimateFee } = useFeeEstimation(chainName); | ||
if (!group || !group.policies || group.policies.length === 0) return null; | ||
|
||
const policy = group.policies[0]; | ||
|
@@ -95,6 +98,30 @@ export function GroupInfo({ modalId, group, policyAddress, address, onUpdate }: | |
return <InfoItem label="Author" value="Invalid author information" />; | ||
} | ||
|
||
const handleLeave = async () => { | ||
setIsSigning(true); | ||
|
||
try { | ||
const msg = leaveGroup({ | ||
address: address, | ||
groupId: group?.id, | ||
}); | ||
|
||
const fee = await estimateFee(address, [msg]); | ||
await tx([msg], { | ||
fee, | ||
onSuccess: () => { | ||
setIsSigning(false); | ||
onUpdate(); | ||
}, | ||
}); | ||
} catch (error) { | ||
console.error('Error submitting proposal:', error); | ||
} finally { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Provide user feedback when an error occurs during leave operation Currently, if an error occurs while leaving the group, the user is not notified. Consider displaying a user-friendly error message to inform the user of the issue. Add code to display an error notification to the user. For example: catch (error) {
console.error('Error leaving group:', error);
+ // Display error to the user
+ showErrorNotification('An error occurred while leaving the group. Please try again.');
} finally {
setIsSigning(false);
} Ensure that
|
||
setIsSigning(false); | ||
} | ||
}; | ||
|
||
return ( | ||
<dialog id={modalId} className="modal"> | ||
<div className="modal-box bg-secondary rounded-[24px] max-h-['574px'] max-w-[542px] p-6"> | ||
|
@@ -112,16 +139,27 @@ export function GroupInfo({ modalId, group, policyAddress, address, onUpdate }: | |
|
||
<div className="flex justify-between items-center mb-6"> | ||
<span className="text-xl font-semibold text-secondary-content">Info</span> | ||
<button | ||
aria-label={'update-btn'} | ||
className="btn btn-gradient text-white rounded-[12px] h-[52px] w-[140px]" | ||
onClick={() => { | ||
const modal = document.getElementById('update-group-modal') as HTMLDialogElement; | ||
if (modal) modal.showModal(); | ||
}} | ||
> | ||
Update | ||
</button> | ||
<div className="flex items-center space-x-4"> | ||
<button | ||
aria-label={'update-btn'} | ||
className="btn btn-dropdown text-white rounded-[12px] h-[52px] w-[140px]" | ||
onClick={handleLeave} | ||
disabled={isSigning} | ||
> | ||
{isSigning ? <span className="animate-pulse">Leaving</span> : 'Leave'} | ||
</button> | ||
|
||
<button | ||
aria-label={'update-btn'} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Duplicate Both the "Leave" and "Update" buttons have the same Assign unique and descriptive <button
- aria-label={'update-btn'}
+ aria-label={'leave-group-btn'}
className="btn btn-dropdown text-white rounded-[12px] h-[52px] w-[140px]"
onClick={handleLeave}
disabled={isSigning}
>
{isSigning ? <span className="animate-pulse">Leaving</span> : 'Leave'}
</button>
<button
- aria-label={'update-btn'}
+ aria-label={'update-group-btn'}
className="btn btn-gradient text-white rounded-[12px] h-[52px] w-[140px]"
onClick={() => {
const modal = document.getElementById('update-group-modal') as HTMLDialogElement;
if (modal) modal.showModal();
}}
>
Update
</button>
|
||
className="btn btn-gradient text-white rounded-[12px] h-[52px] w-[140px]" | ||
onClick={() => { | ||
const modal = document.getElementById('update-group-modal') as HTMLDialogElement; | ||
if (modal) modal.showModal(); | ||
}} | ||
> | ||
Update | ||
</button> | ||
</div> | ||
</div> | ||
|
||
<div className="space-y-4"> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Add error handling for fee estimation
While the transaction hooks are properly set up, consider adding error handling for fee estimation failures.
📝 Committable suggestion