Cleanup and unify request data display

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,7 +15,6 @@ export default function ProjectInfoCard({ metadata }: IProps) {
   const { icons, name, url } = metadata
 
   return (
-    <Fragment>
     <Row align="center">
       <Col span={3}>
         <Avatar src={icons[0]} />
@@ -26,8 +24,5 @@ export default function ProjectInfoCard({ metadata }: IProps) {
         <Link href={url}>{url}</Link>
       </Col>
     </Row>
-
-      <Divider y={2} />
-    </Fragment>
   )
 }

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>
+  )
+}

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 (

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>

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>
+          <RequestDataCard data={transaction} />
-            <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>
 
           <Divider y={2} />
 

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>
+          <RequestDataCard data={params} />
-            <Col>
-              <Text h5>Data</Text>
-              <CodeBlock
-                showLineNumbers={false}
-                text={JSON.stringify(params, null, 2)}
-                theme={codepen}
-                language="json"
-              />
-            </Col>
-          </Row>
 
           <Divider y={2} />
 

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>

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>
+          <RequestDataCard data={data} />
-            <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>
 
           <Divider y={2} />
 

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>