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

chalabi/modal fixes #87

Merged
merged 2 commits into from
Nov 27, 2024
Merged

chalabi/modal fixes #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3263fa
fix: fix bank page modals
chalabi2 Nov 26, 2024
9365365
fix: increase max height in member management modals
chalabi2 Nov 26, 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
41 changes: 30 additions & 11 deletions components/bank/components/historyBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,27 @@
data: Transaction;
}

function formatLargeNumber(num: number): string {
const quintillion = 1e18;
const quadrillion = 1e15;
const trillion = 1e12;
const billion = 1e9;
const million = 1e6;

if (num >= quintillion) {
return `${(num / quintillion).toFixed(2)}QT`;

Check warning on line 33 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L33 

Added line #L33 was not covered by tests
} else if (num >= quadrillion) {
return `${(num / quadrillion).toFixed(2)}Q`;

Check warning on line 35 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L35 

Added line #L35 was not covered by tests
} else if (num >= trillion) {
return `${(num / trillion).toFixed(2)}T`;

Check warning on line 37 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L37 

Added line #L37 was not covered by tests
} else if (num >= billion) {
return `${(num / billion).toFixed(2)}B`;

Check warning on line 39 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L39 

Added line #L39 was not covered by tests
} else if (num >= million) {
return `${(num / million).toFixed(2)}M`;

Check warning on line 41 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L41 

Added line #L41 was not covered by tests
}
return num.toLocaleString();
}
chalabi2 marked this conversation as resolved.
Show resolved Hide resolved

export function HistoryBox({
isLoading: initialLoading,
send,
Expand Down Expand Up @@ -55,14 +76,6 @@
});
}

const openModal = (tx: TransactionGroup) => {
setSelectedTx(tx);
};

const closeModal = () => {
setSelectedTx(null);
};

const groupedTransactions = useMemo(() => {
if (!sendTxs || sendTxs.length === 0) return {};

Expand Down Expand Up @@ -184,7 +197,12 @@
<div
key={tx.tx_hash}
className="flex items-center justify-between p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px] cursor-pointer hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] transition-colors"
onClick={() => openModal(tx)}
onClick={() => {
setSelectedTx(tx);
(
document?.getElementById(`tx_modal_info`) as HTMLDialogElement

Check warning on line 203 in components/bank/components/historyBox.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/historyBox.tsx#L200-L203 

Added lines #L200 - L203 were not covered by tests
)?.showModal();
}}
chalabi2 marked this conversation as resolved.
Show resolved Hide resolved
>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 rounded-full overflow-hidden flex items-center justify-center">
Expand Down Expand Up @@ -238,8 +256,9 @@
m => m.base === amt.denom
);
const exponent = Number(metadata?.denom_units[1]?.exponent) || 6;
const amount = Number(shiftDigits(amt.amount, -exponent));

return `${Number(shiftDigits(amt.amount, -exponent)).toLocaleString(undefined, { maximumFractionDigits: exponent })} ${formatDenom(amt.denom)}`;
return `${formatLargeNumber(amount)} ${formatDenom(amt.denom)}`;
})
.join(', ')}
</p>
Expand All @@ -254,7 +273,7 @@
</div>
)}

{selectedTx && <TxInfoModal tx={selectedTx} isOpen={!!selectedTx} onClose={closeModal} />}
<TxInfoModal modalId={`tx_modal_info`} tx={selectedTx ?? ({} as TransactionGroup)} />
chalabi2 marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
}
27 changes: 16 additions & 11 deletions components/bank/components/tokenList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@
);
}, [balances, searchTerm]);

const openModal = (denom: any) => {
setSelectedDenom(denom);
const modal = document.getElementById('denom-info-modal') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
};

