fix: improve factory token modals (#209)

--------- Co-authored-by: Felix C. Morency <[email protected]>
liftedinit · Jan 14, 2025 · 8ea1e54 · 8ea1e54
1 parent c0d8ce3
commit 8ea1e54
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 219 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/factory/components/DenomList.tsx b/components/factory/components/DenomList.tsx
@@ -7,7 +7,7 @@ import { MintIcon, BurnIcon, TransferIcon } from '@/components/icons';
 import { DenomInfoModal } from '@/components/factory/modals/denomInfo';
 import MintModal from '@/components/factory/modals/MintModal';
 import BurnModal from '@/components/factory/modals/BurnModal';
-import { UpdateDenomMetadataModal } from '@/components/factory/modals/updateDenomMetadata';
+import UpdateDenomMetadataModal from '@/components/factory/modals/updateDenomMetadata';
 import { PiInfo } from 'react-icons/pi';
 import useIsMobile from '@/hooks/useIsMobile';
 import TransferModal from '@/components/factory/modals/TransferModal';
@@ -56,11 +56,35 @@ export default function DenomList({
     currentPage * pageSize
   );
 
+  const getBaseUrl = () => {
+    if (isGroup) {
+      return `/groups?policyAddress=${admin}&tab=tokens`;
+    }
+    return '/factory';
+  };
+
+  const updateUrlWithModal = (action: string, denomBase?: string) => {
+    const baseUrl = getBaseUrl();
+    const query: Record<string, string> = isGroup ? { policyAddress: admin, tab: 'tokens' } : {};
+
+    if (action) query.action = action;
+    if (denomBase) query.denom = denomBase;
+
+    router.push(
+      {
+        pathname: isGroup ? '/groups' : '/factory',
+        query,
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
   const handleDenomSelect = (denom: ExtendedMetadataSDKType) => {
     if (!modalType) {
       setSelectedDenom(denom);
       setModalType('info');
-      // router.push(`/factory?denom=${denom.base}&action=info`, undefined, { shallow: true });
+      updateUrlWithModal('info', denom.base);
     }
   };
 
@@ -111,36 +135,21 @@ export default function DenomList({
     setModalType(null);
     setOpenUpdateDenomMetadataModal(false);
     setOpenTransferDenomModal(false);
-    router.push(isGroup ? `/groups?policyAddress=${admin}&tab=tokens` : '/factory', undefined, {
-      shallow: true,
-    });
+    updateUrlWithModal('');
   };
 
   const handleUpdateModalClose = () => {
     setSelectedDenom(null);
     setOpenUpdateDenomMetadataModal(false);
     setOpenTransferDenomModal(false);
     setModalType(null);
-    router.push(isGroup ? `/groups?policyAddress=${admin}&tab=tokens` : '/factory', undefined, {
-      shallow: true,
-    });
+    updateUrlWithModal('');
   };
 
-  const handleUpdateModal = (denom: ExtendedMetadataSDKType, e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleUpdateModal = (denom: ExtendedMetadataSDKType) => {
     setSelectedDenom(denom);
-    setModalType('update');
     setOpenUpdateDenomMetadataModal(true);
-    router.push(
-      isGroup
-        ? `/groups?policyAddress=${admin}&tab=tokens`
-        : `/factory?denom=${denom.base}&action=update`,
-      undefined,
-      {
-        shallow: true,
-      }
-    );
+    updateUrlWithModal('update', denom.base);
   };
 
   const handleTransferModal = (denom: ExtendedMetadataSDKType, e: React.MouseEvent) => {
@@ -149,39 +158,41 @@ export default function DenomList({
     setSelectedDenom(denom);
     setModalType('transfer');
     setOpenTransferDenomModal(true);
+    updateUrlWithModal('transfer', denom.base);
+  };
+
+  const handleModalClose = () => {
+    setSelectedDenom(null);
+    setModalType(null);
+    // Remove modal type from URL
     router.push(
-      isGroup
-        ? `/groups?policyAddress=${admin}&tab=tokens`
-        : `/factory?denom=${denom.base}&action=transfer`,
+      {
+        pathname: isGroup ? '/groups' : '/factory',
+        query: isGroup ? { policyAddress: admin, tab: 'tokens' } : undefined,
+      },
       undefined,
       { shallow: true }
     );
   };
 
-  const handleSwitchToMultiMint = () => {
-    setModalType('multimint');
-    router.push(
-      isGroup
-        ? `/groups?policyAddress=${admin}&tab=tokens`
-        : `/factory?denom=${selectedDenom?.base}&action=multimint`,
-      undefined,
-      {
-        shallow: true,
-      }
-    );
+  const handleMint = (denom: ExtendedMetadataSDKType, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedDenom(denom);
+    setModalType('mint');
+    updateUrlWithModal('mint', denom.base);
   };
 
-  const handleSwitchToMultiBurn = () => {
-    setModalType('multiburn');
-    router.push(
-      isGroup
-        ? `/groups?policyAddress=${admin}&tab=tokens`
-        : `/factory?denom=${selectedDenom?.base}&action=multiburn`,
-      undefined,
-      {
-        shallow: true,
-      }
-    );
+  const handleBurn = (denom: ExtendedMetadataSDKType, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedDenom(denom);
+    setModalType('burn');
+    updateUrlWithModal('burn', denom.base);
+  };
+
+  const handleUpdate = (denom: ExtendedMetadataSDKType) => {
+    setSelectedDenom(denom);
+    setOpenUpdateDenomMetadataModal(true);
+    updateUrlWithModal('update', denom.base);
   };
 
   return (
@@ -269,18 +280,10 @@ export default function DenomList({
                         key={denom.base}
                         denom={denom}
                         onSelectDenom={() => handleDenomSelect(denom)}
-                        onMint={e => {
-                          e.stopPropagation();
-                          setSelectedDenom(denom);
-                          setModalType('mint');
-                        }}
-                        onBurn={e => {
-                          e.stopPropagation();
-                          setSelectedDenom(denom);
-                          setModalType('burn');
-                        }}
+                        onMint={e => handleMint(denom, e)}
+                        onBurn={e => handleBurn(denom, e)}
                         onTransfer={e => handleTransferModal(denom, e)}
-                        onUpdate={e => handleUpdateModal(denom, e)}
+                        onUpdate={() => handleUpdate(denom)}
                       />
                     ))}
               </tbody>
@@ -401,7 +404,6 @@ export default function DenomList({
         totalSupply={selectedDenom?.totalSupply ?? '0'}
         isOpen={modalType === 'mint'}
         onClose={handleCloseModal}
-        onSwitchToMultiMint={handleSwitchToMultiMint}
         isGroup={isGroup}
       />
       <BurnModal
@@ -413,48 +415,30 @@ export default function DenomList({
         totalSupply={selectedDenom?.totalSupply ?? '0'}
         isOpen={modalType === 'burn'}
         onClose={handleCloseModal}
-        onSwitchToMultiBurn={handleSwitchToMultiBurn}
         isGroup={isGroup}
       />
       <UpdateDenomMetadataModal
-        modalId="update-denom-metadata-modal"
+        isOpen={openUpdateDenomMetadataModal}
+        onClose={handleUpdateModalClose}
         denom={selectedDenom}
         address={address}
-        onSuccess={() => {
-          refetch();
-          handleUpdateModalClose();
-        }}
-        openUpdateDenomMetadataModal={openUpdateDenomMetadataModal}
-        setOpenUpdateDenomMetadataModal={open => {
-          if (!open) {
-            handleUpdateModalClose();
-          } else {
-            setOpenUpdateDenomMetadataModal(true);
-          }
-        }}
+        modalId="update-denom-metadata-modal"
+        onSuccess={refetchDenoms}
         admin={admin}
         isGroup={isGroup}
       />
       <TransferModal
+        denom={selectedDenom}
+        address={address}
         modalId="transfer-denom-modal"
-        openTransferDenomModal={openTransferDenomModal}
-        setOpenTransferDenomModal={open => {
-          if (!open) {
-            handleCloseModal();
-          } else {
-            setOpenTransferDenomModal(true);
-          }
-        }}
+        isOpen={modalType === 'transfer'}
+        onClose={handleModalClose}
         onSuccess={() => {
           refetch();
-          handleUpdateModalClose();
+          handleModalClose();
         }}
-        denom={selectedDenom}
-        address={address}
-        isOpen={modalType === 'transfer'}
-        onClose={handleCloseModal}
-        isGroup={isGroup}
         admin={admin}
+        isGroup={isGroup}
       />
     </div>
   );
@@ -473,7 +457,7 @@ function TokenRow({
   onMint: (e: React.MouseEvent) => void;
   onBurn: (e: React.MouseEvent) => void;
   onTransfer: (e: React.MouseEvent) => void;
-  onUpdate: (e: React.MouseEvent) => void;
+  onUpdate: () => void;
 }) {
   // Add safety checks for the values
   const exponent = denom?.denom_units?.[1]?.exponent ?? 0;
@@ -542,11 +526,7 @@ function TokenRow({
           <button
             disabled={denom.base.includes('umfx')}
             className="btn btn-md bg-base-300 text-primary btn-square group-hover:bg-secondary hover:outline hover:outline-primary hover:outline-1 outline-none"
-            onClick={e => {
-              e.preventDefault();
-              e.stopPropagation();
-              onUpdate(e);
-            }}
+            onClick={onUpdate}
           >
             <PiInfo className="w-7 h-7 text-current" />
           </button>

diff --git a/components/factory/forms/BurnForm.tsx b/components/factory/forms/BurnForm.tsx
@@ -28,7 +28,7 @@ interface BurnFormProps {
   refetch: () => void;
   balance: string;
   totalSupply: string;
-  onMultiBurnClick: () => void;
+
   isGroup?: boolean;
 }
 
@@ -40,13 +40,12 @@ export default function BurnForm({
   refetch,
   balance,
   totalSupply,
-  onMultiBurnClick,
+
   isGroup,
 }: Readonly<BurnFormProps>) {
   const [amount, setAmount] = useState('');
-  const [recipient, setRecipient] = useState(address);
+  const [recipient, setRecipient] = useState(address || '');
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
   const [burnPairs, setBurnPairs] = useState<BurnPair[]>([{ address: '', amount: '' }]);
 
   const [isContactsOpen, setIsContactsOpen] = useState(false);
@@ -83,21 +82,6 @@ export default function BurnForm({
     recipient: Yup.string().required('Recipient address is required').manifestAddress(),
   });
 
-  // Format balance safely
-  function formatAmount(amount: string | null | undefined): string {
-    if (amount == null) {
-      return '-';
-    }
-    try {
-      return Number(shiftDigits(amount, -exponent)).toLocaleString(undefined, {
-        maximumFractionDigits: exponent,
-      });
-    } catch (error) {
-      console.warn('Error formatting amount:', error);
-      return 'x';
-    }
-  }
-
   const handleBurn = async () => {
     if (!amount || Number.isNaN(Number(amount))) {
       return;
@@ -212,7 +196,7 @@ export default function BurnForm({
         fee,
         onSuccess: () => {
           setBurnPairs([{ address: '', amount: '' }]);
-          setIsModalOpen(false);
+
           refetch();
         },
       });
@@ -283,10 +267,10 @@ export default function BurnForm({
                           label="AMOUNT"
                           name="amount"
                           placeholder="Enter amount"
-                          value={amount}
+                          value={amount || ''}
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                            setAmount(e.target.value);
-                            setFieldValue('amount', e.target.value);
+                            setAmount(e.target.value || '');
+                            setFieldValue('amount', e.target.value || '');
                           }}
                           className={`input input-bordered w-full ${
                             touched.amount && errors.amount ? 'input-error' : ''
@@ -307,10 +291,10 @@ export default function BurnForm({
                           label="TARGET"
                           name="recipient"
                           placeholder="Recipient address"
-                          value={recipient}
+                          value={recipient || ''}
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                            setRecipient(e.target.value);
-                            setFieldValue('recipient', e.target.value);
+                            setRecipient(e.target.value || '');
+                            setFieldValue('recipient', e.target.value || '');
                           }}
                           className={`input input-bordered w-full transition-none ${
                             touched.recipient && errors.recipient ? 'input-error' : ''
@@ -371,17 +355,6 @@ export default function BurnForm({
           </>
         )}
       </div>
-      {isMFX && (
-        <button
-          type="button"
-          onClick={onMultiBurnClick}
-          className="btn btn-error btn-md flex-grow w-full text-white mt-6"
-          aria-label="multi-burn-button"
-          disabled={!isAdmin}
-        >
-          Multi Burn
-        </button>
-      )}
     </div>
   );
 }