From f8870ff1e39c669456052c29ab8b99b87b7744bc Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Sun, 12 Sep 2021 02:46:08 -0500
Subject: [PATCH] explorer: Display writable badge instead of readonly badge
 (#19808)

---
 explorer/src/components/instruction/RawDetails.tsx | 4 ++--
 explorer/src/pages/TransactionDetailsPage.tsx      | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/explorer/src/components/instruction/RawDetails.tsx b/explorer/src/components/instruction/RawDetails.tsx
index 7cff419cd..731e6bfb5 100644
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/explorer/src/components/instruction/RawDetails.tsx
@@ -10,8 +10,8 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
         <tr key={keyIndex}>
           <td>
             <div className="mr-2 d-md-inline">Account #{keyIndex + 1}</div>
-            {!isWritable && (
-              <span className="badge badge-soft-info mr-1">Readonly</span>
+            {isWritable && (
+              <span className="badge badge-soft-info mr-1">Writable</span>
             )}
             {isSigner && (
               <span className="badge badge-soft-info mr-1">Signer</span>
diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
index a0dc55415..8c3d144d6 100644
--- a/explorer/src/pages/TransactionDetailsPage.tsx
+++ b/explorer/src/pages/TransactionDetailsPage.tsx
@@ -362,6 +362,7 @@ function AccountsCard({
 
     return (
       <tr key={key}>
+        <td>{index + 1}</td>
         <td>
           <Address pubkey={pubkey} link />
         </td>
@@ -375,8 +376,8 @@ function AccountsCard({
           {index === 0 && (
             <span className="badge badge-soft-info mr-1">Fee Payer</span>
           )}
-          {!account.writable && (
-            <span className="badge badge-soft-info mr-1">Readonly</span>
+          {account.writable && (
+            <span className="badge badge-soft-info mr-1">Writable</span>
           )}
           {account.signer && (
             <span className="badge badge-soft-info mr-1">Signer</span>
@@ -392,12 +393,13 @@ function AccountsCard({
   return (
     <div className="card">
       <div className="card-header">
-        <h3 className="card-header-title">Account Inputs</h3>
+        <h3 className="card-header-title">Account Input(s)</h3>
       </div>
       <div className="table-responsive mb-0">
         <table className="table table-sm table-nowrap card-table">
           <thead>
             <tr>
+              <th className="text-muted">#</th>
               <th className="text-muted">Address</th>
               <th className="text-muted">Change (SOL)</th>
               <th className="text-muted">Post Balance (SOL)</th>