From ae1a9f8f7cb0f52bc6e89e210958f59ab5fccbd1 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Fri, 4 Mar 2022 12:37:17 +0200
Subject: [PATCH] Cleanup and unify request data display

---
 .../src/components/ProjectInfoCard.tsx        | 25 ++++-----
 .../src/components/RequestDataCard.tsx        | 28 ++++++++++
 wallets/react-wallet-v2/src/pages/session.tsx |  2 +
 .../src/views/SessionProposalModal.tsx        |  2 +
 .../src/views/SessionSendTransactionModal.tsx | 51 +------------------
 .../src/views/SessionSignCosmosModal.tsx      | 16 ++----
 .../src/views/SessionSignModal.tsx            |  2 +
 .../src/views/SessionSignTypedDataModal.tsx   | 44 ++--------------
 .../views/SessionUnsuportedMethodModal.tsx    |  2 +
 9 files changed, 56 insertions(+), 116 deletions(-)
 create mode 100644 wallets/react-wallet-v2/src/components/RequestDataCard.tsx

diff --git a/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx b/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx
index 86539cb..9d96823 100644
--- a/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx
+++ b/wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx
@@ -1,6 +1,5 @@
-import { Avatar, Col, Divider, Link, Row, Text } from '@nextui-org/react'
+import { Avatar, Col, Link, Row, Text } from '@nextui-org/react'
 import { SessionTypes } from '@walletconnect/types'
