explorer: fix handling null transaction arguments (MystenLabs#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">
Myrilandel · Apr 3, 2023 · d59b37b · d59b37b
1 parent 1aadc80
commit d59b37b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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})`;