return (
<div className="w-full mx-auto rounded-[24px] h-full flex flex-col">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-0 mb-4">
Expand Down Expand Up @@ -63,7 +55,12 @@
key={balance.denom}
aria-label={balance.denom}
className="flex flex-row justify-between gap-4 items-center p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px] cursor-pointer hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] transition-colors"
onClick={() => openModal(balance.metadata)}
onClick={() => {
setSelectedDenom(balance?.denom);
(
document?.getElementById(`denom-info-modal`) as HTMLDialogElement

Check warning on line 61 in components/bank/components/tokenList.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/components/tokenList.tsx#L58-L61 

Added lines #L58 - L61 were not covered by tests
)?.showModal();
}}
>
<div className="flex flex-row gap-4 items-center justify-start">
<div className="w-10 h-10 rounded-full overflow-hidden bg-[#0000000A] dark:bg-[#FFFFFF0F] flex items-center justify-center">
Expand Down Expand Up @@ -95,7 +92,10 @@
<button
onClick={e => {
e.stopPropagation();
openModal(balance.metadata);
setSelectedDenom(balance?.denom);
(
document?.getElementById(`denom-info-modal`) as HTMLDialogElement
)?.showModal();
chalabi2 marked this conversation as resolved.
Show resolved Hide resolved
}}
className="p-2 rounded-md bg-[#0000000A] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF33] transition-colors"
>
Expand All @@ -108,7 +108,12 @@
)}

{/* DenomInfoModal */}
{selectedDenom && <DenomInfoModal denom={selectedDenom} modalId="denom-info-modal" />}
{selectedDenom && (
<DenomInfoModal
denom={filteredBalances.find(b => b.denom === selectedDenom)?.metadata ?? null}
modalId="denom-info-modal"
/>
)}
</div>
</div>
</div>
Expand Down
35 changes: 14 additions & 21 deletions components/bank/modals/txInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@

interface TxInfoModalProps {
tx: TransactionGroup;
isOpen: boolean;
onClose: () => void;

modalId: string;
}

