fix: show proposal id and vote tx details in Firefox (#998)

This is another case of a Firefox bug due to the difference in how
Firefox and Chrome serialize messages passed between the background and
content scripts. Firefox uses the structured clone algorithm but Chrome
uses JSON serialization.

Fixes #996.

apps/extension/src/Approvals/Commitment.tsx

@@ -89,10 +89,11 @@ const renderContent = (tx: CommitmentDetailProps): ReactNode => {
       );
 
     case TxType.VoteProposal:
+      // TODO: On Chrome, this cast is wrong because tx.proposalId is a string
       const voteTx = tx as VoteProposalProps;
       return (
         <>
-          Vote {voteTx.vote} on proposal #{voteTx.proposalId}
+          Vote {voteTx.vote} on proposal #{voteTx.proposalId.toString()}
         </>
       );
 

apps/extension/src/Approvals/index.tsx

@@ -11,6 +11,9 @@ import "@namada/components/src/base.css";
 import "../global.css";
 import "../tailwind.css";
 
+// Needed to allow displaying tx details containing bigints e.g. proposals
+import "@namada/utils/bigint-to-json-polyfill";
+
 const container = document.getElementById("root")!;
 createRoot(container).render(
   <React.StrictMode>