From 6442e0df2284dedce968a4d72ffb9a003bab5ef1 Mon Sep 17 00:00:00 2001
From: Eric Corson <public@giraffedev.com>
Date: Wed, 14 Aug 2024 11:10:58 +0900
Subject: [PATCH] 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 | 3 ++-
 apps/extension/src/Approvals/index.tsx      | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/extension/src/Approvals/Commitment.tsx b/apps/extension/src/Approvals/Commitment.tsx
index b6c168f938..5e134a4012 100644
--- a/apps/extension/src/Approvals/Commitment.tsx
+++ b/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()}
         </>
       );
 
diff --git a/apps/extension/src/Approvals/index.tsx b/apps/extension/src/Approvals/index.tsx
index 61d3e3c96f..3adc98608d 100644
--- a/apps/extension/src/Approvals/index.tsx
+++ b/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>