From d59b37b19d1462c8deb927bb220b9cfd6c4b39cb Mon Sep 17 00:00:00 2001
From: Pavlos Chrysochoidis <10210143+pchrysochoidis@users.noreply.github.com>
Date: Mon, 3 Apr 2023 16:15:08 +0100
Subject: [PATCH] explorer: fix handling null transaction arguments (#10296)

fixes page crashing for [this
transaction](https://explorer.sui.io/txblock/Cehe8YraaadPbr43sUe7f46G13JiQg72w6H8G9bDKK4u)

* adds ErrorBoundary to avoid crashing the page in case of any other
similar case

Before

<img width="1474" alt="Screenshot 2023-04-02 at 20 43 37"
src="https://user-images.githubusercontent.com/10210143/229375351-5834e620-d561-4142-8af7-875e28231e9d.png">

After

<img width="1474" alt="Screenshot 2023-04-02 at 20 39 09"
src="https://user-images.githubusercontent.com/10210143/229375369-d54a2ee3-98f0-47a0-92ef-417eee9eb1eb.png">

Error boundaries

<img width="1474" alt="Screenshot 2023-04-02 at 20 38 29"
src="https://user-images.githubusercontent.com/10210143/229375429-d010b1b4-5a75-4b6c-812b-4afacc1b2418.png">
---
 .../Transaction.tsx                           | 25 ++++++++++++-------
 .../programmable-transaction-view/utils.ts    |  2 ++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
index be02f138ed7d3..6db76a1e0d9e3 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx
@@ -10,6 +10,7 @@ import { type ReactNode } from 'react';
 
 import { flattenSuiArguments } from './utils';
 
+import { ErrorBoundary } from '~/components/error-boundary/ErrorBoundary';
 import { ObjectLink } from '~/ui/InternalLink';
 
 export interface TransactionProps<T> {
@@ -78,17 +79,23 @@ export function Transaction({
     (SuiArgument | SuiArgument[])[] | MoveCallSuiTransaction | SuiMovePackage
 >) {
     if (type === 'MoveCall') {
-        return <MoveCall type={type} data={data as MoveCallSuiTransaction} />;
+        return (
+            <ErrorBoundary>
+                <MoveCall type={type} data={data as MoveCallSuiTransaction} />
+            </ErrorBoundary>
+        );
     }
 
     return (
-        <ArrayArgument
-            type={type}
-            data={
-                type !== 'Publish'
-                    ? (data as (SuiArgument | SuiArgument[])[])
-                    : undefined
-            }
-        />
+        <ErrorBoundary>
+            <ArrayArgument
+                type={type}
+                data={
+                    type !== 'Publish'
+                        ? (data as (SuiArgument | SuiArgument[])[])
+                        : undefined
+                }
+            />
+        </ErrorBoundary>
     );
 }
diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts
index 70129413e7dfe..8610808cb9f03 100644
--- a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts
+++ b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts
@@ -15,6 +15,8 @@ export function flattenSuiArguments(
                 return value;
             } else if (Array.isArray(value)) {
                 return `[${flattenSuiArguments(value)}]`;
+            } else if (value === null) {
+                return 'Null';
             } else if (typeof value === 'object') {
                 if ('Input' in value) {
                     return `Input(${value.Input})`;