Cleanup session project data display

wallets/react-wallet-v2/package.json

@@ -31,7 +31,7 @@
     "@types/react": "17.0.39",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0",
-    "eslint-config-prettier": "8.4.0",
+    "eslint-config-prettier": "8.5.0",
     "prettier": "2.5.1",
     "typescript": "4.6.2"
   }

wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx

@@ -0,0 +1,33 @@
+import { Avatar, Col, Divider, Link, Row, Text } from '@nextui-org/react'
+import { SessionTypes } from '@walletconnect/types'
+import { Fragment } from 'react'
+
+/**
+ * Types
+ */
+interface IProps {
+  metadata: SessionTypes.Participant['metadata']
+}
+
+/**
+ * Components
+ */
+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>
+  )
+}

wallets/react-wallet-v2/src/pages/session.tsx

@@ -1,10 +1,11 @@
 import AccountSelectCard from '@/components/AccountSelectCard'
 import PageHeader from '@/components/PageHeader'
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
-import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil'
+import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Avatar, Button, Col, Divider, Link, Row, Text } from '@nextui-org/react'
+import { Button, Col, Divider, Row, Text } from '@nextui-org/react'
 import { ERROR } from '@walletconnect/utils'
 import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
@@ -30,7 +31,6 @@ export default function SessionPage() {
   }
 
   // Get necessary data from session
-  const { name, url, icons } = session.peer.metadata
   const expiryDate = new Date(session.expiry * 1000)
   const { chains } = session.permissions.blockchain
   const { methods } = session.permissions.jsonrpc
@@ -72,24 +72,12 @@ export default function SessionPage() {
     <Fragment>
       <PageHeader title="Session Details" />
 
-      <Row align="center">
+      <ProjectInfoCard metadata={session.peer.metadata} />
-        <Col css={{ flex: 1 }}>
-          <Avatar size="xl" src={icons[0]} />
-        </Col>
-        <Col css={{ marginLeft: '$5' }}>
-          <Text h5>{name}</Text>
-          <Link css={{ marginLeft: '$5' }} href={url}>
-            {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
-          </Link>
-        </Col>
-      </Row>
 
       {chains.map(chain => {
         if (isEIP155Chain(chain)) {
           return (
             <Fragment key={chain}>
-              <Divider y={1} />
-
               <Row>
                 <Col>
                   <Text h5>EIP155 Accounts</Text>

wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts

@@ -1,4 +1,4 @@
-import { Cosmos } from '@/utils/CosmosUtil'
+import { Cosmos } from '@/lib/Cosmos'
 
 export let wallet1: Cosmos
 export let wallet2: Cosmos

wallets/react-wallet-v2/src/views/SessionProposalModal.tsx

@@ -1,4 +1,5 @@
 import AccountSelectCard from '@/components/AccountSelectCard'
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
@@ -6,7 +7,7 @@ import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
 import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionProposalModal() {
@@ -23,7 +24,6 @@ export default function SessionProposalModal() {
 
   // Get required proposal data
   const { proposer, permissions, relay } = proposal
-  const { icons, name, url } = proposer.metadata
   const { chains } = permissions.blockchain
   const { methods } = permissions.jsonrpc
   const { protocol } = relay
@@ -90,17 +90,7 @@ export default function SessionProposalModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={proposer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx

@@ -1,20 +1,10 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 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 {
+import { Button, Col, Container, Divider, Loading, Modal, Row, Text } from '@nextui-org/react'
-  Avatar,
-  Button,
-  Col,
-  Container,
-  Divider,
-  Link,
-  Loading,
-  Modal,
-  Row,
-  Text
-} from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionSendTransactionModal() {
@@ -33,7 +23,6 @@ export default function SessionSendTransactionModal() {
   const { chainId } = requestEvent
   const { method, params } = requestEvent.request
   const { protocol } = requestSession.relay
-  const { name, icons, url } = requestSession.peer.metadata
   const transaction = params[0]
 
   // Handle approve action
@@ -69,17 +58,7 @@ export default function SessionSendTransactionModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={requestSession.peer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx

@@ -1,8 +1,9 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 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 { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 import { CodeBlock, codepen } from 'react-code-blocks'
 
@@ -20,7 +21,6 @@ export default function SessionSignCosmosModal() {
   const { chainId } = requestEvent
   const { method, params } = requestEvent.request
   const { protocol } = requestSession.relay
-  const { name, icons, url } = requestSession.peer.metadata
 
   // Handle approve action (logic varies based on request method)
   async function onApprove() {
@@ -54,17 +54,7 @@ export default function SessionSignCosmosModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={requestSession.peer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/src/views/SessionSignModal.tsx

@@ -1,9 +1,10 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { getSignParamsMessage } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionSignModal() {
@@ -20,7 +21,6 @@ export default function SessionSignModal() {
   const { chainId } = requestEvent
   const { method, params } = requestEvent.request
   const { protocol } = requestSession.relay
-  const { name, icons, url } = requestSession.peer.metadata
 
   // Get message, convert it to UTF8 string if it is valid hex
   const message = getSignParamsMessage(params)
@@ -57,17 +57,7 @@ export default function SessionSignModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={requestSession.peer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx

@@ -1,9 +1,10 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
 import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 import { CodeBlock, codepen } from 'react-code-blocks'
 
@@ -21,7 +22,6 @@ export default function SessionSignTypedDataModal() {
   const { chainId } = requestEvent
   const { method, params } = requestEvent.request
   const { protocol } = requestSession.relay
-  const { name, icons, url } = requestSession.peer.metadata
 
   // Get data
   const data = getSignTypedDataParamsData(params)
@@ -58,17 +58,7 @@ export default function SessionSignTypedDataModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={requestSession.peer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx

@@ -1,6 +1,7 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
-import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
 export default function SessionUnsuportedMethodModal() {
@@ -16,7 +17,6 @@ export default function SessionUnsuportedMethodModal() {
   // Get required request data
   const { chainId } = requestEvent
   const { method } = requestEvent.request
-  const { name, icons, url } = requestSession.peer.metadata
 
   return (
     <Fragment>
@@ -26,17 +26,7 @@ export default function SessionUnsuportedMethodModal() {
 
       <Modal.Body>
         <Container css={{ padding: 0 }}>
-          <Row align="center">
+          <ProjectInfoCard metadata={requestSession.peer.metadata} />
-            <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} />
 
           <Row>
             <Col>

wallets/react-wallet-v2/yarn.lock

@@ -1879,10 +1879,10 @@ eslint-config-next@12.1.0:
     eslint-plugin-react "^7.27.0"
     eslint-plugin-react-hooks "^4.3.0"
 
-eslint-config-prettier@8.4.0:
+eslint-config-prettier@8.5.0:
-  version "8.4.0"
+  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
-  integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
 eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
   version "0.3.6"