-import { Fragment } from 'react'
 
 /**
  * Types
@@ -16,18 +15,14 @@ export default function ProjectInfoCard({ metadata }: IProps) {
   const { icons, name, url } = metadata
 
   return (
-    <Fragment>
-      <Row align="center">
-        <Col span={3}>
-          <Avatar src={icons[0]} />
-        </Col>
-        <Col span={14}>
-          <Text h5>{name}</Text>
-          <Link href={url}>{url}</Link>
-        </Col>
-      </Row>
-
-      <Divider y={2} />
-    </Fragment>
+    <Row align="center">
+      <Col span={3}>
+        <Avatar src={icons[0]} />
+      </Col>
+      <Col span={14}>
+        <Text h5>{name}</Text>
+        <Link href={url}>{url}</Link>
+      </Col>
+    </Row>
   )
 }
diff --git a/wallets/react-wallet-v2/src/components/RequestDataCard.tsx b/wallets/react-wallet-v2/src/components/RequestDataCard.tsx
new file mode 100644
index 0000000..28cff88
--- /dev/null
+++ b/wallets/react-wallet-v2/src/components/RequestDataCard.tsx
@@ -0,0 +1,28 @@
+import { Col, Row, Text } from '@nextui-org/react'
+import { CodeBlock, codepen } from 'react-code-blocks'
+
+/**
+ * Types
+ */
+interface IProps {
+  data: Record<string, unknown>
+}
+
+/**
+ * Component
+ */
+export default function RequestDataCard({ data }: IProps) {
+  return (
+    <Row>
+      <Col>
+        <Text h5>Data</Text>
+        <CodeBlock
+          showLineNumbers={false}
+          text={JSON.stringify(data, null, 2)}
+          theme={codepen}
+          language="json"
+        />
+      </Col>
+    </Row>
+  )
+}
diff --git a/wallets/react-wallet-v2/src/pages/session.tsx b/wallets/react-wallet-v2/src/pages/session.tsx
index 506acef..deeb2b8 100644
--- a/wallets/react-wallet-v2/src/pages/session.tsx
+++ b/wallets/react-wallet-v2/src/pages/session.tsx
@@ -74,6 +74,8 @@ export default function SessionPage() {
 
       <ProjectInfoCard metadata={session.peer.metadata} />
 
+      <Divider y={2} />
+
       {chains.map(chain => {
         if (isEIP155Chain(chain)) {
           return (
diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
index f88d5b8..3583df5 100644
--- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
@@ -92,6 +92,8 @@ export default function SessionProposalModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={proposer.metadata} />
 
+          <Divider y={2} />
+
           <Row>
             <Col>
               <Text h5>Blockchains</Text>
diff --git a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
index b13b0a5..4c95357 100644
--- a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
@@ -1,8 +1,8 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequestDataCard from '@/components/RequestDataCard'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
-import { truncate } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { Button, Col, Container, Divider, Loading, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'
@@ -60,56 +60,9 @@ export default function SessionSendTransactionModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
-          <Row>
-            <Col>
-              <Text h5>From</Text>
-              <Text color="$gray400">{truncate(transaction.from, 30)}</Text>
-            </Col>
-          </Row>
-
           <Divider y={2} />
 
-          <Row>
-            <Col>
-              <Text h5>To</Text>
-              <Text color="$gray400">{truncate(transaction.to, 30)}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Value</Text>
-              <Text color="$gray400">{transaction.value}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Gas Price</Text>
-              <Text color="$gray400">{transaction.gasPrice}</Text>
-            </Col>
-            <Col>
-              <Text h5>Gas Limit</Text>
-              <Text color="$gray400">{transaction.gasLimit}</Text>
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col>
-              <Text h5>Nonce</Text>
-              <Text color="$gray400">{transaction.nonce}</Text>
-            </Col>
-            <Col>
-              <Text h5>Data</Text>
-              <Text color="$gray400">{transaction.data}</Text>
-            </Col>
-          </Row>
+          <RequestDataCard data={transaction} />
 
           <Divider y={2} />
 
diff --git a/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx
index 798acf7..38fd1fc 100644
--- a/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx
@@ -1,11 +1,11 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequestDataCard from '@/components/RequestDataCard'
 import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
 import ModalStore from '@/store/ModalStore'
 import { approveCosmosRequest, rejectCosmosRequest } from '@/utils/CosmosRequestHandler'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
-import { CodeBlock, codepen } from 'react-code-blocks'
 
 export default function SessionSignCosmosModal() {
   // Get request and wallet data from store
@@ -56,6 +56,8 @@ export default function SessionSignCosmosModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
+          <Divider y={2} />
+
           <Row>
             <Col>
               <Text h5>Blockchain</Text>
@@ -67,17 +69,7 @@ export default function SessionSignCosmosModal() {
 
           <Divider y={2} />
 
-          <Row>
-            <Col>
-              <Text h5>Data</Text>
-              <CodeBlock
-                showLineNumbers={false}
-                text={JSON.stringify(params, null, 2)}
-                theme={codepen}
-                language="json"
-              />
-            </Col>
-          </Row>
+          <RequestDataCard data={params} />
 
           <Divider y={2} />
 
diff --git a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignModal.tsx
index be6516d..8b3f018 100644
--- a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionSignModal.tsx
@@ -59,6 +59,8 @@ export default function SessionSignModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
+          <Divider y={2} />
+
           <Row>
             <Col>
               <Text h5>Blockchain</Text>
diff --git a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
index afb9fc5..c603723 100644
--- a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
@@ -1,4 +1,5 @@
 import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequestDataCard from '@/components/RequestDataCard'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
@@ -6,7 +7,6 @@ import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
-import { CodeBlock, codepen } from 'react-code-blocks'
 
 export default function SessionSignTypedDataModal() {
   // Get request and wallet data from store
@@ -60,6 +60,8 @@ export default function SessionSignTypedDataModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
+          <Divider y={2} />
+
           <Row>
             <Col>
               <Text h5>Blockchain</Text>
@@ -71,45 +73,7 @@ export default function SessionSignTypedDataModal() {
 
           <Divider y={2} />
 
-          <Row>
-            <Col className="codeBlock">
-              <Text h5>Domain</Text>
-              <CodeBlock
-                showLineNumbers={false}
-                text={JSON.stringify(data.domain, null, 2)}
-                theme={codepen}
-                language="json"
-              />
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col className="codeBlock">
-              <Text h5>Types</Text>
-              <CodeBlock
-                showLineNumbers={false}
-                text={JSON.stringify(data.types, null, 2)}
-                theme={codepen}
-                language="json"
-              />
-            </Col>
-          </Row>
-
-          <Divider y={2} />
-
-          <Row>
-            <Col className="codeBlock">
-              <Text h5>Message</Text>
-              <CodeBlock
-                showLineNumbers={false}
-                text={JSON.stringify(data.message, null, 2)}
-                theme={codepen}
-                language="json"
-              />
-            </Col>
-          </Row>
+          <RequestDataCard data={data} />
 
           <Divider y={2} />
 
diff --git a/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx b/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx
index b1e177f..8bf10c8 100644
--- a/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx
@@ -28,6 +28,8 @@ export default function SessionUnsuportedMethodModal() {
         <Container css={{ padding: 0 }}>
           <ProjectInfoCard metadata={requestSession.peer.metadata} />
 
+          <Divider y={2} />
+
           <Row>
             <Col>
               <Text h5>Blockchain</Text>