From 5f509374ba90d508e35ae1cb30400a80fc3ccde5 Mon Sep 17 00:00:00 2001 From: Joseph Chalabi <100090645+chalabi2@users.noreply.github.com> Date: Wed, 27 Nov 2024 07:25:46 -0700 Subject: [PATCH] fix: member modal & modal rework --- components/bank/components/historyBox.tsx | 41 ++++++++++++++----- components/bank/components/tokenList.tsx | 27 +++++++----- components/bank/modals/txInfo.tsx | 35 +++++++--------- components/factory/modals/denomInfo.tsx | 21 ++++------ .../groups/modals/memberManagementModal.tsx | 2 +- 5 files changed, 68 insertions(+), 58 deletions(-) diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx index 857e491d..53a364a9 100644 --- a/components/bank/components/historyBox.tsx +++ b/components/bank/components/historyBox.tsx @@ -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, @@ -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 {}; @@ -184,7 +197,12 @@ export function HistoryBox({
openModal(tx)} + onClick={() => { + setSelectedTx(tx); + ( + document?.getElementById(`tx_modal_info`) as HTMLDialogElement + )?.showModal(); + }} >
@@ -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(', ')}

@@ -254,7 +273,7 @@ export function HistoryBox({
)} - {selectedTx && } +
); } diff --git a/components/bank/components/tokenList.tsx b/components/bank/components/tokenList.tsx index 7c2b7f93..bda101f4 100644 --- a/components/bank/components/tokenList.tsx +++ b/components/bank/components/tokenList.tsx @@ -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 (
@@ -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(); + }} >
@@ -95,7 +92,10 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
diff --git a/components/bank/modals/txInfo.tsx b/components/bank/modals/txInfo.tsx index daa860a2..16931956 100644 --- a/components/bank/modals/txInfo.tsx +++ b/components/bank/modals/txInfo.tsx @@ -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', { @@ -24,20 +24,13 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) { } return ( - +
-
@@ -46,19 +39,19 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {
- - - + + +
- - + +

VALUE

- {tx.data.amount.map((amt, index) => ( + {tx?.data?.amount.map((amt, index) => (

{Number(shiftDigits(amt.amount, -6)).toLocaleString(undefined, { maximumFractionDigits: 6, @@ -72,7 +65,7 @@ export default function TxInfoModal({ tx, isOpen, onClose }: TxInfoModalProps) {

- +
); @@ -95,7 +88,7 @@ function InfoItem({
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 ( - +
-
+
- + diff --git a/components/groups/modals/memberManagementModal.tsx b/components/groups/modals/memberManagementModal.tsx index aff276e1..39ac05a9 100644 --- a/components/groups/modals/memberManagementModal.tsx +++ b/components/groups/modals/memberManagementModal.tsx @@ -223,7 +223,7 @@ export function MemberManagementModal({
Address
-
+
{values.members.map((member, index) => (