Skip to content

Commit

Permalink
fix: member modal & modal rework
Browse files Browse the repository at this point in the history
  • Loading branch information
@chalabi2
chalabi2 authored Nov 27, 2024
1 parent e094b2a commit 5f50937
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 58 deletions.
41 changes: 30 additions & 11 deletions components/bank/components/historyBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,27 @@ export interface TransactionGroup {
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`;
} else if (num >= quadrillion) {
return `${(num / quadrillion).toFixed(2)}Q`;
} else if (num >= trillion) {
return `${(num / trillion).toFixed(2)}T`;
} else if (num >= billion) {
return `${(num / billion).toFixed(2)}B`;
} else if (num >= million) {
return `${(num / million).toFixed(2)}M`;
}
return num.toLocaleString();
}

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

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 @@ export function HistoryBox({
<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
)?.showModal();
}}
>
<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 @@ export function HistoryBox({
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 @@ export function HistoryBox({
</div>
)}

{selectedTx && <TxInfoModal tx={selectedTx} isOpen={!!selectedTx} onClose={closeModal} />}
<TxInfoModal modalId={`tx_modal_info`} tx={selectedTx ?? ({} as TransactionGroup)} />
</div>
);
}
27 changes: 16 additions & 11 deletions components/bank/components/tokenList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
);
}, [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 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
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
)?.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 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
<button
onClick={e => {
e.stopPropagation();
openModal(balance.metadata);
setSelectedDenom(balance?.denom);
(
document?.getElementById(`denom-info-modal`) as HTMLDialogElement
)?.showModal();
}}
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 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
)}

{/* 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
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { shiftDigits } from '@/utils';

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 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {
}

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 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {
</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) => (
<p key={index} className="text-[#161616] dark:text-white">
{Number(shiftDigits(amt.amount, -6)).toLocaleString(undefined, {
maximumFractionDigits: 6,
Expand All @@ -72,7 +65,7 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button onClick={onClose}>close</button>
<button>close</button>
</form>
</dialog>
);
Expand All @@ -95,7 +88,7 @@ function InfoItem({
<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
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
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">
{values.members.map((member, index) => (
<div
key={index}
Expand Down

0 comments on commit 5f50937

Please sign in to comment.