export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {
export default function TxInfoModal({ tx, modalId }: TxInfoModalProps) {
function formatDate(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleString('en-US', {
Expand All @@ -24,20 +24,13 @@
}

return (
<dialog
aria-label="tx_info_modal"
id={`tx_modal_${tx.tx_hash}`}
className={`modal ${isOpen ? 'modal-open' : ''} `}
>
<dialog aria-label="tx_info_modal" id={modalId} className={`modal z-[999]`}>
<div
className="modal-box max-w-4xl mx-auto rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg"
className="modal-box max-w-4xl mx-auto rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg relative z-[1000]"
aria-label="tx info"
>
<form method="dialog">
<button
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-[#00000099] dark:text-[#FFFFFF99] hover:bg-[#0000000A] dark:hover:bg-[#FFFFFF1A]"
onClick={onClose}
>
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-[#00000099] dark:text-[#FFFFFF99] hover:bg-[#0000000A] dark:hover:bg-[#FFFFFF1A]">
✕
</button>
</form>
Expand All @@ -46,19 +39,19 @@
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<InfoItem label="TRANSACTION HASH" value={tx.tx_hash} isAddress={true} />
<InfoItem label="BLOCK" value={tx.block_number.toString()} />
<InfoItem label="TIMESTAMP" value={formatDate(tx.formatted_date)} />
<InfoItem label="TRANSACTION HASH" value={tx?.tx_hash} isAddress={true} />
<InfoItem label="BLOCK" value={tx?.block_number?.toString()} />
<InfoItem label="TIMESTAMP" value={formatDate(tx?.formatted_date)} />
</div>
<div>
<InfoItem label="FROM" value={tx.data.from_address} isAddress={true} />
<InfoItem label="TO" value={tx.data.to_address} isAddress={true} />
<InfoItem label="FROM" value={tx?.data?.from_address} isAddress={true} />
<InfoItem label="TO" value={tx?.data?.to_address} isAddress={true} />
<div>
<p className="text-sm font-semibold text-[#00000099] dark:text-[#FFFFFF99] mb-2">
VALUE
</p>
<div className="bg-[#FFFFFF66] dark:bg-[#FFFFFF1A] rounded-[16px] p-4">
{tx.data.amount.map((amt, index) => (
{tx?.data?.amount.map((amt, index) => (

Check warning on line 54 in components/bank/modals/txInfo.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/modals/txInfo.tsx#L54 

Added line #L54 was not covered by tests
<p key={index} className="text-[#161616] dark:text-white">
{Number(shiftDigits(amt.amount, -6)).toLocaleString(undefined, {
maximumFractionDigits: 6,
Expand All @@ -72,7 +65,7 @@
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button onClick={onClose}>close</button>
<button>close</button>
</form>
</dialog>
);
Expand All @@ -95,7 +88,7 @@
<div className="flex items-center">
<TruncatedAddressWithCopy address={value} slice={8} />
<a
href={`${process.env.NEXT_PUBLIC_TESTNET_EXPLORER_URL}/${label === 'TRANSACTION HASH' ? 'transaction' : 'account'}/${label.includes('TRANSACTION') ? value.toUpperCase() : value}`}
href={`${process.env.NEXT_PUBLIC_TESTNET_EXPLORER_URL}/${label === 'TRANSACTION HASH' ? 'transaction' : 'account'}/${label?.includes('TRANSACTION') ? value?.toUpperCase() : value}`}
target="_blank"
rel="noopener noreferrer"
className="ml-2 text-primary hover:text-primary/50"
Expand Down
21 changes: 7 additions & 14 deletions components/factory/modals/denomInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,16 @@ import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank
export const DenomInfoModal: React.FC<{
denom: MetadataSDKType | null;
modalId: string;
isOpen?: boolean;
onClose?: () => void;
}> = ({ denom, modalId, isOpen, onClose }) => {
}> = ({ denom, modalId }) => {
let nameIsAddress = false;
if (denom?.name.startsWith('factory/manifest1')) {
if (denom?.name?.startsWith('factory/manifest1')) {
nameIsAddress = true;
}

return (
<dialog
id={modalId}
className={`modal ${isOpen ? 'modal-open' : ''}`}
aria-labelledby="denom-info-title"
aria-modal="true"
>
<dialog id={modalId} className="modal" aria-labelledby="denom-info-title" aria-modal="true">
<div className="modal-box max-w-4xl mx-auto rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg">
<form method="dialog" onSubmit={onClose}>
<form method="dialog">
<button
aria-label="Close modal"
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
Expand All @@ -37,7 +30,7 @@ export const DenomInfoModal: React.FC<{
value={denom?.name ?? 'No name available'}
isAddress={nameIsAddress}
/>
<InfoItem label="Ticker" value={denom?.display.toUpperCase() ?? 'No ticker available'} />
<InfoItem label="Ticker" value={denom?.display?.toUpperCase() ?? 'No ticker available'} />
<InfoItem
label="Description"
value={denom?.description ?? 'No description available'}
Expand All @@ -54,7 +47,7 @@ export const DenomInfoModal: React.FC<{
denom?.base
? (() => {
try {
return decodeURIComponent(denom.base);
return decodeURIComponent(denom?.base);
} catch (e) {
console.error('Failed to decode BASE value:', e);
return denom.base;
Expand All @@ -67,7 +60,7 @@ export const DenomInfoModal: React.FC<{
<InfoItem label="DISPLAY" value={denom?.display ?? 'No display available'} />
</div>
</div>
<form method="dialog" className="modal-backdrop" onSubmit={onClose}>
<form method="dialog" className="modal-backdrop">
<button>close</button>
</form>
</dialog>
Expand Down
2 changes: 1 addition & 1 deletion components/groups/modals/memberManagementModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export function MemberManagementModal({
<div className="w-[45%]">Address</div>
<div className="w-[10%]"></div>
</div>
<div className="space-y-4 max-h-[420px] overflow-y-auto">
<div className="space-y-4 max-h-[22rem] overflow-y-auto">
chalabi2 marked this conversation as resolved.
Show resolved Hide resolved
{values.members.map((member, index) => (
<div
key={index}
Expand Down