From c5c9f7c6f55ef02b32bfb4c24da4334bd9dc1c32 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Mon, 29 Jul 2024 10:32:43 +0800
Subject: [PATCH] update remix-dapp

---
 .../src/components/UiTerminal/Context.tsx     |  30 +--
 .../UiTerminal/RenderKnownTransactions.tsx    |  66 +++---
 .../src/components/UniversalDappUI/index.tsx  | 192 ++++++------------
 apps/remix-dapp/src/reducers/state.ts         |  34 ++--
 4 files changed, 110 insertions(+), 212 deletions(-)

diff --git a/apps/remix-dapp/src/components/UiTerminal/Context.tsx b/apps/remix-dapp/src/components/UiTerminal/Context.tsx
index beb9844c84..504e06b558 100644
--- a/apps/remix-dapp/src/components/UiTerminal/Context.tsx
+++ b/apps/remix-dapp/src/components/UiTerminal/Context.tsx
@@ -20,35 +20,7 @@ const Context = ({ opts, provider }: { opts: any; provider: string }) => {
     : data.transactionIndex;
   const value = val ? typeConversion.toInt(val) : 0;
 
-  if (provider?.startsWith('vm')) {
-    return (
-      <div>
-        <span>
-          <span className="remix_ui_terminal_tx font-weight-bold mr-3">
-            [vm]
-          </span>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">from:</span> {from}
-          </div>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">to:</span> {to}
-          </div>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">value:</span> {value} wei
-          </div>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">data:</span> {input}
-          </div>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">logs:</span> {logs}
-          </div>
-          <div className="remix_ui_terminal_txItem">
-            <span className="font-weight-bold">hash:</span> {hash}
-          </div>
-        </span>
-      </div>
-    );
-  } else if (data.resolvedData) {
+  if (data.resolvedData) {
     return (
       <div>
         <span>
diff --git a/apps/remix-dapp/src/components/UiTerminal/RenderKnownTransactions.tsx b/apps/remix-dapp/src/components/UiTerminal/RenderKnownTransactions.tsx
index f4a31ffb73..ec7751a054 100644
--- a/apps/remix-dapp/src/components/UiTerminal/RenderKnownTransactions.tsx
+++ b/apps/remix-dapp/src/components/UiTerminal/RenderKnownTransactions.tsx
@@ -35,39 +35,39 @@ const RenderKnownTransactions = ({
       </div>
       {showTableHash.includes(tx.hash)
         ? showTable(
-            {
-              hash: tx.hash,
-              status: receipt !== null ? receipt.status : null,
-              isCall: tx.isCall,
-              contractAddress: receipt.contractAddress,
-              blockHash: tx.blockHash,
-              blockNumber: tx.blockNumber,
-              data: tx,
-              from,
-              to,
-              gas: tx.gas,
-              input: tx.input,
-              'decoded input': resolvedData?.params
-                ? JSON.stringify(
-                    typeConversion.stringify(resolvedData.params),
-                    null,
-                    '\t'
-                  )
-                : ' - ',
-              'decoded output': resolvedData?.decodedReturnValue
-                ? JSON.stringify(
-                    typeConversion.stringify(resolvedData.decodedReturnValue),
-                    null,
-                    '\t'
-                  )
-                : ' - ',
-              logs,
-              val: tx.value,
-              transactionCost: tx.transactionCost,
-              executionCost: tx.executionCost,
-            },
-            showTableHash
-          )
+          {
+            hash: tx.hash,
+            status: receipt !== null ? receipt.status : null,
+            isCall: tx.isCall,
+            contractAddress: receipt.contractAddress,
+            blockHash: tx.blockHash,
+            blockNumber: tx.blockNumber,
+            data: tx,
+            from,
+            to,
+            gas: tx.gas,
+            input: tx.input,
+            'decoded input': resolvedData?.params
+              ? JSON.stringify(
+                typeConversion.stringify(resolvedData.params),
+                null,
+                '\t'
+              )
+              : ' - ',
+            'decoded output': resolvedData?.decodedReturnValue
+              ? JSON.stringify(
+                typeConversion.stringify(resolvedData.decodedReturnValue),
+                null,
+                '\t'
+              )
+              : ' - ',
+            logs,
+            val: tx.value,
+            transactionCost: tx.transactionCost,
+            executionCost: tx.executionCost,
+          },
+          showTableHash
+        )
         : null}
     </span>
   );
diff --git a/apps/remix-dapp/src/components/UniversalDappUI/index.tsx b/apps/remix-dapp/src/components/UniversalDappUI/index.tsx
index 3d3cde33bc..1c2a52be70 100644
--- a/apps/remix-dapp/src/components/UniversalDappUI/index.tsx
+++ b/apps/remix-dapp/src/components/UniversalDappUI/index.tsx
@@ -161,136 +161,61 @@ export function UniversalDappUI(props: any) {
 
   return (
     <div className="row m-0">
-      {containers
-        ? containers.map((id: any) => {
-          return (
-            <div className="col-md" key={id}>
-              {items[id].map((funcId: any, index: any) => {
-                const funcABI = contractABI[funcId];
-                if (funcABI.type !== 'function') return null;
-                const isConstant =
+      {containers.map((id: any) => {
+        return (
+          <div className="col-md" key={id}>
+            {items[id].map((funcId: any, index: any) => {
+              const funcABI = contractABI[funcId];
+              if (funcABI.type !== 'function') return null;
+              const isConstant =
                     funcABI.constant !== undefined ? funcABI.constant : false;
-                const lookupOnly =
+              const lookupOnly =
                     funcABI.stateMutability === 'view' ||
                     funcABI.stateMutability === 'pure' ||
                     isConstant;
-                const inputs = getFuncABIInputs(funcABI);
-                return (
-                  <div
-                    className="p-2 bg-light mb-2"
-                    data-id={`function${funcId}`}
-                    key={funcId}
-                  >
-                    <div className="w-100 mb-2">
-                      <div>
-                        {funcABI.title && <h3 data-id={`functionTitle${funcId}`}>{funcABI.title}</h3>}
-                        <ContractGUI
-                          funcABI={funcABI}
-                          clickCallBack={(
-                            valArray: { name: string; type: string }[],
-                            inputsValues: string
-                          ) => {
-                            runTransaction(
-                              lookupOnly,
-                              funcABI,
-                              valArray,
-                              inputsValues,
-                              funcId
-                            );
-                          }}
-                          inputs={inputs}
-                          lookupOnly={lookupOnly}
-                          key={funcId}
-                        />
-                        {funcABI.details && (
-                          <div className="pt-2 udapp_intro" data-id={`functionInstructions${funcId}`}>
-                            {funcABI.details}
-                          </div>
-                        )}
-                        {lookupOnly && (
-                          <div className="udapp_value" data-id="udapp_value">
-                            <TreeView id="treeView">
-                              {Object.keys(
-                                instance.decodedResponse || {}
-                              ).map((key) => {
-                                const funcIndex = funcId;
-                                const response =
+              const inputs = getFuncABIInputs(funcABI);
+              return (
+                <div
+                  className="p-2 bg-light mb-2"
+                  data-id={`function${funcId}`}
+                  key={funcId}
+                >
+                  <div className="w-100 mb-2">
+                    <div>
+                      {funcABI.title && <h3 data-id={`functionTitle${funcId}`}>{funcABI.title}</h3>}
+                      <ContractGUI
+                        funcABI={funcABI}
+                        clickCallBack={(
+                          valArray: { name: string; type: string }[],
+                          inputsValues: string
+                        ) => {
+                          runTransaction(
+                            lookupOnly,
+                            funcABI,
+                            valArray,
+                            inputsValues,
+                            funcId
+                          );
+                        }}
+                        inputs={inputs}
+                        lookupOnly={lookupOnly}
+                        key={funcId}
+                      />
+                      {funcABI.details && (
+                        <div className="pt-2 udapp_intro" data-id={`functionInstructions${funcId}`}>
+                          {funcABI.details}
+                        </div>
+                      )}
+                      {lookupOnly && (
+                        <div className="udapp_value" data-id="udapp_value">
+                          <TreeView id="treeView">
+                            {Object.keys(
+                              instance.decodedResponse || {}
+                            ).map((key) => {
+                              const funcIndex = funcId;
+                              const response =
                                     instance.decodedResponse[key];
 
-                                return key === funcIndex
-                                  ? Object.keys(response || {}).map(
-                                    (innerkey, _index) => {
-                                      return renderData(
-                                        instance.decodedResponse[key][
-                                          innerkey
-                                        ],
-                                        response,
-                                        innerkey,
-                                        innerkey
-                                      );
-                                    }
-                                  )
-                                  : null;
-                              })}
-                            </TreeView>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })
-        : contractABI?.map((funcABI: any, index: any) => {
-          if (funcABI.type !== 'function') return null;
-          const isConstant =
-              funcABI.constant !== undefined ? funcABI.constant : false;
-          const lookupOnly =
-              funcABI.stateMutability === 'view' ||
-              funcABI.stateMutability === 'pure' ||
-              isConstant;
-          const inputs = getFuncABIInputs(funcABI);
-
-          return (
-            <div
-              key={index}
-              className={`instance d-block flex-column bg-transparent udapp_run-instance border-dark col-6`}
-              data-shared="universalDappUiInstance"
-            >
-              <div
-                className="p-2 bg-light mb-2"
-                data-id="universalDappUiContractActionWrapper"
-              >
-                <div className="w-100 mb-2">
-                  <div>
-                    <ContractGUI
-                      funcABI={funcABI}
-                      clickCallBack={(
-                        valArray: { name: string; type: string }[],
-                        inputsValues: string
-                      ) => {
-                        runTransaction(
-                          lookupOnly,
-                          funcABI,
-                          valArray,
-                          inputsValues,
-                          index
-                        );
-                      }}
-                      inputs={inputs}
-                      lookupOnly={lookupOnly}
-                      key={index}
-                    />
-                    {lookupOnly && (
-                      <div className="udapp_value" data-id="udapp_value">
-                        <TreeView id="treeView">
-                          {Object.keys(instance.decodedResponse || {}).map(
-                            (key) => {
-                              const funcIndex = index.toString();
-                              const response = instance.decodedResponse[key];
-
                               return key === funcIndex
                                 ? Object.keys(response || {}).map(
                                   (innerkey, _index) => {
@@ -305,17 +230,18 @@ export function UniversalDappUI(props: any) {
                                   }
                                 )
                                 : null;
-                            }
-                          )}
-                        </TreeView>
-                      </div>
-                    )}
+                            })}
+                          </TreeView>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          );
-        })}
+              );
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/apps/remix-dapp/src/reducers/state.ts b/apps/remix-dapp/src/reducers/state.ts
index bcf01f4158..7d8e436e91 100644
--- a/apps/remix-dapp/src/reducers/state.ts
+++ b/apps/remix-dapp/src/reducers/state.ts
@@ -27,25 +27,25 @@ export const appInitialState: any = {
 
 export const appReducer = (state = appInitialState, action: any): any => {
   switch (action.type) {
-    case 'SET_INSTANCE':
-      return {
-        ...state,
-        instance: { ...state.instance, ...action.payload },
-      };
+  case 'SET_INSTANCE':
+    return {
+      ...state,
+      instance: { ...state.instance, ...action.payload },
+    };
 
-    case 'SET_SETTINGS':
-      return {
-        ...state,
-        settings: { ...state.settings, ...action.payload },
-      };
+  case 'SET_SETTINGS':
+    return {
+      ...state,
+      settings: { ...state.settings, ...action.payload },
+    };
 
-    case 'SET_TERMINAL':
-      return {
-        ...state,
-        terminal: { ...state.terminal, ...action.payload },
-      };
+  case 'SET_TERMINAL':
+    return {
+      ...state,
+      terminal: { ...state.terminal, ...action.payload },
+    };
 
-    default:
-      throw new Error();
+  default:
+    throw new Error();
   }
 };